/* ============================================================
   Primunity — Site design system (v2, English/LTR-first).
   Glassmorphism · seamless ambient background · scroll fade · hover glow.
   Self-hosted fonts, strict CSP. RTL-safe via CSS logical properties.
   ============================================================ */
/* CROSS-ROOT IMPORTS — fonts.css and modules/overlay-fx.css are imported from
   BOTH stylesheet roots (here and from primunity.css, which the app/dashboard
   layouts load instead of this file). The ?v tokens MUST match primunity.css's
   for the same file or a visitor who crosses roots (e.g. /login -> /dashboard)
   downloads and stores identical bytes twice under two cache keys. They had
   drifted (fonts.css v2 here vs v5 there, overlay-fx v1 vs v2) and are now
   aligned. Bump them in BOTH roots, together, or not at all. */
@import url('fonts.css?v=6');
/* The shared overlay out-animation layer (.is-closing / [data-ofx]). The public /
   auth / admin layouts load site.css INSTEAD of primunity.css, so without this
   registration their overlays would have no out-state at all. Additive only —
   every rule in that sheet is namespaced to .is-closing / [data-ofx]. */
@import url('modules/overlay-fx.css?v=2');

/* Smooth cross-fade between pages on same-origin navigation — e.g. switching
   language (EN <-> HE) or moving between pages. Progressive: browsers without
   cross-document view transitions just navigate instantly. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .38s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.99); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.01); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---- Design tokens ---------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand */
  --brand:        #2563EB;
  --brand-strong: #1D4ED8;
  --brand-deep:   #0B1F52;
  --brand-sky:    #16B8F5;
  --brand-grad:   linear-gradient(120deg, #1E3A8A 0%, #2563EB 46%, #22B8F0 100%);

  /* Neutrals (light) */
  --bg:        #F4F7FE;
  --bg-2:      #EAF1FC;
  --surface:   #FFFFFF;
  --surface-2: #F2F6FD;
  --border:    #E3EAF5;
  --border-2:  #D3DEEF;

  /* Glass */
  --glass-bg:     rgba(255, 255, 255, .55);
  --glass-strong: rgba(255, 255, 255, .74);
  --glass-border: rgba(255, 255, 255, .70);
  --glass-blur:   16px;
  --spotlight:    rgba(37, 99, 235, .16);

  /* Text */
  --text:   #0C1730;
  --text-2: #45546F;
  --muted:  #6C7B98;
  --on-brand: #FFFFFF;

  /* Feedback */
  --ok: #0EA36B; --warn: #D98514; --err: #E23D5B; --amber: #F5A623;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(13,26,58,.05), 0 1px 3px rgba(13,26,58,.07);
  --shadow-md: 0 8px 24px rgba(13,26,58,.09), 0 2px 8px rgba(13,26,58,.06);
  --shadow-lg: 0 30px 70px rgba(13,26,58,.16), 0 10px 24px rgba(13,26,58,.09);
  --glow:      0 24px 80px rgba(34,120,240,.30);

  /* Geometry */
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;
  --container: 1180px;
  --gutter: clamp(18px, 4vw, 40px);

  /* Type */
  --font: 'Rubik', 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 240ms;

  /* Z-index scale — overlays (modals/toasts) always sit above nav & footer */
  --z-bg: -2; --z-base: 1; --z-nav: 100; --z-overlay: 1000; --z-modal: 1010; --z-toast: 1100;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #060A16;
  --bg-2:      #0A1122;
  --surface:   #0F1A34;
  --surface-2: #142242;
  --border:    #203157;
  --border-2:  #2A3E6C;

  --glass-bg:     rgba(17, 28, 54, .48);
  --glass-strong: rgba(17, 28, 54, .68);
  --glass-border: rgba(120, 150, 210, .16);
  --spotlight:    rgba(59, 130, 246, .22);

  --text:   #EAF0FB;
  --text-2: #AEBBD6;
  --muted:  #7E8DB0;

  --brand:  #3B82F6;
  --brand-strong: #2563EB;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 26px rgba(0,0,0,.45);
  --shadow-lg: 0 34px 80px rgba(0,0,0,.6);
  --glow:      0 24px 90px rgba(34,120,240,.4);
}

/* ---- Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: 16px; line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Seamless ambient background — fixed, soft, "invisible": one continuous
   field behind every section so there are no hard seams between them. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none;
  background:
    radial-gradient(58% 48% at 80% 4%,  rgba(37,99,235,.12), transparent 60%),
    radial-gradient(50% 44% at 10% 12%, rgba(22,184,245,.11), transparent 62%),
    radial-gradient(60% 50% at 50% 106%, rgba(37,99,235,.08), transparent 60%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(58% 48% at 80% 4%,  rgba(37,99,235,.20), transparent 60%),
    radial-gradient(50% 44% at 10% 12%, rgba(22,184,245,.16), transparent 62%),
    radial-gradient(60% 50% at 50% 106%, rgba(37,99,235,.16), transparent 60%);
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.icon { width: 20px; height: 20px; flex: none; }   /* base size; context rules override */

/* Directional icons (arrows/chevrons) mirror under RTL. */
[dir="rtl"] .pmu-flip-rtl { transform: scaleX(-1); }

/* Consistent inline-link hover: an underline that grows in (and out) smoothly. */
.link, .auth-alt a, .auth-terms a, .auth-row a, .legal-doc a, .legal-contact a {
  color: var(--brand); font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat;
  transition: background-size .3s var(--ease), opacity var(--dur) var(--ease);
}
[dir="rtl"] .link, [dir="rtl"] .auth-alt a, [dir="rtl"] .auth-terms a,
[dir="rtl"] .auth-row a, [dir="rtl"] .legal-doc a, [dir="rtl"] .legal-contact a { background-position: 100% 100%; }
.link:hover, .auth-alt a:hover, .auth-terms a:hover, .auth-row a:hover,
.legal-doc a:hover, .legal-contact a:hover { background-size: 100% 1.5px; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* Smooth whole-page fade when switching light/dark (added only during the toggle). */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .45s var(--ease), background-image .45s var(--ease),
    color .45s var(--ease), border-color .45s var(--ease), fill .45s var(--ease), box-shadow .45s var(--ease) !important;
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.18rem; letter-spacing: -.01em; }
p { color: var(--text-2); }

.skip-link { position: absolute; inset-inline-start: -999px; top: 0; z-index: var(--z-toast); background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) var(--r-sm); }
.skip-link:focus { inset-inline-start: 0; }

/* ---- Glass utility ---------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
  backdrop-filter: saturate(160%) blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

/* ---- Layout primitives ------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 780px; }
.section { position: relative; z-index: var(--z-base); padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(28px, 4vw, 44px); }
.section--alt { background: transparent; }   /* seamless — no section tint */
.center { text-align: center; }
.muted { color: var(--muted); }
.gradient-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.section__head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.section__head p { margin-top: 14px; font-size: 1.05rem; }
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }

