@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/4450c9a76519a8b1.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:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/51d8f6638b63646f.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:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/4450c9a76519a8b1.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:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/51d8f6638b63646f.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:'Heebo';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/4450c9a76519a8b1.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:'Heebo';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/51d8f6638b63646f.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}.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-block-end:.75rem}.site-header__in{display:flex;align-items:center;gap:16px;min-height:var(--header-h)}.nav{display:none;margin-inline-start:auto}.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}.nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;border-radius:var(--radius-sm);color:var(--color-text);text-decoration:none;font-weight:500}.nav a[aria-current=page]{background:var(--color-surface)}@media (hover:hover){.nav a:hover{background:var(--color-surface)}}.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){.nav{display:block}.menu{display:none}}.hero__lead{font-size:clamp(1.05rem,1rem + .45vw,1.3rem);color:var(--color-text-muted);max-width:40ch}.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)}.hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.footer-bottom{margin-block-start:40px;padding-block-start:20px;border-block-start:1px solid color-mix(in srgb,var(--color-bg) 18%,transparent);font-size:.875rem;opacity:.7;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}.mcta{position:fixed;inset-inline:0;inset-block-end:0;z-index:60;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--color-bg);border-block-start:1px solid var(--color-border);box-shadow:0 -8px 24px -12px rgba(0,0,0,.25)}body{padding-block-end:76px}@media (min-width:960px){.mcta{display:none}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}.sil-lg{display:block;height:36px;width:auto;max-width:190px;object-fit:contain}.sil-summary-sec{padding-block:clamp(16px,3vw,32px) 0}.sil-toc-sec{padding-block:clamp(12px,2vw,24px) 0}.sil-meta{font-size:.9rem;margin:.25em 0 1em}.table-wrap{overflow-x:auto}
/* ==========================================================================
   Core — skeleton, header, drawer, footer, typography, buttons, icons
   Branding values: Heebo, h1 32/38, h2 27/32 upper, h3 22/26.4 upper,
   body 16/24, buttons 700 18px/18px uppercase r7, container 1500/18.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* ---------- 2. Tokens (aliases over the injected palette) ---------- */
