/*
 * IBASTOM – service pages family "sv" (digital management 14157, data management 14158, social media 14159).
 * Shared design system: drafting grid, hairlines, § numbering, Plex type, ink/paper sections and code-drawn
 * illustrations labelled "המחשה" / "דוגמה". Loaded only on the templates page-digital / page-data / page-social
 * (and while editing them). Every colour is a --sv-* token; each page sets its own palette in <page>.css
 * on :root and on .sv-page--<page>. See inc/service-3.php.
 */

/* ---------- Fonts (self-hosted, SIL OFL – fonts/OFL.txt) ---------- */
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-hebrew-400-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: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-hebrew-500-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: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plex-hebrew-700-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: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-hebrew-400-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; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-hebrew-500-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; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plex-hebrew-700-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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193; }

/* ---------- Structural tokens (colours: <page>.css) ---------- */
:root {
	--sv-sans: "IBM Plex Sans Hebrew", Rubik, Arial, sans-serif;
	--sv-mono: "IBM Plex Mono", "IBM Plex Sans Hebrew", ui-monospace, Consolas, monospace;
	--sv-ease: cubic-bezier(.2, .7, .2, 1);
	--sv-header-h: 60px; /* the page row; the site bar above it is --ibs-bar-h */
	--sv-sticky: calc(var(--sv-header-h) + var(--ibs-bar-h, 0px) + var(--wp-admin--admin-bar--height, 0px));
	--sv-gutter: clamp(1rem, 4vw, 3rem);
	--sv-wrap: 1240px;
	--sv-radius: 6px;
}

/* ---------- Page base ---------- */
html:has(body.ibastom-sv) { overflow-x: clip; scroll-padding-top: calc(var(--sv-sticky) + 16px); }
body.ibastom-sv { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
	html:has(body.ibastom-sv) { scroll-behavior: smooth; }
}
body.ibastom-sv,
.editor-styles-wrapper:has(.sv-section) {
	background: var(--sv-paper);
	color: var(--sv-ink);
	font-family: var(--sv-sans);
	font-size: 1.0625rem;
	line-height: 1.75;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.ibastom-sv .wp-site-blocks { overflow-x: clip; }
body.ibastom-sv :where(.wp-site-blocks) > * { margin-block-start: 0; }
body.ibastom-sv ::selection { background: var(--sv-signal); color: var(--sv-on-signal); }
.sv-main { margin: 0; counter-reset: sv-sec; }
.sv-main :where(.wp-block-post-content) > * { margin-block: 0; }
.sv-section :where(p, h1, h2, h3, ul, ol) { margin: 0; }
:is(.sv-section, .sv-site-header) :is(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; }
.sv-section :where(ul, ol) { padding: 0; list-style: none; }
.sv-section :where(a) { color: inherit; }
.sv-section svg { max-width: none; } /* Customizer CSS sets svg { max-width:100%; height:auto } */

/* Focus: one clear ring, adjusted on dark and signal grounds. */
body.ibastom-sv :focus-visible { outline: 3px solid var(--sv-signal-deep); outline-offset: 3px; border-radius: 2px; }
body.ibastom-sv :is(.sv-ink, .sv-cta, .sv-header .wp-block-navigation__responsive-container.is-menu-open) :focus-visible { outline-color: var(--sv-accent); }
/* The skip link is a dark chip over the dark site bar: its ring takes the accent like other dark grounds (it had the topic's
   deep signal, 1.6–1.9:1 against the bar; measured 20.10.2026). */
body.ibastom-sv .skip-link.screen-reader-text:focus-visible { outline-color: var(--sv-accent); }
body.ibastom-sv [tabindex="-1"]:focus { outline: none; }
body.ibastom-sv .skip-link.screen-reader-text:focus { background: var(--sv-ink); color: var(--sv-on-ink); font-family: var(--sv-sans); font-weight: 700; padding: .75rem 1.25rem; inset-inline-start: 1rem; top: 1rem; z-index: 100001; border-radius: var(--sv-radius); text-decoration: none; }

/* ---------- Layout primitives ---------- */
.sv-wrap { width: min(var(--sv-wrap), 100% - 2 * var(--sv-gutter)); margin-inline: auto; }
.sv-section { position: relative; padding-block: clamp(4.5rem, 9vw, 8.5rem); margin: 0; }
.sv-section:has(.sv-head) { counter-increment: sv-sec; }
.sv-head.sv-head { display: grid; gap: 1.1rem; margin-block-end: clamp(2.5rem, 5vw, 4rem); max-width: 56rem; }
.sv-eyebrow {
	display: flex; align-items: center; gap: .9rem;
	font-family: var(--sv-sans); font-size: .9375rem; font-weight: 500; letter-spacing: .01em; color: var(--sv-muted);
}
.sv-eyebrow::before { content: "§ " counter(sv-sec, decimal-leading-zero); font-family: var(--sv-mono); font-size: .8125rem; color: var(--sv-signal-deep); direction: ltr; unicode-bidi: isolate; }
.sv-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--sv-line); min-width: 2rem; }
.sv-eyebrow::before, .sv-eyebrow [lang="en"] { white-space: nowrap; }
@media (max-width: 420px) {
	.sv-hero .sv-eyebrow { flex-wrap: wrap; row-gap: .25rem; }
	.sv-hero .sv-eyebrow::after { display: none; }
}
.sv-hero .sv-eyebrow::before { content: "§ 00"; }
.sv-h1, .sv-h2 { font-family: var(--sv-sans); font-weight: 700; color: inherit; letter-spacing: -.014em; text-wrap: balance; }
.sv-h2 { font-size: clamp(2rem, 1.2rem + 3.1vw, 3.5rem); line-height: 1.1; }
.sv-intro { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.7; color: var(--sv-muted); max-width: 42rem; text-wrap: pretty; }
.sv-label { font-family: var(--sv-sans); font-size: .875rem; font-weight: 500; color: var(--sv-muted); }
.sv-num { font-family: var(--sv-mono); font-weight: 500; direction: ltr; unicode-bidi: isolate; }
.sv-tag {
	display: inline-block; width: max-content; font-family: var(--sv-sans); font-size: .8125rem; font-weight: 700; line-height: 1.5;
	background: var(--sv-ink); color: var(--sv-on-ink); padding: .1rem .65rem; border-radius: 999px;
}

