/* Articles (/articles/). Built on /vero/vero.css for the nav, footer and type, with the main site's light
   colours on top (src/index.css, 1.11.2026): a light canvas, white cards, the logo's green, flat rounded buttons.
   Notes: docs/articles.md */

.a-page {
  --canvas: #F4F2EA;
  --paper: #FBFAF5;
  --card: #FBFAF5;
  --sheet: #FBFAF5;
  --bed: #ECE9DC;
  --card-edge: #DDD9C6;
  --logo: #3F8040;
  --tint: #E7F0E1;          /* a pale green wash for notes */
  --muted: #4C5844;         /* 6.6:1 on the canvas */
  --rule: rgba(45, 85, 32, 0.22);
  --rule-soft: rgba(45, 85, 32, 0.12);
  background: var(--canvas);
}
.a-page .v-nav { background: rgba(244, 242, 234, 0.94); }
.a-page .v-nav-cta { border-radius: 999px; box-shadow: none; }
.a-page .v-nav-cta:hover { transform: none; }

/* ---------- Head ---------- */
.a-head {
  position: relative;
  padding-block: clamp(2rem, 6vw, 4rem) clamp(1.8rem, 5vw, 3rem);
}
.a-head::after { /* a straight line under the head, fading out, like the lines between the steps on the main site */
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(to left, transparent 0%, var(--logo) 18%, var(--logo) 55%, transparent 100%);
  opacity: 0.55;
}
.a-head-inner { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 860px) { .a-head-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
.a-mark { width: clamp(120px, 18vw, 230px); height: auto; color: var(--logo); justify-self: start; }
@media (max-width: 859px) { .a-mark { display: none; } }

.a-crumbs { font-size: 0.95rem; font-weight: 700; color: var(--muted); }
.a-crumbs a { color: var(--forest); text-underline-offset: 3px; }
.a-crumbs span:last-child { color: var(--logo); }
.a-title {
  margin-top: 0.8rem;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.14;
  font-weight: 800;
  color: var(--forest);
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 21em;
}
.a-dek { margin-top: 1rem; font-size: clamp(1.12rem, 2.2vw, 1.3rem); line-height: 1.6; max-width: 36em; color: var(--ink); text-wrap: pretty; }
.a-meta span, .a-meta time { unicode-bidi: isolate; }
.a-meta { margin-top: 1.1rem; font-size: 0.95rem; font-weight: 600; color: var(--muted); }

/* ---------- Layout: the text, and the contents box beside it on wide screens ---------- */
.a-body { padding-block: clamp(1.8rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem); }
.a-layout { display: grid; gap: 1.6rem; }
@media (min-width: 1080px) {
  .a-layout { grid-template-columns: minmax(0, 54rem) 15rem; justify-content: space-between; gap: 3rem; align-items: start; }
  .a-toc { grid-column: 2; grid-row: 1; position: sticky; top: 88px; }
  .a-content { grid-column: 1; grid-row: 1; }
}
.a-content { max-width: 54rem; min-width: 0; }
.a-content > * + * { margin-top: 1.05rem; }

.a-toc {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
}
.a-toc summary { cursor: pointer; font-weight: 800; color: var(--forest); font-size: 1rem; }
.a-toc ol { margin-top: 0.7rem; padding-inline-start: 1.2rem; display: grid; gap: 0.45rem; }
.a-toc li { font-size: 0.97rem; line-height: 1.4; }
.a-toc li::marker { color: var(--logo); font-weight: 800; }
.a-toc a { color: var(--ink); text-decoration: none; }
.a-toc a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Text ---------- */
.a-content h2 {
  margin-top: clamp(2.4rem, 5vw, 3.2rem) !important;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.25;
  font-weight: 800;
  color: var(--forest);
  text-wrap: balance;
  scroll-margin-top: 84px;
}
.a-content h2::before { /* a short green line above each section */
  content: '';
  display: block;
  width: 2.4rem;
  height: 3px;
  border-radius: 2px;
  background: var(--logo);
  margin-bottom: 0.75rem;
}
.a-content h3 { font-size: clamp(1.12rem, 2.2vw, 1.28rem); font-weight: 800; color: var(--forest); line-height: 1.35; }
.a-content p, .a-content li { font-size: clamp(1.08rem, 2vw, 1.19rem); line-height: 1.75; text-wrap: pretty; }
.a-content ul, .a-content ol { padding-inline-start: 1.3rem; }
.a-content li + li { margin-top: 0.45rem; }
.a-content li::marker { color: var(--logo); }
.a-content strong { color: var(--forest-deep); }
.a-content a { color: var(--forest); font-weight: 700; text-underline-offset: 3px; }
.a-small { font-size: 0.98rem !important; color: var(--muted); }

/* A short answer at the top of an article. */
.a-tldr {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-inline-start: 4px solid var(--logo);
  border-radius: 16px;
  padding: 1.1rem 1.3rem;
}
.a-tldr p + p { margin-top: 0.6rem; }

/* A worked example, a template. */
.a-example {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
  padding: 1.2rem 1.35rem;
}
.a-example > * + * { margin-top: 0.6rem; }
.a-example .lbl, .a-note .lbl {
  font-size: 0.9rem !important;
  font-weight: 800;
  color: var(--logo);
  letter-spacing: 0.01em;
}

/* A note that asks the reader to check something. */
.a-note {
  background: var(--tint);
  border-radius: 16px;
  padding: 1.2rem 1.35rem;
}
.a-note > * + * { margin-top: 0.5rem; }

/* ---------- Tables ---------- */
.a-table-wrap { border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--card); }
.a-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.55; }
.a-table caption { caption-side: bottom; text-align: start; padding: 0.7rem 1rem; font-size: 0.9rem; color: var(--muted); border-top: 1px solid var(--rule-soft); }
.a-table th, .a-table td { padding: 0.85rem 1rem; text-align: start; vertical-align: top; }
.a-table thead th { background: var(--forest); color: var(--on-forest); font-weight: 800; font-size: 0.95rem; }
.a-table tbody tr + tr { border-top: 1px solid var(--rule-soft); }
.a-table tbody th { font-weight: 800; color: var(--forest); width: 9.5rem; }
.a-table .num { font-weight: 800; color: var(--ink); white-space: normal; width: 11rem; }
@media (max-width: 640px) { /* one card per row on a phone */
  .a-table thead { display: none; }
  .a-table, .a-table tbody, .a-table tr, .a-table th, .a-table td { display: block; width: auto !important; }
  .a-table tbody tr { padding: 0.9rem 1rem; }
  .a-table tbody th, .a-table td { padding: 0; }
  .a-table .num { margin-top: 0.2rem; color: var(--logo); }
  .a-table caption { display: block; border-top: none; border-bottom: 1px solid var(--rule-soft); }
  .a-table td + td { margin-top: 0.3rem; }
}