.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Buttons ---------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-full); font-weight: 600; font-size: .95rem; border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn .icon { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 6px 16px rgba(37,99,235,.28); }
.btn--primary:hover { background: var(--brand-strong); box-shadow: 0 12px 28px rgba(37,99,235,.38); transform: translateY(-2px); }
.btn--solid { background: var(--brand-grad); color: #fff; box-shadow: var(--glow); }
.btn--solid:hover { transform: translateY(-2px); }
.btn--ghost { background: var(--glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); border-color: var(--glass-border); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.btn--lg { padding: 14px 26px; font-size: 1.02rem; }
.btn--sm { padding: 8px 15px; font-size: .875rem; }
.btn--block { width: 100%; }

/* ---- Badge ------------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-full);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); font-size: .82rem; font-weight: 600; color: var(--text-2); box-shadow: var(--shadow-sm); }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-sky); box-shadow: 0 0 0 3px rgba(22,184,245,.2); }

/* ---- Cards (glass + cursor-follow spotlight) -------------------------- */
.card { position: relative; overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur)); backdrop-filter: saturate(160%) blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .5s var(--ease); }
/* Coloured border-ring AND cursor glow are pseudo-element overlays faded via
   OPACITY — opacity always interpolates, so they fade in AND out every time
   (no color-mix / border-color transition quirks that made it "snap"). */
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 60%, transparent);
  opacity: 0; transition: opacity .5s var(--ease); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0;
  transition: opacity .5s var(--ease);
  background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 0%), var(--spotlight), transparent 66%); }
.card > * { position: relative; z-index: 1; }
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card--hover:hover::before { opacity: 1; }
.card--hover:hover::after { opacity: 1; }
.card--pad-lg { padding: clamp(28px, 5vw, 52px); }
.card--featured { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: 0 0 0 1px var(--brand), var(--shadow-md); }
.card__title { margin-bottom: 8px; }
.card p { font-size: .96rem; }

.feature__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(22,184,245,.16)); color: var(--brand); margin-bottom: 18px; }
.feature__icon .icon { width: 26px; height: 26px; }
[data-theme="dark"] .feature__icon { background: linear-gradient(135deg, rgba(59,130,246,.24), rgba(22,184,245,.2)); color: #7CC4FF; }

/* ---- How-it-works stepper (connected timeline) ----------------------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; padding: 0; margin: 0; }
.steps::before { content: ''; position: absolute; z-index: 0; inset-block-start: 38px; inset-inline: 16.66%; block-size: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 55%, transparent) 18%, color-mix(in srgb, var(--brand) 55%, transparent) 82%, transparent); }
.step { position: relative; text-align: center; padding: 0 8px; }
.step__node { position: relative; z-index: 1; inline-size: 76px; block-size: 76px; margin: 0 auto 20px; display: grid; place-items: center;
  border-radius: 24px; background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow); color: var(--brand);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
[data-theme="dark"] .step__node { background: var(--surface-2); color: #7CC4FF; }
.step__node .icon { inline-size: 32px; block-size: 32px; }
.step__num { position: absolute; inset-block-start: -9px; inset-inline-end: -9px; inline-size: 28px; block-size: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand-grad); color: #fff; font-size: .82rem; font-weight: 800; border: 3px solid var(--bg); }
.step:hover .step__node { transform: translateY(-5px); border-color: color-mix(in srgb, var(--brand) 55%, var(--glass-border)); box-shadow: var(--shadow-lg); }
.step__t { font-size: 1.18rem; font-weight: 700; margin-block-end: 7px; }
.step__d { color: var(--muted); font-size: .93rem; line-height: 1.55; max-inline-size: 32ch; margin-inline: auto; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 26px; max-inline-size: 440px; margin-inline: auto; }
  .steps::before { inset-block-start: 38px; inset-inline-start: 38px; inset-inline-end: auto; inline-size: 2px; block-size: calc(100% - 76px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 55%, transparent), transparent); }
  .step { display: grid; grid-template-columns: 76px 1fr; align-items: start; gap: 18px; text-align: start; padding: 0; }
  .step__node { margin: 0; }
  .step__d { margin-inline: 0; }
}

/* ---- Top navigation (glass, sticky) ----------------------------------- */
.nav { position: sticky; top: 0; z-index: var(--z-nav); border-block-end: 1px solid transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.nav.is-scrolled { background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-block-end-color: var(--glass-border); box-shadow: var(--shadow-sm); }
.nav__inner { max-width: var(--container); margin-inline: auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 18px; }
/* flex-shrink:0 + nowrap: the brand is a flex item in .nav__inner, so when the row
   overflowed it was the first thing squeezed — the business name wrapped onto two
   lines, which grew the whole header and pushed the hero content out from under it. */
.nav__logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; flex-shrink: 0; white-space: nowrap; }
.nav__logo img { height: 30px; width: auto; }
.nav__spacer { flex: 1; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link { padding: 8px 14px; border-radius: var(--r-full); color: var(--text-2); font-weight: 500; font-size: .95rem;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav__link:hover { color: var(--text); background: var(--glass-bg); }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-inline-start: 8px; }
.nav__toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--glass-border); place-items: center; gap: 5px; color: var(--text); background: var(--glass-bg); }
.nav__toggle .icon { width: 22px; height: 22px; }
/* ---- THE BURGER HAS TWO GLYPHS IN THIS TREE, AND THIS BUNDLE STYLED ONE ---- (GH #53)
   partials/site-nav.php — the platform's own nav, the only .nav__toggle this bundle
   used to meet — puts an icon('menu') SVG in the button, which the rule above sizes.
   The tenant SITE CHROME (ChromeRenderer::header, rendered by partials/nav.php) puts
   THREE BARE SPANS in it instead, and since the layouts/auth.php swap it renders on
   THIS bundle too: on a business's own host /login and /register are its members'
   mandatory sign-in pages, and errors/tenant.php is its 404. This sheet had no rule
   for those spans at all. MEASURED at 390x780 on demo-fitness's own host, en and he
   alike: a 42x42 button whose three spans were each 0x0 and rgba(0, 0, 0, 0) — a
   burger with no glyph of any kind, next to zero <svg> children.
   These are the same 22x2 bars that modules/layout.css's own `.nav__toggle span` rule
   gives the identical markup on the primunity.css bundle (measured there: 22x2,
   rgb(11, 27, 58)), so a member who walks from the business's home page to its
   sign-in page now meets the SAME burger.
   `gap` is inert for the single-SVG variant — one grid item has no gaps — so
   site-nav's button is untouched, and that was measured too, not assumed. */
.nav__toggle span { width: 22px; height: 2px; border-radius: 2px; background: var(--text); }
.nav__logout { display: inline; }

