/*! savantar-theme v2.0.0 | Copyright SAVANTAR. Fonts: SIL Open Font License 1.1 (see fonts/). */
/* ---- tokens (generated from tokens/tokens.json) ---- */
:root {
  --sv-color-ink: #111110;
  --sv-color-ink-raised: #292925;
  --sv-color-ink-line: #30302C;
  --sv-color-ink-line-strong: #44443D;
  --sv-color-on-ink: #F8F6F1;
  --sv-color-on-ink-body: #C1BFB8;
  --sv-color-on-ink-muted: #A7A49C;
  --sv-color-on-ink-kicker: #DDDAD2;
  --sv-color-paper: #F3F1EB;
  --sv-color-surface: #F8F6F1;
  --sv-color-row: #FAF9F6;
  --sv-color-white: #FFFFFF;
  --sv-color-text: #111110;
  --sv-color-muted: #66645D;
  --sv-color-rule: #D7D2C8;
  --sv-color-rule-strong: #C8C4B9;
  --sv-color-red: #E32129;
  --sv-color-red-hover: #C81A22;
  --sv-color-red-text: #D41E26;
  --sv-color-red-soft: #F08F93;
  --sv-color-red-tint: #FFF1EE;
  --sv-color-green-tint: #E9EFE7;
  --sv-color-green-text: #276747;
  --sv-color-amber-tint: #F4ECD9;
  --sv-color-amber-text: #6E5414;
  --sv-color-blue-tint: #E6ECF2;
  --sv-color-blue-text: #2B4F73;
  --sv-color-heritage-ink-950: #050505;
  --sv-color-heritage-ink-900: #090909;
  --sv-color-heritage-ink-850: #0D1214;
  --sv-color-heritage-ink-800: #151A1C;
  --sv-color-heritage-green-950: #07110E;
  --sv-color-heritage-green-900: #091A14;
  --sv-color-heritage-green-800: #12261E;
  --sv-color-heritage-ivory-100: #E8E0D0;
  --sv-color-heritage-ivory-300: #BDB6A8;
  --sv-color-heritage-ivory-500: #948E80;
  --sv-color-heritage-gold-300: #DCB886;
  --sv-color-heritage-gold-500: #B89A5A;
  --sv-color-heritage-gold-600: #A38A55;
  --sv-color-heritage-gold-700: #8F7745;
  --sv-color-heritage-copper-500: #B98A53;
  --sv-color-heritage-hairline: #262421;
  --sv-color-heritage-hairline-gold: #352B1D;
  --sv-color-heritage-hairline-gold-strong: #524930;
  --sv-color-heritage-warm-950: #100D0A;
  --sv-color-heritage-red-400: #F0525B;
  --sv-color-heritage-red-900: #3A0A0D;
  --sv-font-sans: Vazirmatn, "SV Sans Latin", Tahoma, "Segoe UI", Arial, sans-serif;
  --sv-font-latin: "SV Sans Latin Full", Vazirmatn, "DejaVu Sans", Verdana, Arial, sans-serif;
  --sv-font-serif-display: "SV Serif Latin", "DejaVu Serif", Georgia, serif;
  --sv-font-nastaliq: "SV Sans Latin", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif;
  --sv-font-heritage-display: "Cormorant Garamond", Vazirmatn, Garamond, "Times New Roman", serif;
  --sv-font-heritage-body: Inter, Vazirmatn, "Segoe UI", Roboto, system-ui, sans-serif;
  --sv-font-mono: ui-monospace, "SF Mono", Consolas, monospace;
  --sv-size-2xs: 0.625rem;
  --sv-size-xs: 0.75rem;
  --sv-size-sm: 0.875rem;
  --sv-size-md: 1rem;
  --sv-size-lg: 1.0625rem;
  --sv-size-xl: 1.375rem;
  --sv-size-2xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);
  --sv-size-3xl: clamp(1.75rem, 1.35rem + 1.3vw, 2.25rem);
  --sv-size-4xl: clamp(2rem, 1.4rem + 2vw, 2.625rem);
  --sv-size-5xl: clamp(2.75rem, 1.6rem + 4.2vw, 5.375rem);
  --sv-space-1: 0.25rem;
  --sv-space-2: 0.5rem;
  --sv-space-3: 0.75rem;
  --sv-space-4: 1rem;
  --sv-space-5: 1.5rem;
  --sv-space-6: 2rem;
  --sv-space-7: 3rem;
  --sv-space-8: 4rem;
  --sv-space-9: 6rem;
  --sv-space-10: 8rem;
  --sv-space-section: clamp(3.5rem, 2.5rem + 3.2vw, 5.5rem);
  --sv-radius-none: 0;
  --sv-radius-xs: 2px;
  --sv-radius-sm: 4px;
  --sv-radius-md: 6px;
  --sv-radius-lg: 8px;
  --sv-radius-pill: 999px;
  --sv-tracking-label: 0.18em;
  --sv-tracking-wide: 0.32em;
  --sv-tracking-caps: 0.12em;
  --sv-tracking-button: 0;
  --sv-tracking-body: 0;
  --sv-motion-fast: 150ms;
  --sv-motion-base: 250ms;
  --sv-motion-slow: 600ms;
  --sv-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sv-layout-max-width: 1296px;
  --sv-layout-narrow: 760px;
  --sv-layout-gutter: clamp(16px, 5vw, 72px);
  --sv-layout-header-height: 92px;
  --sv-layout-topbar-height: 35px;
  --sv-bg: var(--sv-color-paper);
  --sv-bg-raised: var(--sv-color-white);
  --sv-bg-alt: var(--sv-color-surface);
  --sv-bg-sunken: var(--sv-color-paper);
  --sv-bg-row: var(--sv-color-row);
  --sv-bg-overlay: var(--sv-color-white);
  --sv-bg-input: var(--sv-color-white);
  --sv-bg-brand: var(--sv-color-ink);
  --sv-bg-brand-deep: var(--sv-color-ink);
  --sv-bg-brand-raised: var(--sv-color-ink-raised);
  --sv-bg-highlight: var(--sv-color-red-tint);
  --sv-text: var(--sv-color-text);
  --sv-text-body: var(--sv-color-muted);
  --sv-text-muted: var(--sv-color-muted);
  --sv-text-on-accent: var(--sv-color-white);
  --sv-accent: var(--sv-color-red);
  --sv-accent-strong: var(--sv-color-red-hover);
  --sv-accent-text: var(--sv-color-red-text);
  --sv-accent-secondary: var(--sv-color-ink);
  --sv-accent-secondary-text: var(--sv-color-text);
  --sv-text-on-accent-secondary: var(--sv-color-white);
  --sv-line: var(--sv-color-rule);
  --sv-line-strong: var(--sv-color-rule-strong);
  --sv-line-neutral: var(--sv-color-rule);
  --sv-line-input: var(--sv-color-rule);
  --sv-highlight-border: var(--sv-color-red);
  --sv-focus: var(--sv-color-red);
  --sv-danger: var(--sv-color-red-text);
  --sv-danger-bg: var(--sv-color-red-tint);
  --sv-danger-solid: var(--sv-color-red);
  --sv-success: var(--sv-color-green-text);
  --sv-success-bg: var(--sv-color-green-tint);
  --sv-warning: var(--sv-color-amber-text);
  --sv-warning-bg: var(--sv-color-amber-tint);
  --sv-info: var(--sv-color-blue-text);
  --sv-info-bg: var(--sv-color-blue-tint);
  --sv-pill-bg: var(--sv-color-paper);
  --sv-pill-text: var(--sv-color-muted);
  --sv-ink-text: var(--sv-color-on-ink);
  --sv-ink-text-body: var(--sv-color-on-ink-body);
  --sv-ink-text-muted: var(--sv-color-on-ink-muted);
  --sv-ink-kicker: var(--sv-color-on-ink-kicker);
  --sv-ink-line: var(--sv-color-ink-line);
  --sv-ink-line-strong: var(--sv-color-ink-line-strong);
  --sv-ink-raised: var(--sv-color-ink-raised);
  color-scheme: light;
}
[data-sv-preset="dojo"] {
}
[data-sv-preset="heritage"] {
  color-scheme: dark;
  --sv-bg: var(--sv-color-heritage-ink-950);
  --sv-bg-raised: var(--sv-color-heritage-ink-900);
  --sv-bg-alt: var(--sv-color-heritage-ink-850);
  --sv-bg-sunken: var(--sv-color-heritage-ink-850);
  --sv-bg-row: var(--sv-color-heritage-ink-900);
  --sv-bg-overlay: var(--sv-color-heritage-ink-800);
  --sv-bg-input: var(--sv-color-heritage-ink-850);
  --sv-bg-brand: var(--sv-color-heritage-green-900);
  --sv-bg-brand-deep: var(--sv-color-heritage-green-950);
  --sv-bg-brand-raised: var(--sv-color-heritage-green-800);
  --sv-bg-highlight: var(--sv-color-heritage-warm-950);
  --sv-text: var(--sv-color-heritage-ivory-100);
  --sv-text-body: var(--sv-color-heritage-ivory-300);
  --sv-text-muted: var(--sv-color-heritage-ivory-500);
  --sv-text-on-accent: var(--sv-color-heritage-ink-950);
  --sv-accent: var(--sv-color-heritage-gold-500);
  --sv-accent-strong: var(--sv-color-heritage-gold-300);
  --sv-accent-text: var(--sv-color-heritage-gold-600);
  --sv-accent-secondary: var(--sv-color-heritage-gold-500);
  --sv-accent-secondary-text: var(--sv-color-heritage-gold-300);
  --sv-text-on-accent-secondary: var(--sv-color-heritage-ink-950);
  --sv-line: var(--sv-color-heritage-hairline-gold);
  --sv-line-strong: var(--sv-color-heritage-hairline-gold-strong);
  --sv-line-neutral: var(--sv-color-heritage-hairline);
  --sv-line-input: var(--sv-color-heritage-gold-700);
  --sv-highlight-border: var(--sv-color-heritage-copper-500);
  --sv-focus: var(--sv-color-heritage-gold-300);
  --sv-danger: var(--sv-color-heritage-red-400);
  --sv-danger-bg: var(--sv-color-heritage-red-900);
  --sv-pill-bg: var(--sv-color-heritage-ink-850);
  --sv-pill-text: var(--sv-color-heritage-ivory-300);
  --sv-ink-text: var(--sv-color-heritage-ivory-100);
  --sv-ink-text-body: var(--sv-color-heritage-ivory-300);
  --sv-ink-text-muted: var(--sv-color-heritage-ivory-500);
  --sv-ink-kicker: var(--sv-color-heritage-gold-300);
  --sv-ink-line: var(--sv-color-heritage-hairline-gold);
  --sv-ink-line-strong: var(--sv-color-heritage-hairline-gold-strong);
  --sv-ink-raised: var(--sv-color-heritage-green-800);
}

/* ---- fonts.css ---- */
/* Self-hosted typefaces (all freely licensed, see fonts/LICENSES).
   Nothing is loaded from third-party servers: faster where Google services are
   slow or blocked, and no visitor data leaves the site.
   Browsers download a file only when a page actually uses it. */

/* DejaVu Sans / DejaVu Serif, Latin only — the Latin typefaces of the SAVANTAR DOJO design
   packages (2026-10-15): wordmark, small labels, English text, and the serif display words
   ("BEYOND POWER."). Subset to Latin by scripts/build.py's README recipe (Bitstream Vera
   licence, fonts/LICENSES/DejaVu-LICENSE.txt).
   "SV Sans Latin" leaves out the space so Persian, Arabic and Urdu lines keep the spacing of
   their own typeface; "SV Sans Latin Full" (the same file) is used on Latin-script pages. */
@font-face {
  font-family: "SV Sans Latin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dejavu-sans-latin-400-normal.474c69efea5d.woff2") format("woff2");
  unicode-range: U+0021-007E, U+00A1-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2012-2027, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}
@font-face {
  font-family: "SV Sans Latin";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dejavu-sans-latin-700-normal.25548c01d84c.woff2") format("woff2");
  unicode-range: U+0021-007E, U+00A1-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2012-2027, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}
@font-face {
  font-family: "SV Sans Latin Full";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dejavu-sans-latin-400-normal.474c69efea5d.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}
@font-face {
  font-family: "SV Sans Latin Full";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dejavu-sans-latin-700-normal.25548c01d84c.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}
@font-face {
  font-family: "SV Serif Latin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dejavu-serif-latin-400-normal.190b3aac794b.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2190-2199;
}

/* Cormorant Garamond — display serif of the heritage preset (Latin). Default figures are old-style. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-normal.87d22046a89f.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: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-italic.aa6bdaf51a40.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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-normal.efeea72c7a42.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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-normal.bf1e09fb81d7.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;
}

/* Inter — interface and body text of the heritage preset (Latin). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.da03732a27e1.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: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.51205681a1ba.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: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.2ede57db1a3a.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;
}

/* Vazirmatn — Persian and Arabic (with its own matching Latin). */
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/vazirmatn-arabic-300-normal.e5389dc5ca6a.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/vazirmatn-latin-300-normal.5f4b177978d3.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: "Vazirmatn";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/vazirmatn-arabic-400-normal.49c0cc018008.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/vazirmatn-latin-400-normal.274c04027519.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: "Vazirmatn";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/vazirmatn-arabic-500-normal.b58020ccff5c.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/vazirmatn-latin-500-normal.145eca13ab3c.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: "Vazirmatn";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/vazirmatn-arabic-700-normal.51265c214faf.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/vazirmatn-latin-700-normal.3e39c91b17cd.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;
}

/* Noto Nastaliq Urdu — the script Urdu readers expect. Needs tall lines. */
@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-nastaliq-urdu-arabic-400-normal.1d9ba7ff26a9.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-nastaliq-urdu-arabic-700-normal.05bf8c16d8dd.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

/* ---- base.css ---- */
/* Base: reset, typography per preset and script, layout primitives.
   All spacing uses logical properties (margin-inline-start, not margin-left),
   so one stylesheet serves right-to-left and left-to-right pages. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---- typefaces
   dojo (default), as in all five design PDFs: a Persian or Arabic line is set in Vazirmatn
   from end to end, including its punctuation and any Latin word inside it ("PDF", "BJJ");
   a run that is entirely Latin (wordmark, labels, codes, phone numbers, e-mails) is set in
   DejaVu Sans; Urdu in Noto Nastaliq Urdu. DejaVu also draws the few signs Vazirmatn lacks
   (arrows). heritage: Cormorant Garamond headings and Inter text, Vazirmatn / Nastaliq for RTL. */
html {
  --sv-font-display: var(--sv-font-sans);
  --sv-font-body: var(--sv-font-sans);
  --sv-heading-weight: 700;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--sv-bg);
}
/* Latin-script pages: the full DejaVu Sans face, spaces included. */
html:lang(en) {
  --sv-font-display: "SV Sans Latin Full", var(--sv-font-latin);
  --sv-font-body: "SV Sans Latin Full", var(--sv-font-latin);
}
/* One typographic scale for every language (Khashayar, 2026-10-22: changing the language changes
   only the language, never the look): the Persian design's line heights. Only Urdu differs,
   because Nastaliq's tall letters need taller lines to stay readable. */
html {
  --sv-leading-body: 1.95;
  --sv-leading-heading: 1.55;
}
/* Urdu: Nastaliq has very tall ascenders and descenders, and looks smaller than other scripts
   at the same size: scale the whole page a little. */
html:lang(ur) {
  font-size: 112.5%;
  --sv-font-display: var(--sv-font-nastaliq);
  --sv-font-body: var(--sv-font-nastaliq);
  --sv-leading-body: 2.35;
  --sv-leading-heading: 2;
  --sv-heading-weight: 400;
}

html[data-sv-preset="heritage"] {
  --sv-font-display: var(--sv-font-heritage-display);
  --sv-font-body: var(--sv-font-heritage-body);
  --sv-leading-body: 1.7;
  --sv-leading-heading: 1.08;
  --sv-heading-weight: 400;
}
html[data-sv-preset="heritage"]:lang(fa),
html[data-sv-preset="heritage"]:lang(ar) {
  --sv-font-display: Vazirmatn, Tahoma, sans-serif;
  --sv-font-body: Vazirmatn, Tahoma, sans-serif;
  --sv-leading-body: 1.95;
  --sv-leading-heading: 1.45;
  --sv-heading-weight: 300;
}
html[data-sv-preset="heritage"]:lang(ur) {
  --sv-font-display: var(--sv-font-nastaliq);
  --sv-font-body: var(--sv-font-nastaliq);
  --sv-leading-body: 2.35;
  --sv-leading-heading: 1.95;
  --sv-heading-weight: 400;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-wrap: break-word; /* a long web address or email wraps instead of widening the page */
  background: var(--sv-bg);
  color: var(--sv-text);
  font-family: var(--sv-font-body);
  font-size: var(--sv-size-md);
  line-height: var(--sv-leading-body);
  letter-spacing: var(--sv-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Arabic script never takes letter-spacing: it breaks the joins between letters. */
html:lang(fa) body,
html:lang(ar) body,
html:lang(ur) body {
  letter-spacing: 0;
}

/* Inline text in another script keeps its own typeface: elements that carry their own lang
   attribute (a Persian name on an English page, a language's name in the language menu…).
   Arabic-script text never takes letter-spacing. */
[lang]:not(html):is(:lang(fa), :lang(ar)) {
  font-family: var(--sv-font-sans);
  letter-spacing: 0;
}
[lang]:not(html):lang(ur) {
  font-family: var(--sv-font-nastaliq);
  letter-spacing: 0;
  line-height: 2.2;
}
/* Urdu pages: Nastaliq's tall ascenders and descenders need taller lines in headings. */
html:lang(ur) :is(h1, h2, h3, h4) {
  line-height: var(--sv-leading-heading);
}
html:lang(fa) :lang(en),
html:lang(ar) :lang(en),
html:lang(ur) :lang(en) {
  font-family: var(--sv-font-latin);
}
html[data-sv-preset="heritage"]:is(:lang(fa), :lang(ar), :lang(ur)) :lang(en) {
  font-family: var(--sv-font-heritage-body);
}
/* Keys, codes and IDs keep the monospace face on every page. */
:is(:lang(fa), :lang(ar), :lang(ur)) :is(code, kbd, samp, .sv-codes, .sv-idcard__id, .sv-area__host) {
  font-family: var(--sv-font-mono);
  line-height: var(--sv-leading-body);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button {
  cursor: pointer;
}
a,
button,
input,
select,
textarea,
summary {
  touch-action: manipulation;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--sv-text);
  font-family: var(--sv-font-display);
  font-weight: var(--sv-heading-weight);
  line-height: var(--sv-leading-heading);
  text-wrap: balance;
}
h1 {
  font-size: var(--sv-size-4xl);
}
h2 {
  font-size: var(--sv-size-3xl);
}
h3 {
  font-size: var(--sv-size-2xl);
}
h4 {
  font-size: var(--sv-size-xl);
}

p,
ul,
ol,
dl,
blockquote,
figure {
  margin: 0;
}
p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.25em;
  transition: color var(--sv-motion-fast) var(--sv-motion-ease);
}
a:hover {
  color: var(--sv-accent-text);
}

:focus-visible {
  outline: 3px solid var(--sv-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--sv-accent);
  color: var(--sv-text-on-accent);
}

hr {
  border: 0;
  border-block-start: 1px solid var(--sv-line);
  margin-block: var(--sv-space-6);
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ---- dark sections inside a light page (and the other way round in the heritage preset):
   every component reads the same semantic tokens, so it draws itself correctly on ink. */
.sv-ink {
  --sv-bg: var(--sv-bg-brand);
  --sv-bg-raised: var(--sv-ink-raised);
  --sv-bg-alt: var(--sv-ink-raised);
  --sv-bg-sunken: var(--sv-ink-raised);
  --sv-bg-input: var(--sv-ink-raised);
  --sv-text: var(--sv-ink-text);
  --sv-text-body: var(--sv-ink-text-body);
  --sv-text-muted: var(--sv-ink-text-muted);
  --sv-accent-text: var(--sv-color-red-soft);
  --sv-accent-secondary: var(--sv-ink-text);
  --sv-accent-secondary-text: var(--sv-ink-text);
  --sv-text-on-accent-secondary: var(--sv-color-ink);
  --sv-line: var(--sv-ink-line);
  --sv-line-strong: var(--sv-ink-line-strong);
  --sv-line-neutral: var(--sv-ink-line);
  --sv-line-input: var(--sv-ink-line-strong);
  --sv-pill-bg: var(--sv-ink-raised);
  --sv-pill-text: var(--sv-ink-text);
  background: var(--sv-bg);
  color: var(--sv-text);
  color-scheme: dark;
}
.sv-paper {
  background: var(--sv-bg);
  color: var(--sv-text);
}

/* Phone numbers, IDs, e-mails and codes always read left-to-right, even on RTL pages. */
.sv-ltr,
bdi.sv-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}
/* On Persian and Arabic pages, a run that is entirely Latin (marked dir="ltr" or .sv-ltr) takes
   the Latin face, like the design's Latin labels. :where() keeps this at zero specificity, so a
   component that sets its own face (form fields, the serif display words) keeps it. */
:where(html:lang(fa), html:lang(ar)) :where([dir="ltr"], .sv-ltr, .sv-latin-face) {
  font-family: var(--sv-font-latin);
}
.sv-latin-face {
  font-family: var(--sv-font-latin);
}
/* Isolated values (emails, web addresses, codes) have no natural break points: inside cards
   and grids they may break anywhere rather than widen the page on a phone. */
.sv-ltr,
bdi {
  overflow-wrap: anywhere;
}

/* Latin labels of the design: DejaVu Sans, spaced capitals ("THE ART OF DEFENSE"). */
.sv-latin {
  font-family: var(--sv-font-latin);
  letter-spacing: var(--sv-tracking-label);
  text-transform: uppercase;
}

/* ---- accessibility helpers */
.sv-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sv-skip-link {
  position: absolute;
  inset-inline-start: var(--sv-space-4);
  inset-block-start: -100px;
  z-index: 100;
  padding: var(--sv-space-3) var(--sv-space-5);
  background: var(--sv-color-white);
  color: var(--sv-color-ink);
  font-weight: 700;
  text-decoration: none;
}
.sv-skip-link:focus {
  inset-block-start: var(--sv-space-4);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- layout primitives */
.sv-container {
  inline-size: 100%;
  max-inline-size: calc(var(--sv-layout-max-width) + 2 * var(--sv-layout-gutter));
  margin-inline: auto;
  padding-inline: var(--sv-layout-gutter);
}
.sv-container--narrow {
  max-inline-size: calc(var(--sv-layout-narrow) + 2 * var(--sv-layout-gutter));
}

.sv-stack > * + * {
  margin-block-start: var(--sv-stack-gap, var(--sv-space-4));
}
.sv-stack--lg {
  --sv-stack-gap: var(--sv-space-6);
}
.sv-stack--sm {
  --sv-stack-gap: var(--sv-space-2);
}

.sv-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-cluster-gap, var(--sv-space-4));
}

.sv-cluster--center {
  justify-content: center;
}

/* Card grid: as many columns as fit; a card is never wider than --sv-grid-max, so one or
   two cards stay card-sized (centred) instead of stretching across the page. */
.sv-grid {
  display: grid;
  gap: var(--sv-grid-gap, var(--sv-space-5));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sv-grid-min, 280px)), var(--sv-grid-max, 26rem)));
  justify-content: center;
}
.sv-grid--fill {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sv-grid-min, 280px)), 1fr));
}

.sv-center {
  text-align: center;
}
.sv-measure {
  max-inline-size: 62ch;
}
.sv-center .sv-measure,
.sv-measure.sv-center {
  margin-inline: auto;
}

/* Icons from the sprite: <svg class="sv-icon"><use href="…/sprite.svg#arrow"></use></svg> */
.sv-icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir="rtl"] .sv-icon--directional {
  transform: scaleX(-1);
}

/* Numbered lists count in the page's digits (D35: Persian digits on Persian pages). */
ol:lang(fa) {
  list-style-type: persian;
}

/* ---- components.css ---- */
/* Components for public pages. Class names are prefixed sv- so the theme can be dropped
   into any site of the holding without clashing with its own styles.
   v2 follows the SAVANTAR DOJO design packages (2026-10-15): paper pages, ink bands, red
   accents, white cards, Vazirmatn with DejaVu Sans for Latin labels. */

/* ------------------------------------------------------------------ type */
/* Kicker: a short red rule before a line of text ("— آکادمی جوجیتسو ساوانتار"). */
.sv-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--sv-text-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}
.sv-kicker::before {
  content: "";
  inline-size: 24px;
  block-size: 2px;
  flex: none;
  background: var(--sv-accent);
}
.sv-ink .sv-kicker {
  color: var(--sv-ink-kicker);
}
.sv-kicker--above {
  display: grid;
  justify-items: start;
  gap: 14px;
}

/* Section label: small spaced Latin capitals ("02 / JIU-JITSU IN SCHOOLS"). */
.sv-overline {
  display: block;
  color: var(--sv-text-muted);
  font-family: var(--sv-font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.6;
}
.sv-overline:lang(en),
.sv-overline :lang(en) {
  font-family: var(--sv-font-latin);
  letter-spacing: var(--sv-tracking-label);
  text-transform: uppercase;
}
.sv-overline--wide:lang(en),
.sv-overline--wide :lang(en) {
  letter-spacing: var(--sv-tracking-wide);
}

.sv-eyebrow {
  display: inline-block;
  color: var(--sv-accent-text);
  font-size: var(--sv-size-sm);
  font-weight: 700;
  line-height: 1.6;
}

.sv-display {
  font-size: var(--sv-size-5xl);
  line-height: 1.45;
}
.sv-title {
  font-size: var(--sv-size-4xl);
}
.sv-subtitle {
  font-size: var(--sv-size-2xl);
}
.sv-caps {
  font-family: var(--sv-font-latin);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}
.sv-caps:is(:lang(fa), :lang(ar), :lang(ur)) {
  font-family: var(--sv-font-body);
  letter-spacing: 0;
  text-transform: none;
}
.sv-lead {
  color: var(--sv-text-body);
  font-size: var(--sv-size-lg);
  line-height: 2;
}
.sv-muted {
  color: var(--sv-text-muted);
}
.sv-gold,
.sv-red {
  color: var(--sv-accent-text);
}
.sv-numeral {
  color: var(--sv-accent);
  font-family: var(--sv-font-latin);
  font-weight: 700;
  line-height: 1;
}
.sv-dot {
  color: var(--sv-accent);
}


/* ------------------------------------------------------------------ buttons
   Text at the start, arrow pushed to the far end (as in the designs). */
.sv-button {
  --sv-button-bg: var(--sv-bg-raised);
  --sv-button-fg: var(--sv-text);
  --sv-button-border: var(--sv-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-5);
  min-block-size: 48px;
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--sv-button-border);
  border-radius: var(--sv-radius-xs);
  background: var(--sv-button-bg);
  color: var(--sv-button-fg);
  cursor: pointer;
  font-family: var(--sv-font-body);
  font-size: var(--sv-size-sm);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--sv-motion-base) var(--sv-motion-ease),
    color var(--sv-motion-base) var(--sv-motion-ease),
    border-color var(--sv-motion-base) var(--sv-motion-ease);
}
.sv-button:hover {
  --sv-button-border: var(--sv-text);
  color: var(--sv-button-fg);
}
.sv-button .sv-icon {
  inline-size: 1.35em;
  block-size: 1.35em;
}
.sv-button--arrow {
  justify-content: space-between;
  text-align: start;
}
/* red: the main call to action */
.sv-button--red,
.sv-button--accent2,
.sv-button--solid {
  --sv-button-bg: var(--sv-accent);
  --sv-button-fg: var(--sv-text-on-accent);
  --sv-button-border: var(--sv-accent);
}
.sv-button--red:hover,
.sv-button--accent2:hover,
.sv-button--solid:hover {
  --sv-button-bg: var(--sv-accent-strong);
  --sv-button-border: var(--sv-accent-strong);
}
/* ink: secondary solid (on red bands, sign-in) */
.sv-button--ink {
  --sv-button-bg: var(--sv-accent-secondary);
  --sv-button-fg: var(--sv-text-on-accent-secondary);
  --sv-button-border: var(--sv-accent-secondary);
}
.sv-button--ink:hover {
  --sv-button-bg: var(--sv-bg-brand-raised);
  --sv-button-border: var(--sv-bg-brand-raised);
}
.sv-ink .sv-button--ink:hover {
  --sv-button-bg: var(--sv-color-white);
  --sv-button-border: var(--sv-color-white);
}
.sv-button--quiet {
  --sv-button-bg: transparent;
  --sv-button-fg: var(--sv-text);
  --sv-button-border: var(--sv-line-strong);
}
.sv-button--danger {
  --sv-button-bg: var(--sv-danger-bg);
  --sv-button-fg: var(--sv-danger);
  --sv-button-border: var(--sv-danger);
}
.sv-button--off,
.sv-button[disabled],
.sv-button[aria-disabled="true"] {
  --sv-button-bg: var(--sv-color-rule);
  --sv-button-fg: var(--sv-color-muted);
  --sv-button-border: var(--sv-color-rule);
  cursor: not-allowed;
}
.sv-button[disabled],
.sv-button[aria-disabled="true"] {
  pointer-events: none;
}
.sv-button--sm {
  min-block-size: 40px;
  padding: 0.45rem 1rem;
  font-size: var(--sv-size-xs);
}
.sv-button--lg {
  min-block-size: 58px;
  padding-inline: 1.5rem;
  font-size: 1rem;
}
.sv-button--block {
  inline-size: 100%;
}

/* underlined text link with an arrow ("کلاس‌ها را بشناس ←") */
.sv-link-line {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-6);
  min-inline-size: 166px;
  padding-block: 10px;
  border-block-end: 1px solid var(--sv-line-strong);
  color: var(--sv-text);
  font-size: var(--sv-size-sm);
  text-decoration: none;
}
.sv-link-line:hover {
  border-color: var(--sv-accent);
  color: var(--sv-text);
}
.sv-ink .sv-link-line {
  border-color: #77756e;
}

/* bold text link with an arrow ("مشاهده شهر / محدوده ←") */
.sv-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  color: var(--sv-text);
  font-size: var(--sv-size-sm);
  font-weight: 700;
  text-decoration: none;
}
.sv-link-arrow .sv-icon {
  transition: transform var(--sv-motion-base) var(--sv-motion-ease);
}
.sv-link-arrow:hover .sv-icon {
  transform: translateX(4px);
}
[dir="rtl"] .sv-link-arrow:hover .sv-icon {
  transform: scaleX(-1) translateX(4px);
}