/* Ink sections */
.sv-ink {
	background: var(--sv-ink); color: var(--sv-on-ink);
	background-image: linear-gradient(var(--sv-grid-ink) 1px, transparent 1px), linear-gradient(90deg, var(--sv-grid-ink) 1px, transparent 1px);
	background-size: 28px 28px;
}
.sv-ink .sv-eyebrow, .sv-ink .sv-intro, .sv-ink .sv-figcap { color: var(--sv-on-ink-muted); }
.sv-ink .sv-eyebrow::before { color: var(--sv-signal-soft); }
.sv-ink .sv-eyebrow::after { background: var(--sv-on-ink-line); }
.sv-ink .sv-tag { background: var(--sv-accent); color: var(--sv-ink); }

/* ---------- Buttons ---------- */
.sv-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.sv-btn { margin: 0; }
.sv-btn .wp-block-button__link {
	display: inline-flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .8rem 1.4rem;
	font-family: var(--sv-sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.2;
	border: 1.5px solid currentColor; border-radius: var(--sv-radius); text-decoration: none;
	transition: background-color .2s var(--sv-ease), color .2s var(--sv-ease), transform .2s var(--sv-ease), box-shadow .2s var(--sv-ease);
}
.sv-btn--ink .wp-block-button__link { background: var(--sv-ink); color: var(--sv-on-ink); border-color: var(--sv-ink); box-shadow: 4px 4px 0 var(--sv-accent); }
.sv-btn--ink .wp-block-button__link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sv-accent); }
.sv-btn--line .wp-block-button__link { background: transparent; color: var(--sv-ink); }
.sv-btn--line .wp-block-button__link:hover { background: var(--sv-ink); color: var(--sv-on-ink); }
.sv-btn--signal .wp-block-button__link { background: var(--sv-signal); color: var(--sv-on-signal); border-color: var(--sv-signal); }
.sv-btn--signal .wp-block-button__link:hover { background: var(--sv-ink); color: var(--sv-on-ink); border-color: var(--sv-ink); }
.sv-btn--paper .wp-block-button__link { background: var(--sv-paper); color: var(--sv-ink); border-color: var(--sv-ink); }
.sv-btn--paper .wp-block-button__link:hover { background: var(--sv-card); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--sv-ink); }
.sv-btn--sm .wp-block-button__link { min-height: 2.6rem; padding: .5rem 1rem; font-size: .9375rem; }
.sv-btn__meta { white-space: nowrap; font-family: var(--sv-mono); font-weight: 500; font-size: .9375rem; padding-inline-start: .75rem; border-inline-start: 1px solid currentColor; opacity: .9; }
.sv-btn__arrow { font-family: var(--sv-mono); transition: transform .2s var(--sv-ease); }
.sv-btn--line .wp-block-button__link:hover .sv-btn__arrow { transform: translateY(3px); }