.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--glass-border); color: var(--text-2);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.icon-btn:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-1px); }
.icon-btn .icon { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.lang-switch { display: inline-flex; align-items: center; padding: 3px; border-radius: var(--r-full); border: 1px solid var(--glass-border); background: var(--glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lang-switch a { padding: 5px 11px; border-radius: var(--r-full); font-size: .82rem; font-weight: 600; color: var(--muted); line-height: 1; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.lang-switch a:not(.is-active):hover { color: var(--text); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.lang-switch a.is-active { background: var(--brand); color: #fff; }
.lang-switch a.is-active:hover { color: #fff; }   /* stay readable on the blue pill */

/* ---- Hero ------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(56px, 9vw, 116px); overflow: hidden; }
.hero__inner { position: relative; z-index: var(--z-base); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__title { font-size: clamp(2.3rem, 5.4vw, 3.7rem); margin-block: 18px 20px; }
.hero__desc { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--text-2); max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 28px; }
.hero__note { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.hero__note .icon { width: 18px; height: 18px; color: var(--ok); }
.hero__stats { display: flex; gap: clamp(24px, 5vw, 48px); margin-block-start: 40px; padding-block-start: 28px; border-block-start: 1px solid var(--border); }
.hero__stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__stat-label { font-size: .84rem; color: var(--muted); margin-top: 2px; }

.hero__preview { position: relative; }
.preview-card { background: var(--glass-strong); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.preview-card__bar { display: flex; gap: 7px; padding: 15px 18px; border-block-end: 1px solid var(--glass-border); background: rgba(255,255,255,.08); }
.preview-card__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-2); }
.preview-card__bar i:nth-child(1){ background:#F87171; } .preview-card__bar i:nth-child(2){ background:#FBBF24; } .preview-card__bar i:nth-child(3){ background:#34D399; }
.preview-card__body { padding: 22px; }
.preview-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.preview-kpi { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r); padding: 14px; }
.preview-kpi b { display: block; font-size: 1.35rem; letter-spacing: -.02em; }
.preview-kpi span { font-size: .78rem; color: var(--muted); }
.preview-chart { display: flex; align-items: flex-end; gap: 9px; height: 130px; padding: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r); }
.preview-chart i { flex: 1; border-radius: 6px 6px 0 0; background: var(--brand-grad); opacity: .9; }
.preview-badge { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-radius: var(--r-full); box-shadow: var(--shadow-lg); font-size: .84rem; font-weight: 600;
  animation: float 5s var(--ease) infinite; }
.preview-badge .icon { width: 18px; height: 18px; color: var(--brand); }
.preview-badge--1 { inset-block-start: 8%; inset-inline-start: -6%; }
.preview-badge--2 { inset-block-end: 12%; inset-inline-end: -5%; animation-delay: -2.5s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .preview-badge { animation: none; } }

/* ---- Interactive hero showcase (theme-aware app preview) -------------- */
.showcase { position: relative; }
.showcase__win { background: var(--glass-strong); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.showcase__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--glass-border); background: rgba(120,150,210,.07); }
.showcase__dots { display: flex; gap: 7px; }
.showcase__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-2); }
.showcase__dots i:nth-child(1){ background:#F87171; } .showcase__dots i:nth-child(2){ background:#FBBF24; } .showcase__dots i:nth-child(3){ background:#34D399; }
.showcase__tabs { display: flex; gap: 4px; margin-inline-start: auto; }
.showcase__tab { padding: 6px 13px; border-radius: var(--r-full); font-size: .8rem; font-weight: 600; color: var(--muted); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.showcase__tab:hover { color: var(--text); }
.showcase__tab.is-active { background: var(--brand); color: #fff; }
.showcase__body { padding: 20px; min-height: 316px; }
.showcase__panel { display: none; }
.showcase__panel.is-active { display: block; animation: fadeUp .5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .showcase__panel.is-active { animation: none; } }
.showcase__hint { margin-block-start: 14px; font-size: .8rem; }

/* Playable chart */
.chart__metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chart__metric { padding: 5px 13px; border-radius: var(--r-full); font-size: .78rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--glass-border); background: var(--glass-bg); transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.chart__metric:hover { color: var(--text); }
.chart__metric.is-active { color: #fff; background: var(--brand); border-color: transparent; }
.chart__bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-block-start: 22px; }
.chart__bar { flex: 1; min-height: 6px; border-radius: 7px 7px 0 0; background: var(--brand-grad); opacity: .82; position: relative; cursor: pointer;
  transition: height .6s var(--ease), opacity .2s var(--ease), filter .2s var(--ease); }
.chart__bar:hover { opacity: 1; filter: saturate(1.25) brightness(1.06); }
.chart__x { display: flex; gap: 10px; margin-block-start: 9px; }
.chart__x span { flex: 1; text-align: center; font-size: .68rem; color: var(--muted); }

/* Courses panel */
.sc-courses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-course { border: 1px solid var(--glass-border); border-radius: var(--r); overflow: hidden; background: var(--glass-bg); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sc-course:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sc-course__thumb { height: 64px; background: var(--brand-grad); display: grid; place-items: center; color: rgba(255,255,255,.92); }
.sc-course__thumb .icon { width: 26px; height: 26px; }
.sc-course__b { padding: 10px 12px; }
.sc-course__b b { font-size: .88rem; display: block; }
.sc-course__b span { font-size: .72rem; color: var(--muted); }
.sc-progress { height: 5px; border-radius: 3px; background: var(--surface-2); margin-block-start: 9px; overflow: hidden; }
.sc-progress i { display: block; height: 100%; background: var(--brand-grad); }

/* Player panel */
.sc-player { border-radius: var(--r); overflow: hidden; border: 1px solid var(--glass-border); }
.sc-player__stage { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(120% 120% at 30% 20%, #1b62c9, #0b1f52 70%); display: grid; place-items: center; }
.sc-player__play { width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--brand-deep); display: grid; place-items: center; box-shadow: 0 12px 34px rgba(0,0,0,.32); transition: transform var(--dur) var(--ease); }
.sc-player__play:hover { transform: scale(1.06); }
.sc-player__play .icon { width: 26px; height: 26px; fill: currentColor; margin-inline-start: 3px; }
.sc-player__stage::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 42%; background: linear-gradient(to top, rgba(0,0,0,.4), transparent); }
.sc-player__ctrls { position: absolute; inset-block-end: 12px; inset-inline: 14px; z-index: 1; display: flex; align-items: center; gap: 10px; color: #fff; }
.sc-scrub { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.sc-scrub i { display: block; height: 100%; width: 38%; background: #fff; }
.sc-player__meta { padding: 12px 14px; background: var(--glass-bg); }
.sc-player__meta b { font-size: .92rem; display: block; }
.sc-player__meta span { font-size: .74rem; color: var(--muted); }

/* ---- Bento app showcase ---------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bento__tile { display: flex; flex-direction: column; gap: 18px; }
.bento__tile--wide { grid-column: span 2; }
.bento__art { margin-block-start: auto; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .bento__tile--wide { grid-column: auto; } }

.mini-browser { border: 1px solid var(--glass-border); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.mini-browser__bar { display: flex; gap: 6px; padding: 10px 12px; background: rgba(120,150,210,.08); border-block-end: 1px solid var(--glass-border); }
.mini-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); }
.mini-blocks { padding: 12px; display: grid; gap: 8px; }
.mini-block { border-radius: 8px; }
.mini-block--hero { height: 46px; background: var(--brand-grad); }
.mini-block--row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-block--row span { height: 30px; border-radius: 8px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.mini-block--text { height: 12px; border-radius: 6px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.mini-browser__url { margin-inline-start: auto; font-size: .58rem; color: var(--muted); background: var(--glass-bg); padding: 2px 8px; border-radius: var(--r-full); border: 1px solid var(--glass-border); }
.mini-nav { display: flex; align-items: center; gap: 8px; padding-block: 2px; }
.mini-nav__logo { width: 20px; height: 10px; border-radius: 3px; background: var(--brand-grad); }
.mini-nav > span:not(.mini-nav__logo):not(.mini-nav__cta) { width: 24px; height: 6px; border-radius: 3px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.mini-nav__cta { margin-inline-start: auto; width: 32px; height: 14px; border-radius: 5px; background: var(--brand-grad); }
.mini-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-feats span { height: 30px; border-radius: 6px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.mini-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mini-gallery i { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(135deg, var(--surface-2), var(--glass-bg)); border: 1px solid var(--glass-border); }
.mini-cta { height: 24px; border-radius: 8px; background: var(--brand-grad); }

/* Site-builder swatch cross-fade: the recolourable preview blocks ([data-hero])
   carry their brand gradient in --hero-bg and layer the *previous* gradient
   (--hero-prev) in a ::after overlay that fades out, so a swatch click smoothly
   cross-fades old -> new instead of snapping. Gradients can't be tweened by a
   plain `transition: background`, hence the two-layer opacity fade. */
[data-hero] { position: relative; isolation: isolate;
  --hero-bg: linear-gradient(120deg, #1E3A8A 0%, #2563EB 46%, #22B8F0 100%);
  --hero-prev: var(--hero-bg);
  background: var(--hero-bg); }
[data-hero]::after { content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; background: var(--hero-prev); pointer-events: none;
  opacity: var(--hero-fade, 0); transition: opacity .42s var(--ease); }
/* When a fade is armed, JS sets --hero-fade:1 with no transition, then clears it
   to 0 on the next frame so the overlay (old colour) fades away over the new. */
[data-hero].is-swapping::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-hero]::after { transition: none; }
}

/* interactive controls */
.swatches { display: flex; gap: 9px; margin-block-start: 14px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); border: 2px solid transparent; box-shadow: 0 2px 6px rgba(0,0,0,.22);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); cursor: pointer; }
.swatch:hover { transform: scale(1.14); }
.swatch.is-active { border-color: var(--text); }
.mini-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 14px; }
.mini-metric { padding: 5px 12px; border-radius: var(--r-full); font-size: .78rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--glass-border); background: var(--glass-bg); cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mini-metric:hover { color: var(--text); }
.mini-metric.is-active { color: #fff; background: var(--brand); border-color: transparent; }
.mini-total { margin-block-start: 14px; font-size: .9rem; color: var(--text-2); }
.mini-total b { color: var(--text); font-size: 1.2rem; margin-inline-start: 6px; }

.mini-analytics__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mini-analytics__value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.mini-analytics__label { font-size: .76rem; color: var(--muted); }
.mini-chart { display: flex; align-items: flex-end; gap: 10px; height: 96px; padding: 26px 14px 12px; border: 1px solid var(--glass-border); border-radius: var(--r); background: var(--surface-2); }
/* In the tall analytics tile, let the chart fill the space instead of leaving a void. */
.bento__tile--chart .bento__art { margin-block-start: 16px; flex: 1 1 auto; display: flex; }
.bento__tile--chart .mini-chart { flex: 1; height: auto; min-height: 190px; }
.mini-chart i { flex: 1; border-radius: 6px 6px 0 0; background: var(--brand-grad); opacity: .8; position: relative; cursor: default;
  transition: height .55s var(--ease), opacity .2s var(--ease), filter .2s var(--ease); }
.mini-chart i:hover { opacity: 1; filter: brightness(1.08); }
.mini-chart i em { position: absolute; inset-block-end: calc(100% + 5px); inset-inline-start: 50%; transform: translateX(-50%);
  font-size: .64rem; font-style: normal; font-weight: 700; color: var(--text); white-space: nowrap; opacity: 0;
  transition: opacity .18s var(--ease); pointer-events: none; }
[dir="rtl"] .mini-chart i em { transform: translateX(50%); }
.mini-chart i:hover em, .mini-chart i.is-peak em { opacity: 1; }
.mini-chart i.is-peak { opacity: 1; filter: saturate(1.15) brightness(1.06); }

.mini-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--glass-border); border-radius: var(--r); background: var(--surface-2); }
.mini-slot { text-align: center; padding: 8px 0; border-radius: 8px; font-size: .78rem; font-weight: 600; color: var(--text-2);
  background: var(--glass-bg); border: 1px solid var(--glass-border); cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mini-slot:hover:not(.is-taken) { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.mini-slot.is-active { background: var(--brand); color: #fff; border-color: transparent; }
.mini-slot.is-taken { opacity: .42; text-decoration: line-through; cursor: not-allowed; }
/* Keep SELECTED pills/slots/tabs readable on hover (were flipping blue-on-blue). */
.mini-slot.is-active:hover, .mini-metric.is-active:hover,
.chart__metric.is-active:hover, .showcase__tab.is-active:hover { color: #fff; }
.mini-slot.is-active:hover { border-color: transparent; transform: none; }

/* ---- Bookings drag-drop board (wide bento tile) ---------------------- */
.bk-board { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: stretch; position: relative; }
@media (max-width: 620px) { .bk-board { grid-template-columns: 1fr; } }
.bk-clients { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--glass-border); border-radius: var(--r); background: var(--surface-2); }
.bk-clients__hd { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-block-end: 2px; }
.bk-person { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border-radius: var(--r-full);
  background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: .82rem; font-weight: 600; color: var(--text-2);
  cursor: grab; user-select: none; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }
.bk-person i { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--brand-grad); color: #fff; font-size: .66rem; font-style: normal; font-weight: 700; }
.bk-person em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-person:hover, .bk-person.is-sel { border-color: var(--brand); color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow); }
.bk-person.is-sel { background: color-mix(in srgb, var(--brand) 14%, var(--glass-bg)); }
.bk-person.is-dragging { opacity: .45; }
.bk-person:active { cursor: grabbing; }
.bk-cal { display: flex; flex-direction: column; gap: 10px; position: relative; }
.bk-legend { display: flex; gap: 16px; font-size: .74rem; color: var(--muted); }
.bk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bk-dot { inline-size: 9px; block-size: 9px; border-radius: 50%; }
.bk-dot--frontal { background: var(--ok); }
.bk-dot--online { background: var(--brand); }
.bk-slots { flex: 1; align-content: start; }
.mini-slot.is-drop { border-color: var(--brand); border-style: dashed; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--text); transform: translateY(-1px); }
.mini-slot .bk-slot__who { display: inline-grid; place-items: center; inline-size: 17px; block-size: 17px; border-radius: 50%;
  font-size: .56rem; font-style: normal; font-weight: 700; color: #fff; margin-inline-end: 5px; vertical-align: middle; }
.mini-slot.is-booked { cursor: default; opacity: 1; text-decoration: none; }
.mini-slot.bk--frontal { background: color-mix(in srgb, var(--ok) 15%, var(--glass-bg)); border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--text); }
.mini-slot.bk--frontal .bk-slot__who { background: var(--ok); }
.mini-slot.bk--online { background: color-mix(in srgb, var(--brand) 15%, var(--glass-bg)); border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--text); }
.mini-slot.bk--online .bk-slot__who { background: var(--brand); }
.bk-modal { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg);
  font-size: .8rem; color: var(--text-2); z-index: 3; animation: bkPop .22s var(--ease); }
.bk-modal[hidden] { display: none; }
[data-theme="dark"] .bk-modal { background: var(--surface-2); }
@keyframes bkPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.bk-modal__q b { color: var(--text); }
.bk-modal__opts { display: flex; gap: 6px; flex: none; }
.bk-opt { padding: 6px 12px; border-radius: var(--r-full); font-size: .76rem; font-weight: 700; color: #fff; cursor: pointer; border: 0;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.bk-opt:hover { transform: translateY(-1px); filter: brightness(1.06); }
.bk-opt--frontal { background: var(--ok); }
.bk-opt--online { background: var(--brand); }

/* ---- Booked-appointment quick-action popover (hover / focus) --------- */
/* Booked slots are now interactive triggers (no longer disabled): show they
   are clickable and keep the keyboard focus ring visible. */
.mini-slot.is-booked[data-appt] { cursor: pointer; }
.mini-slot.is-booked[data-appt]:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.mini-slot.is-booked[data-appt]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bk-pop { position: absolute; z-index: 5; inline-size: max-content; max-inline-size: min(240px, 84vw);
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease); }
.bk-pop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bk-pop[hidden] { display: none; }
[data-theme="dark"] .bk-pop { background: var(--surface-2); }
.bk-pop__title { font-size: .72rem; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.bk-pop__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-pop__act { padding: 5px 10px; border-radius: var(--r-full); font-size: .74rem; font-weight: 700;
  color: var(--text); background: var(--glass-bg); border: 1px solid var(--glass-border); cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }
.bk-pop__act:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand); }
.bk-pop__act:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bk-pop__act--danger:hover { border-color: var(--err); color: var(--err); }
@media (prefers-reduced-motion: reduce) {
  .bk-pop { transition: none; transform: none; }
  .bk-pop.is-visible { transform: none; }
  .mini-slot.is-booked[data-appt]:hover { transform: none; }
  .bk-pop__act:hover { transform: none; }
}

.mini-txns { display: grid; gap: 8px; }
.mini-txn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: var(--r); background: var(--surface-2); font-size: .85rem; }
.mini-txn__ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); flex: none; }
.mini-txn__ic .icon { width: 15px; height: 15px; }
.mini-txn__t { flex: 1; color: var(--text-2); }
.mini-txn b { color: var(--text); }

/* ---- Logos strip ------------------------------------------------------ */
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(24px, 6vw, 64px); opacity: .72; }
.logos span { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; color: var(--muted); }