/* ------------------------------------------------------------------ pills and badges */
.sv-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-block-size: 34px;
  padding: 0.25rem 1.1rem;
  border-radius: 17px;
  background: var(--sv-pill-bg);
  color: var(--sv-pill-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.sv-pill--wide {
  min-inline-size: 240px;
}
.sv-pill--red {
  background: var(--sv-color-red-tint);
  color: var(--sv-color-red-text);
}
.sv-pill--green {
  background: var(--sv-color-green-tint);
  color: var(--sv-color-green-text);
}
.sv-pill--ink {
  background: var(--sv-color-ink-raised);
  color: var(--sv-color-on-ink);
}
.sv-pill--white {
  background: var(--sv-color-white);
  color: var(--sv-color-text);
}
.sv-pill--amber {
  background: var(--sv-color-amber-tint);
  color: var(--sv-color-amber-text);
}
.sv-pill--sm {
  min-block-size: 26px;
  padding-inline: 0.75rem;
  font-size: 0.6875rem;
}

.sv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.75em;
  border-radius: var(--sv-radius-pill);
  background: var(--sv-pill-bg);
  color: var(--sv-pill-text);
  font-size: var(--sv-size-xs);
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.sv-badge--gold,
.sv-badge--accent2 {
  background: var(--sv-color-red-tint);
  color: var(--sv-color-red-text);
}
.sv-badge--success {
  background: var(--sv-success-bg);
  color: var(--sv-success);
}
.sv-badge--warning {
  background: var(--sv-warning-bg);
  color: var(--sv-warning);
}
.sv-badge--danger {
  background: var(--sv-danger-bg);
  color: var(--sv-danger);
}
.sv-badge--info {
  background: var(--sv-info-bg);
  color: var(--sv-info);
}

/* ------------------------------------------------------------------ brand (logo + wordmark) */
.sv-brand {
  display: inline-flex;
  align-items: center;
  gap: 27px;
  color: var(--sv-text);
  text-decoration: none;
  flex: none;
}
.sv-brand:hover {
  color: var(--sv-text);
}
.sv-brand__mark {
  flex: none;
  inline-size: 58px;
  block-size: 58px;
}
.sv-header .sv-brand {
  margin-inline-start: 6px;
}
.sv-brand__text {
  display: grid;
  gap: 7px;
  margin-block-start: -6px;
  direction: ltr;
  text-align: start;
  line-height: 1;
}
.sv-brand__name {
  color: var(--sv-text);
  font-family: var(--sv-font-latin);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.017em;
  white-space: nowrap;
}
.sv-brand__tagline {
  color: var(--sv-text);
  font-family: var(--sv-font-latin);
  font-size: 0.5rem;
  letter-spacing: 0.435em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sv-brand__name:is(:lang(fa), :lang(ar), :lang(ur)),
.sv-brand__tagline:is(:lang(fa), :lang(ar), :lang(ur)) {
  font-family: var(--sv-font-body);
  letter-spacing: 0;
}

/* ------------------------------------------------------------------ header */
.sv-header {
  position: relative;
  z-index: 20;
}
.sv-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-5);
  min-block-size: 34px;
  padding-block-start: 4px;
  background: linear-gradient(var(--sv-line), var(--sv-line)) 50% 100% / calc(100% - 2 * var(--sv-layout-gutter)) 1px no-repeat;
  color: #b5b3ac;
  font-family: var(--sv-font-latin);
  font-size: 0.5625rem;
  letter-spacing: 0.173em;
  text-transform: uppercase;
  direction: ltr;
}
.sv-topbar__place {
  display: inline-flex;
  gap: 1.9em;
  padding-inline-end: 128px;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
}
.sv-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sv-space-6);
  min-block-size: 93px;
  background: linear-gradient(var(--sv-line), var(--sv-line)) 50% 100% / calc(100% - 2 * var(--sv-layout-gutter)) 1px no-repeat;
}
.sv-header__inner > .sv-brand {
  order: 0;
}
.sv-nav {
  display: none;
  flex: 1;
  justify-content: flex-start;
  align-self: stretch;
  margin-inline-start: -41px;
}
.sv-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-nav__list > li {
  display: flex;
}
.sv-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-inline: 40px;
  padding-block-end: 10px;
  color: var(--sv-text);
  font-size: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}
.sv-nav__link:hover {
  color: var(--sv-text);
}
.sv-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 18px;
  block-size: 2px;
  background: transparent;
  transition: background-color var(--sv-motion-base) var(--sv-motion-ease);
}
.sv-nav__link:hover::after {
  background: var(--sv-ink-line-strong);
}
.sv-nav__link[aria-current="page"]::after {
  background: var(--sv-accent);
}

.sv-header__actions {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-inline-start: auto;
}
.sv-header__cta {
  display: none;
  min-inline-size: 165px;
  min-block-size: 46px;
}
.sv-header__login {
  display: none;
}
.sv-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-2);
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: var(--sv-space-2);
  border: 0;
  background: transparent;
  color: var(--sv-text);
  cursor: pointer;
  font-size: var(--sv-size-sm);
  text-decoration: none;
}
.sv-menu-toggle .sv-icon {
  inline-size: 28px;
  block-size: 28px;
}
.sv-menu-toggle > span {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (min-width: 760px) {
  .sv-header__cta {
    display: inline-flex;
  }
}
/* Below this width the top bar shows the logo, the name and the menu button only
   (the designs' phone header), so it never wraps or scrolls sideways. */
@media (min-width: 1100px) {
  .sv-nav {
    display: flex;
  }
  .sv-header .sv-menu-toggle {
    display: none;
  }
}
@media (max-width: 1099px) {
  .sv-topbar {
    display: none;
  }
  .sv-header__inner {
    min-block-size: 78px;
  }
  .sv-header__inner > .sv-brand {
    gap: 14px;
  }
  .sv-brand__mark {
    inline-size: 44px;
    block-size: 44px;
  }
}
@media (max-width: 599px) {
  .sv-header__inner {
    gap: var(--sv-space-3);
    min-block-size: 70px;
  }
  .sv-header__actions {
    gap: var(--sv-space-2);
  }
  .sv-brand__name {
    font-size: 0.95rem;
  }
  .sv-brand__tagline {
    display: none;
  }
  .sv-brand__mark {
    inline-size: 38px;
    block-size: 38px;
  }
  .sv-header .sv-lang > summary > .sv-lang__name {
    display: none;
  }
}

.sv-header .sv-lang > summary {
  justify-content: center;
  min-inline-size: 44px;
}

/* language switcher (native <details>, works without JavaScript) */
.sv-lang {
  position: relative;
}
.sv-lang > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-block-size: 44px;
  padding: var(--sv-space-2);
  color: var(--sv-text);
  cursor: pointer;
  font-family: var(--sv-font-latin);
  font-size: 0.75rem;
  list-style: none;
}
.sv-lang > summary::-webkit-details-marker {
  display: none;
}
.sv-lang > summary .sv-icon {
  inline-size: 22px;
  block-size: 22px;
}
.sv-lang > summary:hover,
.sv-lang[open] > summary {
  color: var(--sv-accent);
}
.sv-lang > summary:focus-visible,
.sv-header__signin:focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: 2px;
}
.sv-header__signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-2);
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: var(--sv-space-2);
  border: 1px solid var(--sv-ink-line-strong);
  color: var(--sv-text);
  font-size: var(--sv-size-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--sv-motion-base) var(--sv-motion-ease), border-color var(--sv-motion-base) var(--sv-motion-ease);
}
.sv-header__signin:hover {
  color: var(--sv-accent);
  border-color: var(--sv-accent);
}
.sv-header__signin .sv-icon {
  inline-size: 20px;
  block-size: 20px;
}
.sv-header__signin > span {
  display: none;
}
@media (min-width: 1100px) {
  .sv-header__signin {
    padding-inline: var(--sv-space-4);
  }
  .sv-header__signin > span {
    display: inline;
  }
  .sv-header__actions {
    gap: 16px;
  }
}
/* mid-width desktops: tighter nav so the sign-in button still fits on one line */
@media (min-width: 1100px) and (max-width: 1599px) {
  .sv-nav {
    margin-inline-start: 0;
  }
  .sv-nav__link {
    padding-inline: 14px;
  }
}
/* narrow desktops (1100-1279): the sign-in button shows its icon only (its name stays as
   aria-label), the nav and the actions sit closer; the design's 165px CTA is kept */
@media (min-width: 1100px) and (max-width: 1279px) {
  .sv-header__signin {
    padding-inline: var(--sv-space-2);
  }
  .sv-header__signin > span {
    display: none;
  }
  .sv-header__actions {
    gap: 10px;
  }
  .sv-nav__list {
    gap: 8px;
  }
  .sv-nav__link {
    padding-inline: 9px;
  }
}
.sv-lang__list {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--sv-space-2));
  z-index: 30;
  min-inline-size: 180px;
  margin: 0;
  padding: var(--sv-space-2);
  border: 1px solid var(--sv-line);
  background: var(--sv-bg-raised);
  list-style: none;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
}
.sv-lang__list a {
  display: flex;
  justify-content: space-between;
  gap: var(--sv-space-4);
  padding: var(--sv-space-2) var(--sv-space-3);
  color: var(--sv-text);
  text-decoration: none;
}
.sv-lang__list a:hover,
.sv-lang__list a[aria-current="true"] {
  background: var(--sv-bg-sunken);
  color: var(--sv-text);
}
.sv-lang__list a[aria-current="true"]::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  margin-block: auto;
  border-radius: 50%;
  background: var(--sv-accent);
}
.sv-lang__code {
  color: var(--sv-text-muted);
  font-family: var(--sv-font-latin);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

/* full-screen menu (<dialog>) */
.sv-menu {
  inline-size: 100vw;
  max-inline-size: 100vw;
  block-size: 100vh;
  max-block-size: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
}
.sv-menu::backdrop {
  background: rgb(0 0 0 / 0.7);
}
.sv-menu[open] {
  display: block;
  animation: sv-fade-in var(--sv-motion-base) var(--sv-motion-ease);
}
.sv-menu__inner {
  display: grid;
  gap: var(--sv-space-7);
  min-block-size: 100%;
  padding-block: var(--sv-space-4) var(--sv-space-8);
}
.sv-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 70px;
  border-block-end: 1px solid var(--sv-line);
}
.sv-menu__top .sv-menu-toggle {
  display: inline-flex;
}
.sv-menu__body {
  display: grid;
  gap: var(--sv-space-8);
  align-content: start;
}
@media (min-width: 900px) {
  .sv-menu__body {
    grid-template-columns: 1.6fr 1fr;
  }
}
.sv-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-menu__list a {
  display: flex;
  align-items: baseline;
  gap: var(--sv-space-5);
  padding-block: var(--sv-space-3);
  border-block-end: 1px solid var(--sv-line);
  color: var(--sv-text);
  font-size: var(--sv-size-2xl);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.sv-menu__list a:hover,
.sv-menu__list a[aria-current="page"] {
  color: var(--sv-color-red-soft);
}
.sv-menu__num {
  min-inline-size: 2.4ch;
  color: var(--sv-accent);
  font-family: var(--sv-font-latin);
  font-size: var(--sv-size-xs);
  font-weight: 400;
}
.sv-menu__side {
  display: grid;
  gap: var(--sv-space-6);
  align-content: start;
}
.sv-menu__side a {
  color: var(--sv-text);
}

.sv-menu-open {
  overflow: hidden;
}

/* language buttons on sign-in and workspace pages */
.sv-langform {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sv-space-2);
}

@keyframes sv-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ footer */
.sv-footer {
  font-size: var(--sv-size-sm);
}
/* brand row exactly as in the About design: logo and motto at the start, name at the end */
.sv-footer__brandrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sv-space-5);
  min-block-size: 120px;
}
.sv-footer__motto {
  display: inline-flex;
  align-items: flex-start;
  gap: 36px;
  color: var(--sv-color-on-ink);
  font-size: 1.1875rem;
  line-height: 1.6;
  text-decoration: none;
}
.sv-footer__motto img {
  inline-size: 56px;
  block-size: 56px;
  margin-block-start: 27px;
}
.sv-footer__motto span {
  margin-block-start: 54px;
}
.sv-footer__word {
  display: grid;
  gap: 16px;
  margin-block-start: 41px;
  direction: ltr;
  text-align: start;
  line-height: 1;
}
.sv-footer__word b {
  color: var(--sv-color-on-ink);
  font-family: var(--sv-font-latin);
  font-size: 1.25rem;
  letter-spacing: 0.018em;
}
.sv-footer__word small {
  color: var(--sv-color-on-ink-muted);
  font-family: var(--sv-font-latin);
  font-size: 0.5625rem;
  letter-spacing: 0.193em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .sv-footer__brandrow {
    padding-block: 24px;
  }
  .sv-footer__motto img,
  .sv-footer__motto span,
  .sv-footer__word {
    margin-block-start: 0;
  }
  .sv-footer__motto {
    align-items: center;
    gap: 18px;
  }
}
.sv-footer__links {
  display: grid;
  gap: var(--sv-space-6);
  padding-block: var(--sv-space-6);
  border-block-start: 1px solid var(--sv-line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.sv-footer h2 {
  margin-block-end: var(--sv-space-3);
  color: var(--sv-text-muted);
  font-family: var(--sv-font-latin);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: var(--sv-tracking-label);
  text-transform: uppercase;
}
.sv-footer h2:is(:lang(fa), :lang(ar), :lang(ur)) {
  font-family: var(--sv-font-body);
  font-size: var(--sv-size-xs);
  letter-spacing: 0;
}
.sv-footer h2.sv-latin-face {
  font-family: var(--sv-font-latin); /* the brand name stays in the Latin face on every page */
}
.sv-footer ul {
  display: grid;
  gap: var(--sv-space-2);
  padding: 0;
  list-style: none;
}
.sv-footer a {
  color: var(--sv-text-body);
  text-decoration: none;
}
.sv-footer a:hover {
  color: var(--sv-text);
}
.sv-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sv-space-4);
  padding-block: var(--sv-space-5);
  border-block-start: 1px solid var(--sv-line);
  color: var(--sv-text-muted);
  font-size: var(--sv-size-xs);
}

/* ------------------------------------------------------------------ sections */
.sv-section {
  padding-block: var(--sv-space-section);
}
.sv-section--alt {
  background: var(--sv-bg-alt);
}
.sv-section--brand,
.sv-section--deep {
  background: var(--sv-bg-brand);
}
.sv-section--red {
  --sv-text: var(--sv-color-white);
  --sv-text-body: var(--sv-color-white);
  --sv-text-muted: #ffd9d6;
  --sv-line-strong: rgb(255 255 255 / 0.65);
  background: var(--sv-accent);
  color: var(--sv-color-white);
}
.sv-section--tight {
  padding-block: var(--sv-space-7);
}
.sv-section--flush {
  padding-block: 0;
}
.sv-section + .sv-section:not(.sv-section--alt, .sv-section--brand, .sv-section--deep, .sv-section--red, .sv-ink) {
  padding-block-start: 0;
}
.sv-ink + .sv-section,
.sv-section--red + .sv-section {
  padding-block-start: var(--sv-space-section);
}

.sv-section-head {
  display: grid;
  gap: var(--sv-space-3);
  margin-block-end: var(--sv-space-7);
}
.sv-section-head--center {
  justify-items: center;
  text-align: center;
}
.sv-section-head--center .sv-lead {
  max-inline-size: 60ch;
}
/* label row at the top of a section: Latin label at the far end, number at the start */
.sv-section__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--sv-space-4);
  margin-block-end: var(--sv-space-6);
}

/* page heading for inner pages: small Latin label, title, subtitle */
.sv-page-head {
  padding-block: 28px 44px;
}
.sv-page-head__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--sv-space-4);
  margin-block-end: 26px;
}
.sv-page-head h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: 1.6;
}
.sv-page-head__crumbs,
.sv-page-head .sv-lead {
  margin-block-start: 14px;
  color: var(--sv-text-muted);
  font-size: 0.9375rem;
  line-height: 1.9;
}
.sv-page-head__crumbs a {
  text-decoration: none;
}
.sv-page-head__crumbs a:hover {
  text-decoration: underline;
}
.sv-page-head__label {
  color: var(--sv-accent-text);
  font-size: var(--sv-size-sm);
  font-weight: 700;
}

/* ------------------------------------------------------------------ cards */
.sv-card {
  display: grid;
  align-content: start;
  gap: var(--sv-space-3);
  padding: 32px;
  border-radius: var(--sv-radius-sm);
  background: var(--sv-bg-raised);
  color: var(--sv-text);
}
.sv-card--ink {
  background: var(--sv-bg-brand);
}
.sv-card--sunken {
  background: var(--sv-bg-sunken);
}
.sv-card--line {
  border: 1px solid var(--sv-line);
}
.sv-card--interactive {
  position: relative;
  transition: box-shadow var(--sv-motion-base) var(--sv-motion-ease);
}
.sv-card--interactive:hover {
  box-shadow: 0 0 0 1px var(--sv-text);
}
.sv-card__media {
  margin: -32px -32px var(--sv-space-3);
  overflow: hidden;
  border-radius: var(--sv-radius-sm) var(--sv-radius-sm) 0 0;
  aspect-ratio: 4 / 3;
  background: var(--sv-bg-brand);
}
.sv-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.sv-card__title {
  font-size: var(--sv-size-xl);
}
.sv-card__link {
  color: var(--sv-text);
  text-decoration: none;
}
.sv-card--interactive:hover .sv-card__link,
.sv-card__link:focus-visible {
  color: var(--sv-text);
}
.sv-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sv-card p {
  color: var(--sv-text-body);
}

.sv-figure img {
  inline-size: 100%;
}
.sv-figure figcaption {
  margin-block-start: var(--sv-space-3);
  color: var(--sv-text-muted);
  font-size: var(--sv-size-sm);
}

/* a quiet pattern used where an image is missing */
.sv-placeholder {
  display: grid;
  place-items: center;
  min-block-size: 200px;
  color: var(--sv-text-muted);
  background:
    repeating-linear-gradient(45deg, rgb(17 17 16 / 0.05) 0 1px, transparent 1px 14px),
    var(--sv-bg-sunken);
}

/* ------------------------------------------------------------------ stat tiles (white, number above label) */
.sv-tiles {
  display: grid;
  gap: 48px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.sv-tile {
  display: grid;
  align-content: start;
  gap: 18px;
  min-block-size: 112px;
  padding: 18px;
  border-radius: var(--sv-radius-sm);
  background: var(--sv-bg-raised);
}
.sv-tile__value {
  color: var(--sv-text);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
.sv-tile__label {
  color: var(--sv-text-muted);
  font-size: 0.75rem;
}

/* ------------------------------------------------------------------ segmented choice (country tabs, kids/adult) */
.sv-segments {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(var(--sv-segments, 3), 1fr);
}
.sv-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 56px;
  padding: 0.5rem 1rem;
  border: 2px solid var(--sv-line);
  border-radius: var(--sv-radius-xs);
  background: var(--sv-bg-raised);
  color: var(--sv-text);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
.sv-segment:hover {
  border-color: var(--sv-text);
  color: var(--sv-text);
}
.sv-segment[aria-pressed="true"],
.sv-segment[aria-selected="true"],
.sv-segment[aria-current="true"],
.sv-segment[aria-current="page"] {
  border-color: var(--sv-accent);
  background: var(--sv-accent);
  color: var(--sv-text-on-accent);
}

/* ------------------------------------------------------------------ tables */
.sv-table-wrap {
  overflow-x: auto;
  border-radius: var(--sv-radius-sm);
  background: var(--sv-bg-raised);
}
.sv-table {
  min-inline-size: 640px;
  font-size: 0.875rem;
}
.sv-table th {
  padding: 18px 32px;
  background: var(--sv-bg-brand);
  color: var(--sv-color-on-ink);
  font-weight: 700;
  text-align: start;
}
.sv-table td {
  padding: 20px 32px;
  border-block-end: 1px solid var(--sv-line);
  color: var(--sv-text);
  text-align: start;
}
.sv-table tbody tr:nth-child(even) {
  background: var(--sv-bg-row);
}
.sv-table .sv-muted {
  color: var(--sv-text-muted);
}
.sv-table tr.sv-table__strong td {
  font-weight: 700;
}

/* ------------------------------------------------------------------ notes */
.sv-note {
  padding: 22px 32px 38px;
  border-radius: var(--sv-radius-xs);
  background: var(--sv-color-red-tint);
  color: var(--sv-text-muted);
  font-size: 0.9375rem;
  line-height: 1.9;
}
.sv-note--paper {
  background: var(--sv-bg-sunken);
}
.sv-note--green {
  background: var(--sv-color-green-tint);
  color: var(--sv-color-green-text);
}
.sv-note--error {
  color: var(--sv-color-red-text);
}
.sv-note--compact {
  padding: 16px 20px;
}

/* ------------------------------------------------------------------ rich text */
.sv-prose {
  color: var(--sv-text-body);
  font-size: var(--sv-size-lg);
  line-height: 2.25;
}
.sv-prose > * + * {
  margin-block-start: 1em;
}
.sv-prose h2 {
  margin-block-start: 1.6em;
  color: var(--sv-text);
  font-size: var(--sv-size-3xl);
}
.sv-prose h3 {
  margin-block-start: 1.4em;
  color: var(--sv-text);
  font-size: var(--sv-size-2xl);
}
.sv-prose ul,
.sv-prose ol {
  padding-inline-start: 1.4em;
}
.sv-prose li + li {
  margin-block-start: 0.4em;
}
.sv-prose li::marker {
  color: var(--sv-accent);
}
.sv-prose blockquote {
  padding-inline-start: var(--sv-space-5);
  border-inline-start: 3px solid var(--sv-accent);
  color: var(--sv-text);
  font-size: var(--sv-size-xl);
}
.sv-prose a {
  color: var(--sv-text);
  text-decoration: underline;
}
.sv-prose strong {
  color: var(--sv-text);
}

/* ------------------------------------------------------------------ tabs and pagination */
.sv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2);
  margin-block-end: var(--sv-space-6);
  border-block-end: 1px solid var(--sv-line);
}
.sv-tabs a {
  padding: var(--sv-space-3) var(--sv-space-4);
  border-block-end: 2px solid transparent;
  color: var(--sv-text-muted);
  font-weight: 700;
  text-decoration: none;
}
.sv-tabs a[aria-current="page"],
.sv-tabs a:hover {
  border-block-end-color: var(--sv-accent);
  color: var(--sv-text);
}

.sv-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sv-space-2);
  margin-block-start: var(--sv-space-8);
}
.sv-pagination a,
.sv-pagination span {
  min-inline-size: 44px;
  padding: var(--sv-space-2) var(--sv-space-3);
  border: 1px solid var(--sv-line);
  background: var(--sv-bg-raised);
  color: var(--sv-text);
  text-align: center;
  text-decoration: none;
}
.sv-pagination [aria-current="page"] {
  border-color: var(--sv-accent);
  background: var(--sv-accent);
  color: var(--sv-text-on-accent);
}

/* ------------------------------------------------------------------ forms */
.sv-form {
  display: grid;
  gap: var(--sv-space-5);
}
.sv-form-grid {
  display: grid;
  gap: 22px 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.sv-form-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sv-form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sv-span-all {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .sv-form-grid--2,
  .sv-form-grid--3 {
    grid-template-columns: 1fr;
  }
}
.sv-field {
  display: grid;
  align-content: start;
  gap: 10px;
}
.sv-label {
  color: var(--sv-text);
  font-size: 0.8125rem;
  font-weight: 700;
}
.sv-required {
  color: var(--sv-accent-text);
}
.sv-input,
.sv-select,
.sv-textarea,
.sv-field input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]),
.sv-field select,
.sv-field textarea {
  inline-size: 100%;
  min-block-size: 54px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--sv-line-input);
  border-radius: var(--sv-radius-xs);
  background: var(--sv-bg-input);
  color: var(--sv-text);
  font-size: 0.9375rem;
  transition: border-color var(--sv-motion-fast) var(--sv-motion-ease);
}
.sv-field ::placeholder,
.sv-input::placeholder {
  color: var(--sv-text-muted);
  opacity: 1;
}
.sv-field textarea,
.sv-textarea {
  min-block-size: 120px;
  resize: vertical;
}
.sv-field input:hover,
.sv-field select:hover,
.sv-field textarea:hover {
  border-color: var(--sv-line-strong);
}
.sv-field input:focus-visible,
.sv-field select:focus-visible,
.sv-field textarea:focus-visible {
  border-color: var(--sv-accent);
  outline: 2px solid var(--sv-accent);
  outline-offset: 0;
}
.sv-field [aria-invalid="true"] {
  border-color: var(--sv-danger);
}
.sv-help {
  color: var(--sv-text-muted);
  font-size: 0.8125rem;
  line-height: 1.8;
}
.sv-error,
.sv-errorlist {
  margin: 0;
  padding: 0;
  color: var(--sv-danger);
  font-size: 0.8125rem;
  list-style: none;
}
.sv-date {
  display: grid;
  grid-template-columns: 1fr 1.7fr 1.3fr;
  gap: var(--sv-space-2);
}
.sv-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  color: var(--sv-text);
  font-size: 0.875rem;
}
.sv-check input {
  inline-size: 20px;
  block-size: 20px;
  margin: 0.25em 0 0;
  accent-color: var(--sv-accent);
}
.sv-fieldset {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 20px;
  border: 0;
  border-radius: var(--sv-radius-xs);
  background: var(--sv-bg-sunken);
}
.sv-fieldset legend {
  float: inline-start;
  inline-size: 100%;
  margin-block-end: 4px;
  padding: 0;
  color: var(--sv-text);
  font-size: 1.0625rem;
  font-weight: 700;
}
.sv-fieldset--plain {
  padding: 0;
  background: none;
}
.sv-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-5);
}
/* bots fill every field; people never see this one */
.sv-hp {
  position: absolute !important;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ alerts and notices */
.sv-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sv-space-3);
  padding: var(--sv-space-4) var(--sv-space-5);
  border-inline-start: 3px solid var(--sv-line-strong);
  border-radius: var(--sv-radius-xs);
  background: var(--sv-bg-raised);
  color: var(--sv-text);
}
.sv-alert--success {
  border-color: var(--sv-success);
  background: var(--sv-success-bg);
}
.sv-alert--error {
  border-color: var(--sv-danger);
  background: var(--sv-danger-bg);
}
.sv-alert--warning {
  border-color: var(--sv-warning);
  background: var(--sv-warning-bg);
}
.sv-alert--info {
  border-color: var(--sv-info);
  background: var(--sv-info-bg);
}
.sv-messages {
  display: grid;
  gap: var(--sv-space-3);
  margin-block: var(--sv-space-5);
}

.sv-soon {
  display: grid;
  justify-items: center;
  gap: var(--sv-space-4);
  padding-block: var(--sv-space-9);
  text-align: center;
}

/* ------------------------------------------------------------------ holding page (before launch) */
.sv-holding {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  padding: var(--sv-space-8) var(--sv-layout-gutter);
  background: var(--sv-bg-brand);
  color: var(--sv-color-on-ink);
  text-align: center;
}
.sv-holding h1 {
  color: var(--sv-color-on-ink);
}
.sv-holding__inner {
  display: grid;
  justify-items: center;
  gap: var(--sv-space-5);
  max-inline-size: 42rem;
}
.sv-holding__mark {
  inline-size: 112px;
  block-size: 112px;
}

/* old ornament divider: in the dojo look a thin rule */
.sv-divider {
  block-size: 1px;
  margin-block: var(--sv-space-7);
  margin-inline: auto;
  max-inline-size: min(1296px, 92%);
  background: var(--sv-line);
}
.sv-divider--short {
  max-inline-size: 64px;
  block-size: 2px;
  margin-block: var(--sv-space-5);
  background: var(--sv-accent);
}

/* ---- sections.css ---- */
/* Page sections (StreamField blocks) of the SAVANTAR DOJO designs: the Home and About pages
   (Savantar_Dojo_Homepage_Concept.pdf, Savantar_About_Page_Visual_Concept.pdf), then the
   older general-purpose sections, restyled.

   Values are measured from the design PDFs at 1440 px (docs/design/README.md): font sizes,
   colours and letter-spacing as drawn; vertical spacing set so that text baselines land where
   the designs have them. Large type scales down with the viewport below 1440 px. */

/* =================================================================== shared frame */
.sv-block {
  position: relative;
  padding-block: 48px 80px;
}
.sv-block > .sv-container {
  position: relative;
}
/* Latin section label ("02 / JIU-JITSU IN SCHOOLS"): top of the end column, outside the flow,
   its baseline 60 px below the top of the section. */
.sv-block__label {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: var(--sv-layout-gutter);
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.6;
}
.sv-block__label :lang(en),
.sv-block__label:lang(en) {
  letter-spacing: 0.16em;
}
.sv-ink .sv-block__label {
  color: var(--sv-ink-text-muted);
}
.sv-block__title {
  font-size: clamp(1.75rem, 2.92vw, 2.625rem);
  line-height: 1.5;
}
.sv-block__title--mark {
  position: relative;
}
.sv-block__title--mark::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: 2px;
  inline-size: 28px;
  block-size: 2px;
  background: var(--sv-accent);
}
.sv-block__text {
  color: var(--sv-text-body);
  font-size: 1.25rem;
  line-height: 1.95;
}
.sv-block__text > * + * {
  margin-block-start: 13px;
}
.sv-ink .sv-block__text {
  font-size: 1.1875rem;
  line-height: 1.963;
}
.sv-ink .sv-block__text > * + * {
  margin-block-start: 12.7px;
}
.sv-block__label--end {
  text-align: end;
}
.sv-block__head {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-block: 0 44px;
}
.sv-block__intro {
  max-inline-size: 60ch;
  color: var(--sv-text-body);
  font-size: 1.0625rem;
  line-height: 2;
}
.sv-block__text p,
.sv-block__intro {
  text-wrap: pretty;
}

/* thin arrows of the designs (← 19 × 14, ↗ 18 × 18) */
.sv-arrow {
  inline-size: 20px;
  block-size: 14px;
  stroke-width: 1.3;
}
.sv-arrow--diagonal {
  inline-size: 18px;
  block-size: 18px;
  stroke-width: 1.4;
}
.sv-button .sv-arrow {
  inline-size: 20px;
  block-size: 14px;
}
.sv-button .sv-arrow--diagonal {
  inline-size: 18px;
  block-size: 18px;
}
/* Design buttons: the text sits a few pixels above the middle, the arrow in the middle. */
.sv-button--design {
  padding-block: 0 10px;
}
.sv-button--design .sv-icon {
  margin-block-start: 10px;
}

/* the red full stop after a display title ("خویشتن.") */
.sv-title-dot {
  color: var(--sv-accent);
  font-family: Vazirmatn, var(--sv-font-latin); /* the round full stop of the designs */
}

