/* DIRECTION: dark technical / camera-feed. Reference: brand brief (charcoal + lime), CCTV UI conventions (mono chips, corner brackets).
   ONE MEMORABLE THING: the hero is a single camera frame with a physical toggle "רגילה ⇄ חכמה" — flip it and lime detection boxes + a mono event log appear over the same frame.
   MOTION PERSONALITY: mathematical (expo-out, no bounce). Type: Rubik (he) / IBM Plex Mono (latin chips). Accent: lime #C6F24E on charcoal #14181c. */

:root {
  color-scheme: dark;
  --bg: #14181c;
  --surface: #1c2126;
  --surface-high: #252b31;
  --border: #323a41;
  --text: #f4f2ec;
  --text-muted: #b3b6ad;
  /* lightened from #7d827a, which measured 4.12:1 on the dark panel and so
     failed WCAG 1.4.3 / IS 5568. This is 4.98:1, with margin on purpose:
     Hebrew faces render thinner than Latin at the same size. */
  --text-subtle: #8b9088;
  --accent: #C6F24E;
  --accent-on: #14181c;
  --accent-dim: rgba(198, 242, 78, .14);
  --alert: #ff6b4a;

  --font-he: 'Rubik', 'Heebo', 'Noto Sans Hebrew', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --step--1: clamp(.85rem, .82rem + .15vw, .95rem);
  --step-0: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --step-1: clamp(1.33rem, 1.25rem + .4vw, 1.5rem);
  --step-2: clamp(1.77rem, 1.6rem + .85vw, 2.25rem);
  --step-3: clamp(2.2rem, 1.9rem + 1.8vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.6vw, 4.6rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --space-24: 6rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 8rem);
  --radius-sm: 3px; --radius-md: 6px; --radius-pill: 999px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-press: 140ms; --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 380ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-he);
  font-size: var(--step-0);
  line-height: 1.75;
  letter-spacing: 0;
  word-spacing: .05em;
  text-align: start;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.25; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mono { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0; }
[dir="ltr"] { unicode-bidi: isolate; }

.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: var(--space-4); top: -100px; z-index: 30; padding: var(--space-2) var(--space-4); background: var(--accent); color: var(--accent-on); border-radius: var(--radius-sm); text-decoration: none; }
.skip:focus { top: var(--space-4); }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(20, 24, 28, .88);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border);
}
.top .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: 60px; }
/* four items now share the bar (brand · back · lang · whatsapp) — none of them may wrap */
.brand, .top .back, .top .lang { white-space: nowrap; flex: none; }
.brand { display: flex; align-items: baseline; gap: var(--space-2); text-decoration: none; }
.brand .word { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; }
.brand .sub { font-family: var(--font-mono); font-size: .8rem; color: var(--text-subtle); }
.top .back {
  margin-inline-start: auto;
  color: var(--text-muted); text-decoration: none; font-size: var(--step--1);
  padding: var(--space-2) 0;
}
.top .back:hover { color: var(--text); }
/* language switch — same quiet weight as the "back" link, in the site's own accent */
.top .lang {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding-inline: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: none; color: var(--text-muted);
  /* latin renders in Plex Mono, the Hebrew label falls through to Rubik */
  font-family: 'IBM Plex Mono', var(--font-he);
  font-size: var(--step--1); font-weight: 500; letter-spacing: .04em; line-height: 1;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.top .lang:hover { color: var(--accent); border-color: var(--accent); }
.top .lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 500;
  transition: transform var(--dur-press) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: var(--accent-on); }
