/* ══════════════════════════════════════════════════════════════════
   PEAR · ATELIER DESIGN SYSTEM
   The visual language for the landing view. Loaded AFTER
   pear-tailwind.css so it wins on the sections it owns; the docs and
   contact views still run on the Tailwind utilities and are only
   re-skinned here through the shared tokens.

   BIDI · this site is Hebrew-first with an English alternate, and the
   two share one stylesheet. Every directional value below is a logical
   property (inline-start / inline-end / margin-inline), never left or
   right - the layout mirrors itself when i18n.js flips dir="rtl" and
   nothing needs a second rule.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1 · TOKENS ─────────────────────────── */
:root {
  --pa-beige:       #F4F1EA;
  --pa-beige-deep:  #EFECE4;
  --pa-beige-shade: #E5E1D6;
  --pa-onyx:        #0D0D0D;
  --pa-onyx-soft:   #17171A;
  --pa-pear:        #9BB53A;
  --pa-pear-deep:   #8EA633;
  --pa-pear-glow:   rgba(155, 181, 58, .35);
  --pa-white:       #FFFFFF;

  --pa-ink:      rgba(13, 13, 13, 1);
  --pa-ink-70:   rgba(13, 13, 13, .70);
  --pa-ink-50:   rgba(13, 13, 13, .50);
  --pa-ink-35:   rgba(13, 13, 13, .35);
  --pa-ink-20:   rgba(13, 13, 13, .20);
  --pa-hair:     rgba(13, 13, 13, .08);
  --pa-hair-soft:rgba(13, 13, 13, .05);

  --pa-lift-1: 0 1px 2px rgba(13,13,13,.03), 0 8px 24px -12px rgba(13,13,13,.10);
  --pa-lift-2: 0 2px 4px rgba(13,13,13,.03), 0 18px 48px -20px rgba(13,13,13,.16);
  --pa-lift-3: 0 4px 8px rgba(13,13,13,.04), 0 40px 90px -32px rgba(13,13,13,.24);

  /* Inter Tight carries Latin; Heebo has no Latin competition here
     because Inter Tight resolves first, and it catches every Hebrew
     glyph Inter Tight cannot draw. One stack, two scripts.

     Metric-override fallback faces (ascent/descent/size-adjust on a
     local Arial) were tried here to absorb the font-swap reflow and
     were REVERTED: measured against this page they made it worse, not
     better - mobile CLS went 0.0001 → 0.134, because the overrides
     moved first paint further from the system metrics the swap was
     already close to. Do not re-add them without measuring. */
  --pa-sans:  'Inter Tight', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --pa-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --pa-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pa-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --pa-measure: 1440px;
  --pa-radius: 22px;
  --pa-radius-lg: 34px;
  --pa-pill: 999px;

  /* --pa-nav-h stood here, a measured publication of the fixed nav
     capsule's height. Its only consumer was the hero's badge row, which
     had to sit clear of the bar; both badges are gone, so the token and
     its two media-query re-declarations are gone with them. Nothing on
     the page needs to know how tall the navbar is any more, which is
     also what frees the bar below to be sized purely by eye. */

  --pa-ease-out: cubic-bezier(.16, 1, .3, 1);
  --pa-ease-io:  cubic-bezier(.65, .05, .36, 1);
}

/* ──────────────────── 2 · GROUND + TYPE BASE ────────────────────── */
/* Scoped to the landing view so the docs/contact Tailwind pages are
   not dragged into a palette they were not designed against. */
body.pa {
  background: var(--pa-beige);
  color: var(--pa-ink);
  font-family: var(--pa-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.pa ::selection { background: var(--pa-pear); color: var(--pa-onyx); }

body.pa :focus-visible {
  outline: 2px solid var(--pa-pear-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.pa-shell {
  width: 100%;
  max-width: var(--pa-measure);
  margin-inline: auto;
  padding-inline: var(--pa-gutter);
}

.pa-section { position: relative; z-index: 2; }
/* Was clamp(5.5rem, 12vw, 11rem) - 176px of air above AND below every
   section on a desktop, so any two neighbours were pushed 352px apart
   and the page read as four unrelated screens. At this scale a section
   break is still unmistakable and the whole landing view fits into
   roughly one fewer screen of scrolling. */
.pa-pad { padding-block: clamp(3.25rem, 6.5vw, 5.75rem); }
/* Consecutive padded sections would otherwise stack their two paddings
   into a gap twice the size of the one either section asked for. */
.pa-pad + .pa-pad { padding-block-start: 0; }

/* ── display type ── */
.pa-display {
  font-family: var(--pa-sans);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.pa-d-xl { font-size: clamp(2.3rem, 5.2vw, 5.6rem); }
.pa-d-lg { font-size: clamp(2rem, 4.6vw, 4.4rem); letter-spacing: -0.04em; }
.pa-d-md { font-size: clamp(1.6rem, 3vw, 2.8rem); letter-spacing: -0.035em; line-height: 1; }

/* Hebrew is a heavier, wider script with no true italic and no
   descender-driven rhythm; the Latin tracking that reads as tailored
   reads as cramped set in Heebo, so it is relaxed back here. */
[lang="he"] .pa-display,
[dir="rtl"] .pa-display {
  letter-spacing: -0.015em;
  line-height: 1.06;
  font-weight: 700;
}

/* The serif accent face carries no Hebrew glyphs at all. Rather than
   let it silently fall back mid-headline, it is switched off outside
   Latin and the emphasis is carried by colour alone. */
.pa-serif {
  font-family: var(--pa-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--pa-pear-deep);
}
[lang="he"] .pa-serif,
[dir="rtl"] .pa-serif {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
}

.pa-eyebrow {
  font-family: var(--pa-mono);
  font-size: clamp(.62rem, .78vw, .72rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pa-ink-50);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.pa-eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pa-pear);
  box-shadow: 0 0 0 4px var(--pa-pear-glow);
  flex: none;
}
/* Hebrew has no uppercase, and letter-spacing on Hebrew breaks the
   ligature-free flow of the script into loose beads. */
[lang="he"] .pa-eyebrow,
[dir="rtl"] .pa-eyebrow {
  text-transform: none;
  letter-spacing: .04em;
  font-family: var(--pa-sans);
  font-weight: 600;
  font-size: .74rem;
}

.pa-lede {
  font-size: clamp(1rem, 1.3vw, 1.24rem);
  line-height: 1.6;
  color: var(--pa-ink-70);
  max-width: 48ch;
  text-wrap: pretty;
}

.pa-brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(96deg, var(--pa-pear-deep), var(--pa-pear));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* ─────────── 2a · THE BRAND NAME · one rule, every occurrence ──────
   Every visible "PEAR" on the site - headings, body copy, badges,
   buttons, the nav and footer wordmarks, the guide, the contact view,
   Hebrew and English alike - is wrapped in <span class="brand-pear">
   and styled from here. i18n copy already ships that class inside its
   markup keys, so the dictionary needs no second class name.

   This rule is UNSCOPED on purpose. The docs and contact views are not
   under the atelier palette, but they carry the brand name too, and the
   name has to look the same in all three views or the "one brand" claim
   fails on the two pages a developer actually reads.

   What is enforced here: family, weight, case and tracking. COLOUR is
   not - it is layered on below, per surface, so the name can sit on
   cream, on onyx and inside a filled button without a second wrapper
   class.

   Playfair Display is Latin-only with no Hebrew coverage, which is
   exactly why this is safe where the old Didot rule was not: the span
   this class lands on NEVER contains Hebrew - every occurrence wraps
   only the four Latin letters "PEAR", even mid-sentence in the Hebrew
   UI, so there is no glyph for the font to fail to draw and nothing to
   fall back out of. text-transform:uppercase is redundant on top of
   that (the dictionary already spells the word in caps everywhere) but
   costs nothing and guarantees it if that ever changes. */
.brand-pear {
  font-family: 'Playfair Display', Didot, 'Bodoni MT', 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* display:inline-block is what the brief specifies, and it is safe
     here specifically because every .brand-pear span is a single
     no-wrap word (white-space below) sitting inline in a text run -
     never a multi-word phrase. An inline-block that could line-wrap
     mid-content is what breaks vertical rhythm; a single atomic word
     does not. */
  display: inline-block;
  font-feature-settings: 'kern' 1, 'liga' 1;
  white-space: nowrap;
}

/* The wordmark takes the pear gradient in running copy. Excluded:
   --ink (the nav/footer lockups, which sit beside the logo mark and
   must match its solid black) and --on-dark (onyx surfaces, handled
   further down). A gradient clipped to text renders as transparent
   wherever it is NOT wanted, so every exclusion here is load-bearing. */
body.pa .brand-pear:not(.brand-pear--ink) {
  background: linear-gradient(96deg, var(--pa-pear-deep), var(--pa-pear));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand-pear--ink { color: inherit; }

/* ───────────── 2b · LEGACY CLASS COMPATIBILITY LAYER ─────────────
   The dictionary does not ship plain strings - several entries carry
   markup, and that markup carries the OLD Tailwind utilities baked in
   (text-pear-600, brand-pear, text-slate-700 …). Those classes arrive
   through innerHTML at translation time, so they cannot be edited out
   of the page without editing i18n.js and re-translating both
   languages. They are re-skinned here instead: same class names, new
   palette. Remove this block only if the dictionary is ever rewritten.

   .text-pear-600 in pear-tailwind.css is rgb(5 150 105) - the previous
   emerald brand colour. Left alone it repaints every headline accent
   on the page in the palette this redesign replaced. */
body.pa .text-pear-600,
body.pa .text-pear-700,
body.pa .hover\:text-pear-600:hover { color: var(--pa-pear-deep); }

body.pa .text-slate-700 { color: var(--pa-ink); }
body.pa .border-pear-100 { border-color: rgba(155,181,58,.3); }
body.pa .border-slate-200 { border-color: var(--pa-hair); }
body.pa .bg-slate-100 { background-color: var(--pa-beige-deep); }
body.pa .font-mono { font-family: var(--pa-mono); }

/* On the onyx panels the same utilities have to invert or the copy
   they colour drops out of the surface entirely. */
body.pa .pa-close .text-slate-700 { color: var(--pa-beige); }
body.pa .pa-close .text-pear-600,
body.pa .pa-close .text-pear-700 { color: var(--pa-pear); }
/* Every dark surface on the site, in one list: the closing CTA, the
   contact aside, the guide's help card and the access gate. The name is
   lifted off near-black rather than clipped to the deep-pear gradient,
   which goes muddy on onyx. */
body.pa .pa-close .brand-pear,
body.pa .pa-contact__card .brand-pear,
body.pa .pa-guide__help .brand-pear,
body.pa .pa-gate__card .brand-pear {
  background: linear-gradient(96deg, var(--pa-pear), #C6DA6B);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ───────────────────── 3 · WEBGL + ATMOSPHERE ───────────────────── */
#pearStage {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--pa-ease-out);
}
#pearStage.is-ready { opacity: 1; }
#pearStage canvas { width: 100% !important; height: 100% !important; display: block; }

#pageBg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%,   rgba(255,255,255,.55), transparent 60%),
    radial-gradient(100% 60% at 50% 100%, rgba(229,225,214,.5),  transparent 55%);
  mix-blend-mode: multiply;
  opacity: .55;
}

/* ─────────────────────────── 4 · CURSOR ─────────────────────────── */
.pa-cursor { position: fixed; top: 0; left: 0; z-index: 240; pointer-events: none; }
.pa-cursor__dot,
.pa-cursor__ring {
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
.pa-cursor__dot {
  width: 6px; height: 6px; background: var(--pa-onyx);
  transition: opacity .25s var(--pa-ease-out);
}
.pa-cursor__ring {
  width: 38px; height: 38px;
  border: 1px solid var(--pa-onyx);
  /* difference flips the ring against onyx panels automatically, so a
     single cursor works over beige, white and black with no state */
  mix-blend-mode: difference;
  filter: invert(1);
  display: grid; place-items: center;
  transition:
    width .45s var(--pa-ease-out), height .45s var(--pa-ease-out),
    background-color .45s var(--pa-ease-out), border-color .45s var(--pa-ease-out);
}
.pa-cursor__label {
  font-family: var(--pa-mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pa-beige);
  opacity: 0; transform: scale(.6);
  transition: opacity .3s var(--pa-ease-out), transform .45s var(--pa-ease-out);
  white-space: nowrap;
}
.pa-cursor.is-hover .pa-cursor__ring {
  width: 74px; height: 74px;
  background: rgba(155,181,58,.22);
  border-color: var(--pa-pear);
}
.pa-cursor.is-hover .pa-cursor__dot { opacity: 0; }
.pa-cursor.is-badge .pa-cursor__ring {
  width: 104px; height: 104px;
  background: var(--pa-onyx);
  border-color: transparent;
  mix-blend-mode: normal;
  filter: none;
}
.pa-cursor.is-badge .pa-cursor__label { opacity: 1; transform: scale(1); }
.pa-cursor.is-badge .pa-cursor__dot { opacity: 0; }
.pa-cursor.is-down .pa-cursor__ring { transform: translate3d(-50%,-50%,0) scale(.86); }

@media (hover: hover) and (pointer: fine) {
  html.pa-cursor-on, html.pa-cursor-on * { cursor: none !important; }
}
@media (hover: none), (pointer: coarse) { .pa-cursor { display: none; } }

/* ──────────────────────── 5 · NAVIGATION ────────────────────────── */
/* The capsule is cut tight at every width. It used to stand 114px tall
   on a desktop and 69px on a phone, most of which was padding around a
   bar carrying a lockup, two links and one button. Nothing reads its
   height any more (--pa-nav-h and its only consumer, the hero's badge
   row, are both gone), so the figures below are chosen for how the bar
   looks rather than to keep a published token honest. */
body.pa .pa-nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 200;
  padding: clamp(.3rem, .7vw, .55rem) var(--pa-gutter);
  display: flex; justify-content: center;
  pointer-events: none;
  background: none; box-shadow: none; border: 0;
}
.pa-nav__bar {
  pointer-events: auto;
  width: 100%; max-width: var(--pa-measure);
  display: flex; align-items: center; gap: clamp(.3rem, 1vw, .8rem);
  padding-block: .2rem;
  padding-inline-start: .75rem; padding-inline-end: .2rem;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--pa-hair);
  border-radius: var(--pa-pill);
  box-shadow: var(--pa-lift-1);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  transition: background-color .5s var(--pa-ease-out), box-shadow .5s var(--pa-ease-out);
}
.pa-nav.is-stuck .pa-nav__bar {
  background: rgba(255,255,255,.88);
  box-shadow: var(--pa-lift-2);
}
.pa-nav__brand { display: flex; align-items: center; gap: .45rem; flex: none; }
.pa-nav__brand img { width: 17px; height: auto; }
/* The lockup beside the logo mark: same face and weight as every other
   "PEAR" on the page (it carries .brand-pear--ink), sized for the bar. */
.pa-nav__word { font-size: .88rem; }
.pa-nav__links { display: flex; align-items: center; gap: clamp(.15rem, .8vw, .75rem); margin-inline: auto; }
.pa-nav__link {
  position: relative; padding: .28rem .7rem;
  font-size: .78rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--pa-ink-70); border-radius: var(--pa-pill);
  transition: color .3s var(--pa-ease-out);
  white-space: nowrap;
}
.pa-nav__link::after {
  content: ''; position: absolute; inset-inline: .7rem; bottom: .12rem;
  height: 1px; background: var(--pa-onyx);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform .45s var(--pa-ease-out);
}
.pa-nav__link:hover { color: var(--pa-ink); }
.pa-nav__link:hover::after { transform: scaleX(1); }
.pa-nav__link.is-active { color: var(--pa-ink); }
.pa-nav__link.is-active::after { transform: scaleX(1); background: var(--pa-pear-deep); }

.pa-nav__tools { display: flex; align-items: center; gap: .35rem; flex: none; }

/* The bar's tallest child, and therefore what actually sets the
   capsule's height. body.pa-scoped because the base is `body.pa .pa-btn`
   at (0,2,1): a bare `.pa-nav__tools .pa-btn--sm` scores (0,2,0), loses,
   and silently leaves the CTA at its full desktop box - which is exactly
   how this bar got thick in the first place. */
body.pa .pa-nav__tools .pa-btn--sm { padding: .34rem .85rem; font-size: .74rem; }
/* The language switch, trimmed to sit level with the CTA rather than
   setting its own taller rhythm. */
.pa-nav__tools .pa-lang { padding: 2px; }
.pa-nav__tools .pa-lang__thumb { top: 2px; bottom: 2px; }
.pa-nav__tools .pa-lang button { font-size: .58rem; padding: .2rem .5rem; }

/* ═════════════════ LIQUID GLASS component system ══════════════════
   One translucent, blurred material recipe plus one drag-physics engine
   (makeElasticDrag, block 10), giving a draggable knob its rubber-band
   overshoot past the track's edges and a spring snap-back on release.
   .pa-glass is the track/surface look; .pa-glass-knob is the frosted
   circular handle that rides on top of it.

   The language switch is the only caller left. The system was built for
   three - the switch and the two video sound widgets - and the sound
   widgets are gone; the material rules below are kept as a system
   rather than folded into .pa-lang because they are still the recipe
   any future glass control should be cut from. ═══════════════════ */
.pa-glass {
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.38);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 8px 32px rgba(0,0,0,.22),
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -1px 3px rgba(0,0,0,.12);
}
.pa-glass-knob {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.64));
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.95);
  transition: transform .45s cubic-bezier(.175,.885,.32,1.275),
              left .45s cubic-bezier(.175,.885,.32,1.275),
              width .45s cubic-bezier(.175,.885,.32,1.275);
}
.is-dragging .pa-glass-knob { transition: none; }
/* transform itself is NOT set here: the language-switch thumb positions
   via transform:translateX(), so its edge-stretch has to be combined
   into that same string in JS rather than applied from a rule of its
   own. This rule only turns the spring transition off while a stretch
   is active, so the stretch tracks the pointer immediately instead of
   lagging behind it. */
