/* Shoresh — site styles
   Brand: coral (#F26051) + white Hebrew-letter texture from the app, green/sky accents from the UI. */

:root{
  --coral: #f26051;
  --coral-deep: #d9473a;
  --coral-soft: #ffece8;
  --green: #17b078;
  --green-soft: #e2f6ec;
  --sky: #2f8fd6;
  --sky-soft: #e6f2fb;

  --ink: #211b18;
  --text: #2a2320;
  --muted: #7b706a;
  --border: #eee3dc;
  --bg: #fbf6f2;
  --surface: #ffffff;
  --surface-2: #f6efe9;

  /* legacy names used by article / legal pages */
  --blue: var(--coral-deep);
  --surface-soft: var(--surface);
  --surface-translucent: rgba(255,255,255,.7);
  --muted-20: rgba(123,112,106,.2);

  --shadow: 0 14px 40px rgba(70,35,25,.10);
  --shadow-sm: 0 4px 14px rgba(70,35,25,.07);
  --radius: 20px;
  --radius-lg: 28px;
  --container: 1120px;
  --topbar-h: 68px;
  --font: "Nunito", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --coral-soft: #3b231f;
    --green-soft: #17302a;
    --sky-soft: #182734;
    --ink: #0f0d0c;
    --text: #f4ede8;
    --muted: #a99d96;
    --border: #2f2725;
    --bg: #171412;
    --surface: #211c1a;
    --surface-2: #2a2321;
    --surface-translucent: rgba(33,28,26,.7);
    --muted-20: rgba(169,157,150,.22);
    --shadow: 0 14px 40px rgba(0,0,0,.45);
    --shadow-sm: 0 4px 14px rgba(0,0,0,.35);
  }
}

/* Every page is a separate document. Cross-document view transitions (Chrome 126+, Safari 18.2+) keep the
   header in place and crossfade the rest instead of flashing; other browsers just load the page. */