.btn-accent:hover { background: #d4f86a; }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-high); }
.btn svg { width: 18px; height: 18px; flex: none; }
.top .btn { padding-inline: var(--space-3); }
.top .btn .lbl { display: none; }
@media (min-width: 640px) { .top .btn .lbl { display: inline; } }
/* phones: buy back the width the language switch costs, in both languages */
@media (max-width: 639px) {
  .top .wrap { gap: var(--space-3); }
  .brand { gap: var(--space-1); }
  .brand .word { font-size: .95rem; }
  .brand .sub { font-size: .7rem; }
  .top .back { font-size: .78rem; }
  .top .lang { min-width: 40px; padding-inline: var(--space-2); }
}
@media (max-width: 359px) { .brand .sub { display: none; } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.hero-head { display: grid; gap: var(--space-4); }
.hero h1 { max-width: 20ch; }
@media (min-width: 1024px) {
  .hero-head { grid-template-columns: 7fr 5fr; column-gap: var(--space-12); align-items: end; }
  .hero-head .eyebrow { grid-column: 1 / -1; }
  .hero-head .lede { margin-block-start: 0; }
  .hero-side { padding-block-end: var(--space-2); }
}
.eyebrow { color: var(--accent); font-family: var(--font-mono); font-size: var(--step--1); margin-block-end: var(--space-4); display: flex; gap: var(--space-3); align-items: center; }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: none; animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.hero h1 { font-size: var(--step-4); font-weight: 700; line-height: 1.15; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin-block-start: var(--space-6); font-size: var(--step-1); color: var(--text-muted); max-width: 40ch; line-height: 1.6; }
.hero .cta-row { margin-block-start: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- camera frame + toggle (signature) ---------- */
.cam {
  margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
  display: grid; gap: var(--space-4);
}
.cam-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6);
}
.toggle {
  display: inline-grid; grid-template-columns: 1fr 1fr; position: relative;
  padding: 4px; border-radius: var(--radius-pill);
  background: var(--surface-high); border: 1px solid var(--border);
  isolation: isolate;
}
.toggle::before {
  content: ""; position: absolute; z-index: -1;
  inset-block: 4px; inset-inline-start: 4px; inset-inline-end: auto;
  width: calc(50% - 4px);
  border-radius: var(--radius-pill); background: var(--accent);
  transition: translate var(--dur-slow) var(--ease-out);
}
/* the pill slides from the inline-start button to the inline-end one — which is
   physically leftward in Hebrew and rightward in English */
.toggle[data-mode="smart"]::before { translate: -100% 0; }
:root[dir="ltr"] .toggle[data-mode="smart"]::before { translate: 100% 0; }
.toggle button {
  appearance: none; border: 0; background: none; cursor: pointer;
  min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-pill);
  font: inherit; font-weight: 500; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.toggle button[aria-pressed="true"] { color: var(--accent-on); }
.cam-status { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-subtle); display: flex; gap: var(--space-4); }
.cam-status b { font-weight: 500; color: var(--text-muted); }

.frame {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background: var(--surface); aspect-ratio: 16 / 9;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame .corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(244, 242, 236, .55); pointer-events: none; }
.frame .c1 { top: 12px; inset-inline-start: 12px; border-inline-end: 0; border-block-end: 0; }
.frame .c2 { top: 12px; inset-inline-end: 12px; border-inline-start: 0; border-block-end: 0; }
.frame .c3 { bottom: 12px; inset-inline-start: 12px; border-inline-end: 0; border-block-start: 0; }
.frame .c4 { bottom: 12px; inset-inline-end: 12px; border-inline-start: 0; border-block-start: 0; }
/* ---------------------------------------------------------------------------
   PINNED TO THE PHOTOGRAPH — everything from here to the end of the .det block
   uses physical left/right on purpose. The frame is an image, not a layout: the
   camera HUD and the detection boxes describe pixels inside that image, so they
   must sit in exactly the same place in Hebrew and in English. Do not convert
   these to inset-inline-*; only the label text direction follows the language.
   --------------------------------------------------------------------------- */
.frame .chip {
  position: absolute; top: 14px; right: 44px; z-index: 2;
  font-family: var(--font-mono); font-size: .75rem; color: var(--text);
  background: rgba(20, 24, 28, .7); padding: 2px 8px; border-radius: var(--radius-sm);
}
.frame .chip.end { right: auto; left: 44px; }
.frame .chip .on { color: var(--accent); }

/* detection overlay — boxes are HTML positioned in % of the frame (image coordinates, physical left/top on purpose) */
.det { position: absolute; inset: 0; pointer-events: none; direction: ltr; }
/* ...but the caption inside each box is prose: it reads rtl in Hebrew, ltr in English */
:root[dir="ltr"] .det .box::before,
:root[dir="ltr"] .det .line::before,
:root[dir="ltr"] .det .count { direction: ltr; }
/* "Count line" is wider than "קו ספירה" and grows leftward into the package label,
   so in English the counting-line caption hangs under its line instead of over it */