.pa-glass-knob.is-elastic { transition: none; }

/* the flash at the moment a drag first reaches either edge */
.pa-glass-knob__shimmer {
  position: absolute; inset: -8px; border-radius: inherit;
  background: radial-gradient(circle, rgba(255,255,255,.95), transparent 70%);
  pointer-events: none; opacity: 0;
}
.pa-glass-knob__shimmer.is-active { animation: pa-glass-shimmer .55s ease-out; }
@keyframes pa-glass-shimmer {
  0%   { opacity: .95; transform: scale(.6); }
  55%  { opacity: .4;  transform: scale(1.7); }
  100% { opacity: 0;   transform: scale(2.4); }
}

/* language switch - a glass track (.pa-glass, added in the markup)
   with a frosted knob (.pa-glass-knob) sliding under whichever button
   is active. JS (block 10) drives both position/width - measured off
   the active button's own box, so it works for two differently-sized
   labels in either language/direction - and the elastic drag. */
.pa-lang {
  position: relative;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--pa-pill);
  cursor: grab;
}
.pa-lang.is-dragging { cursor: grabbing; }
.pa-lang__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 0; z-index: 0;
  border-radius: var(--pa-pill);
  pointer-events: none;          /* the group, not the thumb, owns the drag */
  touch-action: none;
}
.pa-lang button {
  position: relative; z-index: 1;
  font-family: var(--pa-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .08em;
  padding: .34rem .6rem; border-radius: var(--pa-pill);
  color: var(--pa-ink-50); background: none; border: 0; cursor: pointer;
  transition: color .3s;
}
.pa-lang button:hover { color: var(--pa-ink); }
.pa-lang button[aria-pressed="true"] { color: var(--pa-ink); font-weight: 700; }

/* The video sound widgets (.pa-glass-sound, .pa-glass-btn and the whole
   custom .pa-glass-slider - track, fill, thumb and its hover/touch
   reveal) stood here and are REMOVED. The hero film is silent and has
   no controls; nothing else on the site ever used them.

   .pa-glass and .pa-glass-knob above are NOT part of that removal: the
   language switch is their other caller and still draws its track and
   sliding thumb from them, shimmer and elastic states included. */

/* ──────────────────────── 6 · BUTTONS ───────────────────────────── */
body.pa .pa-btn {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem;
  border-radius: var(--pa-pill);
  font-size: .88rem; font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap; text-align: center;
  isolation: isolate; overflow: hidden; cursor: pointer;
  border: 0;
  transition: color .4s var(--pa-ease-out), border-color .4s var(--pa-ease-out);
}
/* the fill wipes up from the bottom edge rather than fading - the
   direction is what makes the hover read as physical */
body.pa .pa-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transform: translateY(101%);
  transition: transform .55s var(--pa-ease-out);
}
body.pa .pa-btn:hover::before { transform: translateY(0); }
.pa-btn svg { width: 16px; height: 16px; flex: none; }

.pa-btn--primary { background: var(--pa-onyx); color: var(--pa-beige); padding-block: 1rem; }
.pa-btn--primary::before { background: var(--pa-pear); }
.pa-btn--primary:hover { color: var(--pa-onyx); }

.pa-btn--pear { background: var(--pa-pear); color: var(--pa-onyx); font-weight: 600; }
.pa-btn--pear::before { background: var(--pa-onyx); }
.pa-btn--pear:hover { color: var(--pa-beige); }

/* body.pa-scoped so it outranks the `border: 0` on the base .pa-btn
   rule above, which is itself scoped to beat Tailwind's preflight. */
body.pa .pa-btn--ghost { border: 1px solid var(--pa-ink-20); color: var(--pa-ink); background: transparent; }
body.pa .pa-btn--ghost::before { background: var(--pa-onyx); }
body.pa .pa-btn--ghost:hover { color: var(--pa-beige); border-color: var(--pa-onyx); }

.pa-btn--sm { padding: .62rem 1.05rem; font-size: .8rem; }

/* .pa-btn--pulse was REMOVED: the halo it drew existed for exactly one
   element - the closing CTA's "try the widget" button - and that button
   is gone, because it scrolled the visitor back up to a playground they
   had already passed. The class has no other caller in the project.

   @keyframes pa-halo STAYS, and is not dead with it: .pa-dot::after in
   §8 drives the pulsing green dot inside the "real-time fit" badge off
   the same animation, and that badge is still on the hero. */
@keyframes pa-halo {
  0%   { transform: scale(1);    opacity: .9; }
  70%, 100% { transform: scale(1.22); opacity: 0; }
}

/* ─────────────── 7 · KINETIC TYPE + REVEAL PRIMITIVES ───────────── */
/* Scoped under .pa-js so a no-script visitor never meets hidden text.
   The mask that hides an incoming line also clips descenders on the
   resting line, so the box grows past the baseline and the growth is
   pulled back out of the layout. */