:root {
  --c-bg: var(--color-bg, #ffffff);
  --c-surface: var(--color-surface, #97f0fe);
  --c-surface-2: var(--color-surface-2, #010049);
  --c-text: var(--color-text, #010049);
  --c-muted: var(--color-text-muted, #97f0fe);
  --c-border: var(--color-border, rgba(1, 0, 73, .1));
  --c-primary: var(--color-primary, #f54c91);
  --c-primary-contrast: var(--color-primary-contrast, #ffffff);
  --c-accent: var(--color-accent, #f54c91);
  --c-accent-contrast: var(--color-accent-contrast, #010049);
  --c-focus: var(--color-focus, #f54c91);
  --c-link: var(--color-link, #221f8a);
  --ff-heading: var(--font-heading, 'Heebo', sans-serif);
  --ff-body: var(--font-body, 'Heebo', sans-serif);

  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 30px;
  --radius-pill: 50px;

  --container: 1500px;
  --container-narrow: 1110px;

  --shadow-sm: 0 2px 10px rgba(255, 107, 157, .4);
  --shadow-md: 0 4px 20px rgba(1, 0, 73, .08);

  --header-h: 177px;
  --notice-h: 51px;
  --bar-h: 70px;
  --nav-h: 56px;

  --notice-bg: #990033;
  --ink: #010049;
  --ink-2: #1b1464;
  --ink-3: #221f8a;
  --nav-grad: linear-gradient(90deg, #1c1b6d 0%, #2725a6 100%);

  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 3. Base typography ---------- */
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: 32px; line-height: 38px; }
h2 { font-size: 27px; line-height: 32px; text-transform: uppercase; }
h3 { font-size: 22px; line-height: 26.4px; text-transform: uppercase; }
h4 { font-size: 20px; line-height: 24px; }

p { max-width: 72ch; font-size: 16px; line-height: 24px; }
small { font-size: 13px; line-height: 1.4; }
strong, b { font-weight: 700; }
sup { font-size: .7em; vertical-align: super; }

a {
  color: inherit;
  transition: color .2s var(--ease-out);
}

/* ---------- 4. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}
.container--narrow { max-width: var(--container-narrow); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.u-hidden { display: none !important; }
.text-center { text-align: center; }

.sil-sk {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--c-bg);
  color: var(--c-text);
  font: 700 16px/1 var(--ff-heading);
  border-radius: 0 0 var(--radius-sm) 0;
}
.sil-sk:focus { left: 0; }

/* ---------- 5. Focus ---------- */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 6. Icons ---------- */
[data-icon] {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  line-height: 0;
  vertical-align: middle;
}
[data-icon] svg {
  width: 100%;
  height: 100%;
  display: block;
  color: currentColor;
}

/* ---------- 7. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 7px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--ff-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out),
              box-shadow .3s var(--ease-out), transform .2s var(--ease-out);
}
.btn--primary {
  background: var(--c-primary);
  color: var(--c-primary-contrast);
}
.btn--secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--radius-sm);
}
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--c-border);
}
.btn--block { width: 100%; }
.btn--lg {
  min-width: 400px;
  min-height: 53px;
  padding: 15px 40px;
  font-size: 22.5px;
  line-height: 22.5px;
  border-radius: var(--radius-lg);
}
.btn--sm {
  padding: 7px 14px;
  font-size: 14.5px;
  line-height: 14.5px;
}

@media (hover: hover) {
  .btn--primary:hover {
    background: #ffffff;
    color: var(--c-primary);
    box-shadow: inset 0 0 0 1px currentColor;
  }
  .btn--secondary:hover {
    background: #ffffff;
    color: var(--c-primary);
  }
  .btn--ghost:hover {
    background: var(--c-primary);
    color: #ffffff;
  }
  a:hover { color: var(--c-primary); }}

/* ---------- 8. Header ---------- */
.site-header {
  position: relative;
  z-index: 40;
  background: var(--c-bg);
}

/* 8.1 notice strip */
.site-header__notice {
  background: var(--notice-bg);
  padding: 12px 15px;
  text-align: center;
}
.site-header__notice-text {
  margin: 0 auto;
  max-width: 120ch;
  color: #ffffff;
  font: 400 18px/27px var(--ff-body);
  letter-spacing: .2px;
  text-shadow: 0 0 4px rgba(0, 0, 0, .45);
}
.site-header__notice a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .site-header__notice a:hover { color: #ffffff; opacity: .82; }}

/* 8.2 white bar */
.site-header__bar { position: relative; background: var(--c-bg); }
.site-header__bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: var(--bar-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--c-text);
}
.sil-mk { display: block; width: 40px; height: 40px; flex: 0 0 auto; }
.sil-mk svg { width: 100%; height: 100%; }
.brand__name {
  font: 700 26px/1 var(--ff-heading);
  letter-spacing: .01em;
  white-space: nowrap;
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.site-header__login {
  font: 400 18px/27px var(--ff-heading);
  letter-spacing: .28px;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header__cta { flex: 0 0 auto; white-space: nowrap; }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
}

/* 8.3 header search */
.hsearch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hsearch__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-size: 22px;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.hsearch__field {
  position: relative;
  display: block;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width .25s var(--ease-out), opacity .2s var(--ease-out);
}
.hsearch.is-open .hsearch__field {
  width: min(854px, 50vw);
  opacity: 1;
}
.hsearch__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  font-size: 22px;
  color: #ffffff;
  pointer-events: none;
}
.hsearch__input {
  width: 100%;
  height: 36px;
  padding: 0 15px 0 55px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ink-2);
  color: #ffffff;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 36px;
}
.hsearch__input::placeholder { color: #ffffff; opacity: .85; }
.hsearch__input::-webkit-search-cancel-button { filter: invert(1); }

.hsearch__empty {
  position: absolute;
  top: calc(100% + 8px);
  right: 18px;
  z-index: 6;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #ffffff;
  font: 400 14px/20px var(--ff-body);
  box-shadow: var(--shadow-md);
}

@media (hover: hover) {
  .hsearch__toggle:hover { background: rgba(1, 0, 73, .06); color: var(--c-primary); }}

/* 8.4 blue nav strip */
.site-header__nav { background: var(--ink); }
.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.nav-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  color: #ffffff;
  font: 700 16px/16px var(--ff-heading);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s var(--ease-out);
}
.nav-list a[aria-current="page"] { color: var(--c-primary); }
@media (hover: hover) {
  .nav-list a:hover { color: var(--c-primary); }}

/* 8.5 mobile drawer */
.drawer {
  display: none;
  background: var(--nav-grad);
}
.drawer.is-open {
  display: block;
  animation: jm-slide-down .3s var(--ease-out) both;
}
@keyframes jm-slide-down {
  from { transform: translateY(-120px); }
  to   { transform: translateY(0); }
}
.hsearch--drawer {
  display: block;
  padding: 18px 13px 6px;
}
.hsearch--drawer .hsearch__field { width: 100%; opacity: 1; }
.drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 66px;
  padding: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #ffffff;
  font: 700 16px/16px var(--ff-heading);
  text-transform: uppercase;
}
.drawer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 25px;
  background: var(--c-primary);
  color: #ffffff;
  font: 700 16px/16px var(--ff-heading);
  text-transform: uppercase;
}

/* ---------- 9. Footer ---------- */
.site-footer {
  background: var(--c-surface-2);
  color: #ffffff;
  padding: 45px 0;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 30px;
  padding-top: 54px;
}
.footer-col { min-width: 150px; }

.footer__title {
  margin: 0 0 14px;
  color: #ffffff;
  font: 600 20px/20px var(--ff-heading);
  text-transform: none;
}
.footer__list li + li { margin-top: 8px; }
.footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-surface);
  font: 400 16px/24px var(--ff-body);
  opacity: .88;
  transition: color .2s var(--ease-out), opacity .2s var(--ease-out);
}
.footer__list [data-icon] { font-size: 16px; opacity: .7; }

.footer__tagline {
  margin-top: 14px;
  max-width: 32ch;
  color: var(--c-surface);
  font: 400 16px/24px var(--ff-body);
  opacity: .88;
}
.brand--footer { color: #ffffff; }
.brand--footer .brand__name { color: #ffffff; }
.footer__cta { margin-top: 18px; }

.footer__countries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  margin: 45px auto 0;
  color: var(--c-surface);
  font: 400 16px/24px var(--ff-body);
  opacity: .85;
  text-align: center;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}
.footer__rta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 26px;
  padding: 0 8px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  color: #ffffff;
  font: 700 13px/1 var(--ff-heading);
  letter-spacing: .1em;
}
.footer__copy {
  max-width: none;
  color: var(--c-surface);
  font: 400 14px/21px var(--ff-body);
  opacity: .8;
  text-align: center;
}

@media (hover: hover) {
  .footer__list a:hover { color: var(--c-primary); opacity: 1; }}

/* ---------- 10. Prose (shared rich-text) ---------- */
.prose {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 27px;
}
.prose > * { max-width: var(--container-narrow); margin-left: auto; margin-right: auto; }
.prose h2 { margin: 30px 0 18px; font-size: 27px; line-height: 32px; }
.prose h3 { margin: 24px 0 14px; font-size: 22px; line-height: 26.4px; }
.prose p { max-width: 72ch; margin: 0 auto 18px; line-height: 1.5; }
.prose ul, .prose ol { max-width: 72ch; padding-left: 40px; margin: 0 auto 18px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 8px; line-height: 1.5; }
.prose a { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  padding-left: 18px;
  border-left: 2px solid var(--c-primary);
  font-style: italic;
}
.prose img { border-radius: 0; }
.prose .table-wrap { width: 100%; overflow-x: auto; }
.prose table { font-size: 16px; }
.prose th, .prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.prose--dark { color: #ffffff; }
.prose--dark a { color: var(--c-surface); }

/* ---------- 11. Responsive ---------- */
@media (max-width: 991px) {
  .nav-list { gap: 24px; }
  .nav-list a { font-size: 15px; padding: 16px 0; }
}

@media (max-width: 767px) {
  :root {
    --header-h: 131px;
    --notice-h: 81px;
    --bar-h: 50px;
    --container-narrow: 100%;
  }
  .container { padding: 0 13px; }

  body { font-size: 15px; line-height: 22.5px; }
  p { font-size: 15px; line-height: 22.5px; }
  h1 { font-size: 26px; line-height: 30px; }
  h2 { font-size: 18.9px; line-height: 22.7px; }
  h3 { font-size: 22px; line-height: 26.4px; }

  .btn {
    font-size: 15px;
    line-height: 15px;
    padding: 7px 14px;
  }

  /* notice */
  .site-header__notice { padding: 19px 15px; }
  .site-header__notice-text { font-size: 14px; line-height: 21.7px; letter-spacing: .2px; }

  /* bar */
  .site-header__bar-in { justify-content: center; height: var(--bar-h); padding: 0 13px; }
  .burger {
    display: inline-flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 59px;
    height: var(--bar-h);
    font-size: 24px;
  }
  .sil-mk { width: 25px; height: 25px; }
  .brand__name { font-size: 17px; }
  .site-header__tools { display: none; }
  .site-header__nav { display: none; }

  .hsearch__input { font-size: 16px; }
  .hsearch__empty { right: 13px; left: 13px; max-width: none; }

  /* drawer */
  .drawer { background: var(--nav-grad); }
  .drawer__list a, .drawer__cta { min-height: 66px; padding: 25px; }
  .hsearch--drawer { padding: 18px 13px 6px; }

  /* footer */
  .site-footer { padding: 32px 0 19px; }
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    padding-top: 38px;
    justify-items: start;
  }
  .footer-col { min-width: 0; }
  .footer__countries { margin-top: 30px; gap: 6px 16px; font-size: 14px; }
  .footer__bottom { margin-top: 18px; }

  /* prose */
  .prose { font-size: 15px; line-height: 23px; }
  .prose p { font-size: 15px; line-height: 23px; }}

@media (max-width: 480px) {
  .nav-list { gap: 16px; }
  .btn--lg { min-width: 0; width: 100%; padding: 14px 20px; font-size: 16px; line-height: 16px; }}

@media (min-width: 768px) {
  .drawer, .drawer.is-open { display: none; }}

/* ---------- 12. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================================
   Home — intro card (left media area + right content area, always in normal
   document flow), full-bleed preview grid, see-all band, long-read section.
   The card no longer floats: nothing overlaps the next section and the block
   ends right after its own content.
   ========================================================================== */

/* ---------- 1. Hero section ---------- */
.hero {
  position: relative;
  padding: 7px;
  background: var(--c-bg);
  color: var(--c-text);
}

.hero__stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.hero__collage { display: none; }

/* ---------- 2. Intro card: one composition, media left + content right ---------- */
.hero-card {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: 944px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ink);
  box-shadow: 0 6px 20px rgba(1, 0, 73, .12);
  color: #ffffff;
  animation: fadein .5s ease 1;
}

/* media side — keeps its own box, stretches with the content side */
.hero-card__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
}
.hero-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 0, 73, .05) 0%, rgba(1, 0, 73, .5) 100%);
  pointer-events: none;
}

/* content side — equal padding top and bottom, content centred */
.hero-card__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 30px 40px;
  color: #ffffff;
}

.hero-card__mascot { display: none; }

.hero-card__title {
  max-width: 100%;
  font-size: 32px;
  line-height: 38px;
  color: #ffffff;
}

.hero-card__lead {
  max-width: 46ch;
  font: 400 16px/24px var(--ff-body);
  color: rgba(255, 255, 255, .9);
}

.hero-card__stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 0;
}

