/* ============================================================================
   site.css · Faber Flow
   מפת הקובץ (שמות, לא מספרי שורות):

   :root            טוקנים. כל צבע, רדיוס ופונט של האתר יושבים כאן בלבד.
                    מיתוג מחדש = עריכת הבלוק הזה. שום קובץ HTML לא מחזיק צבע.
   base             reset, body, טיפוגרפיה גלובלית, קישורים, code, hr
   .glow            תאורת רקע קבועה. indigo כאור בלבד, לעולם לא כטקסט.
   .wrap            רוחב עמוד. skip-link לנגישות.
   header/nav       מסטהד עליון: wordmark טקסטואלי + ניווט. אין לוגו בכוונה.
   .eyebrow h1..h3  סולם הכותרות
   .stand .lede     פסקאות פתיחה
   section .sec-h   רהיטי סקציה: כותרת עם קו מתמשך
   .cards .card     רשת כרטיסים גנרית
   .rows .row       רשימת שורות (מה אנחנו בונים / מה המוצר עושה)
   .scope           כרטיס הרשאת OAuth. המרכיב הכי חשוב בעמוד הפרטיות.
   .kv              רשימת מפתח/ערך (פרטי העסק, שמירת מידע)
   .cta             כפתורים
   .note            הערה מסוגרת (מסגרת צד)
   .quote-en        הנוסח האנגלי המחייב של Google. LTR מבודד בתוך עמוד RTL.
   .toc             תוכן עניינים בעמוד הפרטיות
   footer           פוטר + שורת הזהות המשפטית (.legal). מופיע בכל עמוד.
   a11y/motion      focus-visible, prefers-reduced-motion
   ============================================================================ */

:root{
  --bg:#06090C; --ink:#E9EFF4; --acc:#22D3C5; --acc-2:#4F46E5;
  --ink-2:rgba(233,239,244,.78); --ink-3:rgba(233,239,244,.56); --ink-4:rgba(233,239,244,.30);
  --line:rgba(233,239,244,.10); --panel:rgba(233,239,244,.028);
  --r:18px;
  --disp:"Heebo","Arial Hebrew","Noto Sans Hebrew",system-ui,sans-serif;
  --body:"Assistant","Arial Hebrew","Noto Sans Hebrew",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  font-weight:400; font-size:clamp(16px,.5vw + 14.4px,17.5px); line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; height:auto}

.glow{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70ch 48ch at 92% -8%, color-mix(in oklab,var(--acc-2) 24%, transparent), transparent 62%),
    radial-gradient(60ch 40ch at 4% 108%, color-mix(in oklab,var(--acc) 10%, transparent), transparent 60%);
  opacity:.5;
}

.wrap{max-width:74ch; margin-inline:auto; padding:0 clamp(18px,4vw,40px)}
.skip{position:absolute; inset-inline-start:-9999px; top:0; background:var(--acc); color:#04140F;
  padding:10px 16px; border-radius:0 0 10px 10px; font-weight:600; z-index:9}
.skip:focus{inset-inline-start:50%; transform:translateX(50%)}

a{color:var(--acc); text-underline-offset:.22em; text-decoration-thickness:1px}
a:hover{color:var(--ink)}
strong{font-weight:600; color:var(--ink)}
code,.mono{font-family:var(--mono); font-size:.86em; color:var(--ink-2);
  background:rgba(34,211,197,.08); padding:.1em .4em; border-radius:5px;
  overflow-wrap:anywhere; word-break:break-word; direction:ltr; unicode-bidi:isolate; display:inline-block}
hr{border:0; border-block-start:1px solid var(--line); margin-block:clamp(40px,6vw,64px)}

/* ---- masthead ---- */
header.top{border-block-end:1px solid var(--line); position:sticky; top:0; z-index:5;
  background:color-mix(in oklab,var(--bg) 88%, transparent); backdrop-filter:blur(10px)}