.pa-js .pa-line {
  display: block; overflow: hidden;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.pa-js .pa-line > span { display: block; will-change: transform; transform: translateY(110%); }
.pa-js [data-pa-reveal] { opacity: 0; }
.pa-js [data-pa-stagger] > * { opacity: 0; }

/* ────────────────────── 8 · SKYLINE HERO ────────────────────────── */
/* The landing view opens on the film itself: pear-ad.mp4 at full bleed
   behind the copy. The old hero (centred copy on beige, the clip framed
   underneath) is gone - its markup and its i18n keys are not. Every key
   the copy block uses is the same one it always used.

   ONE VIEWPORT TALL, IN NORMAL FLOW. The section was briefly a ~275vh
   scroll runway with a position:sticky stage, because scroll was
   driving the clip's currentTime and a scrub needs somewhere to happen.
   That is all removed: the clip is an ordinary autoplaying background
   video, so the runway had nothing left to measure and the sticky had
   nothing left to hold. Height is exactly 100svh and the hero scrolls
   away like any other section.

   svh rather than vh: on mobile Safari and Chrome the 100vh box is the
   tallest the viewport ever gets, so the stage is cropped by the URL
   bar until the visitor scrolls. svh is the smallest, which is the one
   that is always actually on screen. */
.pa-skyline {
  position: relative; z-index: 3;
  height: 100svh;
  /* Overlay ink. The page's own ground colour, used as type colour over
     the film - which ties the overlay to the palette instead of
     dropping a generic white on top of it. */
  --sk-paper: #F4F1EA;
  /* --pa-pear-deep is a 4.2:1 accent ON BEIGE. Over a dark film it
     drops under 3:1, so the headline's accent line gets a lifted pear
     that clears 7:1 on the veil. Same hue, different ground. */
  --sk-pear-lit: #C3D96B;
  --sk-shade: 9, 10, 7;
}
.pa-skyline__stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--pa-onyx);
  isolation: isolate;
  /* One named cell, so every layer - film, veil, copy, badges, sound
     widget - stacks in the same area without a single position:absolute
     inset chain. z-index alone orders them. */
  display: grid;
  grid-template-areas: 'stage';
  place-items: stretch;
}
.pa-skyline__stage > * { grid-area: stage; min-width: 0; }

/* ── the film ──
   cover, not contain: a 100svh stage letterboxed top and bottom is a
   framed player again, which is the thing this section replaced.
   object-position sits at 32% rather than centre because the clip's
   subject is a person and the crop has to take the floor, not the
   head - the same concern the old framed player solved with contain.
   Portrait viewports are the case cover cannot save (a 16:9 clip in a
   9:19 hole crops to a sliver), so those letterbox instead; the onyx
   stage behind reads as a deliberate frame there. */
.pa-skyline__film {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 32%;
  background: var(--pa-onyx);
  z-index: 0;
}
/* Tablet portrait only, and the lower bound is load-bearing. Below
   768px the hero is a PHONE-shaped full-bleed film with the copy
   overlaid on it (see the 767.98px block), and letterboxing a 9:19
   viewport leaves the copy sitting on black bars instead of on the
   picture. So `contain` is confined to the one band - a portrait
   tablet - where the frame is close enough to 16:9 that the bars are
   thin and the crop would otherwise take most of the width. */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 860px) {
  .pa-skyline__film { object-fit: contain; }
}

/* ── the veil ──
   Three gradients, each earning its place: a short top wash so the
   white glass navbar reads as an object against a bright frame, a deep
   bottom wash carrying the copy, and an inline-start wash so the
   headline holds its own on a light frame. The side wash is the only
   one that has to flip with direction. */
.pa-skyline__veil {
  z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--sk-shade), .42) 0%, rgba(var(--sk-shade), 0) 17%),
    linear-gradient(to top,    rgba(var(--sk-shade), .88) 0%, rgba(var(--sk-shade), .52) 28%, rgba(var(--sk-shade), 0) 62%),
    linear-gradient(to left,   rgba(var(--sk-shade), .52) 0%, rgba(var(--sk-shade), 0) 58%);
}
html[dir="ltr"] .pa-skyline__veil {
  background:
    linear-gradient(to bottom, rgba(var(--sk-shade), .42) 0%, rgba(var(--sk-shade), 0) 17%),
    linear-gradient(to top,    rgba(var(--sk-shade), .88) 0%, rgba(var(--sk-shade), .52) 28%, rgba(var(--sk-shade), 0) 62%),
    linear-gradient(to right,  rgba(var(--sk-shade), .52) 0%, rgba(var(--sk-shade), 0) 58%);
}

/* ── the copy ──
   Lower inline-start third, not centred. Centred copy over video is the
   default treatment for every hero of this shape; start-aligned reads
   as a film title card and, under dir=rtl, starts where the eye already
   is. pointer-events are handed back only to the .pa-shell inside, so
   the empty half of the stage never swallows a click. */
.pa-skyline__copy {
  z-index: 3;
  display: flex; align-items: flex-end;
  padding-block-end: clamp(4.5rem, 11vh, 8rem);
  pointer-events: none;
  /* `filter` was the third name here, because initSkyline used to blur
     this block as the hero left. That blur is REMOVED - a copy block
     softening over a sharp full-bleed film read as the video itself
     going out of focus - so the hint is trimmed to what is actually
     animated. That is the point of will-change: naming a property the
     page never animates asks the compositor to keep a layer ready for
     nothing, which costs memory and buys no frames. */
  will-change: transform, opacity;
}
.pa-skyline__copy > .pa-shell { pointer-events: auto; text-align: start; }
/* The headline and the lede take their own measures, in their OWN ch -
   which tracks each one's font-size, so both hold a sensible line length
   from 360px to 1920px. A single max-width on the parent cannot do this:
   its ch is the 1rem body figure, and at 58ch that capped the container
   near 460px, which forced the display-size Hebrew headline onto five
   lines at 1920 (measured 433px tall against English's 149px).

   These are start-aligned now rather than centred, so the auto inline
   margins the old centred hero needed are gone. The measures are not:
   they are what keeps the Hebrew headline off five lines at 1920. */
.pa-skyline__title {
  margin-block: 0 clamp(.85rem, 1.7vw, 1.3rem);
  max-width: 15ch;
  color: var(--sk-paper);
  /* Two shadows, not one: a tight dark offset that keeps the stems
     legible on a bright frame, and a wide soft pool that separates the
     whole block from whatever is moving behind it. A single blurred
     shadow does one job or the other, never both. */
  text-shadow: 0 1px 2px rgba(0,0,0,.42), 0 14px 44px rgba(0,0,0,.5);
}
/* hero.title's second line ships class="text-pear-600", which block 4
   maps to --pa-pear-deep - an accent picked against beige. Over the
   film it has to be the lifted pear instead. The dictionary string is
   byte-locked to the inline copy in index.html, so this is corrected
   here in CSS rather than by editing the key. */
.pa-skyline__title .text-pear-600 { color: var(--sk-pear-lit); }

/* A min-height reservation was tried on the lede to absorb the EN→HE
   language flip and REVERTED after measurement: the lede is TALLER in
   English while the headline is taller in Hebrew, so reserving the
   lede's three-line English case added height on top of a delta that
   already pointed the other way - 1280px CLS went 0.086 → 0.155. The
   flip has to be fixed where it happens (i18n.js paints DEFAULT_LANG
   first), not absorbed downstream. Measure before re-adding anything.

   Over the film that delta costs nothing anyway: the stage is a fixed
   100svh and the copy is anchored to its bottom edge, so a taller lede
   grows upward into empty frame instead of pushing the page. */
.pa-skyline__lede {
  max-width: 42ch;
  margin: 0;
  color: rgba(244, 241, 234, .84);
  text-shadow: 0 1px 16px rgba(0,0,0,.55);
}
/* The mono-label rule for `.pa-skyline__title > span[dir="ltr"]` was
   REMOVED with the kicker it styled. hero.title no longer ships an LTR
   product label in either dictionary, and the one span the headline
   still carries has no dir attribute, so the selector matched nothing
   in any language. */
.pa-skyline__actions {
  display: flex; flex-wrap: wrap; gap: .7rem;
  justify-content: flex-start;
  margin-top: clamp(1.15rem, 2.1vw, 1.6rem);
}
/* The primary CTA, INVERTED for the film. .pa-btn--primary is cut for
   beige: an onyx pill with paper type. The veil that carries the copy
   bottoms out near black, so on the film that pill was onyx on onyx -
   the button was genuinely invisible, at every width, and only the
   label could be read. Swapping the two colours is the whole fix: a
   paper pill with onyx type, which is also the treatment the headline
   above it already uses.

   The hover wipe needs no rule of its own. .pa-btn--primary::before
   already fills with --pa-pear and :hover already sets the label onyx,
   so paper → pear is a hover that lands correctly on the first try.

   (0,2,0), which beats .pa-btn--primary's own (0,1,0) and leaves the
   button on beige - the closing CTA's - exactly as it was. */
.pa-skyline__actions .pa-btn--primary {
  background: var(--sk-paper);
  color: var(--pa-onyx);
  box-shadow: 0 10px 30px rgba(0,0,0,.34);
}

/* The ghost-button re-cut that lived here went with the secondary CTA
   it styled. .pa-btn--ghost itself is untouched and still drawn for
   beige; there is simply no ghost button on the film any more.

   The measuring-tape scrub rail (.pa-skyline__tape, __tapeRead, __rail,
   __tapeHead) and the scroll invitation (.pa-skyline__hint plus its
   @keyframes sk-nudge) were removed with the scrubbing. The tape read a
   --sk-progress that nothing writes now, and the hint asked for a
   gesture the clip no longer needs. Neither class has any other caller
   in the project, so both rulesets are deleted rather than orphaned. */

/* ── the badges ──
   .pa-skyline__badges and its two pills are REMOVED at every width,
   with their markup and their hero.badgeSize / hero.badgeRealtime keys.
   The --pa-nav-h token went with them: this row was its only consumer,
   so all three of its declarations were left describing nothing. */

/* The .is-playing block that stood here (copy hidden, badges hidden,
   with an !important to beat the scrub's inline opacity) went with the
   secondary CTA that set the class. Nothing writes .is-playing,
   .is-ready, .is-scrubbing or .is-complete on the hero any more.

   The badges' `transition: opacity` went with it: nothing animates
   their opacity any more, so the declaration was doing nothing.

   The glassmorphic proof pills (.pa-proof / .pa-skyline__proof) were
   removed earlier, along with their markup; #value restates all three
   claims as counters further down the page. */

/* ── reduced motion ──
   The .is-static fallback class that stood here is gone with the rest
   of the scrub machinery: it existed to collapse a scroll runway and
   un-stick a sticky stage, and the hero now has neither - it is a plain
   100svh section whether or not any script runs. What still has to be
   handled is the copy's fade-and-lift exit, which initSkyline skips
   entirely under reduced motion; these rules are the belt to that
   braces, so the copy is opaque and upright even if a tween managed to
   land first.

   `filter: none !important` stood alongside these two and is gone with
   the blur it neutralised: nothing sets a filter on this element any
   more, at any scroll position, so the override had nothing left to
   override. */
@media (prefers-reduced-motion: reduce) {
  .pa-skyline__copy {
    opacity: 1 !important; transform: none !important;
  }
}

.pa-badge {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--pa-hair);
  border-radius: var(--pa-pill);
  box-shadow: var(--pa-lift-1);
  font-size: .74rem; font-weight: 500;
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
/* .pa-badge and .pa-badge .font-mono are KEPT, and are not orphans:
   .pa-flip__badge in the playground is their remaining caller and does
   rely on the base's position:absolute. The --size and --live modifiers
   that the hero's two pills used are gone with those pills. */