:root[dir="ltr"] .det .line::before { bottom: auto; top: 5px; }
.det .box {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 2px solid var(--accent); background: rgba(198, 242, 78, .07);
  border-radius: 2px; font-style: normal;
}
.det .box::before {
  content: attr(data-l); position: absolute; bottom: 100%; left: -2px;
  direction: rtl; white-space: nowrap;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500; line-height: 1.5;
  padding: 1px 6px; background: var(--accent); color: var(--accent-on);
  border-radius: 2px 2px 0 0;
}
.det .box.low::before { bottom: auto; top: 100%; border-radius: 0 0 2px 2px; }
.det .box.zone { border-style: dashed; background: rgba(198, 242, 78, .04); }
.det .box.n { border-width: 2px; }
.det .box.n::before { font-size: .68rem; padding: 0 5px; }
.det .line {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 0;
  border-block-start: 2px dashed var(--accent);
}
.det .line::before {
  content: attr(data-l); position: absolute; bottom: 4px; right: 0; direction: rtl; white-space: nowrap;
  font-family: var(--font-mono); font-size: .68rem; color: var(--accent);
  background: rgba(20, 24, 28, .75); padding: 0 6px; border-radius: 2px;
}
.det .count {
  position: absolute; right: 3%; bottom: 5%;
}
.det .count.start { right: auto; left: 3%; }
.det .count { direction: rtl;
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 500; color: var(--accent);
  background: rgba(20, 24, 28, .8); padding: 4px 12px; border-radius: var(--radius-sm);
  display: flex; align-items: baseline; gap: 8px;
}
.det .count b { font-size: 1.8rem; font-weight: 500; line-height: 1; }
.det .count small { font-size: .72rem; color: var(--text-muted); }
@media (min-width: 900px) { .det .box::before { font-size: .78rem; } .det .count b { font-size: 2.2rem; } }
/* phones: the hero frame is too short at 16:9 for readable labels — show it 4:3 (cover-cropped) and
   scale the overlay to the same cover geometry so boxes stay pinned to pixels */
@media (max-width: 639px) {
  .cam .frame { aspect-ratio: 4 / 3; }
  .cam .det { width: 133.34%; left: -16.67%; right: auto; }
  .cam .det .count { right: 15.5%; }
  .det .box::before, .det .line::before { font-size: .64rem; }
  .frame .chip:not(.end) { top: auto; bottom: 14px; right: auto; left: 44px; }
}

.cam .det .box, .cam .det .line, .cam .det .count { opacity: 0; transform: scale(.985); transform-origin: center; }
[data-mode="smart"] .det .box, [data-mode="smart"] .det .line, [data-mode="smart"] .det .count {
  animation: boxin var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes boxin { to { opacity: 1; transform: none; } }
[data-mode="dumb"] .det .box, [data-mode="dumb"] .det .line, [data-mode="dumb"] .det .count { animation: none; opacity: 0; }

/* the dumb side gets a subtle "raw feed" tone */
.frame img { transition: filter var(--dur-slow) var(--ease-out); }
[data-mode="dumb"] .frame img { filter: saturate(.75) contrast(.96); }

/* event log */
.log {
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface);
}
.log-head { padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-subtle); border-block-end: 1px solid var(--border); display: flex; justify-content: space-between; }
.log ol { list-style: none; margin: 0; padding: 0; min-height: 5.6rem; }
.log li {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: baseline;
  padding: var(--space-2) var(--space-4); font-size: var(--step--1);
  opacity: 0; transform: translateY(6px);
}
.log li + li { border-block-start: 1px solid var(--border); }
[data-mode="smart"] .log li { animation: rise var(--dur-base) var(--ease-out) forwards; animation-delay: calc(var(--i) * 110ms + 200ms); }
.log li .t { font-family: var(--font-mono); color: var(--text-subtle); }
.log li .k { color: var(--accent); font-family: var(--font-mono); }
.log .empty { padding: var(--space-4); color: var(--text-subtle); font-size: var(--step--1); }
[data-mode="smart"] .log .empty { display: none; }
[data-mode="dumb"] .log ol { display: none; }
@keyframes rise { to { opacity: 1; transform: none; } }

.cam-caption { color: var(--text-muted); font-size: var(--step--1); max-width: 60ch; }

@media (min-width: 900px) {
  .cam { grid-template-columns: 1fr 300px; grid-template-areas: "bar bar" "frame log" "cap cap"; }
  .cam-bar { grid-area: bar; }
  .cam .frame { grid-area: frame; }
  .log { grid-area: log; align-self: stretch; }
  .cam-caption { grid-area: cap; }
}