.hero-card__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.hero-card__stat-value {
  font: 700 23px/1.15 var(--ff-heading);
  color: var(--c-primary);
}

.hero-card__stat-note {
  font: 400 15px/1.4 var(--ff-body);
  color: rgba(255, 255, 255, .9);
}

.hero-card__actions { margin-top: 12px; }

.hero-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  background: var(--c-primary);
  color: #ffffff;
  font: 700 18px/18px var(--ff-heading);
  text-transform: uppercase;
  text-align: center;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}

@media (hover: hover) {
  .hero-card__cta:hover {
    background: #ffffff;
    color: var(--c-primary);
    box-shadow: inset 0 0 0 1px currentColor;
  }}

/* ---------- 3. Preview grid ---------- */
.hero__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  animation: fadein .6s ease 1;
}

.tile { position: relative; min-width: 0; }

.tile__link {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-2);
  transition: box-shadow .25s var(--ease-out);
}

.tile__img {
  display: block;
  width: 100%;
  aspect-ratio: 1.3;
  object-fit: cover;filter:none;
  transform: scale(1.06);
  transition: transform .25s var(--ease-out), filter .25s var(--ease-out);
}

.tile__dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92);
  animation: pulse-live 2s ease-in-out infinite;
}

.tile__tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  overflow: hidden;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .6);
  color: #ffffff;
  font: 400 15px/15px var(--ff-body);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color .25s var(--ease-out);
}

@keyframes pulse-live {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.2); opacity: .8; }
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (hover: hover) {
  .tile__link:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
  .tile__link:hover .tile__img { transform: scale(1.12);filter:none; }}

/* ---------- 4. Filter status ---------- */
.filter-status {
  display: none;
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 0 18px;
  color: var(--c-text);
  font: 400 15px/1.5 var(--ff-body);
  text-align: center;
}
.filter-status.is-on { display: block; }

/* ---------- 5. See-all band ---------- */
.see-all { padding: 45px 0; }
.see-all__in { display: flex; justify-content: center; }

/* ---------- 6. Long-read section ---------- */
.longread {
  padding: 0 18px;
  background: var(--c-bg);
  color: var(--c-text);
}

.longread__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 0 60px;
}

.longread h2 {
  max-width: 72ch;
  margin: 40px auto 18px;
  color: var(--c-text);
  font-size: 27px;
  line-height: 32px;
  text-transform: uppercase;
}
.longread h2:first-child { margin-top: 0; }

.longread h3 {
  max-width: 72ch;
  margin: 30px auto 14px;
  color: var(--c-text);
  font-size: 22px;
  line-height: 26.4px;
  text-transform: uppercase;
}

.longread p {
  max-width: 72ch;
  margin: 0 auto 18px;
  font: 400 18px/27px var(--ff-body);
  color: var(--c-text);
}

.longread ul {
  max-width: 72ch;
  margin: 0 auto 18px;
  padding-left: 40px;
  list-style: disc;
}

.longread li {
  margin: 0 0 8px;
  font: 400 18px/27px var(--ff-body);
  color: var(--c-text);
}
.longread li::marker { color: var(--c-primary); }

.longread strong { font-weight: 700; color: var(--c-text); }

.longread a {
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--ease-out);
}
@media (hover: hover) {
  .longread a:hover { color: var(--c-primary); }}

.longread__figure {
  max-width: 1024px;
  margin: 26px auto 30px;
}
.longread__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 2.2;
  object-fit: cover;
  border-radius: 0;filter:none;
}
.longread__figure--wide img { aspect-ratio: 5.6; }

.longread__cta {
  display: flex;
  justify-content: center;
  margin: 26px 0 34px;
}
.longread__cta .btn {
  min-width: 400px;
  min-height: 53px;
  padding: 15px 40px;
  border-radius: var(--radius-lg);
  font-size: 22.5px;
  line-height: 22.5px;
}

/* ---------- 7. Search-by filter chips ---------- */
.longread .filters__label {
  max-width: 72ch;
  margin: 26px auto 12px;
  font: 700 18px/1.4 var(--ff-heading);
  color: var(--c-text);
}

.longread .filters { max-width: 72ch; margin: 0 auto 22px; }
.longread .filters__group { margin-bottom: 16px; }

.longread .filters__title {
  max-width: none;
  margin: 0 0 8px;
  font: 700 16px/1.4 var(--ff-heading);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text);
}