.pa-badge .font-mono, .pa-badge span[class*="mono"] { color: var(--pa-pear-deep); font-family: var(--pa-mono); }

.pa-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pa-pear);
  flex: none; position: relative;
}
.pa-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--pa-pear); animation: pa-halo 2s var(--pa-ease-io) infinite;
}

/* ───────────────── 9 · ASYMMETRIC SECTION HEADERS ───────────────── */
.pa-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
}
.pa-head__title { margin-top: 1rem; }

/* One section's header set larger than the shared scale: the three
   pillars. Its title is the longest on the page in both languages
   ("שלושה עמודי תווך לרווחיות באופנה" / "Three pillars of fashion
   profitability"), and at .pa-d-lg it broke to three tight lines that
   read as a caption above the cards rather than as the claim they are
   evidence for.

   Set as its own step rather than by raising .pa-d-lg, which is shared
   with four other sections that are already correctly sized. The
   leading is opened alongside the size - a display line-height of .92
   is tuned for two words, not seven, and the Hebrew ascenders collide
   at that value. */
.pa-head--major { align-items: end; }
.pa-head__title--xl {
  font-size: clamp(2.5rem, 5.6vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.042em;
  font-weight: 650;
  max-width: 15ch;
  text-wrap: balance;
}
[lang="he"] .pa-head__title--xl,
[dir="rtl"] .pa-head__title--xl {
  /* Heebo has no true optical sizing and its ascenders run tall, so the
     same figure that reads as tight-and-tailored in Inter reads as
     collided here. Both values are relaxed, and the measure is widened
     because Hebrew words in this line are long. */
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  font-weight: 700;
  max-width: 19ch;
}

/* ───────────────────── 10 · PILLAR CARDS ────────────────────────── */
/* .pa-bento (a 6-column grid) stood here with .pa-w2/3/4/6 span helpers
   and a .pa-cell--onyx variant. The only thing that ever used them was
   the three-pillar row, which is now .pa-pillars - repeat(3) with no
   spans to keep in sync. .pa-cell and its parts stay: .pa-pillar is
   built on them. */
.pa-cell {
  position: relative; overflow: hidden;
  background: var(--pa-white);
  border: 1px solid var(--pa-hair);
  border-radius: var(--pa-radius);
  padding: clamp(1.35rem, 2.1vw, 2rem);
  display: flex; flex-direction: column;
  min-height: 210px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color .5s var(--pa-ease-out), box-shadow .5s var(--pa-ease-out);
}
.pa-cell:hover { border-color: var(--pa-ink-20); box-shadow: var(--pa-lift-2); }

/* cursor-tracked highlight; --mx/--my are written by the motion layer */
.pa-cell__glow {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(155,181,58,.20), transparent 68%);
  transition: opacity .45s var(--pa-ease-out);
}
.pa-cell:hover .pa-cell__glow { opacity: 1; }
.pa-cell > *:not(.pa-cell__glow) { position: relative; z-index: 1; transform: translateZ(30px); }

/* start, not space-between: the row used to hold a tag at one end and a
   status dot at the other. With the dot gone the mark and its tag are
   one label and belong beside each other. */
.pa-cell__head { display: flex; align-items: center; justify-content: flex-start; gap: .85rem; margin-bottom: auto; }
.pa-cell__tag {
  font-family: var(--pa-mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pa-ink-35);
}
[lang="he"] .pa-cell__tag, [dir="rtl"] .pa-cell__tag {
  font-family: var(--pa-sans); text-transform: none; letter-spacing: .02em;
  font-size: .68rem; font-weight: 600;
}
/* .pa-status / @keyframes pa-blip lived here: a pulsing dot in the head
   of each pillar card. Removed with the markup that carried it - three
   identical blinking dots labelled nothing, distinguished nothing, and
   ran an infinite animation beside body copy. The drawn marks below
   replace them. */

/* ── the pillar marks ──
   One 24-unit grid, one 1.6 stroke, three drawings. The tile is drawn
   here so the SVGs stay pure geometry: no fills, no colours, no size -
   they inherit all three, which is what lets the same three files sit on
   cream, on glass and on onyx without a variant each. */
.pa-mark {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  color: var(--pa-pear-deep);
  background: linear-gradient(150deg, rgba(155,181,58,.16), rgba(155,181,58,.05));
  border: 1px solid rgba(155,181,58,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition:
    transform .55s var(--pa-ease-out),
    background-color .45s var(--pa-ease-out),
    border-color .45s var(--pa-ease-out),
    box-shadow .45s var(--pa-ease-out);
}
.pa-mark svg { width: 23px; height: 23px; overflow: visible; }

/* The three strokes inside every mark carry the same three roles, so the
   set reads as one drawing system rather than three sketches: __body is
   the subject at full weight, __hair is the supporting geometry held
   back, __tick is the single accent that says what the pillar DOES. */
.pa-mark__body { opacity: 1; }
.pa-mark__hair { opacity: .42; }
.pa-mark__tick { color: var(--pa-pear); opacity: .9; stroke: currentColor; }

/* On hover the mark lifts and its accent completes - the drawn
   equivalent of the state the blinking dot was gesturing at, except it
   fires on intent instead of forever. */
.pa-cell:hover .pa-mark,
.pa-cell.is-touching .pa-mark {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(150deg, rgba(155,181,58,.28), rgba(155,181,58,.10));
  border-color: rgba(155,181,58,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 22px -12px var(--pa-pear-glow);
}
.pa-cell:hover .pa-mark__hair,
.pa-cell.is-touching .pa-mark__hair { opacity: .62; }

.pa-cell__title {
  margin: 1.5rem 0 .6rem;
  letter-spacing: -0.03em; font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.12;
}
[lang="he"] .pa-cell__title, [dir="rtl"] .pa-cell__title { letter-spacing: 0; line-height: 1.25; font-weight: 700; }
.pa-cell__body { font-size: .88rem; color: var(--pa-ink-70); text-wrap: pretty; }
.pa-cell__list { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--pa-hair-soft); display: grid; gap: .45rem; }
.pa-cell__list li { display: flex; align-items: baseline; gap: .55rem; font-size: .78rem; color: var(--pa-ink-50); list-style: none; }
.pa-cell__list li::before {
  content: ''; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--pa-pear); transform: translateY(-2px);
}

/* ── the three pillars · glass ──
   The base .pa-cell is an opaque white panel. These three sit directly
   over the 3D layer, which is the one place on the page where a
   translucent surface earns its cost: the silk and the pear drift behind
   the copy and the card reads as glass held over them rather than as a
   card with a blurry photo in it.

   backdrop-filter is the expensive part. It is confined to these three
   cards and gated on @supports, because where it is unsupported the
   fallback must be the OPAQUE panel - a semi-transparent card with no
   blur puts the 3D scene straight through the body copy, which is the
   exact failure this section is being redesigned away from. */
.pa-cell--pillar {
  background: var(--pa-white);
  border-color: rgba(13, 13, 13, .07);
  box-shadow: var(--pa-lift-1);
  transition:
    transform .5s var(--pa-ease-out),
    border-color .5s var(--pa-ease-out),
    box-shadow .5s var(--pa-ease-out),
    background-color .5s var(--pa-ease-out);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pa-cell--pillar {
    background: linear-gradient(155deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
            backdrop-filter: blur(20px) saturate(1.6);
    box-shadow:
      var(--pa-lift-1),
      inset 0 1px 0 rgba(255,255,255,.85);
  }
}

/* A hairline of light along the top edge, brightest at the corner the
   key light comes from. One pseudo-element instead of a second border,
   so it does not fight the rounded corners. */
.pa-cell--pillar::before {
  content: ''; position: absolute; z-index: 2;
  inset-inline: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  pointer-events: none;
}

.pa-cell--pillar:hover,
.pa-cell--pillar.is-touching {
  transform: translateY(-4px);
  border-color: rgba(155, 181, 58, .38);
  box-shadow:
    var(--pa-lift-3),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(155,181,58,.12);
}

/* The tilt writes rotationX/rotationY into the same transform this rule
   animates, so on a fine pointer the lift is handed to the highlight
   instead - two writers on one property is a card that snaps flat the
   moment the cursor enters it. */
@media (hover: hover) and (pointer: fine) {
  .pa-cell--pillar:hover { transform: none; }
}

/* ── the pillar row ──
   .pa-bento's 6-column grid is gone from this section: with exactly
   three equal cards it was three span-2 cells doing what repeat(3) does
   in one declaration, and the extra indirection meant every responsive
   step had to restate both the track count and the spans. */
.pa-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 1.2vw, 1.15rem);
  align-items: start;
}
.pa-pillar {
  /* Taller than the shared .pa-cell min-height because a metric now
     sits between the head and the title. Equal heights across the row
     come from align-items:stretch on the grid item itself. */
  min-height: 0;
  height: 100%;
  padding-block: clamp(1.5rem, 2.2vw, 2.1rem);
  cursor: default;
}
/* The card is focusable (tabindex=0) so the bullet reveal is reachable
   from the keyboard; it is not a control, so it takes the page's focus
   ring rather than a button's. */
.pa-pillar:focus-visible { outline: 2px solid var(--pa-pear-deep); outline-offset: 3px; }
.pa-pillar .pa-cell__head { margin-bottom: 0; }

/* ── the metric ──
   Set in the display face at a size that carries across the row, with
   tabular figures so a counting number does not shuffle the glyphs
   beside it on every frame. dir=ltr is on the element in the markup -
   a Hebrew paragraph must not reorder a figure and its unit. */
.pa-pillar__metric {
  margin: clamp(1rem, 1.8vw, 1.5rem) 0 0;
  font-family: var(--pa-sans);
  font-weight: 600; letter-spacing: -0.05em; line-height: .9;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-variant-numeric: tabular-nums;
  color: var(--pa-ink);
  display: flex; align-items: baseline;
}
/* The unit and the ~ qualifier: same colour relationship the tag has to
   the title, so they read as annotation rather than as part of the
   figure. font-style:normal because <i> is being used for its brevity
   as a hook, not for emphasis. */
.pa-pillar__metric i {
  font-style: normal;
  font-size: .42em; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--pa-pear-deep);
}
.pa-pillar__metricLabel {
  margin: .35rem 0 0;
  font-size: .76rem; font-weight: 500;
  color: var(--pa-ink-50);
}
.pa-pillar .pa-cell__title { margin-top: clamp(.9rem, 1.6vw, 1.3rem); }

/* ── the bullet reveal ──
   The list keeps its space at ALL times and only fades in. It used to
   collapse to grid-template-rows:0fr at rest and animate open, which
   read well on its own but grew the card by ~51px on hover - and
   because the three cards share a grid row, ALL THREE grew and the
   closing CTA below them jumped 52px up the page every time the cursor
   crossed a card. A hover that reflows the page is worse than a hover
   that reveals nothing.

   Holding the space costs a strip of white inside each card at rest,
   which is what makes the row scan as three equal objects, and the
   fade + 6px rise still reads as a reveal. Nothing outside the card
   moves, at any viewport, ever. */
.pa-pillar .pa-cell__list {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--pa-hair-soft);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .45s var(--pa-ease-out),
    transform .45s var(--pa-ease-out);
}
.pa-pillar:hover .pa-cell__list,
.pa-pillar:focus-within .pa-cell__list,
.pa-pillar.is-touching .pa-cell__list {
  opacity: 1;
  transform: none;
}

/* A slow diagonal sheen that only crosses the card while it is engaged
   - the glass cue that separates "this responds" from "this is a
   picture of a card". Purely decorative and pointer-events:none, so it
   never intercepts the hover it is reacting to. */
