/* Telegram Scheduler — marketing site.
   Dark, saturated, glass-and-glow: the look the owner picked as reference.
   Everything is hand-rolled CSS with no CDN, no webfont and no framework, so
   the page drops onto any host (or opens from disk) and looks identical. */

:root {
  /* base */
  --bg: #07060f;
  --bg-2: #0c0a1b;
  --ink: #f2f2f8;
  --muted: #9a9ab5;
  --line: rgba(255, 255, 255, .09);

  /* brand — carried over from the app's theme.py */
  --violet: #7c5cff;
  --violet-lt: #a78bfa;
  --cyan: #22d3ee;
  --pink: #f472b6;
  --ok: #4ade80;
  --warn: #fbbf24;
  --danger: #f87171;

  /* Backgrounds under white text. The brand violet gives white only 4.35:1
     and the pink 2.65:1 — under the 4.5:1 the accessibility standard asks of
     normal-size text — so buttons and badges use these deeper shades. */
  --violet-deep: #6a45f5;   /* white 5.55:1 */
  --indigo-deep: #4f46e5;   /* white 6.29:1 */
  --pink-deep: #be185d;     /* white 6.04:1 */

  /* glass */
  --glass: rgba(255, 255, 255, .035);
  --glass-2: rgba(255, 255, 255, .06);
  --glow: 0 0 60px rgba(124, 92, 255, .35);

  --radius: 18px;
  --max: 1140px;
}

* { box-sizing: border-box; }

/* Keyboard focus must be VISIBLE. :focus-visible only paints when the browser
   judges the focus to have come from a keyboard, so mouse users never see a
   ring while someone tabbing through always does — which is the whole point
   of "the site can be operated with a keyboard". */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Skip link — the first thing a keyboard user reaches, hidden until focused. */
/* Hidden by clipping, not by being pushed off-screen: an off-screen offset in
   an RTL document pushes the link PAST the right edge and gives the whole page
   a horizontal scrollbar. Clipping removes it from view with no layout
   footprint at all. */
.skip {
  position: absolute; top: 8px; inset-inline-start: 12px; z-index: 200;
  background: var(--violet-deep); color: #fff; padding: 12px 20px;
  border-radius: 10px; text-decoration: none; font-weight: 600;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Rubik", "Arial Hebrew", system-ui, Arial, sans-serif;
  line-height: 1.7;
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The colour behind everything: two large soft lights that never scroll away
   entirely, so sections stay tinted instead of going flat black. */
body::before {
  content: "";
  position: fixed;
  inset: -30% -10% auto -10%;
  height: 900px;
  background:
    radial-gradient(50% 55% at 22% 30%, rgba(124, 92, 255, .30), transparent 70%),
    radial-gradient(45% 50% at 78% 18%, rgba(34, 211, 238, .18), transparent 70%),
    radial-gradient(40% 45% at 55% 60%, rgba(244, 114, 182, .12), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; }

a { color: var(--cyan); }

/* ---------------------------------------------------------------- header */
header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7, 6, 15, .72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 1.05rem; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  display: grid; place-items: center; font-size: 17px;
  box-shadow: 0 6px 22px rgba(124, 92, 255, .5);
}
.nav nav { margin-inline-start: auto; display: flex; gap: 24px; }
.nav nav a {
  color: var(--muted); text-decoration: none; font-size: .95rem;
  transition: color .18s ease;
}
.nav nav a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ hero */
.hero { padding: 92px 0 40px; text-align: center; position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--line);
  color: var(--violet-lt); font-size: .86rem; font-weight: 600;
  margin-bottom: 22px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
}