/* ---- Pricing ---------------------------------------------------------- */
.plan { display: flex; flex-direction: column; }
.plan .card__title { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.plan__fee { position: relative; display: inline-block; align-self: flex-start; margin-block: 2px 4px; padding: 3px 10px; border-radius: var(--r-full);
  font-size: .74rem; font-weight: 700; color: var(--brand); background: color-mix(in srgb, var(--brand) 13%, transparent); cursor: help; }
/* Ribbon slot reserved on every plan so titles/prices align across all cards. */
.plan__ribbonwrap { min-height: 28px; margin-bottom: 14px; display: flex; }
.pricing-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; } }
.price { font-size: 2.7rem; font-weight: 800; letter-spacing: -.03em; margin-block: 8px 2px; color: var(--text); }
.price__amt { font-variant-numeric: tabular-nums; }
.price__per { font-size: .9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* "Was" price on the yearly view — the un-discounted 12×monthly total, struck.
   Sits on its own line above the amount; empty (collapsed) on the monthly view. */
.price__was { display: block; min-height: 1.05em; margin-block-end: 1px;
  font-size: .95rem; font-weight: 700; letter-spacing: -.01em; line-height: 1;
  color: var(--muted); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--err) 60%, transparent); }
.price__was:empty { min-height: 0; }
/* Monthly / Yearly billing toggle */
.billing-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; margin-block-start: 34px; border-radius: var(--r-full); border: 1px solid var(--glass-border); background: var(--glass-bg); overflow: visible; }
.billing-opt { position: relative; padding: 8px 18px; border-radius: var(--r-full); font-size: .9rem; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.billing-opt.is-active { background: var(--brand); color: #fff; }
/* "Save 17%" badge floats above the Yearly option */
.billing-save { position: absolute; inset-block-end: calc(100% + 9px); inset-inline-start: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--brand-grad); box-shadow: var(--shadow); }
[dir="rtl"] .billing-save { transform: translateX(50%); }
.billing-save::after { content: ''; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-block-start-color: var(--brand); }
.plan__feats { margin-block: 20px; display: grid; gap: 2px; }
.price-feat { display: flex; align-items: center; gap: 10px; padding-block: 8px; font-size: .95rem; color: var(--text-2); }
.price-feat .icon { width: 18px; height: 18px; color: var(--ok); flex: none; }
.plan__cta { margin-block-start: auto; }
.plan__ribbon { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0;
  padding: 6px 14px; border-radius: var(--r-full); font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--brand-grad); box-shadow: 0 6px 16px rgba(37,99,235,.36); }