/* =================================================================== cover (page opening) */
.sv-cover {
  --sv-cover-height: 741px; /* from the header rule (127) to the principles rule (868) */
  --sv-cover-media: 57.99%; /* 835 of 1440 */
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.sv-cover--about {
  --sv-cover-height: 760px;
  --sv-cover-media: 63.89%; /* 920 of 1440 */
}
.sv-cover__stage {
  position: relative;
  min-block-size: var(--sv-cover-height);
}
.sv-cover__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: var(--sv-cover-media);
  z-index: -1;
  overflow: hidden;
  background: var(--sv-color-ink);
}
.sv-cover__media > img,
.sv-cover__media > picture > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* fades towards the text side and the bottom (photo-layout.css of the design package) */
.sv-cover__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sv-cover--home .sv-cover__media img {
  object-position: 50% 51%;
  /* matched to the design PDF (photo-layout.css says brightness(.67) contrast(1.14), which
     renders darker than the approved design) */
  filter: grayscale(1) brightness(0.88) contrast(0.95);
}
.sv-cover--home .sv-cover__media::after {
  background:
    linear-gradient(var(--sv-cover-fade, 90deg), #11111008 18%, #11111010 45%, #111110a0 79%, #111110 100%),
    linear-gradient(0deg, #111110 0%, transparent 29%, transparent 84%, #11111030);
}
.sv-cover--about .sv-cover__media img {
  object-position: 50% 52%;
}
.sv-cover--about .sv-cover__media::after {
  background:
    linear-gradient(var(--sv-cover-fade, 90deg), transparent 58.7%, #111110 100%),
    linear-gradient(0deg, #111110 0%, transparent 15%);
}
[dir="ltr"] .sv-cover {
  --sv-cover-fade: 270deg;
}

/* Latin labels on the photo */
.sv-cover__credit,
.sv-cover__label {
  position: absolute;
  inset-block-start: 27px;
  inset-inline-end: var(--sv-layout-gutter);
  margin: 0;
  color: #c6c3ba;
  font-size: 0.5rem;
  line-height: 1.6;
}
.sv-cover__credit :lang(en) {
  letter-spacing: 0.265em;
}
.sv-cover__label {
  inset-block-start: 35px;
  color: #d1cec6;
  font-size: 0.625rem;
}
.sv-cover__label :lang(en) {
  letter-spacing: 0.211em;
}
.sv-cover__word {
  position: absolute;
  inset-block-end: 72px;
  inset-inline-end: calc(var(--sv-layout-gutter) + 2px);
  display: grid;
  margin: 0;
  color: var(--sv-color-on-ink);
  font-family: var(--sv-font-serif-display);
  font-size: clamp(3rem, 5.556vw, 5rem);
  line-height: 0.9;
  text-align: end;
  pointer-events: none;
}
.sv-cover .sv-cover__word :lang(en) {
  font-family: var(--sv-font-serif-display);
  letter-spacing: -0.025em;
}
.sv-cover__word span + span {
  color: transparent;
  -webkit-text-stroke: 1px rgb(248 246 241 / 0.85);
}
.sv-cover__motto {
  position: absolute;
  inset-block-end: 21px;
  inset-inline-end: var(--sv-layout-gutter);
  margin: 0;
  color: #99978e;
  font-size: 0.5rem;
  line-height: 1.6;
}
.sv-cover__motto :lang(en) {
  letter-spacing: 0.254em;
}
.sv-cover--about .sv-cover__motto {
  inset-block-end: 54px;
  inset-inline-end: calc(var(--sv-layout-gutter) + 1px);
  color: var(--sv-color-on-ink);
  font-size: 0.75rem;
}
.sv-cover--about .sv-cover__motto :lang(en) {
  letter-spacing: 0.204em;
}
.sv-cover__bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 6px;
  block-size: 110px;
  background: var(--sv-accent);
}

/* text column */
.sv-cover__copy {
  display: grid;
  justify-items: start;
  align-content: start;
  inline-size: min(100%, 520px);
  padding-block: 88px 30px;
}
.sv-cover--about .sv-cover__copy {
  inline-size: min(100%, 540px);
  padding-block: 102px 30px;
}
.sv-cover .sv-kicker {
  gap: 18px;
  color: var(--sv-ink-kicker);
  font-size: 0.75rem;
  line-height: 1.6;
}
.sv-cover--home .sv-kicker::before {
  margin-inline-start: 7px;
}
.sv-cover--about .sv-kicker {
  display: grid;
  gap: 15px;
  color: #c6c2b9;
  font-size: 0.9375rem;
}
.sv-cover--about .sv-kicker::before {
  inline-size: 28px;
  margin-inline-start: 1px;
}
.sv-cover__title {
  margin-block-start: 37px;
  color: var(--sv-color-on-ink);
  font-size: clamp(2.75rem, 6.25vw, 5.625rem);
  line-height: 1.33;
}
.sv-cover__line {
  display: block;
}
.sv-cover__line:last-child:not(:first-child) {
  font-size: 1.111em; /* 100 px after a 90 px line, as drawn */
}
.sv-cover--about .sv-cover__title {
  margin-block-start: 31px;
  font-size: clamp(2.5rem, 5.278vw, 4.75rem);
  line-height: 1.36;
}
.sv-cover--about .sv-cover__line:last-child:not(:first-child) {
  font-size: 1.1316em; /* 86 px after 76 px */
}
.sv-cover__lead {
  margin-block-start: 7px;
  color: var(--sv-ink-text-body);
  font-size: 0.9375rem;
  line-height: 2;
  white-space: pre-line;
}
.sv-cover--about .sv-cover__lead {
  max-inline-size: 525px;
  margin-block-start: 21px;
  color: #c6c2b9;
  font-size: 1.1875rem;
  line-height: 1.947;
}
.sv-cover__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 55px;
  margin-block-start: 21px;
  margin-inline-start: 6px;
}
.sv-cover--about .sv-cover__actions {
  margin-block-start: 65px;
  margin-inline-start: 0;
}
.sv-cover__actions .sv-button--red {
  min-inline-size: 224px;
  min-block-size: 56px;
  padding-inline: 17px 18px;
  font-size: 0.875rem;
}
.sv-cover--about .sv-cover__actions .sv-button--red {
  min-inline-size: 256px;
  min-block-size: 58px;
  padding-inline: 18px 22px;
  font-size: 0.9375rem;
}
.sv-cover__actions .sv-link-line {
  min-inline-size: 166px;
  padding-block: 10px 13px;
  padding-inline: 0 1px;
  border-color: #7a7770;
  font-size: 0.75rem;
}
.sv-cover__side {
  justify-self: center;
  margin-block-start: 43px;
  margin-inline-end: 174px;
  color: #b4b1a9;
  font-size: 0.625rem;
  line-height: 17px;
  text-align: center;
  white-space: pre-line;
}
.sv-cover__side :lang(en) {
  letter-spacing: 0.265em;
}
.sv-cover__discover {
  margin-block-start: 75px;
  margin-inline-start: 7px;
  color: #a8a69e;
  font-size: 0.6875rem;
  line-height: 1.6;
  text-decoration: none;
}
.sv-cover--about .sv-cover__discover {
  margin-block-start: 63px;
  margin-inline-start: 0;
  color: #b8b4ac;
  font-size: 1rem;
}
.sv-cover__discover:hover {
  color: var(--sv-color-on-ink);
}

/* Nastaliq titles take far more height than Vazirmatn: Urdu only (every other language keeps the
   design's sizes) */
html:lang(ur) .sv-cover__line:last-child:not(:first-child) {
  font-size: 1em;
}
html:lang(ur) .sv-cover__title {
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1.7;
}
html:lang(ur) .sv-cover--about .sv-cover__title {
  font-size: clamp(2.125rem, 3.8vw, 3.375rem);
}

/* three principles under the cover ("01 تکنیک، پیش از قدرت") */
.sv-principles {
  display: grid;
  grid-template-columns: 368fr 450fr 478fr;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--sv-ink-line-strong);
  list-style: none;
}
.sv-principles li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 17px;
  min-block-size: 91px;
  padding-block-start: 25px;
  padding-inline-start: 28px;
  color: var(--sv-color-on-ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.sv-principles li + li {
  padding-inline-start: 112px;
}
.sv-principles li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 28px;
  inline-size: 1px;
  block-size: 37px;
  background: var(--sv-ink-line-strong);
}
.sv-principles__num {
  margin-block-start: 12px;
  color: var(--sv-accent);
  font-size: 0.625rem;
  line-height: 1.6;
}
.sv-cover--about .sv-principles {
  grid-template-columns: 398fr 450fr 448fr;
  border-color: #3d3d36;
}
.sv-cover--about .sv-principles li {
  min-block-size: 99px;
  padding-block-start: 27px;
  padding-inline-start: 33px;
  font-size: 1.1875rem;
}
.sv-cover--about .sv-principles li + li {
  padding-inline-start: 85px;
}
.sv-cover--about .sv-principles li + li::before {
  block-size: 43px;
  background: #3d3d36;
}
.sv-cover--about .sv-principles__num {
  margin-block-start: 17px;
  font-size: 0.75rem;
}

@media (max-width: 1099px) {
  .sv-cover,
  .sv-cover--about {
    --sv-cover-height: auto;
  }
  /* phones and tablets: the photo above the text (design guide of the About page) */
  .sv-cover__stage {
    display: flex;
    flex-direction: column;
    --sv-cover-photo-h: min(133.333vw, 70vh);
  }
  .sv-cover--about .sv-cover__stage {
    --sv-cover-photo-h: 66.02vw;
  }
  .sv-cover__media {
    position: relative;
    inset: auto;
    inline-size: 100%;
    aspect-ratio: 412 / 272;
  }
  .sv-cover--home .sv-cover__media {
    aspect-ratio: 3 / 4;
    max-block-size: 70vh;
  }
  .sv-cover__media::after,
  .sv-cover--about .sv-cover__media::after,
  .sv-cover--home .sv-cover__media::after {
    background: linear-gradient(0deg, #111110 0%, transparent 28%);
  }
  .sv-cover__copy,
  .sv-cover--about .sv-cover__copy {
    inline-size: 100%;
    padding-block: 32px 48px;
  }
  .sv-cover__title,
  .sv-cover--about .sv-cover__title {
    margin-block-start: 20px;
  }
  .sv-cover__word {
    inset-block: calc(var(--sv-cover-photo-h) - 104px) auto;
    font-size: 2.6rem;
  }
  .sv-cover__bar {
    inset-block: calc(var(--sv-cover-photo-h) - 110px) auto;
  }
  .sv-cover__actions,
  .sv-cover--about .sv-cover__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    inline-size: 100%;
    margin-block-start: 40px;
    margin-inline-start: 0;
  }
  .sv-cover__side,
  .sv-cover__credit,
  .sv-cover__label,
  .sv-cover__motto {
    display: none;
  }
  .sv-cover__discover,
  .sv-cover--about .sv-cover__discover {
    margin-block-start: 32px;
    margin-inline-start: 0;
  }
  .sv-principles,
  .sv-cover--about .sv-principles {
    grid-template-columns: 1fr;
  }
  .sv-principles li,
  .sv-principles li + li,
  .sv-cover--about .sv-principles li,
  .sv-cover--about .sv-principles li + li {
    align-items: center;
    min-block-size: 64px;
    padding-block-start: 0;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--sv-ink-line);
  }
  .sv-principles li + li::before {
    display: none;
  }
  .sv-principles__num,
  .sv-cover--about .sv-principles__num {
    margin: 0;
  }
}

/* =================================================================== what we learn in practice
   Title and text at the start, numbered points (01 02 03) at the end. */
.sv-block--practice {
  padding-block: 38px 82px;
}
.sv-practice {
  display: grid;
  grid-template-columns: 613fr 120fr 563fr;
  align-items: start;
}
.sv-practice__copy {
  grid-column: 1;
}
.sv-practice__copy .sv-block__title {
  margin-block-start: 25px;
}
.sv-practice__copy .sv-block__text {
  margin-block-start: 51px;
}
.sv-practice__list {
  grid-column: 3;
  grid-row: 1;
  margin: 39px 0 0;
  padding: 0;
  list-style: none;
}
.sv-practice__list li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-content: start;
  min-block-size: 137px;
  padding-block-start: 37px;
  border-block-end: 1px solid var(--sv-line-strong);
}
.sv-practice__list h3 {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.5625rem;
  line-height: 40px;
}
.sv-practice__list p {
  grid-column: 1;
  grid-row: 2;
  margin-block-start: 10px;
  color: var(--sv-text-muted);
  font-size: 1.0625rem;
  line-height: 1.9;
}
.sv-practice__num {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-block-start: 4px;
  color: var(--sv-accent);
  font-family: var(--sv-font-latin);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
}

/* =================================================================== media + text (schools)
   Text and a button at the start, a framed photo with caption at the end. */
.sv-block--media {
  padding-block-end: 102px;
}
.sv-mediatext {
  display: grid;
  grid-template-columns: 568fr 80fr 650fr;
  align-items: start;
}
.sv-mediatext__copy {
  grid-column: 1;
  display: grid;
  justify-items: start;
}
.sv-mediatext__copy .sv-block__title {
  margin-block-start: 50px;
  font-size: clamp(2rem, 3.333vw, 3rem);
}
.sv-mediatext__copy .sv-block__text {
  margin-block-start: 56px;
  color: #c0bcb3;
}
.sv-mediatext__copy .sv-button {
  margin-block-start: 99px;
  min-inline-size: 264px;
  min-block-size: 58px;
  padding-inline: 16px 20px;
  font-size: 0.875rem;
}
.sv-mediatext__media {
  grid-column: 3;
  grid-row: 1;
  margin: 78px 0 0;
}
.sv-mediatext__frame {
  position: relative;
  aspect-ratio: 650 / 598;
  overflow: hidden;
  background: var(--sv-color-ink);
}
.sv-mediatext__frame img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.sv-mediatext__frame--mono img {
  filter: grayscale(1);
}
.sv-mediatext__frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 5px;
  block-size: 56px;
  background: var(--sv-accent);
}
.sv-mediatext__caption {
  display: block;
  min-block-size: 28px;
  margin-block-start: 13px;
  padding-block-end: 4px;
  border-block-end: 1px solid #3c3c35;
  color: var(--sv-ink-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.sv-mediatext__note {
  display: block;
  margin-block-start: 28px;
  color: var(--sv-ink-text-muted);
  font-size: 0.625rem;
  line-height: 1.6;
  text-align: end;
}
.sv-mediatext__note :lang(en) {
  letter-spacing: 0.15em;
}
.sv-paper .sv-mediatext__copy .sv-block__text {
  color: var(--sv-text-body);
}
.sv-paper .sv-mediatext__caption {
  border-color: var(--sv-line);
}
.sv-mediatext--text {
  grid-template-columns: minmax(0, 760px);
}

/* =================================================================== talent path
   Text at the start, the three-step graphic at the end. */
.sv-block--pathway {
  padding-block-end: 43px;
}
.sv-pathway {
  display: grid;
  grid-template-columns: 583fr 105fr 608fr;
  align-items: start;
}
.sv-pathway__copy {
  grid-column: 1;
}
.sv-pathway__copy .sv-block__title {
  margin-block-start: 34px;
  font-size: clamp(1.75rem, 2.986vw, 2.6875rem);
}
.sv-pathway__copy .sv-block__text {
  margin-block-start: 64px;
}
.sv-pathway__figure {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  margin: 0;
}
/* the graphic's title sits inside its top area, at the start side */
.sv-pathway__figure figcaption {
  position: absolute;
  z-index: 1;
  inset-block-start: 64px;
  inset-inline-start: 21px;
}
.sv-pathway__figure h3 {
  font-size: 1.5625rem;
  line-height: 1.5;
}
.sv-steps-path {
  position: relative;
  margin-block-start: 59px;
  aspect-ratio: 610 / 650;
  max-inline-size: 610px;
}
.sv-steps-path__art {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
[dir="ltr"] .sv-steps-path__art {
  transform: scaleX(-1);
}
.sv-steps-path__dot {
  fill: #d1ccc2;
}
.sv-ink .sv-steps-path__dot {
  fill: var(--sv-ink-line-strong);
}
.sv-steps-path__line {
  fill: none;
  stroke: var(--sv-accent);
  stroke-width: 3;
}
.sv-steps-path__ring {
  fill: var(--sv-bg);
  stroke: var(--sv-accent);
  stroke-width: 2;
}
ol.sv-steps-path__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Positions on the design's 610 × 650 graphic (blocks/pathway.html): circles of 62 at (516,163), (266,326),
   (50,503). Labels 1 and 2 are centred at the middle of their arc, (391,244.5) and (158,414.5), with the page
   colour behind them, so the arc shows an even gap around the text (Khashayar 2026-10-27); label 3 is under
   the last circle as on the board (centre 125, 583). --x is measured from the left of the right-to-left drawing;
   the left-to-right pages mirror the drawing, so they measure from the right. */
.sv-steps-path li:nth-child(1) { --x: 84.59%; --y: 25.08%; --label-x: 64.10%; --label-y: 37.62%; }
.sv-steps-path li:nth-child(2) { --x: 43.61%; --y: 50.15%; --label-x: 25.90%; --label-y: 63.77%; }
.sv-steps-path li:nth-child(3) { --x: 8.20%; --y: 77.38%; --label-x: 20.49%; --label-y: 89.69%; }
.sv-steps-path__num,
.sv-steps-path__text {
  position: absolute;
}
.sv-steps-path__num {
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  inline-size: 10.164%;
  aspect-ratio: 1;
  color: var(--sv-accent);
  font-family: var(--sv-font-latin);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%) scale(var(--sv-step-scale, 1));
  opacity: var(--sv-step-show, 1);
}
.sv-steps-path__text {
  left: var(--label-x);
  top: var(--label-y);
  inline-size: max-content;
  max-inline-size: 41%;
  padding: 2px 12px;
  text-wrap: balance;
  background: var(--sv-bg);
  color: var(--sv-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  transform: translate(-50%, calc(-50% + var(--sv-step-rise, 0px)));
  opacity: var(--sv-step-show, 1);
}
[dir="ltr"] .sv-steps-path__num { left: calc(100% - var(--x)); }
[dir="ltr"] .sv-steps-path__text { left: calc(100% - var(--label-x)); }
/* Khashayar 2026-10-26: the path follows the scroll - it draws as the visitor scrolls down, at the
   speed of the scroll, and folds back on the way up (static/js/savantar.js sets each part's
   progress). Without JS, on paper, or with reduced motion the graphic is simply shown whole. */
.sv-steps-path__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.sv-steps-path__ring {
  transform-box: fill-box;
  transform-origin: center;
}
@media print {
  .sv-steps-path__ring, .sv-steps-path__num, .sv-steps-path__text { opacity: 1 !important; transform: none; }
  .sv-steps-path__num { transform: translate(-50%, -50%); }
  .sv-steps-path__text { transform: translate(-50%, -50%); }
  .sv-steps-path__line { stroke-dashoffset: 0 !important; }
}

/* =================================================================== statement (our commitment)
   Title, the red mark and a caption at the start; a rule; text at the end. */
.sv-block--statement {
  padding-block-end: 75px;
}
.sv-statement {
  display: grid;
  grid-template-columns: 660fr 1px 64fr 571fr;
  align-items: start;
}
.sv-statement__head {
  grid-column: 1;
  display: grid;
  justify-items: start;
}
.sv-statement__head .sv-block__title {
  margin-block-start: 65px;
  font-size: clamp(1.75rem, 3.125vw, 2.8125rem);
}
.sv-statement__mark {
  inline-size: 168px;
  block-size: auto;
  margin-block-start: 77px;
  margin-inline-start: 44px;
  fill: none;
  stroke: var(--sv-accent);
  stroke-width: 2;
}
[dir="ltr"] .sv-statement__mark {
  transform: scaleX(-1);
}
.sv-statement__caption {
  margin-block-start: 17px;
  color: #b8b4ac;
  font-size: 1.375rem;
  line-height: 1.6;
}
.sv-paper .sv-statement__caption {
  color: var(--sv-text-muted);
}
.sv-statement__rule {
  grid-column: 2;
  grid-row: 1;
  inline-size: 1px;
  block-size: 275px;
  margin-block-start: 52px;
  background: #3b3b34;
}
.sv-paper .sv-statement__rule {
  background: var(--sv-line);
}
.sv-statement__text {
  grid-column: 4;
  grid-row: 1;
  margin-block-start: 52px;
}
.sv-ink .sv-statement__text {
  color: #bcb8af;
}

/* =================================================================== people (About)
   Short introductions with portraits of 158 × 228 and a link to the team page. */
.sv-block--people {
  padding-block-end: 0;
}
.sv-people-head {
  display: grid;
  grid-template-columns: 1fr;
  padding-block-end: 45px;
  border-block-end: 1px solid var(--sv-line);
}
.sv-people-head .sv-block__title {
  margin-block-start: -4px;
}
.sv-people-head__intro {
  margin-block-start: -9px;
  margin-inline-start: 52.08%;
  color: var(--sv-text-muted);
  font-size: 1.1875rem;
  line-height: 1.6;
}
.sv-people {
  display: grid;
  grid-template-columns: 622fr 1px 88fr 585fr;
  padding-block: 46px 34px;
  border-block-end: 1px solid var(--sv-line);
}
.sv-people > .sv-person-intro:last-child {
  grid-column: 4;
}
.sv-people__rule {
  grid-column: 2;
  block-size: 258px;
  background: var(--sv-line);
}
.sv-person-intro {
  display: grid;
  grid-template-columns: 158px 1fr;
  column-gap: 37px;
  align-content: start;
}
.sv-person-intro__photo {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 3;
  aspect-ratio: 158 / 228;
  overflow: hidden;
  background: var(--sv-color-ink);
}
.sv-person-intro__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.sv-person-intro h3 {
  grid-column: 2;
  margin-block-start: 28px;
  font-size: 1.875rem;
  line-height: 1.5;
}
.sv-person-intro__role {
  grid-column: 2;
  margin-block-start: 13px;
  color: var(--sv-accent-text);
  font-size: 1.1875rem;
  line-height: 1.6;
}
.sv-person-intro__latin {
  grid-column: 2;
  margin-block-start: 113px;
  margin-inline-start: 121px;
  color: var(--sv-text-muted);
  font-size: 0.5625rem;
  line-height: 1.6;
  text-align: start;
}
.sv-person-intro__latin :lang(en) {
  letter-spacing: 0.17em;
}
.sv-people__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 42px 50px;
  color: var(--sv-text);
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}
.sv-people__more .sv-arrow {
  margin-inline-end: 20px;
  color: var(--sv-text);
  stroke-width: 1.4;
}

/* =================================================================== founders (Home)
   Large black-and-white portraits on ink. */
.sv-founders {
  padding-block: 48px 38px;
}
.sv-founders__top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block-end: 17px;
  border-block-end: 1px solid #383830;
}
.sv-founders__top .sv-overline {
  color: #b5b3ac;
  font-size: 0.5625rem;
  line-height: 1.6;
}
.sv-founders__top .sv-overline:last-child {
  font-size: 0.625rem;
}
.sv-founders__top .sv-overline :lang(en) {
  letter-spacing: 0.156em;
}
.sv-founders__top .sv-overline:last-child :lang(en) {
  letter-spacing: 0.207em;
}
.sv-founders__top .sv-overline:first-child {
  margin-inline-start: 52px;
}
.sv-founders__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 24px;
}
.sv-founders__head .sv-kicker {
  gap: 25px;
  margin-block-start: 26px;
  color: #c7c1b5;
  font-size: 0.875rem;
  line-height: 1.6;
}
.sv-founders__head .sv-kicker::before {
  inline-size: 27px;
  margin-inline-start: 1px;
  translate: 0 3px;
}
.sv-founders__head h2 {
  margin-block-start: 23px;
  font-size: clamp(2rem, 3.264vw, 2.9375rem);
  line-height: 1.5;
}
.sv-founders__intro {
  margin-block-start: 55px;
  margin-inline-start: 99px;
  color: #a7a095;
  font-size: 1.0625rem;
  line-height: 2;
}
.sv-founders__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 126px;
  margin-block-start: 25px;
  padding-block-end: 15px;
  border-block-end: 1px solid #383830;
}
.sv-founder {
  display: grid;
  align-content: start;
}
.sv-founder__photo {
  position: relative;
  aspect-ratio: 585 / 455;
  overflow: hidden;
  background: #242321;
}
.sv-founder__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.9); /* as in the design PDF */
}
.sv-founder__photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 4px;
  block-size: 42px;
  background: var(--sv-accent);
}
.sv-founder h3 {
  margin-block-start: 36px;
  font-size: 1.875rem;
  line-height: 1.5;
}
.sv-founder__role {
  margin-block-start: 7px;
  color: var(--sv-accent);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.sv-founder__latin {
  margin-block-start: 5px;
  color: #b4b1a9;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: end;
}
.sv-founder__latin :lang(en) {
  letter-spacing: 0.18em;
}
.sv-founders__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-block-start: 34px;
}
.sv-founders__bottom p:first-child {
  color: #c7c1b5;
  font-size: 1.125rem;
  line-height: 1.6;
}
.sv-founders__bottom .sv-overline {
  margin-block-start: 19px;
  color: #9a9386;
  font-size: 0.5625rem;
}
.sv-founders__bottom .sv-overline :lang(en) {
  letter-spacing: 0.182em;
}

/* =================================================================== red call to action */
.sv-cta {
  padding-block: 48px 76px;
}
.sv-cta .sv-overline {
  margin: 0;
  color: var(--sv-color-white);
  font-size: 0.625rem;
  line-height: 1.6;
}
.sv-cta .sv-overline :lang(en) {
  letter-spacing: 0.159em;
}
.sv-cta h2 {
  margin-block-start: 0;
  color: var(--sv-color-white);
  font-size: clamp(2rem, 3.125vw, 2.8125rem);
  line-height: 1.5;
}
.sv-cta__text {
  margin-block-start: 44px;
  color: var(--sv-color-white);
  font-size: 1.25rem;
  line-height: 1.6;
}
.sv-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 34px;
  margin-block-start: 78px;
}
.sv-cta__actions .sv-button--ink {
  min-inline-size: 286px;
  min-block-size: 59px;
  padding-inline: 18px 24px;
  font-size: 0.9375rem;
}
.sv-cta__actions .sv-link-line {
  justify-content: flex-start;
  min-inline-size: 230px;
  min-block-size: 59px;
  padding-inline: 19px 0;
  color: var(--sv-color-white);
  border-color: #ffada9;
  font-size: 0.9375rem;
}

/* =================================================================== design sections on phones and tablets */
@media (max-width: 1099px) {
  .sv-block,
  .sv-block--practice,
  .sv-block--media,
  .sv-block--pathway,
  .sv-block--statement {
    padding-block: 40px 56px;
  }
  .sv-block--people {
    padding-block-end: 0;
  }
  .sv-block__label {
    position: static;
    margin-block-end: 18px;
  }
  .sv-practice,
  .sv-mediatext,
  .sv-pathway,
  .sv-statement,
  .sv-people,
  .sv-founders__head,
  .sv-founders__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .sv-practice > *,
  .sv-mediatext > *,
  .sv-pathway > *,
  .sv-statement > *,
  .sv-people > *,
  .sv-people > .sv-person-intro:last-child {
    grid-column: 1;
    grid-row: auto;
  }
  .sv-practice__copy .sv-block__title,
  .sv-mediatext__copy .sv-block__title,
  .sv-pathway__copy .sv-block__title,
  .sv-statement__head .sv-block__title,
  .sv-people-head .sv-block__title {
    margin-block-start: 0;
  }
  .sv-practice__copy .sv-block__text,
  .sv-mediatext__copy .sv-block__text,
  .sv-pathway__copy .sv-block__text {
    margin-block-start: 20px;
  }
  .sv-practice__list,
  .sv-mediatext__media,
  .sv-statement__text {
    margin-block-start: 0;
  }
  .sv-mediatext__copy .sv-button {
    inline-size: 100%;
    margin-block-start: 32px;
  }
  .sv-pathway__figure figcaption {
    position: static;
  }
  .sv-steps-path {
    margin-block-start: 16px;
  }
  .sv-steps-path__text {
    font-size: 0.8125rem;
  }
  .sv-statement__rule,
  .sv-people__rule {
    display: none;
  }
  .sv-statement__mark {
    margin-block-start: 28px;
    margin-inline-start: 0;
  }
  .sv-people-head__intro {
    margin-block-start: 8px;
    margin-inline-start: 0;
  }
  .sv-person-intro {
    grid-template-columns: 120px 1fr;
    column-gap: 20px;
  }
  .sv-person-intro h3 {
    margin-block-start: 8px;
    font-size: 1.5rem;
  }
  .sv-person-intro__latin {
    margin-block-start: 12px;
    margin-inline-start: 0;
  }
  .sv-founders__top .sv-overline:first-child {
    margin-inline-start: 0;
  }
  .sv-founders__intro {
    margin-block-start: 0;
    margin-inline-start: 0;
  }
  .sv-founders__bottom {
    flex-direction: column;
    gap: 8px;
  }
  .sv-cta__actions {
    flex-direction: column;
    align-items: stretch;
    margin-block-start: 40px;
  }
  .sv-cta__actions .sv-button--ink,
  .sv-cta__actions .sv-link-line {
    min-inline-size: 0;
  }
}

/* ---- training paths (Home): three photo cards */
.sv-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sv-path-card {
  position: relative;
  display: grid;
  align-content: end;
  min-block-size: 360px;
  overflow: hidden;
  isolation: isolate;
  color: var(--sv-color-on-ink);
  text-decoration: none;
}
.sv-path-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.sv-path-card__img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.8);
}
.sv-path-card--dark .sv-path-card__img img {
  filter: grayscale(1) brightness(0.37);
}
.sv-path-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, #111110 0%, rgb(17 17 16 / 0.55) 42%, transparent 70%);
}
.sv-path-card__body {
  display: grid;
  gap: 8px;
  padding: 28px;
}
.sv-path-card__num {
  color: var(--sv-accent);
  font-family: var(--sv-font-latin);
  font-size: 0.6875rem;
}
.sv-path-card h3 {
  color: var(--sv-color-on-ink);
  font-size: 1.5rem;
}
.sv-path-card p {
  color: var(--sv-color-on-ink-body);
  font-size: 0.875rem;
  line-height: 1.9;
}
.sv-path-card .sv-link-arrow {
  margin-block-start: 6px;
  color: var(--sv-color-on-ink);
}
.sv-path-card:hover h3 {
  color: var(--sv-color-white);
}
@media (max-width: 900px) {
  .sv-paths {
    grid-template-columns: 1fr;
  }
  .sv-path-card {
    min-block-size: 340px;
  }
}

/* ---- life in the dojo (Home): one large photo and a short story */
.sv-dojo-life {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.sv-dojo-life__media {
  margin: 38px 0 0;
}
.sv-dojo-life__photo {
  block-size: 510px;
  overflow: hidden;
  background: var(--sv-color-ink);
}
.sv-dojo-life__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  filter: grayscale(1);
}
.sv-dojo-life__copy {
  display: grid;
  justify-items: start;
  gap: 20px;
}
.sv-dojo-life--text {
  grid-template-columns: minmax(0, 760px);
}
@media (max-width: 900px) {
  .sv-dojo-life {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sv-dojo-life__photo {
    block-size: 420px;
  }
}

/* ---- philosophy (Home): meaning + three principles explained */
.sv-philosophy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.sv-philosophy__list {
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--sv-line);
}
.sv-philosophy__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 22px;
  padding-block: 22px;
  border-block-end: 1px solid var(--sv-line);
}
.sv-philosophy__list b {
  grid-row: 1 / span 2;
  color: var(--sv-accent);
  font-family: var(--sv-font-latin);
  font-size: 0.8125rem;
  line-height: 2.2;
}
.sv-philosophy__list h3 {
  font-size: 1.25rem;
}
.sv-philosophy__list p {
  color: var(--sv-text-muted);
  font-size: 0.9375rem;
}
@media (max-width: 900px) {
  .sv-philosophy {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---- start and contact (Home): current class facts, questions, contact */
.sv-start {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.sv-start__card {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: 36px 36px 40px;
}
.sv-start__card h3 {
  font-size: 1.625rem;
}
.sv-start__place {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sv-text-body);
}
.sv-start__place .sv-icon {
  color: var(--sv-accent-text);
}
.sv-start__facts {
  display: grid;
  gap: 4px;
  inline-size: 100%;
  margin: 6px 0 0;
  padding: 18px 0 0;
  border-block-start: 1px solid var(--sv-line);
  list-style: none;
}
.sv-start__facts li {
  color: var(--sv-text);
  font-size: 1.0625rem;
  line-height: 2;
}
.sv-start__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-block-start: 18px;
}
.sv-start__actions .sv-button {
  min-inline-size: 220px;
  min-block-size: 54px;
}
.sv-start__side {
  display: grid;
  gap: 40px;
}
.sv-start__contact {
  display: grid;
  justify-items: start;
  gap: 10px;
}
.sv-start__contact h3 {
  margin-block-end: 4px;
  font-size: 1.25rem;
}
.sv-start__contact > a:not(.sv-link-arrow) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sv-text);
  text-decoration: none;
}
.sv-start__contact > a .sv-icon {
  color: var(--sv-accent-text);
}
@media (max-width: 900px) {
  .sv-start {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sv-start__card {
    padding: 28px 24px 32px;
  }
}

/* ------------------------------------------------------------------ questions and answers */
.sv-faq {
  border-block-start: 1px solid var(--sv-line);
}
.sv-faq details {
  border-block-end: 1px solid var(--sv-line);
}
.sv-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-4);
  padding-block: 20px;
  color: var(--sv-text);
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 700;
  list-style: none;
}
.sv-faq summary::-webkit-details-marker {
  display: none;
}
.sv-faq summary::after {
  content: "+";
  flex: none;
  color: var(--sv-accent);
  font-family: var(--sv-font-latin);
  font-size: 1.5rem;
  line-height: 1;
}
.sv-faq details[open] summary::after {
  content: "−";
}
.sv-faq__answer {
  padding-block-end: 22px;
  color: var(--sv-text-body);
  font-size: 0.9375rem;
  line-height: 2;
}