.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.9rem);
  line-height: 1.15; margin: 0 0 18px;
  letter-spacing: -1.2px; font-weight: 700;
}
.grad {
  background: linear-gradient(110deg, var(--violet-lt) 5%, var(--cyan) 55%, var(--pink) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead {
  font-size: 1.14rem; color: var(--muted);
  max-width: 620px; margin: 0 auto 32px;
}

.cta { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 30px; border-radius: 13px;
  text-decoration: none; font-weight: 600; font-size: 1rem;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(120deg, var(--violet-deep), var(--indigo-deep));
  color: #fff; box-shadow: 0 10px 34px rgba(124, 92, 255, .45);
}
.btn-primary:hover { box-shadow: 0 14px 42px rgba(124, 92, 255, .6); }
.btn-ghost {
  background: var(--glass); color: var(--ink); border-color: var(--line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: var(--glass-2); }

.trust { margin-top: 24px; color: var(--muted); font-size: .88rem; }

/* ------------------------------------------------- hero product mock-up */
/* A stylised picture of the actual app, drawn in CSS. It shows the product
   without shipping a screenshot that would age the moment the UI changes. */
.mock-wrap { margin-top: 56px; perspective: 1600px; }
.mock {
  max-width: 880px; margin: 0 auto;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, #14122a, #0b0a17);
  border: 1px solid var(--glass-2);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .65), var(--glow);
  transform: rotateX(9deg) scale(.99);
  transform-origin: top center;
}
.mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
}
.mock-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.mock-bar .r { background: #ff5f57; } .mock-bar .y { background: #febc2e; }
.mock-bar .g { background: #28c840; }
.mock-bar span { margin-inline-start: auto; color: var(--muted); font-size: .8rem; }
.mock-body { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; padding: 16px; }
.mock-panel {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px;
}
.mock-panel h4 {
  margin: 0 0 10px; font-size: .82rem; color: var(--muted);
  font-weight: 600; text-align: right;
}
.mock-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, .03); margin-bottom: 7px;
  font-size: .8rem; color: var(--ink);
}
.mock-row .tick {
  width: 16px; height: 16px; border-radius: 5px; flex: 0 0 16px;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
}
.mock-row.sent .tick { background: linear-gradient(135deg, var(--ok), #16a34a); }
.mock-row.warn .tick { background: linear-gradient(135deg, var(--warn), #f59e0b); }
.mock-row small { margin-inline-start: auto; color: var(--muted); font-size: .72rem; }
.mock-row.sent small { color: var(--ok); }
.mock-row.warn small { color: var(--warn); }

.mock-text {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  border-radius: 9px; padding: 11px 12px; margin-bottom: 10px;
  font-size: .82rem; line-height: 1.6; color: var(--ink); text-align: right;
}
.mock-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mchip {
  font-size: .7rem; padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--line); color: var(--muted);
  background: rgba(255, 255, 255, .03);
}
.mchip.on {
  color: var(--violet-lt); border-color: rgba(124, 92, 255, .45);
  background: rgba(124, 92, 255, .14);
}
.mock-note {
  border-radius: 10px; padding: 11px 12px; font-size: .8rem;
  background: linear-gradient(120deg, rgba(124, 92, 255, .18), rgba(34, 211, 238, .1));
  border: 1px solid rgba(124, 92, 255, .3); color: var(--ink);
}

/* ----------------------------------------------------------------- stats */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-top: 58px;
}
.stat {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 16px; text-align: center;
  backdrop-filter: blur(8px);
}
.stat b {
  display: block; font-size: 1.85rem; font-weight: 700;
  background: linear-gradient(120deg, var(--violet-lt), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { color: var(--muted); font-size: .88rem; }

/* -------------------------------------------------------------- sections */
section { padding: 82px 0; position: relative; }
.section-head { text-align: center; margin-bottom: 46px; }
.section-head h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0 0 10px;
  letter-spacing: -.6px; font-weight: 700;
}
.section-head p { color: var(--muted); margin: 0 auto; max-width: 560px; }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }

.card {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 24px;
  backdrop-filter: blur(10px);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 92, 255, .45);
  background: var(--glass-2);
}
.card .ico {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; font-size: 21px; margin-bottom: 15px;
  background: linear-gradient(135deg, rgba(124, 92, 255, .28), rgba(34, 211, 238, .18));
  border: 1px solid rgba(124, 92, 255, .3);
}
.card h3 { margin: 0 0 8px; font-size: 1.13rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------------------------------------------------------------- steps */
.steps { counter-reset: s; display: grid; gap: 16px;
         grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.step {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px; position: relative;
  backdrop-filter: blur(10px);
}
.step .n {
  counter-increment: s; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; margin-bottom: 13px;
  background: linear-gradient(135deg, var(--violet-deep), var(--indigo-deep)); color: #fff;
  box-shadow: 0 6px 18px rgba(124, 92, 255, .45);
}
.step .n::before { content: counter(s); }
.step h3 { margin: 0 0 6px; font-size: 1.03rem; }
.step p { margin: 0; color: var(--muted); font-size: .92rem; }

/* --------------------------------------------------------------- pricing */
.term-switch {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin: 0 auto 30px; padding: 6px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 14px; width: fit-content; backdrop-filter: blur(8px);
}
.term {
  border: 0; cursor: pointer; font: inherit; font-size: .93rem;
  padding: 10px 20px; border-radius: 10px;
  background: transparent; color: var(--muted); transition: all .18s ease;
}
.term:hover { color: var(--ink); }
.term.on {
  background: linear-gradient(120deg, var(--violet-deep), var(--indigo-deep)); color: #fff;
  box-shadow: 0 6px 20px rgba(124, 92, 255, .4);
}
.term-note {
  color: var(--muted); font-size: .82rem; line-height: 1.55;
  margin-top: 6px; min-height: 42px;
}
.term-note b { color: var(--ok); }

.price-grid {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.plan {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 20px; padding: 32px 26px; position: relative;
  backdrop-filter: blur(10px);
  transition: transform .22s ease, box-shadow .22s ease;
}
.plan:hover { transform: translateY(-4px); }
.plan.featured {
  background: linear-gradient(165deg, rgba(124, 92, 255, .16), rgba(34, 211, 238, .06));
  border-color: rgba(124, 92, 255, .55);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .3), 0 24px 60px rgba(124, 92, 255, .28);
}
.plan .tag {
  position: absolute; top: -13px; inset-inline-start: 26px;
  background: linear-gradient(120deg, var(--violet-deep), var(--pink-deep)); color: #fff;
  font-size: .74rem; font-weight: 700; padding: 5px 14px; border-radius: 20px;
  box-shadow: 0 6px 18px rgba(124, 92, 255, .5);
}
.plan .crown { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.plan h3 { margin: 0 0 4px; font-size: 1.25rem; }
.plan .sub { color: var(--muted); font-size: .9rem; margin-bottom: 20px; }
.plan .amount {
  font-size: 3rem; font-weight: 700; line-height: 1;
  background: linear-gradient(120deg, #fff, var(--violet-lt));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan.featured .amount {
  background: linear-gradient(120deg, var(--violet-lt), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
}
.plan .per { color: var(--muted); font-size: .95rem; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 26px; }
.plan li { padding: 8px 0; color: var(--ink); font-size: .95rem; display: flex; gap: 10px; }
.plan li::before {
  content: "✓"; color: var(--ok); font-weight: 700; flex: 0 0 auto;
}
.plan li.no { color: var(--muted); }
.plan li.no::before { content: "—"; color: var(--muted); }
.plan .btn { width: 100%; }

/* -------------------------------------------------------------- payment */
.pay {
  background: linear-gradient(150deg, rgba(124, 92, 255, .16), rgba(34, 211, 238, .07));
  border: 1px solid rgba(124, 92, 255, .3);
  border-radius: 24px; padding: 46px 30px; text-align: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgba(124, 92, 255, .2);
}
.pay h2 { margin: 0 0 12px; font-size: 1.75rem; }
.pay p { color: var(--muted); max-width: 520px; margin: 0 auto 26px; }
.pay-methods { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 18px; font-size: .92rem; color: var(--muted);
  backdrop-filter: blur(8px);
}

/* ------------------------------------------------------------------ faq */
details {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 22px; margin-bottom: 11px;
  backdrop-filter: blur(8px); transition: border-color .2s ease;
}
details[open] { border-color: rgba(124, 92, 255, .4); }
details summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; color: var(--violet-lt); font-size: 1.45rem; font-weight: 300;
  line-height: 1; transition: transform .2s ease;
}
details[open] summary::after { content: "−"; }
details p { color: var(--muted); margin: 13px 0 0; font-size: .95rem; }

/* --------------------------------------------------------------- notice */
.notice {
  border: 1px solid rgba(251, 191, 36, .32);
  background: rgba(251, 191, 36, .06);
  border-radius: var(--radius); padding: 26px 28px;
  backdrop-filter: blur(8px);
}
.notice h3 { margin: 0 0 10px; color: var(--warn); font-size: 1.08rem; }
.notice p { margin: 0; color: var(--muted); font-size: .94rem; }
.notice ul { margin: 12px 0 0; padding-inline-start: 20px; color: var(--muted); font-size: .94rem; }
.notice li { margin: 4px 0; }

/* --------------------------------------------------------------- footer */
footer {
  border-top: 1px solid var(--line); padding: 38px 0;
  color: var(--muted); font-size: .9rem; position: relative; z-index: 1;
}
.foot { display: block; }
.foot-cols {
  display: grid; gap: 24px; align-items: start;
  grid-template-columns: minmax(220px, 1fr) 2fr;
}
.foot-cols b { color: var(--ink); }
.foot-links {
  display: grid; gap: 9px 22px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.foot-bottom {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .84rem;
}
@media (max-width: 700px) { .foot-cols { grid-template-columns: 1fr; } }
.foot nav:not(.foot-links) { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* --------------------------------------------------- scroll-scrubbed motion */
/* Tied to scroll POSITION, not to a one-way trigger: scrolling back up plays
   the movement in reverse, which is the effect the owner picked out on
   lusion.co. --p runs 0 → 1 as an element rises into view.
   The fallback in var(--p, 1) is deliberate: with no JS, or before the first
   frame, every element computes as fully visible. Content is never hidden by
   an animation that might not run. */
html.js .reveal {
  opacity: calc(.08 + .92 * var(--p, 1));
  transform: translateY(calc((1 - var(--p, 1)) * 34px))
             scale(calc(.975 + .025 * var(--p, 1)));
  will-change: opacity, transform;
}
/* Cards drift in from alternating sides, so a row assembles instead of
   sliding as one block. */
html.js .grid > .reveal:nth-child(odd),
html.js .steps > .reveal:nth-child(odd) {
  transform: translateY(calc((1 - var(--p, 1)) * 34px))
             translateX(calc((1 - var(--p, 1)) * 22px))
             scale(calc(.975 + .025 * var(--p, 1)));
}
html.js .grid > .reveal:nth-child(even),
html.js .steps > .reveal:nth-child(even) {
  transform: translateY(calc((1 - var(--p, 1)) * 34px))
             translateX(calc((1 - var(--p, 1)) * -22px))
             scale(calc(.975 + .025 * var(--p, 1)));
}

/* The hero mock-up tilts back as it leaves: the page reads as one camera move
   rather than a stack of independent panels. */
html.js .mock {
  transform: rotateX(calc((1 - var(--p, 1)) * 16deg))
             scale(calc(.94 + .06 * var(--p, 1)));
  transform-origin: top center;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .grid > .reveal, html.js .steps > .reveal,
  html.js .mock { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .aurora i, .shapes svg, #bot, #bot * { animation: none !important; }
}

/* ======================================================= background art */
/* Three stacked layers, all decorative and all behind everything:
     #fx      – canvas particle field (drawn in JS)
     .aurora  – slow colour washes
     .shapes  – geometric line-art that drifts with scroll
   Every one is pointer-events:none and aria-hidden, so none of it can ever
   swallow a click or reach a screen reader. */
#fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .75;
}

.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5; mix-blend-mode: screen;
}
.aurora .a1 { width: 620px; height: 620px; top: -180px; right: -120px;
              background: radial-gradient(circle, #7c5cff, transparent 70%);
              animation: drift1 26s ease-in-out infinite; }
.aurora .a2 { width: 520px; height: 520px; top: 32%; left: -160px;
              background: radial-gradient(circle, #22d3ee, transparent 70%);
              animation: drift2 32s ease-in-out infinite; }
.aurora .a3 { width: 560px; height: 560px; bottom: -160px; right: 18%;
              background: radial-gradient(circle, #f472b6, transparent 70%);
              animation: drift3 29s ease-in-out infinite; }
.aurora .a4 { width: 460px; height: 460px; top: 58%; right: -140px;
              background: radial-gradient(circle, #34d399, transparent 70%);
              animation: drift2 35s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); }
                    50% { transform: translate(-80px, 90px) scale(1.15); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); }
                    50% { transform: translate(110px, -70px) scale(1.1); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); }
                    50% { transform: translate(-60px, -110px) scale(1.2); } }

.shapes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.shapes svg { position: absolute; opacity: .5; }
.shapes .s1 { top: 12%; right: 5%;  animation: spin 44s linear infinite; }
.shapes .s2 { top: 46%; left: 4%;   animation: spin 60s linear infinite reverse; }
.shapes .s3 { bottom: 12%; right: 12%; animation: spin 52s linear infinite; }
.shapes .s4 { top: 70%; left: 22%;  animation: bob 12s ease-in-out infinite; }
.shapes .s5 { top: 24%; left: 30%;  animation: bob 16s ease-in-out infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(0deg); }
                 50% { transform: translateY(-26px) rotate(14deg); } }

/* a faint engineering grid, so the dark areas are never dead flat */
.gridlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(124,92,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 40%, #000 30%, transparent 78%);
}

/* ------------------------------------------------------------ the robot */
/* A companion that drifts down the left edge as you scroll. Fixed-position
   and pointer-transparent except for itself, so it can never sit on top of
   something the visitor is trying to press. */
#bot {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: 100px; pointer-events: none;
  will-change: transform;
  /* the wander: JS sets a new x/y and the robot travels there rather than
     teleporting. Overridden to 0s for jumps and falls, which need their own
     timing. */
  transition: transform 1.6s cubic-bezier(.34, .8, .35, 1);
}
#bot.snap { transition: transform .34s cubic-bezier(.3, 1.4, .5, 1); }
#bot.dropping { transition: transform .52s cubic-bezier(.55, 0, .85, .35); }

#bot .rig { display: block; pointer-events: auto; cursor: grab;
            animation: botFloat 4s ease-in-out infinite;
            transform-origin: 60px 120px;
            /* dragging the robot must never scroll the page under it */
            touch-action: none; }

/* While a hand (or the physics loop) drives the robot, the easing that makes
   the wander graceful would drag a rubber band behind the pointer — off. */
#bot.phys { transition: none !important; }
#bot.grabbed .rig { cursor: grabbing; animation: none; }
#bot.grabbed .bot-glow { opacity: .9; }

/* squash on landing, stretch at the top of a jump */
#bot.landed .rig { animation: botSquash .42s ease-out; }
@keyframes botSquash {
  0%   { transform: scaleY(1)   scaleX(1); }
  35%  { transform: scaleY(.72) scaleX(1.26); }
  65%  { transform: scaleY(1.1) scaleX(.93); }
  100% { transform: scaleY(1)   scaleX(1); }
}
#bot.jumping .rig { animation: botStretch .5s ease-out; }
@keyframes botStretch {
  0%   { transform: scaleY(1) scaleX(1); }
  30%  { transform: scaleY(1.18) scaleX(.86); }
  100% { transform: scaleY(1) scaleX(1); }
}

@keyframes botFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}

.bot-glow {
  position: absolute; inset: 12px 6px auto 6px; height: 92px;
  background: radial-gradient(circle, rgba(124, 92, 255, .5), transparent 68%);
  filter: blur(20px); animation: botPulse 4s ease-in-out infinite;
}
@keyframes botPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* antenna light */
.bot-tip { animation: tipBlink 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes tipBlink {
  0%, 100% { opacity: 1; r: 6; }
  50%      { opacity: .45; r: 4.6; }
}

/* eyes: a slow look around, plus a blink */
.bot-eyes { animation: botLook 7s ease-in-out infinite; transform-origin: center; }
@keyframes botLook {
  0%, 30%   { transform: translateX(0); }
  40%, 55%  { transform: translateX(4px); }
  65%, 80%  { transform: translateX(-4px); }
  90%, 100% { transform: translateX(0); }
}
.eye { animation: botBlink 5.5s infinite; transform-origin: center; }
@keyframes botBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.12); }
}

/* side pods spin lazily */
.pod { animation: podFade 3s ease-in-out infinite; }
.pod.r { animation-delay: 1.5s; }
@keyframes podFade { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* hover ring under the saucer */
.bot-ring { animation: ringBreathe 4s ease-in-out infinite; transform-origin: 60px 118px; }
@keyframes ringBreathe {
  0%, 100% { transform: scale(1); opacity: .75; }
  50%      { transform: scale(1.22); opacity: .35; }
}

/* the arm only waves over the pricing section */
.bot-arm { transform-origin: 88px 96px; }
#bot.waving .bot-arm { animation: botWave .9s ease-in-out infinite; }
@keyframes botWave {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-32deg); }
}