.plan__ribbon .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
/* Featured plan: gently scaled + tinted + soft static glow (no pulsing). */
.plan--featured { transform: scale(1.02); z-index: 2;
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, var(--glass-bg)), var(--glass-bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent), 0 16px 44px rgba(34,120,240,.16); }
.card--hover.plan--featured:hover { transform: scale(1.02) translateY(-6px);
  box-shadow: 0 0 0 1px var(--brand), 0 28px 72px rgba(34,120,240,.42); }
@media (max-width: 960px) { .plan--featured, .card--hover.plan--featured:hover { transform: none; } }

/* ---- Testimonial ------------------------------------------------------ */
.quote { font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 600; line-height: 1.45; color: var(--text); letter-spacing: -.01em; }
.quote__author { display: flex; align-items: center; gap: 12px; margin-block-start: 22px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-grad); color: #fff; font-weight: 700; }
.quote__author b { display: block; } .quote__author small { color: var(--muted); }
.stars { display: inline-flex; gap: 2px; color: var(--amber); margin-bottom: 14px; }
.stars .icon { width: 20px; height: 20px; fill: currentColor; }

/* ---- CTA band --------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; text-align: center; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 72px); background: var(--brand-grad); color: #fff; box-shadow: var(--glow); }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 120% at 50% 0%, rgba(255,255,255,.18), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); margin-block: 12px 26px; font-size: 1.08rem; }
.cta-band .btn--solid { background: #fff; color: var(--brand-deep); box-shadow: 0 10px 30px rgba(0,0,0,.2); }

/* ---- Footer (glass, seamless) ----------------------------------------- */
.footer { position: relative; z-index: var(--z-base); border-block-start: 1px solid var(--glass-border);
  background: var(--glass-bg); -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur)); backdrop-filter: saturate(160%) blur(var(--glass-blur));
  padding-block: clamp(40px, 6vw, 64px) 28px; }
