/* ============================================================================
   content.css — shared styling for R4U Label SEO/content pages
   ----------------------------------------------------------------------------
   Design tokens are COPIED verbatim from landing.html's inline <style> so the
   content pages read as one site with the flagship landing. The landing keeps
   its CSS inline (it is a Lighthouse-100 critical-path page); content pages link
   this file instead — one cacheable stylesheet shared across every guide/solution
   page (vercel.json already sends /css/*.css with a long cache + SWR).
   Pair with /css/a11y.css (skip-link, focus ring, sr-only, reduced-motion).
   ========================================================================== */

/* Self-hosted Heebo — same two woff2 subsets the landing preloads. Split by
   unicode-range exactly as Google serves it, so a Hebrew page never fetches the
   Latin file until a Latin glyph is actually painted. */
@font-face{
  font-family:"Heebo"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/assets/fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:"Heebo"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/assets/fonts/heebo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --navy:#0A1B33; --navy-2:#123C78;
  --brand:#1E60BF; --brand-2:#2B74D9; --brand-ink:#123C78;
  --go:#047857;
  --bg:#EEF3F9; --surface:#FFFFFF; --surface-2:#F3F7FC;
  --ink:#101B2D; --muted:#52627F; --faint:#556279;
  --line:#DFE7F1; --line-2:#CBD8E8;
  --accent:#1E60BF; --accent-soft:rgba(30,96,191,.09);
  --cyan:#06B6D4;
  --shadow:0 24px 60px -22px rgba(15,52,96,.35);
  --shadow-sm:0 10px 26px -14px rgba(15,52,96,.3);
  --r:18px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A1424; --surface:#122036; --surface-2:#0E1930;
    --ink:#E8EFFA; --muted:#A9BDD9; --faint:#7489A8;
    --line:#1F3452; --line-2:#2A4266;
    --accent:#6FA8F5; --accent-soft:rgba(111,168,245,.14);
    --shadow:0 30px 70px -30px rgba(0,0,0,.7);
    --shadow-sm:0 14px 30px -18px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); direction:rtl;
  font-family:"Heebo","Segoe UI","Arial",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.7; overflow-x:hidden;
}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:clamp(1rem,4vw,2.2rem)}
.wrap-narrow{max-width:800px}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.14; letter-spacing:-.012em; text-wrap:balance; font-weight:800}
.eyebrow{font-size:.76rem; font-weight:700; letter-spacing:.16em; color:var(--accent);
  text-transform:uppercase; direction:ltr; display:inline-block}

/* ── top bar (identical to landing) ─────────────────────────────────────── */
.top{position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 97%, transparent); border-bottom:1px solid var(--line)}
@media (min-width:900px) and (hover:hover){
  .top{backdrop-filter:saturate(1.4) blur(10px);
    background:color-mix(in srgb, var(--bg) 82%, transparent)}
}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:900; font-size:1.05rem}
.brand img{height:38px; width:auto; display:block}
.nav-links{display:flex; gap:1.4rem; font-size:.95rem; color:var(--muted); font-weight:600}
.nav-links a:hover{color:var(--accent)}
@media(max-width:760px){ .nav-links{display:none} }
.top-cta{display:flex; align-items:center; gap:.5rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.92rem;
  border-radius:999px; padding:.62rem 1.15rem; cursor:pointer; border:1px solid transparent;
  transition:transform .12s ease, filter .18s ease, background-color .18s, border-color .18s}
.btn:active{transform:translateY(1px)}
.btn-go{background:var(--go); color:#fff; box-shadow:0 12px 26px -12px rgba(16,185,129,.7)}
.btn-go:hover{filter:brightness(1.06)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-light{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.18)}
.btn-lg{font-size:1rem; padding:.8rem 1.5rem}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.crumbs{font-size:.85rem; color:var(--muted); padding-block:1rem .2rem}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0}
.crumbs li{display:flex; gap:.4rem; align-items:center}
.crumbs li:not(:last-child)::after{content:"›"; color:var(--line-2); margin-inline-start:.4rem}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink); font-weight:600}

/* ── page hero (lighter than the landing's split hero) ──────────────────── */
.page-hero{position:relative; color:#E8EFFA; overflow:hidden; border-bottom:1px solid var(--line);
  background:
    radial-gradient(1100px 520px at 85% -20%, rgba(43,116,217,.4), transparent 60%),
    radial-gradient(720px 440px at 5% 120%, rgba(6,182,212,.16), transparent 60%),
    linear-gradient(180deg, var(--navy-2), var(--navy));}