.longread .filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.longread .filters__list li {
  margin: 0;
  list-style: none;
  font: inherit;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 15px;
  border: 1px solid rgba(1, 0, 73, .1);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: 700 12px/12px var(--ff-heading);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out),
              border-color .2s var(--ease-out);
}
.chip[aria-pressed="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #ffffff;
}
@media (hover: hover) {
  .chip:hover { background: var(--c-primary); border-color: var(--c-primary); color: #ffffff; }}

.longread .filters__hint {
  max-width: 72ch;
  margin: 0 auto 26px;
  font: 400 16px/1.6 var(--ff-body);
  color: rgba(1, 0, 73, .68);
}

/* ---------- 8. Responsive ---------- */
@media (max-width: 1280px) {
  .hero__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero-card { max-width: 860px; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .hero-card__inner { padding: 28px 34px; }
}

@media (max-width: 991px) {
  .hero__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-card { max-width: 860px; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .hero-card__inner { padding: 26px 30px; }
  .hero-card__title { font-size: 28px; line-height: 33px; }}

@media (max-width: 767px) {
  .hero { padding: 7px; background: var(--c-bg); color: var(--c-text); }

  /* three cut photos above and below the card, as on the phone reference */
  .hero__collage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    align-items: end;
    margin: 0 0 12px;
  }
  .hero__collage--bottom { margin: 12px 0 14px; }
  .hero__collage img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center bottom;
  }

  /* the same composition stacked: media on top, content under it */
  .hero-card {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 306px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(1, 0, 73, .10);
    color: var(--c-text);
  }
  .hero-card__media {
    aspect-ratio: 4 / 3;
    background: #f6f6f6;
  }
  .hero-card__media::after { display: none; }

  .hero-card__inner {
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 26px 22px;
    text-align: center;
  }
  .hero-card__mascot {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 4px;
  }
  .hero-card__mascot svg { width: 100%; height: 100%; }
  .hero-card__title {
    font-size: 26px;
    line-height: 30px;
    color: var(--c-text);
  }
  .hero-card__lead {
    max-width: none;
    font: 400 15px/22px var(--ff-body);
    color: var(--c-text);
  }
  .hero-card__stats {
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }
  .hero-card__stat {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .hero-card__stat-value { font: 700 15px/1.3 var(--ff-heading); }
  .hero-card__stat-note {
    font: 400 13px/1.35 var(--ff-body);
    color: rgba(1, 0, 73, .72);
  }
  .hero-card__actions { width: 100%; margin-top: 6px; }
  .hero-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 66px;
    padding: 25px;
    border-radius: 0;
    font: 700 16px/16px var(--ff-heading);
  }

  .hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
  }
  .tile__tag {
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 7px 12px;
    font-size: 13px;
    line-height: 13px;
  }
  .tile__dot { top: 8px; right: 8px; }

  .filter-status { color: var(--c-text); }

  .see-all { padding: 25px 0; }

  .longread { padding: 0 13px; }
  .longread__inner { padding: 30px 0 50px; }
  .longread h2 {
    margin: 30px auto 14px;
    font-size: 18.9px;
    line-height: 22.7px;
  }
  .longread h3 {
    margin: 22px auto 12px;
    font-size: 18.9px;
    line-height: 22.7px;
  }
  .longread p { font: 400 15px/23px var(--ff-body); margin-bottom: 14px; }
  .longread ul { padding-left: 26px; margin-bottom: 14px; }
  .longread li { font: 400 15px/23px var(--ff-body); }
  .longread__figure { margin: 18px auto 22px; }
  .longread__cta { margin: 20px 0 26px; }
  .longread__cta .btn {
    min-width: 0;
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 16px;
    line-height: 16px;
  }
  .longread .filters__label { font-size: 16px; }
  .longread .filters__hint { font-size: 14px; }}

@media (max-width: 480px) {
  .hero__grid { gap: 10px; }
  .tile__tag { font-size: 12px; line-height: 12px; padding: 6px 10px; }}
/* ==========================================================================
   Content blocks — page header, long text, feature/pick cards, steps, faq,
   cta, contacts, legal, posts, related, summary, tag ribbons
   ========================================================================== */

/* ---------- 0. Local tokens ---------- */
:root {
  --c-link: var(--color-link, #221f8a);
  --c-soft: #f6f6f6;
  --c-line: rgba(1, 0, 73, .1);
  --c-dim: rgba(1, 0, 73, .68);
  --c-dim-2: rgba(1, 0, 73, .5);
  --grad-badge: linear-gradient(135deg, #f54c91 0%, #4ecdc4 100%);
  --shadow-card: 0 4px 20px rgba(1, 0, 73, .06);
  --text-col: 72ch;
}

/* ---------- 1. Section shell ---------- */
.section { position: relative; padding: 36px 0 45px; }
.section--alt { background: var(--c-soft); }
/* a pick grid hangs directly under the page header, with no top padding */
.section:has(.cards) { padding: 0 0 36px; }

/* content CTAs are the big pink pills of the sample: 400x53, radius 30 */
.section .btn,
.longread .btn {
  min-width: 400px;
  min-height: 53px;
  padding: 15px 40px;
  border-radius: var(--radius-lg);
  font-size: 22.5px;
  line-height: 22.5px;
}
.section .btn--sm {
  min-width: 0;
  min-height: 32px;
  padding: 7px 14px;
  font-size: 14.5px;
  line-height: 14.5px;
  border-radius: var(--radius-sm);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 30px;
}
.section__head h2,
.section__title { margin: 0; }

.section h2 {
  font-family: var(--ff-heading);
  font-size: 27px;
  line-height: 32px;
  text-transform: none;
  color: var(--c-text);
}
.section h3 {
  font-family: var(--ff-heading);
  font-size: 22px;
  line-height: 26.4px;
  text-transform: none;
  color: var(--c-text);
}
.muted { color: var(--c-dim); }
.section__head .muted { max-width: 70ch; font-size: 18px; line-height: 1.6; }

/* ---------- 2. Rich text inside content sections ---------- */
.section .prose {
  font-size: 18px;
  line-height: 27px;
  color: var(--c-text);
}
.section .prose h2,
.section .prose h3 { margin: 36px 0 16px; }
.section .prose h2:first-child,
.section .prose h3:first-child { margin-top: 0; }

.section .prose p { max-width: var(--text-col); margin: 0 0 18px; }
.section .prose ul,
.section .prose ol { max-width: var(--text-col); padding-left: 26px; margin: 0 0 18px; }
.section .prose li { margin-bottom: 10px; line-height: 1.5; }
.section .prose li::marker { color: var(--c-primary); }
.section .prose a {
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section .prose blockquote {
  max-width: var(--text-col);
  margin: 26px 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--c-primary);
  color: var(--c-dim);
}
.section .prose figure { margin: 28px 0; }
.section .prose img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.section .prose figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-dim-2);
}
.section .prose table { max-width: 100%; font-size: 16px; }
.section .prose th,
.section .prose td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.section .prose th {
  font-family: var(--ff-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.section .prose thead th { border-bottom-color: rgba(1, 0, 73, .28); }

/* ---------- 3. Page header ---------- */
.page-header {
  padding: 36px 0 30px;
  background: var(--c-bg);
}
.page-header__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 40px;
}
.page-header__grid.is-split,
.page-header__grid:has(.page-header__media) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: center;
}
.page-header h1 {
  font-size: 36px;
  line-height: 43px;
  color: var(--c-text);
}
.page-header__lead {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-dim);
}
.page-header__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* page-header buttons are the small pills of the sample */
.page-header .btn-row .btn {
  min-width: 0;
  min-height: 46px;
  padding: 7px 24px;
  border-radius: var(--radius-lg);
  font-size: 16px;
  line-height: 16px;
}

.crumbs { margin: 0 0 18px; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 700 12px/1.4 var(--ff-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-dim-2);
}
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: rgba(1, 0, 73, .28); }
.crumbs a { color: inherit; }

@media (min-width: 768px) {
  .page-header__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 30px;
    row-gap: 14px;
  }
  .page-header__head h1 { grid-column: 1; }
  .page-header__lead { grid-column: 1; }
  .page-header__head .btn-row { grid-column: 2; grid-row: 1 / -1; align-self: center; }}

/* ---------- 4. Long text section (inner pages) ---------- */
.section--text { padding: 36px 0 45px; }

/* 1200px column, centred heading, measured text lines */
.section--text .section__title {
  max-width: 1110px;
  margin: 0 auto 22px;
  font-size: 36px;
  line-height: 43px;
  text-align: center;
  color: var(--c-text);
}
.section--text .prose {
  max-width: 1200px;
  margin: 0 auto;
}
.section--text .prose > * {
  max-width: 1110px;
  margin-left: auto;
  margin-right: auto;
}
.section--text .prose > figure,
.section--text .prose > .table-wrap { max-width: 1024px; }
.section--text .prose > blockquote { max-width: 72ch; }

/* ---------- 5. Pick cards (reviewed apps / games) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-content: start;
  gap: 0;
  min-height: 200px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--c-soft);
  box-shadow: 0 4px 20px rgba(1, 0, 73, .06);
}

/* the preview fills the left column and spans every row */
.card > :first-child:is(img, picture, figure, .card__media) {
  grid-column: 1;
  grid-row: 1 / span 6;
  width: 200px;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}
.card > img { aspect-ratio: 1 / 1; }
.card > *:not(:first-child) {
  grid-column: 2;
  margin: 0 20px;
}
.card > *:not(:first-child):first-of-type { margin-top: 20px; }
.card > :last-child { margin-bottom: 20px; }

.card h3 {
  margin-top: 2px;
  font-size: 25.2px;
  line-height: 32px;
  text-transform: none;
}
.card p {
  max-width: none;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-dim);
}