.footer__grid { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer__col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 14px; }
.footer__col a { display: block; color: var(--text-2); padding-block: 5px; font-size: .95rem; transition: color var(--dur) var(--ease); }
.footer__col a:hover { color: var(--brand); }
.footer__brand { font-weight: 800; font-size: 1.2rem; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer__brand img { height: 30px; }
.footer__bottom { max-width: var(--container); margin: 28px auto 0; padding: 22px var(--gutter) 0; border-block-start: 1px solid var(--glass-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .88rem; }

/* ---- Forms ------------------------------------------------------------ */
.field { margin-bottom: 16px; }
.field--full { grid-column: 1 / -1; }
.label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.input-group { position: relative; display: flex; align-items: center; }
.input-group > .icon:first-child { position: absolute; inset-inline-start: 13px; color: var(--muted); pointer-events: none; }
.input { width: 100%; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text); font: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.input-group .input { padding-inline-start: 42px; }
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.field--error .input { border-color: var(--err); }
.field__error { display: block; margin-top: 6px; font-size: .82rem; color: var(--err); }
.field__hint { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.input-group.pw-field .input { padding-inline-end: 44px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity .14s var(--ease), filter .14s var(--ease); }
/* Show/hide password crossfade: the text blurs+fades out, type is swapped at the
   midpoint (see auth.js), then it fades back in — dots ⇄ plain text. */
.input-group.pw-field .input.pw-swapping { opacity: .12; filter: blur(3px); }
.pw-toggle { position: absolute; inset-inline-end: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); transition: color var(--dur) var(--ease); }
.pw-toggle:hover { color: var(--text); }
.pw-toggle .icon-eye-off { display: none; }
.pw-toggle.is-on .icon-eye { display: none; }
.pw-toggle.is-on .icon-eye-off { display: inline; }
.pw-meter { margin-top: 9px; }
.pw-meter__track { display: flex; gap: 5px; }
.pw-meter__seg { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-2); transition: background var(--dur) var(--ease); }
.pw-meter[data-score="1"] .pw-meter__seg:nth-child(-n+1) { background: var(--err); }
.pw-meter[data-score="2"] .pw-meter__seg:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-score="3"] .pw-meter__seg:nth-child(-n+3) { background: var(--brand); }
.pw-meter[data-score="4"] .pw-meter__seg:nth-child(-n+4) { background: var(--ok); }
.pw-meter__label { display: block; margin-top: 5px; font-size: .78rem; color: var(--muted); }
.pw-match { display: none; align-items: center; gap: 6px; margin-top: 6px; font-size: .82rem; }
.pw-match.show { display: flex; }
.pw-match.ok { color: var(--ok); } .pw-match.bad { color: var(--err); }
.check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text-2); cursor: pointer; line-height: 1.35; }
/* ---- Custom checkbox — satisfying pop + animated check, consistent everywhere.
   Toggle switches (.switch__input / any checkbox inside .switch) opt out below. ---- */
input[type="checkbox"]:not(.switch__input) {
  appearance: none; -webkit-appearance: none; margin: 0;
  inline-size: 20px; block-size: 20px; flex: 0 0 auto; vertical-align: -4px;
  display: inline-grid; place-content: center;
  border: 2px solid var(--border-2); border-radius: 6px;
  background: var(--surface); cursor: pointer; position: relative;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input[type="checkbox"]:not(.switch__input)::after {
  content: ""; inline-size: 6px; block-size: 11px; margin-block-start: -2px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; border-radius: 1px;
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .2s cubic-bezier(.5, -0.55, .3, 1.7);
}
input[type="checkbox"]:not(.switch__input):hover { border-color: var(--brand); }
input[type="checkbox"]:not(.switch__input):focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
}
input[type="checkbox"]:not(.switch__input):checked {
  background: var(--brand); border-color: var(--brand); animation: cb-pop .24s var(--ease);
}
input[type="checkbox"]:not(.switch__input):checked::after { transform: rotate(45deg) scale(1); }
input[type="checkbox"]:not(.switch__input):disabled { opacity: .5; cursor: not-allowed; }
@keyframes cb-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(.8); } }
/* Belt-and-suspenders: keep any switch-toggle checkbox visually hidden (some lack the class). */
.switch input[type="checkbox"] { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- Alerts + toasts -------------------------------------------------- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r); font-size: .9rem; margin-bottom: 18px; border: 1px solid transparent; }
.alert--error { background: color-mix(in srgb, var(--err) 12%, var(--surface)); border-color: color-mix(in srgb, var(--err) 40%, transparent); color: var(--err); }
.alert--success { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-radius: var(--r-full);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); font-size: .9rem; font-weight: 500;
  animation: toastIn .3s var(--ease); transition: opacity .3s var(--ease); }
.toast--error { color: var(--err); } .toast--success { color: var(--ok); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Single JS-driven tooltip — themed (adapts to light/dark), never gets stuck. */
.tooltip { position: fixed; z-index: var(--z-toast); max-width: 240px; padding: 8px 12px; border-radius: 10px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
  font-size: .78rem; font-weight: 600; line-height: 1.4; text-align: center;
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .16s var(--ease), transform .16s var(--ease); }
.tooltip.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Auth ------------------------------------------------------------- */
.auth-wrap { min-height: calc(100vh - 320px); display: grid; place-items: center; padding: clamp(40px, 7vw, 72px) 20px; }
.auth-card { width: min(440px, 100%); }
.auth-card--wide { width: min(540px, 100%); }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { font-size: 1.55rem; }
.auth-head p { margin-top: 8px; font-size: .95rem; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; font-size: .9rem; }
.auth-row a { color: var(--brand); }
.auth-alt { text-align: center; margin-top: 20px; font-size: .92rem; color: var(--text-2); }
.auth-alt a { color: var(--brand); font-weight: 600; }
.auth-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .88rem; margin-bottom: 16px; transition: color var(--dur) var(--ease); }
.auth-back:hover { color: var(--brand); }
.auth-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: .85rem; color: var(--text-2); margin-bottom: 18px; }
.auth-note .icon { color: var(--brand); flex: none; }
.auth-terms { margin-top: 14px; font-size: .82rem; color: var(--muted); text-align: center; }
.auth-terms a { color: var(--brand); }
.auth-empty { text-align: center; padding: 12px 0; }
.auth-empty .empty__icon { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--brand); }
.btn.is-disabled { opacity: .7; pointer-events: none; }