.pa-pillar__sheen {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-60%);
  transition: opacity .3s var(--pa-ease-out);
}
.pa-pillar:hover .pa-pillar__sheen,
.pa-pillar:focus-within .pa-pillar__sheen {
  opacity: 1;
  animation: pa-sheen 1.15s var(--pa-ease-out) forwards;
}
@keyframes pa-sheen {
  from { transform: translateX(-60%); }
  to   { transform: translateX(60%); }
}

/* The mark answers the hover too, so the card reads as one object
   reacting rather than as a list that happened to open. */
.pa-pillar:hover .pa-mark,
.pa-pillar:focus-within .pa-mark,
.pa-pillar.is-touching .pa-mark {
  transform: scale(1.06) rotate(-3deg);
  background: linear-gradient(150deg, rgba(155,181,58,.3), rgba(155,181,58,.1));
  border-color: rgba(155,181,58,.45);
}

/* ─────────────────── 11 · PLAYGROUND / WIDGET ───────────────────── */
.pa-play {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
/* Below the two-column breakpoint the grid collapses to one column and
   DOM order would put the garment card first, leaving the visitor to
   work out what they are looking at before the copy explains it. The
   copy is pulled above the card instead.

   `order` and not a DOM move: the two-column desktop layout is
   deliberately mirrored against the hero (artefact leads, copy follows),
   so the source has to keep the card first for that to hold. One
   property flips it where the mirror stops applying. */
@media (max-width: 899.98px) {
  .pa-play { grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 2.4rem); }
  .pa-play__copy { order: -1; }
  /* The copy column is start-aligned beside the card on desktop; stacked
     above it the measure is the full column, so the lede needs its own
     cap back or it runs the width of a phone screen. */
  .pa-play__copy .pa-lede { max-width: 46ch; }
}
.pa-play__card {
  background: var(--pa-white);
  border: 1px solid var(--pa-hair);
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-lift-3);
  padding: .85rem;
  max-width: 460px; margin-inline: auto; width: 100%;
  transform-style: preserve-3d; will-change: transform;
}
.pa-play__shot {
  position: relative; overflow: hidden;
  border-radius: calc(var(--pa-radius-lg) - .6rem);
  background: var(--pa-beige-deep);
  aspect-ratio: 1 / 1;
}
.pa-play__shot img { width: 100%; height: 100%; object-fit: cover; }
/* the scan sweep that says "the model is reading this garment" */
.pa-play__scan {
  position: absolute; inset-inline: 0; height: 34%; z-index: 2;
  background: linear-gradient(to bottom, transparent, rgba(155,181,58,.16) 45%,
              rgba(155,181,58,.5) 50%, rgba(155,181,58,.16) 55%, transparent);
  mix-blend-mode: multiply;
  animation: pa-sweep 4.6s var(--pa-ease-io) infinite;
}
@keyframes pa-sweep {
  0%, 8%    { transform: translateY(-40%); opacity: 0; }
  20%, 80%  { opacity: 1; }
  92%, 100% { transform: translateY(320%); opacity: 0; }
}

/* flat shot → on-model reveal.
   .pa-flip owns its own 3D stage (perspective) on top of .pa-play__shot's
   box; it never touches .pa-play__card's transform, which the tilt script
   already drives via rotationX/Y, so the two animations compose instead
   of fighting over the same property. Hover/focus flip via CSS alone;
   [data-pa-flip] additionally gets a tap-toggle in pear-motion.js for
   coarse pointers, via the same .is-flipped class. */
.pa-flip { perspective: 1400px; cursor: pointer; }
.pa-flip__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s var(--pa-ease-io), box-shadow .5s var(--pa-ease-out);
}
.pa-flip:hover .pa-flip__inner,
.pa-flip:focus-visible .pa-flip__inner,
.pa-flip.is-flipped .pa-flip__inner {
  transform: rotateY(180deg);
  box-shadow: 0 30px 60px -24px rgba(13,13,13,.35);
}
.pa-flip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.pa-flip__face--back { transform: rotateY(180deg); }

/* shine sweep - armed only while the back face actually faces the
   viewer, so the animation never plays behind the front face unseen */
.pa-flip__shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform: translateX(-120%);
  opacity: 0;
}
.pa-flip:hover .pa-flip__shine,
.pa-flip:focus-visible .pa-flip__shine,
.pa-flip.is-flipped .pa-flip__shine {
  opacity: 1;
  animation: pa-shine 1.1s var(--pa-ease-out) .2s 1;
}
@keyframes pa-shine {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

/* glassmorphic "On Model Preview" badge - sibling of .pa-flip__inner so
   it stays upright through the rotation instead of mirroring with it */
.pa-flip__badge {
  z-index: 4;
  inset-inline: 0; bottom: .7rem; margin-inline: auto; width: max-content;
  justify-content: center;
  opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity .35s var(--pa-ease-out), transform .35s var(--pa-ease-out);
}
.pa-flip:hover .pa-flip__badge,
.pa-flip:focus-visible .pa-flip__badge,
.pa-flip.is-flipped .pa-flip__badge {
  opacity: 1; transform: translateY(0) scale(1);
}

/* front/back garment angle - both images are in the DOM and decoded from
   first paint; toggling only flips which one is opacity:1, so there is
   never a decode stall or a broken src mid-switch */
.pa-angle__img {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .4s var(--pa-ease-out);
}
.pa-angle__img.is-active { opacity: 1; }

.pa-angle-toggle {
  display: inline-flex; gap: .2rem; margin: 0 .85rem .8rem;
  padding: .2rem; border: 1px solid var(--pa-hair); border-radius: var(--pa-pill);
}
.pa-angle-toggle__btn {
  font-family: var(--pa-mono); font-size: .64rem; letter-spacing: .04em;
  padding: .32rem .85rem; border: none; border-radius: var(--pa-pill);
  background: transparent; color: var(--pa-ink-50);
  cursor: pointer;
  transition: background-color .3s var(--pa-ease-out), color .3s var(--pa-ease-out);
}
.pa-angle-toggle__btn.is-active { background: var(--pa-pear); color: var(--pa-onyx); }
.pa-angle-toggle__btn:not(.is-active):hover { color: var(--pa-ink); }

.pa-play__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem .85rem .5rem; }
.pa-play__name { font-weight: 600; letter-spacing: -0.02em; font-size: .96rem; }
.pa-play__sub { font-size: .78rem; color: var(--pa-ink-50); margin-top: .15rem; }
.pa-sizes { display: flex; gap: .3rem; }
.pa-sizes b {
  font-family: var(--pa-mono); font-size: .62rem; font-weight: 500;
  width: 25px; height: 25px; display: grid; place-items: center;
  border: 1px solid var(--pa-hair); border-radius: 7px; color: var(--pa-ink-35);
}
.pa-sizes b.is-fit { background: var(--pa-pear); border-color: var(--pa-pear); color: var(--pa-onyx); }
.pa-play__note { font-size: .72rem; color: var(--pa-ink-35); text-align: center; padding: .6rem .85rem .2rem; line-height: 1.5; }

/* Fit-type pill under the product name. Inline flow (not position:absolute
   like .pa-badge) so it wraps instead of clipping at narrow widths. */
.pa-fit-tag {
  display: inline-flex; align-items: center;
  margin-top: .45rem; padding: .22rem .6rem;
  background: var(--pa-beige-deep); border: 1px solid var(--pa-hair);
  border-radius: var(--pa-pill);
  font-size: .66rem; font-weight: 600; letter-spacing: .01em;
  color: var(--pa-pear-deep); white-space: normal;
}
.pa-play__fitnote {
  font-size: .72rem; color: var(--pa-ink-35);
  padding: 0 .85rem .6rem; line-height: 1.5;
}
.pa-play__physics {
  font-size: .84rem; color: var(--pa-ink-50);
  margin-top: .85rem; line-height: 1.6; max-width: 46ch;
}

/* ─────────────────────── 12 · DEMO BAND ─────────────────────────── */
/* Section 12 was the full-bleed onyx demo band. It is gone: its video is
   the hero itself now (see .pa-skyline in §8), and a stage that fills
   the viewport in onyx carries the tonal break this band existed to
   provide several times over. .pa-demo/.pa-demo__frame, and the
   .pa-cinema frame that briefly replaced them, have no markup left. */

/* ────────────────────── 13 · CLOSING CTA ────────────────────────── */
/* .pa-solution stood here: a floating glass panel between the bento and
   this CTA that restated the hero and the pillars in a third voice. It
   is gone, and the one fact it owned - which platforms the widget drops
   into - is now the trust line at the foot of .pa-close. Which is why
   .pa-tags is styled for onyx rather than for glass. */
.pa-tags {
  display: flex; flex-wrap: wrap; gap: .4rem;
  justify-content: center;
  margin-top: clamp(1.6rem, 3vw, 2.3rem);
}
.pa-tags span {
  font-family: var(--pa-mono); font-size: .64rem; letter-spacing: .04em;
  padding: .4rem .75rem; border-radius: var(--pa-pill);
  border: 1px solid rgba(244,241,234,.18);
  color: rgba(244,241,234,.55);
  background: rgba(244,241,234,.04);
  max-width: 100%; text-align: center;
}
/* JetBrains Mono carries no Hebrew, so the Hebrew tail of this string
   would fall back mid-line. Same swap .pa-cell__tag makes. */
[lang="he"] .pa-tags span, [dir="rtl"] .pa-tags span {
  font-family: var(--pa-sans); letter-spacing: .02em; font-size: .7rem;
}

.pa-close {
  position: relative; z-index: 3;
  background: var(--pa-onyx); color: var(--pa-beige);
  border-radius: var(--pa-radius-lg);
  padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem);
  overflow: hidden; text-align: center;
}
.pa-close::before {
  content: ''; position: absolute; inset: -40% -10% auto; height: 140%;
  background: radial-gradient(50% 50% at 50% 30%, rgba(155,181,58,.24), transparent 70%);
  pointer-events: none;
}
/* :not(.pa-cell__glow) or this rule flattens the absolutely-positioned
   highlight into the flow - the same carve-out .pa-cell makes. */
.pa-close > *:not(.pa-cell__glow) { position: relative; }

/* The cursor-tracked highlight, borrowed from the bento cards. The
   panel opts in with data-pa-tilt="glow", which writes --mx/--my
   without the rotation: at full shell width the cards' 9deg lean reads
   as the page coming loose rather than as depth. Tuned wider and
   warmer than .pa-cell__glow because it is travelling across onyx, not
   across white. */
.pa-close .pa-cell__glow {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(155,181,58,.16), transparent 70%);
}
.pa-close:hover .pa-cell__glow { opacity: 1; }

.pa-close .pa-eyebrow { color: rgba(244,241,234,.5); }
.pa-close .pa-lede { color: rgba(244,241,234,.66); margin-inline: auto; }
.pa-close__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
/* body.pa-scoped to match the base ghost rule's specificity (0,2,1).
   Written as `.pa-close .pa-btn--ghost` it scores (0,2,0) and LOSES,
   which paints these two buttons onyx-on-onyx - invisible. */
body.pa .pa-close .pa-btn--ghost { border-color: rgba(244,241,234,.28); color: var(--pa-beige); }
body.pa .pa-close .pa-btn--ghost::before { background: var(--pa-beige); }
body.pa .pa-close .pa-btn--ghost:hover { color: var(--pa-onyx); border-color: var(--pa-beige); }

