/* Layered ON TOP of legal.css, not instead of it. The legal pages already
   carry the brand's static-page look (Noto Sans Hebrew, the cream page, the
   white card, the terracotta link), and a second stylesheet with its own
   opinions is how two pages on one domain start looking like two products.
   Everything here is what an article needs and a policy page does not. */

.container {
  max-width: 720px;
}

/* The lede. One sentence that answers the page's question before the reader
   scrolls, because most of them will not scroll. */
.lede {
  font-size: 1.45rem;
  line-height: 1.7;
  color: var(--clr-text-heading);
  font-weight: 500;
  margin: 0 0 1.8rem;
}

.byline {
  font-size: 1.05rem;
  color: var(--clr-text-secondary);
  margin: -0.6rem 0 1.8rem;
}

/* Table of contents. Long Hebrew articles on a phone need a way out. */
.toc {
  background: var(--clr-bg-page);
  border: 1px solid var(--clr-border-light);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin: 0 0 2.2rem;
}
.toc p {
  margin: 0 0 0.8rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--clr-text-heading);
}
.toc ul {
  margin: 0;
  padding-inline-start: 1.8rem;
}
.toc li {
  margin: 0.4rem 0;
  font-size: 1.15rem;
}

/* A step list that reads as instructions rather than as prose. */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 3.4rem;
  margin: 0 0 1.2rem;
  font-size: 1.2rem;
  line-height: 1.6;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--clr-tip-bg);
  color: var(--clr-tip-text);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Comparison table. `display:block` + overflow on the wrapper, because a
   four-column table at 390px either scrolls or breaks the page, and a broken
   page is the one that loses the reader. */
.tablewrap {
  overflow-x: auto;
  margin: 1.4rem 0;
  -webkit-overflow-scrolling: touch;
}
table.cmp {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 1.15rem;
}
table.cmp th,
table.cmp td {
  text-align: start;
  padding: 0.9rem 0.8rem;
  border-bottom: 1px solid var(--clr-border-light);
  vertical-align: top;
}
table.cmp th {
  font-weight: 700;
  color: var(--clr-text-heading);
  background: var(--clr-bg-page);
}
table.cmp tr:last-child td {
  border-bottom: 0;
}

/* On a phone the table has to FIT, not scroll. The wrapper above keeps a
   horizontal scroll as the fallback, but a column clipped at the edge with no
   visible scrollbar reads as a broken page rather than as "there is more this
   way" — and the cells here are short Hebrew phrases that wrap perfectly
   happily into a narrow column. */
@media (max-width: 520px) {
  table.cmp {
    min-width: 0;
    font-size: 1.05rem;
  }
  table.cmp th,
  table.cmp td {
    padding: 0.7rem 0.45rem;
  }
}

/* Questions and answers. Real headings, not a JS accordion: an assistant
   reading this page for an answer gets the question and the answer as text,
   and a reader with the script blocked gets the same page. */
.qa {
  margin: 1.2rem 0 0;
}
.qa h3 {
  font-size: 1.25rem;
  color: var(--clr-text-heading);
  margin: 1.8rem 0 0.6rem;
}
.qa p {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.65;
}

/* The one place the page asks for anything. */
.cta {
  background: var(--clr-tip-bg);
  border: 1px solid var(--clr-tip-border);
  border-radius: 14px;
  padding: 1.8rem 1.6rem;
  margin: 2.6rem 0 0;
  text-align: center;
}
.cta p {
  margin: 0 0 1.2rem;
  font-size: 1.25rem;
  color: var(--clr-tip-text);
  line-height: 1.6;
}
.cta a.btn {
  display: inline-block;
  background: var(--clr-link);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 1rem 2.4rem;
  border-radius: 999px;
}
.cta a.btn:hover {
  background: var(--clr-link-hover);
}
.cta .fineprint {
  margin: 1.2rem 0 0;
  font-size: 1.05rem;
  color: var(--clr-text-secondary);
}

/* Related reading, and the crawl path between the guides. */
.related {
  margin: 2.6rem 0 0;
  border-top: 1px solid var(--clr-border-light);
  padding-top: 1.6rem;
}
.related h2 {
  font-size: 1.3rem;
  color: var(--clr-text-heading);
  margin: 0 0 0.8rem;
}
.related ul {
  margin: 0;
  padding-inline-start: 1.8rem;
}
.related li {
  margin: 0.5rem 0;
  font-size: 1.2rem;
}

/* Hub cards. */
.cards {
  display: grid;
  gap: 1.2rem;
  margin: 1.8rem 0 0;
}
.cards a {
  display: block;
  border: 1px solid var(--clr-border-light);
  border-radius: 14px;
  padding: 1.6rem;
  text-decoration: none;
  color: inherit;
}
.cards a:hover {
  border-color: var(--clr-tip-border);
  background: var(--clr-bg-page);
}
.cards h2 {
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
  color: var(--clr-link);
}
.cards p {
  margin: 0;
  font-size: 1.15rem;
  color: var(--clr-text-secondary);
  line-height: 1.6;
}

.pagefoot {
  text-align: center;
  font-size: 1.05rem;
  color: var(--clr-text-secondary);
  padding: 2rem 1.6rem 3rem;
}
.pagefoot a {
  color: var(--clr-link);
}