/* ------------------------------------------------------------------ general-purpose sections (older blocks) */
.sv-hero {
  position: relative;
  display: grid;
  background: var(--sv-bg-brand);
  color: var(--sv-color-on-ink);
}
.sv-hero h1 {
  color: var(--sv-color-on-ink);
}
.sv-hero .sv-lead {
  color: var(--sv-color-on-ink-body);
}
.sv-hero__content {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--sv-space-5);
  padding: var(--sv-space-9) var(--sv-layout-gutter);
}
.sv-hero__content .sv-lead {
  max-inline-size: 44ch;
}
.sv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-5);
  margin-block-start: var(--sv-space-4);
}
.sv-hero__media {
  position: relative;
  min-block-size: 60vw;
  overflow: hidden;
}
.sv-hero__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.8);
}
@media (min-width: 900px) {
  .sv-hero--split {
    grid-template-columns: 1fr 1fr;
    min-block-size: min(80vh, 760px);
  }
  .sv-hero--split .sv-hero__media {
    min-block-size: 100%;
    order: 2;
  }
  .sv-hero--split .sv-hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, #111110 0%, transparent 30%);
  }
  [dir="rtl"] .sv-hero--split .sv-hero__media::before {
    background: linear-gradient(to left, #111110 0%, transparent 30%);
  }
}
.sv-hero--cover {
  min-block-size: min(80vh, 760px);
  isolation: isolate;
}
.sv-hero--cover .sv-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  min-block-size: 0;
}
.sv-hero--cover .sv-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(17 17 16 / 0.45), rgb(17 17 16 / 0.85));
}
.sv-hero--text {
  min-block-size: 0;
}

/* numbered cards (01 02 03) */
.sv-ncards {
  display: grid;
  gap: 24px;
}
@media (min-width: 860px) {
  .sv-ncards {
    grid-template-columns: repeat(var(--sv-ncards-cols, 3), 1fr);
  }
}
.sv-ncard {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sv-space-3);
  min-block-size: 300px;
  padding: 32px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--sv-radius-sm);
  background: var(--sv-bg-raised);
}
.sv-ncard__bg {
  position: absolute;
  inset: 0 0 45% 0;
  z-index: -1;
}
.sv-ncard__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.25;
}
.sv-ncard__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--sv-bg-raised) 100%);
}
.sv-ncard__num {
  font-size: 2.6rem;
}
.sv-ncard__title {
  font-size: var(--sv-size-xl);
}
.sv-ncard__sub {
  color: var(--sv-text-muted);
}
.sv-ncard__text {
  color: var(--sv-text-body);
}
.sv-ncard__link {
  align-self: end;
  margin-block-start: auto;
  color: var(--sv-text);
}
.sv-ncard__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sv-ncard:hover {
  box-shadow: 0 0 0 1px var(--sv-text);
}

/* picture with a list of points */
.sv-feature {
  display: grid;
  gap: var(--sv-space-7);
}
@media (min-width: 960px) {
  .sv-feature {
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
  }
}
.sv-feature__media {
  position: relative;
  min-block-size: 420px;
  overflow: hidden;
  background: var(--sv-bg-brand);
}
.sv-feature__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.sv-feature__overlay {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  gap: var(--sv-space-3);
  padding: 32px;
  background: rgb(17 17 16 / 0.86);
  color: var(--sv-color-on-ink);
}
.sv-feature__overlay h3 {
  color: var(--sv-color-on-ink);
  font-size: var(--sv-size-2xl);
}
.sv-feature__items {
  display: grid;
  gap: var(--sv-space-4);
  align-content: center;
}
.sv-feature__item {
  display: grid;
  gap: var(--sv-space-2);
  padding: 28px;
  border-radius: var(--sv-radius-sm);
  background: var(--sv-bg-raised);
}
.sv-feature__item--highlight {
  box-shadow: inset 0 0 0 2px var(--sv-accent);
}
.sv-feature__item h3 {
  font-size: var(--sv-size-xl);
}
.sv-feature__item p {
  color: var(--sv-text-body);
}
.sv-feature__num {
  color: var(--sv-accent);
  font-family: var(--sv-font-latin);
  font-size: var(--sv-size-xs);
}

/* split text + image */
.sv-split {
  display: grid;
  gap: var(--sv-space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .sv-split {
    grid-template-columns: 1fr 1fr;
  }
  .sv-split--media-start .sv-split__media {
    order: -1;
  }
}
.sv-split__media img {
  inline-size: 100%;
  filter: grayscale(1);
}

/* band (call to action) */
.sv-band {
  display: grid;
  background: var(--sv-bg-brand);
  color: var(--sv-color-on-ink);
}
@media (min-width: 900px) {
  .sv-band--with-media {
    grid-template-columns: 2fr 1fr;
  }
}
.sv-band__content {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: var(--sv-space-4);
  padding: var(--sv-space-8) var(--sv-layout-gutter);
}
.sv-band__title {
  color: var(--sv-color-on-ink);
  font-size: var(--sv-size-4xl);
  font-weight: 700;
}
.sv-band .sv-lead {
  color: var(--sv-color-on-ink-body);
}
.sv-band__media {
  position: relative;
  min-block-size: 320px;
}
.sv-band__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

/* figures */
.sv-stats {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.sv-stats > div {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: var(--sv-radius-sm);
  background: var(--sv-bg-raised);
}
.sv-stat__value {
  display: block;
  color: var(--sv-text);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.sv-quote {
  max-inline-size: 48rem;
  margin-inline: auto;
  text-align: center;
}
.sv-quote blockquote {
  color: var(--sv-text);
  font-size: var(--sv-size-3xl);
  font-weight: 700;
  line-height: 1.6;
}
.sv-quote figcaption {
  margin-block-start: var(--sv-space-5);
}

.sv-timeline {
  position: relative;
  display: grid;
  gap: var(--sv-space-6);
  margin: 0;
  padding: 0;
  padding-inline-start: var(--sv-space-7);
  list-style: none;
}
.sv-timeline::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 7px;
  inline-size: 1px;
  background: var(--sv-line-strong);
}
.sv-timeline__item {
  position: relative;
  display: grid;
  gap: var(--sv-space-2);
}
.sv-timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--sv-space-7) + 1px);
  inset-block-start: 0.55em;
  inline-size: 13px;
  block-size: 13px;
  border-radius: 50%;
  background: var(--sv-accent);
}
.sv-timeline__when {
  color: var(--sv-text-muted);
  font-size: var(--sv-size-sm);
}

.sv-gallery {
  display: grid;
  gap: var(--sv-space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.sv-gallery figure {
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--sv-bg-brand);
}
.sv-gallery img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--sv-motion-slow) var(--sv-motion-ease);
}
.sv-gallery figure:hover img {
  transform: scale(1.04);
}

.sv-video {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--sv-bg-brand);
  color: var(--sv-color-on-ink);
  text-decoration: none;
}
.sv-video img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.sv-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sv-space-3);
}
.sv-video__play .sv-icon {
  inline-size: 64px;
  block-size: 64px;
  padding: 18px;
  border-radius: 50%;
  background: var(--sv-accent);
  color: var(--sv-color-white);
}

/* ---- pages.css ---- */
/* Page-specific components (branches network, classes, registration, Atlas). Added part by part. */

/* ===================================================================== branches network
   Savantar_Branches_Representatives_Design.pdf (2026-10-15), measured at 1440 px: content
   x 72–1368, cards and buttons radius 3 px, pills 15 px. Vertical values are baseline
   distances from the PDF (baseline = line-height/2 + 0.244 × size for Vazirmatn). */
.sv-net, .sv-cls-block {
  --sv-net-ink: var(--sv-color-ink, #111110);
  --sv-net-paper: var(--sv-color-paper, #F3F1EB);
  --sv-net-white: #FFFFFF;
  --sv-net-muted: var(--sv-color-muted, #66645D);
  --sv-net-rule: var(--sv-color-rule, #D7D2C8);
  --sv-net-red: var(--sv-color-red, #E32129);
  --sv-net-red-text: var(--sv-color-red-text, #D41E26);
  --sv-net-tint: var(--sv-color-red-tint, #FFF1EE);
  --sv-net-on-ink: #C9C4B9;
  --sv-net-on-ink-muted: #A7A49C;
  --sv-net-gap: 36px;
  --sv-net-green-tint: #E9EFE7;
  --sv-net-green-text: var(--sv-color-green-text, #276747);
  --sv-net-line-on-ink: #3B3B35;
  --sv-net-disabled: #D9D5CC;
  color: var(--sv-net-ink);
}
.sv-net { padding-block-end: 96px; }
.sv-net a { color: inherit; }
.sv-net h1, .sv-net h2, .sv-net h3 { font-family: Vazirmatn, var(--sv-font-latin), sans-serif; font-weight: 700; color: inherit; letter-spacing: 0; }

/* ---------------------------------------------------------------- heading */
.sv-net-head { padding-block: 69px 0; }
.sv-net-head__title { margin: 0; font-size: 39px; line-height: 54.6px; }
.sv-net-head__sep { font-weight: 400; }
.sv-net-head__lead { margin: 18px 0 0; font-size: 16px; line-height: 25.6px; color: var(--sv-net-muted); }
.sv-net-crumbs a { text-decoration: none; border-block-end: 1px solid var(--sv-net-rule); }
.sv-net-crumbs a:hover { border-color: currentColor; }

/* ---------------------------------------------------------------- dark banner with photo */
.sv-net-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 462px;
  min-block-size: 155px;
  margin-block-start: 45.6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--sv-net-ink);
}
.sv-net-banner--area { grid-template-columns: minmax(0, 1fr) 350px; min-block-size: 159px; margin-block-start: 61.8px; }
.sv-net-banner--text { grid-template-columns: minmax(0, 1fr); }
.sv-net-banner__body { padding: 26.6px 32px 24px; }
.sv-net-banner__title { margin: 0; font-size: 29px; line-height: 40.6px; color: var(--sv-net-white) !important; }
.sv-net-banner__text { margin: 21px 0 0; font-size: 18px; line-height: 28.8px; color: var(--sv-net-on-ink); }
.sv-net-banner--area .sv-net-banner__text { margin-block-start: 24px; }
.sv-net-banner__media { position: relative; background: var(--sv-net-paper); }
.sv-net-banner__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- counters */
.sv-net-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px;
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
}
.sv-net-stat {
  display: flex;
  flex-direction: column;
  min-block-size: 112px;
  padding: 17.6px 18px 0;
  border-radius: 3px;
  background: var(--sv-net-white);
}
.sv-net-stat__number { font-weight: 700; font-size: 31px; line-height: 40.3px; }
.sv-net-stat__label { margin-block-start: 11.2px; font-size: 12px; line-height: 19.2px; color: var(--sv-net-muted); }

/* ---------------------------------------------------------------- explorer */
.sv-net-explorer { margin-block-start: 33px; scroll-margin-block-start: 24px; }
.sv-net-search { display: flex; gap: 12px; margin-block-end: 20px; }
.sv-net-search__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 48px;
  padding-inline: 18px;
  border: 1px solid var(--sv-net-rule);
  border-radius: 3px;
  background: var(--sv-net-white);
  color: var(--sv-net-ink);
  font: inherit;
  font-size: 16px;
}
.sv-net-search__input::placeholder { color: var(--sv-net-muted); }
.sv-net-search__button {
  flex: none;
  block-size: 48px;
  padding-inline: 28px;
  border: 0;
  border-radius: 3px;
  background: var(--sv-net-ink);
  color: var(--sv-net-white);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.sv-net-search__icon { display: none; inline-size: 20px; block-size: 20px; }
.sv-net-search__input:focus-visible,
.sv-net-search__button:focus-visible,
.sv-net-tab:focus-visible,
.sv-net-region:focus-visible,
.sv-net-area:focus-visible,
.sv-net-button:focus-visible,
.sv-net-group:focus-visible { outline: 3px solid var(--sv-net-red); outline-offset: 2px; }

.sv-net-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sv-net-gap); }
.sv-net-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 55px;
  padding-block-start: 4.8px;
  border: 1px solid var(--sv-net-rule);
  border-radius: 3px;
  background: var(--sv-net-white);
  font-weight: 700;
  font-size: 18px;
  line-height: 50px;
  text-decoration: none;
}
.sv-net-tab[aria-current="true"] { border-color: var(--sv-net-red); background: var(--sv-net-red); color: var(--sv-net-white); }
.sv-net-tab:hover:not([aria-current="true"]) { border-color: var(--sv-net-ink); }

.sv-net-country {
  display: grid;
  grid-template-columns: 408px minmax(0, 1fr);
  gap: 32px;
  margin-block-start: 31px;
}
.sv-net-country--flat { grid-template-columns: minmax(0, 1fr); }
.sv-net-country[hidden], .sv-net-panel[hidden], .sv-net-results[hidden] { display: none; }
.sv-net-results { margin-block-start: 31px; }
.sv-net-panel {
  min-block-size: 416px;
  padding: 15.9px 32px 29.2px;
  border-radius: 3px;
  background: var(--sv-net-white);
}
.sv-net-panel--regions { padding-inline: 26px 25px; }
.sv-net-panel__title { margin: 0; font-size: 23px; line-height: 39px; }
.sv-net-panel__note { margin: 35.8px 0 0; font-size: 14px; line-height: 24px; color: var(--sv-net-muted); }

.sv-net-regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 7px;
  margin-block-start: 22.1px;
}
.sv-net-region {
  display: block;
  min-block-size: 62px;
  padding: 11.5px 10px 8px;
  border-radius: 3px;
  background: var(--sv-net-paper);
  font-size: 13.5px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
}
.sv-net-region[aria-current="true"] { background: var(--sv-net-red); color: var(--sv-net-white); font-weight: 700; }
.sv-net-region:hover:not([aria-current="true"]) { box-shadow: inset 0 0 0 1px var(--sv-net-ink); }
/* B48: the chosen province and country also carry a tick, not only a colour (drawn, so every
   font shows it; inline before the name, so it follows the text direction by itself). */
.sv-net-region[aria-current="true"]::before,
.sv-net-tab[aria-current="true"]::before {
  content: "";
  display: inline-block;
  inline-size: 0.6em;
  block-size: 0.32em;
  margin-inline-end: 0.45em;
  /* physical sides on purpose: a tick looks the same in Persian and English */
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.2em) rotate(-45deg);
  vertical-align: middle;
}

.sv-net-areas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 25px; margin-block-start: 23.1px; }
.sv-net-area {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  min-block-size: 112px;
  padding-block: 0;
  padding-inline: 22px 19px;
  border-radius: 3px;
  background: var(--sv-net-paper);
  text-decoration: none;
}
.sv-net-area:hover { box-shadow: inset 0 0 0 1px var(--sv-net-ink); }
.sv-net-area__text { display: flex; flex-direction: column; padding-block-start: 9.9px; }
.sv-net-area__name { font-weight: 700; font-size: 23px; line-height: 38px; }
.sv-net-area__sub { margin-block-start: 14.9px; font-size: 14px; line-height: 22px; color: var(--sv-net-muted); }
.sv-net-area__side { display: flex; flex: none; flex-direction: column; align-items: center; inline-size: 239px; padding-block-start: 11px; }
.sv-net-area__go { margin-block-start: 16.9px; font-weight: 700; font-size: 15px; line-height: 24px; white-space: nowrap; }
.sv-net-arrow::after { content: "←"; display: inline-block; margin-inline-start: 2px; font-weight: 400; }
[dir="ltr"] .sv-net-arrow::after { content: "→"; }

.sv-net-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 239px;
  block-size: 35px;
  padding: 2.4px 16px 0.6px;
  border-radius: 15px;
  background: var(--sv-net-tint);
  color: var(--sv-net-red-text);
  font-weight: 700;
  font-size: 14px;
  line-height: 32px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- inventory */
.sv-net-inventory { margin-block-start: 120px; }
.sv-net-section-title { margin: 0; font-size: 39px; line-height: 54.6px; }
.sv-net-countries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sv-net-gap);
  margin: 57.6px 0 0;
  padding: 0;
  list-style: none;
}
.sv-net-country-card {
  display: flex;
  flex-direction: column;
  min-block-size: 177px;
  padding: 0 24px;
  border-radius: 3px;
  background: var(--sv-net-white);
}
.sv-net-country-card__name { margin-block-start: 15.6px; font-size: 19px; line-height: 27px; color: var(--sv-net-muted); }
.sv-net-country-card__count { margin-block-start: 24px; font-weight: 700; font-size: 29px; line-height: 40px; }
.sv-net-country-card__detail { margin-block-start: 21.4px; font-size: 16px; line-height: 24px; color: var(--sv-net-muted); }
.sv-net-country-card--ink { background: var(--sv-net-ink); color: var(--sv-net-white); }
.sv-net-country-card--ink .sv-net-country-card__name,
.sv-net-country-card--ink .sv-net-country-card__detail { color: var(--sv-net-on-ink-muted); }

.sv-net-table-wrap { margin-block-start: 36px; padding-block-end: 3px; border-radius: 3px; overflow: hidden; background: var(--sv-net-white); }
.sv-net-table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; }
.sv-net-table th, .sv-net-table td { padding: 0; text-align: start; vertical-align: middle; }
.sv-net-table thead th {
  block-size: 61px;
  padding-block-end: 7.8px;
  background: var(--sv-net-ink);
  color: var(--sv-net-white);
  font-weight: 700;
  font-size: 15px;
}
.sv-net-table td { block-size: 63px; padding-block-end: 4px; font-size: 16px; line-height: 25px; }
.sv-net-table tbody tr:nth-child(even) { background: #FAF9F6; }
/* columns, inside a 32 px margin (design at 1296 px: right edges at 1336, 1155, 850, 445, 295,
   that is 213 / 305 / 405 / 150 / 223 px); in shares, so narrower screens keep every column */
.sv-net-table th:first-child, .sv-net-table td:first-child { inline-size: 16.435%; padding-inline-start: 32px; }
.sv-net-table th:nth-child(2), .sv-net-table td:nth-child(2) { inline-size: 23.534%; }
.sv-net-table th:nth-child(3), .sv-net-table td:nth-child(3) { inline-size: 31.25%; }
.sv-net-table th:nth-child(4), .sv-net-table td:nth-child(4) { inline-size: 11.574%; }
.sv-net-table th:last-child, .sv-net-table td:last-child { padding-inline-end: 32px; }
.sv-net-table tbody td { background-image: linear-gradient(var(--sv-net-rule), var(--sv-net-rule)); background-repeat: no-repeat; background-size: 100% 1px; background-position: bottom; }
.sv-net-table tbody td:first-child { background-position: bottom right 0; background-size: calc(100% - 32px) 1px; }
.sv-net-table tbody td:last-child { background-size: calc(100% - 32px) 1px; }
[dir="rtl"] .sv-net-table tbody td:first-child { background-position: bottom left; }
[dir="rtl"] .sv-net-table tbody td:last-child { background-position: bottom right; }
[dir="ltr"] .sv-net-table tbody td:first-child { background-position: bottom right; }
[dir="ltr"] .sv-net-table tbody td:last-child { background-position: bottom left; }
.sv-net-table a { text-decoration: none; }
.sv-net-table a:hover { text-decoration: underline; }
.sv-net-table__open td { font-weight: 700; }
.sv-net-status { font-size: 14px; color: var(--sv-net-muted); }
.sv-net-status--open { font-weight: 700; color: var(--sv-color-green-text, #276747); }

.sv-net-note {
  min-block-size: 88px;
  margin: 40px 0 0;
  padding: 13.4px 32px 20px;
  border-radius: 3px;
  background: var(--sv-net-tint);
  font-size: 17px;
  line-height: 30px;
  color: var(--sv-net-muted);
}
.sv-net-note--tall { min-block-size: 123px; margin-block-start: 37px; padding-block: 19px 24px; font-size: 18px; line-height: 32px; }

/* ---------------------------------------------------------------- staff sign-in card */
.sv-net-staff { margin-block-start: 35px; }
.sv-net-staff__card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 15.9px 32px 32px;
  border-radius: 3px;
  background: var(--sv-net-white);
}
.sv-net-staff__title { margin: 0; font-size: 23px; line-height: 39px; }
.sv-net-staff__text p { margin: 16px 0 0; max-inline-size: 760px; font-size: 16px; line-height: 28px; color: var(--sv-net-muted); }

.sv-net-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-inline-size: 334px;
  block-size: 58px;
  padding: 13.8px 24px 12.2px;
  border-radius: 3px;
  background: var(--sv-net-red);
  color: var(--sv-net-white) !important;
  font-weight: 700;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
}
.sv-net-button:hover { background: var(--sv-color-red-hover, #C81A22); }
.sv-net-button--ink { min-inline-size: 345px; block-size: 55px; padding-block: 14.9px 8.1px; background: var(--sv-net-ink); font-size: 19px; }
.sv-net-button--ink:hover { background: #292925; }
.sv-net-button--wide { inline-size: 100%; padding-block: 16px 10px; font-size: 20px; }

/* ---------------------------------------------------------------- city page: cards */
.sv-net-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sv-net-gap);
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}
.sv-net-card { display: flex; flex-direction: column; min-block-size: 663px; border-radius: 3px; overflow: hidden; background: var(--sv-net-white); }
.sv-net-card__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  direction: ltr;
  block-size: 154px;
  padding: 0 26px;
  background: var(--sv-net-ink);
  color: var(--sv-net-white);
}
.sv-net-card__latin {
  grid-column: 2;
  grid-row: 1;
  margin: 31px 0 0 -4px;
  font-family: var(--sv-font-latin);
  font-weight: 700;
  font-size: 11px;
  line-height: 16px;
  color: var(--sv-net-on-ink-muted);
  letter-spacing: 0;
}
.sv-net-card__number {
  grid-column: 1;
  grid-row: 1;
  margin-block-start: 48px;
  font-family: var(--sv-font-latin);
  font-weight: 700;
  font-size: 63px;
  line-height: 63px;
}
.sv-net-card__body { display: flex; flex: 1; flex-direction: column; align-items: stretch; padding: 30px 24px 38.4px; }
.sv-net-card__title { margin: 0; font-size: 27px; line-height: 38px; }
.sv-net-card__body .sv-net-pill { min-inline-size: 0; margin-block-start: 33px; padding-block: 1.3px 1.7px; font-size: 13px; line-height: 32px; }
.sv-net-facts { margin: 31.8px 0 0; }
.sv-net-facts div + div { margin-block-start: 21.7px; }
.sv-net-facts dt { font-size: 14px; line-height: 22px; color: var(--sv-net-muted); }
.sv-net-facts dd { margin: 12.3px 0 0; font-size: 17px; line-height: 27px; }
.sv-net-card__body .sv-net-button { min-inline-size: 0; margin-block-start: auto; padding-block: 12.7px 13.3px; font-size: 17px; }
.sv-net-card__note { margin: 18.6px 0 0; font-size: 13px; line-height: 20px; color: var(--sv-net-muted); }

.sv-net-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-net-gap); margin-block-start: 35px; }
.sv-net-info { min-block-size: 257px; padding: 14.9px 32px 32px; border-radius: 3px; background: var(--sv-net-white); }
.sv-net-info__title { margin: 0; font-size: 23px; line-height: 38px; }
.sv-net-info p { margin: 23.6px 0 0; font-size: 18px; line-height: 34.2px; color: var(--sv-net-muted); }

/* ---------------------------------------------------------------- representative page */
.sv-net-rep { display: grid; grid-template-columns: minmax(0, 1fr) 398px; gap: var(--sv-net-gap); margin-block-start: 61.8px; }
.sv-net-rep--second { margin-block-start: 35px; }
.sv-net-rep__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-block-size: 380px;
  padding: 26px 32px 32px;
  border-radius: 3px;
  background: var(--sv-net-ink);
  color: var(--sv-net-white);
}
.sv-net-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 252px;
  block-size: 35px;
  padding: 2.4px 18px 0.6px;
  border-radius: 15px;
  background: #30302A;
  color: var(--sv-net-white);
  font-weight: 700;
  font-size: 14px;
  line-height: 32px;
}
.sv-net-rep__name { margin: 33.9px 0 0; font-size: 39px; line-height: 54px; color: var(--sv-net-white) !important; }
.sv-net-rep__days { margin: 28px 0 0; font-weight: 700; font-size: 23px; line-height: 32px; }
.sv-net-rep__time { margin: 31.7px 0 0; font-weight: 700; font-size: 29px; line-height: 40px; }
.sv-net-rep__time + .sv-net-rep__time { margin-block-start: 8px; }
.sv-net-rep__more { margin: 28px 0 0; max-inline-size: 640px; font-size: 19px; line-height: 34px; color: var(--sv-net-on-ink); }
.sv-net-rep__fee { margin: 26.2px 0 0; font-size: 22px; line-height: 34px; color: #D6D1C7; }
.sv-net-rep__media { position: relative; min-block-size: 380px; border-radius: 3px; overflow: hidden; background: var(--sv-net-paper); }
.sv-net-rep__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

.sv-net-register { display: flex; flex-direction: column; align-items: flex-start; min-block-size: 581px; padding: 19.9px 32px 40px; border-radius: 3px; background: var(--sv-net-white); }
.sv-net-register__title { margin: 0; font-size: 23px; line-height: 40px; }
.sv-net-register__text { margin: 23.9px 0 0; font-size: 19px; line-height: 36.1px; color: var(--sv-net-muted); }
.sv-net-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; inline-size: 100%; margin: 48.2px 0 0; padding: 0; list-style: none; }
.sv-net-group {
  display: flex;
  flex-direction: column;
  min-block-size: 102px;
  padding: 13px 18px 0;
  border: 1px solid var(--sv-net-rule);
  border-radius: 3px;
  background: var(--sv-net-paper);
  text-decoration: none;
}
.sv-net-group:hover { border-color: var(--sv-net-ink); }
.sv-net-group__name { font-weight: 700; font-size: 24px; line-height: 38px; }
.sv-net-group__latin { align-self: flex-end; margin-block-start: 21px; margin-inline-end: 1px; font-weight: 700; font-size: 11px; line-height: 16px; color: var(--sv-net-muted); }
[dir="ltr"] .sv-net-group__latin { align-self: flex-start; }
.sv-net-pill--pay { min-inline-size: 292px; margin-block-start: 32px; padding-block: 1.3px 1.7px; font-size: 13px; }
.sv-net-register .sv-net-button--wide { margin-block-start: 36px; }
.sv-net-register__note { margin: 36px 0 0; font-size: 16px; line-height: 26px; color: var(--sv-net-muted); }

.sv-net-staffbox { display: flex; flex-direction: column; align-items: stretch; min-block-size: 581px; padding: 25.1px 32px 32px; border-radius: 3px; background: var(--sv-net-ink); color: var(--sv-net-white); }
.sv-net-staffbox__title { margin: 0; font-size: 25px; line-height: 40px; color: var(--sv-net-white) !important; }
.sv-net-staffbox__text { margin: 50.7px 0 0; font-size: 19px; line-height: 36.1px; color: var(--sv-net-on-ink); }
.sv-net-staffbox .sv-net-button { min-inline-size: 0; margin-block-start: 104.2px; }
.sv-net-staffbox__note { margin: 49.4px 0 0; font-size: 17px; line-height: 30.6px; color: var(--sv-net-on-ink-muted); }


/* ===================================================================== classes page
   Savantar_JiuJitsu_Class_Design.pdf (Handoff 2, D49), boards 1–3 at 1440 px; board 4 = phones.
   Same measuring rules as the branches pages. Blocks: class_intro, class_program, support_cards,
   section_head, class_band, ink_band, audience_cards, steps, note, responsible_use (+ faq). */
.sv-cls-block h2, .sv-cls-block h3 { font-family: Vazirmatn, var(--sv-font-latin), sans-serif; font-weight: 700; color: inherit; letter-spacing: 0; }
/* The boards break lines greedily; the site's default "pretty" wrapping would move single words. */
.sv-cls-block :is(p, h2, h3, li) { text-wrap: wrap; }

/* ---------------------------------------------------------------- opening: text + switch | photo */
.sv-cls-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 550px;
  gap: 52px;
  align-items: start;
  margin-block-start: 54.6px;
}
.sv-cls-intro__text { display: flex; flex-direction: column; align-items: flex-start; }
.sv-cls-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 284px;
  block-size: 35px;
  padding: 2.4px 16px 0.6px;
  border-radius: 15px;
  background: var(--sv-net-green-tint);
  color: var(--sv-net-green-text);
  font-weight: 700;
  font-size: 14px;
  line-height: 32px;
  white-space: nowrap;
}
.sv-cls-intro__title { margin: 39px 0 0; font-size: 32px; line-height: 44.8px; }
.sv-cls-intro__lead { margin-block-start: 33.9px; font-size: 21px; line-height: 38.9px; color: var(--sv-net-muted); }
.sv-cls-intro__title[hidden], .sv-cls-intro__lead[hidden] { display: none; }
.sv-cls-focus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-self: stretch;
  margin-block-start: 66.5px;
}
.sv-cls-focus__button {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 60px;
  padding-block-end: 0.4px;
  border: 1px solid var(--sv-net-rule);
  border-radius: 3px;
  background: var(--sv-net-white);
  font-weight: 700;
  font-size: 18px;
  line-height: 50px;
  text-decoration: none;
}
.sv-cls-focus__button[aria-current="true"] { border-color: var(--sv-net-red); background: var(--sv-net-red); color: var(--sv-net-white) !important; }
.sv-cls-focus__button:hover:not([aria-current="true"]) { border-color: var(--sv-net-ink); }
.sv-cls-intro__note { margin-block-start: 28.2px; font-size: 16px; line-height: 25.6px; color: var(--sv-net-muted); }
.sv-cls-intro__media { position: relative; block-size: 438px; margin: 0; border-radius: 3px; overflow: hidden; background: var(--sv-net-paper); }
.sv-cls-intro__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sv-cls-intro__media--empty { background: var(--sv-net-ink); }
.sv-cls-intro__caption {
  position: absolute;
  inset: auto 0 0;
  block-size: 82px;
  padding: 18.1px 28px 0;
  background: var(--sv-net-ink);
  color: var(--sv-net-white);
  font-family: Vazirmatn, var(--sv-font-latin), sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 36px;
}