/* ---------- Header: site bar (mu-plugin) + the page row ---------- */
.sv-site-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; margin: 0; }
.sv-header { position: relative; width: min(var(--sv-wrap), 100% - 2 * var(--sv-gutter)); margin-inline: auto; min-height: var(--sv-header-h); gap: 1.5rem; }
/* The page row's ground lives on ::after: a backdrop-filter on the header itself would trap the mobile overlay. */
.sv-site-header::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; top: var(--ibs-bar-h, 0px); z-index: -1;
	background: color-mix(in srgb, var(--sv-paper) 90%, transparent);
	-webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
	border-block-end: 1px solid transparent; transition: border-color .25s var(--sv-ease);
}
.sv-site-header.is-scrolled::after { border-block-end-color: var(--sv-line); }
.sv-header .ibs-section-label { color: var(--sv-muted); border-color: var(--sv-line); opacity: 1; font-family: var(--sv-sans); }
.sv-header__cta { margin: 0; flex: none; }
.sv-nav.sv-nav { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--sv-sans); font-size: .9375rem; font-weight: 500; }
.sv-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { width: auto; }
.sv-nav .wp-block-navigation__container { gap: clamp(.75rem, 2vw, 1.75rem); }
.sv-nav .wp-block-navigation-item__content { color: var(--sv-ink); text-decoration: none; padding-block: .4rem; position: relative; }
.sv-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--sv-signal); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--sv-ease); }
.sv-nav .wp-block-navigation-item__content:hover::after, .sv-nav .wp-block-navigation-item__content[aria-current]::after { transform: scaleX(1); }
.sv-progress { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; pointer-events: none; }
.sv-progress::before { content: ""; position: absolute; inset: 0; background: var(--sv-signal); transform-origin: right; transform: scaleX(var(--sv-progress, 0)); }
.sv-nav .wp-block-navigation__responsive-container-open { color: var(--sv-ink); background: transparent; border: 1.5px solid var(--sv-ink); border-radius: var(--sv-radius); cursor: pointer; }
.sv-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--sv-ink) !important; color: var(--sv-on-ink) !important; padding: 1.25rem var(--sv-gutter) 2rem; top: var(--wp-admin--admin-bar--height, 0px); }
.sv-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.5rem; align-items: stretch; }
.sv-nav .is-menu-open .wp-block-navigation__responsive-container-content::before { content: "בעמוד זה"; display: block; width: 100%; font-size: .875rem; font-weight: 500; color: var(--sv-on-ink-muted); padding-block-end: .75rem; border-block-end: 1px solid var(--sv-on-ink-line); }
.sv-nav .is-menu-open .wp-block-navigation__container { gap: 0; align-items: stretch; width: 100%; counter-reset: sv-nav; }
.sv-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-block-end: 1px solid var(--sv-on-ink-line); counter-increment: sv-nav; }
.sv-nav .is-menu-open .wp-block-navigation-item__content { color: var(--sv-on-ink); font-size: 1.625rem; font-weight: 700; padding-block: 1rem; width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
.sv-nav .is-menu-open .wp-block-navigation-item__content::before { content: counter(sv-nav, decimal-leading-zero); order: 2; font-family: var(--sv-mono); font-size: .875rem; font-weight: 500; color: var(--sv-signal-soft); }
.sv-nav .is-menu-open .wp-block-navigation-item__content::after { display: none; }
.sv-nav .wp-block-navigation__responsive-container-close { color: var(--sv-on-ink); top: 1.1rem; inset-inline-end: var(--sv-gutter); height: 2.75rem; display: grid; place-items: center; background: transparent; border: 1.5px solid var(--sv-on-ink-line); border-radius: var(--sv-radius); cursor: pointer; }
@media (max-width: 599px) {
	:root { --sv-header-h: 56px; }
	.sv-header { gap: .75rem; }
	.sv-header__cta .wp-block-button__link { padding-inline: .8rem; }
}

/* ---------- Hero ---------- */
.sv-hero {
	padding-block: clamp(3rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
	background-image: linear-gradient(var(--sv-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sv-grid) 1px, transparent 1px);
	background-size: 28px 28px; background-position: center top;
	border-block-end: 1px solid var(--sv-line); overflow: clip;
}
.sv-hero::before { /* page glow behind the illustration */
	content: ""; position: absolute; z-index: 0; width: clamp(22rem, 46vw, 44rem); aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, var(--sv-glow) 0, transparent 68%);
	inset-inline-end: -8rem; top: -6rem; pointer-events: none;
}
.sv-hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 1024px) {
	.sv-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.sv-hero__text { display: grid; gap: 1.5rem; justify-items: start; }
.sv-h1 { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.1rem); line-height: 1.04; margin-block: .25rem .5rem; }
.sv-h1__em { display: block; color: var(--sv-signal-deep); }
.sv-h1__em::after { content: ""; display: block; height: .09em; width: min(100%, 6.5em); margin-block-start: .14em; background: var(--sv-underline); border-radius: 999px; }
.sv-h1__em[dir="ltr"] { text-align: right; } /* an English line inside the Hebrew title: keep it on the start (right) side */
.sv-h1__em[dir="ltr"]::after { margin-inline-start: auto; }
.sv-page--social .sv-h1 { font-size: clamp(2.2rem, 1.1rem + 3.9vw, 4.4rem); }
.sv-chapter__n { direction: ltr; unicode-bidi: isolate; }
.sv-hero__lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); line-height: 1.65; font-weight: 500; max-width: 42rem; text-wrap: pretty; }
.sv-hero__sub { color: var(--sv-muted); max-width: 38rem; }
.sv-hero .sv-actions { margin-block-start: .5rem; }
.sv-hero__visual { position: relative; display: grid; justify-items: center; }