/* ------------------------------------------------------------- emotions */
/* mouth: a straight line by default, curved by swapping the path in JS */
.bot-mouth { transition: d .25s ease, transform .25s ease; }

/* --- crying: eyes squeeze shut, brows drop, tears run and drip --- */
#bot.crying .eye { animation: none; transform: scaleY(.35); transform-origin: center; }
#bot.crying .bot-eyes { animation: none; }
#bot.crying .bot-brow { opacity: 1; }
#bot.crying .rig { animation: botSob 1.1s ease-in-out infinite; }
@keyframes botSob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(3px) rotate(-2.5deg); }
  75%      { transform: translateY(3px) rotate(2.5deg); }
}
.tear { opacity: 0; }
#bot.crying .tear { animation: tearFall 1.5s ease-in infinite; }
#bot.crying .tear.t2 { animation-delay: .72s; }
@keyframes tearFall {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  18%  { opacity: 1; transform: translateY(4px) scale(1); }
  75%  { opacity: 1; transform: translateY(46px) scale(1.05); }
  100% { opacity: 0; transform: translateY(62px) scale(.6); }
}

/* --- happy: eyes arch, whole body bounces --- */
#bot.happy .eye { transform: scaleY(.55); transform-origin: center; }
#bot.happy .rig { animation: botHop .55s ease-in-out 3; }
@keyframes botHop {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-16px); }
}

