/* Suprevo CMS — section CONTENT SKIN (the default look of section CONTENT: type, buttons,
 * cards, icons, tones, prose). Enqueued as `suprevo-sections`. It uses `.sv-*` content classes
 * that a theme's own `block-*` markup does NOT collide with — so a theme can KEEP this as a
 * baseline (any section it hasn't redesigned still looks decent) while overriding what it does
 * redesign. The section WRAPPER (width/spacing/bg) lives in sections-wrapper.css; the
 * arrangement grids in sections-layout.css. Consumes only --sv-* design tokens. */

/* Shared type */
.sv-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .75; margin-bottom: 1rem; }
.sv-section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sv-section__title { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 0 0 .75rem; font-weight: 800; letter-spacing: -.02em; }
/* Curated heading-style variants (the `heading_style` choice → a token class, never inline styling) */
.sv-section__title--large { font-size: clamp(2rem, 4.6vw, 3.2rem); letter-spacing: -.03em; }
.sv-section__title--small { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 750; letter-spacing: -.01em; }
.sv-section__intro { font-size: 1.1rem; color: var(--sv-color-muted); margin: 0; }
.sv-bg-primary .sv-section__intro, .sv-bg-dark .sv-section__intro { color: inherit; opacity: .85; }

/* Buttons (skin — the row layout is in sections-layout.css) */
.sv-btn { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.4rem; border-radius: 999px; font-weight: 650; text-decoration: none; transition: transform .12s ease, opacity .12s ease; border: 1.5px solid transparent; }
.sv-btn:hover { transform: translateY(-1px); }
.sv-btn--primary { background: var(--sv-color-primary); color: var(--sv-color-primary-fg); }
.sv-btn--ghost { border-color: currentColor; color: inherit; opacity: .9; }
.sv-btn--invert { background: #fff; color: var(--sv-color-primary); }

/* Hero (skin — the grid is in sections-layout.css) */
.sv-hero__title { font-size: clamp(2.2rem, 5.2vw, 3.8rem); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 1.25rem; font-weight: 850; }
.sv-hero__intro { font-size: 1.2rem; line-height: 1.6; max-width: 38rem; opacity: .9; margin: 0; }
.sv-hero__figure img { width: 100%; height: auto; border-radius: var(--sv-radius); display: block; }

/* Features (cards — the grid is in sections-layout.css) */
.sv-card { background: var(--sv-color-bg); border: 1px solid var(--sv-color-border); border-radius: var(--sv-radius); padding: 1.75rem; }
.sv-bg-muted .sv-card { background: #fff; }
.sv-card__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--sv-color-primary) 12%, transparent); color: var(--sv-color-primary); margin-bottom: 1rem; }
.sv-card__title { font-size: 1.2rem; margin: 0 0 .4rem; font-weight: 750; }
.sv-card__body { color: var(--sv-color-muted); margin: 0; line-height: 1.55; }
.sv-card__link { display: inline-flex; align-items: center; gap: .3rem; margin-top: 1rem; font-weight: 650; color: var(--sv-color-primary); text-decoration: none; }
.sv-card__link::after { content: "\2192"; transition: transform .15s ease; }
.sv-card__link:hover { text-decoration: underline; }
.sv-card__link:hover::after { transform: translateX(3px); }