/* ---- Legal / prose documents ----------------------------------------- */
.container--legal { max-width: 80ch; }
.legal-updated { margin-block: 8px 30px; font-size: .9rem; }
.legal-doc h2 { font-size: 1.16rem; margin-block: 28px 8px; }
.legal-doc p { margin-block-end: 6px; }
.legal-doc a, .legal-contact a { color: var(--brand); }
.legal-contact { margin-block-start: 22px; padding-block-start: 18px; border-block-start: 1px solid var(--border); color: var(--text-2); }

/* ---- Error page ------------------------------------------------------- */
.error-page { display: grid; place-items: center; padding: clamp(28px, 5vh, 56px) 0; min-height: 52vh; }
.error-card { position: relative; overflow: hidden; max-width: 440px; margin-inline: auto; text-align: center;
  padding: clamp(24px, 3.5vw, 38px); }
/* Soft status-tinted glow behind the card contents. */
.error-glow { position: absolute; inset-block-start: -26%; inset-inline-start: 50%; transform: translateX(-50%);
  width: 280px; height: 280px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 24%, transparent), transparent 66%); filter: blur(8px); }
[dir="rtl"] .error-glow { transform: translateX(50%); }
.error-card > :not(.error-glow) { position: relative; z-index: 1; }
.error-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px;
  border: 1px solid var(--glass-border); border-radius: var(--r-full); background: var(--glass-bg);
  color: var(--text-2); margin-block-end: 12px; }
.error-badge .icon { width: 16px; height: 16px; }
/* color:inherit IS LOAD-BEARING, not a tidy-up. The three family rules below tint
   .error-badge, but the label inside it is an .eyebrow, and .eyebrow (~:202) sets
   `color: var(--brand)` DIRECTLY — a direct declaration on the child beats the
   parent's value by inheritance no matter how specific the parent's selector is. So
   the status label printed brand blue in every family: MEASURED in a browser on the
   real stylesheet, `404 · Page not found` and `405 · Method not allowed` both
   rgb(37,99,235) while their badges were rgb(37,99,235) and rgb(185,134,0) and the
   405's icon stroke was rgb(185,134,0). errors/_status.php leans on the amber-vs-red
   distinction as the reason the 'client' family can safely reuse the 'denied'
   modifier; on the label there was no distinction at all. This selector is (0,2,0)
   against .eyebrow's (0,1,0), so it wins, and `inherit` then carries whichever family
   colour .error-badge resolved to. Do not replace it with a fixed colour — that would
   re-introduce a second source of truth for the family tints. */