/* ─────────────────────────── 14 · FOOTER ────────────────────────── */
body.pa .pa-foot {
  position: relative; z-index: 3;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--pa-hair);
  background: none;
}
.pa-foot__row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.2rem;
}
.pa-foot__brand { display: flex; align-items: center; gap: .7rem; }
.pa-foot__brand img { width: 26px; height: auto; }
.pa-foot__row p { font-size: .78rem; color: var(--pa-ink-35); margin: 0; }
.pa-clock {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--pa-mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--pa-ink-50); direction: ltr;
}
.pa-clock b { font-weight: 500; color: var(--pa-ink); font-variant-numeric: tabular-nums; }

/* ────────────────────── 15 · SCROLL HUD ─────────────────────────── */
/* Stays in the bottom corner where the original put it - the bento and
   the demo band both run the full width of the shell, so a rail parked
   at the vertical middle lands on top of a card. Only the skin changes:
   the emerald glow goes, the ring turns pear. */
body.pa #scrollHud {
  inset-inline-end: 1.4rem; inset-inline-start: auto;
  bottom: 1.4rem; top: auto; transform: none;
  gap: .6rem;
  padding: .45rem .9rem .45rem .5rem;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--pa-hair);
  border-radius: var(--pa-pill);
  box-shadow: var(--pa-lift-1);
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--pa-ease-out), visibility .6s;
}
body.pa #scrollHud.is-visible { opacity: 1; visibility: visible; }
/* the drop-shadow was tuned to the old emerald and reads as a smudge
   against the new accent */
body.pa #scrollHud svg { filter: none; }
/* SVG gradient stops are styleable from CSS, which is the only way to
   recolour a ring whose markup is owned by the original page. */
body.pa #hudGrad stop:first-child { stop-color: var(--pa-pear); }
body.pa #hudGrad stop:last-child  { stop-color: var(--pa-pear-deep); }
body.pa #scrollHud circle:first-of-type { stroke: var(--pa-hair); }
body.pa #hudPct { font-family: var(--pa-mono); color: var(--pa-ink); }
body.pa #hudLabel {
  font-family: var(--pa-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pa-ink-50); white-space: nowrap;
}
[lang="he"] #hudLabel, [dir="rtl"] #hudLabel {
  font-family: var(--pa-sans); text-transform: none; letter-spacing: 0;
  font-size: .72rem; font-weight: 600;
}

/* ─────────────────────── 16 · RESPONSIVE ────────────────────────── */
@media (max-width: 1100px) {
  body.pa #scrollHud { display: none; }
  .pa-play { grid-template-columns: minmax(0, 1fr); }
  .pa-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 900px) {
  /* Three pillars side by side stop working before the nav does: at this
     width each card is under ~270px and the Hebrew titles start breaking
     across three lines. One column, full width, in the same order. */
  .pa-pillars { grid-template-columns: minmax(0, 1fr); }
  /* With one card on screen at a time there is nothing to scan past, so
     the bullets are simply always visible - a hover reveal on a
     full-width card on a touch device is a list most visitors never
     find. The space was already reserved, so this changes no geometry. */
  .pa-pillar .pa-cell__list { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .pa-nav__links { display: none; }
  .pa-nav__bar { padding-inline-start: .7rem; gap: .5rem; }
  .pa-nav__tools { margin-inline-start: auto; }
  .pa-cell { min-height: 180px; }

  /* With the links gone the bar carries only a lockup, a language
     toggle and one button, so it sheds another step of padding here.
     The base is already tight; this is the tablet increment between it
     and the phone rules below. */
  body.pa .pa-nav { padding-block: .26rem; }
  .pa-nav__bar { padding-block: .18rem; padding-inline-end: .18rem; gap: .35rem; }
  .pa-nav__brand img { width: 16px; }
  .pa-nav__word { font-size: .84rem; }
  body.pa .pa-nav__tools .pa-btn--sm { padding: .3rem .72rem; font-size: .7rem; }
}
@media (max-width: 767.98px) {
  /* ══ THE NAV CAPSULE, CUT TO THE BONE ══════════════════════════════
     The last step down. The bar floats over a FULL-BLEED film here, so
     every pixel of vertical padding it keeps is a pixel of the hero it
     hides. Nothing measures this any more - the token that used to be
     published from this block, and the badge row that read it, are both
     gone - so these are simply the smallest figures the bar still reads
     as a capsule at. */
  body.pa .pa-nav { padding-block: .2rem; }
  .pa-nav__bar {
    padding-block: .1rem;
    padding-inline-start: .5rem;
    padding-inline-end: .1rem;
    gap: .3rem;
  }
  .pa-nav__brand { gap: .35rem; }
  .pa-nav__brand img { width: 15px; }
  .pa-nav__word { font-size: .78rem; }
  .pa-nav__tools .pa-lang button { font-size: .54rem; padding: .14rem .34rem; }
  body.pa .pa-nav__tools .pa-btn--sm { padding: .24rem .58rem; font-size: .62rem; }

  /* ══ THE HERO - FULL-BLEED FILM, COPY ON TOP ═══════════════════════
     The phone used to get a different hero entirely: the stage SPLIT
     into a 4:5 film panel on top and the copy below it on beige, in
     ordinary ink. That is gone. The phone now gets the same hero as
     every other width - one film filling the whole stage with the
     headline, the lede and the CTA overlaid on it in paper-coloured
     type, carried by the veil.

     Almost nothing has to be declared for that: the base .pa-skyline
     rules in §8 already describe it. What is here is (a) the film
     pinned as a true background layer, (b) a veil cut deeper than the
     desktop one because a phone gives the copy a much larger share of
     the frame to stay legible over, and (c) the copy re-fitted to a
     narrow column. Every ink/beige override the split layout needed is
     DELETED rather than overridden - the base paper treatment is the
     one that applies now.

     Height stays the base 100svh: svh, not vh, so the stage is the
     viewport that is actually on screen rather than the tallest one the
     URL bar ever allows. */
  .pa-skyline__film {
    /* Absolute rather than a grid cell: the film is a background, not a
       participant in the layout, so it is lifted out of flow and pinned
       to the stage's own box. .pa-skyline__stage is position:relative
       (§8), which is what inset:0 resolves against. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Same reasoning as the desktop crop, pulled a little higher: a
       portrait viewport crops hard off the sides of a 16:9 frame, and
       the subject's floor matters more than the headroom. */
    object-position: center 34%;
    z-index: 0;
  }

  /* A deeper bottom wash than the desktop veil, and no side wash. On a
     phone the copy occupies most of the lower half of the frame instead
     of an inline-start third, so the gradient that carries it has to
     start higher and land darker - this is what keeps white type at
     100% legibility over whatever the film is doing underneath. The
     top wash is unchanged: it is what the glass navbar and the badges
     read against. No direction-dependent layer is left, so the [dir]
     variant simply matches. */
  .pa-skyline__veil,
  html[dir="ltr"] .pa-skyline__veil {
    background:
      linear-gradient(to bottom, rgba(var(--sk-shade), .46) 0%, rgba(var(--sk-shade), 0) 22%),
      linear-gradient(to top,    rgba(var(--sk-shade), .92) 0%, rgba(var(--sk-shade), .68) 34%, rgba(var(--sk-shade), .18) 66%, rgba(var(--sk-shade), 0) 100%);
  }

  /* The copy, overlaid. It keeps the base paper colour, the base accent,
     the base text shadows and the base bottom anchor - all four exist
     for exactly this case - and only two figures change: the pad under
     it, so the CTA never sits on the very edge of a short phone, and
     the two measures, so the lines break for a narrow column. */
  .pa-skyline__copy { padding-block-end: clamp(2.6rem, 9vh, 4.2rem); }
  .pa-skyline__title { max-width: 14ch; }
  .pa-skyline__lede  { max-width: 34ch; }

  /* ══ THE FOOTER BAR, HORIZONTAL ════════════════════════════════════
     One line, same reading order as desktop: lockup · rights · clock.
     The row was never told to stack - it is `flex-wrap: wrap` (§14) and
     the three children simply outgrew a phone, so it wrapped itself
     into three stacked lines. nowrap is what stops that, and it only
     works if the one flexible child is allowed to shrink: `min-width:
     0` overrides the `auto` minimum that would otherwise hold the
     rights line at its longest word and push the clock off-screen.

     Sizes come down with it. The rights line is the only child that
     wraps internally, and at .56rem the Hebrew string sets on two short
     lines inside its own cell rather than forcing the row apart. */
  .pa-foot__row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .55rem;
  }
  .pa-foot__brand { flex: none; gap: .4rem; }
  .pa-foot__brand img { width: 20px; }
  .pa-foot__brand .pa-nav__word { font-size: .8rem; }
  .pa-foot__row p { flex: 1 1 auto; min-width: 0; font-size: .56rem; line-height: 1.45; }
  /* .pa-clock is a <p> too, so it is caught by the rule above at
     (0,1,1) - which is also why the base sheet's own `.pa-clock`
     font-size never applied. Scoped to (0,2,1) here so the clock keeps
     its own size and, more importantly, stays `flex: none`: as a
     shrinkable child it would have been squeezed until the time itself
     wrapped. */
  .pa-foot__row .pa-clock { flex: none; gap: .35rem; font-size: .56rem; white-space: nowrap; }
}
@media (max-width: 560px) {
  .pa-skyline__actions .pa-btn { flex: 1 1 100%; justify-content: center; }
  /* The compatibility line is a single unbreakable-looking string
     ("Shopify · WooCommerce · Magento · custom builds"), and inside its
     own pill it wraps to two lines on a 375px screen - a two-line pill
     reads as a mistake. Below this width it sheds the pill and sets as
     a plain caption instead, which fits on one line without dropping to
     a font size nobody can read. */
  .pa-close .pa-tags span {
    border-color: transparent;
    background: none;
    padding-inline: 0;
    font-size: .62rem;
  }
}

/* ───────────────── 16b · TOUCH · TACTILE FEEDBACK ────────────────
   Coarse-pointer visitors get none of the hover affordances the rest of
   this sheet is built on - no tilt, no cursor highlight, no magnetic
   lean. What replaces them is direct manipulation: pressing a card
   pushes it in, dragging it lets it lean and rubber-band, releasing it
   springs back. The transforms are written by initTouch() in
   pear-motion.js; everything here is the surface it needs to land on.

   Scoped to (pointer: coarse) so a desktop with a touchscreen keeps its
   hover behaviour and does not run both systems against one transform. */
@media (pointer: coarse) {
  body.pa {
    /* Kills the grey flash Chrome/Android paints over a tapped element,
       which fires ~100ms before our own press state and reads as a
       double-response. */
    -webkit-tap-highlight-color: transparent;
    /* Momentum scrolling that stops at the page edges instead of
       handing the gesture to the browser's pull-to-refresh mid-read. */
    overscroll-behavior-y: contain;
  }

  /* Waiting out the 300ms tap delay makes every button feel broken on a
     phone regardless of how fast the handler is. */
  body.pa button, body.pa a, body.pa [data-pa-touch] { touch-action: manipulation; }

  [data-pa-touch] {
    /* The spring is driven from JS; CSS only owns the resting state and
       the projection the lean is drawn in. */
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-user-select: none; user-select: none;
  }

  /* Pressed state: a real inset, not a colour swap. The card dips toward
     the finger and its shadow tightens under it, which is what makes the
     surface read as physical rather than as a hover style firing late. */
  [data-pa-touch].is-pressed {
    box-shadow: var(--pa-lift-1);
  }

  /* The touched card lifts out of the stack so a neighbour's border
     cannot draw across the edge it is leaning over. */
  [data-pa-touch].is-touching { z-index: 5; }

  /* The cursor-tracked glow doubles as a touch-point highlight: the
     same --mx/--my the pointer wrote are written by the touch handler,
     so the card lights up under the finger with no second mechanism. */
  .pa-cell.is-touching .pa-cell__glow,
  .pa-close.is-touching .pa-cell__glow { opacity: 1; }
}

