@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/749a308406a63378.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/1ab1ad55902b85eb.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:400;font-display:swap;src:url(/assets/fonts/749a308406a63378.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/1ab1ad55902b85eb.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(/assets/fonts/749a308406a63378.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/1ab1ad55902b85eb.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:700;font-display:swap;src:url(/assets/fonts/749a308406a63378.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/1ab1ad55902b85eb.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:900;font-display:swap;src:url(/assets/fonts/749a308406a63378.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/1ab1ad55902b85eb.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:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/76dcfc734ec0d6ac.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/81401990b6174b86.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:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/76dcfc734ec0d6ac.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/81401990b6174b86.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:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/76dcfc734ec0d6ac.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/81401990b6174b86.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:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/76dcfc734ec0d6ac.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/81401990b6174b86.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:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/76dcfc734ec0d6ac.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/81401990b6174b86.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}
:root{--color-bg:#ffffff;--color-surface:#f6f7f9;--color-surface-2:#eceff3;--color-text:#14171c;--color-text-muted:#555d6b;--color-border:#dde1e7;--color-primary:#1f5eff;--color-primary-contrast:#ffffff;--color-accent:#ffb020;--color-accent-contrast:#14171c;--color-focus:#1f5eff;--font-heading:"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--radius-sm:8px;--radius-md:14px;--radius-lg:24px;--radius-pill:999px;--container:1200px;--container-narrow:760px;--shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);--shadow-md:0 12px 32px -12px rgba(16,24,40,.22);--header-h:68px}
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.6;text-rendering:optimizeLegibility}img{max-width:100%;height:auto;display:block}a{color:var(--color-primary)}h1,h2,h3{font-family:var(--font-heading);line-height:1.15;margin:0 0 .5em;overflow-wrap:anywhere;letter-spacing:-.01em}h1{font-size:clamp(2rem,1.4rem + 3vw,3.6rem);letter-spacing:-.02em}h2{font-size:clamp(1.6rem,1.25rem + 1.6vw,2.5rem)}h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem)}p{margin:0 0 1em}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:4px}.menu{margin-inline-start:auto}.menu>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--color-border);cursor:pointer}.menu>summary::-webkit-details-marker{display:none}.menu__panel{position:absolute;inset-inline:0;inset-block-start:var(--header-h);background:var(--color-bg);border-block-end:1px solid var(--color-border);padding:12px clamp(16px,4vw,32px) 20px;box-shadow:var(--shadow-md)}.menu__panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}.menu__panel a{display:flex;align-items:center;min-height:48px;padding-inline:8px;color:var(--color-text);text-decoration:none;font-weight:500;border-radius:var(--radius-sm)}@media (min-width:960px){.menu{display:none}}.hero__grid{display:grid;gap:clamp(28px,5vw,64px);align-items:center}.hero__points{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}.hero__points li{display:flex;gap:10px;align-items:flex-start;font-weight:500}.hero__points svg{flex:none;margin-block-start:3px;color:var(--color-primary)}@media (min-width:900px){.hero__grid{grid-template-columns:1.05fr .95fr}}body{padding-block-end:76px}@media (min-width:960px){body{padding-block-end:0}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

picture.media-picture{display:contents}h1,h2,h3{overflow-wrap:anywhere}.rah-lg{display:block;height:36px;width:auto;max-width:190px;object-fit:contain}.rah-summary-sec{padding-block:clamp(16px,3vw,32px) 0}.rah-toc-sec{padding-block:clamp(12px,2vw,24px) 0}.rah-meta{font-size:.9rem;margin:.25em 0 1em}.table-wrap{overflow-x:auto}
/* =========================================================
   Core — dark live-cam landing (single column, 780px shell)
   Metrics follow the browser measurements of the reference:
   type scale 64/64/32/16 (phone 32/24/20/16), weight 700 for
   headings, 600 for buttons, pill radius, 124px section rhythm
   ========================================================= */

:root {
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 42px;
  --radius-media: 16px;
  --radius-pill: 9999px;
  --header-h: 87px;
  --gap-block: 124px;
  --gap-head: 20px;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-bg, #000000);
  color: var(--color-text, #b8b8b8);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  font-synthesis: weight style;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
[hidden] { display: none !important; }

[id] { scroll-margin-top: calc(var(--header-h, 87px) + 20px); }

::selection { background: rgba(237, 33, 58, 0.4); color: #ffffff; }

/* ------------------------------ Typography ------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-text-muted, #ffffff);
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
}

/* 1440 → 64/64/32, 390 → 32/24/20 */
h1 { font-size: clamp(32px, calc(3.05vw + 20px), 64px); }
h2 { font-size: clamp(24px, calc(3.81vw + 9px), 64px); }
h3 { font-size: clamp(20px, calc(1.14vw + 15.5px), 32px); }
h4 { font-size: clamp(18px, 2vw, 24px); }

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ed213a;
}

.lead { font-size: 16px; line-height: 1.5; color: var(--color-text, #b8b8b8); }
.muted { color: var(--color-text, #b8b8b8); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

/* ------------------------------ Layout ------------------------------ */
.page { width: 100%; max-width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.page__main { flex: 1 0 auto; width: 100%; max-width: 100%; }

.container {
  width: 100%;
  max-width: calc(var(--container, 780px) + 40px);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Rhythm between blocks: 62 + 62 = 124px (independent of wrappers) */
.section,
.page__main [data-block] { padding-block: calc(var(--gap-block, 124px) / 2); margin-block: 0; }

.section__head { text-align: center; }

.section__title {
  font-size: clamp(24px, calc(3.81vw + 9px), 64px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  color: var(--color-text-muted, #ffffff);
  text-wrap: balance;
}

.section__lead {
  max-width: 500px;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text, #b8b8b8);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: center;
}

.media {
  border-radius: var(--radius-media, 16px);
  overflow: hidden;
  background: #111113;
}
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------ Focus & a11y ------------------------------ */
:focus-visible {
  outline: 2px solid var(--color-focus, #ed213a);
  outline-offset: 3px;
  border-radius: 10px;
}

.rah-sk {
  position: fixed;
  left: 20px;
  top: -80px;
  z-index: 300;
  padding: 12px 20px;
  border-radius: var(--radius-pill, 9999px);
  background: #ffffff;
  color: #000000;
  font-weight: 600;
  transition: top 0.2s ease;
}
.rah-sk:focus { top: 16px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.no-scroll { overflow: hidden; }

/* ------------------------------ Icons ------------------------------ */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: currentColor;
}
[data-icon] svg { width: 100%; height: 100%; }

/* ------------------------------ Buttons ------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 51px;
  padding: 16px;
  border: 0;
  border-radius: var(--radius-pill, 9999px);
  font: 600 16px/normal var(--font-ui);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  background-image: linear-gradient(93.5deg, rgb(147, 41, 30) 0.82%, rgb(167, 22, 30) 39.12%, rgb(237, 33, 58) 94.55%);
  color: #ffffff;
}@media (hover:hover){.btn--primary:hover{
  filter: brightness(1.12);
  box-shadow: 0 8px 24px rgba(237, 33, 58, 0.35);
  transform: translateY(-1px);
}}
.btn--primary:active { transform: scale(0.98); }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-border, #2a2a2a);
  color: #ffffff;
}@media (hover:hover){.btn--ghost:hover{ background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }}

.btn--dark {
  background-image: linear-gradient(276.16deg, rgb(17, 17, 19) 1.49%, rgb(51, 51, 51) 101.12%);
  color: #ffffff;
}@media (hover:hover){.btn--dark:hover{ filter: brightness(1.25); transform: translateY(-1px); }}

.btn--lg { min-height: 56px; }
.btn--block { width: 100%; }

.btn__icon { color: currentColor; }
.btn [data-icon],
.btn .btn__icon { width: 14px; height: 14px; flex: 0 0 auto; }

/* ------------------------------ Links ------------------------------ */
.link {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(237, 33, 58, 0.55);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}@media (hover:hover){.link:hover{ text-decoration-color: #ed213a; }}

/* ------------------------------ Header ------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  background: transparent;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.site-header__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
  height: var(--header-h, 87px);
}

.site-header__actions { display: flex; align-items: center; gap: 12px; }

.site-header .nav-toggle { display: none; }
.site-header__actions .btn:not(.btn--primary) { display: none; }
.site-header__actions .btn--primary { min-height: 51px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rah-mk { display: inline-flex; width: 24px; height: 24px; color: #ffffff; }
.rah-mk svg { width: 100%; height: 100%; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-pill, 9999px);
  color: #ffffff;
  cursor: pointer;
}
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

.nav-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(380px, 88vw);
  padding: 20px 24px 24px;
  overflow-y: auto;
  background: #0a0a0b;
  border-left: 1px solid var(--color-border, #2a2a2a);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.38s;
}
.nav-panel.is-open { transform: none; visibility: visible; }
.nav-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.nav-panel__cta { width: 100%; }

.nav ul { display: flex; flex-direction: column; gap: 4px; }
.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  color: #ffffff;
  font-weight: 600;
  transition: background 0.2s ease;
}@media (hover:hover){.nav a:hover{ background: rgba(255, 255, 255, 0.06); }}
.nav a.is-active { background: rgba(237, 33, 58, 0.14); }
.nav a [data-icon] { width: 20px; height: 20px; color: var(--color-text, #b8b8b8); }

.langs { display: flex; flex-wrap: wrap; gap: 8px; }
.langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: var(--radius-pill, 9999px);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ------------------------------ Footer ------------------------------ */
.site-footer {
  margin-top: 62px;
  padding: 60px 0 40px;
  border-top: 1px solid var(--color-border, #2a2a2a);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-grid h2 {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col span { font-size: 15px; color: var(--color-text, #b8b8b8); transition: color 0.2s ease; }@media (hover:hover){.footer-col a:hover{ color: #ffffff; }}
.footer-tagline { margin-top: 14px; font-size: 15px; max-width: 280px; }
.footer-note { margin-top: 10px; font-size: 13px; color: #7a7a7a; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border, #2a2a2a);
  font-size: 14px;
}
.footer-bottom__note { color: #7a7a7a; }

/* No sticky mobile bar on the reference */
.mcta { display: none !important; }

/* ------------------------------ Prose ------------------------------ */
.prose { font-size: 16px; line-height: 1.6; color: var(--color-text, #b8b8b8); }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: clamp(22px, 3.2vw, 40px); }
.prose h3 { font-size: clamp(19px, 2.4vw, 24px); }
.prose ul, .prose ol { padding-left: 22px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 10px; }
.prose a { color: #ffffff; text-decoration: underline; text-decoration-color: rgba(237, 33, 58, 0.6); text-underline-offset: 4px; }
.prose blockquote { margin: 0; padding: 16px 20px; border-left: 3px solid #ed213a; background: rgba(255, 255, 255, 0.03); }
.prose .table-wrap { overflow-x: auto; max-width: 100%; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 12px 16px; border-bottom: 1px solid var(--color-border, #2a2a2a); text-align: left; }
.prose th { color: #ffffff; font-weight: 600; }
.prose img, .prose video { border-radius: var(--radius-media, 16px); }

/* ------------------------------ Motion helpers ------------------------------ */
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes spin { 100% { transform: rotate(1turn); } }
.is-pulsing { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ------------------------------ Breakpoints ------------------------------ */
@media (max-width: 767px) {
  .section,
  .page__main [data-block] { padding-block: 40px; }

  .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .section__lead { margin-top: 16px; }

  .site-footer { margin-top: 40px; padding: 40px 0 32px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 640px) {
  .site-header__in { justify-content: center; height: 64px; }
  .site-header__actions { display: none; }}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }}
/* =========================================================
   Home blocks — dark live-cam landing
   Blocks in this file:
     hero / how it works / content types / models for every
     taste / features card / FAQ accordion (script states)
   ========================================================= */

:root {
  --container: 780px;
  --container-wide: 880px;
  --grad-btn: linear-gradient(93.5deg, #93291e 0.82%, #a7161e 39.12%, #ed213a 94.55%);
  --grad-card: linear-gradient(276.16deg, #111113 1.49%, #333333 101.12%);
  --glow-a: rgba(167, 22, 30, 0.88);
  --glow-b: rgba(147, 41, 30, 0.82);
  --glow-c: rgba(90, 10, 16, 0.72);
}

.container.container--wide { max-width: calc(var(--container-wide) + 40px); }

/* ---------------------------------------------------------
   Background glow field (blurred crimson light spots)
   Clipped inside a full-width layer → never widens the page
   --------------------------------------------------------- */
.hero { position: relative; }

.glow-field {
  position: absolute;
  top: -320px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  height: 4400px;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(140px);
  will-change: transform;
  animation: glow-float 18s ease-in-out infinite;
}

.blob--1 {
  width: 860px; height: 860px; top: 120px; left: -6%; opacity: 0.78;
  background: radial-gradient(circle at 50% 50%, var(--glow-a) 0%, var(--glow-c) 46%, rgba(0, 0, 0, 0) 72%);
}
.blob--2 {
  width: 780px; height: 780px; top: -40px; right: -8%; opacity: 0.70;
  animation-duration: 22s; animation-delay: -6s;
  background: radial-gradient(circle at 50% 50%, var(--glow-b) 0%, var(--glow-c) 48%, rgba(0, 0, 0, 0) 74%);
}
.blob--3 {
  width: 720px; height: 720px; top: 1520px; left: -14%; opacity: 0.62;
  animation-duration: 20s; animation-delay: -3s;
  background: radial-gradient(circle at 50% 50%, var(--glow-a) 0%, var(--glow-c) 50%, rgba(0, 0, 0, 0) 74%);
}
.blob--4 {
  width: 900px; height: 900px; top: 2360px; left: -18%; opacity: 0.58;
  animation-duration: 24s; animation-delay: -11s;
  background: radial-gradient(circle at 50% 50%, var(--glow-b) 0%, var(--glow-c) 52%, rgba(0, 0, 0, 0) 76%);
}
.blob--5 {
  width: 640px; height: 640px; top: 3260px; right: -6%; opacity: 0.50;
  animation-duration: 19s; animation-delay: -8s;
  background: radial-gradient(circle at 50% 50%, var(--glow-a) 0%, var(--glow-c) 52%, rgba(0, 0, 0, 0) 76%);
}

@keyframes glow-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(40px, -30px, 0) scale(1.08); }
}

/* ---------------------------------------------------------
   Hero — centred headline, lead, red pill CTA, wide media
   --------------------------------------------------------- */
.hero { padding-top: 44px; }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  max-width: 560px;
  text-wrap: balance;
}

.hero__lead {
  margin-top: 20px;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}

/* Row wrapper used for the hero CTA and for single CTAs in cat rows */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hero__actions {
  justify-content: center;
  margin-top: 28px;
}

.hero__cta { min-height: 56px; }

/* Wide media of the first screen: 3:2, radius 42px, silent looped clip */
.hero__media {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 40px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg, 42px);
  overflow: hidden;
  background-color: #0d0d0f;
  background-image: var(--grad-card);
}

.hero__media > img,
.hero__media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video { z-index: 1; }

/* ---------------------------------------------------------
   How it works — text column next to a square media
   --------------------------------------------------------- */
.how { position: relative; }

.how__grid { align-items: center; min-width: 0; }

.how__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Headline first, then the small lead line, then the copy */
.how__title {
  order: 1;
  font-size: clamp(24px, 5.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text-muted, #ffffff);
  text-wrap: balance;
}

.how__intro {
  order: 2;
  margin-top: 20px;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text, #b8b8b8);
}

.how__body {
  order: 3;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.how__body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}

.how__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg, 42px);
}

/* ---------------------------------------------------------
   Content types — centred head + square photo / arrow list
   --------------------------------------------------------- */
.ctypes { position: relative; }

.ctypes__head { text-align: center; }

.ctypes__title {
  font-size: clamp(24px, 5.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text-muted, #ffffff);
  text-wrap: balance;
}

.ctypes__lead {
  max-width: 500px;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}

.ctypes__grid {
  margin-top: 60px;
  gap: 60px;
}

.ctypes__media { aspect-ratio: 1 / 1; border-radius: var(--radius-lg, 42px); }

.ctypes__list {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ctypes__item { min-width: 0; }

.ctypes__head-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ctypes__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 14px;
  flex: 0 0 auto;
  color: #ed213a;
}
.ctypes__arrow svg { width: 100%; height: 100%; }

.ctypes__name {
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-text-muted, #ffffff);
}

.ctypes__text {
  margin-top: 16px;
  max-width: 380px;
  padding-left: 34px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}

/* ---------------------------------------------------------
   Models for every taste — centred head + chessboard rows
   --------------------------------------------------------- */
.models { position: relative; }

.models__head { margin-bottom: 60px; }

.models__title {
  font-size: clamp(24px, 5.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text-muted, #ffffff);
  text-wrap: balance;
}

.models__lead {
  max-width: 500px;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}

.models__list { display: flex; flex-direction: column; }

.cat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  align-items: center;
}

.cat-row + .cat-row { margin-top: 100px; }

.cat-row:nth-child(even) .cat-row__media { order: 2; }

.cat-row__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg, 42px);
}

.cat-row__body { min-width: 0; }

.cat-row__name {
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-text-muted, #ffffff);
}

.cat-row__text {
  margin-top: 20px;
  max-width: 360px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}

.cat-row__cta {
  margin-top: 24px;
  min-height: 51px;
}

.cat-row .btn-row { margin-top: 24px; }

/* ---------------------------------------------------------
   Features card with 3D megaphone
   --------------------------------------------------------- */
.features__card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 780px;
  min-height: 337px;
  margin-inline: auto;
  padding: 44px 48px;
  border-radius: var(--radius-lg, 42px);
  background-image: var(--grad-card);
}

.features__art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.features__art img {
  width: 240px;
  height: auto;
  transform-origin: 70% 60%;
  animation: megaphone-sway 5s ease-in-out infinite;
  will-change: transform;
}

@keyframes megaphone-sway {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-6px); }
}

.features__title {
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-text-muted, #ffffff);
}

.features__text {
  margin-top: 16px;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}

.features__actions { margin-top: 28px; }
.features__cta { min-height: 56px; }

/* ---------------------------------------------------------
   FAQ accordion — states driven by script.home.js
   root: [data-js="faq"], buttons: [data-js="faq-q"],
   the script flips aria-expanded and adds .is-open to the panel
   --------------------------------------------------------- */
[data-js="faq"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

[data-js="faq-q"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 16px 16px 16px 24px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--color-surface, #141416);
  color: var(--color-text-muted, #ffffff);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}@media (hover:hover){[data-js="faq-q"]:hover{ background: #1b1b1f; }}

/* round chevron button on the right edge of every question */
[data-js="faq-q"]::after {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5l5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 12px 8px;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.2s ease;
}

[data-js="faq-q"][aria-expanded="true"] { background: #1b1b1f; }

[data-js="faq-q"][aria-expanded="true"]::after {
  transform: rotate(180deg);
  border-color: rgba(237, 33, 58, 0.55);
}

/* panel is revealed by the class the script toggles */
[data-js="faq"] .is-open {
  display: block;
  padding: 4px 24px 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text, #b8b8b8);
}

/* ---------------------------------------------------------
   Breakpoints
   --------------------------------------------------------- */
@media (max-width: 1279px) {
  .ctypes__grid,
  .cat-row { gap: 40px; }
}

@media (max-width: 1023px) {
  .features__card {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 32px;
    padding: 36px 32px;
  }
  .features__art img { width: 180px; }}

@media (max-width: 767px) {
  .hero { padding-top: 28px; }
  .hero__title { max-width: 340px; }
  .hero__lead { max-width: 340px; }
  .hero__actions { margin-top: 24px; }
  .hero__media { margin-top: 32px; border-radius: 24px; }

  .how__text { text-align: center; }
  .how__intro { max-width: none; margin-inline: auto; }
  .how__body { gap: 20px; }
  .how__media { border-radius: 24px; }

  .ctypes__lead { max-width: none; }
  .ctypes__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 32px;
  }
  .ctypes__media { border-radius: 24px; }
  .ctypes__list { gap: 32px; }
  .ctypes__head-row { justify-content: center; }
  .ctypes__text { padding-left: 0; max-width: none; text-align: center; }

  .models__head { margin-bottom: 40px; }
  .models__lead { max-width: none; }
  .cat-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    text-align: center;
  }
  .cat-row:nth-child(even) .cat-row__media { order: 0; }
  .cat-row + .cat-row { margin-top: 56px; }
  .cat-row__media { border-radius: 24px; }
  .cat-row__text { max-width: none; margin-top: 12px; }
  .cat-row__cta { margin-top: 20px; min-width: 132px; }
  .cat-row .btn-row { margin-top: 20px; justify-content: center; }

  .features__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    max-width: none;
    min-height: 0;
    padding: 28px 20px 32px;
    border-radius: 42px;
    text-align: center;
  }
  .features__art img { width: 200px; }
  .features__text { max-width: none; margin-inline: auto; }
  .features__actions { margin-top: 24px; }
  .features__cta { width: 100%; min-height: 70px; }

  [data-js="faq-q"] {
    min-height: 56px;
    padding: 14px 14px 14px 20px;
    font-size: 15px;
  }
  [data-js="faq"] .is-open { padding: 4px 20px 12px; font-size: 14px; }

  .glow-field { height: 3600px; }
  .blob { filter: blur(90px); }
  .blob--1 { width: 400px; height: 400px; left: -20%; }
  .blob--2 { width: 400px; height: 400px; right: -22%; top: 60px; }
  .blob--3 { width: 400px; height: 400px; top: 1400px; left: -24%; }
  .blob--4 { width: 420px; height: 420px; top: 2200px; left: -22%; }
  .blob--5 { width: 400px; height: 400px; top: 3000px; right: -18%; }}
/* =========================================================
   Content blocks — inner pages
   Same shell, palette and rhythm as the home page
   ========================================================= */

:root {
  --container: 780px;
  --container-wide: 880px;
  --grad-btn: linear-gradient(93.5deg, #93291e 0.82%, #a7161e 39.12%, #ed213a 94.55%);
  --grad-card: linear-gradient(276.16deg, #111113 1.49%, #333333 101.12%);
  --hairline: rgba(255, 255, 255, 0.05);
  --crimson: #ed213a;
}

html { interpolate-size: allow-keywords; }

/* ---------------- Shared helpers ---------------- */
.section--alt {
  background-image: radial-gradient(58% 44% at 50% 0%, rgba(167, 22, 30, 0.16) 0%, rgba(0, 0, 0, 0) 72%);
  background-repeat: no-repeat;
}

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------------- Page header ---------------- */
.page-header { padding-block: 56px 0; }

.crumbs { display: flex; justify-content: center; margin-bottom: 32px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text, #b8b8b8);
}
.crumbs li + li::before { content: "/"; color: #55555a; }
.crumbs a { color: var(--color-text, #b8b8b8); transition: color 0.2s ease; }@media (hover:hover){.crumbs a:hover{ color: var(--color-text-muted, #ffffff); }}
.crumbs [aria-current="page"] { color: var(--color-text-muted, #ffffff); }

.page-header__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  justify-items: center;
  text-align: center;
}

.page-header__text { max-width: 720px; }
.page-header h1 {
  font-size: clamp(32px, 5.2vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.page-header__lead {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}
.page-header .btn-row { margin-top: 28px; justify-content: center; }

.page-header__media {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 42px);
  overflow: hidden;
  background-image: var(--grad-card);
}
.page-header__media img,
.page-header__media video { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- Long-form text ---------------- */
.prose-title {
  margin-bottom: 32px;
  font-size: clamp(24px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

.prose--content { max-width: 720px; margin-inline: auto; }
.prose--content h2 { font-size: clamp(22px, 3vw, 40px); line-height: 1.15; margin-top: 44px; }
.prose--content h3 { font-size: clamp(19px, 2.4vw, 28px); line-height: 1.25; margin-top: 32px; }
.prose--content h2:first-child,
.prose--content h3:first-child { margin-top: 0; }

.prose--legal { max-width: 720px; margin-inline: auto; font-size: 15px; }
.prose--legal h2 { font-size: clamp(21px, 2.6vw, 32px); line-height: 1.18; margin-top: 40px; }
.prose--legal h3 { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.25; margin-top: 28px; }
.prose--legal h2:first-child,
.prose--legal h3:first-child { margin-top: 0; }

.prose .table-wrap {
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 16px;
  overflow: hidden;
}
.prose .table-wrap table { min-width: 520px; }
.prose th { background: rgba(255, 255, 255, 0.035); }
.prose tbody tr:last-child td { border-bottom: 0; }

/* ---------------- Feature cards ---------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 20px;
  margin-top: 60px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  border-radius: var(--radius-md, 24px);
  background-image: var(--grad-card);
  border: 1px solid var(--hairline);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}@media (hover:hover){.card:hover{
  transform: translateY(-4px);
  border-color: rgba(237, 33, 58, 0.38);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}}

[data-icon].card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(237, 33, 58, 0.16);
  color: var(--crimson);
}
[data-icon].card__icon svg { width: 22px; height: 22px; }

.card h3 { font-size: clamp(19px, 2.4vw, 32px); line-height: 1.25; color: var(--color-text-muted, #ffffff); }
.card p { font-size: 15px; line-height: 1.6; color: var(--color-text, #b8b8b8); }

/* ---------------- Steps ---------------- */
.steps {
  display: grid;
  gap: 20px;
  margin-top: 60px;
  counter-reset: step;
}

.steps > li {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 10px;
  align-items: center;
  padding: 28px 32px;
  border-radius: var(--radius-md, 24px);
  background-image: var(--grad-card);
  border: 1px solid var(--hairline);
  transition: transform 0.25s ease, border-color 0.25s ease;
}@media (hover:hover){.steps > li:hover{ transform: translateY(-3px); border-color: rgba(237, 33, 58, 0.35); }}

.steps > li::before {
  counter-increment: step;
  content: counter(step);
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(237, 33, 58, 0.16);
  color: var(--crimson);
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.steps > li h3 { grid-column: 2; grid-row: 1; color: var(--color-text-muted, #ffffff); }
.steps > li p { grid-column: 2; grid-row: 2; font-size: 16px; line-height: 1.6; color: var(--color-text, #b8b8b8); }

/* ---------------- FAQ accordion ---------------- */
[data-block="faq"] .container {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  gap: 60px;
  align-items: start;
}

[data-block="faq"] .section__head { text-align: left; }

.faq { min-width: 0; }

.faq__item { border-bottom: 1px solid var(--color-border, #2a2a2a); }
.faq__item:first-child { border-top: 1px solid var(--color-border, #2a2a2a); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 44px;
  padding: 28px 0;
  list-style: none;
  cursor: pointer;
  color: var(--color-text-muted, #ffffff);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }@media (hover:hover){.faq__q:hover{ color: #ffffff; }}
.faq__q-text { min-width: 0; }

[data-icon].faq__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #b8b8b8;
  color: #000000;
  transition: transform 0.3s ease, background 0.2s ease;
}
[data-icon].faq__icon svg { width: 14px; height: 9px; }@media (hover:hover){.faq__q:hover .faq__icon{ background: #ffffff; }}
.faq__item[open] .faq__icon { transform: rotate(180deg); }

.faq__a {
  padding-right: 44px;
  padding-bottom: 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}
.faq__a > * + * { margin-top: 12px; }
.faq__a p { max-width: 62ch; }
.faq__a a {
  color: var(--color-text-muted, #ffffff);
  text-decoration: underline;
  text-decoration-color: rgba(237, 33, 58, 0.6);
  text-underline-offset: 4px;
}

.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s ease;
  transition-behavior: allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }

/* ---------------- CTA box ---------------- */
.cta-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px 40px;
  border-radius: var(--radius-lg, 42px);
  background-image: var(--grad-card);
  border: 1px solid var(--hairline);
  text-align: center;
  overflow: hidden;
}
.cta-box::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto;
  height: 260%;
  background: radial-gradient(40% 40% at 50% 0%, rgba(237, 33, 58, 0.18), rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}
.cta-box > * { position: relative; }
.cta-box h2 { font-size: clamp(24px, 3vw, 40px); line-height: 1.15; max-width: 520px; text-wrap: balance; }
.cta-box p { margin-top: 16px; max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--color-text, #b8b8b8); }

/* ---------------- Contacts ---------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 60px;
}
.contact-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border-radius: var(--radius-md, 24px);
  background-image: var(--grad-card);
  border: 1px solid var(--hairline);
  transition: transform 0.25s ease, border-color 0.25s ease;
}@media (hover:hover){.contact-item:hover{ transform: translateY(-3px); border-color: rgba(237, 33, 58, 0.35); }}

[data-icon].contact-item__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: rgba(237, 33, 58, 0.16);
  color: var(--crimson);
}
[data-icon].contact-item__icon svg { width: 20px; height: 20px; }

.contact-item [data-system-text] {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a7a;
}
.contact-item a,
.contact-item p {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-muted, #ffffff);
  overflow-wrap: anywhere;
}
.contact-item a { transition: color 0.2s ease; }@media (hover:hover){.contact-item a:hover{ color: var(--crimson); }}

/* ---------------- Posts / related ---------------- */
.rah-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 60px;
}
[data-block="posts"] .rah-posts { margin-top: 0; }

.rah-post {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  border-radius: var(--radius-md, 24px);
  background-image: var(--grad-card);
  border: 1px solid var(--hairline);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}@media (hover:hover){.rah-post:hover{
  transform: translateY(-4px);
  border-color: rgba(237, 33, 58, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}}

.rah-post__link {
  font-family: var(--font-ui);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-muted, #ffffff);
  transition: color 0.2s ease;
}@media (hover:hover){.rah-post__link:hover{ color: #ff9aa8; }}

.rah-post__text { font-size: 15px; line-height: 1.6; color: var(--color-text, #b8b8b8); }

.rah-post__date {
  margin-top: auto;
  padding-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a7a7a;
}

/* ---------------- Summary ---------------- */
.rah-summary {
  padding: 40px;
  border-radius: var(--radius-lg, 42px);
  background-image: var(--grad-card);
  border: 1px solid rgba(237, 33, 58, 0.22);
}
.rah-summary__title { font-size: clamp(21px, 2.6vw, 28px); line-height: 1.2; margin-bottom: 24px; }
.rah-summary ul { display: grid; gap: 14px; }
.rah-summary li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}

[data-icon].rah-summary__icon {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(237, 33, 58, 0.18);
  color: var(--crimson);
}
[data-icon].rah-summary__icon svg { width: 13px; height: 13px; }

/* ---------------- Breakpoints ---------------- */
@media (max-width: 1023px) {
  [data-block="faq"] .container { grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); gap: 40px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

@media (min-width: 1024px) {
  .cta-box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 40px;
    padding: 48px 56px;
  }
  .cta-box__text { max-width: 460px; }
  .cta-box p { margin-top: 12px; }}

@media (max-width: 767px) {
  .page-header { padding-block: 32px 0; }
  .page-header .crumbs { margin-bottom: 24px; }
  .page-header__lead { margin-top: 16px; }
  .page-header .btn-row { margin-top: 24px; }
  .page-header__grid { gap: 28px; }
  .page-header__media { border-radius: 24px; }

  .prose-title { margin-bottom: 24px; }
  .prose--content h2 { margin-top: 32px; }
  .prose--content h3 { margin-top: 24px; }

  .cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; }
  .card { padding: 24px 20px; }

  .steps { margin-top: 36px; gap: 16px; }
  .steps > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 22px 20px; }
  .steps > li::before { width: 44px; height: 44px; font-size: 17px; }
  .steps > li p { font-size: 15px; }

  [data-block="faq"] .container { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  [data-block="faq"] .section__head { text-align: center; }
  .faq__q { padding: 22px 0; gap: 14px; font-size: 15px; }
  [data-icon].faq__icon { width: 28px; height: 28px; }
  .faq__a { padding-right: 0; padding-bottom: 22px; font-size: 15px; }

  .cta-box { padding: 32px 24px; border-radius: 32px; gap: 20px; }
  .cta-box p { margin-top: 12px; font-size: 15px; }
  .cta-box .btn { width: 100%; }

  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; }
  .contact-item { padding: 24px 20px; }

  .rah-posts { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; }
  .rah-post { padding: 24px 20px; }

  .rah-summary { padding: 28px 22px; border-radius: 28px; }
  .rah-summary__title { margin-bottom: 18px; }
  .rah-summary li { font-size: 15px; }}
/* =========================================================
   Blog — list, related, summary, article text, TOC, meta
   ========================================================= */

:root {
  --blog-grad-red: linear-gradient(93.5deg, rgb(147, 41, 30) 0.82%, rgb(167, 22, 30) 39.12%, rgb(237, 33, 58) 94.55%);
  --blog-grad-card: linear-gradient(276.16deg, rgb(17, 17, 19) 1.49%, rgb(40, 40, 42) 101.12%);
  --blog-grad-panel: linear-gradient(276.16deg, rgb(17, 17, 19) 1.49%, rgb(51, 51, 51) 101.12%);
  --blog-red: #ed213a;
  --blog-read: 720px;
}

/* ------------------------------ Cards ------------------------------ */
.rah-posts-sec { --container: 1040px; }

.rah-posts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.rah-post {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-md, 24px);
  overflow: hidden;
  background: var(--blog-grad-card);
  isolation: isolate;
  transition: transform 0.22s ease-out;
}

.rah-post__media {
  position: relative;
  overflow: hidden;
  background: #111113;
}
.rah-post__media:not(:has(.rah-post__img)),
.rah-post__media:has(.rah-post__img[src=""]) { display: none; }

.rah-post__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}
.rah-post__img[src=""] { display: none; }

.rah-post__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 auto;
  padding: 24px 24px 28px;
}

/* Card without cover: soft crimson glow instead of a photo */
.rah-post:not(:has(.rah-post__img:not([src=""]))) .rah-post__body {
  padding-top: 32px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(167, 22, 30, 0.32), transparent 60%);
}

.rah-post__tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 9999px);
  background: rgba(237, 33, 58, 0.14);
  color: #ff5a6e;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.rah-post__link {
  color: var(--color-text-muted, #ffffff);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* whole card clickable */
.rah-post__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.rah-post__link:focus-visible { outline: none; }
.rah-post:has(.rah-post__link:focus-visible) {
  outline: 2px solid var(--color-focus, #ed213a);
  outline-offset: 3px;
}

.rah-post__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text, #b8b8b8);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.rah-post__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 14px;
  color: #8a8a8a;
  font-variant-numeric: tabular-nums;
}
.rah-post__date [data-slot="date"] + [data-slot="read"]::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--blog-red);
  vertical-align: middle;
}

@media (hover: hover) {
  .rah-post:hover { transform: translateY(-4px); }
  .rah-post:hover .rah-post__img { transform: scale(1.04); }
  .rah-post:hover .rah-post__link { color: #ffffff; }}

@media (min-width: 640px) {
  .rah-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (min-width: 1024px) {
  .rah-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }}

/* Featured (first) article */
@media (min-width: 640px) {
  .rah-posts-sec .rah-posts > .rah-post:first-child { grid-column: 1 / -1; }
  .rah-posts-sec .rah-posts > .rah-post:first-child .rah-post__link { font-size: clamp(24px, 2.4vw, 32px); -webkit-line-clamp: 4; }
}
@media (min-width: 768px) {
  .rah-posts-sec .rah-posts > .rah-post:first-child:has(.rah-post__img:not([src=""])) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
  .rah-posts-sec .rah-posts > .rah-post:first-child .rah-post__img { height: 100%; min-height: 320px; }
  .rah-posts-sec .rah-posts > .rah-post:first-child .rah-post__body { justify-content: center; padding: 40px; gap: 16px; }
  .rah-posts-sec .rah-posts > .rah-post:first-child .rah-post__date { margin-top: 8px; }}

/* ------------------------------ Empty blog ------------------------------ */
.rah-blog-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 28px;
  border-radius: var(--radius-lg, 42px);
  background: var(--blog-grad-panel);
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #b8b8b8);
}
.rah-blog-empty h2, .rah-blog-empty h3 { margin-bottom: 12px; font-size: clamp(20px, 2.2vw, 32px); }
.rah-blog-empty a { color: #ffffff; text-decoration: underline; text-decoration-color: rgba(237, 33, 58, 0.6); text-underline-offset: 4px; }

/* ------------------------------ Related ------------------------------ */
.rah-related { --container: 1040px; }
.rah-related__head { margin-bottom: 40px; }
.rah-related__title { font-size: clamp(24px, calc(2.6vw + 10px), 48px); text-wrap: balance; }

.rah-posts--compact .rah-post__body { padding: 20px 20px 24px; gap: 10px; }
.rah-posts--compact .rah-post__link { font-size: 18px; }
.rah-posts--compact .rah-post__text { font-size: 15px; -webkit-line-clamp: 2; }

@media (min-width: 1024px) {
  .rah-posts--compact { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }}

@media (max-width: 639px) {
  .rah-posts--compact {
    display: flex;
    gap: 16px;
    margin-inline: -20px;
    padding: 4px 20px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .rah-posts--compact::-webkit-scrollbar { display: none; }
  .rah-posts--compact > .rah-post { flex: 0 0 80%; scroll-snap-align: start; }}

.rah-posts__more { margin-top: 40px; text-align: center; }
.rah-posts__more-btn { min-height: 51px; }
.rah-posts__more-btn [data-icon] { width: 16px; height: 16px; }

/* ------------------------------ Summary ------------------------------ */
.rah-summary {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 56px;
  border-radius: var(--radius-lg, 42px);
  background: var(--blog-grad-panel);
  overflow: hidden;
  isolation: isolate;
}
.rah-summary__glow {
  position: absolute;
  right: -120px;
  top: -140px;
  z-index: -1;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(167, 22, 30, 0.45), transparent);
  pointer-events: none;
}
.rah-summary__title {
  margin-bottom: 28px;
  font-size: clamp(22px, calc(1.14vw + 15.5px), 32px);
  color: var(--color-text-muted, #ffffff);
}
.rah-summary__list { display: flex; flex-direction: column; gap: 16px; }
.rah-summary__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 17px;
  line-height: 1.55;
  color: #d6d6d6;
}
.rah-summary__arrow {
  width: 14px;
  height: 9px;
  margin-top: 0.62em;
  color: var(--blog-red);
}

@media (max-width: 767px) {
  .rah-summary { padding: 32px 24px; border-radius: 28px; }
  .rah-summary__title { margin-bottom: 20px; text-align: center; }
  .rah-summary__item { font-size: 16px; }}

/* ------------------------------ Article column ------------------------------ */
.page__main .rah-article[data-block] { padding-block: 28px; }
.rah-article__col { max-width: var(--blog-read); margin-inline: auto; }
.rah-article__title {
  margin-bottom: 24px;
  font-size: clamp(24px, calc(1.6vw + 14px), 40px);
  line-height: 1.2;
  text-wrap: balance;
}

.rah-prose {
  font-size: 18px;
  line-height: 1.7;
  color: #c4c4c4;
  overflow-wrap: break-word;
}
.rah-prose > * + * { margin-top: 24px; }
.rah-prose > h2, .rah-prose > h3, .rah-prose > h4 { margin-top: 44px; line-height: 1.3; }
.rah-prose > :first-child { margin-top: 0; }
.rah-prose h2 { font-size: clamp(22px, 2.4vw, 32px); }
.rah-prose h3 { font-size: clamp(19px, 1.6vw, 24px); }
.rah-prose h4 { font-size: 19px; }
.rah-prose h2 + *, .rah-prose h3 + *, .rah-prose h4 + * { margin-top: 14px; }
.rah-prose strong, .rah-prose b { color: #ffffff; font-weight: 600; }

.rah-prose a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(237, 33, 58, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease-out, color 0.2s ease-out;
}
@media (hover: hover) {
  .rah-prose a:hover { text-decoration-color: var(--blog-red); }}

.rah-prose ul, .rah-prose ol { padding-left: 0; list-style: none; }
.rah-prose li { position: relative; padding-left: 30px; }
.rah-prose li + li { margin-top: 12px; }
.rah-prose ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--blog-grad-red);
}
.rah-prose ol { counter-reset: ns-ol; }
.rah-prose ol > li { counter-increment: ns-ol; }
.rah-prose ol > li::before {
  content: counter(ns-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blog-red);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rah-prose li > ul, .rah-prose li > ol { margin-top: 12px; }

.rah-prose blockquote {
  margin: 32px 0;
  padding: 28px 32px 28px 72px;
  position: relative;
  border: 0;
  border-radius: var(--radius-md, 24px);
  background: var(--blog-grad-panel);
  color: #e6e6e6;
  font-size: 19px;
  line-height: 1.6;
}
.rah-prose blockquote::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 30px;
  width: 24px;
  height: 18px;
  background: var(--blog-grad-red);
  -webkit-mask: radial-gradient(circle at 5px 5px, #000 5px, transparent 5.5px) 0 0 / 12px 18px repeat-x;
  mask: radial-gradient(circle at 5px 5px, #000 5px, transparent 5.5px) 0 0 / 12px 18px repeat-x;
}
.rah-prose blockquote p + p { margin-top: 12px; }
.rah-prose blockquote cite { display: block; margin-top: 12px; font-size: 15px; font-style: normal; color: var(--color-text, #b8b8b8); }

.rah-prose .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: var(--radius-sm, 12px);
  -webkit-overflow-scrolling: touch;
}
.rah-prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.rah-prose th, .rah-prose td { padding: 14px 16px; border-bottom: 1px solid var(--color-border, #2a2a2a); text-align: left; vertical-align: top; }
.rah-prose thead th { background: #141416; color: #ffffff; font-weight: 600; }
.rah-prose tbody tr:last-child td { border-bottom: 0; }
.rah-prose tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

.rah-prose img, .rah-prose video { width: 100%; height: auto; border-radius: var(--radius-md, 24px); }
.rah-prose figure { margin: 36px 0; }
.rah-prose figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #8a8a8a; text-align: center; }

.rah-prose code {
  padding: 2px 7px;
  border-radius: 6px;
  background: #1a1a1c;
  color: #ff8a98;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}
.rah-prose pre {
  padding: 20px;
  border-radius: var(--radius-sm, 12px);
  background: #111113;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.rah-prose pre code { padding: 0; background: none; color: #e6e6e6; }
.rah-prose hr { height: 1px; margin: 44px 0; border: 0; background: var(--color-border, #2a2a2a); }

@media (max-width: 767px) {
  .page__main .rah-article[data-block] { padding-block: 20px; }
  .rah-article__title { margin-bottom: 18px; }
  .rah-prose { font-size: 17px; line-height: 1.65; }
  .rah-prose > h2, .rah-prose > h3 { margin-top: 36px; }
  .rah-prose blockquote { padding: 56px 22px 22px; font-size: 17px; }
  .rah-prose blockquote::before { left: 22px; top: 24px; }}

/* ------------------------------ Article header ------------------------------ */
[data-role="page-header"]:has(.rah-meta),
[data-role="page-header"]:has(+ .rah-meta) { text-align: center; }
.page__main [data-role="page-header"]:has(+ .rah-meta) { padding-bottom: 16px; }
[data-role="page-header"]:has(.rah-meta) h1,
[data-role="page-header"]:has(+ .rah-meta) h1 {
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(30px, calc(2.6vw + 18px), 56px);
  line-height: 1.12;
  text-wrap: balance;
}

.rah-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  max-width: var(--blog-read);
  margin: 20px auto 0;
  padding-inline: 20px;
  font-size: 15px;
  line-height: 1.4;
  color: #8a8a8a;
  font-variant-numeric: tabular-nums;
}
.rah-meta > * + *::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--blog-red);
  vertical-align: middle;
}
.rah-meta time, .rah-meta strong { color: var(--color-text, #b8b8b8); font-weight: 500; }
[data-role="page-header"] + .rah-meta { margin-bottom: 36px; }

/* ------------------------------ Table of contents ------------------------------ */
.page__main .rah-toc-sec,
.rah-toc-sec { padding-block: 20px; }
.rah-toc-sec > .container,
.rah-toc-sec .rah-toc { max-width: var(--blog-read); margin-inline: auto; }
.rah-toc-sec > .container { max-width: calc(var(--blog-read) + 40px); }

.rah-toc {
  padding: 28px 32px;
  border-radius: var(--radius-md, 24px);
  background: var(--blog-grad-panel);
}
.rah-toc__title {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-muted, #ffffff);
}
.rah-toc ol { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; margin: 0; }
.rah-toc ol ol { margin: 2px 0 0 18px; }
.rah-toc li { margin: 0; }
.rah-toc li a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px 10px 34px;
  border-radius: var(--radius-sm, 12px);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text, #b8b8b8);
  transition: color 0.18s ease-out, background-color 0.18s ease-out;
}
.rah-toc li a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #4a4a4c;
  transform: translateY(-50%);
  transition: background-color 0.18s ease-out, width 0.18s ease-out;
}
.rah-toc li a.is-active,
.rah-toc li a[aria-current="true"] { color: #ffffff; background: rgba(237, 33, 58, 0.12); }
.rah-toc li a.is-active::before,
.rah-toc li a[aria-current="true"]::before { background: var(--blog-red); width: 14px; }
@media (hover: hover) {
  .rah-toc li a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.05); }}

@media (max-width: 767px) {
  .rah-toc { padding: 22px 18px; border-radius: 20px; }}

/* ------------------------------ Reading progress ------------------------------ */
.rah-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  height: 3px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.06);
}
.rah-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blog-grad-red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .rah-post, .rah-post__img { transition: none; }@media (hover:hover){.rah-post:hover,.rah-post:hover .rah-post__img{ transform: none; }}}
/* Final precise overrides (loaded last) */

/* Weights — headings 700, buttons 600 */
h1, h2, h3,
.hero__title, .how__title, .ctypes__title, .models__title, .section__title,
.ctypes__name, .cat-row__name, .features__title {
  font-weight: 700 !important;
  line-height: normal;
  letter-spacing: normal;
}
.hero__title, .how__title, .ctypes__title, .models__title, .section__title {
  font-size: clamp(24px, calc(3.81vw + 9px), 64px);
}
.hero__title { font-size: clamp(32px, calc(3.05vw + 20px), 64px); }
.ctypes__name, .cat-row__name, .features__title { font-size: clamp(20px, calc(1.14vw + 15.5px), 32px); }

.btn, .btn * { font-weight: 600 !important; }
.btn { font-size: 16px; line-height: normal; }

/* Hero rhythm: media → next block ≥ 140px */
.page__main [data-block="hero"] { padding-top: 44px; padding-bottom: 78px; }
.hero__lead { line-height: 1.5; }
.hero__cta { min-height: 56px; }
.hero__media { max-width: 780px; border-radius: 16px; }

/* How it works: text column + 400px square, top aligned */
.how__grid {
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 40px;
  align-items: start;
}
.how__title { max-width: 480px; }
.how__intro { display: none; }
.how__body { margin-top: 20px; gap: 28px; }
.how__body p { line-height: 1.5; }
.how__media { border-radius: 16px; }

/* Content types: photo left, arrow list right, centred */
.ctypes__grid { gap: 40px; align-items: center; margin-top: 60px; }
.ctypes__media { border-radius: 16px; }
.ctypes__arrow { width: 14px; height: 14px; color: #ed213a; }
.ctypes__arrow svg { transform: rotate(-90deg); }
.ctypes__text { padding-left: 30px; line-height: 1.5; }

/* Chessboard categories */
.models__head { margin-bottom: 60px; }
.cat-row { gap: 60px; }
.cat-row + .cat-row { margin-top: 60px; }
.cat-row__media { aspect-ratio: 3 / 2; border-radius: 16px; }
.cat-row__text { line-height: 1.5; }

/* Features card */
.features__card { max-width: 1016px; min-height: 337px; }
.features__art img { animation: megaphone-sway 4s ease-in-out infinite; }
@keyframes megaphone-sway {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-6px); }
}

/* Background light spots */
.blob { filter: blur(120px); }

@media (max-width: 1023px) {
  .how__grid { grid-template-columns: minmax(0, 1fr) 320px; }}

@media (max-width: 767px) {
  .page__main [data-block="hero"] { padding-top: 28px; padding-bottom: 40px; }
  .hero__cta { min-width: 280px; min-height: 70px; }
  .hero__media { border-radius: 16px; }

  .how__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .how__media { order: -1; }
  .how__text { text-align: center; }
  .how__title { max-width: none; }
  .how__body { gap: 20px; }

  .ctypes__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; }
  .ctypes__media { order: -1; }
  .ctypes__text { padding-left: 0; }

  .models__head { margin-bottom: 20px; }
  .cat-row { gap: 20px; }
  .cat-row + .cat-row { margin-top: 40px; }
  .cat-row:nth-child(even) .cat-row__media { order: 0; }
  .cat-row__cta { min-width: 132px; }

  .features__card { max-width: 320px; min-height: 589px; margin-inline: auto; }
  .blob { filter: blur(90px); }}
:root{--color-bg:#050304;--color-surface:#161013;--color-surface-2:#2a1f24;--color-text:#c9bfc3;--color-text-muted:#8c8186;--color-border:#2e2328;--color-primary:#D6246E;--color-primary-contrast:#ffffff;--color-accent:#FF6B8B;--color-accent-contrast:#1a0a10;--color-focus:#D6246E;--font-heading:'Inter', system-ui, sans-serif;--font-body:'Inter', system-ui, sans-serif;--radius-sm:8px;--radius-md:16px;--radius-lg:28px;--radius-pill:9999px;--container:780px;--container-narrow:620px;--shadow-sm:none;--shadow-md:none;--header-h:87px;--font-display:var(--font-heading)}