/* --- dizzy after a fall --- */
#bot.dizzy .bot-eyes { animation: dizzySpin 1.1s linear infinite; transform-origin: 60px 59px; }
@keyframes dizzySpin { to { transform: rotate(360deg); } }
#bot.dizzy .bot-antenna { animation: antennaWobble .5s ease-in-out infinite; transform-origin: 60px 34px; }
@keyframes antennaWobble { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }

.bot-brow { opacity: 0; transition: opacity .25s ease; }

/* --------------------------------------------------------------- sword */
.blade { opacity: 0; transform-origin: 106px 95px; transition: opacity .18s ease; }
#bot.sword .blade { opacity: 1; }
#bot.sword .bot-arm { animation: swordSlash 1.1s ease-in-out 2; }
@keyframes swordSlash {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-58deg); }
  55%      { transform: rotate(22deg); }
}

/* ------------------------------------------------------------ explosion */
/* Parts are separate <g> groups so the head can genuinely leave the body. */
.p-head, .p-body, .p-arm, .p-podl, .p-podr {
  transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .6s ease;
}
.blast { opacity: 0; pointer-events: none; }

#bot.boom .blast { animation: blastGo .7s ease-out forwards; }
@keyframes blastGo {
  0%   { opacity: 1; transform: scale(.3); }
  60%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.9); }
}
#bot.boom .flash { animation: flashOut .35s ease-out forwards; }
@keyframes flashOut { 0% { opacity: .95; } 100% { opacity: 0; } }
#bot.boom .wave   { animation: waveOut .7s ease-out forwards; }
@keyframes waveOut { 0% { r: 14; opacity: 1; } 100% { r: 70; opacity: 0; } }