/* ═══════════ 18 · DEVELOPER GUIDE (#view-docs) ═══════════════════
   The integration guide is the only page on this site written for
   someone who is going to paste from it. That changes what "high-end"
   means here: it is not more decoration, it is a code block you can
   read at a glance, a copy button that confirms itself, and steps that
   stay legible on the phone a developer is holding while their laptop
   shows the store.

   WHERE THIS MARKUP LIVES: not in index.html. The guide is served from
   api/get-docs.js and injected into #docs-secure-viewport after the
   passcode check. pear-tailwind.css is a static build with
   content:["index.html"], so it never sees these class names - which is
   exactly why the guide is styled from here, in hand-written CSS, and
   not in utilities. Adding a class over there means adding a rule here.
   ═══════════════════════════════════════════════════════════════════ */

.pa-guide {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: var(--pa-gutter);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
}

/* ── section headers ── */
.pa-guide__head {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1.4rem;
}
.pa-guide__index {
  flex: none;
  font-family: var(--pa-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .08em;
  color: var(--pa-pear-deep);
  background: rgba(155,181,58,.10);
  border: 1px solid rgba(155,181,58,.28);
  border-radius: 8px;
  padding: .3rem .55rem;
  direction: ltr;
}
.pa-guide__title {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.15;
  color: var(--pa-ink); margin: 0;
}
[lang="he"] .pa-guide__title, [dir="rtl"] .pa-guide__title { letter-spacing: 0; line-height: 1.3; }

/* ── the glass panel every card is cut from ── */
.pa-panel {
  position: relative;
  border-radius: var(--pa-radius);
  border: 1px solid var(--pa-hair);
  background: var(--pa-white);
  box-shadow: var(--pa-lift-1);
  overflow: hidden;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pa-panel {
    background: linear-gradient(155deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
            backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: var(--pa-lift-1), inset 0 1px 0 rgba(255,255,255,.85);
  }
}
.pa-panel__pad { padding: clamp(1.4rem, 3vw, 1.9rem); }
.pa-panel__lede { color: var(--pa-ink-70); font-size: .95rem; margin: 0 0 1.3rem; text-wrap: pretty; }
.pa-panel__lede:last-child { margin-bottom: 0; }

/* ── platform chips ── */
.pa-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pa-chips span {
  font-family: var(--pa-mono); font-size: .72rem;
  color: var(--pa-ink-70);
  background: var(--pa-beige-deep);
  border: 1px solid var(--pa-hair);
  border-radius: 10px;
  padding: .4rem .7rem;
  transition: border-color .3s var(--pa-ease-out), color .3s var(--pa-ease-out);
}
.pa-chips span:hover { border-color: rgba(155,181,58,.45); color: var(--pa-pear-deep); }

/* ── the numbered steps ──
   Rail on the inline-start edge, card beside it. The rail is a grid
   column rather than an absolutely positioned line, so the connector
   between two steps is simply a flex child that fills whatever height
   the card beside it turned out to be - no magic offsets to re-tune
   when the copy or the language changes. */
.pa-steps { display: grid; gap: 0; }
.pa-step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.15rem; }
.pa-step + .pa-step { margin-top: 1.4rem; }
.pa-step__rail { display: flex; flex-direction: column; align-items: center; }
.pa-step__num {
  flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--pa-mono); font-size: .85rem; font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, var(--pa-pear), var(--pa-pear-deep));
  box-shadow: 0 0 0 4px rgba(155,181,58,.12), 0 8px 20px -8px var(--pa-pear-glow);
  direction: ltr;
}
.pa-step__line {
  width: 1px; flex: 1; margin-block: .55rem .2rem;
  background: linear-gradient(to bottom, rgba(155,181,58,.5), transparent);
}
/* The step card. It is a .pa-panel too, so it takes the same glass as
   the requirements card above it and the same opaque fallback - one
   material for the whole guide.

   The code block inside is deliberately allowed to run to the panel's
   own edges on its inline axis (negative margin equal to the padding):
   a snippet inset inside a card inside a page is three nested rounded
   rectangles, and the innermost one is where the actual content is. */
.pa-step__body {
  min-width: 0;
  padding: clamp(1.25rem, 2.6vw, 1.6rem);
}
.pa-step__body .pa-code {
  margin-top: 1.25rem;
  margin-inline: calc(clamp(1.25rem, 2.6vw, 1.6rem) * -1);
  margin-bottom: calc(clamp(1.25rem, 2.6vw, 1.6rem) * -1);
  border-radius: 0;
  border-inline: 0;
  border-bottom: 0;
}
.pa-step__title {
  font-size: 1.06rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--pa-ink); margin: 0 0 .35rem;
}
[lang="he"] .pa-step__title, [dir="rtl"] .pa-step__title { letter-spacing: 0; }
.pa-step__note { font-size: .88rem; color: var(--pa-ink-50); margin: 0; text-wrap: pretty; }
.pa-step__note code {
  font-family: var(--pa-mono); font-size: .8em;
  background: var(--pa-beige-deep); border: 1px solid var(--pa-hair);
  border-radius: 5px; padding: .1em .4em;
  color: var(--pa-ink); direction: ltr; unicode-bidi: isolate;
}

/* ── code cards ──
   Onyx, not GitHub navy: the page already owns a near-black, and a
   second dark surface a few degrees off it reads as a mistake rather
   than as a second material. */
.pa-code {
  margin: 1.15rem 0 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--pa-onyx);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 24px 60px -30px rgba(13,13,13,.75);
}
.pa-code__bar {
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem .85rem;
  background: var(--pa-onyx-soft);
  border-bottom: 1px solid rgba(255,255,255,.07);
  direction: ltr;
}
.pa-code__dots { display: flex; gap: .35rem; flex: none; }
.pa-code__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.pa-code__dots i:nth-child(1) { background: #ff5f56; }
.pa-code__dots i:nth-child(2) { background: #ffbd2e; }
.pa-code__dots i:nth-child(3) { background: #27c93f; }
.pa-code__file {
  font-family: var(--pa-mono); font-size: .72rem; letter-spacing: .04em;
  color: rgba(244,241,234,.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pa-code__pre {
  direction: ltr; text-align: left;
  overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0; padding: 1.1rem 1.15rem;
  font-family: var(--pa-mono); font-size: .8rem; line-height: 1.75;
  color: rgba(244,241,234,.9);
  -webkit-overflow-scrolling: touch;
}
.pa-code__pre::-webkit-scrollbar { height: 6px; }
.pa-code__pre::-webkit-scrollbar-thumb { background: rgba(244,241,234,.16); border-radius: 3px; }
.pa-code__pre code { font: inherit; background: none; }

/* ── copy button ──
   Three things move on a successful copy and they are staged, not
   simultaneous: the icon swaps to a tick, the label changes, and a ring
   expands out of the button and dissolves. The ring is what carries the
   confirmation at a glance - the tick is 14px and lands where the finger
   or cursor already is, so on its own it is easy to miss entirely. */
.pa-guide__copy {
  position: relative;
  margin-inline-start: auto;
  flex: none;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--pa-mono); font-size: .7rem; font-weight: 600;
  color: rgba(244,241,234,.75);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  padding: .38rem .65rem;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--pa-ease-out);
}
.pa-guide__copy:hover { background: rgba(255,255,255,.12); color: var(--pa-beige); border-color: rgba(255,255,255,.22); }
.pa-guide__copy:active, .pa-guide__copy.is-tapped { transform: scale(.94); }
.pa-guide__copy svg { width: 13px; height: 13px; flex: none; }
.pa-guide__copy .check-icon { color: var(--pa-pear); }
.pa-guide__copy .hidden { display: none; }

/* copied state */
.pa-guide__copy.copy-flash {
  color: var(--pa-pear);
  border-color: rgba(155,181,58,.5);
  background: rgba(155,181,58,.14);
}
.pa-guide__copy.copy-flash::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid var(--pa-pear);
  animation: pa-copy-ring .7s var(--pa-ease-out) forwards;
  pointer-events: none;
}
@keyframes pa-copy-ring {
  from { opacity: .9; transform: scale(1); }
  to   { opacity: 0;  transform: scale(1.32); }
}

/* ── the help card + the note ── */
.pa-guide__help {
  position: relative; overflow: hidden;
  border-radius: var(--pa-radius);
  background: var(--pa-onyx);
  color: var(--pa-beige);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem;
}
.pa-guide__help::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(420px 220px at 12% 0%, rgba(155,181,58,.26), transparent 65%),
    radial-gradient(360px 200px at 100% 100%, rgba(155,181,58,.10), transparent 65%);
}
.pa-guide__help > * { position: relative; }
.pa-guide__help-copy { flex: 1 1 18rem; min-width: 0; }
.pa-guide__help h3 {
  font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .3rem;
}
.pa-guide__help p { font-size: .88rem; color: rgba(244,241,234,.68); margin: 0; line-height: 1.6; }

.pa-guide__note {
  display: flex; align-items: flex-start; gap: .9rem;
  border-radius: var(--pa-radius);
  border: 1px solid rgba(155,181,58,.26);
  background: rgba(155,181,58,.07);
  padding: clamp(1.2rem, 2.6vw, 1.6rem);
}
.pa-guide__note b { flex: none; font-size: 1.15rem; line-height: 1.3; }
.pa-guide__note p { margin: 0; font-size: .88rem; color: var(--pa-ink-70); line-height: 1.65; }
.pa-guide__note code {
  font-family: var(--pa-mono); font-size: .8em;
  background: var(--pa-white); border: 1px solid rgba(155,181,58,.3);
  border-radius: 5px; padding: .1em .4em; direction: ltr; unicode-bidi: isolate;
}
.pa-guide__note a { color: var(--pa-pear-deep); font-weight: 600; text-underline-offset: 3px; }

/* ── guide · phone ──
   The rail collapses rather than shrinking: 2.5rem of gutter beside a
   code block on a 360px screen is the difference between a readable
   snippet and a horizontally-scrolled one. The number moves inline with
   the step title, where it still numbers the step. */
@media (max-width: 640px) {
  .pa-step { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pa-step__rail { flex-direction: row; align-items: center; gap: .7rem; margin-bottom: .8rem; }
  .pa-step__num { width: 2rem; height: 2rem; font-size: .75rem; }
  /* Turned on its side: the connector runs from the number out toward
     the far edge instead of down to the next step.

     linear-gradient takes no logical direction keyword - `to inline-end`
     is not a thing, and a gradient with an invalid direction drops the
     whole background declaration, which is a connector that silently
     does not render. Hence the explicit angle and the RTL mirror. */
  .pa-step__line {
    width: auto; height: 1px; flex: 1; margin: 0;
    background: linear-gradient(90deg, rgba(155,181,58,.45), rgba(155,181,58,.04));
  }
  [dir="rtl"] .pa-step__line {
    background: linear-gradient(270deg, rgba(155,181,58,.45), rgba(155,181,58,.04));
  }
  .pa-code__pre { font-size: .74rem; padding: .9rem; }
  .pa-guide__help { flex-direction: column; align-items: stretch; }
  .pa-guide__help .pa-btn { width: 100%; justify-content: center; }
}

/* ── the access gate ──
   The guide is not in the page until the passcode clears, so this stage
   is standing over nothing: the scrim is atmosphere, not a redaction.
   It is kept because a card floating on bare cream reads as an error
   state, and because it tells the visitor there IS something here. */
.pa-gate {
  position: relative;
  min-height: 34rem;
  display: grid; place-items: center;
  padding: clamp(2rem, 6vw, 4rem) var(--pa-gutter);
}
.pa-gate__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60rem 26rem at 50% 0%, rgba(155,181,58,.13), transparent 62%),
    linear-gradient(to bottom, rgba(244,241,234,.4), rgba(244,241,234,.9));
}
.pa-gate__card {
  position: relative;
  width: 100%; max-width: 27rem;
  border-radius: var(--pa-radius-lg);
  background: var(--pa-onyx);
  color: var(--pa-beige);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 90px -40px rgba(13,13,13,.7);
  padding: clamp(1.7rem, 4vw, 2.3rem);
  text-align: center;
}
.pa-gate__lock {
  display: grid; place-items: center;
  width: 3.6rem; height: 3.6rem; margin: 0 auto 1.3rem;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--pa-pear), var(--pa-pear-deep));
  color: #fff;
}
.pa-gate__lock svg { width: 26px; height: 26px; }
.pa-gate__card h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .5rem; }
.pa-gate__card > p { font-size: .87rem; color: rgba(244,241,234,.65); line-height: 1.6; margin: 0 0 1.6rem; }