/* Illustration card (hero). Page files draw the inside. */
.sv-board {
	position: relative; z-index: 1; width: min(100%, 27rem); padding: 1.5rem 1.4rem 1.3rem;
	background: var(--sv-card); border: 1.5px solid var(--sv-ink); border-radius: calc(var(--sv-radius) + 4px);
	box-shadow: 10px 10px 0 var(--sv-signal);
}
.sv-board .sv-tag { margin-block-end: .9rem; }
.sv-board__title { font-weight: 700; font-size: 1.0625rem; margin-block-end: 1rem !important; }
.sv-board__caption { margin-block-start: 1.1rem !important; padding-block-start: .9rem; border-block-start: 1px dashed var(--sv-line-strong); font-size: .9375rem; line-height: 1.55; color: var(--sv-muted); }
@media (prefers-reduced-motion: no-preference) {
	.sv-board { animation: sv-rise .8s var(--sv-ease) .1s both; }
}
@keyframes sv-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes sv-pop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@media (max-width: 599px) {
	.sv-board { padding-inline: 1rem; box-shadow: 6px 6px 0 var(--sv-signal); width: calc(100% - 6px); }
	.sv-actions { width: 100%; }
	.sv-actions .sv-btn, .sv-actions .sv-btn .wp-block-button__link { width: 100%; justify-content: center; }
	.sv-btn--ink .wp-block-button__link { flex-wrap: wrap; row-gap: .25rem; }
	.sv-hero .sv-btn__meta { border: 0; padding: 0; flex-basis: 100%; text-align: center; }
}

/* ---------- Fit: numbered index ---------- */
.sv-fit__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 3rem; border-block-start: 1.5px solid var(--sv-ink); }
@media (min-width: 900px) {
	.sv-fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sv-fit__item { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1.4rem .5rem; border-block-end: 1px solid var(--sv-line); transition: background-color .3s var(--sv-ease), padding .3s var(--sv-ease); }
.sv-fit__item:hover { background: var(--sv-card); padding-inline-start: 1rem; }
.sv-fit__num { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%; font-family: var(--sv-mono); font-weight: 500; font-size: 1rem; direction: ltr; border: 1.5px solid var(--sv-ink); color: var(--sv-ink); transition: background-color .3s var(--sv-ease), color .3s var(--sv-ease), border-color .3s var(--sv-ease); }
.sv-fit__item:hover .sv-fit__num { background: var(--sv-signal); border-color: var(--sv-signal); color: var(--sv-on-signal); }
.sv-fit__text { font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); font-weight: 500; line-height: 1.55; text-wrap: pretty; }