/* the head rockets up and spins away */
#bot.boom .p-head  { transform: translate(46px, -150px) rotate(420deg); opacity: 0; }
#bot.boom .p-arm   { transform: translate(70px, 40px) rotate(180deg); opacity: 0; }
#bot.boom .p-podl  { transform: translate(-70px, 34px) rotate(-200deg); opacity: 0; }
#bot.boom .p-podr  { transform: translate(74px, -30px) rotate(240deg); opacity: 0; }
#bot.boom .p-body  { transform: translateY(26px) rotate(-14deg); opacity: .35; }
#bot.boom .rig     { animation: none; }
#bot.boom .bot-ring, #bot.boom .bot-glow { opacity: 0; }

/* everything springs back together */
#bot.rebuild .p-head, #bot.rebuild .p-arm,
#bot.rebuild .p-podl, #bot.rebuild .p-podr, #bot.rebuild .p-body {
  transition: transform .75s cubic-bezier(.3,1.5,.5,1), opacity .4s ease;
  transform: none; opacity: 1;
}

/* speech bubble */
.bot-say {
  /* Physical `left`, not inset-inline-start: the robot is pinned to the left
     edge of the screen, so the bubble must open rightward regardless of the
     page being RTL. The logical property resolved to `right` and pushed the
     bubble off-screen. */
  position: absolute; top: 34px; left: 106px; right: auto;
  min-width: 150px; max-width: 220px;
  background: rgba(18, 16, 38, .95);
  border: 1px solid rgba(124, 92, 255, .5);
  border-radius: 13px; padding: 9px 13px;
  font-size: .82rem; color: var(--ink); text-align: right;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(124, 92, 255, .28);
  opacity: 0; transform: translateX(10px) scale(.94);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.bot-say.show { opacity: 1; transform: none; }

/* The free-drifting robot needs a clear margin beside the 1140px container.
   Below that it would sit on the text, so it shrinks and parks in the corner
   instead — still present, never in the way. */
@media (max-width: 1320px) {
  #bot { left: 10px; width: 62px; transform: none !important; top: auto; bottom: 16px; }
  #bot svg { width: 62px; height: 72px; }
  .bot-glow { inset: 8px 4px auto 4px; height: 56px; }
  .bot-say { top: auto; bottom: 4px; left: 70px; right: auto;
             font-size: .76rem; max-width: 170px; }
}

/* ----------------------------------------------------------- terms page */
.doc { max-width: 800px; margin: 0 auto; padding: 52px 22px 80px; position: relative; z-index: 1; }
.doc h1 { font-size: 2.1rem; margin: 0 0 6px; letter-spacing: -.6px; }
.doc .meta { color: var(--muted); font-size: .9rem; margin-bottom: 32px; }
.doc p.cl { margin: 8px 0; padding-inline-start: 6px; }
.doc p.cl b { color: var(--violet-lt); margin-inline-end: 4px; }
.doc h2 { font-size: 1.16rem; margin: 34px 0 8px; }
.doc p, .doc li { color: var(--muted); }
.doc ul { padding-inline-start: 22px; }
.doc .back { display: inline-block; margin-bottom: 26px; color: var(--cyan); text-decoration: none; }

/* ------------------------------------------------------ checkout / forms */
.order-card {
  background: linear-gradient(150deg, rgba(124,92,255,.14), rgba(34,211,238,.06));
  border: 1px solid rgba(124,92,255,.3); border-radius: 16px;
  padding: 22px 24px; margin: 18px 0 26px;
}
table.order { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.order td { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
table.order td:last-child { text-align: left; color: var(--ink); font-weight: 600; }
table.order tr:last-child td { border-bottom: 0; }
table.order tr.total td { font-size: 1.25rem; padding-top: 14px; }
table.order tr.total td:last-child { color: var(--violet-lt); }
.fine { color: var(--muted); font-size: .82rem; margin: 12px 0 0; }

ol.steps-list { padding-inline-start: 22px; }
ol.steps-list li { color: var(--muted); margin: 9px 0; font-size: .95rem; line-height: 1.7; }
ol.steps-list b { color: var(--ink); }
code {
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px; font-size: .88em; direction: ltr;
  display: inline-block;
}

ul.facts { padding-inline-start: 20px; }
ul.facts li { color: var(--muted); margin: 7px 0; font-size: .95rem; }
ul.facts b { color: var(--ink); }

.privacy-note {
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin: 14px 0 20px;
  font-size: .86rem; color: var(--muted); line-height: 1.65;
}

.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; margin-bottom: 6px; font-size: .9rem; color: var(--muted); }
.fld input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem;
  background: rgba(255,255,255,.05); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; direction: rtl;
}
.fld input:focus { outline: none; border-color: var(--violet); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.req { color: var(--danger); }

.check {
  display: flex; gap: 11px; align-items: flex-start;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 11px;
  cursor: pointer; font-size: .9rem; line-height: 1.6; color: var(--ink);
}
.check:hover { border-color: rgba(124,92,255,.4); }
.check input { margin-top: 3px; width: 19px; height: 19px; accent-color: var(--violet); flex: 0 0 auto; }
.check.optional { opacity: .85; }
.check i { color: var(--muted); font-style: normal; }

.sign-meta { color: var(--muted); font-size: .84rem; margin: 16px 0 14px; }
.form-err {
  background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4);
  color: #fecaca; border-radius: 11px; padding: 12px 14px; font-size: .9rem;
}
.done {
  background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.35);
  border-radius: 16px; padding: 26px 24px; text-align: center;
}
.done h2 { margin-top: 0; color: var(--ok); }

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