/* ---------- sections ---------- */
section { padding-block: var(--section); }
.sec-head { max-width: 60ch; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
.sec-head .kicker { font-family: var(--font-mono); color: var(--accent); font-size: var(--step--1); margin-block-end: var(--space-3); }
.sec-head h2 { font-size: var(--step-3); }
.sec-head p { margin-block-start: var(--space-4); color: var(--text-muted); }

/* ---------- features ---------- */
.features { padding-block-start: var(--section); }
.grid { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.feat { display: grid; gap: var(--space-4); align-content: start; }
.feat .frame { aspect-ratio: 3 / 2; }
.feat .det .box, .feat .det .line, .feat .det .count { opacity: 1; transform: none; animation: none; }
.feat h3 { font-size: var(--step-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.tag {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  padding: 2px 8px; border-radius: var(--radius-sm); line-height: 1.6;
  background: var(--accent-dim); color: var(--accent);
  white-space: nowrap;   /* "in development" must not break across two lines */
}
.tag.new { background: rgba(255, 107, 74, .16); color: var(--alert); }
.tag.soft { background: var(--surface-high); color: var(--text-muted); }
.feat p { color: var(--text-muted); font-size: var(--step--1); line-height: 1.7; }
.feat .gives { color: var(--text); font-size: var(--step--1); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--accent); }
.feat .gives b { font-weight: 500; color: var(--text-muted); }
.feat .note { color: var(--text-subtle); font-size: .8rem; line-height: 1.6; }

/* fall detection: phone alert mock in the frame.
   PINNED — it is composited over the monitored-zone box, so it keeps the same
   physical corner of the photograph in both languages (see the .det note above). */
.alert-card {
  position: absolute; z-index: 2; left: 6%; right: auto; bottom: 8%;
  width: min(62%, 260px); background: rgba(20, 24, 28, .92);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); font-size: .82rem; line-height: 1.5;
}
.alert-card .who { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .7rem; color: var(--text-subtle); margin-block-end: 2px; }
.alert-card .who b { color: var(--accent); font-weight: 500; }
.alert-card strong { display: block; font-weight: 600; }

/* ---------- soon ---------- */
.soon { padding-block: 0 var(--section); }
.soon-list { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
@media (min-width: 760px) { .soon-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.soon-item { background: var(--surface); padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; }
.soon-item .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.soon-item .row h3 { min-width: 0; }   /* the nowrap chip must never widen the column */
.soon-item h3 { font-size: var(--step-0); font-weight: 500; }
.soon-item p { color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; }

/* ---------- proof ---------- */
.proof { background: var(--surface); border-block: 1px solid var(--border); padding-block: clamp(2.5rem, 6vw, 4rem); }
.proof .wrap { display: grid; gap: var(--space-6); }
.proof-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.proof-head h2 { font-size: var(--step-1); }
.proof-head span { color: var(--text-subtle); font-size: var(--step--1); }
.proof-list { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .proof-list { grid-template-columns: 1fr 1fr; } }
.proof-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center;
  padding: var(--space-4) var(--space-6); background: var(--bg); border-radius: var(--radius-md);
  text-decoration: none; transition: background var(--dur-fast) var(--ease-out);
}
.proof-item:hover { background: var(--surface-high); }
.proof-item .mark { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-dim); display: grid; place-items: center; font-family: var(--font-mono); color: var(--accent); font-size: .8rem; }
.proof-item h3 { font-size: var(--step-0); font-weight: 500; }
.proof-item p { color: var(--text-muted); font-size: var(--step--1); line-height: 1.5; }
.proof-item .arrow { color: var(--text-subtle); font-family: var(--font-mono); }

/* ---------- how ---------- */
.steps { display: grid; gap: var(--space-6); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); display: grid; gap: var(--space-3); align-content: start; }
.step .n { font-family: var(--font-mono); color: var(--accent); font-size: var(--step--1); }
.step h3 { font-size: var(--step-1); }
.step p { color: var(--text-muted); font-size: var(--step--1); line-height: 1.7; }
.step .out { color: var(--text-subtle); font-size: .8rem; font-family: var(--font-mono); }

/* ---------- cta ---------- */
.cta { padding-block: 0 var(--section); }
.cta-box {
  background: var(--accent); color: var(--accent-on); border-radius: var(--radius-md);
  padding: clamp(2rem, 5vw, 3.5rem); display: grid; gap: var(--space-6);
}
@media (min-width: 860px) { .cta-box { grid-template-columns: 1fr auto; align-items: center; } }
.cta-box h2 { font-size: var(--step-3); line-height: 1.15; max-width: 22ch; }
.cta-box p { margin-block-start: var(--space-3); max-width: 46ch; opacity: .85; }
.cta-box .btn { background: var(--accent-on); color: var(--text); }
.cta-box .btn:hover { background: #2a3138; }

/* ---------- footer ---------- */
footer { border-block-start: 1px solid var(--border); padding-block: var(--space-12); color: var(--text-muted); font-size: var(--step--1); }
footer .wrap { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { footer .wrap { grid-template-columns: 1fr 1fr; align-items: end; } }
footer .visuals { display: flex; gap: var(--space-3); align-items: flex-start; max-width: 44ch; line-height: 1.6; }
footer .visuals::before { content: ""; flex: none; width: 4px; height: 1.2em; margin-block-start: .35em; background: var(--accent); }
footer .links { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-self: start; }
@media (min-width: 760px) { footer .links { justify-self: end; } }
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--text); }
footer .fine { color: var(--text-subtle); font-size: .8rem; }

/* ---------- reveal on scroll (progressive; JS adds .is-in, without JS nothing is hidden) ---------- */
html.js .reveal { opacity: 0; translate: 0 12px; transition: opacity var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out); }
html.js .reveal.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .eyebrow::before { animation: none; }
}