:root {
      color-scheme: light;
      --ink: #17324f;
      --ink-soft: #455f79;
      --blue: #2e78b7;
      --blue-deep: #185d98;
      --sky: #eaf5fc;
      --sky-strong: #d5eafa;
      --line: #d9e6f0;
      --paper: #ffffff;
      --wash: #f6faff;
      --accent: #c6e7fb;
      --warning: #fff7e8;
      --warning-line: #efcf8e;
      --shadow: 0 20px 55px rgba(30, 75, 115, .09);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background:
        radial-gradient(ellipse at 80% 0%, rgba(210, 235, 251, .65), transparent 34rem),
        linear-gradient(180deg, #f5faff 0, #fff 35rem);
      color: var(--ink);
      font-size: 16px;
      line-height: 1.72;
    }
    a { color: var(--blue-deep); text-underline-offset: .2em; }
    a:hover { color: #0e4777; }
    .page { width: min(1120px, calc(100% - 36px)); margin-inline: auto; }
    .topline {
      padding: 18px 0 12px;
      color: #65809a;
      font-size: .83rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .hero {
      overflow: hidden;
      position: relative;
      padding: clamp(30px, 6vw, 66px);
      border: 1px solid rgba(192, 220, 240, .9);
      border-radius: 28px;
      background:
        linear-gradient(118deg, rgba(255,255,255,.98) 0%, rgba(239,248,255,.95) 64%, rgba(222,241,253,.93) 100%);
      box-shadow: var(--shadow);
    }
    .hero::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -90px;
      top: -120px;
      border: 1px solid rgba(46, 120, 183, .16);
      border-radius: 50%;
      box-shadow: 0 0 0 28px rgba(46,120,183,.035), 0 0 0 58px rgba(46,120,183,.025);
      pointer-events: none;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 17px;
      color: var(--blue-deep);
      font-size: .78rem;
      font-weight: 750;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 24px;
      height: 2px;
      background: var(--blue);
    }
    h1, h2, h3 { color: var(--ink); line-height: 1.2; }
    h1 {
      max-width: 820px;
      margin: 0;
      font-size: clamp(2rem, 5.4vw, 3.55rem);
      letter-spacing: -.045em;
    }
    .hero-lead {
      max-width: 750px;
      margin: 21px 0 0;
      color: var(--ink-soft);
      font-size: clamp(1.04rem, 2vw, 1.2rem);
    }
    .byline {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      margin-top: 26px;
      color: #617b94;
      font-size: .9rem;
    }
    .byline span { display: inline-flex; align-items: center; gap: 8px; }
    .byline span::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #65a5d5;
    }
    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 270px;
      align-items: start;
      gap: 30px;
      margin: 32px 0 70px;
    }
    article, .side-card, .callout, .faq details {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--paper);
      box-shadow: 0 8px 28px rgba(30, 75, 115, .045);
    }
    article { min-width: 0; padding: clamp(22px, 4.4vw, 48px); }
    .summary {
      margin: 0 0 30px;
      padding: 21px 23px;
      border: 1px solid #c8e1f3;
      border-left: 4px solid var(--blue);
      border-radius: 14px;
      background: linear-gradient(110deg, #eff8ff, #f9fcff);
    }
    .summary strong { display: block; margin-bottom: 5px; }
    .summary p { margin: 0; color: var(--ink-soft); }
    .toc { display: none; }
    section { scroll-margin-top: 24px; }
    article section + section { margin-top: 43px; }
    h2 { margin: 0 0 15px; font-size: clamp(1.45rem, 3vw, 1.95rem); letter-spacing: -.025em; }
    h3 { margin: 25px 0 9px; font-size: 1.13rem; }
    p { margin: 0 0 15px; }
    .lede { color: var(--ink-soft); font-size: 1.06rem; }
    .two-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin: 20px 0;
    }
    .info-card {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--wash);
    }
    .info-card b { display: block; margin-bottom: 6px; color: var(--blue-deep); }
    .info-card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
    .checklist { margin: 14px 0 0; padding-left: 1.25rem; }
    .checklist li { padding-left: .25rem; margin: 8px 0; }
    .checklist li::marker { color: var(--blue); }
    .callout {
      margin: 30px 0;
      padding: 23px 25px;
      background: linear-gradient(120deg, #eef8ff 0%, #fff 100%);
      border-color: #c7dfef;
    }
    .callout p:last-child { margin-bottom: 0; }
    .callout-label {
      display: block;
      margin-bottom: 7px;
      color: var(--blue-deep);
      font-size: .77rem;
      font-weight: 750;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      margin-top: 7px;
      padding: 12px 18px;
      border: 1px solid var(--blue-deep);
      border-radius: 999px;
      background: var(--blue-deep);
      color: white;
      font-weight: 700;
      text-decoration: none;
      transition: transform .18s ease, background .18s ease;
    }
    .button:hover { transform: translateY(-1px); background: #104c7c; color: white; }
    .alert {
      margin-top: 19px;
      padding: 18px 20px;
      border: 1px solid var(--warning-line);
      border-radius: 14px;
      background: var(--warning);
      color: #594722;
    }
    .alert strong { display: block; margin-bottom: 4px; color: #503d18; }
    .alert p { margin: 0; }
    .faq { display: grid; gap: 11px; margin-top: 20px; }
    .faq details { overflow: hidden; }
    .faq summary {
      position: relative;
      padding: 17px 50px 17px 19px;
      cursor: pointer;
      list-style: none;
      color: var(--ink);
      font-weight: 700;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
      content: "+";
      position: absolute;
      top: 50%;
      right: 19px;
      transform: translateY(-50%);
      color: var(--blue);
      font-size: 1.35rem;
      font-weight: 500;
    }
    .faq details[open] summary::after { content: "−"; }
    .faq details[open] summary { background: #f4faff; }
    .answer { padding: 2px 19px 18px; color: var(--ink-soft); }
    .answer p:last-child, .answer ul:last-child { margin-bottom: 0; }
    .references { padding-left: 1.2rem; }
    .references li { margin: 9px 0; }
    .fineprint {
      margin-top: 25px;
      padding-top: 19px;
      border-top: 1px solid var(--line);
      color: #647d93;
      font-size: .88rem;
    }
    aside { position: sticky; top: 20px; }
    .side-card { padding: 22px; }
    .side-card h2 { margin-bottom: 12px; font-size: 1.05rem; }
    .side-card ol { margin: 0; padding-left: 1.15rem; color: var(--ink-soft); font-size: .92rem; }
    .side-card li { margin: 8px 0; }
    .side-card a { text-decoration: none; }
    .side-card a:hover { text-decoration: underline; }
    .side-note {
      margin-top: 14px;
      padding: 16px;
      border-radius: 14px;
      background: var(--sky);
      color: var(--ink-soft);
      font-size: .91rem;
    }
    footer {
      padding: 24px 0 38px;
      border-top: 1px solid var(--line);
      color: #71869a;
      font-size: .86rem;
    }
    footer .page { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
    @media (max-width: 850px) {
      .layout { grid-template-columns: 1fr; }
      aside { position: static; order: -1; }
      .side-card { padding: 18px 20px; }
      .side-card ol { columns: 2; column-gap: 30px; }
    }
    @media (max-width: 600px) {
      .page { width: min(100% - 24px, 1120px); }
      .topline { padding-top: 13px; font-size: .72rem; }
      .hero { border-radius: 20px; padding: 28px 22px; }
      .hero::after { width: 180px; height: 180px; right: -95px; top: -90px; }
      .layout { gap: 15px; margin-top: 17px; }
      article { padding: 22px 18px; border-radius: 16px; }
      .two-col { grid-template-columns: 1fr; }
      .side-card ol { columns: 1; }
      .summary, .callout { padding: 17px; }
      .faq summary { padding-left: 15px; }
      .answer { padding-left: 15px; padding-right: 15px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
    }