.a-calc { width: 100%; border-collapse: collapse; }
.a-calc th, .a-calc td { padding: 0.55rem 0; font-size: 1.05rem; text-align: start; font-weight: 500; vertical-align: baseline; }
.a-calc td { text-align: end; font-weight: 800; white-space: nowrap; padding-inline-start: 1rem; }
.a-calc tr + tr { border-top: 1px solid var(--rule-soft); }
.a-calc .sum { border-top: 2px solid var(--forest) !important; }
.a-calc .sum th, .a-calc .sum td { font-weight: 800; color: var(--forest); font-size: 1.12rem; }

/* ---------- Three ways, side by side as cards ---------- */
.a-models { display: grid; gap: 0.8rem; }
.a-model {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
}
.a-model > * { grid-column: 2; }
.a-model > * + * { margin-top: 0.35rem; }
.a-model-n {
  grid-column: 1 !important;
  grid-row: 1 / span 3;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: var(--logo);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.05rem !important; line-height: 1 !important;
}
.a-model-own { font-size: 1rem !important; color: var(--forest-deep); border-top: 1px solid var(--rule-soft); padding-top: 0.45rem; margin-top: 0.6rem !important; }

/* A checklist. */
.a-check { list-style: none; padding: 0 !important; }
.a-check li { position: relative; padding-inline-start: 2rem; }
.a-check li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.2rem;
  top: 0.5em;
  width: 0.55rem; height: 0.95rem;
  border: solid var(--logo);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ---------- Questions and answers: visible text, one card per question ---------- */
