/* ==========================================================================
   נתיב · the shared design language for every page of the main site.
   Documented in שפה עיצובית.md (nativ-site root). Page-specific CSS stays in the page.
   Load order in each page: Google Fonts link (Fredoka) -> this file -> the page's own <style>.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* brand palette (פלטת צבעי מותג.md) plus the video surfaces (frame.md) */
  --navy: #0C3C60;        /* text, dark grounds */
  --road: #164A71;        /* the road drawn on navy */
  --road-hover: #1D5683;  /* hover of a navy button */
  --cream: #F3EEE4;       /* surfaces, text on navy */
  --cream-deep: #E9E2D4;  /* hover of a cream surface */
  --paper: #FBF8F2;       /* page ground */
  --yellow: #FFD966;      /* the one accent: main buttons, marks, stops passed */
  --yellow-hover: #F6CB45;
  --sky: #8CBCDB;         /* the route line, a stop already passed */
  --ice: #D8E8F2;         /* hover / open state, a light section ground */
  --pale: #E7EFF4;
  --teal: #3D7780;
  --ink-22: rgba(12, 60, 96, 0.22);
  --cream-40: rgba(243, 238, 228, 0.4);

  /* type: one face, hierarchy by weight and size */
  --font: "Fredoka", system-ui, sans-serif;
  --step-small: 1rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);
  --step-sub: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  --step-head: clamp(1.625rem, 0.9rem + 2.7vw, 3.5rem);
  --step-display: clamp(1.625rem, 0.45rem + 4.7vw, 4.875rem);

  /* links: every text link on the site. Two values per ground, the line and the hover (שפה עיצובית.md, "קישורים") */
  --link-line: var(--navy);
  --link-hover: var(--yellow-hover);

  /* space */
  --margin: clamp(1rem, 4vw, 3.5rem);
  --max: 78rem;
  --section: clamp(4rem, 7vw, 7rem);
  --radius: 14px;
  --bar-h: clamp(4.25rem, 3.5rem + 2vw, 5.25rem); /* height of the site bar */

  /* motion: functional only (state change, press feedback, progress) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --t-press: 140ms;
  --t-hover: 180ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; background: var(--paper); color: var(--navy); font-family: var(--font); font-size: var(--step-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
::selection { background: var(--yellow); color: var(--navy); }
.nowrap { white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.4vw, 2.5rem); }
.on-navy { background: var(--navy); color: var(--cream); }
.on-navy :focus-visible { outline-color: var(--cream); }
/* the link's two values on a dark ground; on a yellow ground the hover is a thicker line, since yellow would not show */
.on-navy, .site-foot, .site-footer { --link-line: var(--cream); --link-hover: var(--yellow); }
.on-yellow { --link-line: var(--navy); --link-hover: var(--navy); }

/* ---------- text links: one look everywhere ---------- */
.legal-text a, .site-foot a, .foot-legal a, .rf-consent a, .text-link { color: inherit; text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: 0.25em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .legal-text a:hover, .site-foot a:hover, .foot-legal a:hover, .rf-consent a:hover, .text-link:hover { text-decoration-color: var(--link-hover); }
  .on-yellow a:not(.button):hover { text-decoration-thickness: 4px; }
}
.head { font-size: var(--step-head); line-height: 1.12; letter-spacing: -0.02em; }
.lead { font-size: var(--step-lead); line-height: 1.6; }
@media (max-width: 47.99em) { .grid { display: block; } }

/* ---------- buttons: pill, yellow by default ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 4rem; padding: 0 2.75rem;
  background: var(--yellow); color: var(--navy);
  border-radius: 999px;
  font-size: 1.1875rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
  -webkit-tap-highlight-color: transparent;
}
.button:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--yellow-hover); } }
.button.is-navy { background: var(--navy); color: var(--cream); }
@media (hover: hover) and (pointer: fine) { .button.is-navy:hover { background: var(--road-hover); } }
@media (max-width: 47.99em) { .button { width: 100%; max-width: 24rem; } }

/* a quiet text action beside a button */
.text-link { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 0.25rem; font-size: var(--step-body); font-weight: 600; -webkit-tap-highlight-color: transparent; }
.text-link:active { transform: scale(0.97); }