@view-transition{ navigation: auto; }
.topbar{ view-transition-name: topbar; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: .18s; }
@media (prefers-reduced-motion: reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; } }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ margin: 0; line-height: 1.12; letter-spacing: -.015em; font-weight: 800; }
h2{ font-size: clamp(28px, 3.4vw, 38px); }
h3{ font-size: 19px; }
p{ margin: 0; }
.muted{ color: var(--muted); }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip-link{
  position: absolute; left: -9999px; top: 10px; z-index: 9999;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); padding: 10px 12px; border-radius: 12px;
}
.skip-link:focus{ left: 10px; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 12px 22px;
  font: inherit; font-weight: 800; font-size: 15px; line-height: 1;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: var(--coral); color: #fff; }
.btn--primary:hover{ background: var(--coral-deep); }
.btn--ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn--ghost:hover{ background: var(--surface-2); }
.btn--light{ background: #fff; color: var(--coral-deep); }
.btn--light:hover{ background: #ffe9e5; }
.btn--lg{ padding: 15px 26px; font-size: 16px; }

.link{
  appearance: none; border: 0; background: transparent; padding: 0;
  color: var(--coral-deep); font: inherit; font-weight: 700; cursor: pointer;
}
.link:hover{ text-decoration: underline; }

.store-badges{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.store-badges a{ display: inline-flex; border-radius: 10px; transition: transform .1s ease, opacity .15s ease; }
.store-badges a:hover{ transform: translateY(-2px); }
.store-badges img{ height: 48px; width: auto; }

/* ---------- Topbar ---------- */
.topbar{
  position: sticky; top: 0; z-index: 50; height: var(--topbar-h);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar .container{ height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar__left{ display: flex; align-items: center; gap: 12px; }
/* Brand block (icon + two lines) shared by the topbar and the footer: the two lines are one tight
   stack, vertically centred on the icon. */
.topbar__meta, .footer__meta{ display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.topbar__title, .footer__title{ font-weight: 900; font-size: 17px; line-height: 1.15; letter-spacing: -.01em; }
.topbar__subtitle, .footer__sub{ font-size: 12.5px; line-height: 1.2; color: var(--muted); font-weight: 600; }
.topbar__nav{ display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; }
.topbar__nav a{ padding: 8px 12px; border-radius: 999px; color: var(--text); }
.topbar__nav a:hover{ background: var(--surface-2); }
.topbar__right{ display: flex; align-items: center; gap: 10px; }
.topbar__cta{ padding: 10px 18px; color: #fff; }
.topbar__cta:hover{ background: var(--coral-deep); }
.app-icon{ border-radius: 22%; }
.app-icon--sm{ width: 40px; height: 40px; }
@media (max-width: 960px){
  .topbar__nav, .topbar__cta{ display: none; }
  .topbar .menu{ display: block; }
}

/* Hamburger menu (narrow screens only): the nav links plus the download button */
.menu{ display: none; position: relative; }
.menu__btn{
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px; background: var(--coral); color: #fff; user-select: none;
}
.menu__btn::-webkit-details-marker{ display: none; }
.menu[open] .menu__btn{ background: var(--coral-deep); }
.menu__panel{
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px;
  display: grid; gap: 2px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
}
.menu__panel a{ display: block; padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 15px; color: var(--text); }
.menu__panel a:hover{ background: var(--surface-2); text-decoration: none; }
.menu__panel .btn{ margin-top: 6px; text-align: center; color: #fff; }
.menu__panel .btn:hover{ background: var(--coral-deep); }
@media (max-width: 480px){
  .topbar .container{ gap: 8px; }
  .topbar__left{ min-width: 0; }
  .topbar__subtitle{ display: none; }
  .lang__btn span{ display: none; }
  .lang__btn{ padding: 8px 9px; }
  .topbar__cta{ padding: 9px 14px; font-size: 14px; }
}

/* Language switcher */
.lang{ position: relative; }
.lang__btn{
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px; border: 2px solid var(--border);
  font-weight: 800; font-size: 14px; color: var(--text); user-select: none;
}
.lang__btn::-webkit-details-marker{ display: none; }
.lang__btn:hover, .lang[open] .lang__btn{ background: var(--surface-2); }
.lang__menu{
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 170px;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
}
.lang__menu a{ display: block; padding: 9px 12px; border-radius: 10px; font-weight: 700; font-size: 15px; }
.lang__menu a:hover{ background: var(--surface-2); }
.lang__menu a[aria-current="true"]{ color: var(--coral-deep); }
.lang__menu a[aria-current="true"]::after{ content: " ✓"; }

/* ---------- Hero ---------- */
.hero{
  position: relative; overflow: hidden; color: #fff;
  background:
    linear-gradient(160deg, rgba(243,103,86,.86) 0%, rgba(233,80,66,.90) 100%),
    url("pics/background.png") center / cover no-repeat, var(--coral);
}
.hero__inner{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px; align-items: center; padding-top: 72px; padding-bottom: 0;
}
.hero__copy{ padding-bottom: 72px; }
.hero__kicker{
  display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.18); border-radius: 999px; padding: 7px 14px; margin-bottom: 22px;
}
.hero h1{ font-size: clamp(38px, 5.4vw, 64px); font-weight: 900; line-height: 1.02; letter-spacing: -.025em; }
.hero__lead{ margin: 22px 0 30px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; max-width: 34ch; color: rgba(255,255,255,.92); }
.hero__proof{ margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92); }
.hero__proof .stars{ color: #ffd166; letter-spacing: 1px; font-size: 17px; }
.hero__phone{ display: flex; justify-content: center; align-self: end; margin-bottom: -110px; }

.phone{
  width: 330px; max-width: 100%; padding: 12px; border-radius: 56px;
  background: #14110f; box-shadow: 0 30px 60px rgba(80,20,10,.35), inset 0 0 0 2px #3a332f;
}
.phone img{ border-radius: 44px; width: 100%; }
@media (max-width: 900px){
  .hero__inner{ grid-template-columns: 1fr; gap: 24px; padding-top: 56px; text-align: center; }
  .hero__copy{ padding-bottom: 0; }
  .hero__lead{ margin-inline: auto; }
  .hero .store-badges{ justify-content: center; }
  .hero__proof{ justify-content: center; }
  .hero__phone{ margin-bottom: -80px; }
  .hero__proof{ font-size: 14px; }
  .phone{ width: 280px; padding: 10px; border-radius: 48px; }
  .phone img{ border-radius: 38px; }
}

/* ---------- Sections ---------- */
.section{ padding: 88px 0; }
.section--alt{ background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section__head{ max-width: 62ch; margin-bottom: 40px; }
.section__head--center{ margin-inline: auto; text-align: center; }
.section__head--row{ max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.eyebrow{ display: block; color: var(--coral-deep); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.lead{ margin-top: 14px; color: var(--muted); font-size: 18px; }
.pill{
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 4px 10px; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}

/* Features */
.features{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px 28px; box-shadow: var(--shadow-sm);
}
.feature__icon{
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-size: 26px; font-weight: 900; margin-bottom: 18px;
  background: var(--coral-soft); color: var(--coral-deep);
}
.feature--green .feature__icon{ background: var(--green-soft); color: var(--green); }
.feature--sky .feature__icon{ background: var(--sky-soft); color: var(--sky); }
.feature__title{ font-weight: 800; font-size: 19px; margin-bottom: 8px; }
.feature__text{ color: var(--muted); font-size: 15.5px; line-height: 1.5; }
@media (max-width: 900px){ .features{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .features{ grid-template-columns: 1fr; } }

/* Steps */
.steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.step{ position: relative; padding-top: 18px; border-top: 3px solid var(--coral); }
.step__num{ font-size: 13px; font-weight: 900; letter-spacing: .1em; color: var(--coral-deep); margin-bottom: 12px; }
.step h3{ margin-bottom: 8px; }
.step p{ color: var(--muted); font-size: 15.5px; }
@media (max-width: 720px){ .steps{ grid-template-columns: 1fr; gap: 24px; } }

/* Screenshots */
.shots{
  display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 18px;
  overflow-x: auto; padding: 4px 0 18px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.shots::-webkit-scrollbar{ height: 8px; }
.shots::-webkit-scrollbar-thumb{ background: var(--muted-20); border-radius: 999px; }
.shot{ margin: 0; scroll-snap-align: start; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-sm); }
.shot img{ width: 100%; height: auto; display: block; }
@media (max-width: 560px){ .shots{ grid-auto-columns: 78vw; } }

/* About (dark band) */
.about{ background: var(--ink); color: #fff; }
.about__grid{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: start; }
.about h2{ color: #fff; }
.about__head{ display: flex; align-items: center; gap: 18px; }
.about__avatar{ flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--coral), 0 10px 28px rgba(0,0,0,.4); }
@media (max-width: 560px){ .about__avatar{ width: 64px; height: 64px; } }
.about__text{ margin-top: 20px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); }
.about__text + .about__text{ margin-top: 14px; }
.about .eyebrow{ color: #ff9a8e; }
.facts{ display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.facts li{ padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.facts strong{ display: block; font-size: 24px; font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 4px; }
.facts span{ color: rgba(255,255,255,.7); font-size: 15px; }
.facts a{ color: #ff9a8e; font-weight: 700; }
.facts a:hover{ text-decoration: underline; }
@media (max-width: 860px){ .about__grid{ grid-template-columns: 1fr; gap: 32px; } }

/* Articles */
.articles{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.articles--list{ margin-top: 28px; }
/* on text pages (.doc) links are coral + underlined on hover; the cards are links themselves, so undo that */
.doc .article-card, .doc .article-card:hover{ color: var(--text); text-decoration: none; }
.doc .article-card--book, .doc .article-card--book:hover{ color: #fff; }
.doc .article-card__more{ color: var(--coral-deep); }
.doc .article-card--book .article-card__more{ color: #fff; }
.article-card{
  display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.article-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.article-card__tag{ font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.article-card h3{ font-size: 21px; }
.article-card p{ color: var(--muted); font-size: 15.5px; flex: 1; }
.article-card__more{ color: var(--coral-deep); font-weight: 800; }
.article-card--book{
  border: 0; color: #fff;
  background:
    linear-gradient(160deg, rgba(243,103,86,.9), rgba(233,80,66,.94)),
    url("pics/background.png") center / cover no-repeat, var(--coral);
}
.article-card--book .article-card__tag{ color: #fff; background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: 999px; width: fit-content; }
.article-card--book h3, .article-card--book p{ color: #fff; }
.article-card--book p{ color: rgba(255,255,255,.88); }
.article-card--book .article-card__more{ color: #fff; }
@media (max-width: 720px){ .articles{ grid-template-columns: 1fr; } }

/* FAQ */
.faq{ display: grid; gap: 12px; max-width: 800px; margin: 0 auto; }
.faq__item{ background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: clip; }
.faq__q{
  list-style: none; padding: 18px 22px; cursor: pointer; font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__q::-webkit-details-marker{ display: none; }
.faq__q::after{
  content: "+"; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--coral-soft); color: var(--coral-deep);
  font-weight: 900; font-size: 20px; line-height: 1;
}
.faq__item[open] .faq__q::after{ content: "–"; }
.faq__a{ padding: 0 22px 20px; color: var(--muted); font-size: 16px; }
.faq__a p + p{ margin-top: 10px; }

/* CTA band */
.cta{
  position: relative; overflow: hidden; color: #fff; border-radius: var(--radius-lg);
  padding: 56px 40px; text-align: center;
  background:
    linear-gradient(160deg, rgba(243,103,86,.86), rgba(233,80,66,.9)),
    url("pics/background.png") center / cover no-repeat, var(--coral);
}
.cta h2{ color: #fff; font-size: clamp(28px, 3.6vw, 40px); }
.cta p{ margin: 14px auto 28px; max-width: 46ch; font-size: 18px; color: rgba(255,255,255,.9); }
.cta .store-badges{ justify-content: center; }
@media (max-width: 560px){ .cta{ padding: 40px 22px; } }

/* Footer */
.footer{ padding: 40px 0 48px; border-top: 1px solid var(--border); }
.footer__grid{ display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 22px; }
.footer__note{ margin: 0; flex: 1 1 320px; max-width: 62ch; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
@media (min-width: 760px){ .footer__note{ margin-left: auto; flex: 0 1 auto; } }
.footer__brand{ display: flex; align-items: center; gap: 12px; }
.footer__links{ display: flex; align-items: center; gap: 6px 20px; flex-wrap: wrap; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.footer__links a:hover{ color: var(--text); }

/* Cookie consent */
.cookie-banner{
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; margin: 0 auto; max-width: 720px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  padding: 18px 20px; box-shadow: var(--shadow);
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner__inner{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0; }
.cookie-banner p{ font-size: 14.5px; color: var(--muted); max-width: 52ch; }
.cookie-banner p a{ color: var(--coral-deep); font-weight: 700; }
.cookie-banner__actions{ display: flex; gap: 10px; flex: none; }
.cookie-banner .btn{ padding: 10px 18px; font-size: 14px; }
@media (max-width: 560px){
  .cookie-banner__inner{ flex-direction: column; align-items: stretch; }
  .cookie-banner__actions{ justify-content: flex-end; }
}

/* Legacy helpers still used by inner pages */
.card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stars{ color: #ffb340; }

/* ---------- Feature rows (home): heading column + text column ---------- */
.frows{ display: grid; margin-bottom: 72px; border-top: 1px solid var(--border); }
.frow{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; padding: 40px 0; border-bottom: 1px solid var(--border); }
.frow__head h3{ font-size: clamp(22px, 2.4vw, 28px); margin: 0; }
.frow__icons{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.frow__icons span{
  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.frow__icons img{ width: 40px; height: 40px; object-fit: contain; }
.frow__text > p{ color: var(--muted); font-size: 17px; line-height: 1.6; }
.frow__text .link{ display: inline-block; margin-top: 16px; }
.checks{ list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li{ position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; }
.checks li::before{
  content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 900; display: grid; place-items: center;
}
.more__heading{ font-size: 24px; margin-bottom: 20px; }
.more{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.more__item{ background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 20px; }
.more__title{ font-weight: 800; margin-bottom: 6px; }
.more__text{ color: var(--muted); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 900px){
  .frow{ grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .frow__icons span:nth-child(n+5){ display: none; }
  .more{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){ .more{ grid-template-columns: 1fr; } }

/* ---------- Text pages (articles, textbook) ---------- */
.doc{ padding: 48px 0 72px; }
.doc .container{ max-width: 780px; }
.doc--wide .container{ max-width: 900px; }
.doc--legal .container{ max-width: 820px; }
.doc--legal h2{ font-size: 21px; }
.doc--legal h3{ font-size: 17px; }
.doc h1{ font-size: clamp(30px, 4vw, 40px); margin: 6px 0 14px; }
.doc .doc__back{ display: inline-block; margin-bottom: 22px; color: var(--muted); font-size: 14px; font-weight: 700; }
.doc .doc__back:hover{ color: var(--text); text-decoration: none; }
.doc .doc__lead{ color: var(--muted); font-size: 18px; margin: 0 0 10px; max-width: 68ch; }
.doc .doc__date{ color: var(--muted); font-size: 13px; margin-bottom: 32px; }
.doc h2{ font-size: 24px; margin: 40px 0 12px; }
.doc h3{ font-size: 18px; margin: 26px 0 8px; }
.doc p{ margin: 0 0 14px; line-height: 1.65; }
.doc ul, .doc ol{ margin: 0 0 14px; padding-left: 22px; }
.doc li{ margin-bottom: 8px; line-height: 1.6; }
.doc a{ color: var(--coral-deep); }
@media (hover: hover){ .doc a:hover{ text-decoration: underline; } }
.doc table{ width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 15px; }
.doc th, .doc td{ text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.doc th{ color: var(--muted); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.doc td[dir="RTL"], .doc [dir="RTL"]{ direction: rtl; unicode-bidi: isolate; font-size: 1.1em; }
.doc .hebrew{ font-size: 20px; direction: rtl; }
.doc blockquote{ margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--coral); background: var(--coral-soft); border-radius: 0 14px 14px 0; }
.doc blockquote p:last-child{ margin-bottom: 0; }
.doc hr{ border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc .article-cta{ margin-top: 40px; padding: 24px; border-radius: var(--radius-lg); background: var(--coral-soft); border: 1px solid var(--border); }
.doc .article-cta p{ margin: 0 0 14px; }
.doc .article-list{ display: grid; gap: 6px; margin: 0 0 20px; }
.doc .article-list a{ font-weight: 800; }

/* textbook contents */
.toc{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 28px 0 8px; }
.toc__item{
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text) !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
.toc__item:hover{ transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none !important; }
.toc__num{ flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--coral-soft); color: var(--coral-deep); font-weight: 900; }
.toc__icon{ flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; }
.toc__icon img{ width: 36px; height: 36px; object-fit: contain; }
.book__toc a img{ width: 22px; height: 22px; object-fit: contain; flex: none; }
/* alphabet table in the textbook: the app's classic letter images (black glyphs, inverted in dark mode) */
.letter-imgs{ display: inline-flex; gap: 6px; vertical-align: middle; }
.letter-imgs img{ width: 40px; height: 40px; object-fit: contain; }
@media (prefers-color-scheme: dark){ .letter-imgs img{ filter: invert(1); } }
.book__content .tbl [dir="RTL"]{ font-size: 1.25em; }
.toc__title{ font-weight: 800; font-size: 17px; }
@media (max-width: 640px){ .toc{ grid-template-columns: 1fr; } }

/* textbook chapter: sidebar + body */
.doc--book .container{ max-width: var(--container); }
.book{ display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.book__side{ position: sticky; top: calc(var(--topbar-h) + 24px); }
.book__toc{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.book__toc a{ display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.book__toc a span{ color: var(--muted); font-weight: 800; flex: none; }
.book__toc a:hover{ background: var(--surface-2); text-decoration: none; }
.book__toc .is-current a{ background: var(--coral-soft); color: var(--coral-deep); }
.book__toc .is-current a span{ color: var(--coral-deep); }
.book__body{ max-width: 760px; min-width: 0; }
.book__content h2{ font-size: 22px; }
.book__nav{ display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.book__nav-link{ display: grid; gap: 4px; font-weight: 800; color: var(--coral-deep); max-width: 48%; }
.book__nav-link small{ color: var(--muted); font-weight: 600; font-size: 13px; }
.book__nav-link--next{ text-align: right; }
.doc .book__nav-link, .doc .book__nav-link:hover{ text-decoration: none; }
.book__nav-link:hover{ color: var(--coral); }
@media (max-width: 900px){
  .book{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .book__side{ position: static; }
  .book__toc{ display: none; }
}

/* ---------- Reference tables (/tables/) ---------- */
/* wide sky card on the home page and the article index */
.article-card--tables{
  grid-column: 1 / -1; border: 0; color: #fff;
  background:
    linear-gradient(160deg, rgba(47,143,214,.92), rgba(30,110,175,.95)),
    url("pics/background.png") center / cover no-repeat, var(--sky);
}
.article-card--tables .article-card__tag{ color: #fff; background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: 999px; width: fit-content; }
.article-card--tables h3, .article-card--tables .article-card__more{ color: #fff; }
.article-card--tables p{ color: rgba(255,255,255,.88); }
.doc .article-card--tables, .doc .article-card--tables:hover, .doc .article-card--tables .article-card__more{ color: #fff; }

/* index */
.tbl-jump{ display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.tbl-jump a{ padding: 7px 14px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 14px; }
.tbl-jump a:hover{ background: var(--coral-soft); color: var(--coral-deep); text-decoration: none; }
.tbl-section{ margin-top: 44px; }
.tbl-section h2{ display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 24px; }
.tbl-section h2 img{ width: 32px; height: 32px; object-fit: contain; }
.tbl-section__desc{ color: var(--muted); margin: 0; max-width: 72ch; }
.toc--tables{ margin-top: 16px; }
.toc--tables .toc__title{ font-size: 16px; display: block; }
.toc--tables .toc__text{ min-width: 0; }
.toc__sub{ display: block; color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.35; margin-top: 3px; }

/* table page */
.tbl-page__head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tbl-page__head h1{ margin-bottom: 8px; }
.tbl-print{ flex: none; margin-top: 8px; }
.tbl-page__intro{ font-size: 16.5px; line-height: 1.65; margin: 0 0 20px; }
.tbl-page__head{ margin-bottom: 8px; }
.tbl-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.tbl{ width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl caption{ caption-side: top; text-align: left; padding: 14px 16px 8px; font-weight: 800; font-size: 17px; }
.tbl caption .he{ font-size: 24px; }
.tbl caption .tr, .tbl caption .sub{ font-weight: 600; }
.tbl th, .tbl td{ padding: 10px 14px; border-top: 1px solid var(--border); vertical-align: top; text-align: left; }
.tbl thead th{ border-top: 0; color: var(--muted); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); white-space: nowrap; }
.tbl thead th .he{ font-size: 20px; text-transform: none; letter-spacing: 0; }
.tbl thead th .tr, .tbl thead th .sub{ text-transform: none; letter-spacing: 0; font-weight: 600; }
.tbl tbody tr:nth-child(even){ background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.tbl tbody th{ font-weight: 700; color: var(--text); font-size: 15px; text-transform: none; letter-spacing: 0; }
.tbl tbody th.tbl__first{ white-space: nowrap; }
.tbl--persons tbody th.tbl__first{ color: var(--muted); }
.tbl .he{ display: block; font-size: 22px; line-height: 1.35; direction: rtl; unicode-bidi: isolate; text-align: left; font-family: "Arial Hebrew", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif; }
.tbl .tr{ display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.tbl .sub{ display: block; font-size: 13.5px; line-height: 1.35; margin-top: 2px; }
.tbl th .he{ font-size: 20px; }
.tbl__tail th{ color: var(--muted) !important; }
.tbl__note{ color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: -8px 2px 28px; }
.tbl__note--page{ color: var(--text); font-size: 15px; padding: 12px 16px; margin: 18px 0; border-left: 4px solid var(--coral); background: var(--coral-soft); border-radius: 0 14px 14px 0; }
.book__side-title{ display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px; }
.book__side-title img{ width: 22px; height: 22px; object-fit: contain; }
.book__toc--tables a span{ min-width: 22px; }
.book__toc--sections{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.book__toc--sections a img{ width: 20px; height: 20px; }
@media (max-width: 900px){ .book__side-title, .book__toc--sections{ display: none; } }
@media (max-width: 640px){
  .tbl-page__head{ flex-direction: column; margin-bottom: 18px; }
  .tbl-print{ margin-top: 4px; }
  .tbl th, .tbl td{ padding: 9px 10px; }
  .tbl .he{ font-size: 20px; }
}

/* Brand block printed in the top right corner of a table page and the legal line at its end (hidden on screen) */
.print-brand, .print-note{ display: none; }
@media print{
  @page{ margin: 10mm; }
  .tbl-page__head{ flex-direction: row; align-items: flex-start; margin-bottom: 8px; }
  .print-brand{ display: flex; flex: none; margin-left: auto; align-items: center; gap: 10px; text-align: right; }
  .print-brand .app-icon{ border-radius: 22%; }
  .print-brand .app-icon{ width: 64px; height: 64px; order: 2; }
  .print-brand__meta{ display: flex; flex-direction: column; justify-content: center; height: 64px; }
  .print-brand__title{ font-weight: 900; font-size: 16px; line-height: 1.15; }
  .print-brand__sub{ font-size: 12px; font-weight: 600; color: #666; line-height: 1.2; }
  .print-brand__url{ font-size: 12px; font-weight: 700; margin-top: 2px; }
  .print-note{ display: block; margin: 14mm 0 0; padding-top: 3mm; border-top: 1px solid #bbb; font-size: 9.5px; line-height: 1.4; color: #555; }
  .topbar, .footer, .cookie-banner, .book__side, .book__nav, .article-cta, .tbl-print, .skip-link, .tbl-jump{ display: none !important; }
  html, body{ background: #fff; color: #000; width: auto; overflow: visible; }
  /* explicit page margins on the content itself: Safari ignores @page margins in some modes */
  .doc{ padding: 0; }
  .doc .container{ padding: 10mm 12mm 12mm; max-width: none; }
  .book{ display: block; }
  .book__body{ max-width: none; }
  .tbl-wrap{ border: 0; border-radius: 0; overflow: visible; }
  .tbl th, .tbl td{ border-top-color: #bbb; }
  .tbl thead th{ border-bottom: 1px solid #999; }
  .tbl thead{ display: table-header-group; }
  .tbl tr, .tbl caption{ break-inside: avoid; }
  .tbl caption{ break-after: avoid; }
  .tbl{ font-size: 13px; }
  .tbl .he{ font-size: 19px; }
  .tbl tbody tr:nth-child(even){ background: #f3f3f3; }
  .tbl__note--page{ background: #f3f3f3; border-color: #999; }
  a{ color: inherit; text-decoration: none; }
}