/* ============================================================
   nipagesh — shared site design system (RTL, Hebrew-first)
   Brand: berry #C81D6B · jade #0E7C66 · plum #211A24 · cream #FAF6F7 · gold #9A6B1E
   ============================================================ */
:root{
  --bg:#FAF6F7; --surface:#FFFFFF; --surface-2:#F4ECEF; --surface-3:#EFE5E9;
  --ink:#211A24; --ink-soft:#5C4F57; --ink-faint:#8C7E86;
  --border:#E7DBDF; --border-strong:#D8C9CF;
  --accent:#C81D6B; --accent-ink:#A21655; --accent-soft:#FAE6F0; --accent-line:#EFC9DD;
  --growth:#0E7C66; --growth-soft:#DEF0EA; --gold:#9A6B1E; --gold-soft:#F3E9D6;
  --danger:#C0392B; --danger-soft:#FCE8E6;
  --shadow:0 1px 2px rgba(33,26,36,.04), 0 10px 34px rgba(33,26,36,.07);
  --shadow-lift:0 3px 8px rgba(200,29,107,.10), 0 26px 60px rgba(33,26,36,.13);
  --maxw:1120px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#17121B; --surface:#201924; --surface-2:#2A2130; --surface-3:#332839;
  --ink:#F4ECF0; --ink-soft:#C6B7C1; --ink-faint:#948595;
  --border:#352A3C; --border-strong:#463A4E;
  --accent:#F06AA6; --accent-ink:#F589B9; --accent-soft:#3A1F2E; --accent-line:#5A3346;
  --growth:#49C9A8; --growth-soft:#15332C; --gold:#D9AE5F; --gold-soft:#33291A;
  --danger:#F1948A; --danger-soft:#3A211E;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 34px rgba(0,0,0,.4);
  --shadow-lift:0 3px 8px rgba(240,106,166,.14), 0 28px 66px rgba(0,0,0,.55);
}}
:root[data-theme="dark"]{
  --bg:#17121B; --surface:#201924; --surface-2:#2A2130; --surface-3:#332839;
  --ink:#F4ECF0; --ink-soft:#C6B7C1; --ink-faint:#948595;
  --border:#352A3C; --border-strong:#463A4E;
  --accent:#F06AA6; --accent-ink:#F589B9; --accent-soft:#3A1F2E; --accent-line:#5A3346;
  --growth:#49C9A8; --growth-soft:#15332C; --gold:#D9AE5F; --gold-soft:#33291A;
  --danger:#F1948A; --danger-soft:#3A211E;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 34px rgba(0,0,0,.4);
  --shadow-lift:0 3px 8px rgba(240,106,166,.14), 0 28px 66px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); direction:rtl; text-align:right;
  font-family:"Heebo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
/* One family (Heebo); hierarchy from weight + size. Tracking is size-specific:
   tight on display sizes, neutral on body (§15). */
h1,h2,h3,h4{font-family:inherit; margin:0; line-height:1.15; text-wrap:balance; font-weight:800;}
h1{font-size:clamp(2rem,4.6vw,3.1rem); letter-spacing:-.02em; line-height:1.1;}
h2{font-size:clamp(1.45rem,3.1vw,2.05rem); letter-spacing:-.01em;}
h3{font-size:1.15rem; font-weight:700;}
p{margin:0}
a{color:var(--accent-ink); text-decoration:none}
a:hover{text-decoration:underline}
/* WCAG 2.4.1 — a keyboard user can jump the 9-control header on every page.
   Off-screen until focused, then it lands in the top corner. */
.skip-link{position:absolute; top:0; inset-inline-start:0; z-index:100;
  background:var(--surface); color:var(--accent-ink); font-weight:700; font-size:.9rem;
  padding:12px 18px; border:1px solid var(--accent); border-radius:0 0 12px 0;
  box-shadow:var(--shadow-lift); transform:translateY(-200%);}
/* Revealed by transform, not an off-screen offset: a negative inline offset on
   an RTL page adds thousands of px of scrollable overflow (see .hp below). */
