/* ==========================================================================
   BekeFit V2 — design system
   Palette decision + contrast table: docs/REDESIGN-AUDIT.md §6, §9
   Single Latin family (Manrope) + Hebrew (Heebo). No OS-driven theme.
   All directional rules use CSS logical properties for real RTL.
   ========================================================================== */

:root{
  /* ground */
  --ink:#0A1120;
  --ink-2:#111A2E;
  --ink-3:#18243D;
  --paper:#FFFFFF;
  --mist:#F5F8FC;

  /* brand */
  /* 4.70:1 against white. It was #2F6BFF, which is 4.499:1 -- under AA by a
     rounding error, on the primary button, everywhere in the product. Found by
     the accessibility gate, not by looking at it. */
  --blue:#2D68FA;
  --blue-lo:#1B4FD8;
  --blue-hi:#7FA8FF;
  --blue-tint:#EAF0FF;
  --gold:#FFC928;
  --gold-lo:#E0A800;
  --mint:#34D9A6;

  /* text */
  --text:#0E1524;
  --text-2:#5A6A85;
  --on-ink:#E8EEF9;
  --on-ink-2:#9FB0CC;

  /* lines */
  --line:#E3EAF3;
  --line-ink:rgba(159,176,204,.18);
  --line-ink-2:rgba(159,176,204,.32);

  --r:14px;
  --r-lg:22px;
  --r-xl:30px;
  --sp:clamp(68px,7.5vw,116px);
  --shadow:0 1px 2px rgba(14,21,36,.05),0 10px 32px rgba(14,21,36,.07);
  --shadow-lg:0 2px 4px rgba(14,21,36,.05),0 26px 64px rgba(14,21,36,.13);
  --ease:cubic-bezier(.2,.8,.28,1);

  /* Continue with Google (AUTH-GOOGLE-1): Google's branding rules fix these,
     not BekeFit's palette. Light here, dark under data-theme="dark". */
  --google-btn-bg:#FFFFFF;
  --google-btn-line:#747775;
  --google-btn-text:#1F1F1F;
  --google-btn-hover:#F2F2F2;
}

/* ---------- the dark theme, at the primitive layer ----------------------
   Everything above is the light theme and stays the brand. These are the
   same names with the ground turned over: the page, the ink on it, the
   lines between things, and the shadows, which cannot be a faint grey on
   a dark page because a shadow there is an absence of light, not a smudge.

   The BRAND hues are deliberately not here. --blue, --gold, --mint mean
   what they mean in both themes; only what they sit on moves. The two
   that do move are the tints: a wash mixed for white paper is a glare on
   a dark page, so they are mixed again rather than dimmed. */
:root[data-theme="dark"]{
  /* The bar and the page are both dark now, so they can no longer be the
     same value: the bar is the darkest thing, the page sits above it. */
  --ink:#070c16;
  --ink-2:#0b1120;
  --ink-3:#111a2e;
  --paper:#111a2e;            /* a card */
  --mist:#0b1120;             /* the page behind the cards */

  --text:#f0f4fd;
  --text-2:#9fb0cc;
  --on-ink:#e8eef9;
  --on-ink-2:#9fb0cc;

  --line:#22304f;
  --line-ink:rgba(159,176,204,.18);
  --line-ink-2:rgba(159,176,204,.32);

  --blue-tint:#15224a;

  --shadow:0 1px 2px rgba(3,7,18,.5),0 10px 32px rgba(3,7,18,.55);
  --shadow-lg:0 2px 4px rgba(3,7,18,.5),0 26px 64px rgba(3,7,18,.7);

  /* Continue with Google, dark: Google's own colours for its button. */
  --google-btn-bg:#131314;
  --google-btn-line:#8E918F;
  --google-btn-text:#E3E3E3;
  --google-btn-hover:#1F1F21;
}

*,*::before,*::after{box-sizing:border-box}
html{
  /* color-scheme now comes from the theme (northlight.css). It was pinned
     to light here, with a comment saying the brand is not OS-driven, which
     was true until the owner asked for a dark theme with a real toggle. */
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.62;
  font-weight:450;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[lang="he"] body{font-family:"Heebo","Manrope",system-ui,sans-serif}

h1,h2,h3,h4{
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.032em;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
html[lang="he"] h1,html[lang="he"] h2,html[lang="he"] h3,html[lang="he"] h4{
  font-family:"Heebo",sans-serif;letter-spacing:-.012em;line-height:1.14;
}
p{margin:0}
a{color:inherit;text-underline-offset:3px}
ul{margin:0;padding:0;list-style:none}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}

:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}
.band-ink :focus-visible{outline-color:var(--blue-hi)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:fixed;top:10px;inset-inline-start:10px;z-index:200;
  background:var(--blue);color:#fff;padding:12px 18px;border-radius:12px;
  font-weight:700;text-decoration:none;transform:translateY(-160%);transition:transform .2s
}
.skip:focus{transform:none}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:22px}
.narrow{max-width:820px}
section{padding-block:var(--sp);position:relative}
.band-paper{background:var(--paper);color:var(--text)}
.band-mist{background:var(--mist);color:var(--text)}
.band-ink{background:var(--ink);color:var(--on-ink)}
.band-ink h1,.band-ink h2,.band-ink h3,.band-ink h4{color:#fff}

.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-lo);margin-bottom:18px;
}
html[lang="he"] .kicker{letter-spacing:.05em}
.band-ink .kicker{color:var(--gold)}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.65}

h2{font-size:clamp(1.9rem,1.15rem + 2.3vw,3rem);margin-bottom:18px}
.lede{font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);color:var(--text-2);max-width:62ch;font-weight:450}
.band-ink .lede{color:var(--on-ink-2)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:15.5px;line-height:1;letter-spacing:-.01em;
  padding:17px 28px;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .18s,color .18s,border-color .18s;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .22s var(--ease)}
html[dir="rtl"] .btn svg.arrow{transform:scaleX(-1)}
.btn-p{background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(47,107,255,.30)}
.btn-p:hover{background:var(--blue-lo);transform:translateY(-2px);box-shadow:0 14px 34px rgba(47,107,255,.38)}
.btn-p:hover svg.arrow{transform:translateX(3px)}
html[dir="rtl"] .btn-p:hover svg.arrow{transform:scaleX(-1) translateX(3px)}
.btn-o{background:transparent;color:var(--text);border-color:var(--line)}
.btn-o:hover{border-color:var(--text);transform:translateY(-2px)}
.band-ink .btn-o{color:#fff;border-color:var(--line-ink-2)}
.band-ink .btn-o:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-sm{padding:12px 20px;font-size:14px}
.btn-block{width:100%}
.btn[disabled]{opacity:.62;pointer-events:none}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:800;font-size:20.5px;letter-spacing:-.035em}
.logo .mark{width:32px;height:32px;flex:none}
.logo b{font-weight:800}
.logo i{font-style:normal;color:var(--blue-hi)}