/* Shared styles for the guides pages (/guides/...). Same tokens as index.html. */
:root{
  --bg:#090a0c; --card:#111214; --line:#2a2c31; --line-hi:#4a4b50;
  --text:#fff; --muted:#a9abb2; --faint:#8b8d95;
  --iris:#5683da; --iris-text:#8aa9ee; --btn:#3d68c6; --btn-hi:#4a76d8;
  --ember-text:#ff9d7e; --err:#ff8a8a;
  --glow-a:rgba(86,131,218,.45); --glow-b:rgba(255,137,100,.32);
  --radius:18px;
  --font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{--bg:#f6f6f8; --card:#fff; --line:#e1e2e6; --line-hi:#b9bbc3; --text:#0b0c0f; --muted:#4b4e57; --faint:#62656f;
    --iris-text:#2f58b4; --btn:#3560c0; --btn-hi:#2b52aa; --ember-text:#b3401c; --err:#b42318;
    --glow-a:rgba(86,131,218,.30); --glow-b:rgba(255,137,100,.26); color-scheme:light}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.7 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--iris-text);outline-offset:3px;border-radius:10px}
.wrap{width:100%;max-width:760px;margin-inline:auto;padding-inline:20px}
.wrap.wide{max-width:1040px}
.glow{position:absolute;inset:0 0 auto;height:420px;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 55% at 80% 0%,var(--glow-a),transparent 70%),radial-gradient(50% 45% at 10% 10%,var(--glow-b),transparent 70%)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none}
.brand svg{width:32px;height:32px;flex:none}
.nav{display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:99px;text-decoration:none;color:var(--muted);font-weight:600;font-size:15px}
.nav a[aria-current]{color:var(--text);background:var(--card);border:1px solid var(--line)}
.brand span,.nav a{white-space:nowrap}
/* phones: the name and three nav links don't fit on one line, so the nav moves to a second row */
@media (max-width:440px){header.top{flex-wrap:wrap;row-gap:6px;padding-bottom:8px}.nav{width:100%;gap:2px;margin-inline-start:-10px}.nav a{padding:8px 10px}}

/* guides index */
.page-title{margin:20px 0 6px;font-size:clamp(30px,8vw,44px);line-height:1.15}
.page-lead{margin:0 0 24px;color:var(--muted);font-size:18px}
.grid{display:grid;gap:16px;padding-bottom:28px}
@media (min-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}
.post{display:flex;flex-direction:column;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);overflow:hidden;text-decoration:none}
.post:hover{border-color:var(--line-hi)}
.thumb{position:relative;aspect-ratio:16/9;background:#000}
.thumb img{width:100%;height:100%;object-fit:cover}
.dur{position:absolute;bottom:8px;left:8px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.8);color:#fff;font-size:13px;font-weight:600;direction:ltr}
.post .body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.post h2{margin:0;font-size:20px;line-height:1.35}
.post p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.meta{color:var(--faint);font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{padding:1px 10px;border-radius:99px;border:1px solid var(--line);font-size:13px;color:var(--muted)}

/* banner to the learning path (/learn/) at the top of the guides index */
.learn-cta{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:16px 18px;border-radius:var(--radius);border:1px solid var(--iris);
  background:linear-gradient(135deg,rgba(86,131,218,.16),rgba(255,137,100,.10));text-decoration:none}
.learn-cta:hover{border-color:var(--iris-text)}
.learn-cta .ic{flex:none;font-size:30px;line-height:1}
.learn-cta b{display:block;font-size:19px;line-height:1.35}
.learn-cta span span{color:var(--muted);font-size:16px;line-height:1.5}
.learn-cta .go{flex:none;margin-inline-start:auto;font-size:22px;font-weight:700;color:var(--iris-text)}

/* article */
.crumbs{font-size:14px;color:var(--faint);margin-top:8px}
.crumbs a{color:var(--muted)}
article h1{margin:10px 0 8px;font-size:clamp(28px,7.4vw,40px);line-height:1.2}
article .lead{font-size:19px;color:var(--muted);margin:0 0 18px}
article h2{margin:30px 0 8px;font-size:23px;line-height:1.3}
article h3{margin:20px 0 6px;font-size:19px}
article p{margin:0 0 14px}
article ol,article ul{margin:0 0 16px;padding-inline-start:24px}
article li{margin-bottom:8px}
article code{direction:ltr;unicode-bidi:isolate;padding:1px 6px;border-radius:6px;background:var(--card);border:1px solid var(--line);font-size:.92em}
article blockquote{margin:0 0 16px;padding:12px 16px;border-inline-start:4px solid var(--iris);background:var(--card);border-radius:10px;color:var(--muted)}
.box{margin:0 0 16px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.box b:first-child{display:block;margin-bottom:4px}
.facts{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.facts li{margin:0;padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}

/* video (click-to-load, nothing from YouTube loads before the tap except the thumbnail) */
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:14px;overflow:hidden;background:#000;cursor:pointer;margin:0 0 8px}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.92}
.yt .play{position:absolute;inset:0;margin:auto;width:76px;height:54px;border-radius:14px;background:#e02020;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.yt .play::after{content:"";border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;margin-left:4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-note{margin:0 0 18px;font-size:14px;color:var(--faint)}
.chapters{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:4px}
.chapters li{margin:0}
.chapters a{display:flex;gap:12px;padding:8px 10px;border-radius:10px;text-decoration:none}
.chapters a:hover{background:var(--card)}
.chapters time{flex:none;min-width:48px;color:var(--iris-text);font-weight:700;direction:ltr;text-align:end}

/* buttons, links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border:0;border-radius:14px;
  background:var(--btn);color:#fff;font:inherit;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--btn-hi)}
.btn[disabled]{opacity:.65;cursor:wait}
.link{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line-hi);font-weight:600;text-decoration:none}
.link:hover{border-color:var(--iris)}
.links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}

/* sign-up box (inline + bottom sheet) */
.signup{margin:30px 0;padding:18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);scroll-margin-top:16px}
.signup h2{margin:0 0 4px;font-size:21px}
.signup p{margin:0 0 12px;color:var(--muted)}
.row{display:flex;flex-direction:column;gap:10px}
@media (min-width:560px){.row{flex-direction:row}.row .btn{flex:none}}
.signup input[type=email]{width:100%;min-height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line-hi);background:var(--bg);color:var(--text);font:inherit;font-size:17px;text-align:left}
.signup input[type=email]::placeholder{color:var(--faint);text-align:right}
.signup input[type=email]:focus{outline:none;border-color:var(--iris);box-shadow:0 0 0 3px rgba(86,131,218,.35)}
.msg{margin:10px 0 0;font-size:15px;color:var(--err)}
.msg:empty{display:none}
.privacy{margin:10px 0 0!important;font-size:13px;color:var(--faint)!important}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

.sheet{position:fixed;inset-inline:0;bottom:0;z-index:50;padding:0 12px calc(12px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .35s ease}
.sheet.open{transform:none}
.sheet .signup{margin:0 auto;max-width:620px;box-shadow:0 -10px 40px rgba(0,0,0,.35);position:relative;padding-top:16px}
.sheet .close{position:absolute;top:8px;left:8px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:24px;cursor:pointer}
.sheet .signup h2{padding-inline-end:0;padding-inline-start:0;margin-left:36px}

.more{display:grid;gap:10px;margin:0 0 20px}
.more a{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-decoration:none}
.more img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:none}
.more span{font-weight:600;line-height:1.4}

footer{padding-block:12px 36px;color:var(--faint);font-size:14px;display:flex;flex-wrap:wrap;gap:6px 16px}
footer a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}