/* ---------- the route motif ---------- */
/* A vertical stretch of road: navy-blue asphalt, cream edge lines, dashed cream centre line.
   Markup (inline SVG, see שפה עיצובית.md): <svg class="lane-v" viewBox="0 0 112 1000" preserveAspectRatio="none" aria-hidden="true" focusable="false">…</svg>
   The page positions and sizes it. */
.lane-v { position: absolute; display: block; left: 21.11%; width: 7.78%; height: 100%; }

/* A road sign: yellow diamond, navy rim, a 24px line pictogram (stroke 2.2) inside. */
.sign-ico { position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin: 8px 8px 1.375rem; transform-origin: 50% 100%; }
.sign-ico::before { content: ""; position: absolute; inset: 0; border-radius: 9px; background: var(--yellow); transform: rotate(45deg); box-shadow: inset 0 0 0 3px var(--navy); }
.sign-ico svg { position: relative; width: 26px; height: 26px; }
@keyframes sign-swing { 0% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 55% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }

/* A halo: a soft warm light on a navy ground, as if from headlights down the road.
   Markup: <span class="halo" aria-hidden="true"></span> inside a section with position: relative.
   The page sets where it sits and its size (left / bottom / width / height); content above it takes z-index 1. */
.halo { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 240, 190, 0.22), rgba(140, 188, 219, 0.11) 55%, rgba(140, 188, 219, 0) 100%); }

/* ---------- site bar: the logo only, linking to the home page ---------- */
.site-bar { background: var(--navy); }
.site-bar .wrap { display: flex; align-items: center; min-height: var(--bar-h); padding-block: 0.625rem; }
.site-bar .logo { display: inline-flex; align-items: center; min-height: 2.75rem; border-radius: 6px; } /* 44px tap target */
.site-bar .logo img { height: clamp(2.5rem, 2.1rem + 1.2vw, 3.25rem); width: auto; }
.site-bar :focus-visible { outline-color: var(--cream); }
.site-bar.is-light { background: var(--paper); }
.site-bar.is-light :focus-visible { outline-color: var(--navy); }

/* ---------- minimal footer: accessibility statement and privacy policy ---------- */
.site-foot { padding-block: 1.25rem; background: var(--navy); color: var(--cream); font-size: var(--step-small); }
.site-foot ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2rem; }
.site-foot a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 400; }
.site-foot :focus-visible { outline-color: var(--cream); }

/* ---------- site menu: every page of the main site except the focus-session page ----------
   No logo. Desktop: the personal area on the right, the links in the middle, the yellow check button on the left.
   Phone: the menu button and the personal area on the right, the yellow button on the left (short label); the links open from the menu button.
   Up to 420px the personal area is its icon only. Script: site.js. Documented in שפה עיצובית.md.
   The bar is on the page ground and stays at the top of the screen while the page scrolls under it. A thin line under it (the one dividing line
   the site allows) closes it off from the page, so with no logo it still reads at once as the site's navigation. */
.site-menu { --menu-line: color-mix(in srgb, var(--navy) 18%, var(--paper)); position: sticky; top: 0; z-index: 20; background: var(--paper); color: var(--navy); border-bottom: 1px solid var(--menu-line); }
.site-menu .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; min-height: var(--bar-h); padding-block: 0.625rem; }
.site-menu :focus-visible { outline-color: var(--navy); }
/* a page with the sticky menu: a jump to an anchor, and the keyboard focus, stop below the menu, not under it */
:root { --menu-h: var(--bar-h); }
html:has(.site-menu) { scroll-padding-top: calc(var(--menu-h) + 1rem); }

