/* Service, price and case pages (tools/make_pages.py). Header: legal.css (.legal__top/.legal__bar/.legal__brand); the
   browser frames and the case hero: work.css. Tokens: css/tokens.css. Rules: design.md (Service pages). */
.page__top .legal__brand { margin-inline-end: auto; }
.page__nav { display: flex; gap: var(--sp-5); }
.page__nav a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.page__nav a[aria-current="page"] { color: var(--accent); }

.page { padding-block: var(--sp-6) var(--sp-9); }
.page__head { max-inline-size: var(--measure); }
.page__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); color: var(--ink-muted); font-size: var(--fs-small); }
.page__crumbs a { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; }
.page__title { margin-block-start: var(--sp-2); font-size: calc(var(--fs-display) * 0.75); line-height: 1.15; }
.page__lead { margin-block-start: var(--sp-5); font-size: calc(var(--fs-body) * 1.2); line-height: 1.55; }
/* inline flow, never flex: flex would tear " · עודכן ב-" from its date */
.page__by { margin-block-start: var(--sp-5); border-block: 1px solid var(--line); color: var(--ink-muted); font-size: var(--fs-small); }
.page__by a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink); font-weight: 600; }
.page__head > :is(.case__tags, .case__links) { margin-block-start: var(--sp-4); }
/* text links at (0,1,0) through :where(), so the crumbs, the byline and the contents keep their own colour */
.page :where(a:not([class])) { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.page b { font-weight: 600; } /* Plex Sans Hebrew 600 is loaded; bold would ask for 700 */

/* the service pages' side column: a glance at the price (desktop only: on phones the lead already says it) and the contents */
.page__aside > * + * { margin-block-start: var(--sp-6); }
.page__facts { display: none; padding: var(--sp-5); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.page__facts dl { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; }
.page__facts dt { color: var(--ink-muted); font-size: var(--fs-small); }
.page__facts dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.page__from { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--ink-muted); }
.page__more { display: inline-flex; align-items: center; min-block-size: 44px; margin-block-start: var(--sp-3); color: var(--accent); font-weight: 500; text-underline-offset: 0.2em; }
.page__toc { display: none; }
.page__toc-h { color: var(--ink-muted); font-size: var(--fs-small); font-weight: 500; } /* Hebrew words: the body face, never mono */
.page__toc ol { margin-block-start: var(--sp-2); counter-reset: toc; }
.page__toc li { counter-increment: toc; }
.page__toc a { display: flex; align-items: baseline; gap: var(--sp-3); min-block-size: 44px; padding-block: var(--sp-2); padding-inline-start: var(--sp-3); border-inline-start: 2px solid var(--line); color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.4; text-decoration: none; }
.page__toc a::before { content: counter(toc, decimal-leading-zero) / ""; flex: none; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; }
/* colour only: a weight change would rewrap a two-line label and shift the list while the visitor scrolls */
.page__toc a[aria-current="true"] { border-inline-start-color: var(--accent); color: var(--ink); }

.page__body { max-inline-size: var(--measure); margin-block-start: var(--sp-7); counter-reset: sec; }
.page--case .page__body { max-inline-size: var(--measure-wide); }
.page__hero { max-inline-size: var(--measure-wide); margin-block-start: var(--sp-7); }
.case__screen > img { inline-size: 100%; block-size: auto; }
/* .page__sec (0,1,0) beats base.css `section` (0,0,1) padding-block: var(--section-pad) */
.page__sec { margin-block-start: var(--sp-8); padding-block: var(--sp-5) 0; border-block-start: 1px solid var(--line); counter-increment: sec; }
.page__sec:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.page__sec > h2 { font-size: var(--fs-h3); line-height: 1.25; }
/* the home's index motif (.case__idx, .step__idx): accent mono digits, generated, so the heading text stays clean */
.page__sec > h2::before { content: counter(sec, decimal-leading-zero) / ""; display: block; margin-block-end: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--accent); }
.page__sec > * + * { margin-block-start: var(--sp-4); }
.page__sec > h2 + * { margin-block-start: var(--sp-3); }
.page__sec > :is(.page__shot, .page__table) { margin-block-start: var(--sp-6); }
.page__sec :is(p, li) { max-inline-size: 62ch; }
.page__sec ul { display: flex; flex-direction: column; gap: var(--sp-3); padding-inline-start: var(--sp-5); list-style: disc; }
.page__sec li::marker { color: var(--accent); }
.page__steps { display: grid; gap: var(--sp-5); counter-reset: step; }
.page__steps li { padding-block-start: var(--sp-4); border-block-start: 2px solid var(--line); counter-increment: step; }
.page__steps li::before { content: counter(step, decimal-leading-zero) / ""; display: block; margin-block-end: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--accent); }

.page__table { overflow-x: auto; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.page__table:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* separate, not collapse: collapsed borders belong to the table and do not travel with a sticky cell */
.page__table table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.page__table caption { padding: var(--sp-3) var(--sp-4); background: var(--accent-soft); color: var(--ink); font-weight: 600; text-align: start; } /* the VAT line stands out (design.md, Pricing) */
.page__table th, .page__table td { padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--line); text-align: start; vertical-align: top; }
.page__table thead th { color: var(--ink-muted); font-weight: 500; }
.page__table tbody th { font-weight: 600; }
/* ponytail: the site's one table (/mehirim/): the first two td are the price and the weeks; give cells classes when a second table arrives */
.page__table tbody td:not(:last-child) { white-space: nowrap; }
.page__table tbody td:first-of-type { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 700; }