.a-faq { margin-top: clamp(2.4rem, 5vw, 3.2rem) !important; }
.a-faq > h2 { margin-top: 0 !important; }
.a-qa { background: var(--card); border: 1px solid var(--rule-soft); border-radius: 16px; padding: 1rem 1.25rem; margin-top: 0.75rem; }
.a-qa .a-q { font-size: clamp(1.08rem, 2vw, 1.22rem); }
.a-qa p { margin-top: 0.35rem; }

/* ---------- The closing block about Vero ---------- */
.a-cta {
  margin-top: clamp(2.6rem, 6vw, 3.6rem) !important;
  background: var(--forest-deep);
  color: var(--on-forest);
  border-radius: 22px;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  position: relative;
  overflow: hidden;
}
.a-cta > * + * { margin-top: 0.8rem; }
.a-cta h2 { margin-top: 0 !important; color: #fff; }
.a-cta h2::before { background: var(--sage); }
.a-cta p { color: var(--on-forest); }
.a-cta-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-top: 1.3rem !important; }
.a-content .a-btn {
  display: inline-block;
  background: var(--on-forest);
  color: var(--forest-deep);
  border-radius: 999px;
  padding: 0.7em 1.6em;
  font-weight: 800;
  text-decoration: none;
  font-size: 1.05rem;
}
.a-content .a-btn:hover { background: #fff; }
.a-content .a-btn-line { color: var(--light-sage); font-weight: 800; text-underline-offset: 5px; }
.a-content .a-btn-line:hover { color: #fff; }

/* ---------- Article cards: related articles and the index ---------- */
.a-related { padding-block: clamp(2.4rem, 6vw, 3.6rem); background: var(--bed); }
.a-related h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); font-weight: 800; color: var(--forest); }
.a-index { padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem); }
.a-cards { list-style: none; padding: 0; display: grid; gap: 1rem; margin-top: 1.2rem; }
@media (min-width: 760px) { .a-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: 18px;
  padding: 1.3rem 1.4rem;
  transition: border-color 160ms ease;
}
.a-card:hover { border-color: var(--logo); }
.a-card-kicker { font-size: 0.88rem; font-weight: 800; color: var(--logo); }
.a-card h2, .a-card h3 { margin-top: 0.35rem; font-size: clamp(1.2rem, 2.4vw, 1.42rem); line-height: 1.3; font-weight: 800; }
.a-card h2 a, .a-card h3 a { color: var(--forest); text-decoration: none; }
.a-card h2 a::after, .a-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* the whole card is the link */
.a-card p { margin-top: 0.5rem; line-height: 1.6; }
.a-card .a-meta { margin-top: 0.8rem; font-size: 0.9rem; }

/* Two ways side by side (the cost article) */
.a-compare thead th:first-child { background: var(--forest); }
.a-compare tbody th { width: 8rem; }
@media (max-width: 640px) {
  .a-compare td::before { display: block; font-size: 0.85rem; font-weight: 800; color: var(--logo); }
  .a-compare td:nth-of-type(1)::before { content: 'מנוי למערכת מוכנה'; }
  .a-compare td:nth-of-type(2)::before { content: 'מערכת שנבנית עבור העסק'; }
  .a-compare td + td { margin-top: 0.6rem; }
}
.a-calc-2 thead th { font-size: 0.9rem; font-weight: 800; color: var(--logo); padding-bottom: 0.3rem; text-align: end; }
.a-calc-2 td { width: 30%; }

/* Numbered steps */
.a-steps { list-style: none; padding: 0 !important; counter-reset: step; display: grid; gap: 0.7rem; }
.a-steps li { counter-increment: step; position: relative; background: var(--card); border: 1px solid var(--rule-soft); border-radius: 16px; padding: 1rem 1.25rem; padding-inline-start: 4rem; margin: 0 !important; }
.a-steps li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 1.1rem; top: 1rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--logo); color: #fff; display: grid; place-items: center; font-weight: 800;
}
.a-steps li p { margin-top: 0.3rem; }
.a-tldr ul { margin-top: 0.5rem; }
.a-tldr ul + p { margin-top: 0.6rem; }

/* The closing line: who wrote this, and where to see the system. Quiet, not a sales block. */
.a-content .a-sign {
  margin-top: clamp(2.2rem, 5vw, 3rem) !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 1.02rem;
  color: var(--muted);
}