﻿/* === White Info Sites — design tokens =================================
 * Site 19 — Слышу.Ясно. Same architecture as sites 01-15.
 */

/* ---- Hearing vertical (trustworthy blue + warm accent) ---- */
:root.vertical-hearing,
.vertical-hearing {
  --bg: #F6F8FB;
  --fg: #0F172A;
  --accent: #1D4ED8;
  --accent-hover: #1E40AF;
  --muted: #5A6478;
  --border: #DCE2EB;
  --card-bg: #FFFFFF;
  --code-bg: #EEF2F8;
  --link: #1D4ED8;
  --link-hover: #1E40AF;
}

/* ---- Universal base ---- */
:root {
  --fs-base: 16.5px;
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  --fs-h2: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
  --fs-h3: clamp(1.18rem, 1.05rem + .4vw, 1.4rem);
  --fs-h4: 1.05rem;
  --fs-lead: clamp(1.05rem, 1rem + .35vw, 1.22rem);
  --fs-small: .88rem;
  --fs-mini: .78rem;
  --lh-body: 1.7;
  --lh-reading: 1.78;
  --lh-heading: 1.18;
  --lh-display: 1.08;
  --ls-tight: -.012em;
  --measure: 68ch;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.6rem;
  --space-6: 3.4rem;
  --space-7: 4.2rem;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.045);
  --shadow-md: 0 1px 2px rgba(15,23,42,.05), 0 6px 20px -8px rgba(15,23,42,.08);
  --shadow-lg: 0 1px 2px rgba(15,23,42,.05), 0 14px 36px -12px rgba(15,23,42,.14);
  --shadow-hover: 0 2px 4px rgba(15,23,42,.06), 0 18px 44px -14px rgba(15,23,42,.18);
  --wrap-media: 1280px;
  --t-fast: 180ms cubic-bezier(.4,0,.2,1);
  --t-base: 240ms cubic-bezier(.4,0,.2,1);
  --t-slow: 360ms cubic-bezier(.4,0,.2,1);
}
::selection { background: color-mix(in srgb, var(--accent) 35%, #fff); color: var(--fg); }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base); }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
}
h1, h2, h3, h4 { line-height: var(--lh-heading); color: var(--fg); margin-top: 1.5em; margin-bottom: 0.5em; }
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p, ul, ol, blockquote { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { padding-left: 1.5em; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
code { background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.92em; }
blockquote { border-left: 3px solid var(--accent); padding: 0.5em 1em; color: var(--muted); background: var(--code-bg); margin-left: 0; }

/* Shared portal components */
.crumbs { font-size: .85rem; color: var(--muted); margin: 0 0 1.2rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs .crumb-sep { margin: 0 .35em; opacity: .6; }
.crumbs .crumb-cur { color: var(--fg); }

.callout {
  position: relative;
  background: var(--code-bg);
  padding: 1.1rem 1.3rem 1.1rem 3.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 1.8rem 0;
  box-shadow: var(--shadow-sm);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout::before {
  content: ""; position: absolute; left: 1rem; top: 1.15rem;
  width: 1.3rem; height: 1.3rem;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.callout-info { border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, #fff); }
.callout-info::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}
.callout-warn { border-color: #fcd34d; background: #fffbeb; }
.callout-warn::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
.callout-doctor { border: 1px solid #fecaca; border-left: 0; background: #fff8f8; padding: 0; overflow: hidden; }
.callout-doctor::before { content: none; }
.callout-doctor > h2, .callout-doctor > h3 {
  margin: 0; padding: .8rem 1.4rem .8rem 3.2rem;
  background: #b91c1c; color: #fff;
  font-size: 1.05rem; font-weight: 700;
  position: relative;
}
.callout-doctor > h2::before, .callout-doctor > h3::before {
  content: ""; position: absolute; left: 1.2rem; top: 50%;
  transform: translateY(-50%); width: 1.3rem; height: 1.3rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>");
  background-repeat: no-repeat; background-size: contain;
}
.callout-doctor > p, .callout-doctor > ul, .callout-doctor > ol { margin: 0; padding: 0 1.4rem; }
.callout-doctor > p:first-of-type { padding-top: 1rem; }
.callout-doctor > :last-child { padding-bottom: 1rem; }
.callout-doctor a { color: #b91c1c; font-weight: 600; }

.summary-box {
  background: color-mix(in srgb, var(--accent) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: var(--radius);
  padding: 1rem 1.3rem; margin: 1.2rem 0 1.6rem;
  font-size: 1.02rem; color: var(--fg); line-height: 1.6;
}
.summary-box__label {
  display: inline-block; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--accent); font-weight: 700; margin-bottom: .4rem;
}

.sources { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: 0.92rem; }
.sources h3 { font-size: 1rem; color: var(--muted); }
.sources ul { padding-left: 1.2em; }

.subscribe-form { transition: opacity var(--t-base); }
.subscribe-form .form-field { margin-bottom: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.subscribe-form .form-field label { font-weight: 600; font-size: .92rem; color: var(--fg); }
.subscribe-form input[type="text"], .subscribe-form input[type="email"], .subscribe-form input[type="url"], .subscribe-form textarea {
  width: 100%; padding: .65em .9em; font: inherit; font-size: 1rem;
  background: #fff; color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.subscribe-form input:focus, .subscribe-form textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.subscribe-form textarea { resize: vertical; min-height: 5em; }
.subscribe-form input[aria-invalid="true"], .subscribe-form textarea[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.form-error { color: #b91c1c; font-size: .85rem; margin-top: .3rem; }
.form-success {
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: 1rem 1.2rem; color: var(--fg); font-weight: 600;
  transition: opacity var(--t-base);
}
.form-success::before {
  content: "✓"; display: inline-block;
  width: 1.3em; height: 1.3em; line-height: 1.3em;
  text-align: center; border-radius: 50%;
  background: var(--accent); color: #fff;
  margin-right: .55em; font-weight: 800;
}
.subscribe-form .form-checkbox-wrap { display: flex; gap: .55em; align-items: flex-start; margin: .6rem 0 1rem; font-size: .9rem; color: var(--muted); }
.subscribe-form .form-checkbox-wrap input[type="checkbox"] { margin-top: .25em; width: 16px; height: 16px; accent-color: var(--accent); }
.subscribe-form button[type="submit"] {
  padding: .75em 1.6em; font-family: inherit; font-size: 1rem;
  font-weight: 700; border: 0; border-radius: var(--radius);
  background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.subscribe-form button[type="submit"]:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }
.subscribe-form button[type="submit"]:active { transform: translateY(1px); }
.subscribe-form .form-note { font-size: 0.85rem; color: var(--muted); margin-top: var(--space-2); }

.fc-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem 2rem; }
.fc-foot h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin: 0 0 .7rem; }
.fc-foot ul { list-style: none; padding: 0; margin: 0; }
.fc-foot li { padding: 2px 0; }
.fc-foot a { color: var(--fg); text-decoration: none; font-size: .92rem; }
.fc-foot a:hover { color: var(--accent); }

.search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); z-index: 50; max-height: 320px; overflow-y: auto; box-shadow: var(--shadow-md); display: none; }
.search-results.show { display: block; }
.search-results__item { display: block; padding: 8px 12px; color: var(--fg); text-decoration: none; font-size: .9rem; border-bottom: 1px solid var(--border); }
.search-results__item:last-child { border-bottom: 0; }
.search-results__item:hover { background: var(--code-bg); color: var(--accent); }
.search-results__empty { padding: 12px; color: var(--muted); font-size: .9rem; text-align: center; }
.media-search { position: relative; }

article table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
article thead th { background: color-mix(in srgb, var(--accent) 10%, var(--code-bg)); color: var(--fg); font-weight: 700; text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--border); font-size: .92rem; }
article tbody td { padding: .6rem 1rem; border-bottom: 1px solid var(--border); font-size: .94rem; }
article tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--accent) 3%, #fff); }
article tbody tr:last-child td { border-bottom: 0; }

/* ===== Family A — MEDIA PORTAL ===== */
body.media-portal {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.6; color: var(--fg); background: var(--bg);
  margin: 0;
}
body.media-portal h1, body.media-portal h2, body.media-portal h3, body.media-portal h4 {
  font-family: 'IBM Plex Sans', 'Inter', sans-serif;
  line-height: 1.2; font-weight: 700; letter-spacing: -.005em;
}
body.media-portal h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-tight); font-weight: 700; }
body.media-portal h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); }

.media-rubric-link { display: inline-block; color: var(--fg); text-decoration: none; font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; border-bottom: 2px solid transparent; }
.media-rubric-link:hover, .media-rubric-link.is-active { border-bottom-color: var(--accent); color: var(--accent); }

/* ===== Site 19 override — Слышу.Ясно ===== */
body.site19 {
  --s19-bg: #F4F7FB;
  --s19-bg-2: #E5ECF6;
  --s19-paper: #FFFFFF;
  --s19-ink: #0F172A;
  --s19-ink-2: #1F2A44;
  --s19-muted: #5A6478;
  --s19-line: #D6DEEA;
  --s19-blue: #1D4ED8;
  --s19-blue-2: #1E40AF;
  --s19-blue-lt: #BFD0F0;
  --s19-warm: #D97706;
  --s19-warm-2: #B45309;
  --s19-gold: #FBBF24;
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--s19-bg);
  color: var(--s19-ink);
}
body.site19 .media-main__wrap { padding: 0; max-width: none; }
body.site19 .media-main { padding: 0; }

.s19-topbar { background: #fff; border-bottom: 1px solid var(--s19-line); position: sticky; top: 0; z-index: 50; }
.s19-topbar__upper { background: #fff; }
.s19-topbar__wrap { max-width: 1280px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 24px; }
.s19-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--s19-ink); }
.s19-brand__mark { color: var(--s19-blue); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: color-mix(in srgb, var(--s19-blue) 10%, #fff); border-radius: 12px; }
.s19-brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.s19-brand__name { font-family: 'IBM Plex Sans', sans-serif; font-size: 1.12rem; font-weight: 700; letter-spacing: -.012em; color: var(--s19-ink); }
.s19-brand__tag { font-size: .72rem; color: var(--s19-muted); margin-top: 3px; letter-spacing: .03em; }
.s19-topbar__util { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.s19-search { display: flex; align-items: center; background: var(--s19-bg-2); border: 1px solid var(--s19-line); border-radius: 999px; padding: 4px 5px 4px 16px; }
.s19-search input { background: transparent; border: 0; color: var(--s19-ink); font-size: .88rem; padding: 6px 4px; min-width: 180px; outline: none; }
.s19-search input::placeholder { color: var(--s19-muted); }
.s19-search button { background: var(--s19-blue); color: #fff; border: 0; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: .9rem; }
.s19-btn { padding: 10px 20px; font-family: 'Inter', sans-serif; font-size: .88rem; font-weight: 700; border-radius: 999px; cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background var(--t-fast); }
.s19-btn--accent { background: var(--s19-blue); color: #fff; }
.s19-btn--accent:hover { background: var(--s19-blue-2); }

.s19-topbar__rubrics { background: #fff; border-top: 1px solid var(--s19-line); }
.s19-topbar__rubrics .s19-topbar__wrap { padding: 0 28px; }
.s19-topbar__rubrics .media-rubric-link {
  display: inline-block; padding: 12px 0; margin-right: 24px;
  font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 700;
  color: var(--s19-ink); text-decoration: none;
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 3px solid transparent;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.s19-topbar__rubrics .media-rubric-link:hover { color: var(--s19-blue); border-bottom-color: var(--s19-blue); }
.s19-topbar__rubrics .media-rubric-link:first-child { color: var(--s19-blue); }

.s19-hero { background: #fff; border-bottom: 1px solid var(--s19-line); position: relative; overflow: hidden; }
.s19-hero::before { content: ""; position: absolute; top: -120px; right: -160px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--s19-blue) 14%, transparent), transparent 70%); pointer-events: none; }
.s19-hero::after { content: ""; position: absolute; bottom: -100px; left: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--s19-gold) 16%, transparent), transparent 70%); pointer-events: none; }
.s19-hero__wrap { max-width: 1280px; margin: 0 auto; padding: 64px 28px 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: end; position: relative; z-index: 1; }
@media (max-width: 1000px) { .s19-hero__wrap { grid-template-columns: 1fr; padding: 48px 24px 36px; } }
.s19-hero__eyebrow { display: inline-block; padding: 6px 14px; background: color-mix(in srgb, var(--s19-blue) 10%, #fff); color: var(--s19-blue-2); font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--s19-blue) 25%, var(--s19-line)); }
.s19-hero h1 { font-family: 'IBM Plex Sans', sans-serif; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 18px; color: var(--s19-ink); font-weight: 700; }
.s19-hero h1 em { font-style: normal; color: var(--s19-blue); position: relative; }
.s19-hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--s19-gold); z-index: -1; opacity: .55; border-radius: 4px; }
.s19-hero__standfirst { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: var(--s19-ink-2); max-width: 56ch; margin: 0 0 22px; }
.s19-hero__chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.s19-hero__chips > span { font-size: .76rem; font-weight: 700; color: var(--s19-muted); text-transform: uppercase; letter-spacing: .12em; margin-right: 4px; }
.s19-hero__chips a { display: inline-block; padding: 6px 14px; background: #fff; color: var(--s19-ink); font-size: .86rem; font-weight: 600; border: 1px solid var(--s19-line); border-radius: 999px; text-decoration: none; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.s19-hero__chips a:hover { background: var(--s19-blue); color: #fff; border-color: var(--s19-blue); }

.s19-hero__feat { background: #fff; border: 1px solid var(--s19-line); border-top: 4px solid var(--s19-warm); padding: 26px 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); position: relative; }
.s19-hero__feat__num { position: absolute; top: -16px; right: 18px; padding: 5px 12px; background: var(--s19-warm); color: #fff; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; }
.s19-hero__feat__eyebrow { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--s19-warm-2); margin: 0 0 8px; }
.s19-hero__feat h2 { font-family: 'IBM Plex Sans', sans-serif; font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem); line-height: 1.2; margin: 0 0 10px; letter-spacing: -.014em; color: var(--s19-ink); font-weight: 700; }
.s19-hero__feat h2 a { color: inherit; text-decoration: none; }
.s19-hero__feat h2 a:hover { color: var(--s19-blue); }
.s19-hero__feat p { font-size: .96rem; color: var(--s19-ink-2); line-height: 1.55; margin: 0 0 12px; }
.s19-hero__feat__meta { font-size: .82rem; color: var(--s19-muted); }

.s19-stats { background: var(--s19-blue); color: #fff; }
.s19-stats__wrap { max-width: 1280px; margin: 0 auto; padding: 32px 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .s19-stats__wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .s19-stats__wrap { grid-template-columns: 1fr; } }
.s19-stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: rgba(255,255,255,.08); border-radius: var(--radius); border-left: 3px solid var(--s19-gold); }
.s19-stat__num { font-family: 'IBM Plex Sans', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--s19-gold); letter-spacing: -.014em; }
.s19-stat__txt { font-size: .86rem; color: #d6e0f3; line-height: 1.5; }

.s19-section { max-width: 1280px; margin: 0 auto; padding: 56px 28px; }
.s19-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--s19-line); position: relative; }
.s19-section__head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 80px; height: 3px; background: var(--s19-blue); }
.s19-section__kicker { display: inline-block; font-family: 'Inter', sans-serif; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--s19-blue-2); margin-bottom: 6px; }
.s19-section__title { font-family: 'IBM Plex Sans', sans-serif; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin: 0; color: var(--s19-ink); letter-spacing: -.018em; font-weight: 700; }
.s19-section__sub { color: var(--s19-muted); font-size: .94rem; max-width: 60ch; margin: 6px 0 0; }

.s19-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 1000px) { .s19-grid { grid-template-columns: 1fr; } }
.s19-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 720px) { .s19-cards { grid-template-columns: 1fr; } }
.s19-card { background: var(--s19-paper); border: 1px solid var(--s19-line); text-decoration: none; color: inherit; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.s19-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--s19-blue) 35%, var(--s19-line)); }
.s19-card__cover { aspect-ratio: 16/10; overflow: hidden; background: var(--s19-bg-2); border-bottom: 1px solid var(--s19-line); }
.s19-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.s19-card:hover .s19-card__cover img { transform: scale(1.04); }
.s19-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.s19-card__eyebrow { font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--s19-blue-2); }
.s19-card__title { font-family: 'IBM Plex Sans', sans-serif; font-size: 1.22rem; line-height: 1.22; margin: 2px 0 6px; color: var(--s19-ink); letter-spacing: -.012em; font-weight: 700; }
.s19-card__title a { color: inherit; text-decoration: none; }
.s19-card__title a:hover { color: var(--s19-blue); }
.s19-card__deck { font-size: .92rem; line-height: 1.5; color: var(--s19-ink-2); margin: 0 0 10px; flex: 1; }
.s19-card__meta { display: flex; gap: 10px; align-items: center; font-size: .78rem; color: var(--s19-muted); margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--s19-line); }
.s19-card__meta .dot { width: 3px; height: 3px; background: var(--s19-blue); border-radius: 50%; }