.page-hero .wrap{padding-block:clamp(2.4rem,6vw,4rem)}
.page-hero .eyebrow{color:#93C5FD}
.page-hero h1{font-size:clamp(1.9rem,4.6vw,3rem); font-weight:900; color:#fff; margin-top:.5rem; max-width:20ch}
.page-hero h1 .hl{color:#93C5FD; direction:ltr; unicode-bidi:embed}
.page-hero p.lead{font-size:clamp(1.02rem,1.7vw,1.2rem); color:#C7D8F5; margin:1.1rem 0 1.6rem; max-width:60ch}
.page-hero .cta-row{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.page-hero .trust{margin-top:1.15rem; display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem 1.1rem; color:#A8C1E8; font-size:.9rem}

/* ── content sections ───────────────────────────────────────────────────── */
.section{padding-block:clamp(2.6rem,6vw,4.2rem)}
.section.alt{background:var(--surface-2); border-block:1px solid var(--line)}
.section h2{font-size:clamp(1.5rem,3.2vw,2.05rem); margin-bottom:.4rem}
.section > .wrap > p, .prose p{color:var(--muted); font-size:1.05rem; margin:.7rem 0}
.section-lead{color:var(--muted); font-size:1.1rem; max-width:65ch; margin-bottom:1.6rem}

/* long-form prose block */
.prose{max-width:760px}
.prose h2{margin-top:2.2rem}
.prose h3{font-size:1.2rem; margin-top:1.6rem; margin-bottom:.3rem}
.prose ul,.prose ol{color:var(--muted); font-size:1.05rem; padding-inline-start:1.3rem; margin:.6rem 0}
.prose li{margin:.35rem 0}
.prose strong{color:var(--ink)}
.prose a{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* feature / benefit cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:1.4rem}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.3rem 1.4rem; box-shadow:var(--shadow-sm)}
.card .ic{width:42px; height:42px; border-radius:12px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-size:1.3rem; margin-bottom:.7rem}
.card h3{font-size:1.1rem; margin-bottom:.3rem}
.card p{color:var(--muted); font-size:.98rem; margin:0}

/* numbered how-to steps */
.steps{display:grid; gap:1rem; margin-top:1.4rem; counter-reset:step}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding-block:1.2rem; padding-inline-start:3.6rem; padding-inline-end:1.3rem; position:relative}
.step::before{counter-increment:step; content:counter(step);
  position:absolute; inset-inline-start:1rem; top:1.1rem;
  width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:900; font-size:1.05rem}
.step h3{font-size:1.08rem; margin-bottom:.25rem}
.step p{color:var(--muted); font-size:.98rem; margin:0}

/* comparison table (scrolls on narrow screens) */
.tbl-scroll{overflow-x:auto; margin-top:1.4rem; border:1px solid var(--line); border-radius:var(--r)}
table.tbl{width:100%; border-collapse:collapse; min-width:560px; background:var(--surface); font-size:.98rem}
table.tbl th,table.tbl td{text-align:right; padding:.8rem 1rem; border-bottom:1px solid var(--line)}
table.tbl thead th{background:var(--surface-2); font-weight:800; color:var(--ink); position:sticky; top:0}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl td:first-child{font-weight:700; color:var(--ink); white-space:nowrap}
table.tbl td{color:var(--muted)}

/* inline chip list */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem}
.chip{background:var(--surface); border:1px solid var(--line-2); border-radius:999px;
  padding:.35rem .9rem; font-size:.9rem; font-weight:600; color:var(--ink)}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{max-width:820px; margin-top:1.4rem}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:.2rem .4rem; margin-bottom:.7rem}
.faq summary{cursor:pointer; font-weight:700; padding:.9rem 1rem; list-style:none; position:relative;
  padding-inline-end:2.4rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; inset-inline-end:1rem; top:.85rem;
  font-size:1.3rem; color:var(--accent); font-weight:700}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted); padding:0 1rem 1rem; margin:0}

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-band{background:linear-gradient(120deg,var(--brand),var(--cyan)); color:#fff; text-align:center}
.cta-band .wrap{padding-block:clamp(2.4rem,5vw,3.4rem)}
.cta-band h2{color:#fff; font-size:clamp(1.4rem,3vw,2rem)}
.cta-band p{color:rgba(255,255,255,.92); margin:.6rem auto 1.4rem; max-width:52ch}
.cta-band .btn-go{background:#fff; color:var(--brand-ink)}
.cta-band .btn-go:hover{filter:none; background:#F1F6FF}

/* related / internal links */
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.9rem; margin-top:1.3rem}
.related a{display:block; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:1rem 1.1rem; font-weight:600}
.related a:hover{border-color:var(--accent); color:var(--accent)}
.related a span{display:block; color:var(--muted); font-weight:400; font-size:.9rem; margin-top:.2rem}

/* ── footer (identical to landing) ──────────────────────────────────────── */
footer{background:var(--surface); border-top:1px solid var(--line); padding-block:2.2rem; margin-top:1rem}
footer .wrap{display:flex; flex-direction:column; gap:.7rem; align-items:center; text-align:center; color:var(--muted); font-size:.92rem}
footer a:hover{color:var(--accent)}
footer .brand{font-size:1rem}
.seo-note{max-width:900px; margin:1.2rem auto 0; color:var(--faint); font-size:.8rem; line-height:1.6; text-align:center}