/* round ranked badge (sample: 40x40, radius 50, gradient, soft pink shadow) */
.card__icon,
.card__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background-image: var(--grad-badge);
  box-shadow: rgba(255, 107, 157, .4) 0 2px 10px 0;
  color: #ffffff;
  font: 700 16px/16.8px var(--ff-heading);
  text-align: center;
}
.card__icon svg { width: 20px; height: 20px; }

/* card button (sample: 174x46, radius 30, 16px/700) */
.card .btn {
  min-width: 0;
  min-height: 46px;
  width: 174px;
  padding: 7px 18px;
  justify-self: start;
  border-radius: var(--radius-lg);
  font-size: 16px;
  line-height: 16px;
}
.card .btn--block { width: 100%; justify-self: stretch; }

@media (hover: hover) {
  .card { transition: box-shadow .25s var(--ease-out); }
  .card:hover { box-shadow: 0 10px 28px rgba(1, 0, 73, .12); }}

/* ---------- 6. Steps ---------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 24px 24px 24px 78px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-card);
}
.steps li::before {
  content: "#" counter(step);
  position: absolute;
  left: 20px;
  top: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad-badge);
  box-shadow: 0 2px 10px rgba(255, 107, 157, .4);
  color: #ffffff;
  font: 700 15px/42px var(--ff-heading);
  text-align: center;
}
.steps h3 { margin: 0 0 8px; }
.steps p {
  max-width: none;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-dim);
}

/* ---------- 7. FAQ accordion ---------- */
.section--faq { padding: 45px 0 55px; }
.faq { display: flex; flex-direction: column; max-width: 900px; }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq details:first-child { border-top: 1px solid var(--c-line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font: 700 18px/1.5 var(--ff-heading);
  color: var(--c-text);
  transition: color .2s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--c-primary);
  background:
    linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 18px no-repeat;
  transition: transform .3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) {
  .faq summary:hover { color: var(--c-primary); }}

.faq__a {
  padding: 0 0 22px;
  max-width: 78ch;
}
.faq__a p {
  max-width: none;
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 27px;
  color: var(--c-dim);
}
.faq__a p:last-child { margin-bottom: 0; }
.faq__a ul,
.faq__a ol { margin: 0 0 12px; padding-left: 24px; color: var(--c-dim); }
.faq__a li { margin-bottom: 6px; font-size: 18px; line-height: 27px; }
.faq__a a { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; }
.faq details[open] .faq__a { animation: faq-in .3s var(--ease-out) both; }

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 8. CTA ---------- */
.section--cta { padding: 45px 0; }
.cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 45px;
  border-radius: var(--radius-md);
  background: var(--nav-grad);
  box-shadow: 0 18px 40px rgba(1, 0, 73, .18);
  color: #ffffff;
}
.cta-box__text { max-width: 62ch; }
.cta-box h2 {
  margin: 0;
  color: #ffffff;
  font-size: 25.2px;
  line-height: 31px;
}
.cta-box p {
  max-width: none;
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}
.cta-box .btn { flex: 0 0 auto; }

/* ---------- 9. Contacts ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.contact-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-card);
}
.contact-item > span {
  font: 700 13px/1.4 var(--ff-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-dim-2);
}
.contact-item a,
.contact-item p {
  max-width: none;
  margin: 0;
  font: 700 18px/1.5 var(--ff-heading);
  color: var(--c-text);
}

/* ---------- 10. Legal text ---------- */
.section--legal { padding: 45px 0 55px; }
.section--legal .container { max-width: 940px; }
.section--legal .prose { font-size: 16px; line-height: 26px; }
.section--legal .prose h2 { font-size: 21px; line-height: 27px; }
.section--legal .prose h3 { font-size: 17px; line-height: 24px; }

/* ---------- 11. Posts / related grid ---------- */
.section--posts { padding: 45px 0 60px; }
.section--related { padding: 45px 0; }

.posts__bar { margin: 0 0 30px; }
.pchips { display: flex; flex-wrap: wrap; gap: 10px; }
.pchip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: 700 12px/12px var(--ff-heading);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.pchip[aria-pressed="true"] { background: var(--c-primary); color: #ffffff; }
@media (hover: hover) {
  .pchip:hover { background: var(--c-primary); color: #ffffff; }}

.sil-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 26px;
}
.sil-post {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.sil-post__media {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--c-soft);
}
.sil-post__img {
  width: 100%;
  aspect-ratio: 1.3;
  object-fit: cover;filter:none;
  transform: scale(1.04);
  transition: transform .25s var(--ease-out), filter .25s var(--ease-out);
}
.sil-post__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: 700 11px/11px var(--ff-heading);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sil-post__link {
  font: 700 16px/22px var(--ff-heading);
  color: var(--c-text);
  text-wrap: pretty;
}
.sil-post__text {
  max-width: 48ch;
  margin: 0;
  font-size: 15px;
  line-height: 22px;
}
.sil-post__date { font-size: 13px; line-height: 1.4; color: var(--c-dim-2); }

@media (hover: hover) {
  .sil-post__media:hover .sil-post__img { transform: scale(1.09);filter:none; }
  .sil-post__link:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }}

.sil-posts__more { margin: 34px 0 0; text-align: center; }
.sil-posts__more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 18px;
  border-radius: var(--radius-sm);
  background: var(--c-primary);
  color: #ffffff;
  font: 700 16px/16px var(--ff-heading);
  text-transform: uppercase;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
@media (hover: hover) {
  .sil-posts__more a:hover {
    background: #ffffff;
    color: var(--c-primary);
    box-shadow: inset 0 0 0 1px currentColor;
  }}

/* pager */
.pager { margin: 40px 0 0; }
.pager__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pager__list li { display: inline-flex; }
.pager__num,
.pager__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font: 700 16px/1 var(--ff-heading);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.pager__next { font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.pager__num[aria-current="page"] { background: var(--c-primary); color: #ffffff; }
.pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  color: var(--c-dim-2);
  font: 700 16px/1 var(--ff-heading);
}
@media (hover: hover) {
  .pager__num:hover,
  .pager__next:hover { background: rgba(245, 76, 145, .12); color: var(--c-primary); }}

.posts__empty {
  max-width: none;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-dim);
  text-align: center;
}

/* ---------- 12. Tag ribbons (‹ › arrows + swipe) ---------- */
.ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}
.ribbon__track {
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  margin: 0;
  padding: 2px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ribbon__track::-webkit-scrollbar { display: none; }
.ribbon__track > li { flex: 0 0 auto; scroll-snap-align: start; }
.ribbon__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 18px;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.ribbon__nav[disabled] { opacity: .45; cursor: default; }
.ribbon__nav svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .ribbon__nav:not([disabled]):hover { background: var(--c-primary); color: #ffffff; }}

/* ---------- 13. Summary ---------- */
.sil-summary {
  padding: 30px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-card);
}
.sil-summary__title { margin: 0 0 18px; font-size: 22px; line-height: 28px; }
.sil-summary ul { display: grid; gap: 12px; }
.sil-summary li {
  position: relative;
  padding-left: 34px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-dim);
}
.sil-summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--grad-badge);
}
.sil-summary li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