.bar{max-width:74ch; margin-inline:auto; padding:14px clamp(18px,4vw,40px);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.wordmark{font-family:var(--disp); font-weight:900; font-size:1.06rem; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; direction:ltr; unicode-bidi:isolate; white-space:nowrap}
.wordmark:hover{color:var(--acc)}
.bar nav{margin-inline-start:auto; display:flex; gap:clamp(12px,2.6vw,22px); flex-wrap:wrap; font-size:.92rem}
.bar nav a{color:var(--ink-3); text-decoration:none}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--acc)}

/* ---- headings ---- */
.hero{padding-block:clamp(44px,8vw,88px) clamp(8px,2vw,16px)}
.eyebrow{font-family:var(--disp); font-weight:500; font-size:.74rem; letter-spacing:.2em;
  color:var(--acc); margin:0 0 14px; text-transform:none}
h1{font-family:var(--disp); font-weight:900; font-size:clamp(1.95rem,5.6vw,3.1rem); line-height:1.08;
  letter-spacing:-.02em; margin:0 0 20px}
h2{font-family:var(--disp); font-weight:700; font-size:clamp(1.24rem,2.8vw,1.58rem);
  letter-spacing:-.01em; margin:0; line-height:1.3}
h3{font-family:var(--disp); font-weight:700; font-size:1.04rem; margin:0 0 6px; line-height:1.4}
.stand{font-size:clamp(1.04rem,1.9vw,1.18rem); color:var(--ink-2); max-width:58ch; margin:0 0 24px}
.lede{color:var(--ink-2); max-width:62ch; margin:0 0 22px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

section{margin-block-start:clamp(46px,7vw,76px); scroll-margin-block-start:76px}
.sec-h{display:flex; align-items:baseline; gap:14px; margin-block-end:10px}
.sec-h::after{content:""; flex:1; height:1px; background:linear-gradient(to left,var(--acc),transparent); opacity:.55}
.sec-sub{color:var(--ink-3); font-size:.94rem; margin:0 0 26px; max-width:62ch}

/* ---- cards ---- */
.cards{display:grid; gap:14px; grid-template-columns:1fr; margin:0; padding:0; list-style:none}
@media (min-width:640px){.cards.two{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:clamp(18px,3vw,24px)}
.card p{color:var(--ink-2); font-size:.96rem; margin:0}
a.card{display:block; text-decoration:none; color:inherit}
a.card:hover{border-color:rgba(34,211,197,.42); background:rgba(34,211,197,.045)}
a.card h3{color:var(--ink)}
a.card:hover h3{color:var(--acc)}
.card-go{display:inline-block; margin-block-start:12px; color:var(--acc); font-size:.9rem; font-weight:600}

/* ---- row list ---- */
.rows{list-style:none; margin:0; padding:0}
.rows li{padding-block:16px; border-block-start:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start}
.rows li:first-child{border-block-start:0}
.rows b{font-weight:600; color:var(--ink); display:block}
.rows span{color:var(--ink-2); font-size:.96rem}
.dot{inline-size:7px; block-size:7px; border-radius:50%; background:var(--acc); margin-block-start:.62em; opacity:.75}
.num{font-family:var(--disp); font-weight:900; font-size:1.5rem; line-height:1; color:var(--ink-4);
  font-variant-numeric:tabular-nums; min-inline-size:1.3ch; text-align:center}

/* ---- OAuth scope card ---- */
.scope{border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:clamp(18px,3vw,24px); margin-block-end:14px}
.scope.optional{border-inline-start:3px solid var(--acc-2)}
.scope-id{display:block; font-family:var(--mono); font-size:.8rem; color:var(--acc);
  background:rgba(34,211,197,.08); border-radius:8px; padding:8px 10px; margin-block-end:14px;
  direction:ltr; unicode-bidi:isolate; overflow-wrap:anywhere; word-break:break-all; line-height:1.5}
.scope-tag{display:inline-block; font-size:.72rem; letter-spacing:.06em; border:1px solid var(--line);
  border-radius:999px; padding:2px 10px; color:var(--ink-3); margin-inline-start:8px; vertical-align:.15em}
.scope-tag.opt{color:var(--ink); border-color:rgba(79,70,229,.6); background:rgba(79,70,229,.16)}
.scope dl{margin:0; display:grid; gap:2px 14px; grid-template-columns:1fr}
@media (min-width:560px){.scope dl{grid-template-columns:max-content 1fr}}
.scope dt{font-family:var(--disp); font-weight:700; font-size:.8rem; letter-spacing:.04em;
  color:var(--ink-3); padding-block-start:10px}
.scope dd{margin:0; color:var(--ink-2); font-size:.96rem; padding-block:2px 8px}
.scope dd:last-child{padding-block-end:0}

/* ---- key/value ---- */
.kv{margin:0; display:grid; gap:0 18px; grid-template-columns:1fr}
@media (min-width:560px){.kv{grid-template-columns:max-content 1fr}}
.kv dt{font-family:var(--disp); font-weight:700; font-size:.82rem; color:var(--ink-3);
  padding-block-start:14px; border-block-start:1px solid var(--line)}
.kv dd{margin:0; color:var(--ink-2); padding-block:14px 12px; overflow-wrap:anywhere}
@media (min-width:560px){.kv dd{border-block-start:1px solid var(--line)}}
@media (max-width:559px){.kv dt{border-block-start:1px solid var(--line)} .kv dd{padding-block:2px 14px}}
.kv dt:first-of-type,.kv dd:first-of-type{border-block-start:0}

/* ---- buttons ---- */
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-block-start:26px}
.btn{display:inline-block; font-family:var(--disp); font-weight:700; font-size:.95rem;
  padding:12px 22px; border-radius:999px; text-decoration:none; border:1px solid transparent}
.btn.primary{background:var(--acc); color:#04140F}
.btn.primary:hover{background:var(--ink); color:var(--bg)}
.btn.ghost{border-color:var(--line); color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--acc); color:var(--acc)}

/* ---- note ---- */
.note{border-inline-start:2px solid var(--acc); padding-inline-start:16px; color:var(--ink-2);
  font-size:.95rem; margin-block:20px}
.note strong{color:var(--ink)}

/* ---- English verbatim block (LTR island) ---- */
.quote-en{direction:ltr; unicode-bidi:isolate; text-align:left;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:clamp(16px,2.6vw,22px); font-size:.94rem; color:var(--ink-2); line-height:1.65;
  font-family:var(--body); margin-block:18px}

/* ---- table of contents ---- */
.toc{border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:clamp(16px,2.6vw,22px); margin-block:28px}
.toc h2{font-size:.82rem; letter-spacing:.14em; color:var(--ink-3); margin-block-end:12px; font-weight:700}
.toc ol{margin:0; padding-inline-start:1.3em; columns:1; font-size:.94rem}
@media (min-width:640px){.toc ol{columns:2; column-gap:28px}}
.toc li{margin-block-end:5px; break-inside:avoid}
.toc a{color:var(--ink-2); text-decoration:none}
.toc a:hover{color:var(--acc); text-decoration:underline}

.meta-line{color:var(--ink-3); font-size:.9rem; margin:0 0 6px}
.ph{color:var(--acc); font-family:var(--mono); font-size:.86em; direction:ltr; unicode-bidi:isolate;
  display:inline-block; overflow-wrap:anywhere}

/* ---- footer ---- */
footer{margin-block-start:clamp(64px,9vw,110px); border-block-start:1px solid var(--line);
  padding-block:32px 44px}
footer .wrap{max-width:74ch}
.foot-nav{display:flex; gap:clamp(12px,2.6vw,22px); flex-wrap:wrap; font-size:.92rem; margin-block-end:20px}
.foot-nav a{color:var(--ink-3); text-decoration:none}
.foot-nav a:hover{color:var(--acc)}
.legal{font-size:.88rem; color:var(--ink-2); margin:0 0 6px; line-height:1.65}
.legal .ph{color:var(--acc)}
.foot-note{font-size:.84rem; color:var(--ink-3); margin:0}

/* ---- a11y / motion ---- */
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}