.skip-link:focus{transform:translateY(0); text-decoration:none}
main:focus{outline:none}
/* Visually hidden but read aloud — clip, never an off-screen offset, which on
   an RTL page adds thousands of px of scrollable overflow (see .hp below). */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.measure{max-width:70ch}
.num{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:embed; display:inline-block}
.eyebrow{font-family:"Heebo"; font-weight:700; font-size:.82rem; letter-spacing:.06em; color:var(--accent-ink);}
.center{text-align:center}
.muted{color:var(--ink-soft)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit;
  font-weight:700; font-size:.98rem; padding:13px 26px; border-radius:12px; cursor:pointer;
  border:1px solid transparent; transition:transform .16s cubic-bezier(.2,.7,.2,1), background .2s, box-shadow .2s;
  text-decoration:none; white-space:nowrap;}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:scale(.97); transition-duration:.09s}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn--primary{background:var(--accent); color:#fff; box-shadow:var(--shadow-lift)}
.btn--primary:hover{background:var(--accent-ink)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent-ink)}
.btn--lg{padding:16px 34px; font-size:1.05rem}
.btn--block{display:flex; width:100%}

/* ---- header (markup in src/components/Header.astro) ---- */
.site-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--border);}
.site-header .bar{max-width:var(--maxw); margin:0 auto; padding:0 24px; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.2rem; color:var(--ink); letter-spacing:-.01em;}
.brand:hover{text-decoration:none}
.brand .mark{width:22px; height:26px; border-radius:6px 6px 9px 9px;
  background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));
  box-shadow:0 5px 12px color-mix(in srgb,var(--accent) 40%,transparent);}
.brand .dot{color:var(--accent)}
.nav{display:flex; align-items:center; gap:4px;}
.nav a{color:var(--ink-soft); font-weight:500; font-size:.95rem; padding:8px 13px; border-radius:9px;
  transition:color .2s, background .2s;}
.nav a:hover{color:var(--ink); background:var(--surface-2); text-decoration:none;}
.nav a.is-current{color:var(--accent-ink); background:var(--accent-soft);}
.header-actions{display:flex; align-items:center; gap:8px;}
.header-actions .btn{padding:9px 18px; font-size:.9rem;}
.menu-toggle{display:none; border:1px solid var(--border-strong); background:var(--surface); border-radius:9px;
  width:40px; height:40px; cursor:pointer; color:var(--ink); font-size:1.1rem;}
.icon-link{border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-soft);
  width:38px; height:38px; border-radius:9px; display:grid; place-items:center; cursor:pointer; font-size:.95rem;}
.icon-link:hover{border-color:var(--accent); color:var(--accent-ink)}

/* ---- page hero ---- */
.page-hero{padding:clamp(48px,8vw,88px) 0 clamp(28px,4vw,44px);}
.page-hero .eyebrow{margin-bottom:16px}
.page-hero p.lede{margin-top:20px; font-size:1.16rem; color:var(--ink-soft); max-width:56ch}
.page-hero--center{text-align:center}
.page-hero--center p.lede{margin-inline:auto}

/* ---- sections & cards ---- */
section.block{padding:clamp(36px,6vw,64px) 0; border-top:1px solid var(--border);}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow:var(--shadow)}
.card h3{margin-bottom:8px}
/* Cards whose heading had to become an <h2> for a valid outline (they sit
   directly under the page <h1>) but should still read at card scale. */
.card h2.card-h{margin-bottom:8px; font-size:1.15rem; font-weight:700; letter-spacing:0}
.card p{color:var(--ink-soft); font-size:.97rem}

/* ---- forms ---- */
.form{display:flex; flex-direction:column; gap:16px; max-width:440px}
.form--full{max-width:none}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-weight:600; font-size:.9rem}
.field .hint{font-size:.8rem; color:var(--ink-faint)}
.input,.textarea,select.input{width:100%; font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:11px; padding:12px 14px; transition:border-color .2s, box-shadow .2s;}
.input:focus,.textarea:focus,select.input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);}
.input--ltr{direction:ltr; text-align:left}
.textarea{min-height:130px; resize:vertical}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ink-soft)}
.check input{margin-top:4px; accent-color:var(--accent)}
.form-error{display:none; color:var(--danger); background:var(--danger-soft);
  border:1px solid color-mix(in srgb,var(--danger) 40%,transparent); border-radius:11px;
  padding:11px 14px; font-size:.88rem}