/* ---------- 14. Responsive ---------- */
@media (max-width: 991px) {
  .page-header__grid.is-split,
  .page-header__grid:has(.page-header__media) { grid-template-columns: minmax(0, 1fr); }
  .sil-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .section { padding: 7px 0 30px; }
  .section__head { margin-bottom: 22px; }
  .section h2 { font-size: 18.9px; line-height: 23px; }
  .section h3 { font-size: 17px; line-height: 22px; }
  .section__head .muted { font-size: 15px; }

  .section .btn,
  .longread .btn {
    min-width: 0;
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 16px;
    line-height: 16px;
    border-radius: var(--radius-lg);
  }
  .card .btn { width: 100%; }

  .section .prose { font-size: 15px; line-height: 22.5px; }
  .section .prose h2 { font-size: 18.9px; line-height: 23px; margin: 26px 0 12px; }
  .section .prose h3 { font-size: 17px; line-height: 22px; margin: 22px 0 10px; }
  .section .prose ul,
  .section .prose ol { padding-left: 22px; }
  .section .prose li { margin-bottom: 8px; }
  .section .prose th,
  .section .prose td { padding: 10px 10px; }
  .section .prose table { font-size: 14px; }

  .page-header { padding: 24px 0 20px; }
  .page-header h1 { font-size: 26px; line-height: 31px; }
  .page-header__lead { font-size: 15px; }
  .page-header .btn-row { width: 100%; }
  .page-header .btn-row .btn { width: 100%; }
  .crumbs { margin-bottom: 12px; }

  .section--text { padding: 24px 0 30px; }
  .section--text .section__title { font-size: 26px; line-height: 31px; margin-bottom: 16px; }

  /* picks stack: one card per row, full width preview */
  .cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .card > :first-child:is(img, picture, figure, .card__media) {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .card > *:not(:first-child) { grid-column: 1; margin: 0 18px; }
  .card > *:not(:first-child):first-of-type { margin-top: 16px; }
  .card > :last-child { margin-bottom: 18px; }
  .card h3 { font-size: 19px; line-height: 24px; }
  .card p { font-size: 15px; line-height: 22px; }

  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .steps li { padding: 20px 18px 20px 70px; }
  .steps li::before { left: 16px; top: 18px; }

  .faq summary { font-size: 16px; padding: 18px 0; }
  .faq__a { padding-bottom: 18px; }
  .faq__a p,
  .faq__a li { font-size: 15px; line-height: 22.5px; }

  .cta-box { padding: 26px 20px; border-radius: var(--radius-sm); gap: 20px; }
  .cta-box h2 { font-size: 18.9px; line-height: 23px; }
  .cta-box p { font-size: 15px; }
  .cta-box .btn { width: 100%; }

  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .contact-item { padding: 20px; }

  .sil-posts { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sil-post__link { font-size: 16px; line-height: 22px; }
  .pager__num,
  .pager__next,
  .pager__gap { min-width: 44px; height: 44px; }

  .ribbon__track { margin: 0 -13px; padding: 2px 13px; }
  .ribbon__nav { width: 44px; height: 44px; }

  .sil-summary { padding: 22px 18px; }
  .sil-summary__title { font-size: 19px; line-height: 24px; }
  .sil-summary li { font-size: 15px; }}
/* ==========================================================================
   Blog — article cards, related strip, takeaway panel, article body,
   table of contents, article meta and the reading-progress bar.
   Extends styles.core.css. Palette comes from the injected tokens only.
   ========================================================================== */

/* ---------- 1. Blog list (data-role="posts") ---------- */
.sil-blog { padding: 30px 0 45px; }

.sil-blog__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 30px;
}
.sil-blog__filters:empty { display: none; margin: 0; }

.sil-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: 700 12px/12px var(--ff-heading);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.sil-chip[aria-pressed="true"] { background: var(--c-primary); color: #ffffff; }

@media (hover: hover) {
  .sil-chip:hover { background: var(--c-primary); color: #ffffff; }}

/* ---------- 2. Post card (shared by posts + related) ---------- */
.sil-posts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 24px;
}

.sil-post {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.sil-post__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: rgba(1, 0, 73, .06);
  background: color-mix(in srgb, var(--c-text) 8%, var(--c-bg));
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.sil-post__img[src=""] { display: none; }
.sil-post__img:not([src]) { display: none; }

.sil-post__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: 700 11px/12px var(--ff-heading);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sil-post__link {
  font: 700 19px/1.35 var(--ff-heading);
  color: var(--c-text);
  text-wrap: balance;
  transition: color .2s var(--ease-out);
}
/* the whole card is clickable through the title link */
.sil-post__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.sil-post__text {
  display: -webkit-box;
  max-width: 48ch;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font: 400 15px/1.55 var(--ff-body);
  color: rgba(1, 0, 73, .72);
  color: color-mix(in srgb, var(--c-text) 70%, var(--c-bg));
}

.sil-post__date {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font: 400 13px/19px var(--ff-body);
  font-variant-numeric: tabular-nums;
  color: rgba(1, 0, 73, .56);
  color: color-mix(in srgb, var(--c-text) 56%, var(--c-bg));
}
.sil-post__date > span + span::before {
  content: "·";
  margin-right: 6px;
  opacity: .7;
}

@media (hover: hover) {
  .sil-post:hover .sil-post__link { color: var(--c-primary); }
  .sil-post:hover .sil-post__img { transform: translateY(-3px); box-shadow: var(--shadow-md); }}

/* ---------- 3. Repeated elements: pager + empty state ---------- */
.sil-blog__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}
.sil-blog__pager button {
  min-width: 38px;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(1, 0, 73, .05);
  background: color-mix(in srgb, var(--c-text) 7%, var(--c-bg));
  color: var(--c-text);
  font: 700 16px/1 var(--ff-heading);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.sil-blog__pager button[aria-current="page"] {
  background: var(--c-primary);
  color: #ffffff;
}
.sil-blog__pager span {
  padding: 0 4px;
  color: rgba(1, 0, 73, .5);
  color: color-mix(in srgb, var(--c-text) 50%, var(--c-bg));
  font: 700 16px/1 var(--ff-heading);
}

@media (hover: hover) {
  .sil-blog__pager button:hover { background: var(--c-primary); color: #ffffff; }}

.sil-blog-empty {
  max-width: 60ch;
  margin: 0 auto;
  padding: 26px 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: rgba(151, 240, 254, .16);
  background: color-mix(in srgb, var(--c-surface) 16%, var(--c-bg));
  text-align: center;
  font: 400 16px/24px var(--ff-body);
  color: rgba(1, 0, 73, .72);
  color: color-mix(in srgb, var(--c-text) 72%, var(--c-bg));
}

/* ---------- 4. Related strip (data-role="related") ---------- */
.sil-related {
  padding: 45px 0;
  background: rgba(151, 240, 254, .18);
  background: color-mix(in srgb, var(--c-surface) 18%, var(--c-bg));
}
.sil-related .section__head { margin: 0 0 26px; }
.sil-related .sil-posts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
.sil-related .sil-post { gap: 10px; }
.sil-related .sil-post__link { font-size: 17px; }
.sil-related .sil-post__text {
  max-width: 36ch;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 14px;
  line-height: 20px;
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.section__head > h2 { margin: 0; }

.sil-posts__more {
  margin: 30px 0 0;
  max-width: none;
  text-align: center;
}
.sil-posts__more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 18px/1 var(--ff-heading);
  text-transform: uppercase;
  color: var(--c-primary);
}
.sil-posts__more a::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}
@media (hover: hover) {
  .sil-posts__more a:hover { color: var(--c-text); }}

/* ---------- 5. Key-takeaway panel (data-role="summary") ---------- */
.sil-summary-sec { padding: 30px 0; }

.sil-summary {
  max-width: 740px;
  margin: 0 auto;
  padding: 28px 32px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: rgba(151, 240, 254, .2);
  background: color-mix(in srgb, var(--c-surface) 20%, var(--c-bg));
}
.sil-summary__title {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 26.4px;
}
.sil-summary ul { display: grid; gap: 12px; }
.sil-summary li {
  position: relative;
  padding-left: 24px;
  font: 400 17px/1.6 var(--ff-body);
  color: var(--c-text);
}
.sil-summary li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .68em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--c-primary);
}

/* ---------- 6. Article body (data-role="article-text") ---------- */
.sil-article { padding: 34px 0 45px; }

.sil-article__col {
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
}
.sil-article__col > [data-slot="title"] {
  margin: 0 0 22px;
  font-size: 27px;
  line-height: 32px;
  text-transform: none;
  letter-spacing: -.005em;
}

[data-role="article-text"] .prose {
  font-size: 18px;
  line-height: 1.75;
  color: var(--c-text);
}
[data-role="article-text"] .prose p {
  max-width: 72ch;
  margin: 0 auto 20px;
}
[data-role="article-text"] .prose h2,
[data-role="article-text"] .prose h3 {
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--c-text);
}
[data-role="article-text"] .prose h2 { margin: 38px 0 14px; font-size: 27px; line-height: 32px; }
[data-role="article-text"] .prose h3 { margin: 30px 0 12px; font-size: 22px; line-height: 26.4px; }
[data-role="article-text"] .prose h2:first-child,
[data-role="article-text"] .prose h3:first-child { margin-top: 0; }

[data-role="article-text"] .prose ul,
[data-role="article-text"] .prose ol {
  max-width: 72ch;
  margin: 0 auto 20px;
  padding-left: 26px;
}
[data-role="article-text"] .prose li { margin-bottom: 8px; line-height: 1.7; }
[data-role="article-text"] .prose li::marker { color: var(--c-primary); }

[data-role="article-text"] .prose a {
  color: var(--color-link, #221f8a);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  [data-role="article-text"] .prose a:hover { color: var(--c-primary); }}

[data-role="article-text"] .prose strong { font-weight: 700; }

[data-role="article-text"] .prose blockquote {
  max-width: 72ch;
  margin: 26px auto;
  padding: 20px 24px;
  border-left: 0;
  border-radius: var(--radius-md);
  background: rgba(151, 240, 254, .18);
  background: color-mix(in srgb, var(--c-surface) 18%, var(--c-bg));
  font-style: italic;
}
[data-role="article-text"] .prose blockquote p:last-child { margin-bottom: 0; }

[data-role="article-text"] .prose figure { max-width: 100%; margin: 28px auto; }
[data-role="article-text"] .prose img { width: 100%; border-radius: var(--radius-sm); }
[data-role="article-text"] .prose figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: rgba(1, 0, 73, .6);
  color: color-mix(in srgb, var(--c-text) 60%, var(--c-bg));
}

[data-role="article-text"] .prose code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(1, 0, 73, .07);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}
[data-role="article-text"] .prose pre {
  max-width: 100%;
  margin: 0 auto 22px;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: #ffffff;
}
[data-role="article-text"] .prose pre code { padding: 0; background: none; color: inherit; }

[data-role="article-text"] .prose .table-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 22px;
  overflow-x: auto;
}
[data-role="article-text"] .prose table { min-width: 520px; font-size: 16px; }
[data-role="article-text"] .prose th,
[data-role="article-text"] .prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
[data-role="article-text"] .prose th {
  background: rgba(151, 240, 254, .26);
  background: color-mix(in srgb, var(--c-surface) 26%, var(--c-bg));
  font-weight: 700;
}

/* dark long-form variant (home page sections) */
.prose--dark { color: #ffffff; }
.prose--dark h2,
.prose--dark h3 { color: var(--c-surface); text-transform: uppercase; }
.prose--dark a { color: var(--c-surface); }
.prose--dark li::marker { color: var(--c-primary); }
.prose--dark blockquote { background: rgba(255, 255, 255, .07); }
.prose--dark figcaption { color: rgba(255, 255, 255, .72); }

/* ---------- 7. Table of contents inserted by the builder ---------- */
.sil-toc-sec { padding: 26px 0 0; }

.sil-toc {
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  padding: 22px 26px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: rgba(151, 240, 254, .14);
  background: color-mix(in srgb, var(--c-surface) 14%, var(--c-bg));
}
.sil-toc__title {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
}
.sil-toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ns-toc;
}
.sil-toc ol li { margin: 0; }
.sil-toc ol li a {
  position: relative;
  display: block;
  padding: 7px 0 7px 28px;
  border-radius: var(--radius-sm);
  font: 400 16px/22px var(--ff-body);
  color: var(--c-text);
  transition: color .2s var(--ease-out);
}
.sil-toc ol li a::before {
  counter-increment: ns-toc;
  content: counter(ns-toc);
  position: absolute;
  left: 0;
  top: 7px;
  width: 20px;
  font: 700 14px/22px var(--ff-heading);
  color: var(--c-primary);
}
.sil-toc ol li a.is-current { color: var(--c-primary); font-weight: 700; }

@media (hover: hover) {
  .sil-toc ol li a:hover { color: var(--c-primary); }}
/* sticky only helps when the TOC block sits next to a long article */
@media (min-width: 992px) {
  .sil-toc-sec .sil-toc { position: sticky; top: 24px; }
}

/* ---------- 8. Article meta line + article page header ---------- */
.sil-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  max-width: 740px;
  margin: 16px auto 0;
  font: 400 15px/22px var(--ff-body);
  font-variant-numeric: tabular-nums;
  color: rgba(1, 0, 73, .6);
  color: color-mix(in srgb, var(--c-text) 60%, var(--c-bg));
}
.sil-meta > * + *::before {
  content: "·";
  margin-right: 14px;
  opacity: .7;
}