/* the personal area: secondary, so it is a quiet link (a round icon and a word), not a second pill beside the yellow button */
.account { justify-self: start; display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; color: var(--navy); font-size: var(--step-body); font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.account-ico { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ice); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.account-ico svg { width: 24px; height: 24px; }
.account:active .account-ico { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .account:hover .account-ico { background: var(--pale); } .account:hover .account-label { text-decoration: underline; text-decoration-color: var(--link-hover); text-decoration-thickness: 2px; text-underline-offset: 0.25em; } }
/* the links */
.menu-links { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.menu-links a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; color: inherit; text-decoration: none; font-size: var(--step-body); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.25em; transition: text-decoration-color var(--t-hover) ease; -webkit-tap-highlight-color: transparent; }
/* "you are here": bold, with the site's link line. Hover is yellow, as on every link. */
.menu-links a[aria-current="page"] { font-weight: 700; text-decoration-color: var(--link-line); }
@media (hover: hover) and (pointer: fine) { .menu-links a:hover { text-decoration-color: var(--link-hover); } }

/* the yellow check button */
.nav-cta { justify-self: end; min-height: 2.75rem; padding: 0 1.5rem; font-size: 1.0625rem; }
.nav-cta .short { display: none; }
.menu-toggle { display: none; }

/* below 960px: the links open from the menu button */
@media (max-width: 59.99em) {
  /* the sticky bar stays low on a phone: its 44px controls and a little air, nothing more */
  :root { --menu-h: 3.75rem; }
  .site-menu .wrap { grid-template-columns: auto auto minmax(0, 1fr); gap: 0.5rem; min-height: var(--menu-h); padding-block: 0.5rem; }
  .menu-toggle { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ice); color: var(--navy); transition: transform var(--t-press) var(--ease-out); -webkit-tap-highlight-color: transparent; }
  .menu-toggle:active { transform: scale(0.94); }
  .menu-toggle svg { width: 24px; height: 24px; }
  .menu-toggle .i-close, .menu-toggle[aria-expanded="true"] .i-open { display: none; }
  .menu-toggle[aria-expanded="true"] .i-close { display: block; }
  .account { grid-column: 2; grid-row: 1; }
  .nav-cta { grid-column: 3; grid-row: 1; width: auto; max-width: none; }
  /* the open menu continues the bar: the same page ground, closed off by the same thin line, which also falls between the links */
  .menu-panel { display: none; position: absolute; inset-inline: 0; top: 100%; margin-top: 1px; padding: 0.25rem var(--margin) 1rem; background: var(--paper); border-bottom: 1px solid var(--menu-line); }
  .menu-panel.is-open { display: block; }
  .menu-links { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-links li + li { border-top: 1px solid var(--menu-line); }
  .menu-links a { justify-content: flex-start; min-height: 3.5rem; font-size: var(--step-lead); }
}
@media (max-width: 37.49em) {
  .nav-cta { padding: 0 1rem; font-size: 1rem; }
  .nav-cta .full { display: none; }
  .nav-cta .short { display: inline; }
  .account { gap: 0.5rem; font-size: 1rem; }
}
/* narrow phones: the personal area as its icon only; the word stays for screen readers */
@media (max-width: 26.24em) {
  .account-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 59.99em) and (prefers-reduced-motion: no-preference) {
  .menu-panel.is-open { animation: menu-in 200ms var(--ease-out); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .account-ico, .menu-toggle { transition: none; } }

/* desktop order: the personal area on the right, the links in the middle, the button on the left (the links come first in the code, after the menu button, so the keyboard reaches them first on a phone) */
.account { grid-column: 1; grid-row: 1; }
.menu-panel { grid-column: 2; grid-row: 1; }
.nav-cta { grid-column: 3; grid-row: 1; }
@media (max-width: 59.99em) { .account { grid-column: 2; } .nav-cta { grid-column: 3; } }

/* ---------- site footer: every page of the main site except the focus-session page ----------
   The site's base: a full-width navy ground with a straight top edge, the one dark surface on a light page.
   Layout (option A, chosen 2026-11-01): the roadmap sign-up fills the right (where Hebrew reading starts); a column on the left holds
   the social icons at the top, level with the title, and the legal links in a column under them.
   The sign-up: the title on one line; the line; the two name fields, the email field and the yellow button (the footer's one mark) in one row,
   with each field's message under it; the consent under the row. Posts to the Wix form (site.js).
   The code order (= the keyboard order): the sign-up (fields, the box, the button), the icons, the legal links; on a wide screen the grid
   lifts the icons to the top of the left column, below 960px they stay at the bottom, with the legal links.
   Documented in שפה עיצובית.md. */
/* the top padding is kept short so the footer stays low and close to the page's last section */
.site-footer { margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem); background: var(--navy); color: var(--cream); }
.site-footer :focus-visible { outline-color: var(--cream); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "signup social" "signup legal"; column-gap: clamp(2rem, 4vw, 5rem); row-gap: 1.25rem; }
.foot-signup { grid-area: signup; }
.foot-social { grid-area: social; justify-self: end; align-self: start; }
.foot-legal { grid-area: legal; justify-self: end; align-self: end; }

/* 1. the sign-up, all inside the form. The fields have set widths, so the row keeps air on its left before the column.
   The messages are our own (the form has novalidate); the texts sit in the HTML (data-*), the checks in site.js. */
.roadmap-form { --f-name: 9rem; --f-email: 15.5rem; display: grid; grid-template-columns: var(--f-name) var(--f-name) var(--f-email) auto; justify-content: start;
  grid-template-areas: "title title title title" "line line line line" "first last email button" "ferr lerr eerr ." "consent consent consent consent" "msg msg msg msg" "status status status status";
  column-gap: 0.75rem; row-gap: 0.75rem; align-items: center; }
.rm-title { grid-area: title; white-space: nowrap; font-size: var(--step-sub); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.rm-line { grid-area: line; margin-top: -0.25rem; margin-bottom: 0.5rem; font-size: var(--step-body); line-height: 1.5; max-width: 36em; }
.rf-first { grid-area: first; } .rf-last { grid-area: last; } .rf-email { grid-area: email; }
.rf-first-err { grid-area: ferr; } .rf-last-err { grid-area: lerr; } .rf-email-err { grid-area: eerr; }
.rf-consent { grid-area: consent; }
.rf-status { grid-area: status; }
/* a field that needs fixing: red on the field, the message under it */
.rf-err, .rf-consent-msg, .rf-status { font-size: var(--step-small); font-weight: 600; line-height: 1.4; color: #FFC2BC; }
.rf-err { margin-top: -0.25rem; }
.rf-err:empty, .rf-consent-msg:empty, .rf-status:empty { display: none; }
.rf-field[aria-invalid="true"] { background: #FDE3E0; box-shadow: inset 0 0 0 3px #E5484D; }
.rf-consent-msg { grid-area: msg; }
.rf-consent input[aria-invalid="true"] { outline: 3px solid #E5484D; outline-offset: 2px; }
/* cream fields on navy: a full step of tone, no line */
.rf-field { min-width: 0; min-height: 3rem; padding: 0 1rem; border: 0; border-radius: 999px; background: var(--cream); color: var(--navy); font: inherit; font-size: var(--step-body); }
.rf-field::placeholder { color: var(--navy); opacity: 1; }
.rf-field:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* the button at the end of the fields' row, on the left of the email */
.roadmap-form .button { grid-area: button; min-height: 3rem; padding: 0 1.5rem; font-size: 1.0625rem; }
.roadmap-form .button[disabled] { cursor: progress; }
.rf-consent { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--step-small); line-height: 1.5; cursor: pointer; }
.rf-consent input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--yellow); cursor: pointer; }
.rf-consent a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }

/* 2. the left column: the icons, then the legal links in a column, on the left edge */
.foot-legal { display: flex; flex-direction: column; align-items: flex-end; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--step-small); font-weight: 400; }
.foot-social { display: flex; flex-wrap: wrap; gap: 12px; }
.foot-social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--road); color: var(--cream); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.foot-social a:active { transform: scale(0.94); }
.foot-social svg { width: 24px; height: 24px; stroke: currentColor; }
@media (hover: hover) and (pointer: fine) { .foot-social a:hover { background: var(--yellow); color: var(--navy); } }