.error-badge .eyebrow { margin: 0; color: inherit; }
.error-code { font-size: clamp(3.4rem, 11vw, 5.5rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.error-title { font-size: clamp(1.2rem, 3.2vw, 1.6rem); font-weight: 800; margin-block: 2px 6px; }
.error-msg { font-size: 1rem; color: var(--text-2); margin-block: 0; max-width: 40ch; margin-inline: auto; }
.error-detail { max-width: 100%; margin-block-start: 20px; padding: 14px; text-align: start; overflow: auto; font-size: .8rem;
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); color: var(--muted); }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block-start: 20px; }
/* Status families tint the badge + glow. */
.error-page--missing .error-badge { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--glass-border)); }
.error-page--denied  .error-glow  { background: radial-gradient(circle, color-mix(in srgb, #e0a800 28%, transparent), transparent 68%); }
.error-page--denied  .error-badge { color: #b98600; border-color: color-mix(in srgb, #e0a800 40%, var(--glass-border)); }
.error-page--server  .error-glow  { background: radial-gradient(circle, color-mix(in srgb, #e05a5a 26%, transparent), transparent 68%); }
.error-page--server  .error-badge { color: #cf5151; border-color: color-mix(in srgb, #e05a5a 40%, var(--glass-border)); }
@media (max-width: 480px) { .error-actions .btn { width: 100%; } }

/* ---- Admin layout chrome --------------------------------------------- */
/* .admin-tag is emitted by resources/views/layouts/admin.php ONLY. Read that
   layout's header before adding anything else here. */
.admin-tag { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: var(--r-full); background: var(--brand); color: #fff; margin-inline-start: 6px; }

/* THE TRANSLATION-EDITOR RULES THAT USED TO SIT HERE ARE GONE — MOVED, not
   deleted, to public/assets/css/modules/translations.css. Read that file's header
   for the why. The short version: Admin/Views/translations.php was the only view
   in the tree on layouts/admin.php (the site.css bundle), and it was the only
   consumer of .trans-head/.trans-toolbar/.trans-table/.trans-key/.t-val/
   tr.t-missing and of the bare `.pager` — every other module namespaces its own
   (.admin-pager, .inbox-pager, .pmy-pager, .sb-store__pager, .access-pager).
   The view now renders on layouts/dashboard and page-<link>s that sheet, so
   /login, /register, /forgot, /reset, /set-password, /2fa, / and /legal/* stopped
   downloading ~16 rules none of them could ever match.
   VERIFY BEFORE RE-ADDING ANYTHING TABLE-SHAPED HERE: grep the tree for the class
   first. `.pager` in particular no longer has a RULE THAT LAYS IT OUT anywhere, and
   no view emits it — that is deliberate. Be precise about it though: a grep for
   ".pager" still hits modules/motion-standard.css, which lists `.pager a` exactly once,
   inside a shared transition group. That is decoration for a class with no geometry —
   exactly the trap layouts/admin.php's header describes — so it proves nothing about the
   class existing. Do not cite that hit as "still defined". */

/* ---- Overlays: modals & toasts always above nav + footer -------------- */
.modal-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: 20px;
  background: rgba(6,10,22,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal { position: relative; z-index: var(--z-modal); width: min(560px, 100%);
  background: var(--glass-strong); -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 28px;
  transform: translateY(12px) scale(.98); transition: transform var(--dur) var(--ease); }
.modal-overlay.is-open .modal { transform: none; }
.toast-layer { position: fixed; inset-block-end: 20px; inset-inline: 0; z-index: var(--z-toast); display: grid; justify-items: center; gap: 10px; pointer-events: none; }

/* ---- Scroll fade (in & out) ------------------------------------------
   Hidden state gated on html.js so the page is fully visible without JS. */
/* Reveal targets are often interactive boxes (.card, .plan, .bento__tile). The
   transition shorthand fully REPLACES any earlier one, so it must also carry the
   box's own hover/state transitions (box-shadow, background, border) — otherwise
   those snap instantly. They stay constant during the entrance, so listing them
   here has no effect on the fade-in; it only makes hover + theme changes animate. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease),
  background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--stagger > * { transition: opacity .6s var(--ease), transform .6s var(--ease),
  background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.js .reveal--stagger > * { opacity: 0; transform: translateY(22px); }
.reveal--stagger.is-visible > * { opacity: 1; transform: none; }
.reveal--stagger.is-visible > *:nth-child(2) { transition-delay: .07s; }
.reveal--stagger.is-visible > *:nth-child(3) { transition-delay: .14s; }
.reveal--stagger.is-visible > *:nth-child(4) { transition-delay: .21s; }
.reveal--stagger.is-visible > *:nth-child(5) { transition-delay: .28s; }
.reveal--stagger.is-visible > *:nth-child(6) { transition-delay: .35s; }
/* The stagger delays above are for the entrance only — a hovered box must react
   immediately, not after its stagger offset. */
.card--hover:hover, .plan.card--hover:hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal--stagger > * { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__preview { order: -1; max-width: 520px; }
  .preview-badge--1, .preview-badge--2 { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* ---- Nav collapse: at the CONTAINER width, not a phone width ----
   The desktop row is brand + up to 6 page links + theme toggle + EN/HE + an optional
   admin link + the CTA. Measured, that needs ~the full 1180px container — so between
   761px and ~1180px it overflowed: the brand wrapped and the CTA was CLIPPED off the
   inline edge (visible on real small laptops/tablets, and in the Site Builder preview
   iframe, which is narrower than the viewport). Collapsing to the hamburger at the
   container width is the honest breakpoint: above it the row genuinely fits, below it
   it never did. */
@media (max-width: 1180px) {
  /* `visibility` IS THE TAB ORDER — which is why this pair is not just opacity.  (GH #53)
     A closed sheet on this bundle computed `visibility: visible; opacity: 0`: invisible
     to the eye and fully present to the keyboard. MEASURED at 390x780 on a business's
     own /login and /register, en and he, each control handed .focus() and read back off
     document.activeElement: ELEVEN of eleven took focus while closed, and a real Tab
     press from the burger landed on the first of them, on a sheet nobody can see.
     A descendant of a visibility:hidden subtree cannot take focus, so this declaration
     IS the behaviour — not an aria attribute describing it, and not the invisible-but-
     tabbable half-fix that caused the bug. It is the same rule, for the same reason,
     that modules/responsive.css's `.nav__links,.sidebar{visibility:hidden}` pair
     already gives the two panels on the primunity.css bundle. ONE MODULE DRIVES ALL
     THREE NOW (GH #73): core/motion.js's wireOffcanvas() — site.js enrols this sheet
     in it right after its `[data-nav-toggle]` / `#nav-links` lookups, passing
     `openClass: 'is-open'` (SELECTORS AND SYMBOLS RATHER THAN LINE NUMBERS: the number
     that stood here was wrong the day it was written — it pointed into the middle of a
     prose sentence in one of site.js's own comments — and site.js is not this file's to
     keep in step), so the class NAME is the only thing that still differs between the
     bundles (`.open` at 860px there, `.is-open` at 1180px here) and the behaviour is
     not written twice. core/motion.js's initNav() note used to report this panel as
     out of its reach; it no longer is, and that note says so.
     THE SLIDE-OUT STILL PLAYS — checked in the sheet, not assumed: overlay-fx.css's
     `html .nav__links.nav__links.is-closing` rule (imported by BOTH roots) holds
     visibility:visible for the whole close, and the close goes through
     closeWithFade() (motion.js's closeOffcanvas), which keeps `.is-open` on until the
     fade commits. `visibility` is in the transition list below for the reduced-motion
     path, where closeWithFade commits with no class.
     AND FOCUS LEAVES BEFORE IT DOES: a focused descendant of a visibility:hidden
     subtree is DROPPED to <body> by the browser, not moved — so this declaration is
     why closeOffcanvas() hands focus back to the burger SYNCHRONOUSLY at close start
     rather than after the fade. The two halves are one behaviour.
     IT REVERSES ITSELF: the declaration lives inside this media query, so growing past
     1180px restores the desktop row and its controls with no JS and nothing stranded. */
  .nav__links { position: fixed; inset-block-start: 66px; inset-inline: 12px; flex-direction: column; align-items: stretch; gap: 6px;
    background: var(--glass-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-lg);
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease); }
  .nav__links.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav__toggle { display: grid; }
  .nav__actions { flex-wrap: nowrap; margin-inline-start: auto; }
}

@media (max-width: 760px) {
  .nav__actions { flex-wrap: wrap; margin-inline-start: 0; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero__stats { flex-wrap: wrap; gap: 20px; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Switch — reusable ON/OFF toggle (mirrors the dashboard's
   .switch in css/modules/forms.css so new-design/public pages
   share the exact component). See that file for the markup.
   OFF = hollow grey track, knob parked start-side; ON = solid
   green track, knob slides with an overshoot/settle bounce.
   Keyboard-accessible, RTL-safe (logical properties).
   ============================================================ */
.switch {
  --sw-w: 52px; --sw-h: 30px; --sw-pad: 3px;
  --sw-knob: calc(var(--sw-h) - (var(--sw-pad) * 2));
  --sw-travel: calc(var(--sw-w) - var(--sw-knob) - (var(--sw-pad) * 2));
  --sw-off: #9aa6c2;
  --sw-on: var(--ok, #0EA36B);
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  -webkit-user-select: none; user-select: none; line-height: 1.2;
}
.switch__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.switch__track {
  position: relative; flex: 0 0 auto; box-sizing: border-box;
  width: var(--sw-w); height: var(--sw-h); padding: var(--sw-pad);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--sw-off) 22%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--sw-off) 55%, transparent);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.switch__thumb {
  position: absolute; inset-block-start: var(--sw-pad); inset-inline-start: var(--sw-pad);
  width: var(--sw-knob); height: var(--sw-knob); border-radius: var(--r-full);
  background: #fff;
  box-shadow: 0 2px 5px rgba(9,20,45,.28), 0 0 0 1px rgba(9,20,45,.06);
  transition: transform 420ms cubic-bezier(.34,1.56,.64,1), width 160ms var(--ease);
  transform: translateX(0); will-change: transform;
}
.switch:active .switch__thumb { width: calc(var(--sw-knob) + 3px); }
.switch__input:checked + .switch__track {
  background: var(--sw-on); border-color: var(--sw-on);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-on) 16%, transparent);
}
.switch__input:checked + .switch__track .switch__thumb { transform: translateX(var(--sw-travel)); }
[dir="rtl"] .switch__input:checked + .switch__track .switch__thumb { transform: translateX(calc(var(--sw-travel) * -1)); }
.switch__input:focus-visible + .switch__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent); }
.switch__input:checked:focus-visible + .switch__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent), 0 0 0 6px color-mix(in srgb, var(--sw-on) 16%, transparent); }
.switch__label { font-weight: 600; color: var(--text); }
.switch__hint { display: block; font-size: .85rem; color: var(--muted); font-weight: 400; margin-block-start: 2px; }
.switch__input:disabled + .switch__track { opacity: .5; }
.switch:has(.switch__input:disabled) { cursor: not-allowed; }
.switch--lg { --sw-w: 60px; --sw-h: 34px; }
@media (prefers-reduced-motion: reduce) {
  .switch__thumb { transition: transform 140ms var(--ease); }
  .switch:active .switch__thumb { width: var(--sw-knob); }
}