.page__faq > details { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.page__faq > details + details { margin-block-start: var(--sp-3); }
/* summary keeps its own display (no flex): no bdi torn into flex items, no WebKit flex-summary risk */
.page__faq summary { position: relative; min-block-size: 44px; padding: var(--sp-4) var(--sp-5); padding-inline-end: calc(var(--sp-5) + var(--sp-6)); font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
.page__faq summary::-webkit-details-marker { display: none; }
/* a plus drawn from two bars, symmetric, so RTL needs nothing; open, it turns into an x */
.page__faq summary::after { content: ""; position: absolute; inset-block-start: calc(var(--sp-4) + var(--sp-1)); inset-inline-end: var(--sp-5); inline-size: var(--sp-4); block-size: var(--sp-4); color: var(--accent); background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 100% no-repeat; transition: rotate var(--dur-fast) var(--ease-out); }
.page__faq details[open] > summary::after { rotate: 45deg; }
.page__faq summary:focus-visible { border-radius: var(--r-md); }
.page__faq details > p { padding: 0 var(--sp-5) var(--sp-5); }

.page__end { display: grid; gap: var(--sp-8); margin-block-start: var(--sp-9); }
.page__cta { padding: var(--sp-7) var(--sp-6); background: var(--accent-soft); border-radius: var(--r-lg); }
/* card titles stay under the H1 at every width: --fs-h3 x 1.2 tops out at 38px, the H1 never drops under 30px */
.page__cta h2 { max-inline-size: 20ch; font-size: calc(var(--fs-h3) * 1.2); line-height: 1.15; }
.page__cta h2 + p { margin-block-start: var(--sp-3); max-inline-size: 62ch; }
.page__cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-5); }
.page__cta-row .btn:not(.btn--primary) { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } /* design.md: secondary = 1px --ink ring */
.page__cta-note { margin-block-start: var(--sp-4); color: var(--ink-muted); font-size: var(--fs-small); }
.page__next { display: grid; gap: var(--sp-4); justify-items: start; }
.next-case { display: grid; gap: var(--sp-5); align-items: center; inline-size: 100%; padding: var(--sp-5); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out); }
.next-case:focus-visible { border-radius: var(--r-lg); }
.next-case__text { display: grid; gap: var(--sp-2); }
.next-case__label { color: var(--ink-muted); font-size: var(--fs-small); }
.next-case__title { font-family: var(--font-display); font-size: calc(var(--fs-h3) * 1.2); font-weight: 700; line-height: 1.15; }
.next-case__line { max-inline-size: 36ch; color: var(--ink-muted); }
.next-case img { inline-size: 100%; block-size: auto; border-radius: var(--r-md); outline: 1px solid var(--line); outline-offset: -1px; }

.sitemap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); margin-block-end: var(--sp-6); padding-block-end: var(--sp-6); border-block-end: 1px solid var(--line); }
.sitemap__h { color: var(--ink-muted); font-size: var(--fs-small); font-weight: 500; } /* Hebrew words: the body face, never mono */
.sitemap ul { margin-block-start: var(--sp-2); }
.sitemap a { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: none; }
.sitemap a[aria-current="page"] { color: var(--accent); }

@media (max-width: 47.99rem) {
  .page__nav { display: none; } /* brand + pill; the links are in the footer map, so focus order = visual order */
  .page__table table { min-inline-size: 40rem; }
  /* the package name stays put while the row scrolls toward the inline end, the side RTL can scroll */
  .page__table tbody th, .page__table thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); border-inline-end: 1px solid var(--line); }
  .page__cta { padding: var(--sp-5); }
  .page__cta .btn { padding-inline: var(--sp-5); } /* the CTA label stays one line at 320px (fit-check) */
}
@media (min-width: 48rem) {
  .page__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--sp-6); }
  .sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* sticky only with room to spare: a phone held sideways is 768+ wide but under 40rem tall, and 73px of it is too much */
@media (min-width: 48rem) and (min-height: 40rem) {
  /* z-index: positioned sections and the case media come later in the tree and would paint over a z-index:auto header */
  .page__top { position: sticky; inset-block-start: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(var(--sp-3)); }
}
@media (min-width: 64rem) {
  .page__lead { font-size: calc(var(--fs-body) * 1.3); }
  /* minmax(0, ...): no fr floor; NO align-items: the aside must stretch across both rows, it is the sticky contents' containing block */
  .page__layout--aside { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, var(--aside)); grid-template-areas: "head aside" "body aside"; column-gap: var(--sp-8); justify-content: space-between; }
  .page__head { grid-area: head; }
  .page__body { grid-area: body; }
  .page__aside { grid-area: aside; }
  .page__facts { display: block; }
  .page__toc { display: block; }
  .page__cta { padding: var(--sp-8); }
}
@media (min-width: 64rem) and (min-height: 48rem) {
  .page__toc { position: sticky; inset-block-start: var(--sp-9); } /* clears the 73px header */
}
@media (hover: hover) {
  .page__nav a:hover, .page__toc a:hover, .sitemap a:hover { color: var(--accent); }
  .next-case:hover { box-shadow: var(--shadow-1h); }
}
@media (prefers-reduced-motion: reduce) {
  .page__faq summary::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .page__top { background: var(--bg); backdrop-filter: none; }
}