/* ============================================================================
   LEGAL MIND — LOCKED BRAND STYLESHEET
   ----------------------------------------------------------------------------
   Extracted from the live published series and reorganised WITHOUT any visual
   change. Source of truth:
     https://tsahinim.github.io/legal-mind-claude-guides/skills/assets/site.css
     https://tsahinim.github.io/legal-mind-claude-guides/assets/hub.css
   Captured: 2026-08-01

   RULE: every future Legal Mind guide links THIS file. Do not fork it, do not
   re-derive colors, do not "improve" a value locally. A guide that needs a new
   component adds it here first, once, for everyone.

   What changed vs. the live file (all non-visual):
     - duplicate .shot-legend / .shot-caption blocks merged (cascade preserved)
     - grouped and commented; token drift between site.css and hub.css unified
       on the site.css values (max delta was 1 hex digit on --line)
     - added --font-head / --font-body tokens holding the exact same stacks
     - added .comparison-list, which the published guide 1 uses but the live
       stylesheet never defined (see BRAND NOTE at the bottom)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS — the brand. Nothing below invents a color.
   ------------------------------------------------------------------------ */
:root{
  /* core identity */
  --navy:#0d2740;        /* headings, brand dark, hero background          */
  --navy2:#173e57;       /* reserved secondary dark (currently unused)     */
  --teal:#11736d;        /* primary action colour: links, buttons, markers */
  --cyan:#2bc0b7;        /* accent on dark backgrounds only                */

  /* semantic — each colour means one kind of content, never decoration */
  --orange:#b84a21;      /* numbering, focus, knowledge-check              */
  --gold:#b48a38;        /* legal example                                  */
  --red:#b3263b;         /* warning + screenshot annotation                */
  --green:#2f7b52;       /* confirmation / success                         */

  /* surface */
  --ink:#1d2b34;
  --muted:#607178;
  --bg:#f4f8f7;
  --paper:#fff;
  --line:#d7e2df;
  --soft:#e9f4f2;

  /* type */
  --font-head:Georgia,"Times New Roman",serif;
  --font-body:Arial,"Noto Sans Hebrew",sans-serif;

  /* geometry */
  --shadow:0 16px 40px rgba(13,39,64,.10);
  --width:1220px;
}

/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.72}
img{max-width:100%;height:auto}
a{color:inherit}

/* RTL isolation — every Latin term in the copy is wrapped in <bdi dir="ltr"> */
bdi[dir=ltr],[dir=ltr]{unicode-bidi:isolate}

/* ---------------------------------------------------------------------------
   3. NAVIGATION CHROME
   ------------------------------------------------------------------------ */
.skip{position:fixed;top:-80px;right:16px;z-index:100;background:#fff;
  border:2px solid var(--teal);border-radius:9px;padding:10px 14px;font-weight:800}
.skip:focus{top:10px}