/* Honeypot: hidden with clip, NOT an offscreen offset — left:-9999px on an
   RTL page adds ~10000px of scrollable overflow, and mobile browsers zoom
   out to fit it, rendering the whole page as a blank speck. */
.hp{position:absolute !important; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}

/* ---- auth split layout ---- */
.auth{display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 64px)}
.auth__panel{padding:clamp(32px,6vw,72px); display:flex; flex-direction:column; justify-content:center}
.auth__aside{background:linear-gradient(150deg, var(--accent-soft), var(--growth-soft));
  padding:clamp(32px,6vw,72px); display:flex; flex-direction:column; justify-content:center; gap:22px; position:relative; overflow:hidden}
.auth__aside h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.auth__aside ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.auth__aside li{display:flex; gap:10px; align-items:flex-start; font-size:1rem; color:var(--ink)}
.auth__aside li svg{flex:none; margin-top:4px; color:var(--growth)}

/* ---- legal / doc pages ---- */
.doc{max-width:760px; margin:0 auto; padding:clamp(28px,5vw,52px) 24px 80px}
.doc .updated{font-family:"Heebo"; font-size:.82rem; color:var(--ink-faint); margin:6px 0 28px}
.doc h2{font-size:1.5rem; margin:36px 0 12px}
.doc h3{font-size:1.12rem; margin:22px 0 8px}
.doc p{margin:10px 0; color:var(--ink-soft)}
.doc ul,.doc ol{color:var(--ink-soft); padding-inline-start:22px; margin:10px 0}
.doc li{margin:6px 0}
.doc .toc{background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:18px 22px; margin-bottom:30px}
.doc .toc a{display:block; padding:4px 0; font-size:.95rem}

/* ---- trust strip ---- */
.trust{display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:center; margin-top:26px}
.trust span{display:inline-flex; align-items:center; gap:8px; font-size:.92rem; color:var(--ink-soft); font-weight:500}
.trust svg{color:var(--growth); flex:none}

/* ---- signup: layout ---- */
.signup-hand{max-width:480px; margin-inline:auto; padding-bottom:70px}
.form-card h2{font-size:1.25rem; margin-bottom:6px}
.form-card .card-sub{font-size:.9rem; margin-bottom:18px}
.form-note{font-size:.8rem; color:var(--ink-faint); text-align:center; margin-top:2px}
.form-alt{font-size:.85rem; text-align:center}

/* ---- pricing: cadence segmented control ---- */
.seg{position:relative; display:inline-flex; background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:4px; gap:4px}
.seg-thumb{position:absolute; top:4px; bottom:4px; left:0; width:0; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; box-shadow:0 1px 3px rgba(33,26,36,.12);
  transition:left .3s cubic-bezier(.22,1,.36,1), width .3s cubic-bezier(.22,1,.36,1)}
.seg button{position:relative; z-index:1; border:0; background:transparent; font:inherit; font-weight:600;
  font-size:.85rem; color:var(--ink-soft); padding:7px 16px; border-radius:999px; cursor:pointer; transition:color .2s}
.seg button.on{color:var(--ink); font-weight:700}
.seg button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---- pricing: included-in-all strip ---- */
.plan-incl{margin-top:22px; background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:18px 20px}
.plan-incl h3{font-family:"Heebo",sans-serif; font-size:.78rem; letter-spacing:.06em; color:var(--ink-faint);
  font-weight:700; margin-bottom:12px}
.plan-incl ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:9px 18px}
.plan-incl li{display:flex; gap:8px; align-items:center; font-size:.9rem; color:var(--ink-soft)}
.plan-incl svg{color:var(--growth); flex:none}