/* --------------------------------------------------------------- mobile */
@media (max-width: 820px) {
  .mock-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav nav { display: none; }
  .hero { padding: 60px 0 30px; }
  section { padding: 58px 0; }
  .pay { padding: 34px 20px; }
  /* No tilt or scale on a phone: the scaled-up mock pushed past the viewport
     and gave the page a sideways scroll. */
  .mock, html.js .mock { transform: none; }
  .mock-wrap { perspective: none; }
}

/* ======================================================= phone compaction
   The page ran to nearly nine screens on a phone, which reads as "endless"
   however good each section looks on a desktop. Everything below tightens
   spacing and shrinks the decorative pieces — no content is removed, so a
   phone visitor still gets the whole offer, just without the long walk. */
@media (max-width: 700px) {
  section { padding: 34px 0; }
  .hero { padding: 34px 0 18px; }
  .hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); margin-bottom: 12px; }
  .hero p.lead { font-size: 1rem; margin-bottom: 20px; }
  .eyebrow { margin-bottom: 14px; padding: 5px 13px; font-size: .8rem; }
  .trust { margin-top: 16px; font-size: .8rem; }
  .cta .btn { padding: 12px 22px; font-size: .95rem; }

  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: 1.45rem; }
  .section-head p { font-size: .92rem; }

  /* the product shot is illustration, not information — half the size is
     plenty on a 6-inch screen */
  .mock-wrap { margin-top: 26px; }
  .mock-body { padding: 10px; gap: 8px; }
  .mock-panel { padding: 9px; }
  .mock-row { padding: 6px 8px; font-size: .72rem; margin-bottom: 5px; }
  .mock-text { font-size: .74rem; padding: 8px 9px; }
  .mock-note { font-size: .72rem; padding: 8px 9px; }
  .mchip { font-size: .64rem; padding: 3px 7px; }

  .stats { gap: 8px; margin-top: 26px;
           grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 12px 8px; }
  .stat b { font-size: 1.35rem; }
  .stat span { font-size: .78rem; }

  .grid, .steps { gap: 10px; }
  .card { padding: 16px 15px; }
  .card .ico { width: 34px; height: 34px; font-size: 16px;
               margin-bottom: 9px; border-radius: 10px; }
  .card h3 { font-size: 1rem; margin-bottom: 5px; }
  .card p { font-size: .87rem; }

  /* the four steps are one line each — two per row instead of four rows */
  .steps { grid-template-columns: 1fr 1fr; }
  .step { padding: 15px 13px; }
  .step .n { width: 28px; height: 28px; font-size: .85rem; margin-bottom: 8px; }
  .step h3 { font-size: .93rem; }
  .step p { font-size: .82rem; }

  .term-switch { margin-bottom: 20px; padding: 4px; gap: 3px; }
  .term { padding: 8px 13px; font-size: .85rem; }
  .plan { padding: 20px 18px; border-radius: 16px; }
  .plan h3 { font-size: 1.1rem; }
  .plan .sub { font-size: .84rem; margin-bottom: 12px; }
  .plan .crown { font-size: 1.2rem; margin-bottom: 3px; }
  .plan .amount { font-size: 2.2rem; }
  .plan ul { margin: 14px 0 16px; }
  .plan li { padding: 5px 0; font-size: .88rem; }
  .term-note { font-size: .76rem; min-height: 0; margin-top: 4px; }

  .pay { padding: 26px 18px; border-radius: 18px; }
  .pay h2 { font-size: 1.35rem; }
  .pay p { font-size: .9rem; margin-bottom: 18px; }
  .pay-methods { gap: 7px; margin-top: 18px; }
  .chip { padding: 8px 13px; font-size: .82rem; }

  details { padding: 14px 16px; margin-bottom: 8px; }
  details summary { font-size: .93rem; }
  details p { font-size: .88rem; }

  .notice { padding: 18px 18px; }
  .notice ul { font-size: .87rem; }

  footer { padding: 24px 0; }
  .foot-links { gap: 7px 14px; grid-template-columns: 1fr 1fr; font-size: .84rem; }
  .foot-bottom { font-size: .78rem; margin-top: 16px; padding-top: 12px; }

  .doc { padding: 28px 18px 50px; }
  .doc h1 { font-size: 1.6rem; }
  .doc h2 { font-size: 1.05rem; margin: 22px 0 6px; }
  .doc p, .doc li { font-size: .9rem; }
}