/* ---------- Cards (ink section) ---------- */
.sv-cards__top { display: grid; gap: 2rem; margin-block-end: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1024px) {
	.sv-cards__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: end; }
	.sv-cards__top .sv-head.sv-head { margin-block-end: 0; }
}
.sv-cards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
@media (min-width: 1024px) {
	.sv-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sv-cards__grid > :nth-child(7):last-child { grid-column: 1 / -1; } /* seven items: the last spans the row */
}
.sv-card { position: relative; display: grid; align-content: start; gap: .65rem; padding: 1.75rem; min-height: 11rem; background: var(--sv-ink-2); border: 1px solid var(--sv-on-ink-line); border-radius: var(--sv-radius); overflow: hidden; transition: border-color .3s var(--sv-ease), transform .3s var(--sv-ease); }
.sv-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--sv-accent); transform: scaleX(.16); transform-origin: right; transition: transform .45s var(--sv-ease); }
.sv-card:hover { border-color: var(--sv-on-ink-muted); transform: translateY(-3px); }
.sv-card:hover::before { transform: scaleX(1); }
.sv-card__num { font-family: var(--sv-mono); font-size: .875rem; color: var(--sv-signal-soft); direction: ltr; text-align: right; }
.sv-card__text { color: var(--sv-on-ink-muted); line-height: 1.65; }
.sv-card__title { display: block; color: var(--sv-on-ink); font-size: clamp(1.2rem, 1.1rem + .45vw, 1.45rem); font-weight: 700; line-height: 1.32; margin-block: .5rem .35rem; }
/* The source separator ("—", ":") stays in the text but is not shown: the title has its own line. */
.sv-card__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.sv-figure { display: grid; gap: .6rem; }
.sv-figcap { font-size: .875rem; line-height: 1.8; color: var(--sv-muted); }
.sv-figcap .sv-tag { margin-inline-end: .5rem; vertical-align: .05em; }