.page-header:has(~ .sil-meta),
.page-header:has(> .sil-meta) { padding: 30px 0 0; }
.page-header:has(~ .sil-meta) h1,
.page-header:has(> .sil-meta) h1 { text-align: left; font-size: 36px; line-height: 1.2; }

/* ---------- 9. Reading progress bar ---------- */
.sil-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 120;
  background: rgba(1, 0, 73, .1);
  pointer-events: none;
}
.sil-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-primary);
  transition: width .12s linear;
}

/* ---------- 10. Responsive ---------- */
@media (min-width: 700px) {
  .sil-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-role="posts"] .sil-posts > .sil-post:first-child { grid-column: span 2; }
}

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

  /* the lead article turns into a wide two-column card */
  [data-role="posts"] .sil-posts > .sil-post:first-child:has(.sil-post__img:not([src=""]):not([src])) {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    align-items: start;
    column-gap: 28px;
    row-gap: 12px;
  }
  [data-role="posts"] .sil-posts > .sil-post:first-child:has(.sil-post__img:not([src=""]):not([src])) .sil-post__img {
    grid-column: 1;
    grid-row: 1 / span 4;
    height: 100%;
    min-height: 250px;
    aspect-ratio: auto;
  }
  [data-role="posts"] .sil-posts > .sil-post:first-child:has(.sil-post__img:not([src=""]):not([src])) .sil-post__tag,
  [data-role="posts"] .sil-posts > .sil-post:first-child:has(.sil-post__img:not([src=""]):not([src])) .sil-post__link,
  [data-role="posts"] .sil-posts > .sil-post:first-child:has(.sil-post__img:not([src=""]):not([src])) .sil-post__text,
  [data-role="posts"] .sil-posts > .sil-post:first-child:has(.sil-post__img:not([src=""]):not([src])) .sil-post__date {
    grid-column: 2;
  }
  [data-role="posts"] .sil-posts > .sil-post:first-child .sil-post__link { font-size: 25px; line-height: 1.25; }
  [data-role="posts"] .sil-posts > .sil-post:first-child .sil-post__text {
    max-width: 54ch;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    font-size: 16px;
  }

  .sil-related .sil-posts { grid-template-columns: repeat(4, minmax(0, 1fr)); }}