/* 960-1199px: the row still holds the button; the fields and the button a step tighter, the icons two by two */
@media (max-width: 74.99em) {
  .roadmap-form { --f-name: 7rem; --f-email: 15rem; column-gap: 0.5rem; }
  .rf-field { padding: 0 0.75rem; }
  .roadmap-form .button { padding: 0 1.125rem; font-size: 1rem; }
  .foot-social { display: grid; grid-template-columns: repeat(2, 48px); }
}
/* below 960px: one column, top to bottom: the sign-up first, then the icons and the legal links under it, on the reading edge (right) */
@media (max-width: 59.99em) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "signup" "social" "legal"; row-gap: 1.5rem; }
  .foot-social { display: flex; justify-self: start; margin-top: 0.5rem; }
  .foot-legal { justify-self: start; align-self: start; align-items: flex-start; margin-top: -0.75rem; }
}
@media (max-width: 47.99em) {
  /* phone: the title still on one line; first and last name side by side, the email under them, the box, then the button,
     where the thumb ends the form */
  .rm-title { font-size: clamp(1.125rem, 0.2rem + 4.6vw, 1.375rem); }
  .roadmap-form { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "title title" "line line" "first last" "ferr lerr" "email email" "eerr eerr" "consent consent" "msg msg" "button button" "status status"; }
  /* the button as wide as the email field above it, 48px high, for the thumb */
  .roadmap-form .button { justify-self: stretch; width: 100%; max-width: none; min-height: 3rem; margin-top: 0.25rem; }
}
@media (prefers-reduced-motion: reduce) { .foot-social a { transition: none; } }