/* ---------- Issues: problem – effect rows, or single statements ---------- */
.sv-issues { background: var(--sv-paper-2); border-block: 1px solid var(--sv-line); }
.sv-issues__box { border-block-start: 1.5px solid var(--sv-ink); }
.sv-issues__legend { display: none; }
.sv-issues__list { counter-reset: sv-i; }
.sv-issues__list li { counter-increment: sv-i; position: relative; display: grid; gap: .25rem; padding-block: 1.2rem; padding-inline-start: 3.5rem; border-block-end: 1px dashed var(--sv-line-strong); font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); line-height: 1.5; }
.sv-issues__list li::before { content: counter(sv-i, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: 1.3rem; font-family: var(--sv-mono); font-size: 1.2rem; line-height: 1.1; color: var(--sv-alert); }
.sv-issue__cause { font-weight: 700; }
.sv-issue__arrow { display: inline-block; font-family: var(--sv-mono); color: var(--sv-alert); font-weight: 500; }
.sv-issue__arrow:not(:empty) { margin-inline: .35rem; }
.sv-issue__effect { color: var(--sv-ink-3); }
.sv-issues__list li:not(:has(.sv-issue__effect)) .sv-issue__cause { font-weight: 500; }
@media (min-width: 900px) {
	.sv-issues__box--pairs .sv-issues__legend { display: grid; grid-template-columns: minmax(0, 5fr) 4rem minmax(0, 6fr); padding-block: .6rem; font-size: .875rem; font-weight: 500; color: var(--sv-muted); border-block-end: 1px solid var(--sv-line); }
	.sv-issues__box--pairs .sv-issues__legend span:last-child { grid-column: 3; }
	.sv-issues__box--pairs .sv-issues__list li { grid-template-columns: minmax(0, 5fr) 4rem minmax(0, 6fr); align-items: baseline; padding-inline-start: 0; }
	.sv-issues__box--pairs .sv-issues__list li::before { display: none; }
	.sv-issues__box--pairs .sv-issue__cause::before { content: counter(sv-i, decimal-leading-zero); font-family: var(--sv-mono); font-weight: 500; font-size: .875rem; color: var(--sv-alert); margin-inline-end: .9rem; }
	.sv-issues__box--pairs .sv-issue__arrow { justify-self: center; font-size: 1.25rem; margin: 0; }
	.sv-issues__list { columns: 1; }
	.sv-issues__box:not(.sv-issues__box--pairs) .sv-issues__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
@media (max-width: 899px) {
	.sv-issues__box--pairs .sv-issue__arrow { display: none; } /* stacked: the effect sits under its problem */
	.sv-issues__box--pairs .sv-issue__effect::before { content: "← "; font-family: var(--sv-mono); color: var(--sv-alert); }
}
.sv-issue__arrow { transform: scaleX(-1); } /* "→" from the source, mirrored so it points from problem to effect in RTL */
.sv-issues__box:not(.sv-issues__box--pairs) .sv-issues__list li { display: block; } /* statements (and the odd pair among them) read as one line */

/* ---------- Checklist (light) ---------- */
.sv-checks__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 760px) {
	.sv-checks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.sv-checks__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sv-checks__list li { position: relative; padding: 1.4rem 1.4rem 1.4rem 1.4rem; padding-inline-start: 3.9rem; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); font-size: 1.0625rem; font-weight: 500; line-height: 1.55; transition: border-color .25s var(--sv-ease), box-shadow .25s var(--sv-ease); }
.sv-checks__list li::before { content: ""; position: absolute; inset-inline-start: 1.25rem; top: 1.45rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sv-signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat; }
.sv-checks__list li:hover { border-color: var(--sv-signal); box-shadow: 5px 5px 0 var(--sv-accent); }

/* ---------- Build (six stages) ---------- */
.sv-build__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
	.sv-build__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
	.sv-build__aside { position: sticky; top: calc(var(--sv-sticky) + 1.5rem); }
}
.sv-build__aside { display: grid; gap: 1rem; align-content: start; }
.sv-build__nav { display: grid; border-block-start: 1.5px solid var(--sv-ink); }
.sv-build__nav a { display: block; position: relative; padding-block: .7rem; padding-inline: .5rem 3rem; border-block-end: 1px solid var(--sv-line); color: var(--sv-ink); text-decoration: none; font-weight: 500; line-height: 1.4; transition: color .2s var(--sv-ease), background-color .2s var(--sv-ease); }
.sv-build__nav .sv-num { position: absolute; left: .75rem; /* physical: .sv-num is direction:ltr, so inset-inline-start would mean left anyway – stated explicitly */ top: .95rem; font-size: .8125rem; line-height: 1.4; color: var(--sv-muted); }
.sv-build__nav a:hover { background: var(--sv-card); }
.sv-build__nav a[aria-current] { background: var(--sv-signal); color: var(--sv-on-signal); }
.sv-build__nav a[aria-current] .sv-num { color: var(--sv-on-signal); }
@media (max-width: 1023px) {
	.sv-build__nav { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); column-gap: 1.5rem; }
	.sv-build__figure { max-width: 26rem; }
}
.sv-build__figure { margin-block-start: .5rem; }