/* Optional per-item image ("image card"). Inset + rounded so it works in any variant. */
.sv-card__figure { margin-bottom: 1.25rem; border-radius: calc(var(--sv-radius) - 4px); overflow: hidden; }
.sv-card__figure img, .sv-card__media { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Per-item background tones — curated + on-brand. A theme owns the actual colour via the
   --sv-tone-* tokens (override them to re-brand); the `tone` choice only selects which.
   Scoped `.sv-card.sv-tone--x` so it beats `.sv-bg-muted .sv-card` (equal specificity,
   later in source). A `custom` tone arrives as an inline background, which wins outright. */
:root {
	--sv-tone-mint:     #d9f2e6;
	--sv-tone-lavender: #e7e3fb;
	--sv-tone-peach:    #fce4d6;
	--sv-tone-sky:      #dbeafe;
}
.sv-tone { border-color: transparent; }
.sv-tone .sv-card__body { color: inherit; opacity: .82; }
.sv-tone .sv-card__icon { background: color-mix(in srgb, #000 6%, transparent); color: inherit; }
.sv-card.sv-tone--mint     { background: var(--sv-tone-mint); }
.sv-card.sv-tone--lavender { background: var(--sv-tone-lavender); }
.sv-card.sv-tone--peach    { background: var(--sv-tone-peach); }
.sv-card.sv-tone--sky      { background: var(--sv-tone-sky); }

/* Feature card-style variants (the section-level `variant` choice). Cards = default look. */
.sv-features--plain .sv-card { background: none; border: none; padding: 0; }
.sv-features--tiles .sv-card { border: none; padding: clamp(1.75rem, 3vw, 2.4rem); }
.sv-features--tiles .sv-card:not(.sv-tone) { background: var(--sv-color-surface); }

/* Media + text (skin — the split grid is in sections-layout.css) */
.sv-split__media { width: 100%; height: auto; border-radius: var(--sv-radius); display: block; }
.sv-split__placeholder { aspect-ratio: 4 / 3; border-radius: var(--sv-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--sv-color-primary) 22%, transparent), color-mix(in srgb, var(--sv-color-primary) 4%, transparent)); }
.sv-prose { color: var(--sv-color-muted); line-height: 1.65; }
.sv-prose p { margin: 0 0 1rem; }
.sv-prose > :last-child { margin-bottom: 0; }
.sv-prose h2 { color: var(--sv-color-fg); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 1.6rem 0 .6rem; }
.sv-prose h3 { color: var(--sv-color-fg); font-weight: 750; line-height: 1.25; font-size: clamp(1.2rem, 2vw, 1.4rem); margin: 1.4rem 0 .5rem; }
.sv-prose h4 { color: var(--sv-color-fg); font-weight: 700; line-height: 1.3; font-size: 1.1rem; margin: 1.2rem 0 .4rem; }
.sv-prose :is(h2, h3, h4):first-child { margin-top: 0; }
/* Curated heading APPEARANCE — visual size decoupled from the semantic level (an <h2 class="sv-h--display">
 * reads as a display heading). Wrapper-independent so it works under ANY prose skin (.sv-prose OR a
 * theme's own). The DOUBLED class lifts specificity above the base heading rules in any context. A
 * theme may redefine these to match its exact type scale. */
.sv-h--display.sv-h--display { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; }
.sv-h--lg.sv-h--lg { font-size: clamp(1.5rem, 3vw, 2rem); }
.sv-h--md.sv-h--md { font-size: clamp(1.2rem, 2vw, 1.4rem); }
.sv-h--sm.sv-h--sm { font-size: 1.1rem; }
/* Curated text ALIGNMENT (an <p class="sv-align--center">). Doubled class to beat any base text-align
 * a prose skin might set; `left` is the default and carries no class. Mirrored in the editor (styles.css). */
.sv-align--center.sv-align--center { text-align: center; }
.sv-align--right.sv-align--right { text-align: right; }
.sv-prose ul, .sv-prose ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.sv-prose ul { list-style: disc; }
.sv-prose ol { list-style: decimal; }
.sv-prose li { margin: .25rem 0; }
/* Prestyled bullet-list VARIANTS (an <ul class="sv-list--check">). SEAM — one rule block per entry in
 * LIST_LOOK_OPTIONS (RichText.tsx), mirrored in the editor (styles.css). */
.sv-prose .sv-list--check { list-style: none; padding-left: 0; }
.sv-prose .sv-list--check li { position: relative; padding-left: 1.85rem; }
.sv-prose .sv-list--check li::before {
  content: ""; position: absolute; left: 0; top: .12em;
  width: 1.15rem; height: 1.15rem; border-radius: 999px;
  background: color-mix(in srgb, var(--sv-color-primary) 15%, transparent);
}
.sv-prose .sv-list--check li::after {
  content: ""; position: absolute; left: .4rem; top: .34em;
  width: .3rem; height: .58rem;
  border: solid var(--sv-color-primary); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sv-prose a { color: var(--sv-color-primary); text-decoration: underline; text-underline-offset: 2px; }
.sv-prose strong { font-weight: 700; color: inherit; }
.sv-prose blockquote { margin: 0 0 1rem; padding: .25rem 0 .25rem 1rem; border-left: 3px solid color-mix(in srgb, var(--sv-color-primary) 45%, transparent); font-style: italic; color: inherit; }
.sv-prose hr { border: 0; height: 1px; margin: 1.5rem 0; background: var(--sv-color-border); }
.sv-prose img { max-width: 100%; height: auto; border-radius: calc(var(--sv-radius) - 4px); }

/* Columns (block skin — the grid + column stacking are in sections-layout.css) */
.sv-block__title { font-size: 1.2rem; margin: 0 0 .4rem; font-weight: 750; }
.sv-block--image img { width: 100%; height: auto; border-radius: var(--sv-radius); display: block; }
.sv-block__media-link { display: block; }
.sv-block__caption { font-size: .85rem; color: var(--sv-color-muted); margin: .5rem 0 0; }
.sv-block--buttons { margin-top: 0; }
.sv-block--icon .sv-card__icon { margin-bottom: .75rem; }

/* CTA */
.sv-cta { text-align: center; max-width: 42rem; margin-inline: auto; }
.sv-cta__title { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 .75rem; font-weight: 820; letter-spacing: -.02em; }
.sv-cta__intro { font-size: 1.1rem; opacity: .9; margin: 0; }

/* Rich text (escape-hatch) */
.sv-richtext { max-width: 46rem; }
.sv-richtext :where(h2, h3, h4) { color: var(--sv-color-fg); font-weight: 800; letter-spacing: -.01em; margin: 2rem 0 .75rem; }
.sv-richtext :where(ul, ol) { margin: 0 0 1rem 1.25rem; }
.sv-richtext img { max-width: 100%; height: auto; border-radius: var(--sv-radius); }
.sv-richtext a { color: var(--sv-color-primary); }

/* Accordion / FAQ (skin — the list grid is in sections-layout.css) */
.sv-accordion__item { border: 1px solid var(--sv-color-border); border-radius: var(--sv-radius); background: var(--sv-color-bg); overflow: hidden; }
.sv-accordion__q { cursor: pointer; padding: 1.1rem 1.4rem; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sv-accordion__q::-webkit-details-marker { display: none; }
.sv-accordion__q::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--sv-color-primary); transition: transform .2s ease; }
.sv-accordion__item[open] .sv-accordion__q::after { transform: rotate(45deg); }
.sv-accordion__a { padding: 0 1.4rem 1.3rem; }

/* Stats (skin — the grid is in sections-layout.css) */
.sv-stat { display: flex; flex-direction: column; gap: .35rem; }
.sv-stat__value { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 850; line-height: 1; letter-spacing: -.03em; color: var(--sv-color-primary); }
.sv-bg-primary .sv-stat__value, .sv-bg-dark .sv-stat__value { color: inherit; }
.sv-stat__label { margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.sv-stat__name { font-weight: 700; }
.sv-stat__desc { font-size: .9rem; color: var(--sv-color-muted); }
.sv-bg-primary .sv-stat__desc, .sv-bg-dark .sv-stat__desc { color: inherit; opacity: .8; }

/* Logo wall (skin — the row layout is in sections-layout.css) */
.sv-section__head--center { margin-inline: auto; text-align: center; }
.sv-logo__img, .sv-logo img { height: clamp(1.75rem, 4vw, 2.5rem); width: auto; max-width: 12rem; object-fit: contain; opacity: .6; filter: grayscale(1); transition: opacity .15s ease, filter .15s ease; }
.sv-logo__link:hover .sv-logo__img, .sv-logo:hover img { opacity: 1; filter: grayscale(0); }

/* Banner (skin — the flex layout is in sections-layout.css) */
.sv-banner__title { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; font-weight: 800; letter-spacing: -.02em; }
.sv-banner__intro { margin: .4rem 0 0; opacity: .9; }