/* ---------- text page: the legal pages (terms, privacy policy, accessibility statement) ----------
   Markup: <main class="legal"><article aria-labelledby="page-title"><div class="wrap"><h1 id="page-title">…</h1><div class="legal-text">…</div></div></article></main>
   One reading column on the page ground, on the right edge (where Hebrew reading starts), at every width: the title, then the text.
   The text is a legal document copied as it is, so the page adds nothing to it: no surface, no picture, no mark.
   Three steps: the title (head), the section titles (sub), the text (body). Documented in שפה עיצובית.md. */
.legal article { padding-block: clamp(2rem, 4.5vw, 4.5rem) clamp(1rem, 2vw, 2rem); }
/* the title keeps a clear step over the section titles on a phone too (30px against 22px) */
.legal h1 { max-width: 20em; font-size: clamp(1.875rem, 1rem + 2.6vw, 3.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.legal-text { max-width: 34em; margin-top: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.7; }
.legal-text > * + * { margin-top: 0.875rem; }
.legal-text > h2 { margin-top: clamp(2.25rem, 3.5vw, 3rem); font-size: var(--step-sub); line-height: 1.25; letter-spacing: -0.01em; }
.legal-text > h2 + * { margin-top: 0.75rem; }
.legal-text ul, .legal-text ol { padding-inline-start: 1.5em; }
.legal-text ul { list-style: disc; }
.legal-text ol { list-style: decimal; }
.legal-text li { padding-inline-start: 0.25em; }
.legal-text li + li, .legal-text li > ol { margin-top: 0.5rem; }
.legal-text li::marker { font-weight: 600; }
.legal-text a { overflow-wrap: anywhere; }
/* the accessibility statement: its opening sentence one step up; the signature and the date close the page */
.legal-lead { font-size: var(--step-lead); line-height: 1.6; }
.legal-text > .legal-sign { margin-top: clamp(2rem, 3vw, 2.5rem); }
.legal-sign p + p { margin-top: 0.125rem; }
.legal-sign p:first-child { font-weight: 600; }

/* ---------- Wix site script: its own consent banner breaks off Wix domains; Usercentrics shows instead ---------- */
.consent-banner-root { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .button, .text-link { transition: none; }
}