/* Stage illustration (SVG). Shared parts; page files add shapes and colours. */
.sv-meter { width: 100%; height: auto; display: block; direction: ltr; }
.sv-meter__frame { fill: var(--sv-card); stroke: var(--sv-ink); stroke-width: 1.5; }
.sv-meter__grid { stroke: var(--sv-line); stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.sv-zone__track { fill: var(--sv-paper-2); stroke: var(--sv-line-strong); stroke-width: 1; }
.sv-zone__bar { fill: var(--sv-signal); transition: fill .4s var(--sv-ease), stroke .4s var(--sv-ease), opacity .4s var(--sv-ease); }
.sv-zone__dot { fill: var(--sv-ink); transition: fill .3s var(--sv-ease); }
.sv-zone__num { font-family: var(--sv-mono); font-size: 11px; font-weight: 500; fill: var(--sv-on-ink); }
/* JS marks zones not reached yet; without JS every zone is shown complete. */
.sv-zone.is-pending .sv-zone__bar { opacity: .12; }
.sv-zone.is-pending .sv-zone__dot { fill: var(--sv-paper-2); stroke: var(--sv-line-strong); }
.sv-zone.is-pending .sv-zone__num { fill: var(--sv-muted); }
.sv-zone.is-current .sv-zone__bar { fill: var(--sv-accent); stroke: var(--sv-ink); stroke-width: 1.5; }
.sv-zone.is-current .sv-zone__dot { fill: var(--sv-signal); }

.sv-build__chapters { display: grid; gap: 2rem; }
.sv-chapter { position: relative; display: grid; gap: .75rem; padding: clamp(2.25rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem); background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); transition: border-color .3s var(--sv-ease), box-shadow .3s var(--sv-ease); scroll-margin-top: calc(var(--sv-sticky) + 24px); }
.sv-chapter.is-active { border-color: var(--sv-signal); box-shadow: 6px 6px 0 var(--sv-signal); }
.sv-chapter .sv-chapter__num { position: absolute; top: -1px; inset-inline-start: clamp(1.5rem, 3vw, 2.25rem); transform: translateY(-50%); font-family: var(--sv-sans); font-weight: 700; font-size: .875rem; background: var(--sv-ink); color: var(--sv-on-ink); padding: .2rem .75rem; border-radius: var(--sv-radius); }
.sv-chapter.is-active .sv-chapter__num { background: var(--sv-signal); color: var(--sv-on-signal); }
.sv-chapter__title { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); font-weight: 700; line-height: 1.3; }
.sv-chapter__list li { position: relative; padding-block: .5rem; padding-inline-start: 1.4rem; border-block-start: 1px dashed var(--sv-line); }
.sv-chapter__list li:first-child { border-block-start: 0; }
.sv-chapter__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 1.05em; width: .5rem; height: .5rem; border-radius: 2px; background: var(--sv-signal); transform: rotate(45deg); }

/* ---------- CTA band ---------- */
.sv-cta { background: var(--sv-signal-deep); color: var(--sv-on-signal); padding-block: clamp(4rem, 8vw, 6.5rem); overflow: clip; }
.sv-cta::after { /* page mark (set in <page>.css) */
	content: var(--sv-cta-mark, "?"); position: absolute; left: 50%; bottom: -4.5rem; translate: -50% 0;
	font-family: var(--sv-mono); font-weight: 500; font-size: clamp(11rem, 20vw, 18rem); line-height: 1; color: var(--sv-accent); opacity: .3; pointer-events: none;
}
.sv-cta__inner { position: relative; z-index: 1; display: grid; gap: 2rem; align-items: end; }
@media (min-width: 1024px) {
	.sv-cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; }
}
.sv-cta__text { display: grid; gap: 1rem; }
.sv-cta .sv-eyebrow, .sv-cta .sv-eyebrow::before { color: var(--sv-on-signal); }
.sv-cta .sv-eyebrow::before { content: "→"; }
.sv-cta .sv-eyebrow::after { background: color-mix(in srgb, var(--sv-on-signal) 45%, transparent); }
.sv-cta__title { max-width: 17em; }
.sv-cta__actions { flex-direction: column; align-items: stretch; }
.sv-cta__actions .wp-block-button__link { width: 100%; justify-content: space-between; }
@media (max-width: 599px) {
	.sv-cta::after { font-size: 9rem; bottom: -2.5rem; }
}