.s19-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 130px; }
@media (max-width: 1000px) { .s19-side { position: static; } }
.s19-widget { padding: 22px; background: var(--s19-paper); border: 1px solid var(--s19-line); border-top: 4px solid var(--s19-blue); border-radius: var(--radius); }
.s19-widget h3 { font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; margin: 0 0 14px; color: var(--s19-ink); letter-spacing: -.008em; font-weight: 700; }
.s19-widget ol { padding-left: 0; margin: 0; counter-reset: pop; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.s19-widget ol li { counter-increment: pop; padding-left: 32px; position: relative; font-size: .92rem; line-height: 1.4; }
.s19-widget ol li::before { content: counter(pop, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; color: var(--s19-blue); font-weight: 700; }
.s19-widget ol li a { color: var(--s19-ink); text-decoration: none; }
.s19-widget ol li a:hover { color: var(--s19-blue); }
.s19-widget p { font-size: .92rem; color: var(--s19-ink-2); line-height: 1.5; margin: 0; }
.s19-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.s19-tags a { padding: 4px 12px; background: var(--s19-bg); color: var(--s19-ink); font-size: .78rem; font-weight: 600; text-decoration: none; border-radius: 999px; border: 1px solid var(--s19-line); }
.s19-tags a:hover { background: var(--s19-blue); color: #fff; border-color: var(--s19-blue); }
.s19-trust { display: flex; flex-wrap: wrap; gap: 6px; }
.s19-trust span { padding: 5px 12px; background: color-mix(in srgb, var(--s19-blue) 10%, #fff); color: var(--s19-blue-2); font-size: .76rem; font-weight: 700; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--s19-blue) 22%, var(--s19-line)); }

.s19-cta { background: linear-gradient(135deg, var(--s19-blue) 0%, var(--s19-blue-2) 100%); color: #fff; position: relative; overflow: hidden; }
.s19-cta::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px); pointer-events: none; }
.s19-cta::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--s19-gold) 25%, transparent), transparent 70%); pointer-events: none; }
.s19-cta__wrap { max-width: 1280px; margin: 0 auto; padding: 64px 28px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 900px) { .s19-cta__wrap { grid-template-columns: 1fr; } }
.s19-cta h2 { font-family: 'IBM Plex Sans', sans-serif; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin: 0 0 14px; color: #fff; letter-spacing: -.014em; font-weight: 700; }
.s19-cta p { color: #d6e0f3; font-size: 1.02rem; line-height: 1.6; max-width: 56ch; margin: 0 0 18px; }
.s19-cta__trust { display: flex; flex-wrap: wrap; gap: 8px; }
.s19-cta__trust span { padding: 5px 12px; background: rgba(255,255,255,.14); color: #fff; font-size: .78rem; font-weight: 700; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); }
.s19-cta__form { background: rgba(15,23,42,.45); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); padding: 28px; border-radius: var(--radius-lg); }
.s19-cta__form-head { font-family: 'IBM Plex Sans', sans-serif; font-size: 1.18rem; color: #fff; margin: 0 0 12px; font-weight: 700; }
.s19-cta__form .subscribe-form { background: transparent; border: 0; padding: 0; margin: 0; }
.s19-cta__form .subscribe-form label { color: #d6e0f3; }
.s19-cta__form .subscribe-form input[type="email"] { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); }
.s19-cta__form .subscribe-form input[type="email"]::placeholder { color: #b5c5e0; }
.s19-cta__form .subscribe-form input[type="email"]:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.s19-cta__form button[type="submit"] { background: var(--s19-gold); color: var(--s19-ink); }
.s19-cta__form button[type="submit"]:hover { background: #F59E0B; }
.s19-cta__form .form-checkbox-wrap span, .s19-cta__form .form-checkbox-wrap a { color: #d6e0f3; }
.s19-cta__form .form-note { color: #b5c5e0; }

.s19-footer { background: var(--s19-ink); color: #c5d0e0; }
.s19-footer__wrap { max-width: 1280px; margin: 0 auto; padding: 56px 28px 22px; }
.s19-footer__top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; padding-bottom: 28px; border-bottom: 1px solid #20283e; }
@media (max-width: 760px) { .s19-footer__top { grid-template-columns: 1fr; } }
.s19-footer .s19-brand { color: #fff; }
.s19-footer .s19-brand__mark { background: rgba(255,255,255,.1); color: var(--s19-gold); }
.s19-footer__lede { color: #9eaac3; font-size: .9rem; line-height: 1.55; margin: 14px 0 0; max-width: 38ch; }
.s19-footer__top .fc-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 760px) { .s19-footer__top .fc-foot { grid-template-columns: repeat(2, 1fr); } }
.s19-footer__top .fc-foot h4 { font-family: 'IBM Plex Sans', sans-serif; font-size: .82rem; text-transform: uppercase; color: var(--s19-gold); margin: 0 0 12px; letter-spacing: .04em; font-weight: 700; }
.s19-footer__top .fc-foot a { color: #c5d0e0; text-decoration: none; font-size: .88rem; display: block; padding: 3px 0; }
.s19-footer__top .fc-foot a:hover { color: #fff; }
.s19-footer__top .fc-foot ul { list-style: none; padding: 0; margin: 0; }
.s19-footer__bot { padding-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.s19-footer__bot p { margin: 0; font-size: .8rem; color: #9eaac3; }
.s19-footer__discl { max-width: 60ch; }
.s19-footer__bot a { color: var(--s19-gold); }

/* Article page */
.s19-article-grid { max-width: 1280px; margin: 0 auto; padding: 36px 28px 56px; display: grid; grid-template-columns: 2fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 1000px) { .s19-article-grid { grid-template-columns: 1fr; } }
.s19-article { background: var(--s19-paper); border: 1px solid var(--s19-line); padding: 36px 40px 44px; border-radius: var(--radius-lg); }
.s19-article .crumbs { color: var(--s19-muted); font-size: .82rem; margin-bottom: 14px; letter-spacing: .02em; }
.s19-article .crumbs a { color: var(--s19-muted); text-decoration: none; }
.s19-article .crumbs a:hover { color: var(--s19-blue); }
.s19-article__eyebrow { display: inline-block; padding: 4px 12px; background: color-mix(in srgb, var(--s19-blue) 10%, #fff); color: var(--s19-blue-2); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--s19-blue) 25%, var(--s19-line)); }
.s19-article h1 { font-family: 'IBM Plex Sans', sans-serif; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.1; margin: 0 0 14px; color: var(--s19-ink); letter-spacing: -.018em; font-weight: 700; }
.s19-article__standfirst { font-size: clamp(1.02rem, 1rem + .3vw, 1.18rem); line-height: 1.6; color: var(--s19-ink-2); margin: 0 0 14px; }
.s19-article__meta { font-size: .82rem; color: var(--s19-muted); margin-bottom: 18px; }
.s19-article__cover { aspect-ratio: 16/9; margin: 18px 0 26px; border: 1px solid var(--s19-line); overflow: hidden; border-radius: var(--radius); }
.s19-article__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s19-article__body { font-family: 'Inter', sans-serif; font-size: 1.04rem; line-height: 1.75; color: var(--s19-ink); }
.s19-article__body h2 { font-family: 'IBM Plex Sans', sans-serif; font-size: 1.45rem; margin-top: 2rem; color: var(--s19-ink); letter-spacing: -.014em; font-weight: 700; }
.s19-article__body h3 { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 1.16rem; margin-top: 1.6rem; color: var(--s19-ink); }
.s19-article__body a { color: var(--s19-blue); text-decoration: underline; text-underline-offset: 2px; }
.s19-article__body a:hover { color: var(--s19-blue-2); }
body.site19 .summary-box { background: color-mix(in srgb, var(--s19-blue) 6%, #fff); border-left: 4px solid var(--s19-blue); border-radius: var(--radius); }

.s19-page-wrap { max-width: 880px; margin: 36px auto 0; padding: 0 28px 64px; }
.s19-page-wrap h1 { font-family: 'IBM Plex Sans', sans-serif; letter-spacing: -.014em; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); color: var(--s19-ink); font-weight: 700; }
.s19-page-wrap .crumbs { margin-bottom: 16px; font-size: .82rem; color: var(--s19-muted); }
.s19-page-wrap .crumbs a { color: var(--s19-muted); }
.s19-page-wrap .subscribe-form { max-width: 520px; }
body.site19 .sources { border-top: 2px solid var(--s19-blue); margin-top: 36px; padding-top: 22px; }
body.site19 .sources h3 { font-family: 'IBM Plex Sans', sans-serif; font-size: 1.1rem; color: var(--s19-ink); letter-spacing: -.008em; font-weight: 700; }