/* ---- signup: next-steps + handoff card ---- */
.next-steps{list-style:none; margin:16px 0 20px; padding:0; display:flex; flex-direction:column; gap:12px}
.next-steps li{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--ink-soft)}
.next-steps .n{flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent-ink); font-size:.78rem; font-weight:700; display:grid; place-items:center; margin-top:1px}
.form-card .form-note{margin-top:10px}

/* ---- signup: order summary + success ---- */
.order-line[hidden]{display:none}
.order-line{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:11px 14px; font-size:.9rem}
.order-line .ol-plan{color:var(--ink-soft)}
.order-line .ol-plan b{color:var(--ink)}
.order-line .ol-price{color:var(--ink-soft); font-weight:500}
.done-state{display:none; text-align:center; padding:18px 0}
.done-state .done-icon{width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  background:var(--growth-soft); color:var(--growth); display:grid; place-items:center}
.done-state h3{font-size:1.35rem; margin-bottom:8px}
.done-state p{font-size:.95rem}

/* ---- footer (markup in src/components/Footer.astro) ---- */
/* z-index above every layer the scroll-world stacks (its scenes reach 120):
   on the home page the footer scrolls up over a screen full of fixed
   layers, and anything lower simply never appears. */
.site-footer{position:relative; z-index:130; border-top:1px solid var(--border);
  background:var(--surface-2); margin-top:40px}
.site-footer .cols{max-width:var(--maxw); margin:0 auto; padding:48px 24px 20px; display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px}
.site-footer .about p{color:var(--ink-soft); font-size:.92rem; margin-top:12px; max-width:34ch}
.site-footer h2{font-family:"Heebo"; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; margin-bottom:12px}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.site-footer a{color:var(--ink-soft); font-size:.95rem}
.site-footer a:hover{color:var(--accent-ink)}
.site-footer .base{max-width:var(--maxw); margin:0 auto; padding:18px 24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center; color:var(--ink-faint); font-size:.85rem}
.site-footer .base .badges{display:flex; gap:16px; flex-wrap:wrap}
.site-footer .base .badges b{color:var(--ink)}

/* ---- cookie banner (injected) ---- */
/* Above the footer (130): the consent choice must stay reachable even at the
   bottom of the home page, where the footer scrolls up over the world. */
.cookie-banner{position:fixed; inset-inline:16px; bottom:16px; z-index:140; max-width:640px; margin:0 auto;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--border-strong); border-radius:16px; box-shadow:var(--shadow-lift);
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  transition:opacity .2s;}
.cookie-banner p{font-size:.9rem; color:var(--ink-soft); flex:1 1 260px; margin:0}
.cookie-actions{display:flex; gap:8px; flex:0 0 auto}
.cookie-actions .btn{padding:9px 18px; font-size:.88rem}
@media (prefers-reduced-transparency:reduce){ .cookie-banner{background:var(--surface); backdrop-filter:none} }

.mobile-only{display:none}
@media (max-width:860px){
  .nav{display:none}
  .menu-toggle{display:grid; place-items:center}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth__aside{display:none}
  .plan-incl ul{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .nav.open{display:flex; position:absolute; inset-inline:0; top:64px; flex-direction:column; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--border); padding:12px 16px; box-shadow:var(--shadow)}
  .nav.open a{padding:11px 12px}
}
@media (max-width:520px){
  .site-footer .cols{grid-template-columns:1fr}
  /* The full header cluster (brand · theme · login · signup · burger) lays
     out at ~480px and made phones zoom out to fit. Keep every essential
     action; the theme toggle is the one nicety that steps aside, and the
     rest tightens until the bar fits 360px. */
  .site-header .bar{padding:0 14px; gap:10px;}
  .icon-link{display:none;}
  .header-actions{gap:6px;}
  .header-actions .btn{padding:8px 13px; font-size:.82rem; white-space:nowrap;}
  .brand{font-size:1.02rem; gap:7px;}
  .brand .mark{width:18px; height:21px; border-radius:5px 5px 7px 7px;}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn{transition:none}
  .seg-thumb{transition:none} }
@media (prefers-reduced-transparency:reduce){ .site-header{background:var(--bg); backdrop-filter:none} }