.pa-gate__form { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.pa-gate__input {
  flex: 1 1 10rem; min-width: 0;
  font-family: var(--pa-mono); font-size: .88rem;
  letter-spacing: .16em; text-align: center;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: .78rem .9rem;
  transition: border-color .3s var(--pa-ease-out), box-shadow .3s var(--pa-ease-out), background-color .3s;
}
.pa-gate__input::placeholder { font-family: var(--pa-sans); letter-spacing: 0; color: rgba(244,241,234,.4); }
.pa-gate__input:focus {
  outline: none;
  background: rgba(255,255,255,.1);
  border-color: var(--pa-pear);
  box-shadow: 0 0 0 3px rgba(155,181,58,.2);
}
.pa-gate__input.is-invalid {
  border-color: rgba(240, 110, 110, .7);
  box-shadow: 0 0 0 3px rgba(240, 110, 110, .16);
  animation: pa-shake .4s var(--pa-ease-io);
}
.pa-gate__submit { flex: 0 0 auto; width: auto; }

.pa-gate__error { font-size: .76rem; font-weight: 600; color: #f08b8b; margin: 0 0 .9rem; }
.pa-gate__ask {
  display: inline-block;
  font-size: .84rem; font-weight: 600;
  color: var(--pa-pear);
  transition: color .25s;
}
.pa-gate__ask:hover { color: #C6DA6B; }

@media (max-width: 420px) {
  .pa-gate__submit { flex: 1 1 100%; width: 100%; }
}

/* ═══════════ 19 · CONTACT (#view-contact) ═══════════════════════ */

.pa-contact {
  position: relative;
  /* Clips the wash below, which deliberately overhangs the layout so its
     blur has somewhere to fall off. `clip` rather than `hidden`: hidden
     turns this into a scroll container, which would break the anchor
     scrolling the contact CTAs rely on. */
  overflow: clip;
}
.pa-contact__wash {
  position: absolute; pointer-events: none;
  inset: -4rem -2.5rem;
  background:
    radial-gradient(700px 420px at 20% 10%, rgba(155,181,58,.14), transparent 60%),
    radial-gradient(600px 360px at 90% 90%, rgba(155,181,58,.07), transparent 60%);
  filter: blur(28px);
}
.pa-contact__grid {
  width: 100%; max-width: var(--pa-measure);
  margin-inline: auto;
  padding-inline: var(--pa-gutter);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.pa-contact__aside { display: grid; gap: 1.1rem; }

/* ── fields ──
   Boxed rather than the underline treatment this form used to carry.
   An underline field gives focus one pixel of feedback and gives an
   invalid value nowhere to show itself; a bordered field can glow, can
   go red, and reads as a target on a touchscreen. */
.pa-form { display: grid; gap: 1.15rem; }
.pa-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }

.pa-field { display: block; min-width: 0; }
.pa-field__label {
  display: block; font-size: .78rem; font-weight: 600;
  color: var(--pa-ink-70); margin-bottom: .45rem; letter-spacing: -0.005em;
}
.pa-field__input {
  width: 100%;
  font: inherit; font-size: .9rem;
  color: var(--pa-ink);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--pa-hair);
  border-radius: 12px;
  padding: .75rem .9rem;
  transition:
    border-color .3s var(--pa-ease-out),
    box-shadow .3s var(--pa-ease-out),
    background-color .3s var(--pa-ease-out),
    transform .25s var(--pa-ease-out);
}
textarea.pa-field__input { resize: vertical; min-height: 7.5rem; line-height: 1.6; }
.pa-field__input::placeholder { color: var(--pa-ink-35); }
.pa-field__input:hover { border-color: var(--pa-ink-20); }

/* The glow, and the reason it is a box-shadow rather than an outline:
   an outline cannot be feathered, and a hard 2px ring on a glass form
   reads as a validation error before the visitor has typed anything. */
.pa-field__input:focus {
  outline: none;
  background: var(--pa-white);
  border-color: var(--pa-pear);
  box-shadow:
    0 0 0 3px rgba(155,181,58,.16),
    0 6px 22px -12px var(--pa-pear-glow);
}
.pa-field__input.is-tapped { transform: scale(.995); }

/* Invalid only AFTER the field has been left or the form submitted -
   :invalid alone paints every required field red on first paint, which
   is the single most common way a nice form turns hostile. index.html
   adds .was-touched on blur and .was-submitted on a failed submit. */
.pa-form.was-submitted .pa-field__input:invalid,
.pa-field__input.was-touched:invalid {
  border-color: rgba(214, 69, 69, .65);
  box-shadow: 0 0 0 3px rgba(214, 69, 69, .12);
}
.pa-form.was-submitted .pa-field__input:invalid { animation: pa-shake .4s var(--pa-ease-io); }
@keyframes pa-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  50%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
}

/* ── submit ── */
.pa-submit {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: inherit; font-size: .92rem; font-weight: 600;
  color: #fff;
  background: linear-gradient(120deg, var(--pa-pear-deep), var(--pa-pear));
  border: 0; border-radius: 12px;
  padding: .85rem 1.4rem;
  cursor: pointer;
  box-shadow: 0 10px 30px -14px var(--pa-pear-glow);
  transition:
    transform .3s var(--pa-ease-out),
    box-shadow .3s var(--pa-ease-out),
    filter .3s var(--pa-ease-out);
}
/* The shine strip: parked off the leading edge and swept across on
   hover. inset-inline-start, so it sweeps with the reading direction
   in both languages rather than backwards in one of them. */
.pa-submit::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 45%;
  inset-inline-start: -60%; z-index: -1;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .65s var(--pa-ease-out);
}
.pa-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px var(--pa-pear-glow); filter: brightness(1.06); }
.pa-submit:hover::before { inset-inline-start: 130%; }
/* Press physics: the button goes DOWN and its shadow collapses under
   it. Both, or it reads as a colour change rather than as a press. */
.pa-submit:active, .pa-submit.is-tapped {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 4px 12px -8px var(--pa-pear-glow);
  transition-duration: .09s;
}
.pa-submit:disabled { cursor: wait; filter: saturate(.8); transform: none; }
.pa-submit:disabled::before { display: none; }
.pa-submit svg { width: 16px; height: 16px; flex: none; }
.pa-submit .hidden { display: none; }

/* Sent: the button holds a confirmed state for a beat before the form
   resets, so the success is legible where the visitor is already
   looking instead of only in a toast at the top of the screen. */
.pa-submit.is-sent {
  background: var(--pa-onyx);
  box-shadow: 0 10px 30px -16px rgba(13,13,13,.6);
  animation: pa-sent-pop .5s var(--pa-ease-out);
}
@keyframes pa-sent-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

.pa-spin { position: relative; width: 16px; height: 16px; flex: none; }
.pa-spin svg { position: absolute; inset: 0; }
.pa-spin svg:first-child { animation: pa-spin 1.1s linear infinite; }
.pa-spin svg:last-child  { opacity: .55; animation: pa-spin 1.1s linear infinite reverse; }
@keyframes pa-spin { to { transform: rotate(360deg); } }

/* ── the aside cards ── */
.pa-contact__card {
  border-radius: var(--pa-radius);
  background: var(--pa-onyx);
  color: var(--pa-beige);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}
.pa-contact__card h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .3rem; }
.pa-contact__card > p { font-size: .86rem; color: rgba(244,241,234,.62); margin: 0 0 1.4rem; line-height: 1.6; }

.pa-contact__link {
  display: flex; align-items: center; gap: .9rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: .8rem .9rem;
  color: inherit;
  transition: transform .35s var(--pa-ease-out), background-color .3s, border-color .3s;
}
.pa-contact__link:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.09);
  border-color: rgba(155,181,58,.4);
}
.pa-contact__link i {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(155,181,58,.18); color: var(--pa-pear);
}
.pa-contact__link i svg { width: 18px; height: 18px; }
.pa-contact__link small {
  display: block; font-family: var(--pa-mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,241,234,.42); margin-bottom: .1rem;
}
.pa-contact__link b { display: block; font-size: .85rem; font-weight: 600; }

.pa-contact__note {
  display: flex; align-items: flex-start; gap: .8rem;
  border-radius: var(--pa-radius);
  border: 1px solid var(--pa-hair);
  background: rgba(255,255,255,.6);
  padding: clamp(1.1rem, 2.4vw, 1.4rem);
}
.pa-contact__note b { flex: none; font-size: 1.15rem; line-height: 1.3; }
.pa-contact__note p { margin: 0; font-size: .86rem; color: var(--pa-ink-70); line-height: 1.6; }

@media (max-width: 900px) {
  .pa-contact__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pa-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════ 20 · SHARED VIEW HERO (docs + contact) ═════════════ */
.pa-subhero {
  border-bottom: 1px solid var(--pa-hair);
  padding-block: clamp(5rem, 11vw, 7rem) clamp(2.5rem, 5vw, 3.5rem);
}
.pa-subhero__inner {
  width: 100%; max-width: 52rem;
  margin-inline: auto; padding-inline: var(--pa-gutter);
}
.pa-subhero--center .pa-subhero__inner { text-align: center; }
.pa-subhero h1 {
  font-family: var(--pa-sans);
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 650; letter-spacing: -0.04em; line-height: 1.04;
  margin: .9rem 0 1rem; text-wrap: balance;
}
[lang="he"] .pa-subhero h1, [dir="rtl"] .pa-subhero h1 {
  letter-spacing: -0.01em; line-height: 1.18; font-weight: 700;
}
.pa-subhero p { font-size: 1.02rem; color: var(--pa-ink-50); line-height: 1.65; margin: 0; text-wrap: pretty; }
.pa-subhero--center p { max-width: 38rem; margin-inline: auto; }

/* ───────────────────── 17 · REDUCED MOTION ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.pa *, body.pa *::before, body.pa *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .pa-js [data-pa-reveal], .pa-js [data-pa-stagger] > * { opacity: 1 !important; }
  .pa-js .pa-line > span { transform: none !important; }
  .pa-play__scan { display: none; }
  /* The blanket rule above collapses the sheen's duration to nothing,
     which turns a 1.15s sweep into a white flash across the card on
     every hover - worse than the motion it is standing in for. The
     pillars keep their glow and their lift; they lose only this. */
  .pa-pillar__sheen { display: none; }
  html.pa-cursor-on, html.pa-cursor-on * { cursor: auto !important; }
  .pa-cursor { display: none; }
}