/* ---------------------------------------------------------------- program by representative */
.sv-cls-program {
  margin-block-start: 39px;
  padding: 16.9px 32px 22px;
  border-radius: 3px;
  background: var(--sv-net-white);
}
.sv-cls-program__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sv-cls-program__head[hidden], .sv-cls-program__body[hidden] { display: none; }
.sv-cls-program__title { margin: 0; font-size: 23px; line-height: 38px; }
.sv-cls-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-inline-size: 258px;
  block-size: 35px;
  margin-block-start: 6.1px;
  padding: 1.3px 16px 1.7px;
  border-radius: 15px;
  background: var(--sv-net-paper);
  color: var(--sv-net-muted);
  font-weight: 700;
  font-size: 13px;
  line-height: 32px;
  white-space: nowrap;
}
.sv-cls-choose { margin: 0; }
.sv-cls-choose__label { display: block; margin-block-start: 26.9px; font-weight: 700; font-size: 15px; line-height: 24px; }
.sv-cls-choose__row { display: flex; gap: 12px; margin-block-start: 15.1px; }
.sv-cls-choose__select {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 58px;
  padding-block: 6px 0;
  padding-inline: 26px 56px;
  border: 1px solid var(--sv-net-rule);
  border-radius: 3px;
  background-color: var(--sv-net-paper);
  /* a small chevron at the end, so the box reads as a list */
  background-image: linear-gradient(45deg, transparent 50%, var(--sv-net-muted) 50%), linear-gradient(135deg, var(--sv-net-muted) 50%, transparent 50%);
  background-position: left 26px center, left 32px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--sv-net-ink);
  font: inherit;
  font-weight: 700;
  font-size: 20px;
  appearance: none;
  cursor: pointer;
}
[dir="ltr"] .sv-cls-choose__select { padding-inline: 26px 56px; background-position: right 32px center, right 26px center; }
.sv-cls-choose__go {
  flex: none;
  block-size: 58px;
  padding-inline: 24px;
  border: 0;
  border-radius: 3px;
  background: var(--sv-net-ink);
  color: var(--sv-net-white);
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.sv-js .sv-cls-choose__go { display: none; }
.sv-cls-choose__select:focus-visible, .sv-cls-choose__go:focus-visible, .sv-cls-focus__button:focus-visible,
.sv-cls-outline:focus-visible, .sv-cls-faq summary:focus-visible { outline: 3px solid var(--sv-net-red); outline-offset: 2px; }
.sv-cls-program__invalid { margin-block-start: 16px; padding: 12px 16px; border-radius: 3px; background: var(--sv-net-tint); font-size: 16px; line-height: 27px; }

.sv-cls-schedule {
  display: grid;
  grid-template-columns: 56.494% minmax(0, 1fr);
  min-block-size: 181px;
  margin-block-start: 31px;
  border-radius: 3px;
  background: var(--sv-net-ink);
  color: var(--sv-net-white);
}
.sv-cls-schedule__when { padding: 19.2px 32px 17px; }
.sv-cls-schedule__fee { position: relative; padding: 16px 36px 20px; }
.sv-cls-schedule__fee::before { content: ""; position: absolute; inset-block: 29px 28px; inset-inline-start: 0; inline-size: 1px; background: var(--sv-net-line-on-ink); }
.sv-cls-schedule__days { font-weight: 700; font-size: 25px; line-height: 36px; }
.sv-cls-schedule__time { margin-block-start: 26.8px; font-weight: 700; font-size: 31px; line-height: 44px; }
.sv-cls-schedule__time + .sv-cls-schedule__time { margin-block-start: 4px; }
.sv-cls-schedule__note { margin-block-start: 14px; font-size: 15px; line-height: 24px; color: var(--sv-net-on-ink-muted); }
.sv-cls-schedule__label { font-size: 16px; line-height: 25.6px; color: var(--sv-net-on-ink-muted); }
.sv-cls-schedule__amount { margin-block-start: 30.5px; font-weight: 700; font-size: 31px; line-height: 44px; }
.sv-cls-schedule__payment { margin-block-start: 18.8px; font-size: 15px; line-height: 24px; color: var(--sv-net-on-ink); }

.sv-cls-program__actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-block-start: 29px; }
.sv-cls-program__register { min-inline-size: 436px; }
.sv-cls-outline {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-inline-size: 356px;
  block-size: 58px;
  padding: 11.7px 24px 12.3px;
  border: 1px solid var(--sv-net-rule);
  border-radius: 3px;
  background: var(--sv-net-white);
  color: var(--sv-net-ink) !important;
  font-weight: 700;
  font-size: 17px;
  line-height: 32px;
  text-decoration: none;
}
.sv-cls-outline:hover { border-color: var(--sv-net-ink); }
.sv-cls-disabled {
  flex: none;
  min-inline-size: 355px;
  block-size: 58px;
  padding: 10px 24px 16px;
  border: 0;
  border-radius: 3px;
  background: var(--sv-net-disabled);
  color: var(--sv-net-muted);
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 32px;
  cursor: not-allowed;
}
/* the representative has no confirmed program yet (board 3) */
.sv-cls-program--pending { padding-block: 18.9px 59.2px; }
.sv-cls-program--pending .sv-cls-pill { min-inline-size: 252px; }
.sv-cls-program--pending .sv-cls-outline { min-inline-size: 380px; }
.sv-cls-program--pending .sv-cls-choose__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sv-cls-program--pending .sv-cls-choose__row { margin-block-start: 38px; }
.sv-cls-program--pending .sv-cls-choose__select { block-size: 61px; }
.sv-cls-program__pending { margin-block-start: 31.2px; font-weight: 700; font-size: 22px; line-height: 36px; }
.sv-cls-program__actions--pending { margin-block-start: 87.8px; justify-content: flex-start; gap: 34px; }
.sv-cls-program__note { flex: 1 1 auto; margin: 5.6px 0 0; max-inline-size: 427px; margin-inline-end: auto; font-size: 16px; line-height: 29.6px; color: var(--sv-net-muted); }

/* ---------------------------------------------------------------- two dark cards (support) */
.sv-cls-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-net-gap); margin-block-start: 34px; }
.sv-cls-support__card { min-block-size: 149px; padding: 15.6px 32px 24px; border-radius: 3px; background: var(--sv-net-ink); color: var(--sv-net-white); }
.sv-cls-support--compact .sv-cls-support__card:nth-child(2) { padding-inline-start: 36px; }
.sv-cls-support__title { margin: 0; font-size: 21px; line-height: 32px; color: var(--sv-net-white) !important; }
.sv-cls-support__text { margin-block-start: 20.6px; font-size: 16px; line-height: 27.2px; color: var(--sv-net-on-ink); }
.sv-cls-support--full .sv-cls-support__card { min-block-size: 229px; }
.sv-cls-support__name { margin-block-start: 20.2px; font-weight: 700; font-size: 22px; line-height: 34px; }
.sv-cls-support--full .sv-cls-support__text { margin-block-start: 35.4px; }

/* ---------------------------------------------------------------- section title (boards 2 and 3) */
.sv-cls-head { margin-block-start: 112px; }
.sv-cls-head .sv-net-head__lead { margin-block-start: 18px; }
/* Wagtail wraps every section in <div class="block-…">: a section right after a large title */
.block-section_head + * :is(.sv-cls-band, .sv-cls-support, .sv-cls-audiences) { margin-block-start: 57.6px; }

/* ---------------------------------------------------------------- dark bands */
.sv-cls-band { min-block-size: 117px; margin-block-start: 35px; padding: 18.1px 32px 17.9px; border-radius: 3px; background: var(--sv-net-ink); color: var(--sv-net-white); }
.sv-cls-band__title { margin: 0; font-family: Vazirmatn, var(--sv-font-latin), sans-serif; font-weight: 700; font-size: 25px; line-height: 36px; color: var(--sv-net-white) !important; }
.sv-cls-band__text { margin-block-start: 18px; font-size: 17px; line-height: 27px; color: var(--sv-net-on-ink-muted); }
.sv-cls-band--text { min-block-size: 123px; padding-block-start: 19.1px; }
.sv-cls-band--text .sv-cls-band__text { margin-block-start: 19px; color: var(--sv-net-on-ink); }

/* ---------------------------------------------------------------- two white cards (kids / adults) */
.sv-cls-audiences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-net-gap); margin-block-start: 37px; }
.sv-cls-audience { display: flex; flex-direction: column; align-items: flex-start; min-block-size: 348px; padding: 20px 32px 32px; border-radius: 3px; background: var(--sv-net-white); }
.sv-cls-audience__label { align-self: flex-end; min-inline-size: 210px; }
.sv-cls-audience__title { margin: 34.2px 0 0; font-size: 26px; line-height: 38px; }
.sv-cls-audience__text { margin-block-start: 37.6px; font-size: 19px; line-height: 36.1px; color: var(--sv-net-muted); }

/* ---------------------------------------------------------------- numbered steps (learning path) */
.sv-cls-steps__heading { margin: 34.9px 0 0; font-size: 23px; line-height: 38px; }
.sv-cls-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32.1px 0 0; padding: 0; list-style: none; }
.sv-cls-step { display: flex; flex-direction: column; min-block-size: 326px; padding: 19px 22px 24px; border-radius: 3px; background: var(--sv-net-white); }
.sv-cls-step__number {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  justify-content: center;
  inline-size: 83px;
  block-size: 35px;
  padding-block-start: 4px;
  border-radius: 15px;
  background: var(--sv-net-red);
  color: var(--sv-net-white);
  font-weight: 700;
  font-size: 15px;
  line-height: 31px;
}
.sv-cls-step__title { margin: 29.2px 0 0; font-size: 22px; line-height: 36px; }
.sv-cls-step__text { margin-block-start: 63.4px; font-size: 16px; line-height: 29.6px; color: var(--sv-net-muted); }
.sv-cls-note { margin-block-start: 34.1px; font-size: 17px; line-height: 27px; color: var(--sv-net-muted); }

/* ---------------------------------------------------------------- responsible practice + choices */
.sv-cls-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-net-gap); margin-block-start: 33px; }
.sv-cls-use__card { min-block-size: 423px; padding: 15.9px 32px 11.9px; border-radius: 3px; background: var(--sv-net-white); }
.sv-cls-use__title { margin: 0; font-size: 23px; line-height: 38px; }
.sv-cls-rule { min-block-size: 112px; }
.sv-cls-rule:first-of-type { margin-block-start: 21.2px; }
.sv-cls-rule__title { margin: 0; font-size: 17px; line-height: 27px; }
.sv-cls-rule__text { margin-block-start: 8.9px; font-size: 15px; line-height: 27px; color: var(--sv-net-muted); }
.sv-cls-choices { padding-block-start: 17.6px; padding-inline-start: 36px; }
.sv-cls-choices__title { font-size: 21px; line-height: 32px; }
.sv-cls-choices__list { margin: 14.6px 0 0; padding: 0; list-style: none; }
.sv-cls-choice { display: flex; align-items: center; gap: 12px; min-block-size: 47px; font-size: 14.5px; line-height: 24px; }
.sv-cls-choice__box { flex: none; align-self: flex-start; inline-size: 17px; block-size: 17px; margin-block-start: 11.8px; margin-inline-start: 1px; border: 1px solid var(--sv-net-rule); border-radius: 3px; background: var(--sv-net-white); }
.sv-cls-choices__note { margin-block-start: 14.8px; font-size: 15px; line-height: 27px; color: var(--sv-net-muted); }
.sv-cls-choices__note + .sv-cls-choices__note { margin-block-start: 56px; }
.sv-cls-choices__small { margin-block-start: 24.2px; font-size: 13.5px; line-height: 22px; color: var(--sv-net-muted); }

/* ---------------------------------------------------------------- questions (no board: same language) */
.sv-cls .sv-section { margin-block-start: 37px; padding: 0; background: none; }
.sv-cls .sv-section > .sv-container { max-inline-size: calc(var(--sv-layout-max-width) + 2 * var(--sv-layout-gutter)); }
.sv-cls .sv-section .sv-section-head { margin: 0; padding: 16px 32px 12px; border-radius: 3px 3px 0 0; background: var(--sv-net-white); text-align: start; }
.sv-cls .sv-section .sv-title { margin: 0; font-size: 23px; line-height: 38px; }
.sv-cls .sv-faq { padding: 0 32px 12px; border-block-start: 0; border-radius: 0 0 3px 3px; background: var(--sv-net-white); }
.sv-cls .sv-faq:first-child { padding-block-start: 12px; border-radius: 3px; }
.sv-cls .sv-faq details { border-block-end: 0; border-block-start: 1px solid var(--sv-net-rule); }
.sv-cls .sv-faq summary { padding-block: 16px; font-size: 17px; line-height: 27px; }
.sv-cls .sv-faq summary::after { color: var(--sv-net-red); }
.sv-cls .sv-faq__answer { padding-block-end: 18px; color: var(--sv-net-muted); font-size: 16px; line-height: 29.6px; }