/* ---------- FAQ ---------- */
.sv-faq__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
	.sv-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
	.sv-faq__side { position: sticky; top: calc(var(--sv-sticky) + 1.5rem); }
}
.sv-faq__side { display: grid; gap: 1rem; align-content: start; }
.sv-faq__topics { display: grid; border-block-start: 1.5px solid var(--sv-ink); }
.sv-faq__topics a { display: block; position: relative; padding-block: .75rem; padding-inline: .5rem 3rem; border-block-end: 1px solid var(--sv-line); color: var(--sv-ink); text-decoration: none; font-weight: 500; transition: background-color .2s var(--sv-ease), color .2s var(--sv-ease); }
.sv-faq__topics a:hover { background: var(--sv-card); }
.sv-faq__topics a[aria-current] { background: var(--sv-ink); color: var(--sv-on-ink); }
.sv-faq__count { position: absolute; inset-inline-end: .5rem; top: 50%; transform: translateY(-50%); font-family: var(--sv-mono); font-size: .8125rem; min-width: 1.75rem; height: 1.75rem; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; }
@media (max-width: 1023px) {
	.sv-faq__topics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); column-gap: 1.5rem; }
}
.sv-faq__tools:empty { display: none; }
.sv-faq__tools { display: grid; gap: .6rem; padding: 1.25rem; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); margin-block-start: .5rem; }
.sv-faq__search-label { font-weight: 700; font-size: .9375rem; }
.sv-faq__search { width: 100%; min-height: 3rem; padding: .6rem .9rem; font: inherit; font-size: 1rem; color: var(--sv-ink); background: var(--sv-paper); border: 1.5px solid var(--sv-ink); border-radius: var(--sv-radius); }
.sv-faq__search::placeholder { color: var(--sv-muted); opacity: 1; }
.sv-faq__status { font-size: .875rem; color: var(--sv-muted); min-height: 1.4em; }
.sv-faq__toggles { display: flex; gap: .5rem; flex-wrap: wrap; }
.sv-faq__toggle { font: inherit; font-size: .875rem; font-weight: 700; padding: .45rem .9rem; color: var(--sv-ink); background: transparent; border: 1px solid var(--sv-ink); border-radius: 999px; cursor: pointer; min-height: 2.5rem; }
.sv-faq__toggle:hover { background: var(--sv-ink); color: var(--sv-on-ink); }
.sv-faq__list { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); counter-reset: sv-faq; }
.sv-faq__group { scroll-margin-top: calc(var(--sv-sticky) + 16px); }
.sv-faq__title { display: block; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 700; padding-block-end: .9rem; border-block-end: 1.5px solid var(--sv-ink); }
.sv-faq__title::before { counter-increment: sv-faq; content: counter(sv-faq, upper-alpha); font-family: var(--sv-mono); font-size: .875rem; font-weight: 500; color: var(--sv-ink); background: var(--sv-accent); width: 1.75rem; height: 1.75rem; display: inline-grid; place-items: center; margin-inline-end: .75rem; vertical-align: .15em; border-radius: var(--sv-radius); }
.sv-qa { border-block-end: 1px solid var(--sv-line); margin: 0; }
/* Block, not flex: a flex summary would turn every <span lang="en"> into its own item and space the words apart. */
.sv-qa > summary { list-style: none; cursor: pointer; position: relative; display: block; min-height: 2rem; padding-block: 1.1rem; padding-inline-end: 3.25rem; font-weight: 700; font-size: 1.0625rem; line-height: 1.5; transition: color .2s var(--sv-ease); }
.sv-qa > summary::-webkit-details-marker { display: none; }
.sv-qa > summary::after { content: "+"; position: absolute; inset-inline-end: 0; top: .95rem; width: 2rem; height: 2rem; display: grid; place-items: center; font-family: var(--sv-mono); font-weight: 500; font-size: 1.25rem; line-height: 1; border: 1.5px solid var(--sv-ink); border-radius: 50%; transition: background-color .2s var(--sv-ease), color .2s var(--sv-ease); }
.sv-qa > summary:hover { color: var(--sv-signal-deep); }
.sv-qa[open] > summary::after { content: "−"; background: var(--sv-ink); color: var(--sv-on-ink); }
.sv-qa > :not(summary) { margin: 0 0 1.25rem; padding-inline-start: 1rem; border-inline-start: 3px solid var(--sv-signal); color: var(--sv-ink-3); max-width: 46rem; }
.sv-qa a { color: var(--sv-signal-deep); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
	.sv-qa[open] > :not(summary) { animation: sv-open .35s var(--sv-ease); }
}
@keyframes sv-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sv-faq__empty { padding: 1.25rem; border: 1px dashed var(--sv-line-strong); border-radius: var(--sv-radius); }

/* ---------- Reveal (JS adds .sv-pre only to blocks below the fold; content is visible without JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.sv-reveal { transition: opacity .7s var(--sv-ease), transform .7s var(--sv-ease); }
	.sv-pre { opacity: 0; transform: translateY(22px); }
}

/* ---------- Editor ---------- */
.editor-styles-wrapper .sv-pre { opacity: 1; transform: none; }
.editor-styles-wrapper .sv-section { max-width: none; }
.editor-styles-wrapper :is(.sv-build__aside, .sv-faq__side) { position: static; }
.editor-styles-wrapper .sv-board { animation: none; }

/* ---------- Print ---------- */
@media print {
	.sv-site-header, .sv-hero::before, .sv-cta::after, .sv-faq__tools { display: none !important; }
	.sv-ink, .sv-cta { background: #fff !important; color: #000 !important; }
	.sv-qa > :not(summary) { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
	.sv-section *, .sv-section *::before, .sv-section *::after { animation: none !important; transition: none !important; }
}