.backbar{position:sticky;top:0;z-index:50;min-height:44px;
  border-bottom:1px solid #bdd5d2;background:#dcefee;padding:9px 14px;text-align:center}
.backbar a{color:var(--teal);font-size:14px;font-weight:800;text-decoration:none}
.backbar a:before{content:"→";margin-left:7px}

.bottom-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
.guide-nav{display:none}   /* legacy, kept so old markup stays hidden */

/* ---------------------------------------------------------------------------
   4. LOGO / MASTHEAD  — assets/brand/legal-mind-logo.webp
   Lightbulb with a teal node-network inside, navy outline, LEGAL MIND wordmark
   (the A and the I are teal). Never recolour, never redraw, never substitute
   with text on a page that has room for the mark.
   ------------------------------------------------------------------------ */
.site-header{background:#fff;border-bottom:1px solid var(--line);padding:12px 28px}
.site-header-inner{max-width:var(--width);margin:auto;display:flex;
  align-items:center;justify-content:space-between;gap:18px}
.logo-wrap{display:flex;align-items:center;gap:14px}
.hub-logo-full{display:block;width:126px;height:auto;object-fit:contain;flex:0 0 auto}
.hub-chip{align-self:center;background:var(--soft);color:var(--teal);
  padding:8px 13px;border-radius:999px;font-weight:900;font-size:13px}
@media(max-width:820px){
  .site-header{padding:10px 13px}
  .hub-logo-full{width:108px}
  .logo-wrap{gap:9px}
  .hub-chip{font-size:11px}
}

/* CANONICAL brand bar — this is the pattern to copy for a new series.
   A centred white bar carrying the logo, placed directly after .backbar and
   before .hero. It appears on EVERY page of the series: the guide center and
   each guide. 130px is ~15% smaller than the .hub-logo-full above, so the bar
   does not swell. Asset: assets/brand/legal-mind-logo-tight.png
   alt (fixed): לוגו Legal Mind - נורה מעל שם המותג */
.skills-brand{background:#fff;border-bottom:1px solid var(--line);
  padding:11px 18px;text-align:center}
.skills-logo{display:inline-block;width:130px;height:auto;object-fit:contain}
@media(max-width:610px){.skills-logo{width:110px}}

/* ---------------------------------------------------------------------------
   5. GUIDE PAGE — hero, layout, sections
   ------------------------------------------------------------------------ */
.hero,.layout,.center-main,.center-brand{width:min(100%,var(--width));margin-inline:auto}
.hero{display:grid;gap:18px;padding:26px 18px 24px}
.eyebrow{margin:0 0 7px;color:var(--teal);font-size:13px;font-weight:900;letter-spacing:.03em}
.hero h1,.center-hero h1{margin:0 0 10px;color:var(--navy);font-family:var(--font-head);
  font-size:clamp(1.95rem,5.2vw,2.85rem);line-height:1.18}
.hero-copy{max-width:82ch;color:var(--muted);font-size:1.06rem}

/* the four-fact strip: תוצר למידה / ידע מוקדם / מבנה / זמן משוער */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:0}
.facts div{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:12px}
.facts dt{color:var(--teal);font-size:12px;font-weight:900}
.facts dd{margin:2px 0 0;color:var(--navy);font-weight:700}

.layout{display:grid;grid-template-columns:286px minmax(0,1fr);gap:28px;padding:8px 14px 60px}
.surface{overflow:hidden;border:1px solid var(--line);border-radius:18px;
  background:var(--paper);box-shadow:0 9px 28px rgba(13,39,64,.06)}

.guide-section{scroll-margin-top:72px;padding:26px 22px}
.guide-section+.guide-section{border-top:1px solid var(--line)}
.section-number,.sec-num{display:block;margin:0 0 4px;color:var(--teal);
  font-size:26px;font-weight:900;letter-spacing:.02em;line-height:1.1}
.section-number::after,.sec-num::after{content:"."}
.guide-section h2,.sec-title{margin:0 0 14px;color:var(--navy);font-family:var(--font-head);
  font-size:clamp(1.5rem,3.5vw,2rem);line-height:1.25}
.guide-section h3,.sec-body h3{margin:22px 0 8px;color:var(--navy);font-size:1.15rem}
.guide-section h4{margin:19px 0 7px;color:var(--teal);font-size:1.04rem}
.guide-section h5{margin:16px 0 6px;color:var(--navy);font-size:.98rem}
.guide-section p,.sec-body p{margin:0 0 13px}
.guide-section ul,.guide-section ol,.sec-body ul,.sec-body ol{padding-right:25px}
.guide-section li,.sec-body li{margin:6px 0}

.major-subsection{margin:28px -22px 14px!important;border-right:6px solid var(--orange);
  background:#f7faf9;padding:13px 18px;color:var(--navy)!important;font-size:1.28rem!important}
.source-emphasis{border:1px solid var(--line);border-right:5px solid var(--gold);
  border-radius:12px;background:#fffaf0;padding:13px 15px;font-weight:700}

/* ---------------------------------------------------------------------------
   6. TABLE OF CONTENTS
   ------------------------------------------------------------------------ */
.desktop-toc{order:-1;position:sticky;top:64px;align-self:start;border:1px solid var(--line);
  border-radius:16px;background:var(--paper);padding:16px;
  box-shadow:0 8px 24px rgba(13,39,64,.06);max-height:calc(100vh - 84px);overflow:auto}
.desktop-toc h2{margin:0 0 10px;color:var(--navy);font-size:1rem}
.desktop-toc ol{margin:0;padding:0;list-style:none}
.desktop-toc li+li{border-top:1px solid #edf1f0}
/* not flex: a flex row turns every <bdi> in the title into its own column,
   so a wrapped chapter name no longer lines up under itself. the number is
   positioned instead, which gives a proper hanging indent. */
.desktop-toc a{display:block;position:relative;padding:8px 2px;
  padding-inline-start:32px;color:var(--teal);
  font-size:14px;text-decoration:none;line-height:1.4}
.desktop-toc a span:first-child{position:absolute;inset-inline-start:2px;top:8px;
  font-weight:900}
.desktop-toc a[aria-current=location]{color:var(--orange);font-weight:900}
.mobile-toc{display:none}

/* ---------------------------------------------------------------------------
   7. CONTENT BOXES — one class per meaning. Colour IS the meaning.
      .info / .tip        teal   — explanation, distinction
      .recommendation     teal   — "the professional way to do it"
      .warning / .warn    red    — risk, do-not
      .legal-example      gold   — a worked example from legal practice
      .knowledge-check    orange — self-test before moving on
   ------------------------------------------------------------------------ */
.callout,.content-box{margin:20px 0;border-radius:14px;padding:16px 18px}
.callout.tip,.content-box.info,.content-box.recommendation{
  border-right:5px solid var(--teal);background:#edf7f6}
.callout.warn,.content-box.warning{border-right:5px solid var(--red);background:#fff4f2}
.content-box.legal-example{border-right:5px solid var(--gold);background:#fff9ee}
.content-box.knowledge-check{border-right:5px solid var(--orange);background:#fff7f0}
.callout-label{display:block;margin-bottom:6px;color:var(--navy);font-weight:900}

/* every .legal-example body follows: קלט / תוצר / עצירה / סיכון */

/* ---------------------------------------------------------------------------
   8. LISTS, STEPS, CHECKLISTS, CARDS
   ------------------------------------------------------------------------ */
.bullets{padding-right:24px}

.steps{counter-reset:step;list-style:none!important;padding:0!important}
.steps li{position:relative;margin:11px 0;padding:12px 50px 12px 12px;
  border:1px solid var(--line);border-radius:12px;background:#fbfdfd}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;
  right:10px;top:10px;display:grid;place-items:center;width:28px;height:28px;
  border-radius:8px;background:var(--teal);color:#fff;font-weight:900}

.checklist{list-style:none!important;padding:0!important}
.checklist li{position:relative;padding:8px 36px 8px 8px;border-bottom:1px solid #edf1f0}
.checklist li:before{content:"✓";position:absolute;right:8px;color:var(--teal);font-weight:900}

.risk-grid,.cards,.decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.risk-card,.card,.decision-card{border:1px solid var(--line);border-radius:14px;
  background:#fbfdfd;padding:15px}
.risk-card.green{border-top:5px solid var(--green)}
.risk-card.yellow{border-top:5px solid var(--gold)}
.risk-card.red{border-top:5px solid var(--red)}

/* NEW — used by the published guide 1 but never defined in the live CSS.
   Styled to match .card so it reads as part of the same family. */
.comparison-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.comparison-list>[role=listitem]{border:1px solid var(--line);border-radius:14px;
  background:#fbfdfd;padding:15px}
.comparison-list>[role=listitem]>strong{display:block;margin-bottom:5px;color:var(--navy)}
.comparison-list>[role=listitem]>p{margin:0;color:var(--ink)}
@media(max-width:820px){.comparison-list{grid-template-columns:1fr}}

.workbook{border:1px dashed #8fb8b4;border-radius:16px;background:#f7fbfa;padding:18px;margin:18px 0}
.prompt-box{border:1px solid var(--line);border-radius:14px;background:#f7faf9;padding:16px}
.status{display:inline-block;border-radius:999px;background:var(--soft);color:var(--teal);
  padding:5px 9px;font-size:12px;font-weight:900}

/* ---------------------------------------------------------------------------
   9. SCREENSHOTS + ANNOTATION
      Frame the shot, place a red rectangle by percentage, badge it with a
      number, then explain every number in an ordered legend underneath.
      Percentages (not pixels) so the annotation survives any screen width.
   ------------------------------------------------------------------------ */
.shot{margin:20px auto}
/* the frame must NOT clip: a marker badge sits half outside its box by design,
   and overflow:hidden shaved every badge on a box near an edge. the rounding
   moves to the image itself, which is the only thing that needed clipping. */
.shot-frame{position:relative;overflow:visible;border:1px solid var(--line);
  border-radius:14px;background:#eef3f3;box-shadow:0 8px 24px rgba(13,39,64,.08)}
.shot-frame img{display:block;width:100%;height:100%;object-fit:contain;border-radius:13px}

.shot-target{position:absolute;z-index:2;border:3px solid var(--red);border-radius:9px;
  background:rgba(198,48,48,.07);
  box-shadow:0 0 0 2px rgba(255,255,255,.82),0 2px 9px rgba(13,39,64,.24);
  pointer-events:none}
.shot-target.is-circle{border-radius:999px}
.shot-target-badge{position:absolute;top:0;left:0;z-index:3;display:grid;place-items:center;
  width:26px;height:26px;border:2px solid #fff;border-radius:50%;background:var(--red);
  color:#fff;font-size:14px;font-weight:900;line-height:1;
  box-shadow:0 2px 8px rgba(13,39,64,.35);transform:translate(-45%,-45%)}
.shot-target.badge-right>.shot-target-badge{right:0;left:auto;transform:translate(45%,-45%)}
.shot-target-badge.badge-offset-left{top:50%;left:-18px;transform:translate(-50%,-50%)}
/* keeps the number inside the frame when the box hugs an edge — the frame
   clips overflow, so a corner badge that sticks out would come back cut */
.shot-target.badge-inside>.shot-target-badge{top:50%;left:auto;right:7px;transform:translate(0,-50%)}
.shot-target.badge-inside-left>.shot-target-badge{top:50%;left:7px;right:auto;transform:translate(0,-50%)}
.shot-target.badge-outside-left>.shot-target-badge{top:50%;left:0;right:auto;transform:translate(-115%,-50%)}
/* mirror of the above, for a target that hugs the right edge */
.shot-target.badge-outside-right>.shot-target-badge{top:50%;right:0;left:auto;transform:translate(115%,-50%)}
/* number above the box, centred - for a marked word on a dense single line
   where any corner placement would land on the word itself */
.shot-target.badge-above>.shot-target-badge{top:0;left:50%;right:auto;transform:translate(-50%,-118%)}
.shot-target.badge-below>.shot-target-badge{top:100%;left:50%;right:auto;transform:translate(-50%,18%)}

/* merged from two duplicate live rules — cascade result preserved exactly */
.shot-caption{margin:10px 0 6px;color:var(--muted);font-size:.92rem;
  font-weight:700;line-height:1.65}
.shot-legend{list-style:none;margin:9px 0 0;padding:0;color:var(--muted);font-size:14px}
.shot-legend-num{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.shot-legend-num li{position:relative;padding-inline-start:31px;
  color:var(--ink);font-size:.92rem;line-height:1.6}
/* the legend number is drawn as the same red badge that marks the screenshot,
   so the eye pairs them without effort. it is positioned, not a flex child —
   a flex child would split the rest of the sentence into columns wherever it
   contains a <bdi> or an emphasised word. */
.shot-legend-num>li>strong:first-child{position:absolute;inset-inline-start:0;top:2px;
  display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--red);color:#fff;font-size:12.5px;font-weight:900;line-height:1}

/* --- PRODUCTION-ONLY: reserved screenshot slot -----------------------------
   Lets a guide be written and laid out before a single screenshot exists.
   Occupies the real space the image will occupy, and carries the shooting
   brief inside it. Swapping in the real image is then mechanical.

   MUST NEVER REACH A READER. The publish QA fails if .shot-pending survives
   in any file being released. The stripes and the "לא לפרסום" tag exist so a
   leftover is impossible to miss on screen.
   ------------------------------------------------------------------------ */
.shot-pending{position:relative;display:grid;place-items:center;min-height:200px;
  border:2px dashed #8fb8b4;border-radius:14px;padding:20px 18px 18px;
  background:repeating-linear-gradient(135deg,#f7fbfa,#f7fbfa 14px,#eef6f5 14px,#eef6f5 28px)}
.shot-pending:before{content:"לא לפרסום";position:absolute;top:-11px;right:16px;
  border-radius:999px;background:var(--orange);color:#fff;
  padding:3px 11px;font-size:11px;font-weight:900;letter-spacing:.02em}
.shot-pending-id{position:absolute;top:-11px;left:16px;border-radius:999px;
  background:var(--navy);color:#fff;padding:3px 11px;font-size:11px;font-weight:900;
  direction:ltr}
.shot-pending-body{width:100%;max-width:520px;text-align:right}
.shot-pending-title{margin:0 0 12px;color:var(--navy);font-family:var(--font-head);
  font-size:1.12rem;line-height:1.35}
.shot-pending-body dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0}
.shot-pending-body dt{color:var(--teal);font-size:13px;font-weight:900;white-space:nowrap}
.shot-pending-body dd{margin:0;color:var(--ink);font-size:14px;line-height:1.6}
.shot-pending-body dd code{direction:ltr;display:inline-block;background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:1px 7px;
  font:13px/1.5 Consolas,monospace}
@media(max-width:640px){
  .shot-pending{min-height:160px;padding:18px 14px 14px}
  .shot-pending-body dl{grid-template-columns:1fr;gap:2px}
  .shot-pending-body dt{margin-top:7px}
}

/* legacy inline marker, superseded by .shot-target-badge — do not use in new guides */
.mk{display:inline-grid;place-items:center;min-width:25px;height:25px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:900}
.mk-tag{font-weight:800}

@media(max-width:640px){
  .shot-target{border-width:2px;border-radius:6px;
    box-shadow:0 0 0 1px rgba(255,255,255,.86),0 1px 5px rgba(13,39,64,.24)}
  .shot-target-badge{width:20px;height:20px;border-width:1.5px;font-size:11px}
  .shot-target-badge.badge-offset-left{left:-13px}
}

/* ---------------------------------------------------------------------------
   10. TABLES
       CANONICAL: .tbl-wrap > table.tbl  (light teal header) — this is what the
       published guides use. .table-wrap is defined but unused; keep it only so
       stray legacy markup doesn't break. Never mix the two in one guide.
   ------------------------------------------------------------------------ */
.tbl-wrap{overflow-x:auto;margin:18px 0}
.tbl{width:100%;border-collapse:collapse;background:#fff}
.tbl th,.tbl td{border:1px solid var(--line);padding:10px;vertical-align:top;text-align:right}
.tbl th{background:#e9f4f2;color:var(--navy)}
.guide-section .tbl th{white-space:nowrap}
.guide-section .tbl td:empty{min-width:54px;height:40px;background:#fbfdfd}
@media(max-width:820px){.guide-section .tbl{min-width:620px}}

/* legacy alternative — dark navy header + zebra rows. Unused. */
.table-wrap{overflow-x:auto;margin:16px 0}
.table-wrap table{border-collapse:collapse;width:100%;font-size:.9rem}
.table-wrap th{background:var(--navy);color:#fff;padding:9px 10px;text-align:right;font-weight:700}
.table-wrap td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.table-wrap tr:nth-child(even) td{background:var(--soft)}

/* ---------------------------------------------------------------------------
   11. CODE — always forced LTR inside the RTL page
   ------------------------------------------------------------------------ */
pre,.code{direction:ltr;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;
  border:1px solid #263b4a;border-radius:13px;background:#0f2536;color:#ecf8f7;
  padding:15px;font:14px/1.55 Consolas,monospace}

/* ---------------------------------------------------------------------------
   12. COPY BLOCK — reader-facing prompt / checklist with a copy button
        (behaviour lives in assets/site.js)
   ------------------------------------------------------------------------ */
.copy-block{margin:18px 0;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px}
.copy-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:10px}
.copy-heading strong{font-size:.95rem;color:var(--navy)}
.copy-button{background:var(--teal);color:#fff;border:0;border-radius:8px;padding:7px 14px;
  font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;white-space:nowrap}
.copy-button:hover{background:var(--navy)}
.copy-button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.copy-block .copy-body,.copy-block>p[id]{margin:0;background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--ink);
  font-size:.95rem;line-height:1.7;white-space:pre-wrap}
.copy-block .copy-body.ltr{direction:ltr;text-align:left;
  font-family:ui-monospace,Consolas,monospace;font-size:.88rem}
.copy-block ol,.copy-block ul{margin:0;padding-inline-start:22px;background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding-block:12px;padding-inline-end:14px;
  color:var(--ink);font-size:.95rem;line-height:1.75}
.copy-block>div[id]{background:var(--paper);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px}
.copy-block>div[id]>p{margin:0 0 8px}
.copy-block>div[id] ol,.copy-block>div[id] ul{border:0;padding-block:0;background:transparent}
.copy-block>div.copy-plain{white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;
  font-size:.85rem;line-height:1.75;direction:rtl;text-align:right;overflow-x:auto}
.copy-status{display:block;margin-top:8px;min-height:1.1em;font-size:.82rem;
  font-weight:700;color:var(--green)}
@media(max-width:700px){
  .copy-heading{align-items:flex-start;flex-direction:column}
  .copy-button{width:100%}
}

/* ---------------------------------------------------------------------------
   13. BUTTONS
   ------------------------------------------------------------------------ */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  border:1px solid var(--teal);border-radius:10px;padding:10px 15px;color:var(--teal);
  font-weight:900;text-decoration:none}
.button.primary{background:var(--teal);color:#fff}

/* ---------------------------------------------------------------------------
   14. GUIDE CENTER — מרכז המדריכים
       Created only when one subject is too large for a single guide and has to
       be split. A guide center covers ONLY the guides inside its own series.
       There is no "main" center and no hierarchy between centers — several
       centers exist side by side as equals. Another series is referenced in
       prose, never linked as a parent or a child.
   ------------------------------------------------------------------------ */
.center-head{background:#fff}
/* The logo image goes inside .center-brand — see section 4 for .hub-logo-full.
   The bare text wordmark below is the legacy form; do not use it in new work. */
.center-brand{padding:13px 18px;color:var(--navy);font-weight:900}
.center-hero{background:var(--navy);color:#fff;padding:32px 18px 44px;text-align:center}
.center-hero h1{color:#fff}
.center-hero p{max-width:820px;margin:0 auto;color:#dcecef;font-size:1.08rem}
.center-kicker{display:inline-flex;align-items:center;justify-content:center;
  margin:0 auto 18px!important;border:1px solid var(--cyan);border-radius:999px;
  padding:8px 16px;color:#7ce5dd!important;font-size:13px!important;font-weight:900}
.center-subtitle{max-width:900px!important}
.platform-note{max-width:960px!important;margin:20px auto 0!important;
  border:1px solid rgba(124,229,221,.38);border-radius:14px;background:rgba(255,255,255,.06);
  padding:13px 16px;color:#eefafa!important;font-size:.97rem!important;line-height:1.65}
.platform-note strong{color:#86ebe3}
.center-main{padding:38px 14px 64px}

/* מסלול הלימוד — the numbered learning path, one <li> per guide.
   grid-template-columns MUST equal the number of guides in the series.
   This is the one value that legitimately changes between series. */
.learning-path{margin:-24px 0 34px;border:1px solid var(--line);border-radius:20px;
  background:#fff;padding:22px;box-shadow:var(--shadow)}
.learning-path ol{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;
  margin:0;padding:0;list-style:none}
.learning-path li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:12px;background:#fafcfc;padding:10px;font-weight:800}
.learning-path span,.guide-number{display:grid;place-items:center;width:36px;height:36px;
  flex:0 0 36px;border-radius:10px;background:var(--teal);color:#fff;font-weight:900}
.path-note{margin:16px 0 0;padding:14px 16px;background:var(--soft);
  border-inline-start:4px solid var(--teal);border-radius:10px;color:var(--ink);
  font-size:.95rem;line-height:1.7}
.path-note strong{color:var(--navy)}

/* guide cards — 3 per row on desktop regardless of how many guides exist */
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guide-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;
  background:#fff;padding:17px;box-shadow:0 8px 24px rgba(13,39,64,.06);
  border-top:5px solid var(--orange)}
.guide-card h2{margin:13px 0 9px;color:var(--navy);font-size:1.28rem;line-height:1.4}
.guide-card dl{margin:0 0 14px}
.guide-card dl div{border-top:1px solid #e3eae8;padding:9px 0}
.guide-card dt{color:#0d625d;font-size:14px;font-weight:900}
.guide-card dd{margin:2px 0 0;font-size:15px;line-height:1.55}
.guide-card .button{margin-top:auto}

/* ---------------------------------------------------------------------------
   14b. GUIDE CENTER — CANONICAL FORM (owner-approved reference)
        Source: the published guide center of the main series, assets/hub.css.
        Tzahi confirmed this is the look he is happy with. Build every NEW
        guide center from this set. The .center-* classes in 14 above are the
        earlier Skills-series variant, kept working, not to be copied forward.

        Reading rhythm here is looser than inside a guide: 17px / 1.65.
   ------------------------------------------------------------------------ */
.hub-body{font-size:17px;line-height:1.65}

/* navy hero with a faint 52px grid overlay */
.hub-hero{position:relative;overflow:hidden;color:#fff;padding:66px 24px 62px;
  background:linear-gradient(135deg,var(--navy),#102f4b)}
.hub-hero:before{content:"";position:absolute;inset:0;background-size:52px 52px;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)}
.hero-inner{position:relative;max-width:1060px;margin:auto;text-align:center}
.hero-kicker{display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  border:1px solid rgba(43,192,183,.65);background:rgba(43,192,183,.08);
  color:#7ee2dc;padding:7px 14px;font-size:13px;font-weight:900}
.hub-hero h1{margin:20px auto 12px;max-width:900px;font-family:var(--font-head);
  font-size:48px;line-height:1.16}
.hub-hero p{max-width:820px;margin:auto;color:#e0eef1;font-size:20px}

/* status card that floats across the hero edge — the negative margin and the
   132px top padding on <main> are a pair; change one and you must change both */
.progress-box{position:relative;z-index:3;max-width:1040px;margin:28px auto -104px;
  border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);
  padding:18px 20px;box-shadow:var(--shadow)}
.progress-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
.progress-top strong{color:var(--navy)}
.progress-top span{color:var(--muted);font-size:14px}
.progress-track{height:10px;margin-top:11px;border-radius:999px;background:#e6eeec;overflow:hidden}
.progress-fill{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--cyan))}
.hub-main{max-width:var(--width);margin:0 auto;padding:132px 24px 80px}

.section-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px}
.section-head h2{margin:0;color:var(--navy);font-family:var(--font-head);font-size:34px}
.section-head p{margin:0;color:var(--muted);max-width:690px}

/* guide cards — always 3 across on desktop; more guides simply wrap to more
   rows. This is the one thing that legitimately changes per series. */
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hub-card{position:relative;display:flex;flex-direction:column;min-height:330px;
  overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--paper);
  padding:20px;box-shadow:0 8px 25px rgba(13,39,64,.06)}
.hub-card:before{content:"";position:absolute;top:0;right:0;left:0;height:5px;background:var(--teal)}
.hub-card.primary:before{background:var(--orange)}   /* the entry-point guide */
.hub-card.pending:before{background:#aeb9bc}         /* not published yet     */
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-number{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--soft);color:var(--teal);font-weight:900}
.card-status{border-radius:999px;background:#edf8f6;color:var(--teal);
  padding:5px 9px;font-size:12px;font-weight:900}
.card-status.pending{background:#f0f2f2;color:#738186}
.hub-card h3{margin:18px 0 8px;color:var(--navy);font-family:var(--font-head);
  font-size:24px;line-height:1.25}
.hub-card p{margin:0 0 13px;color:var(--muted)}
.card-list{list-style:none;padding:0;margin:0 0 18px}
.card-list li{position:relative;padding:5px 25px 5px 0;font-size:14px}
.card-list li:before{content:"✓";position:absolute;right:0;color:var(--teal);font-weight:900}
.card-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;margin-bottom:14px}
.card-meta span{border:1px solid var(--line);border-radius:8px;background:#fafcfc;
  padding:5px 8px;color:#5f7076;font-size:12px}
.card-btn{display:block;border-radius:10px;background:var(--teal);color:#fff;
  padding:12px;text-align:center;text-decoration:none;font-weight:900}
.card-btn:hover{filter:brightness(.94)}

/* pointing at a DIFFERENT series — the only sanctioned cross-series element.
   It is a described destination, never a parent/child link. */
.skills-band{display:grid;grid-template-columns:1fr 310px;gap:24px;align-items:center;
  margin-top:32px;border:1px solid #cfe1de;border-radius:20px;padding:24px;
  background:linear-gradient(135deg,#eef8f6,#fff)}
.skills-band h2{margin:0 0 8px;color:var(--navy);font-family:var(--font-head);font-size:31px}
.skills-band p{margin:0 0 15px;color:var(--muted)}
.skills-mini{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.skills-mini div{border:1px solid var(--line);border-radius:11px;background:#fff;
  padding:11px;font-size:13px}
.skills-cta{border-radius:16px;background:var(--navy);color:#fff;padding:20px;text-align:center}
.skills-cta strong{display:block;margin-bottom:7px;font-size:22px}
.skills-cta a{display:block;margin-top:14px;border-radius:9px;background:#fff;
  color:var(--navy);padding:11px;text-decoration:none;font-weight:900}

/* the learning path as rotated diamonds */
.path-section{margin-top:32px;border:1px solid var(--line);border-radius:20px;
  background:#fff;padding:24px}
.path-section h2{margin:0 0 6px;color:var(--navy);font-family:var(--font-head);font-size:30px}
.path-section>p{margin-top:0;color:var(--muted)}
.path-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:18px}
.path-step{text-align:center}
.path-diamond{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 11px;
  border:2px solid #b8d5d1;background:#fff;transform:rotate(45deg);
  box-shadow:0 6px 18px rgba(13,39,64,.06)}
.path-diamond span{transform:rotate(-45deg);color:var(--teal);font-weight:900;font-size:20px}
.path-step.done .path-diamond{background:var(--teal);border-color:var(--teal)}
.path-step.done .path-diamond span{color:#fff}
.path-step b{display:block;color:var(--navy);font-size:14px}
.path-step small{color:var(--muted)}

.note-box,.draft-note{margin:22px 0;border-right:6px solid var(--gold);border-radius:14px;
  background:#fffaf0;padding:18px;color:#5d523e}
.note-box{border:1px solid #ead9ac;border-right:6px solid var(--gold)}

/* focus ring — amber, deliberately outside the palette so it never reads as content */
.skip-link{position:absolute;top:-60px;right:16px;z-index:10000;border:2px solid var(--teal);
  border-radius:9px;background:#fff;color:var(--navy);padding:10px 14px;
  font-weight:900;text-decoration:none}
.skip-link:focus{top:10px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #f0a431;outline-offset:3px}

@media(max-width:980px){
  .hub-grid{grid-template-columns:1fr 1fr}
  .skills-band{grid-template-columns:1fr}
  .path-flow{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:650px){
  .hub-body{font-size:16px}
  .hub-hero{padding:48px 16px 54px}
  .hub-hero h1{font-size:34px}
  .hub-hero p{font-size:17px}
  .progress-box{margin-left:10px;margin-right:10px}
  .hub-main{padding:126px 13px 60px}
  .section-head{display:block}
  .section-head h2{font-size:29px}
  .hub-grid{grid-template-columns:1fr}
  .skills-mini{grid-template-columns:1fr}
  .path-flow{grid-template-columns:1fr}
  .path-diamond{width:55px;height:55px}
}

/* ---------------------------------------------------------------------------
   15. FOOTER + SOURCE NOTE
       .source-note always carries a dated currency statement.
   ------------------------------------------------------------------------ */
.source-note{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px}
.center-footer,footer{text-align:center;color:var(--muted);padding:26px 12px}

/* ---------------------------------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------------------------------ */
@media(max-width:1000px){
  .guide-grid{grid-template-columns:repeat(2,1fr)}
  .learning-path ol{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .risk-grid,.cards,.decision-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  .desktop-toc{display:none!important}
  .mobile-toc{display:block;margin:0 14px 14px;border:1px solid var(--line);
    border-radius:12px;background:#fff}
  .mobile-toc summary{padding:12px 14px;font-weight:900;color:var(--navy)}
  .mobile-toc ol{margin:0;border-top:1px solid var(--line);padding:8px 32px 12px 12px}
  .mobile-toc a{display:block;padding:5px 2px;color:var(--teal)}
  .guide-grid{grid-template-columns:1fr}
  .bottom-nav{flex-direction:column}
  .button{width:100%}
  .guide-section{padding:23px 17px}
  .major-subsection{margin:25px -17px 12px!important}
}

/* ---------------------------------------------------------------------------
   17. PRINT
   ------------------------------------------------------------------------ */
@media print{
  .backbar,.desktop-toc,.mobile-toc,.bottom-nav{display:none!important}
  .layout{display:block;padding:0}
  .surface{border:0;box-shadow:none}
  .guide-section{break-inside:avoid}
  .hero{padding:10px 0}
  .center-main{padding:0}
}

/* ============================================================================
   BRAND NOTE — open items, do not silently "fix" on a published guide
   ----------------------------------------------------------------------------
   1. .comparison-list is styled here for the first time. The published guide 1
      currently renders those four cards unstyled. Applying this file to that
      guide WILL change its appearance (for the better). Needs owner approval
      before republishing guide 1.
   2. The Skills guide center still shows a text wordmark inside .center-brand
      instead of the logo image. Owner is fixing it (2026-08-01). Every new
      guide center carries the logo image from day one.
   3. .mk / .mk-tag, .table-wrap, .guide-nav, .risk-grid, .decision-grid,
      .workbook, .prompt-box, .status are retained for backward compatibility
      only. New guides must not use them.

   4. NAMING: the published guide center uses .hero / .guide-card / .guide-grid
      and a bare <main>. Those names already mean something different on a
      guide page, so section 14b renames them .hub-hero / .hub-card / .hub-grid
      / .hub-main / .hub-body. Consequence: this stylesheet cannot be dropped
      onto the existing published center unchanged — that page keeps its own
      hub.css. A NEW guide center uses the .hub-* names from 14b.

   5. Two other series on the site — cowork/ and desktop/ — run a DIFFERENT
      visual system: Frank Ruhl + Assistant Hebrew webfonts, teal #00807F,
      6-10px corners, dark mode, burgundy #7A1233 annotations. Owner decision
      2026-08-01: they are known outliers, not the standard. Do not copy from
      them and do not "harmonise" this file toward them.
   ========================================================================== */

.shot-legend li{display:flex;align-items:flex-start;gap:8px;margin:6px 0}
.shot-legend b{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-size:12px;font-weight:900;font-style:normal;box-shadow:0 1px 3px rgba(13,39,64,.3)}