/* ---------------------------------------------------------------- tablets and phones */
@media (max-width: 1099px) {
  .sv-net { --sv-net-gap: 20px; padding-block-end: 64px; }
  .sv-net-head { padding-block-start: 40px; }
  .sv-net-head__title, .sv-net-section-title { font-size: clamp(28px, 6vw, 39px); line-height: 1.4; }
  .sv-net-banner, .sv-net-banner--area { grid-template-columns: minmax(0, 1fr); margin-block-start: 32px; }
  .sv-net-banner__media { order: -1; aspect-ratio: 3 / 1; }
  .sv-net-banner__title { font-size: clamp(22px, 5vw, 29px); line-height: 1.4; }
  .sv-net-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .sv-net-country { grid-template-columns: minmax(0, 1fr); gap: var(--sv-net-gap); }
  .sv-net-panel { min-block-size: 0; padding: 16px 20px 24px; }
  .sv-net-area { flex-direction: column; gap: 12px; padding: 14px 18px 16px; }
  .sv-net-area__side { flex-direction: row; flex-wrap: wrap; justify-content: space-between; inline-size: auto; gap: 8px 12px; padding-block-start: 0; }
  .sv-net-area__go { margin: 0; }
  .sv-net-pill { min-inline-size: 0; }
  .sv-net-inventory { margin-block-start: 72px; }
  .sv-net-countries { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-block-start: 28px; }
  .sv-net-country-card { min-block-size: 0; padding-block-end: 20px; }
  .sv-net-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .sv-net-card { min-block-size: 0; }
  .sv-net-card__body .sv-net-button { margin-block-start: 32px; }
  .sv-net-pair { grid-template-columns: minmax(0, 1fr); }
  .sv-net-info { min-block-size: 0; }
  .sv-net-rep { grid-template-columns: minmax(0, 1fr); margin-block-start: 32px; }
  .sv-net-rep__media { order: -1; min-block-size: 0; aspect-ratio: 16 / 9; }
  .sv-net-rep__card, .sv-net-register, .sv-net-staffbox { min-block-size: 0; }
  .sv-net-rep__name { margin-block-start: 32px; font-size: clamp(28px, 6vw, 39px); }
  .sv-net-staffbox .sv-net-button { margin-block-start: 32px; }
  .sv-net-staff__card { flex-direction: column; align-items: stretch; }
  .sv-net-button, .sv-net-button--ink { min-inline-size: 0; inline-size: 100%; }
  /* classes page */
  .sv-cls-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-block-start: 32px; }
  .sv-cls-intro__title { margin-block-start: 24px; font-size: clamp(24px, 5vw, 32px); line-height: 1.4; }
  .sv-cls-intro__lead { margin-block-start: 16px; font-size: 18px; line-height: 1.8; }
  .sv-cls-focus { gap: 12px; margin-block-start: 28px; }
  .sv-cls-intro__note { margin-block-start: 16px; }
  .sv-cls-intro__media { block-size: auto; aspect-ratio: 550 / 438; }
  .sv-cls-program, .sv-cls-program--pending { margin-block-start: 32px; padding: 18px 20px 22px; }
  .sv-cls-program__head { flex-direction: column; gap: 10px; }
  .sv-cls-pill { margin-block-start: 0; }
  .sv-cls-choose__label { margin-block-start: 20px; }
  .sv-cls-program--pending .sv-cls-choose__row { margin-block-start: 20px; }
  .sv-cls-schedule { grid-template-columns: minmax(0, 1fr); margin-block-start: 24px; }
  .sv-cls-schedule__when, .sv-cls-schedule__fee { padding: 18px 20px; }
  .sv-cls-schedule__fee::before { inset: 0 20px auto; inline-size: auto; block-size: 1px; }
  .sv-cls-schedule__time, .sv-cls-schedule__amount { margin-block-start: 12px; font-size: 26px; line-height: 38px; }
  .sv-cls-schedule__payment, .sv-cls-schedule__note { margin-block-start: 8px; }
  .sv-cls-program__actions, .sv-cls-program__actions--pending { flex-direction: column; align-items: stretch; gap: 12px; margin-block-start: 24px; }
  .sv-cls-program__register, .sv-cls-outline, .sv-cls-disabled, .sv-cls-program--pending .sv-cls-outline { min-inline-size: 0; inline-size: 100%; }
  .sv-cls-program__note { max-inline-size: none; margin: 0; }
  .sv-cls-program__pending { margin-block-start: 24px; font-size: 20px; line-height: 1.7; }
  .sv-cls-support, .sv-cls-audiences, .sv-cls-use { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-block-start: 24px; }
  .sv-cls-support__card, .sv-cls-support--full .sv-cls-support__card, .sv-cls-audience, .sv-cls-use__card { min-block-size: 0; }
  .sv-cls-head { margin-block-start: 72px; }
  .block-section_head + * :is(.sv-cls-band, .sv-cls-support, .sv-cls-audiences) { margin-block-start: 28px; }
  .sv-cls-band, .sv-cls-band--text { min-block-size: 0; margin-block-start: 24px; padding: 16px 20px 18px; }
  .sv-cls-band__title { font-size: 21px; line-height: 1.6; }
  .sv-cls-audience { padding-inline: 20px; }
  .sv-cls-audience__title { margin-block-start: 20px; font-size: 22px; line-height: 1.5; }
  .sv-cls-audience__text { margin-block-start: 14px; font-size: 17px; line-height: 1.9; }
  .sv-cls-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-cls-step { min-block-size: 0; }
  .sv-cls-step__text { margin-block-start: 16px; }
  .sv-cls-rule { min-block-size: 0; margin-block-start: 20px; }
  .sv-cls-rule:first-of-type { margin-block-start: 16px; }
  .sv-cls-choices__note + .sv-cls-choices__note { margin-block-start: 14px; }
}
@media (max-width: 760px) {
  .sv-cls-steps { grid-template-columns: minmax(0, 1fr); }
  .sv-cls-focus__button { block-size: 48px; font-size: 16px; line-height: 40px; }
  .sv-cls-intro__caption { block-size: auto; padding: 12px 20px 14px; font-size: 20px; line-height: 1.6; }
  .sv-cls-use__card, .sv-cls-support__card, .sv-cls-choices { padding-inline: 20px; }
  .sv-cls .sv-section .sv-section-head, .sv-cls .sv-faq { padding-inline: 20px; }
  /* phones: the search button shows the magnifier only, so the whole hint fits in the box */
  .sv-net-search { gap: 8px; }
  .sv-net-search__input { padding-inline: 14px; }
  .sv-net-search__button { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; padding: 0; }
  .sv-net-search__icon { display: block; }
  .sv-net-search__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sv-net-tabs { gap: 8px; }
  .sv-net-tab { block-size: 46px; padding-block-start: 2px; font-size: 15px; }
  .sv-net-regions { gap: 8px; }
  .sv-net-region { min-block-size: 48px; padding-block-start: 13px; }
  .sv-net-groups { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sv-net-badge, .sv-net-pill--pay { min-inline-size: 0; }
  /* Cards keep 20 px inside on phones (design page 6). */
  .sv-net-banner__body, .sv-net-staff__card, .sv-net-rep__card, .sv-net-register, .sv-net-staffbox,
  .sv-net-info, .sv-net-note, .sv-net-card__body { padding-inline: 20px; }
  .sv-net-rep__card, .sv-net-register, .sv-net-staffbox { padding-block: 20px 24px; }
  .sv-net-rep__name { margin-block-start: 24px; }
  .sv-net-staffbox__text, .sv-net-info p { margin-block-start: 16px; }
  .sv-net-staffbox__note { margin-block-start: 24px; }
  .sv-net-note, .sv-net-note--tall { min-block-size: 0; padding-block: 14px 18px; }
  .sv-net-country-card { padding-inline: 20px; }
  .sv-net-country-card__count { margin-block-start: 10px; font-size: 24px; line-height: 34px; }
  .sv-net-country-card__detail { margin-block-start: 8px; }
  /* The table becomes one compact block per destination:
     city ............ status
     country / province ... Representatives: n */
  .sv-net-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .sv-net-table, .sv-net-table tbody { display: block; }
  .sv-net-table tr {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 6px;
    padding: 12px 20px 13px;
    border-block-end: 1px solid var(--sv-net-rule);
  }
  .sv-net-table tbody td { display: block; inline-size: auto !important; block-size: auto; padding: 0 !important; background: none !important; font-size: 14px; line-height: 22px; }
  .sv-net-table tbody td:nth-child(3) { grid-area: 1 / 1 / 2 / 4; font-weight: 700; font-size: 16px; line-height: 26px; }
  .sv-net-table tbody td:nth-child(5) { grid-area: 1 / 4; text-align: end; }
  .sv-net-table tbody td:nth-child(1) { grid-area: 2 / 1; color: var(--sv-net-muted); }
  .sv-net-table tbody td:nth-child(2) { grid-area: 2 / 2; color: var(--sv-net-muted); }
  .sv-net-table tbody td:nth-child(2)::before { content: "/ "; }
  .sv-net-table tbody td.sv-net-table__empty { display: none; }
  .sv-net-table tbody td:nth-child(4) { grid-area: 2 / 4; text-align: end; color: var(--sv-net-muted); white-space: nowrap; }
  .sv-net-table tbody td:nth-child(4)::before { content: attr(data-label) ": "; }
}

/* Contact page: phone / email list (2026-11-01). Each icon on the line of its number. */
.sv-branch__meta { display: grid; gap: var(--sv-space-3); justify-items: start; }
.sv-branch__meta > a { display: inline-flex; align-items: center; gap: var(--sv-space-2); }
.sv-branch__meta > a .sv-icon { flex: none; }

/* Contact page form (P3, 2026-10-22) */
.sv-contact-form__title { margin-block-end: var(--sv-space-5); }
.sv-contact-form { display: grid; gap: var(--sv-space-4); }
.sv-contact-form .sv-button { justify-self: start; }
.sv-contact-form__trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* ===================================================================== team member's page
   Complete Update v18 (2026-10-22), app/team/sajad-keshavarzi: portrait beside the name,
   three facts, services, certificates and the next steps. The photo is framed, never retouched. */
.sv-prof-crumbs { margin: 0 0 18px; font-size: 15px; line-height: 26px; color: var(--sv-net-muted); }
.sv-prof-crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.sv-prof-eyebrow { margin: 0; font-size: 13px; line-height: 22px; font-weight: 700; letter-spacing: .08em; color: var(--sv-net-red-text); text-align: start; }
html[dir="rtl"] .sv-prof-eyebrow { text-align: right; }
.sv-prof-hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; padding-block-start: 56px; }
.sv-prof-hero__name { margin: 10px 0 0; font-size: 48px; line-height: 66px; }
.sv-prof-dot { color: var(--sv-net-red); }
.sv-prof-hero__latin { margin: 0; font-size: 17px; line-height: 28px; color: var(--sv-net-muted); text-align: start; }
html[dir="rtl"] .sv-prof-hero__latin { text-align: right; }
.sv-prof-hero__role { margin: 18px 0 0; font-weight: 700; font-size: 23px; line-height: 36px; }
.sv-prof-hero__bio { margin: 16px 0 0; max-inline-size: 640px; font-size: 18px; line-height: 32px; color: var(--sv-net-muted); }
.sv-prof-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.sv-prof-tags li { padding: 4px 16px 2px; border: 1px solid var(--sv-net-rule); border-radius: 15px; font-size: 15px; line-height: 26px; }
.sv-prof-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-block-start: 32px; }
.sv-prof-link { font-weight: 700; font-size: 17px; line-height: 28px; color: var(--sv-net-red-text) !important; text-decoration: none; }
.sv-prof-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.sv-prof-portrait { margin: 0; }
.sv-prof-portrait img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; background: var(--sv-net-paper); }
.sv-prof-portrait figcaption { margin-block-start: 10px; font-size: 14px; line-height: 24px; color: var(--sv-net-muted); }
.sv-prof-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 56px 0 0; border-block: 1px solid var(--sv-net-rule); }
.sv-prof-facts > div { padding: 22px 24px 20px; }
.sv-prof-facts > div + div { border-inline-start: 1px solid var(--sv-net-rule); }
.sv-prof-facts dt { font-size: 14px; line-height: 24px; color: var(--sv-net-muted); }
.sv-prof-facts dd { margin: 6px 0 0; font-weight: 700; font-size: 18px; line-height: 30px; }
.sv-prof-section { margin-block-start: 80px; }
.sv-prof-section__title { margin: 8px 0 0; font-size: 34px; line-height: 50px; }
.sv-prof-section__lead { margin: 12px 0 0; font-size: 17px; line-height: 30px; color: var(--sv-net-muted); }
.sv-prof-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block-start: 32px; }
.sv-prof-service { padding: 26px 28px 28px; border-radius: 3px; background: var(--sv-net-ink); color: var(--sv-net-white); }
.sv-prof-service__num { font-weight: 700; font-size: 15px; line-height: 24px; color: var(--sv-net-on-ink-muted); }
.sv-prof-service h3 { margin: 14px 0 0; font-size: 22px; line-height: 34px; color: var(--sv-net-white) !important; }
.sv-prof-service p { margin: 10px 0 0; font-size: 16px; line-height: 28px; color: var(--sv-net-on-ink); }
.sv-prof-scope { margin-block-start: 24px; padding: 22px 28px; border-inline-start: 3px solid var(--sv-net-red); background: var(--sv-net-paper); }
.sv-prof-scope h3 { margin: 0; font-size: 19px; line-height: 30px; }
.sv-prof-scope p { margin: 6px 0 0; font-size: 16px; line-height: 28px; color: var(--sv-net-muted); }
.sv-prof-creds { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.sv-prof-creds__list { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--sv-net-rule); }
.sv-prof-creds__list li { display: flex; gap: 24px; padding: 18px 0 16px; border-block-end: 1px solid var(--sv-net-rule); }
.sv-prof-creds__year { flex: 0 0 92px; font-weight: 700; font-size: 17px; line-height: 30px; color: var(--sv-net-red-text); }
.sv-prof-creds__list h3 { margin: 0; font-size: 19px; line-height: 30px; }
.sv-prof-creds__list p { margin: 2px 0 0; font-size: 15px; line-height: 26px; color: var(--sv-net-muted); }
.sv-prof-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: prof; }
.sv-prof-steps li { counter-increment: prof; padding-block-start: 18px; border-block-start: 3px solid var(--sv-net-ink); }
.sv-prof-steps li::before { content: counter(prof); font-weight: 700; font-size: 15px; line-height: 24px; color: var(--sv-net-red-text); }
.sv-prof-steps h3 { margin: 6px 0 0; font-size: 20px; line-height: 32px; }
.sv-prof-steps p { margin: 8px 0 0; font-size: 16px; line-height: 28px; color: var(--sv-net-muted); }
.sv-prof-note { margin: 32px 0 0; max-inline-size: 860px; font-size: 16px; line-height: 28px; color: var(--sv-net-muted); }
@media (max-width: 1099px) {
  .sv-prof-hero { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
  .sv-prof-services, .sv-prof-steps { grid-template-columns: minmax(0, 1fr); }
  .sv-prof-creds { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  .sv-prof-hero { grid-template-columns: minmax(0, 1fr); padding-block-start: 32px; }
  .sv-prof-portrait { order: -1; max-inline-size: 320px; }
  .sv-prof-hero__name { font-size: 36px; line-height: 50px; }
  .sv-prof-facts { grid-template-columns: minmax(0, 1fr); }
  .sv-prof-facts > div + div { border-inline-start: 0; border-block-start: 1px solid var(--sv-net-rule); }
  .sv-prof-section { margin-block-start: 56px; }
  .sv-prof-section__title { font-size: 27px; line-height: 40px; }
  .sv-prof-actions .sv-net-button { min-inline-size: 0; inline-size: 100%; }
}

/* the support cards of the classes page: photo and link to the team member's page */
.sv-cls-support__person { display: flex; align-items: center; gap: 16px; margin-block-start: 14px; }
.sv-cls-support__photo { flex: 0 0 72px; }
.sv-cls-support__photo img { display: block; inline-size: 72px; block-size: 96px; object-fit: cover; border-radius: 3px; }
.sv-cls-support__more { display: inline-block; margin-block-start: 12px; font-weight: 700; font-size: 16px; line-height: 26px; color: #FFFFFF !important; text-decoration: underline; text-underline-offset: 4px; }
.sv-cls-support__person .sv-cls-support__name { margin: 0; }
.sv-prof-steps, .sv-prof-steps li { list-style: none !important; }
.sv-prof-steps li::marker { content: none; }

/* accepted representative: name, area served and venue inside the dark card */
.sv-net-rep__facts { display: grid; gap: 14px; margin: 28px 0 0; inline-size: 100%; padding-block-start: 22px; border-block-start: 1px solid var(--sv-net-line-on-ink); }
.sv-net-rep__facts dt { font-size: 14px; line-height: 22px; color: var(--sv-net-on-ink-muted); }
.sv-net-rep__facts dd { margin: 2px 0 0; font-weight: 700; font-size: 19px; line-height: 30px; color: var(--sv-net-white); }
html[lang="fa"] .sv-prof-steps li::before { content: counter(prof, persian); }

/* ===================================================================== team page: photo, name, résumé on click
   Khashayar 2026-10-25: a click on the photo or the name shows a short résumé under the photo,
   and the photo darkens. <details name="sv-team"> keeps one open at a time in current browsers. */
/* Team page (Khashayar 2026-10-26: symmetric, balanced). Each group is centred: two founders sit
   in the middle, the rest of the team below them, also centred. Card width w = min(380px, 26vw);
   the gap between cards is w / φ³ ≈ 0.236 w (≈ 88 px), the space between groups w / φ² ≈ 0.382 w
   (≈ 145 px), the title sits w / φ⁴ ≈ 0.146 w (≈ 55 px) above its cards. */
.sv-team-page { --sv-card: min(380px, 26vw); }
.sv-team-page .sv-team-group { display: grid; justify-items: center; gap: calc(var(--sv-card) * 0.146); }
.sv-team-page .sv-team-group + .sv-team-group { margin-block-start: calc(var(--sv-card) * 0.382); }
.sv-team-page .sv-team-group > .sv-subtitle { margin: 0; text-align: center; }
.sv-reveal-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: calc(var(--sv-card, 320px) * 0.236); }
.sv-reveal-grid > .sv-reveal { flex: 0 0 var(--sv-card, 320px); inline-size: var(--sv-card, 320px); }
.sv-reveal { margin: 0; }
.sv-reveal__head { display: grid; gap: 6px; list-style: none; cursor: pointer; }
.sv-reveal__head::-webkit-details-marker { display: none; }
.sv-reveal__head::marker { content: ""; }
.sv-reveal[data-empty] .sv-reveal__head { cursor: default; }
.sv-reveal__photo { position: relative; display: block; overflow: hidden; border-radius: 3px; background: var(--sv-color-paper, #F3F1EB); aspect-ratio: 4 / 5; }
.sv-reveal__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: filter .25s ease, transform .4s ease; }
.sv-reveal__head:hover .sv-reveal__photo img { filter: brightness(.82); }
.sv-reveal[open] .sv-reveal__photo img { filter: brightness(.42); transform: scale(1.02); }
/* The ± mark: the two bars are centred by the grid, never by offsets. Khashayar 2026-10-26: the plus sat off
   centre on Persian pages because a logical position (inset-inline-start: 50%) was paired with a physical
   margin (-8px on the left), which only works left to right. scripts/check_centering.py guards both. */
.sv-reveal__mark { position: absolute; inset-block-end: 14px; inset-inline-end: 14px; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--sv-color-red, #E32129); }
.sv-reveal[data-empty] .sv-reveal__mark { display: none; }
.sv-reveal__mark::before, .sv-reveal__mark::after { content: ""; grid-area: 1 / 1; inline-size: 16px; block-size: 2px; background: #FFF; transition: transform .25s ease; }
.sv-reveal__mark::after { transform: rotate(90deg); }
.sv-reveal[open] .sv-reveal__mark::after { transform: rotate(0deg); }
.sv-reveal__name { margin-block-start: 10px; font-weight: 700; font-size: 24px; line-height: 36px; color: var(--sv-color-ink, #111110); }
.sv-reveal__role { font-weight: 700; font-size: 15px; line-height: 24px; color: var(--sv-color-red-text, #D41E26); }
.sv-reveal__more { font-size: 15px; line-height: 24px; color: var(--sv-color-muted, #66645D); text-decoration: underline; text-underline-offset: 4px; }
.sv-reveal__close, .sv-reveal[open] .sv-reveal__open { display: none; }
.sv-reveal[open] .sv-reveal__close { display: inline; }
.sv-reveal__head:focus-visible { outline: 3px solid var(--sv-color-red, #E32129); outline-offset: 4px; }
.sv-reveal__body { overflow: hidden; margin-block-start: 14px; padding-block-start: 14px; border-block-start: 1px solid var(--sv-color-rule, #D7D2C8); animation: sv-reveal-in .25s ease; }
.sv-reveal__body p { margin: 0 0 12px; font-size: 16px; line-height: 29px; color: var(--sv-color-ink, #111110); }
.sv-reveal__rank { font-weight: 700; font-size: 15px !important; color: var(--sv-color-muted, #66645D) !important; }
.sv-reveal__link { font-weight: 700; color: var(--sv-color-red-text, #D41E26) !important; text-decoration: none; }
.sv-reveal__link:hover { text-decoration: underline; }
.sv-js .sv-reveal__body { animation: none; }
@keyframes sv-reveal-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sv-reveal__photo img, .sv-reveal__mark::after { transition: none; } .sv-reveal__body { animation: none; } }
@media (max-width: 1099px) { .sv-team-page { --sv-card: min(340px, 40vw); } }
@media (max-width: 640px) { .sv-team-page { --sv-card: min(420px, 100%); } .sv-team-page .sv-team-group + .sv-team-group { margin-block-start: 72px; } .sv-reveal-grid { gap: 48px; } }

/* ===================================================================== terms and privacy (apps/legal) */
.sv-legal-page { padding-block-start: 0; }
.sv-legal-page__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 14px; color: var(--sv-color-muted, #66645D); }
.sv-legal-page__meta p { margin: 0; }
.sv-legal-page__branch { display: flex; align-items: center; gap: 8px; }
.sv-legal-page__terms { margin: 0; padding-inline-start: 1.4em; display: grid; gap: 14px; }
.sv-legal-page__terms h3 { margin: 0 0 4px; font-size: 17px; line-height: 28px; }
.sv-legal-page__terms p { margin: 0; line-height: 30px; }
.sv-legal-page__items { display: grid; gap: 8px; }
.sv-legal-page__items details, .sv-legal-page__item { padding: 12px 16px; border: 1px solid var(--sv-color-rule, #D7D2C8); border-radius: 3px; background: #FFF; }
.sv-legal-page__items summary, .sv-legal-page__item summary { cursor: pointer; }
.sv-legal-page__items details p, .sv-legal-page__item p { margin: 8px 0 0; line-height: 29px; }
@media print {
  .sv-header, .sv-footer, .sv-legal-page__branch, [data-sv-print], .sv-skip { display: none !important; }
  .sv-legal-page__items details, .sv-legal-page__item { break-inside: avoid; }
}

/* =================================================================== "Teach with SAVANTAR" (coach application)
   Khashayar 2026-10-26: shown where a coach looks for it (team, join us, contact). A dark card in
   the site's ink style; the text at the start, the red button at the end. */
.sv-join { margin-block: 72px; }
.sv-join__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; padding: 44px 48px; border-radius: 4px; background: var(--sv-color-ink, #111110); color: #FFF; }
.sv-join__text { flex: 1 1 420px; max-inline-size: 680px; }
.sv-join__label { margin: 0 0 10px; color: #B7B3AA; font-size: 0.6875rem; letter-spacing: 0.16em; }
.sv-join__title { margin: 0; color: #FFF; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.5; }
.sv-join__lead { margin: 12px 0 0; color: #D9D5CC; font-size: 1rem; line-height: 1.85; }
.sv-join--light .sv-join__card { border: 1px solid var(--sv-line-neutral, #DDD8CE); background: var(--sv-bg, #FFF); color: var(--sv-text, #111110); }
.sv-join--light .sv-join__title { color: var(--sv-text, #111110); }
.sv-join--light .sv-join__lead { color: var(--sv-text-muted, #66645D); }
.sv-join--light + .sv-join { margin-block-start: 0; }
.sv-join__button { flex: 0 0 auto; min-inline-size: 240px; min-block-size: 56px; justify-content: center; gap: 12px; }
@media (max-width: 640px) {
  .sv-join { margin-block: 48px; }
  .sv-join__card { padding: 28px 22px; }
  .sv-join__button { inline-size: 100%; }
}
/* the short line on the first registration step */
.sv-reg-coach-line { margin: 14px 0 0; font-size: 15px; line-height: 24px; color: var(--sv-color-muted, #66645D); }
.sv-reg-coach-line a { color: var(--sv-color-red-text, #D41E26); font-weight: 700; text-underline-offset: 4px; }

/* ---- registration.css ---- */
/* ============================================================================
   Online registration (Tehran registration package, 10-page design, 1440 px).
   Positions measured from the design PDF (scripts/design/pdf_baselines.py and
   pdf_boxes.py); the site's header is 15 px taller than the design's, everything
   else lands on the design's coordinates. Vazirmatn baseline in a line box =
   line-height / 2 + 0.244 × font size (docs/design/README.md).
   ========================================================================== */
.sv-reg {
  --reg-ink: var(--sv-color-ink, #111110);
  --reg-paper: var(--sv-color-paper, #F3F1EB);
  --reg-white: #FFFFFF;
  --reg-muted: var(--sv-color-muted, #66645D);
  --reg-rule: var(--sv-color-rule, #D7D2C8);
  --reg-red: var(--sv-color-red, #E32129);
  --reg-red-text: #D41E26;
  --reg-tint: var(--sv-color-red-tint, #FFF1EE);
  --reg-green-tint: #E9EFE7;
  --reg-green: #276747;
  --reg-on-ink: #C9C4B9;
  --reg-on-ink-soft: #D1CCC2;
  --reg-on-ink-muted: #A7A49C;
  --reg-pill-ink: #30302A;
  --reg-line-on-ink: #3B3B35;
  --reg-code-ink: #292925;
  color: var(--reg-ink);
  padding-block-end: 86px;
  overflow-x: clip;
}
.sv-reg h1, .sv-reg h2, .sv-reg h3 { font-family: Vazirmatn, var(--sv-font-latin), sans-serif; font-weight: 700; color: inherit; letter-spacing: 0; margin: 0; }
/* Resets at zero specificity (:where), so every component class below wins over them
   (the grey fieldset boxes keep their padding, the stepper its negative margins). */
:where(.sv-reg) :where(p, ol, ul, dl, dd, fieldset, figure) { margin: 0; }
:where(.sv-reg) fieldset { padding: 0; border: 0; min-inline-size: 0; }
.sv-reg ol, .sv-reg ul { padding: 0; list-style: none; }
.sv-reg p { text-wrap: wrap; }
.sv-reg [hidden] { display: none !important; }
.sv-reg a { color: inherit; }
.sv-reg-trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------------------------------------------------------------- shared pieces */
.sv-reg-pill {
  display: inline-block;
  min-inline-size: 0;
  block-size: 35px;
  padding: 5px 18px 0;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16.8px;
  text-align: center;
  white-space: nowrap;
}
.sv-reg-pill--ink { background: var(--reg-pill-ink); color: var(--reg-white); }
.sv-reg-pill--tint { background: var(--reg-tint); color: var(--reg-red); font-size: 14px; line-height: 19.6px; padding-block-start: 5.2px; }
.sv-reg-pill--paper { background: var(--reg-paper); color: var(--reg-ink); font-size: 13px; line-height: 18.2px; padding-block-start: 6.2px; }

.sv-reg-button {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  block-size: 58px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 3px;
  font: 700 17px/23.8px Vazirmatn, var(--sv-font-latin), sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.sv-reg-button--red { background: var(--reg-red); color: var(--reg-white); padding-block-start: 11.6px; }
.sv-reg-button--red:hover { background: #C81B22; }
.sv-reg-button--outline { background: var(--reg-white); border-color: var(--reg-rule); color: var(--reg-ink); font-size: 16px; line-height: 22.4px; padding-block-start: 11.5px; }
.sv-reg-button--outline:hover { border-color: var(--reg-ink); }
.sv-reg-button--ink { background: var(--reg-ink); color: var(--reg-white); padding-block-start: 11.6px; }
.sv-reg-button:focus-visible, .sv-reg-input:focus-visible, .sv-reg-steps__link:focus-visible,
.sv-reg-group__input:focus-visible + .sv-reg-group__card, .sv-reg-option__input:focus-visible + .sv-reg-option__card,
.sv-reg-check__input:focus-visible + .sv-reg-check__label .sv-reg-check__box,
.sv-reg-chip__input:focus-visible + .sv-reg-chip, .sv-reg-inline-options__input:focus-visible + .sv-reg-inline-options__option,
.sv-reg-drop__input:focus-visible + .sv-reg-drop__button {
  outline: 2px solid var(--reg-red);
  outline-offset: 2px;
}
.sv-reg-button[disabled] { opacity: .7; cursor: progress; }

/* ---------------------------------------------------------------- heading of steps 2–8 */
.sv-reg-head { padding-block-start: 67.07px; }
.sv-reg-head__title { font-size: 37px; line-height: 51.8px; }
.sv-reg-head__lead { margin-block-start: 19.23px !important; font-size: 16px; line-height: 25.6px; color: var(--reg-muted); }

/* ---------------------------------------------------------------- the eight steps */
.sv-reg-steps-wrap { margin-block-start: 46.3px; }
.sv-reg-steps {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0 -19.5px 0 -84.5px;
  padding: 0;
  list-style: none;
}
[dir="ltr"] .sv-reg-steps { margin-inline: -19.5px -84.5px; }
.sv-reg-steps__item { position: relative; text-align: center; }
.sv-reg-steps__item + .sv-reg-steps__item::before {
  /* the line towards the previous step (2 px, 3 px away from both circles) */
  content: "";
  position: absolute;
  inset-block-start: 19px;
  inset-inline-start: calc(-50% + 23px);
  inline-size: calc(100% - 46px);
  block-size: 2px;
  background: var(--reg-rule);
}
.sv-reg-steps__item--done + .sv-reg-steps__item::before { background: var(--reg-red); }
.sv-reg-steps__link { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--reg-muted); }
.sv-reg-steps__dot {
  display: block;
  box-sizing: border-box;
  inline-size: 40px;
  block-size: 40px;
  padding-block-start: 1.5px;
  border: 1px solid var(--reg-rule);
  border-radius: 50%;
  background: var(--reg-paper);
  font: 700 13px/38px var(--sv-font-latin), sans-serif;
  color: var(--reg-muted);
}
.sv-reg-steps__dot svg { display: block; inline-size: 21.2px; block-size: 21.2px; margin: 8.4px auto 0; fill: none; stroke: #FFFFFF; stroke-width: 2.8; stroke-linecap: square; }
.sv-reg-steps__item--done .sv-reg-steps__dot { border-color: var(--reg-ink); background: var(--reg-ink); padding: 0; }
.sv-reg-steps__item--current .sv-reg-steps__dot { border-color: var(--reg-red); background: var(--reg-red); color: var(--reg-white); }
.sv-reg-steps__title { display: block; margin-block-start: 12.05px; font-size: 12.5px; line-height: 20px; white-space: nowrap; }
.sv-reg-steps__item--current .sv-reg-steps__title { color: var(--reg-red); font-weight: 700; }
a.sv-reg-steps__link:hover .sv-reg-steps__title { color: var(--reg-ink); }
.sv-reg-progress, .sv-reg-progress__bar { display: none; }

/* ---------------------------------------------------------------- steps 2–6: form card + class card */
.sv-reg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 342px;
  column-gap: 36px;
  align-items: start;
  margin-block-start: 50.95px;
}
.sv-reg-card {
  box-sizing: border-box;
  padding: 19.19px 35px 26px;
  padding-inline: 32px 35px; /* the design's fields end 32 px from the card's right edge */
  border-radius: 4px;
  background: var(--reg-white);
}
.sv-reg-card__title { font-size: 23px; line-height: 32.2px; }
.sv-reg-card__lead { font-size: 15px; line-height: 24px; color: var(--reg-muted); }

/* fields */
.sv-reg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 25px;
  row-gap: 17.18px;
  margin-block-start: 20.79px;
}
.sv-reg-field { display: flex; flex-direction: column; min-inline-size: 0; }
.sv-reg-field--wide { grid-column: 1 / -1; }
.sv-reg-label { display: block; margin-block-end: 10.42px; font-size: 14px; font-weight: 700; line-height: 22.4px; color: var(--reg-ink); }
.sv-reg-star { color: var(--reg-red); }
.sv-reg-field__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sv-reg-input {
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 53px;
  padding: 0 13px 4.8px;
  border: 1px solid var(--reg-rule);
  border-radius: 3px;
  background: var(--reg-white);
  font: 400 16px/25.6px Vazirmatn, var(--sv-font-latin), sans-serif;
  color: var(--reg-ink);
}
.sv-reg-input::placeholder { color: var(--reg-muted); opacity: 1; }
.sv-reg-input:hover { border-color: #BDB7AB; }
.sv-reg-input[aria-invalid="true"] { border-color: var(--reg-red); }
/* An empty field shows its Persian hint from the right, like the design; once something is typed,
   dir="ltr" (numbers, Latin name) or dir="auto" (free text) decides the direction. */
[dir="rtl"] .sv-reg-input:is([dir="ltr"], [dir="auto"]):placeholder-shown { direction: rtl; }
.sv-reg-input--area { block-size: auto; min-block-size: 53px; padding-block: 12px 10px; resize: vertical; }
.sv-reg-select {
  appearance: none;
  padding-inline: 13px 40px;
  /* one chevron (two small gradient triangles read as the end of a ribbon, Khashayar 2026-10-25) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2366645D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: left 16px center;
  cursor: pointer;
}
[dir="ltr"] .sv-reg-select { padding-inline: 13px 40px; background-position: right 16px center; }
.sv-reg-select--empty { color: var(--reg-muted); }
.sv-reg-select option { color: var(--reg-ink); }
.sv-reg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sv-reg-error { margin-block-start: 6px !important; font-size: 13px; line-height: 20px; color: var(--reg-red-text); }
.sv-reg-chips { display: inline-flex; gap: 4px; flex-shrink: 0; }
.sv-reg-chip__input { position: absolute; opacity: 0; pointer-events: none; }
.sv-reg-chip { padding: 0 8px; border-radius: 11px; font-size: 12px; line-height: 22px; color: var(--reg-muted); cursor: pointer; }
.sv-reg-chip__input:checked + .sv-reg-chip { background: var(--reg-paper); color: var(--reg-ink); font-weight: 700; }

/* grey and tinted boxes inside the card */
.sv-reg-box {
  display: block;
  box-sizing: border-box;
  margin-block-start: 26px;
  padding: 11.4px 20px 13px;
  border-radius: 3px;
  background: var(--reg-paper);
}
.sv-reg-box__title { float: inline-start; inline-size: 100%; padding: 0; font-size: 18px; font-weight: 700; line-height: 28.8px; }
.sv-reg-box__title + * { clear: both; }
/* The gap under a box title sits on the floated title itself: the next element is cleared,
   and a cleared element's own top margin would be swallowed by the clearance. */
.sv-reg-box--guardian .sv-reg-box__title { margin-block-end: 14.98px; }
.sv-reg-grid--box { column-gap: 29px; row-gap: 10.18px; margin-block-start: 0; padding-block-start: 0; }
.sv-reg-grid--after-box { margin-block-start: 4.18px; row-gap: 18.18px; }
.sv-reg-box--tint { background: var(--reg-tint); }

/* errors summary */
.sv-reg-alert { margin-block: 12px 4px; padding: 14px 18px; border-radius: 3px; background: var(--reg-tint); color: var(--reg-red-text); }
.sv-reg-alert:focus { outline: 2px solid var(--reg-red); outline-offset: 2px; }
.sv-reg-alert__title { font-weight: 700; font-size: 15px; line-height: 24px; }
.sv-reg .sv-reg-alert__list { margin: 4px 0 0; padding-inline-start: 18px; list-style: disc; font-size: 14px; line-height: 23px; }
.sv-reg-alert__list a { color: inherit; }

/* the buttons under the card */
.sv-reg-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-block-start: 33px;
}
.sv-reg-next { inline-size: 291px; }
.sv-reg-next--long { font-size: 16px; line-height: 22.4px; padding-block-start: 11.5px; }
.sv-reg-back { inline-size: 167px; }

/* the class card next to steps 2–6 */
.sv-reg-side__card { overflow: hidden; border-radius: 4px; background: var(--reg-ink); color: var(--reg-white); }
.sv-reg-side__photo { block-size: 158px; background: var(--reg-ink); }
.sv-reg-side__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sv-reg-side__body { padding: 50.54px 24px 30.42px; }
.sv-reg-side__latin { font: 400 10px/14px var(--sv-font-latin), sans-serif; color: var(--reg-on-ink-muted); text-align: left; letter-spacing: 0; }
.sv-reg-side__venue { margin-block-start: 28.69px !important; font-size: 29px; font-weight: 700; line-height: 40.6px; }
.sv-reg-side__days { margin-block-start: 22.53px !important; font-size: 17px; line-height: 27.2px; }
.sv-reg-side__time { margin-block-start: 21.23px !important; font-size: 21px; font-weight: 700; line-height: 29.4px; }
.sv-reg-side__rule { margin: 38.82px 0 0; border: 0; border-block-start: 1px solid var(--reg-line-on-ink); }
.sv-reg-side__label { margin-block-start: 21.3px !important; font-size: 16px; line-height: 25.6px; color: var(--reg-on-ink-muted); }
.sv-reg-side__fee { margin-block-start: 19.58px !important; font-size: 30px; font-weight: 700; line-height: 42px; }
.sv-reg-side__groups { margin-block-start: 20.82px !important; font-size: 16px; line-height: 25.6px; color: var(--reg-on-ink); }
.sv-reg-side__payment { margin-block-start: 30.28px !important; font-size: 14px; line-height: 22.4px; color: var(--reg-on-ink); }
.sv-reg-side__title { margin-block-start: 40.62px !important; font-size: 20px; line-height: 28px; }
.sv-reg-side__text { margin-block-start: 30.28px !important; font-size: 16px; line-height: 30.4px; color: var(--reg-muted); }

/* ---------------------------------------------------------------- step 1: start */
.sv-reg--start { padding-block-start: 69px; }
.sv-reg-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 550px;
  grid-template-areas: "banner banner" "form media";
  column-gap: 70px;
  row-gap: 37px;
  align-items: start;
}
.sv-reg-banners { grid-area: banner; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sv-reg-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  padding: 22px 28px 24px;
  border-radius: 4px;
  background: var(--reg-ink);
  color: var(--reg-white);
}
.sv-reg-banner__title { font-size: 24px; line-height: 34px; color: var(--reg-white) !important; }
.sv-reg-banner__text { margin: 0 !important; font-size: 17px; line-height: 28px; color: var(--reg-on-ink-soft); }
.sv-reg-banner .sv-reg-pill { margin: 0; }
.sv-reg-banner__side { flex: 0 0 232px; margin-block-start: 2.78px; text-align: center; }
.sv-reg-banner__side .sv-reg-pill { display: block; }
.sv-reg-banner__note { margin: auto 0 0 !important; padding-block-start: 6px; font-size: 14px; line-height: 24px; color: var(--reg-on-ink-muted); }
.sv-reg-start__form { grid-area: form; padding-block-start: 7.41px; }
.sv-reg-start__title { font-size: 43px; line-height: 60.2px; }
.sv-reg-start__lead { margin-block-start: 26.95px !important; font-size: 19px; line-height: 30.4px; color: var(--reg-muted); }
.sv-reg-start__form > .sv-reg-pill { display: block; inline-size: 256px; box-sizing: border-box; margin-block-start: 38.04px; }
.sv-reg-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block-start: 24px !important; }
.sv-reg-group { position: relative; }
.sv-reg-group__input { position: absolute; opacity: 0; pointer-events: none; }
.sv-reg-group__card {
  position: relative;
  display: block;
  box-sizing: border-box;
  block-size: 118px;
  padding: 15.19px 60px 0 0;
  border: 1px solid var(--reg-rule);
  border-radius: 4px;
  background: var(--reg-white);
  cursor: pointer;
}
[dir="ltr"] .sv-reg-group__card { padding: 15.19px 0 0 60px; }
.sv-reg-group__input:checked + .sv-reg-group__card { border-color: var(--reg-red); background: var(--reg-tint); }
.sv-reg-group__title { display: block; font-size: 23px; font-weight: 700; line-height: 32.2px; }
.sv-reg-group__latin { position: absolute; inset-inline-end: 21px; inset-block-start: 83.49px; font: 700 11px/15.4px var(--sv-font-latin), sans-serif; color: var(--reg-muted); }
.sv-reg-group__input:checked + .sv-reg-group__card .sv-reg-group__latin { color: var(--reg-red); }
.sv-reg-radio {
  /* 23 px from the card's outer edge = 22 px inside its 1 px border */
  position: absolute;
  inset-inline-start: 22px;
  inset-block-start: 22px;
  box-sizing: border-box;
  inline-size: 18px;
  block-size: 18px;
  border: 1px solid var(--reg-rule);
  border-radius: 50%;
  background: var(--reg-white);
}
.sv-reg-group__input:checked + .sv-reg-group__card .sv-reg-radio { border-color: var(--reg-red); background: var(--reg-red); box-shadow: inset 0 0 0 5.5px var(--reg-red); }
.sv-reg-group__input:checked + .sv-reg-group__card .sv-reg-radio::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--reg-white); }
.sv-reg-field--month { margin-block-start: 29.18px; }
.sv-reg-start__rule { margin: 29px 0 0; border: 0; border-block-start: 1px solid var(--reg-rule); }
.sv-reg-start__schedule { margin-block-start: 19.78px !important; font-size: 21px; font-weight: 700; line-height: 29.4px; }
.sv-reg-start__fee-label { margin-block-start: 33.12px !important; font-size: 16px; line-height: 25.6px; color: var(--reg-muted); }
.sv-reg-start__fee { margin-block-start: 18.62px !important; font-size: 36px; font-weight: 700; line-height: 50.4px; }
.sv-reg-start__actions { display: flex; justify-content: space-between; margin-block-start: 39.08px; }
.sv-reg-start__go { inline-size: 330px; font-size: 20px; line-height: 28px; padding-block-start: 12.12px; }
.sv-reg-start__steps { inline-size: 314px; font-size: 18px; line-height: 25.2px; padding-block-start: 11.81px; }
.sv-reg-start__media { grid-area: media; }
.sv-reg-start__photo { block-size: 596px; background: var(--reg-ink); }
.sv-reg-start__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sv-reg-start__caption {
  box-sizing: border-box;
  block-size: 109px;
  padding: 23.34px 28px 0;
  background: var(--reg-ink);
  color: var(--reg-white);
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
}
.sv-reg-prepare { margin-block-start: 22px; }
.sv-reg-info {
  display: grid;
  grid-template-columns: 485fr 429fr 382fr;
  box-sizing: border-box;
  block-size: 306px;
  border-radius: 4px;
  background: var(--reg-white);
}
.sv-reg-info__col { position: relative; padding: 24.19px 44px 0; }
.sv-reg-info__col:first-child { padding-inline-start: 32px; }
.sv-reg-info__col + .sv-reg-info__col::before {
  content: "";
  position: absolute;
  inset-block: 35px 43px;
  inset-inline-start: 0;
  border-inline-start: 1px solid var(--reg-rule);
}
.sv-reg-info__title { font-size: 23px; line-height: 32.2px; }
.sv-reg-info__list { margin-block-start: 20.67px !important; padding: 0; list-style: none; font-size: 18px; line-height: 38.7px; color: var(--reg-muted); }
.sv-reg-info__text { margin-block-start: 20.67px !important; font-size: 18px; line-height: 35.1px; color: var(--reg-muted); }

/* ---------------------------------------------------------------- step 3: history */
.sv-reg-options3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-block-start: 21.61px !important; }
.sv-reg-option { position: relative; }
.sv-reg-option__input { position: absolute; opacity: 0; pointer-events: none; }
.sv-reg-option__card {
  display: block;
  box-sizing: border-box;
  block-size: 66px;
  padding-block-start: 14.83px;
  border: 1px solid var(--reg-rule);
  border-radius: 3px;
  background: var(--reg-white);
  font-size: 17px;
  line-height: 27.2px;
  text-align: center;
  cursor: pointer;
}
.sv-reg-option__input:checked + .sv-reg-option__card { border-color: var(--reg-red); background: var(--reg-tint); color: var(--reg-red); font-weight: 700; }
.sv-reg-history { margin-block-start: 30.18px; row-gap: 23.18px; }
.sv-reg-step3 .sv-reg-card__title { margin-block-start: 1px; } /* drawn 1 px lower than on step 2 */
.sv-reg-step3 .sv-reg-actions { margin-block-start: 37px; }
.sv-reg-note {
  box-sizing: border-box;
  min-block-size: 108px;
  margin-block-start: 24px !important;
  padding: 11.95px 20px 14px;
  border-radius: 3px;
  background: var(--reg-paper);
  font-size: 17px;
  line-height: 30.6px;
  color: var(--reg-muted);
}

/* ---------------------------------------------------------------- step 4: goals */
.sv-reg-step4 .sv-reg-card__title { margin-block-start: -1px; }
.sv-reg-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 25px; row-gap: 24px; }
/* The floated legend is an ordinary grid item (not drawn on the fieldset's border): it spans both
   columns, and the 24 px row gap is part of the 35.96 px drawn under it. */
.sv-reg-goals > legend { float: inline-start; grid-column: 1 / -1; inline-size: 100%; margin-block: 14.15px 11.96px; padding: 0; }
.sv-reg-check { position: relative; }
.sv-reg-check__input { position: absolute; opacity: 0; pointer-events: none; }
.sv-reg-check__label { display: flex; align-items: flex-start; gap: 12px; padding-inline-start: 2px; font-size: 16px; line-height: 24px; cursor: pointer; }
.sv-reg-check__box {
  flex: 0 0 18px;
  box-sizing: border-box;
  block-size: 18px;
  margin-block-start: 3.5px;
  border: 1px solid var(--reg-rule);
  border-radius: 2px;
  background: var(--reg-white);
}
.sv-reg-check__box svg { display: none; inline-size: 18px; block-size: 18px; margin: -1px; fill: none; stroke: #FFFFFF; stroke-width: 3; }
.sv-reg-check__input:checked + .sv-reg-check__label .sv-reg-check__box { border-color: var(--reg-red); background: var(--reg-red); }
.sv-reg-check__input:checked + .sv-reg-check__label .sv-reg-check__box svg { display: block; }
.sv-reg-check__input[aria-invalid="true"] + .sv-reg-check__label .sv-reg-check__box { border-color: var(--reg-red); }
.sv-reg-check__note { color: inherit; }
.sv-reg-field--single { margin-block-start: 34.68px; }
.sv-reg-box--body { margin-block-start: 19px; min-block-size: 228px; padding: 16.4px 20px 20px; }
.sv-reg-box--body .sv-reg-box__title { margin-block-end: 24.22px; font-size: 19px; }
.sv-reg-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; margin-block-start: 0; }
.sv-reg-check--box { margin-block-start: 19.5px; }
.sv-reg-check--box .sv-reg-check__label, .sv-reg-check--line .sv-reg-check__label { font-size: 15px; line-height: 22px; }
.sv-reg-check--box .sv-reg-check__box, .sv-reg-check--line .sv-reg-check__box { margin-block-start: 3.2px; }
.sv-reg-step4 .sv-reg-box--body + .sv-reg-field--single { margin-block-start: 24.18px; }
.sv-reg-check--line { margin-block-start: 19.19px; }
.sv-reg-check--line .sv-reg-check__label { font-size: 14px; }
.sv-reg-check--line + .sv-reg-check--line { margin-block-start: 14px; }
.sv-reg-box--tint { margin-block-start: 31.9px; min-block-size: 128px; padding: 14.21px 20px 14px; }
.sv-reg-inline-options { clear: both; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; padding-block-start: 17.09px; font-size: 16px; line-height: 25.6px; color: var(--reg-muted); }
.sv-reg-inline-options__label { margin-inline-end: 4px; }
.sv-reg-inline-options__input { position: absolute; opacity: 0; pointer-events: none; }
.sv-reg-inline-options__option { padding: 0 3px; border-block-end: 1px dotted transparent; cursor: pointer; }
.sv-reg-inline-options__option:hover { color: var(--reg-ink); }
.sv-reg-inline-options__input:checked + .sv-reg-inline-options__option { color: var(--reg-red-text); font-weight: 700; border-block-end-color: currentColor; }
.sv-reg-box--tint .sv-reg-check--box { margin-block-start: 5.43px; }
.sv-reg-step4 .sv-reg-actions { margin-block-start: 47px; }
.sv-reg-box--tint .sv-reg-check__label { font-size: 14px; }

/* ---------------------------------------------------------------- steps 5–6: documents */
.sv-reg-card__lead--large { margin-block-start: 31.07px !important; font-size: 19px; line-height: 30.4px; }
.sv-reg-drop {
  position: relative;
  box-sizing: border-box;
  min-block-size: 283px;
  margin-block-start: 83.14px;
  padding: 27.5px 24px 21px;
  border: 1px solid var(--reg-rule);
  border-radius: 3px;
  background: var(--reg-paper);
  text-align: center;
}
.sv-reg-drop--over { border-color: var(--reg-red); background: var(--reg-tint); }
.sv-reg-drop__icon { display: block; inline-size: 42px; block-size: 42px; margin: 0 auto; fill: none; stroke: var(--reg-red); stroke-width: 1.9; }
.sv-reg-drop__title { margin-block-start: 17.6px !important; font-size: 25px; font-weight: 700; line-height: 35px; }
.sv-reg-drop__formats { margin-block-start: 21.9px !important; font-size: 16px; line-height: 25.6px; color: var(--reg-muted); }
.sv-reg-drop__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.sv-reg-drop__button { inline-size: 232px; margin-block-start: 32.4px; }
.sv-reg-drop__chosen:empty { display: none; }
.sv-reg-drop__chosen { margin-block-start: 10px !important; font-size: 14px; color: var(--reg-ink); }
.sv-reg-grid--upload { margin-block-start: 40px; align-items: start; }
.sv-reg-stack { display: flex; flex-direction: column; gap: 17.18px; margin-block-start: 1.18px; }
.sv-reg-file {
  box-sizing: border-box;
  min-block-size: 110px;
  padding: 15.1px 20px 14px 23px;
  border-radius: 3px;
  background: var(--reg-green-tint);
  color: var(--reg-green);
}
.sv-reg-file__label { font-size: 15px; font-weight: 700; line-height: 21px; }
.sv-reg-file__name { margin-block-start: 34.1px !important; font: 400 13px/18.2px var(--sv-font-latin), sans-serif; text-align: left; }
.sv-reg-problem {
  box-sizing: border-box;
  min-block-size: 110px;
  margin-block-start: 42px;
  padding: 15px 20px 14px;
  border-radius: 3px;
  background: var(--reg-tint);
  color: var(--reg-red);
  font-size: 18px;
  line-height: 32.4px;
}
.sv-reg-note--wide { min-block-size: 86px; margin-block-start: 38px !important; padding: 14.5px 20px 14px; font-size: 16px; line-height: 25.6px; }
.sv-reg-step5 .sv-reg-card__title, .sv-reg-step6 .sv-reg-card__title { margin-block-start: 6px; }
.sv-reg-step5 .sv-reg-actions { margin-block-start: 59px; }
/* step 5 explains a refused field in the red box below; the line under the field stays for screen readers */
.sv-reg-step5 .sv-reg-error { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sv-reg-problem:focus { outline: none; } /* focused only so that the explanation is read out; the red box itself is the visible mark */

.sv-reg-bank {
  position: relative;
  box-sizing: border-box;
  block-size: 295px;
  margin-block-start: 36.66px;
  padding: 0 29px;
  border-radius: 4px;
  background: var(--reg-ink);
  color: var(--reg-white);
}
.sv-reg-bank__bank { position: absolute; inset-inline-start: 29px; inset-block-start: 23.2px; font-size: 22px; font-weight: 700; line-height: 30.8px; }
.sv-reg-bank__fee { position: absolute; inset-inline-start: 534px; inset-block-start: 20.29px; }
.sv-reg-bank__fee-label { font-size: 16px; line-height: 25.6px; color: var(--reg-on-ink-muted); }
.sv-reg-bank__amount { margin-block-start: 20.13px !important; font-size: 24px; font-weight: 700; line-height: 33.6px; }
.sv-reg-bank__number { position: absolute; left: 89px; inset-block-start: 134.01px; font: 700 35px/49px var(--sv-font-latin), sans-serif; letter-spacing: 0; white-space: nowrap; }
.sv-reg-bank__gap { display: inline-block; inline-size: 25px; }
.sv-reg-bank__holder { position: absolute; inset-inline-start: 29px; inset-block-start: 217.19px; font-size: 23px; font-weight: 700; line-height: 32.2px; }
.sv-reg-bank__copy { position: absolute; inset-inline-end: 26px; inset-block-start: 221px; inline-size: 190px; box-sizing: border-box; border: 0; font: 700 13px/18.2px Vazirmatn, var(--sv-font-latin), sans-serif; padding-block-start: 5.92px; background: var(--reg-line-on-ink); color: var(--reg-white); cursor: pointer; }
.sv-reg-bank__check { margin-block-start: 19.41px !important; font-size: 18px; line-height: 28.8px; }
.sv-reg-step6 .sv-reg-grid { margin-block-start: 45.97px; }
.sv-reg-drop--compact { min-block-size: 218px; margin-block-start: 39px; padding-block: 16.44px 9px; }
.sv-reg-drop--compact .sv-reg-drop__title { margin-block-start: 13.36px !important; font-size: 22px; line-height: 30.8px; }
.sv-reg-drop--compact .sv-reg-drop__formats { margin-block-start: 9.3px !important; font-size: 15px; line-height: 24px; }
.sv-reg-drop--compact .sv-reg-drop__button { margin-block-start: 13.1px; font-size: 15px; line-height: 21px; padding-block-start: 11.5px; }
.sv-reg-step6 .sv-reg-file { margin-block-start: 24px; }
.sv-reg-problem--caution { min-block-size: 76px; margin-block-start: 24px; padding: 13px 20px 12px; font-size: 16px; line-height: 25.6px; }
.sv-reg-step6 .sv-reg-actions { margin-block-start: 44px; }

/* ---------------------------------------------------------------- step 7: rules and consents */
.sv-reg-step7 { margin-block-start: 50.95px; }
.sv-reg-rules { padding: 24.19px 32px 97.39px 46px; }
.sv-reg-rules__list { margin-block-start: 32.39px !important; padding: 0; list-style: none; }
.sv-reg-rule { position: relative; padding-inline-start: 72px; }
.sv-reg-rule + .sv-reg-rule { margin-block-start: 61.4px; }
.sv-reg-rule__number {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: -1.78px;
  box-sizing: border-box;
  inline-size: 32px;
  block-size: 32px;
  padding-block-start: 3px;
  border-radius: 50%;
  background: var(--reg-red);
  color: var(--reg-white);
  font: 700 11px/30px var(--sv-font-latin), sans-serif;
  text-align: center;
}
.sv-reg-rule__title { font-size: 21px; line-height: 29.4px; }
.sv-reg-rule__text { margin-block-start: 19.63px !important; font-size: 18px; line-height: 28.8px; color: var(--reg-muted); }
.sv-reg-step7__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin-block-start: 34px; }
.sv-reg-consents { min-block-size: 336px; padding: 17.3px 32px 20px 34px; }
.sv-reg-check--consent { margin-block-start: 26.4px; }
.sv-reg-check--consent + .sv-reg-check--consent { margin-block-start: 42px; }
.sv-reg-check--consent .sv-reg-check__label { font-size: 15px; line-height: 22px; padding-inline-start: 0; }
.sv-reg-check--consent .sv-reg-check__box { margin-block-start: 3.2px; }
.sv-reg-consents__note { margin-block-start: 38.44px !important; font-size: 15px; line-height: 24px; color: var(--reg-muted); }
.sv-reg-dark {
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--reg-ink);
  color: var(--reg-white);
}
.sv-reg-orientation { display: flex; align-self: start; flex-direction: column; align-items: flex-start; min-block-size: 336px; padding: 17.52px 36px 20px; }
.sv-reg-dark__title { font-size: 25px; line-height: 35px; color: var(--reg-white) !important; align-self: stretch; }
.sv-reg-orientation .sv-reg-pill { align-self: flex-end; inline-size: 222px; box-sizing: border-box; margin-block-start: 21.92px; font-size: 13px; line-height: 18.2px; padding-block-start: 5.3px; }
.sv-reg-dark__text { align-self: stretch; margin-block-start: 23.51px !important; font-size: 18px; line-height: 34.2px; color: var(--reg-on-ink); }
.sv-reg-orientation__go { align-self: flex-end; inline-size: 275px; margin-block-start: auto; font-size: 16px; line-height: 22.4px; padding-block-start: 11.5px; }
.sv-reg-step7__back { margin-block-start: 18px !important; font-size: 15px; }

/* ---------------------------------------------------------------- step 8 and the tracking page */
.sv-reg-step8 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; align-items: stretch; margin-block-start: 50.95px; }
.sv-reg-summary { padding: 23.19px 32px 37px 36px; }
.sv-reg-summary > .sv-reg-pill { display: block; inline-size: 306px; box-sizing: border-box; margin-block-start: 25.66px; padding-block-start: 5.3px; }
.sv-reg-summary__rows { margin-block-start: 17px !important; }
.sv-reg-summary__row { padding-block: 4.8px 16.4px; } /* rows every 78 px, as drawn */
.sv-reg-summary__row + .sv-reg-summary__row { border-block-start: 1px solid var(--reg-rule); }
.sv-reg-summary__row dt { font-size: 14px; line-height: 22.4px; color: var(--reg-muted); }
.sv-reg-summary__row dd { margin-block-start: 7.72px; font-size: 16px; line-height: 25.6px; }
.sv-reg-summary__strong { font-weight: 700; }
.sv-reg-check--review { margin-block-start: 30.2px; }
.sv-reg-check--review + .sv-reg-check--review { margin-block-start: 51px; }
.sv-reg-check--review .sv-reg-check__label { font-size: 15px; line-height: 22px; padding-inline-start: 0; }
.sv-reg-check__link { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--reg-red); text-underline-offset: 4px; }
.sv-reg-check__link:hover { text-decoration-thickness: 2px; }
.sv-reg-check--review .sv-reg-check__box { margin-block-start: 3.2px; }
.sv-reg-actions--review { margin-block-start: 77.8px; }
.sv-reg-send { inline-size: 335px; }
.sv-reg-edit { inline-size: 186px; font-size: 15px; line-height: 21px; padding-block-start: 12.38px; }
.sv-reg-after { display: flex; flex-direction: column; align-items: center; padding: 27px 36px 40px; text-align: center; }
.sv-reg-after > .sv-reg-pill { align-self: flex-end; inline-size: 198px; box-sizing: border-box; font-size: 13px; line-height: 18.2px; padding-block-start: 5.36px; background: #33332D; }
.sv-reg-after__mark { display: block; inline-size: 98px; block-size: 98px; margin-block-start: 55px; border-radius: 50%; background: var(--reg-red); }
.sv-reg-after__mark svg { display: block; inline-size: 98px; block-size: 98px; fill: none; stroke: #FFFFFF; stroke-width: 4; }
.sv-reg-after__title { margin-block-start: 41px !important; font-size: 32px; line-height: 44.8px; color: var(--reg-white) !important; }
.sv-reg-after__state { margin-block-start: 39.2px !important; font-size: 24px; font-weight: 700; line-height: 33.6px; color: #FFC4C2; }
.sv-reg-after__text { margin-block-start: 59.9px !important; font-size: 18px; line-height: 34.2px; color: #C8C4BA; }
.sv-reg-after__code { box-sizing: border-box; align-self: stretch; min-block-size: 108px; margin: 42.1px 8px 0 8px; padding: 13.6px 16px 11.4px; border-radius: 3px; background: var(--reg-code-ink); }
.sv-reg-after__code-label { font-size: 13px; line-height: 18.2px; color: var(--reg-on-ink-muted); }
.sv-reg-after__code-value { margin-block-start: 31.2px !important; font: 700 24px/33.6px var(--sv-font-latin), sans-serif; color: var(--reg-white); letter-spacing: 0; }
.sv-reg-after__warning { margin-block-start: 29px !important; font-size: 20px; line-height: 32px; color: var(--reg-white); }
.sv-reg-after__copy { inline-size: 448px; max-inline-size: 100%; margin-block-start: 97px; font-size: 18px; line-height: 25.2px; padding-block-start: 11.81px; }
.sv-reg-after__copy:not([hidden]) + .sv-reg-after__note { margin-block-start: 45.2px !important; padding-block-start: 0; }
.sv-reg-after__note { margin-block-start: auto !important; padding-block-start: 30px; font-size: 17px; line-height: 32.3px; color: var(--reg-on-ink-muted); }
.sv-reg-status--approved, .sv-reg-status--matched { color: var(--reg-green); font-weight: 700; }
.sv-reg-status--needs_correction, .sv-reg-status--rejected { color: var(--reg-red-text); font-weight: 700; }

/* ---------------------------------------------------------------- choice / closed / limited */
.sv-reg-choose { display: flex; flex-wrap: wrap; gap: 16px; margin-block-start: 40px; }
.sv-reg-choose__item { display: flex; flex-direction: column; gap: 4px; min-inline-size: 260px; padding: 20px 24px; border: 1px solid var(--reg-rule); border-radius: 4px; background: var(--reg-white); text-decoration: none; }
.sv-reg-choose__item:hover { border-color: var(--reg-red); }
.sv-reg-choose__city { font-size: 23px; font-weight: 700; }
.sv-reg-choose__venue { color: var(--reg-muted); }

/* ---------------------------------------------------------------- tablets */
@media (max-width: 1099px) {
  .sv-reg-steps { margin-inline: 0; }
  [dir="ltr"] .sv-reg-steps { margin-inline: 0; }
  .sv-reg-steps__title { font-size: 11px; white-space: normal; }
  .sv-reg-layout { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .sv-reg-side { order: -1; }
  .sv-reg-side__card { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
  .sv-reg-side__photo { block-size: auto; min-block-size: 158px; }
  .sv-reg-side__body { padding-block: 20px; }
  .sv-reg-side__title, .sv-reg-side__text { display: none; }
  .sv-reg-start { grid-template-columns: minmax(0, 1fr); grid-template-areas: "banner" "form" "media"; }
  .sv-reg-banners { grid-template-columns: minmax(0, 1fr); }
  .sv-reg-banner__side { flex-basis: 100%; text-align: start; }
  .sv-reg-banner__side .sv-reg-pill { display: inline-block; }
  .sv-reg-start__photo { block-size: auto; aspect-ratio: 550 / 596; max-block-size: 520px; }
  .sv-reg-info { grid-template-columns: minmax(0, 1fr); block-size: auto; padding-block-end: 28px; }
  .sv-reg-info__col { padding-inline: 32px; }
  .sv-reg-info__col + .sv-reg-info__col::before { display: none; }
  .sv-reg-step8 { grid-template-columns: minmax(0, 1fr); }
  .sv-reg-after { order: 2; }
  .sv-reg-bank__fee { position: static; margin-block-start: 70px; }
  .sv-reg-bank { block-size: auto; min-block-size: 295px; padding-block-end: 70px; }
  .sv-reg-bank__number { inset-block-start: auto; inset-block-end: 80px; left: 29px; }
  .sv-reg-bank__holder { inset-block-start: auto; inset-block-end: 24px; }
  .sv-reg-bank__copy { inset-block-start: auto; inset-block-end: 26px; }
}

/* ---------------------------------------------------------------- phones (design page 10) */
@media (max-width: 760px) {
  .sv-reg { padding-block-end: 56px; }
  .sv-reg-head { padding-block-start: 32px; }
  .sv-reg-head__title { font-size: 26px; line-height: 38px; }
  .sv-reg-head__lead { font-size: 15px; line-height: 24px; }
  .sv-reg-steps { display: none; }
  .sv-reg-steps-wrap { margin-block-start: 22px; }
  .sv-reg-progress { display: block; font-size: 16px; font-weight: 700; line-height: 25px; color: var(--reg-red-text); }
  .sv-reg-progress__bar { display: block; inline-size: 100%; block-size: 5px; margin-block-start: 18px; border: 0; background: var(--reg-rule); appearance: none; }
  .sv-reg-progress__bar::-webkit-progress-bar { background: var(--reg-rule); }
  .sv-reg-progress__bar::-webkit-progress-value { background: var(--reg-red); }
  .sv-reg-progress__bar::-moz-progress-bar { background: var(--reg-red); }
  [dir="rtl"] .sv-reg-progress__bar { direction: rtl; }
  .sv-reg-layout, .sv-reg-step7, .sv-reg-step8 { margin-block-start: 24px; }
  .sv-reg-card { padding: 20px 16px 22px; }
  .sv-reg-grid, .sv-reg-grid--three, .sv-reg-goals, .sv-reg-pair, .sv-reg-options3, .sv-reg-step7__row { grid-template-columns: minmax(0, 1fr); }
  .sv-reg-pair { gap: 10px; }
  .sv-reg-history, .sv-reg-grid { row-gap: 18px; }
  .sv-reg-options3 { gap: 10px; }
  .sv-reg-option__card { block-size: 53px; padding-block-start: 12px; }
  .sv-reg-goals { row-gap: 14px; }
  .sv-reg-box { padding-inline: 14px; }
  .sv-reg-actions { flex-direction: column-reverse; align-items: stretch; gap: 12px; margin-block-start: 28px; }
  .sv-reg-next, .sv-reg-back, .sv-reg-send, .sv-reg-edit { inline-size: 100%; }
  .sv-reg-side { order: 1; } /* phones (design page 10): the form comes first, the class card after it */
  .sv-reg-side__card { grid-template-columns: minmax(0, 1fr); }
  .sv-reg-side__photo { display: none; }
  .sv-reg-side__body { padding: 18px 16px 20px; }
  .sv-reg-side__venue { margin-block-start: 8px !important; font-size: 23px; line-height: 32px; }
  .sv-reg-side__days, .sv-reg-side__time, .sv-reg-side__label, .sv-reg-side__fee, .sv-reg-side__groups, .sv-reg-side__payment { margin-block-start: 6px !important; }
  .sv-reg-side__time { font-size: 18px; }
  .sv-reg-side__fee { font-size: 24px; line-height: 34px; }
  .sv-reg-side__rule { margin-block-start: 14px; }
  .sv-reg--start { padding-block-start: 28px; }
  .sv-reg-start { row-gap: 24px; }
  .sv-reg-banner { padding: 18px 16px 20px; gap: 14px; }
  .sv-reg-banner__title { font-size: 22px; line-height: 32px; }
  .sv-reg-banner__text { font-size: 16px; line-height: 27px; margin-block-start: 8px !important; }
  .sv-reg-banner__note { margin-block-start: 10px !important; font-size: 14px; line-height: 23px; }
  .sv-reg-banner__note br { display: none; }
  .sv-reg-start__title { font-size: 32px; line-height: 45px; }
  .sv-reg-start__lead { margin-block-start: 12px !important; font-size: 16px; line-height: 26px; }
  .sv-reg-start__form > .sv-reg-pill { margin-block-start: 20px; }
  .sv-reg-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sv-reg-group__card { block-size: 96px; padding-inline-start: 50px; }
  .sv-reg-radio { inset-inline-start: 16px; inset-block-start: 20px; }
  .sv-reg-group__title { font-size: 20px; }
  .sv-reg-group__latin { inset-block-start: 64px; inset-inline-end: 14px; }
  .sv-reg-start__fee { font-size: 30px; line-height: 42px; }
  .sv-reg-start__actions { flex-direction: column; gap: 12px; }
  .sv-reg-start__go, .sv-reg-start__steps { inline-size: 100%; }
  .sv-reg-start__caption { block-size: auto; padding-block: 16px 18px; font-size: 20px; line-height: 30px; }
  .sv-reg-info__col { padding-inline: 16px; }
  .sv-reg-info__title { font-size: 20px; line-height: 30px; }
  .sv-reg-drop { margin-block-start: 28px; min-block-size: 0; padding: 22px 16px 20px; }
  .sv-reg-drop__title { font-size: 20px; line-height: 30px; }
  .sv-reg-drop__button { inline-size: 100%; }
  .sv-reg-card__lead--large { margin-block-start: 14px !important; font-size: 16px; line-height: 27px; }
  .sv-reg-bank { padding: 18px 16px 22px; block-size: auto; min-block-size: 0; display: flex; flex-direction: column; gap: 12px; }
  .sv-reg-bank > * { position: static !important; }
  .sv-reg-bank__fee { margin: 0; }
  .sv-reg-bank__number { font-size: min(22px, calc((100vw - 140px) / 11.2)); line-height: 34px; text-align: left; white-space: nowrap; } /* the 16 digits stay on one line down to 320 px */
  .sv-reg-bank__gap { inline-size: 12px; }
  .sv-reg-bank__copy { align-self: flex-start; }
  .sv-reg-rules { padding: 20px 16px 26px; }
  .sv-reg-rule { padding-inline-start: 46px; }
  .sv-reg-rule__number { inset-inline-start: 0; }
  .sv-reg-rule + .sv-reg-rule { margin-block-start: 30px; }
  .sv-reg-rule__title { font-size: 19px; line-height: 28px; }
  .sv-reg-rule__text { margin-block-start: 8px !important; font-size: 16px; line-height: 27px; }
  .sv-reg-consents, .sv-reg-orientation { min-block-size: 0; padding: 20px 16px 22px; }
  .sv-reg-orientation__go { inline-size: 100%; margin-block-start: 26px; }
  .sv-reg-summary { padding: 20px 16px 22px; }
  .sv-reg-summary > .sv-reg-pill { inline-size: auto; }
  .sv-reg-after { padding: 22px 16px 26px; }
  .sv-reg-after__mark { margin-block-start: 26px; }
  .sv-reg-after__title { font-size: 26px; line-height: 36px; margin-block-start: 20px !important; }
  .sv-reg-after__state, .sv-reg-after__text, .sv-reg-after__warning { margin-block-start: 16px !important; }
  .sv-reg-after__code { margin-inline: 0; }
  .sv-reg-after__code-value { margin-block-start: 16px !important; font-size: 21px; }
  .sv-reg-after__copy { inline-size: 100%; margin-block-start: 26px; }
  .sv-reg-after__copy:not([hidden]) + .sv-reg-after__note { margin-block-start: 22px !important; }
  .sv-reg-step8 .sv-reg-actions--review { margin-block-start: 36px; }
}

/* Dates as three boxes: day, month, year (2026-10-22) */
.sv-reg-date { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
.sv-reg-date .sv-reg-input { min-inline-size: 0; }
.sv-reg-date__year { text-align: center; }
/* Who issued the identity document: a small line under the number */
.sv-reg-issuer { display: flex; align-items: center; gap: 10px; margin-block-start: 8px; }
.sv-reg-issuer .sv-reg-label { margin: 0; font-size: 14px; white-space: nowrap; }
.sv-reg-issuer__select { flex: 1; min-inline-size: 0; }

/* Tracking page: the correction asked by the branch and the new file (2026-10-22) */
.sv-reg-track__correction { margin-block-start: 24px; }
.sv-reg-track__correction p { margin: 0; }
.sv-reg-track__correction p + p { margin-block-start: 6px; }
.sv-reg-track__upload { display: grid; gap: 14px; margin-block-start: 20px; }
.sv-reg-track__upload-title { margin: 0; font-size: 17px; }
.sv-reg-track__upload .sv-reg-button { justify-self: start; }
.sv-reg-track__sent { margin-block-start: 20px; padding: 12px 16px; border-radius: 8px; background: var(--sv-success-bg, #e8f3ec); }

/* Coach application (P2, 2026-10-22): the registration's look on one page */
.sv-reg-coach { display: grid; gap: 28px; padding-block-end: 64px; }
.sv-reg-coach .sv-reg-card { inline-size: 100%; max-inline-size: none; }
.sv-reg-coach__subtitle { margin: 32px 0 6px; font-size: 18px; }
.sv-reg-coach__certs { display: grid; gap: 14px; margin-block-start: 12px; }
.sv-reg-coach__cert { display: grid; grid-template-columns: 1.4fr 1.2fr 0.5fr 1.4fr; gap: 12px; padding-block-end: 14px; border-block-end: 1px solid var(--reg-line, #e5e2da); }
.sv-reg-coach__file { padding-block: 10px; block-size: auto; }
.sv-reg-coach__kept { margin: 6px 0 0; font-size: 14px; color: var(--sv-success, #1f7a4a); }
.sv-reg-field--check { align-self: end; }
@media (max-width: 760px) { .sv-reg-coach__cert { grid-template-columns: minmax(0, 1fr); } }
.sv-reg-coach__note { margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--reg-muted, #6b6860); }

/* Step 4: fitness and nutrition interests, kept separate (B114/C61) */
.sv-reg-box--support .sv-reg-check + .sv-reg-check { margin-block-start: 10px; }
.sv-reg-support__note { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--reg-muted, #6b6860); }
.sv-reg-check__input:disabled + .sv-reg-check__label { opacity: .55; cursor: not-allowed; }

/* Sajad Keshavarzi's card on step 1: photo beside the name, link to his page (new tab). */
.sv-reg-banner__person { display: flex; align-items: center; gap: 16px; }
.sv-reg-banner__photo { flex: 0 0 64px; }
.sv-reg-banner__photo img { display: block; inline-size: 64px; block-size: 85px; object-fit: cover; border-radius: 3px; }
.sv-reg-banner__link { color: var(--reg-white) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* Legal package boxes (apps/legal): title in bold before the text, the longer explanation folded. */
.sv-legal { display: grid; gap: 14px; margin-block: 18px 6px; }
.sv-legal__item { display: grid; gap: 6px; }
.sv-legal__title { display: block; margin-block-end: 2px; font-weight: 700; color: var(--reg-ink); }
.sv-legal__check .sv-reg-check__text { line-height: 27px; }
.sv-legal__scope { margin: 0 !important; padding-inline-start: 44px; font-size: 14px; line-height: 24px; color: var(--reg-ink); font-weight: 700; }
.sv-legal__more { padding-inline-start: 44px; font-size: 14px; line-height: 24px; color: var(--reg-muted); }
.sv-legal__more > summary { cursor: pointer; color: var(--reg-muted); text-decoration: underline; text-underline-offset: 3px; }
.sv-legal__more > p { margin: 6px 0 0 !important; }
.sv-legal__notice { padding-inline-start: 0; margin-block: 10px; }
.sv-legal__binding, .sv-legal__link { margin: 6px 0 0 !important; font-size: 14px; line-height: 24px; color: var(--reg-muted); }
.sv-legal__link a { color: var(--reg-red-text, #D41E26) !important; font-weight: 700; }
.sv-reg-legal { margin-block-start: 24px; padding-block-start: 18px; border-block-start: 1px solid var(--reg-rule); }
.sv-reg-legal__party { margin: 0 0 6px !important; font-size: 15px; line-height: 26px; color: var(--reg-muted); }
.sv-reg-box__note { margin: 8px 0 !important; font-size: 14px; line-height: 24px; color: var(--reg-muted); }
.sv-reg-health { display: grid; gap: 10px; }
.sv-reg-health[hidden] { display: none; }
.sv-reg-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 12px 0; }
.sv-reg-terms dt { font-size: 14px; line-height: 22px; color: var(--reg-muted); }
.sv-reg-terms dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; line-height: 26px; }
.sv-reg-terms__title { margin: 14px 0 4px; font-size: 16px; line-height: 26px; }
.sv-reg-terms__text { margin: 0 !important; font-size: 15px; line-height: 27px; color: var(--reg-ink); }
@media (max-width: 700px) { .sv-reg-terms { grid-template-columns: minmax(0, 1fr); } .sv-legal__scope, .sv-legal__more { padding-inline-start: 0; } }
.sv-reg-legal-track { margin-block-start: 28px; }
.sv-reg-legal-track__wrap { margin-block-end: 8px; }
.sv-reg-legal-track .sv-reg-button { align-items: center; block-size: 48px; text-decoration: none; }
.sv-reg-legal-track__list { display: grid; gap: 10px; margin: 8px 0; padding: 0; list-style: none; }
.sv-reg-legal-track__form { display: inline-block; margin-inline-start: 8px; }
.sv-reg-button--small { min-block-size: 0; padding: 4px 12px; font-size: 14px; }
.sv-reg-legal-track .sv-reg-button--small { block-size: 36px; }

/* ---- app.css ---- */
/* Components for signed-in areas: sign-in pages and role workspaces.
   Same palette as the public site, denser layout, built for reading data. */

.sv-app {
  display: grid;
  grid-template-rows: auto 1fr;
  min-block-size: 100vh;
}
.sv-appbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sv-space-4);
  min-block-size: 64px;
  padding-inline: var(--sv-layout-gutter);
  background: var(--sv-bg-brand);
  border-block-end: 1px solid var(--sv-line);
}
.sv-appbar .sv-brand__mark {
  inline-size: 36px;
  block-size: 36px;
}
.sv-appbar .sv-brand__name {
  font-size: 1.15rem;
}
.sv-appbar__area {
  display: none;
  padding-inline-start: var(--sv-space-4);
  border-inline-start: 1px solid var(--sv-line-strong);
}
@media (min-width: 640px) {
  .sv-appbar__area {
    display: block;
  }
}
.sv-appbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  margin-inline-start: auto;
}
.sv-appbar__user {
  display: none;
  color: var(--sv-text-body);
  font-size: var(--sv-size-sm);
}
@media (min-width: 900px) {
  .sv-appbar__user {
    display: block;
  }
}

.sv-app__body {
  display: grid;
}
@media (min-width: 960px) {
  .sv-app__body--with-nav {
    grid-template-columns: 250px 1fr;
  }
}
.sv-appnav {
  border-block-end: 1px solid var(--sv-line-neutral);
  background: var(--sv-bg-raised);
}
.sv-appnav ul {
  display: flex;
  gap: var(--sv-space-1);
  margin: 0;
  padding: var(--sv-space-2) var(--sv-layout-gutter);
  overflow-x: auto;
  list-style: none;
}
@media (min-width: 960px) {
  .sv-appnav {
    border-block-end: 0;
    border-inline-end: 1px solid var(--sv-line-neutral);
  }
  .sv-appnav ul {
    position: sticky;
    inset-block-start: 64px;
    flex-direction: column;
    padding: var(--sv-space-5) var(--sv-space-3);
    overflow: visible;
  }
}
.sv-appnav a {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  padding: var(--sv-space-2) var(--sv-space-3);
  border-inline-start: 2px solid transparent;
  color: var(--sv-text-body);
  font-size: var(--sv-size-sm);
  text-decoration: none;
  white-space: nowrap;
}
.sv-appnav a:hover {
  background: var(--sv-bg-alt);
  color: var(--sv-text);
}
.sv-appnav a[aria-current="page"] {
  border-inline-start-color: var(--sv-accent-secondary);
  background: var(--sv-bg-alt);
  color: var(--sv-text);
}
.sv-appnav__count {
  margin-inline-start: auto;
  padding: 0 0.5em;
  border-radius: var(--sv-radius-pill);
  background: var(--sv-accent-secondary);
  color: var(--sv-text-on-accent-secondary);
  font-size: var(--sv-size-xs);
}

.sv-main {
  min-inline-size: 0;
  padding: var(--sv-space-7) var(--sv-layout-gutter) var(--sv-space-9);
}
.sv-main__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sv-space-4);
  margin-block-end: var(--sv-space-7);
}
.sv-main__head h1 {
  font-size: var(--sv-size-3xl);
}

.sv-panel {
  display: grid;
  gap: var(--sv-space-4);
  padding: var(--sv-space-6);
  border: 1px solid var(--sv-line-neutral);
  border-radius: var(--sv-radius-md);
  background: var(--sv-bg-raised);
}
.sv-panel + .sv-panel {
  margin-block-start: var(--sv-space-5);
}
.sv-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sv-space-3);
}
.sv-panel__head h2 {
  font-size: var(--sv-size-2xl);
}
.sv-panels {
  display: grid;
  gap: var(--sv-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.sv-panels > .sv-panel + .sv-panel {
  margin-block-start: 0;
}

.sv-kpis {
  display: grid;
  gap: var(--sv-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.sv-kpi {
  display: grid;
  gap: var(--sv-space-1);
  padding: var(--sv-space-5);
  border: 1px solid var(--sv-line-neutral);
  border-radius: var(--sv-radius-md);
  background: var(--sv-bg-raised);
}
.sv-kpi__value {
  color: var(--sv-text);
  font-family: var(--sv-font-display);
  font-size: var(--sv-size-3xl);
  line-height: 1.1;
}
.sv-kpi__label {
  color: var(--sv-text-muted);
  font-size: var(--sv-size-sm);
}

.sv-attention {
  display: grid;
  gap: var(--sv-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-attention li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sv-space-4);
  padding: var(--sv-space-4);
  border: 1px solid var(--sv-line-neutral);
  border-inline-start: 3px solid var(--sv-line-strong);
  background: var(--sv-bg);
}
.sv-attention li[data-level="high"] {
  border-inline-start-color: var(--sv-danger);
}
.sv-attention li[data-level="medium"] {
  border-inline-start-color: var(--sv-warning);
}
.sv-attention li[data-level="ok"] {
  border-inline-start-color: var(--sv-success);
}
.sv-attention__count {
  min-inline-size: 2.5ch;
  color: var(--sv-text);
  font-family: var(--sv-font-display);
  font-size: var(--sv-size-2xl);
  text-align: center;
}

.sv-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sv-line-neutral);
  border-radius: var(--sv-radius-md);
}
.sv-table {
  min-inline-size: 640px;
  font-size: var(--sv-size-sm);
}
.sv-table th,
.sv-table td {
  padding: var(--sv-space-3) var(--sv-space-4);
  border-block-end: 1px solid var(--sv-line-neutral);
  text-align: start;
  vertical-align: top;
}
.sv-table thead th {
  background: var(--sv-bg-alt);
  color: var(--sv-text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.sv-table tbody tr:hover {
  background: var(--sv-bg-alt);
}
.sv-table tbody tr:last-child td {
  border-block-end: 0;
}
.sv-table a {
  color: var(--sv-text);
}

.sv-dl {
  display: grid;
  gap: var(--sv-space-3) var(--sv-space-6);
  grid-template-columns: minmax(140px, max-content) 1fr;
  margin: 0;
}
.sv-dl dt {
  color: var(--sv-text-muted);
}
.sv-dl dd {
  min-inline-size: 0;
  margin: 0;
  color: var(--sv-text);
  overflow-wrap: anywhere; /* long email addresses must not widen the page */
}
@media (max-width: 30rem) {
  /* phones: label above value, otherwise the two columns are wider than the screen */
  .sv-dl {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sv-space-1);
  }
  .sv-dl dd + dt {
    margin-block-start: var(--sv-space-3);
  }
}

.sv-masked {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-3);
  font-variant-numeric: tabular-nums;
}

.sv-empty {
  display: grid;
  justify-items: center;
  gap: var(--sv-space-3);
  padding: var(--sv-space-8) var(--sv-space-5);
  color: var(--sv-text-muted);
  text-align: center;
}

.sv-idcard {
  display: grid;
  gap: var(--sv-space-3);
  max-inline-size: 30rem;
  padding: var(--sv-space-6);
  border: 1px solid var(--sv-accent);
  border-radius: var(--sv-radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgb(184 154 90 / 0.12), transparent 60%),
    var(--sv-bg-brand-deep);
}
.sv-idcard__id {
  color: var(--sv-accent-strong);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-size-2xl);
  letter-spacing: 0.06em;
}

/* ---- accounts host: centred sign-in layout */
.sv-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* content can never make the page wider than the screen */
  place-items: center;
  min-block-size: 100vh;
  padding: var(--sv-space-7) var(--sv-layout-gutter);
  background:
    radial-gradient(90% 60% at 50% 0%, rgb(9 26 20 / 0.95), transparent 70%),
    var(--sv-bg);
}
.sv-auth__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sv-space-6);
  inline-size: 100%;
  max-inline-size: 30rem;
}
.sv-auth__brand {
  display: grid;
  justify-items: center;
  gap: var(--sv-space-3);
  text-align: center;
}
.sv-auth__card {
  display: grid;
  gap: var(--sv-space-5);
  padding: var(--sv-space-7) var(--sv-space-6);
  border: 1px solid var(--sv-line-neutral);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-bg-raised);
}
.sv-auth__card h1 {
  font-size: var(--sv-size-3xl);
  text-align: center;
}
.sv-auth__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sv-space-4);
  color: var(--sv-text-muted);
  font-size: var(--sv-size-sm);
}
.sv-auth--wide .sv-auth__inner {
  max-inline-size: 60rem;
}
.sv-auth--manage .sv-auth__inner {
  max-inline-size: 38rem;
}

/* account menu above the card on signed-in pages (accounts/partials/account_nav.html) */
.sv-auth__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sv-space-2) var(--sv-space-5);
  padding-block-end: var(--sv-space-3);
  border-block-end: 1px solid var(--sv-line-neutral);
  font-size: var(--sv-size-sm);
}
.sv-auth__nav a {
  color: var(--sv-text-muted);
  text-decoration: none;
}
.sv-auth__nav a:hover,
.sv-auth__nav a[aria-current="page"] {
  color: var(--sv-accent-text);
}
.sv-auth__nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* numbered set-up steps (two-factor set-up) */
.sv-steps {
  display: grid;
  gap: var(--sv-space-3);
  margin: 0;
  padding-inline-start: 1.4em;
}

.sv-areas {
  display: grid;
  gap: var(--sv-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.sv-area {
  position: relative;
  display: grid;
  gap: var(--sv-space-2);
  padding: var(--sv-space-5);
  border: 1px solid var(--sv-line-neutral);
  border-radius: var(--sv-radius-md);
  background: var(--sv-bg-raised);
  color: var(--sv-text-body);
  text-decoration: none;
  transition: border-color var(--sv-motion-base) var(--sv-motion-ease);
}
.sv-area:hover {
  border-color: var(--sv-accent);
  color: var(--sv-text-body);
}
.sv-area__title {
  color: var(--sv-text);
  font-family: var(--sv-font-display);
  font-size: var(--sv-size-xl);
}
.sv-area__host {
  color: var(--sv-accent-text);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-size-xs);
  direction: ltr;
  unicode-bidi: isolate;
}

.sv-codes {
  display: grid;
  margin: 0;
  list-style: none;
  gap: var(--sv-space-2);
  grid-template-columns: repeat(2, 1fr);
  padding: var(--sv-space-5);
  border: 1px dashed var(--sv-line-strong);
  font-family: var(--sv-font-mono);
  direction: ltr;
}
.sv-qr {
  justify-self: center;
  padding: var(--sv-space-3);
  border-radius: var(--sv-radius-sm);
  background: var(--sv-color-white);
}
.sv-qr svg {
  inline-size: 200px;
  block-size: 200px;
}
.sv-secret {
  padding: var(--sv-space-3);
  border: 1px solid var(--sv-line-neutral);
  font-family: var(--sv-font-mono);
  overflow-wrap: anywhere;
  direction: ltr;
}

/* ---- staff workspaces (apps/portal): registration review and staff (2026-10-22) */
.sv-portal .sv-auth__inner { max-inline-size: 72rem; }
.sv-portal .sv-auth__card h1 { text-align: start; }
.sv-portal-tile {
  display: grid;
  gap: var(--sv-space-2);
  padding: var(--sv-space-5);
  border: 1px solid var(--sv-line-neutral);
  border-radius: var(--sv-radius-md);
  background: var(--sv-bg);
  color: var(--sv-text);
  text-decoration: none;
}
.sv-portal-tile:hover { border-color: var(--sv-accent); }
.sv-portal-tile__count { font-family: var(--sv-font-display); font-size: var(--sv-size-3xl); line-height: 1; }
.sv-portal-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-items: end;
  gap: var(--sv-space-3);
}
.sv-portal-filter .sv-field { margin: 0; }
.sv-portal-box {
  display: grid;
  gap: var(--sv-space-4);
  padding: var(--sv-space-4) var(--sv-space-5);
  border: 1px solid var(--sv-line-neutral);
  border-radius: var(--sv-radius-md);
}
.sv-portal-box > summary { cursor: pointer; font-weight: 600; }
.sv-portal-box--ok { border-color: var(--sv-success); }
.sv-portal-box h3 { margin: 0; }
.sv-portal-docs { display: grid; gap: var(--sv-space-2); margin: 0; padding-inline-start: 1.2em; }
.sv-portal-state--approved, .sv-portal-state--matched { background: var(--sv-success-bg); color: var(--sv-success); }
.sv-portal-state--needs_correction { background: var(--sv-danger-bg, var(--sv-bg-alt)); color: var(--sv-danger); }
.sv-portal .sv-table td form { display: inline-block; margin-block: 2px; }
.sv-portal .sv-table details { margin-block-start: var(--sv-space-2); }
.sv-portal .sv-table details form { display: grid; gap: var(--sv-space-2); }
.sv-portal .sv-auth__nav {
  padding: var(--sv-space-3) var(--sv-space-5);
  border: 1px solid var(--sv-line-neutral);
  border-radius: var(--sv-radius-md);
  background: var(--sv-bg-raised);
}
.sv-portal .sv-auth__nav a { color: var(--sv-text); }
.sv-portal .sv-auth__nav a[aria-current="page"] { color: var(--sv-accent-text); }
.sv-nowrap { white-space: nowrap; }

/* branch details (branch manager's form, HQ's review) */
.sv-portal-state--warn { background: var(--sv-warning-bg); color: var(--sv-warning); }
.sv-portal-subhead { grid-column: 1 / -1; margin: var(--sv-space-4) 0 0; font-size: 1.1rem; }
.sv-portal-wide { grid-column: 1 / -1; }
.sv-portal-actions { display: flex; flex-wrap: wrap; gap: var(--sv-space-3); }
.sv-form-grid #bd-class_days, .sv-form-grid #bd-class_days > div { display: flex; flex-wrap: wrap; gap: var(--sv-space-2) var(--sv-space-4); }
.sv-form-grid #bd-class_days label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }

/* ---- learner page on the member and guardian hosts (work plan 2026-10-27, A1) */
.sv-learner__id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sv-space-2) var(--sv-space-6);
  padding: var(--sv-space-5);
  border: 1px solid var(--sv-line-neutral);
  border-radius: var(--sv-radius-md);
  background: var(--sv-bg);
}
.sv-learner__name { margin: 0; font-family: var(--sv-font-display); font-size: var(--sv-size-2xl); line-height: 1.2; }
.sv-learner__code { margin: 0; color: var(--sv-text-muted); }
.sv-learner__code bdi { color: var(--sv-text); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.sv-learner__title { margin-block: var(--sv-space-7) var(--sv-space-3); font-size: var(--sv-size-lg); }
.sv-learner, .sv-learner__months, .sv-learner__month, .sv-learner__states div { min-inline-size: 0; }
.sv-learner__months { display: grid; gap: var(--sv-space-4); }
.sv-learner__month {
  display: grid;
  gap: var(--sv-space-4);
  padding: var(--sv-space-5);
  border: 1px solid var(--sv-line-neutral);
  border-radius: var(--sv-radius-md);
}
.sv-learner__month-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sv-space-2) var(--sv-space-4); }
.sv-learner__month-head h3 { margin: 0; font-size: var(--sv-size-lg); }
.sv-learner__month-head span { color: var(--sv-text-muted); }
.sv-learner__states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sv-space-4); margin: 0; }
.sv-learner__states div { display: grid; gap: var(--sv-space-2); justify-items: start; }
.sv-learner__states dt { color: var(--sv-text-muted); font-size: var(--sv-size-sm); }
.sv-learner__states dd { margin: 0; min-inline-size: 0; }
.sv-learner__states .sv-badge { white-space: normal; text-align: center; }
.sv-learner__month .sv-alert { margin: 0; }
@media (max-width: 40rem) {
  .sv-learner__states { grid-template-columns: 1fr; gap: var(--sv-space-3); }
  .sv-learner__states div { grid-template-columns: 1fr auto; align-items: center; }
}
.sv-learner__upload { display: grid; gap: var(--sv-space-2); }
.sv-learner__upload .sv-help { margin: 0; }
.sv-learner__upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-3); }
.sv-learner__upload-row .sv-input { flex: 1 1 16rem; min-inline-size: 0; }
.sv-learner__legal { display: grid; gap: var(--sv-space-3); padding-block-start: var(--sv-space-4); border-block-start: 1px solid var(--sv-line-neutral); }
.sv-learner__legal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-space-2) var(--sv-space-4); margin: 0; font-weight: 700; }
.sv-learner__perms { display: grid; gap: var(--sv-space-3); margin: 0; padding: 0; list-style: none; }
.sv-learner__perms li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-space-2) var(--sv-space-4); }
.sv-learner__perm-act { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-3); }
.sv-learner__perm-act form { margin: 0; }
/* training path on the learner page (A4; design REG 9 / REG 10: rank card, four stat cards, events) */
.sv-learner__rank {
  display: grid;
  gap: var(--sv-space-2);
  padding: var(--sv-space-6);
  border-radius: var(--sv-radius-md);
  background: var(--sv-color-ink);
  color: var(--sv-ink-text);
}
.sv-learner__rank p { margin: 0; }
.sv-learner__rank-label { color: var(--sv-ink-text-muted); font-size: var(--sv-size-sm); }
.sv-learner__rank-value { font-family: var(--sv-font-display); font-size: var(--sv-size-2xl); line-height: 1.25; }
.sv-learner__pill {
  display: inline-block;
  padding: 0.15em 0.75em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--sv-size-sm);
  font-weight: 700;
}
.sv-learner__pill--ok { border-color: transparent; background: var(--sv-success-bg); color: var(--sv-success); }
.sv-learner__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sv-space-4); margin-block-start: var(--sv-space-4); }
.sv-learner__stat { display: grid; align-content: start; gap: var(--sv-space-1); min-inline-size: 0; padding: var(--sv-space-5); border: 1px solid var(--sv-line-neutral); border-radius: var(--sv-radius-md); }
.sv-learner__stat p { margin: 0; overflow-wrap: break-word; }
.sv-learner__stat-label { color: var(--sv-text-muted); font-size: var(--sv-size-sm); }
.sv-learner__stat-value { font-size: var(--sv-size-lg); font-weight: 700; }
.sv-learner__stat-value--ok { color: var(--sv-success); }
.sv-learner__stat-value--todo { color: var(--sv-danger); }
.sv-learner__stat-note { color: var(--sv-text-muted); font-size: var(--sv-size-sm); }
.sv-learner__psych { margin-block: var(--sv-space-4) 0; color: var(--sv-text-muted); }
.sv-learner__psych strong { color: var(--sv-text); }
.sv-learner__subtitle { margin-block: var(--sv-space-6) var(--sv-space-3); font-size: var(--sv-size-md, 1rem); }
.sv-learner__events { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-inline-start: 2px solid var(--sv-line-neutral); }
.sv-learner__event { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sv-space-4); padding: var(--sv-space-3) var(--sv-space-5); }
.sv-learner__event p { margin: 0; }
.sv-learner__event-date { color: var(--sv-text-muted); font-size: var(--sv-size-sm); padding-block-start: 0.15em; }
.sv-learner__event-body { display: grid; gap: var(--sv-space-1); }
.sv-learner__event-kind { font-weight: 700; }
.sv-learner__event-feedback { font-style: italic; }
.sv-learner__event-by { color: var(--sv-text-muted); font-size: var(--sv-size-sm); }
@media (max-width: 56rem) { .sv-learner__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) {
  .sv-learner__event { grid-template-columns: 1fr; gap: var(--sv-space-1); }
  .sv-learner__stats { grid-template-columns: 1fr; gap: var(--sv-space-3); }
  .sv-learner__stat { padding: var(--sv-space-4); }
  .sv-learner__rank { padding: var(--sv-space-5); }
}
/* coach area (work plan B): classes, attendance sheet, learner file */
.sv-coach__classes, .sv-coach__roster, .sv-coach__people { display: grid; gap: var(--sv-space-3); margin: 0; padding: 0; list-style: none; }
.sv-coach__class, .sv-coach__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-space-3) var(--sv-space-5);
  padding: var(--sv-space-4) var(--sv-space-5); border: 1px solid var(--sv-line-neutral); border-radius: var(--sv-radius-md);
}
.sv-coach__class p, .sv-coach__row p { margin: 0; }
.sv-coach__class-text, .sv-coach__who { display: grid; gap: var(--sv-space-1); min-inline-size: 0; flex: 1 1 16rem; }
.sv-coach__class-name, .sv-coach__name { font-weight: 700; }
.sv-coach__class-when, .sv-coach__facts { color: var(--sv-text-muted); font-size: var(--sv-size-sm); }
.sv-coach__row--problem { border-color: var(--sv-danger); }
.sv-coach__mark { display: grid; gap: var(--sv-space-2); justify-items: end; }
.sv-coach__choice { display: flex; gap: var(--sv-space-4); margin: 0; padding: 0; border: 0; }
.sv-coach__choice label, .sv-coach__safety { display: inline-flex; align-items: center; gap: var(--sv-space-2); cursor: pointer; }
.sv-coach__safety { font-size: var(--sv-size-sm); }
.sv-coach__sheet { display: grid; gap: var(--sv-space-5); }
.sv-coach__sheet > .sv-button { justify-self: start; }
.sv-coach__day { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sv-space-3); margin-block: var(--sv-space-4); }
.sv-coach__day .sv-field { margin: 0; }
.sv-coach__people li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sv-space-2) var(--sv-space-4); padding-block: var(--sv-space-2); border-block-end: 1px solid var(--sv-line-neutral); }
.sv-coach__id { color: var(--sv-text-muted); white-space: nowrap; }
.sv-coach__flags { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); margin-block-start: var(--sv-space-4); }
.sv-coach__tabs { display: grid; gap: var(--sv-space-3); }
.sv-coach__record { border: 1px solid var(--sv-line-neutral); border-radius: var(--sv-radius-md); }
.sv-coach__record > summary { padding: var(--sv-space-4) var(--sv-space-5); font-weight: 700; cursor: pointer; }
.sv-coach__record > form { display: grid; gap: var(--sv-space-3); padding: 0 var(--sv-space-5) var(--sv-space-5); }
.sv-coach__record > form > .sv-button { justify-self: start; }
.sv-coach__internal { padding: var(--sv-space-2) var(--sv-space-3); border-radius: var(--sv-radius-sm, 4px); background: var(--sv-bg-alt, #F3F0EA); font-size: var(--sv-size-sm); }
.sv-coach__correct > summary { color: var(--sv-text-muted); font-size: var(--sv-size-sm); cursor: pointer; }
.sv-coach__correct > form { display: grid; gap: var(--sv-space-3); margin-block-start: var(--sv-space-3); }
.sv-coach__correct > form > .sv-button { justify-self: start; }
@media (max-width: 30rem) { .sv-coach__mark { justify-items: start; } }
/* branch members (work plan C) */
.sv-members__count { margin-block: var(--sv-space-4); color: var(--sv-text-muted); }
.sv-members__states { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sv-space-2); }
.sv-members__links { margin-block-start: var(--sv-space-4); }
@media (max-width: 30rem) { .sv-members__states { justify-content: flex-start; } }
.sv-portal-state--active { background: var(--sv-success-bg); color: var(--sv-success); }
.sv-portal-state--paused, .sv-portal-state--trial { background: var(--sv-warning-bg); color: var(--sv-warning); }
.sv-members__classes { display: grid; gap: var(--sv-space-4); }
.sv-members__classes > .sv-button { justify-self: start; }
.sv-members__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--sv-space-3); margin: 0; padding: 0; border: 0; }
.sv-members__slots legend { margin-block-end: var(--sv-space-3); }
.sv-members__slot { display: flex; align-items: center; gap: var(--sv-space-3); padding: var(--sv-space-3) var(--sv-space-4); border: 1px solid var(--sv-line-neutral); border-radius: var(--sv-radius-md); cursor: pointer; }
.sv-portal-filter .sv-field, .sv-portal-filter select, .sv-coach__day select { min-inline-size: 0; max-inline-size: 100%; }
.sv-portal-filter select { inline-size: 100%; }
.sv-coach > *, .sv-coach__row > * { min-inline-size: 0; }
.sv-members__states .sv-badge, .sv-coach__facts .sv-badge, .sv-coach__flags .sv-badge { white-space: normal; }
/* class boxes: rows of three, a shorter last row centred (balance rule, NEXT_CHAT §1) */
.sv-members__slots { display: flex; flex-wrap: wrap; justify-content: center; }
.sv-members__slot { flex: 0 1 calc((100% - 2 * var(--sv-space-3)) / 3); min-inline-size: 0; }
@media (max-width: 56rem) { .sv-members__slot { flex-basis: calc((100% - var(--sv-space-3)) / 2); } }
@media (max-width: 30rem) { .sv-members__slot { flex-basis: 100%; } }
/* attendance overview (work plan C4) */
.sv-overview__months { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sv-space-3); margin-block: var(--sv-space-4); }
.sv-overview__months > :first-child { justify-self: start; }
.sv-overview__months > :last-child { justify-self: end; }
.sv-overview__month { margin: 0; font-weight: 700; font-size: var(--sv-size-lg); text-align: center; }
.sv-overview__wrap { overflow-x: auto; }
.sv-overview__table th, .sv-overview__table td { white-space: nowrap; }
.sv-overview__cell { text-align: center; }
.sv-overview__date { font-size: var(--sv-size-sm); text-align: center; }
.sv-overview__mark--in { color: var(--sv-success); }
.sv-overview__mark--out { color: var(--sv-danger); }
.sv-learner__renew { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-space-3) var(--sv-space-5); margin-block-end: var(--sv-space-4); padding: var(--sv-space-5); border: 1px solid var(--sv-line-neutral); border-radius: var(--sv-radius-md); background: var(--sv-bg); }
.sv-learner__renew p { flex: 1 1 22rem; margin: 0; }
/* workspace cards never grow wider than the screen: wide tables scroll inside their box */
.sv-portal .sv-auth__card { grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.sv-portal .sv-auth__inner > * { min-inline-size: 0; }
.sv-overview__table { min-inline-size: 0; }
.sv-overview__table tbody th { padding: var(--sv-space-3) var(--sv-space-4); background: none; color: var(--sv-text); font-weight: 700; }
.sv-overview__table tbody th a { color: inherit; }
.sv-overview__wrap { position: relative; max-inline-size: 100%; } /* anchors the hidden labels inside the scrolling box */
/* contact changes (work plan A3) */
.sv-learner__contact-form { margin-block-start: var(--sv-space-4); }
.sv-changes__diff { display: grid; gap: var(--sv-space-2); margin: var(--sv-space-2) 0 0; }
.sv-changes__diff div { display: grid; gap: 2px; }
.sv-changes__diff dt { color: var(--sv-text-muted); font-size: var(--sv-size-sm); }
.sv-changes__diff dd { margin: 0; overflow-wrap: anywhere; }
.sv-changes__old { color: var(--sv-text-muted); text-decoration: line-through; }
.sv-changes__actions { display: grid; gap: var(--sv-space-3); justify-items: end; }
.sv-changes__actions form { display: grid; gap: var(--sv-space-2); margin: 0; }
.sv-changes__row { align-items: flex-start; }
@media (max-width: 30rem) { .sv-changes__actions { justify-items: start; } }

/* ---- atlas.css ---- */
/* ==========================================================================
   SAVANTAR Atlas (the world competition watch). Logical properties only, so the
   same rules serve right-to-left and left-to-right pages.
   ========================================================================== */
.sv-atlas-kicker {
  margin: 0 0 var(--sv-space-2);
  font-family: var(--sv-font-latin);
  font-size: var(--sv-size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sv-accent-text);
}
.sv-atlas-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-block-size: min(78vh, 46rem);
  overflow: hidden;
  background: var(--sv-color-ink);
  color: var(--sv-color-on-ink);
  isolation: isolate;
}
.sv-atlas-hero__art {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: left center;
  z-index: -2;
}
.sv-atlas-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to left, rgb(17 17 16 / 0.94) 0%, rgb(17 17 16 / 0.82) 38%, rgb(17 17 16 / 0.2) 72%, rgb(17 17 16 / 0) 100%);
}
[dir="ltr"] .sv-atlas-hero::before { transform: scaleX(-1); }
.sv-atlas-hero__inner { padding-block: var(--sv-space-8, 4rem) var(--sv-space-6); }
.sv-atlas-hero__inner > * { max-inline-size: 36rem; }
.sv-atlas-hero .sv-atlas-kicker { color: var(--sv-color-on-ink-kicker); }
.sv-atlas-hero__title {
  margin: 0 0 var(--sv-space-4);
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.2;
  color: var(--sv-color-on-ink);
}
.sv-atlas-hero__lead { margin: 0 0 var(--sv-space-4); font-size: var(--sv-size-lg); color: var(--sv-color-on-ink-body); }
.sv-atlas-hero__time { margin: 0 0 var(--sv-space-5); font-size: var(--sv-size-sm); color: var(--sv-color-on-ink-muted); }
.sv-atlas-jump { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.sv-atlas-jump a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding-inline: var(--sv-space-4);
  border: 1px solid var(--sv-color-ink-line-strong);
  border-radius: 999px;
  color: var(--sv-color-on-ink);
  text-decoration: none;
  font-size: var(--sv-size-sm);
  background: rgb(17 17 16 / 0.55);
}
.sv-atlas-jump a:hover, .sv-atlas-jump a:focus-visible { border-color: var(--sv-color-red); }
.sv-atlas-hero__caption {
  margin: 0;
  padding-block-end: var(--sv-space-4);
  font-size: var(--sv-size-2xs);
  color: var(--sv-color-on-ink-muted);
}

.sv-atlas-head { max-inline-size: 46rem; margin-block-end: var(--sv-space-6); }
.sv-atlas-head h2 { margin: 0 0 var(--sv-space-3); }
.sv-atlas-head__lead { margin: 0; color: var(--sv-text-muted); }
.sv-atlas-note { margin-block: var(--sv-space-5) 0; font-size: var(--sv-size-sm); color: var(--sv-text-muted); max-inline-size: 52rem; }
.sv-atlas-empty { margin: 0; padding: var(--sv-space-5); border: 1px dashed var(--sv-line-strong); border-radius: 0.5rem; text-align: center; color: var(--sv-text-muted); }
.sv-atlas-tags { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); margin: 0 0 var(--sv-space-2); font-size: var(--sv-size-xs); }
.sv-atlas-tags span { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--sv-bg-sunken); }
.sv-atlas-links { display: flex; flex-wrap: wrap; gap: var(--sv-space-2) var(--sv-space-4); margin: var(--sv-space-2) 0 0; font-size: var(--sv-size-sm); }

/* news */
.sv-atlas-news { display: grid; gap: var(--sv-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.sv-atlas-story { padding: var(--sv-space-5); border: 1px solid var(--sv-line); border-radius: 0.5rem; background: var(--sv-bg-raised); }
.sv-atlas-story h3 { margin: 0 0 var(--sv-space-3); font-size: var(--sv-size-lg); }
.sv-atlas-story p { margin: 0 0 var(--sv-space-3); }
.sv-atlas-why { padding-inline-start: var(--sv-space-3); border-inline-start: 3px solid var(--sv-color-red); font-size: var(--sv-size-sm); }
@media (min-width: 64rem) { .sv-atlas-story--lead { grid-column: span 2; } }
.sv-atlas-columns { display: grid; gap: var(--sv-space-5); margin-block-start: var(--sv-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.sv-atlas-panel { padding: var(--sv-space-5); border-radius: 0.5rem; background: var(--sv-bg-alt); }
.sv-atlas-panel__title { margin: 0 0 var(--sv-space-4); font-size: var(--sv-size-md); }
.sv-atlas-item + .sv-atlas-item { margin-block-start: var(--sv-space-5); padding-block-start: var(--sv-space-5); border-block-start: 1px solid var(--sv-line); }
.sv-atlas-item h3, .sv-atlas-item h4 { margin: 0 0 var(--sv-space-2); }
.sv-atlas-item p { margin: 0 0 var(--sv-space-2); }

/* calendar */
.sv-atlas-filters { display: grid; gap: var(--sv-space-4); align-items: end; grid-template-columns: minmax(0, 1fr); margin-block-end: var(--sv-space-5); }
.sv-atlas-filters .sv-field { margin: 0; }
@media (min-width: 40rem) { .sv-atlas-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-atlas-filters__q { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  .sv-atlas-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-atlas-filters__q { grid-column: span 2; }
}
.sv-atlas-filters--two { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .sv-atlas-filters--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .sv-atlas-filters--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-atlas-filters--two .sv-atlas-filters__actions { grid-column: 1 / -1; }
.sv-atlas-filters__actions { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.sv-atlas-tabs { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); margin-block-end: var(--sv-space-3); }
.sv-atlas-tabs a { display: inline-flex; align-items: center; gap: var(--sv-space-2); min-block-size: 2.5rem; padding-inline: var(--sv-space-4); border: 1px solid var(--sv-line-strong); border-radius: 999px; text-decoration: none; color: var(--sv-text); }
.sv-atlas-tabs a[aria-current="page"] { background: var(--sv-color-ink); border-color: var(--sv-color-ink); color: var(--sv-color-on-ink); }
.sv-atlas-count { margin: 0 0 var(--sv-space-4); font-size: var(--sv-size-sm); color: var(--sv-text-muted); }
.sv-atlas-events { display: grid; gap: var(--sv-space-3); }
.sv-atlas-event {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--sv-space-4);
  align-items: start;
  padding: var(--sv-space-4);
  border: 1px solid var(--sv-line);
  border-radius: 0.5rem;
  background: var(--sv-bg-raised);
  scroll-margin-block-start: 6rem;
}
.sv-atlas-event__date { display: grid; place-items: center; text-align: center; padding-block: var(--sv-space-2); border-radius: 0.375rem; background: var(--sv-color-ink); color: var(--sv-color-on-ink); }
.sv-atlas-event__date b { font-size: var(--sv-size-2xl); line-height: 1.1; }
.sv-atlas-event__date span { font-size: var(--sv-size-xs); }
.sv-atlas-event__date small { font-size: var(--sv-size-2xs); color: var(--sv-color-on-ink-muted); font-family: var(--sv-font-latin); }
.sv-atlas-event h3 { margin: 0 0 var(--sv-space-1); font-size: var(--sv-size-lg); }
.sv-atlas-event__place { margin: 0; color: var(--sv-text-muted); font-size: var(--sv-size-sm); }
.sv-atlas-status { font-weight: 600; }
.sv-atlas-tags .sv-atlas-status--open { background: var(--sv-color-green-tint); color: var(--sv-color-green-text); }
.sv-atlas-tags .sv-atlas-status--closed, .sv-atlas-tags .sv-atlas-status--capacity { background: var(--sv-color-red-tint); color: var(--sv-color-red-text); }
.sv-atlas-tags .sv-atlas-status--invitation { background: var(--sv-color-blue-tint); color: var(--sv-color-blue-text); }
.sv-atlas-tags .sv-atlas-status--unverified { background: var(--sv-color-amber-tint); color: var(--sv-color-amber-text); }
.sv-atlas-dossier { margin-block-start: var(--sv-space-3); }
.sv-atlas-dossier summary { cursor: pointer; font-weight: 600; font-size: var(--sv-size-sm); min-block-size: 2rem; display: flex; align-items: center; }
.sv-atlas-dossier .sv-dl { margin-block: var(--sv-space-3); }
.sv-atlas-dossier__en { margin: var(--sv-space-3) 0 0; font-family: var(--sv-font-latin); color: var(--sv-text-muted); font-size: var(--sv-size-sm); }
.sv-atlas-dossier__note { margin: 0 0 var(--sv-space-2); }
.sv-atlas-dossier__checked { margin: var(--sv-space-3) 0 0; font-size: var(--sv-size-xs); color: var(--sv-text-muted); }
.sv-atlas-follow {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 2.5rem; padding-inline: var(--sv-space-4);
  border: 1px solid var(--sv-line-strong); border-radius: 999px;
  background: transparent; color: var(--sv-text); font: inherit; font-size: var(--sv-size-sm); cursor: pointer;
}
.sv-atlas-follow[aria-pressed="true"] { background: var(--sv-color-red); border-color: var(--sv-color-red); color: var(--sv-color-white); }
@media (max-width: 40rem) {
  .sv-atlas-event { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .sv-atlas-follow { grid-column: 1 / -1; justify-self: stretch; }
}

/* match + history */
.sv-atlas-split { display: grid; gap: var(--sv-space-6); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.sv-atlas-figure { margin: 0; }
.sv-atlas-figure img { display: block; inline-size: 100%; block-size: auto; border-radius: 0.5rem; }
.sv-atlas-figure figcaption { margin-block-start: var(--sv-space-2); font-size: var(--sv-size-2xs); color: var(--sv-text-muted); }

/* watchlist */
.sv-atlas-watchlist { list-style: none; margin: 0 0 var(--sv-space-4); padding: 0; display: grid; gap: var(--sv-space-2); }
.sv-atlas-watchlist li { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-3); padding: var(--sv-space-3) var(--sv-space-4); border-radius: 0.5rem; background: var(--sv-bg-raised); border: 1px solid var(--sv-line); }
.sv-atlas-watchlist a { display: grid; gap: 0.15rem; text-decoration: none; color: var(--sv-text); }
.sv-atlas-watchlist small { color: var(--sv-text-muted); }

.sv-atlas-sources p { margin: 0; font-size: var(--sv-size-sm); color: var(--sv-text-muted); text-align: center; }

@media (max-width: 48rem) {
  .sv-atlas-hero::before { background: linear-gradient(to top, rgb(17 17 16 / 0.95) 0%, rgb(17 17 16 / 0.86) 55%, rgb(17 17 16 / 0.6) 100%); }
  [dir="ltr"] .sv-atlas-hero::before { transform: none; }
  .sv-atlas-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-atlas-jump a { justify-content: center; text-align: center; }
  .sv-atlas-jump a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* [hidden] wins over the display rules above (no JavaScript: no Follow, no watchlist link). */
.sv-atlas-follow[hidden], .sv-atlas-jump a[hidden], .sv-atlas-follow [hidden] { display: none; }