@media (max-width: 991px) {
  .sil-related .sil-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sil-related .sil-post__text { max-width: none; }}

@media (max-width: 767px) {
  .sil-blog { padding: 22px 0 30px; }
  .sil-blog__filters { gap: 8px; margin-bottom: 22px; }
  .sil-chip { min-height: 44px; padding: 10px 16px; }

  .sil-posts { gap: 28px; }
  .sil-post__link { font-size: 18px; }
  .sil-post__text { max-width: none; font-size: 15px; }
  .sil-blog__pager button { min-width: 44px; min-height: 44px; }

  .sil-related { padding: 32px 0; }
  /* related posts become a swipeable ribbon */
  .sil-related .sil-posts {
    display: flex;
    gap: 16px;
    margin: 0 -13px;
    padding: 0 13px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sil-related .sil-posts::-webkit-scrollbar { display: none; }
  .sil-related .sil-post { flex: 0 0 78%; scroll-snap-align: start; }

  .sil-summary { padding: 22px 20px; }
  .sil-summary__title { font-size: 19px; line-height: 23px; }
  .sil-summary li { font-size: 16px; line-height: 1.6; }

  .sil-article { padding: 26px 0 34px; }
  .sil-article__col > [data-slot="title"] { font-size: 22px; line-height: 27px; }
  [data-role="article-text"] .prose { font-size: 17px; line-height: 1.7; }
  [data-role="article-text"] .prose h2 { font-size: 22px; line-height: 27px; }
  [data-role="article-text"] .prose h3 { font-size: 19px; line-height: 24px; }

  .sil-toc { padding: 18px 18px; }
  .sil-toc ol li a { padding: 9px 0 9px 26px; }

  .page-header:has(~ .sil-meta) h1,
  .page-header:has(> .sil-meta) h1 { font-size: 26px; }}

@media (max-width: 480px) {
  .sil-related .sil-post { flex: 0 0 84%; }}

/* ---------- 11. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .sil-progress__bar { transition: none; }
  .sil-post__img { transition: none; }
}
/* ==========================================================================
   Point fixes measured against the sample website (loaded last).
   1. Solid buttons are the sample's 219x32 boxes: padding 7px, radius 7px,
      700 18px/18px uppercase label. Content pills on inner pages are the
      sample's 400x53 pills: radius 30, 22.5px label; card pills stay 174x46.
   2. Filter chips use the sample's tag box — 18px/18px label, 7px padding,
      radius 7px (44 px touch target on phones, 16px label).
   3. Pick cards keep the sample's inner order: 200px preview left, copy
      right; the ranked marker stays a 40px circle (radius 50px).
   4. The home long-read starts 7px after the previous band, as in the sample.
   5. Reading measure: desktop lines stay between 65 and 75 characters.
   ========================================================================== */

/* ---------- 1. Buttons ---------- */
.btn {
  min-height: 32px;
  padding: 7px;
  font-family: var(--ff-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  border-radius: var(--radius-sm);
}
.btn--sm {
  min-height: 28px;
  padding: 7px 14px;
  font-size: 14.5px;
  line-height: 14.5px;
}
.btn--lg {
  padding: 15px 40px;
  font-size: 22.5px;
  line-height: 22.5px;
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  /* intro-card CTA — the sample's main button, 219x32 */
  .hero-card__cta {
    min-width: 219px;
    min-height: 32px;
    padding: 7px;
    border-radius: var(--radius-sm);
    font: 700 18px/18px var(--ff-heading);
    text-transform: uppercase;
  }

  /* inner-page content pills — the sample's 400x53, radius 30 */
  .page-header .btn-row .btn,
  .section .btn,
  .longread .btn {
    min-width: 400px;
    min-height: 53px;
    padding: 15px 40px;
    border-radius: var(--radius-lg);
    font-size: 22.5px;
    line-height: 22.5px;
  }

  /* grid cards keep the sample's 174x46 pill */
  .card .btn {
    min-width: 0;
    min-height: 46px;
    width: 174px;
    padding: 7px 18px;
    border-radius: var(--radius-lg);
    font-size: 16px;
    line-height: 16px;
  }
  .card .btn--block { width: 100%; }}

/* ---------- 2. Filter chips ---------- */
.chip,
.pchip,
.sil-chip {
  min-height: 32px;
  padding: 7px;
  border-radius: var(--radius-sm);
  font: 700 18px/18px var(--ff-heading);
  letter-spacing: .02em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .chip,
  .pchip,
  .sil-chip {
    min-height: 44px;
    padding: 7px 12px;
    font-size: 16px;
    line-height: 16px;
  }

  /* the phone main button: full-width 66px bar, 25px padding, square */
  .hero-card__cta {
    min-width: 0;
    width: 100%;
    min-height: 66px;
    padding: 25px;
    border-radius: 0;
    font: 700 16px/16px var(--ff-heading);
  }}

/* ---------- 3. Pick cards: preview left, copy right ---------- */
@media (min-width: 768px) {
  .card {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-content: start;
    min-height: 200px;
  }
  .card > :is(img, picture, figure, .card__media) {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 200px;
    height: 100%;
    min-height: 200px;
    margin: 0;
    object-fit: cover;
    aspect-ratio: 1 / 1;
  }
  .card > *:not(img):not(picture):not(figure):not(.card__media) {
    grid-column: 2;
  }
}

.card__icon,
.card__badge {
  width: 40px;
  height: 40px;
  border-radius: 50px;
}

/* ---------- 4. Home long-read rhythm ---------- */
.longread__inner { padding-top: 7px; }

/* ---------- 5. Reading measure on desktop ---------- */
@media (min-width: 768px) {
  .section--text .prose > p,
  .section--text .prose > ul,
  .section--text .prose > ol,
  .section--text .prose > blockquote,
  .section--text .prose > h2,
  .section--text .prose > h3 {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
  }
  .prose > p,
  .prose > ul,
  .prose > ol { max-width: 72ch; }
}

/* ---------- 6. Hero shell rhythm ---------- */
.hero,
.hero__stage { overflow: visible; }
.hero-card { align-self: start; }
.hero-card__inner > *:last-child { margin-bottom: 0; }
:root{--color-bg:#ffffff;--color-surface:#97f0fe;--color-surface-2:#010049;--color-text:#010049;--color-text-muted:#4b5563;--color-border:rgba(1,0,73,0.1);--color-primary:#9b2bf2;--color-primary-contrast:#ffffff;--color-accent:#9b2bf2;--color-accent-contrast:#ffffff;--color-focus:#9b2bf2;--font-heading:'Heebo', system-ui, sans-serif;--font-body:'Heebo', system-ui, sans-serif;--radius-sm:8px;--radius-md:16px;--radius-lg:999px;--radius-pill:50px;--container:1500px;--container-narrow:1110px;--shadow-sm:0 2px 10px rgba(255,107,157,0.4);--shadow-md:0 4px 20px rgba(1,0,73,0.08);--header-h:177px;--font-display:var(--font-heading)}