/* very small phones: the two-column step grid gets cramped */
@media (max-width: 380px) {
  .steps, .foot-links { grid-template-columns: 1fr; }
}

/* Two feature cards per row on a phone. Six full-width cards was the single
   biggest stretch of scrolling on the page. */
@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .card p { font-size: .8rem; line-height: 1.55; }
  .card h3 { font-size: .93rem; }
  .steps { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 430px) {
  .grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------- collapsible notice blocks */
/* Two screens of solid legal text on a phone is text nobody reads. Folded,
   the heading still lands and the detail stays one tap away. */
details.fold { padding: 0; }
details.fold > summary {
  cursor: pointer; list-style: none; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h3 { margin: 0; }
details.fold > summary::after {
  content: "+"; color: var(--warn); font-size: 1.5rem; font-weight: 300;
  line-height: 1; flex: 0 0 auto;
}
details.fold[open] > summary::after { content: "−"; }
details.fold > *:not(summary) { padding-inline: 20px; }
details.fold > *:last-child { padding-bottom: 18px; }

/* ============================== phone: show less, not just smaller ====== */
@media (max-width: 700px) {
  /* The product mock-up is illustration. On a phone it costs three quarters
     of a screen before the visitor has read a single benefit. */
  .mock-wrap { display: none; }

  /* Four "how it works" cards become a tight numbered list. */
  .steps { display: block; }
  .step {
    display: grid; grid-template-columns: auto 1fr; gap: 0 12px;
    align-items: start; padding: 12px 14px; margin-bottom: 8px;
  }
  .step .n { grid-row: span 2; margin: 0; width: 26px; height: 26px; font-size: .8rem; }
  .step h3 { margin: 0 0 2px; }
  .step p { font-size: .8rem; line-height: 1.5; }

  /* Six feature cards: icon and title carry the message, the sentence is
     supporting detail that can be tighter. */
  .card { padding: 13px 12px; }
  .card .ico { width: 28px; height: 28px; font-size: 14px; margin-bottom: 7px; }
  .card h3 { font-size: .88rem; }
  .card p { font-size: .76rem; line-height: 1.5; }

  /* trim the run-on explanatory paragraphs under each heading */
  .section-head p { font-size: .86rem; }
  .trust { font-size: .76rem; }
}

/* ===================== hard stop on any horizontal overflow =============
   A phone showed a black strip down the left: the document was wider than
   the screen, and the fixed background layers only ever cover the VIEWPORT,
   so the extra width rendered as bare body colour.
   `clip` (not `hidden`) removes the overflow without turning the element
   into a scroll container, so the sticky header and the fixed decorations
   keep behaving. The width caps below stop any single decoration from
   widening the page in the first place. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

#fx, .aurora, .shapes, .gridlines {
  max-width: 100vw; overflow: hidden;
}
.aurora i, .shapes svg { max-width: 100vw; }

/* Nothing in the flow may exceed the screen. */
img, svg, video, canvas, table, pre { max-width: 100%; }

/* The robot and its bubble live at the edge — keep them inside it. */
#bot { max-width: 100vw; }
.bot-say { max-width: min(170px, calc(100vw - 90px)); }


/* ======================================================= accessibility layer
   Israeli accessibility regulations (reg. 35) point to standard 5568, which
   is WCAG at level AA. The rules below close the gaps an audit found and
   carry the choices made in the accessibility menu (a11y.js). */

/* Text for screen readers only — "not included", "opens in a new tab". */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A link inside running text must not be told apart by colour alone. */
p a:not(.btn), li a:not(.btn), td a:not(.btn), label a,
.privacy-note a, .sign-meta a, .fine a {
  text-decoration: underline; text-underline-offset: .2em;
}

/* Windows high-contrast mode drops backgrounds, and text painted with a
   background gradient would be left invisible. */
@media (forced-colors: active) {
  .grad, .plan .amount, .stat b {
    background: none; color: CanvasText; -webkit-text-fill-color: CanvasText;
  }
  .btn, .term, .a11y-btn { border: 1px solid ButtonText; }
}

/* ------------------------------------------------------------ the menu */
.a11y-btn {
  position: fixed; bottom: 16px; inset-inline-start: 16px; z-index: 1000;
  width: 54px; height: 54px; border-radius: 50%; border: 2px solid #fff;
  background: #1d4ed8; color: #fff; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.a11y-btn svg { fill: currentColor; }
.a11y-btn:hover { background: #1e40af; }

.a11y-panel {
  position: fixed; bottom: 80px; inset-inline-start: 16px; z-index: 1000;
  width: min(290px, calc(100vw - 32px));
  max-height: calc(100vh - 100px); overflow-y: auto;
  background: #12102a; color: #f2f2f8;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px;
  padding: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  font-size: 15px; line-height: 1.5;
  display: grid; gap: 8px;
}
.a11y-panel[hidden] { display: none; }
.a11y-title { margin: 0 0 4px; font-weight: 700; font-size: 16px; }
.a11y-size { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-now { margin: 0; font-size: 13px; color: #c9c9dc; }
.a11y-panel button {
  font: inherit; font-size: 14px; cursor: pointer; text-align: start;
  background: rgba(255, 255, 255, .06); color: #f2f2f8;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px;
  padding: 10px 12px; min-height: 44px;
}
.a11y-panel button:hover { background: rgba(255, 255, 255, .12); }
.a11y-panel .a11y-opt[aria-pressed="true"] {
  background: #1d4ed8; border-color: #93c5fd; font-weight: 700;
}
.a11y-link { color: #93c5fd; text-decoration: underline; padding: 4px 2px; }

/* ------------------------------------------ choices made in the menu */

/* Stop animations: nothing moves on its own, nothing waits to fade in. */
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after {
  animation: none !important; transition: none !important;
}
html.a11y-still { scroll-behavior: auto; }
html.a11y-still #fx, html.a11y-still #bot { display: none !important; }
html.a11y-still .reveal, html.a11y-still .mock { opacity: 1 !important; transform: none !important; }

/* Emphasise links. */
html.a11y-links a {
  text-decoration: underline !important; text-decoration-thickness: 2px !important;
  text-underline-offset: .2em; outline: 2px dashed #fde047; outline-offset: 2px;
}

/* Readable font: a plain face and more room between letters, words, lines. */
html.a11y-font body, html.a11y-font body * {
  font-family: Arial, Tahoma, sans-serif !important;
  letter-spacing: .02em; word-spacing: .12em;
}
html.a11y-font body { line-height: 1.9; }

/* High contrast: black, white and yellow, no glass or glow. */
html.a11y-contrast, html.a11y-contrast body { background: #000 !important; }
html.a11y-contrast body * {
  background-color: #000 !important; background-image: none !important;
  color: #fff !important; -webkit-text-fill-color: currentColor;
  border-color: #fff !important; box-shadow: none !important;
  text-shadow: none !important; backdrop-filter: none !important;
}
html.a11y-contrast a, html.a11y-contrast a * { color: #fde047 !important; }
html.a11y-contrast .btn, html.a11y-contrast .term, html.a11y-contrast .check {
  border: 2px solid #fff !important;
}
html.a11y-contrast .term.on,
html.a11y-contrast .a11y-panel .a11y-opt[aria-pressed="true"] {
  background-color: #fde047 !important; color: #000 !important;
}
html.a11y-contrast #fx, html.a11y-contrast .aurora, html.a11y-contrast .gridlines,
html.a11y-contrast .shapes, html.a11y-contrast #bot { display: none !important; }
html.a11y-contrast .a11y-btn { background-color: #000 !important; border: 3px solid #fde047 !important; }