:root {
      --ink: #243342;
      --muted: #617688;
      --purple: #2d6f9f;
      --purple-dark: #16496f;
      --lavender: #eef7fc;
      --line: #dbe9f1;
      --paper: #ffffff;
      --soft: #f8fbfd;
      --accent: #78b3d8;
      --max: 1120px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--soft);
      color: var(--ink);
      font: 17px/1.75 Georgia, "Times New Roman", serif;
    }
    a { color: var(--purple); text-underline-offset: 3px; }
    a:hover { color: var(--purple-dark); }
    .wrap { width: min(100% - 36px, var(--max)); margin-inline: auto; }
    .topline { height: 7px; background: linear-gradient(90deg, #a9d5ec, #67a8d1, #dceefa); }
    .hero {
      position: relative;
      overflow: hidden;
      padding: 76px 0 64px;
      color: #173952;
      background: radial-gradient(circle at 82% 12%, #ffffff 0, transparent 28%), linear-gradient(135deg, #f5fafe 0%, #e6f3fa 58%, #d8edf7 100%);
    }
    .hero:after {
      content: "";
      position: absolute;
      width: 410px;
      height: 410px;
      right: -120px;
      bottom: -260px;
      border: 1px solid rgba(57,123,162,.18);
      border-radius: 50%;
      box-shadow: 0 0 0 38px rgba(57,123,162,.035), 0 0 0 78px rgba(57,123,162,.025);
    }
    .eyebrow {
      margin: 0 0 15px;
      color: #477b9b;
      font: 700 12px/1.4 Arial, sans-serif;
      letter-spacing: .17em;
      text-transform: uppercase;
    }
    h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; line-height: 1.22; }
    h1 { max-width: 850px; margin: 0; font-size: clamp(36px, 5.8vw, 64px); letter-spacing: -.045em; }
    .dek { max-width: 780px; margin: 22px 0 0; color: #355970; font-size: clamp(18px, 2.1vw, 21px); }
    .byline { margin-top: 27px; color: #52758c; font: 13px/1.6 Arial, sans-serif; letter-spacing: .025em; }
    .layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 52px; align-items: start; padding: 46px 0 80px; }
    article { min-width: 0; }
    .intro { font-size: 20px; color: #40596c; }
    .takeaway {
      margin: 28px 0 36px;
      padding: 22px 24px;
      border: 1px solid #cfe2ee;
      border-left: 5px solid var(--purple);
      border-radius: 12px;
      background: var(--lavender);
    }
    .takeaway strong { display: block; margin-bottom: 6px; font: 700 14px Arial, sans-serif; color: var(--purple-dark); text-transform: uppercase; letter-spacing: .06em; }
    h2 { margin: 48px 0 15px; color: var(--purple-dark); font-size: clamp(25px, 3vw, 32px); letter-spacing: -.025em; }
    h3 { margin: 26px 0 8px; font-size: 20px; color: #294d66; }
    p { margin: 0 0 18px; }
    ul, ol { padding-left: 24px; margin: 10px 0 22px; }
    li { margin: 0 0 9px; padding-left: 3px; }
    .definition {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 24px 0;
    }
    .definition > div {
      padding: 19px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: white;
    }
    .definition h3 { margin-top: 0; color: var(--purple); }
    .workflow { counter-reset: step; list-style: none; padding: 0; }
    .workflow li {
      position: relative;
      margin: 0 0 14px;
      padding: 18px 20px 18px 60px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: white;
    }
    .workflow li:before {
      counter-increment: step;
      content: counter(step);
      position: absolute;
      left: 18px;
      top: 18px;
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      border-radius: 50%;
      color: white;
      background: var(--purple);
      font: 700 14px Arial, sans-serif;
    }
    .workflow strong { color: var(--purple-dark); }
    .note {
      padding: 19px 21px;
      margin: 24px 0;
      border-radius: 10px;
      background: #f3f8fb;
      border: 1px solid #d8e8f1;
      color: #42586a;
    }
    .cta {
      margin: 42px 0 28px;
      padding: 28px;
      color: var(--ink);
      border: 1px solid #d1e5f0;
      border-radius: 16px;
      background: linear-gradient(135deg, #f4fafe, #dfeff8);
    }
    .cta h2 { margin: 0 0 12px; color: var(--purple-dark); font-size: 25px; }
    .cta p { color: #425e73; }
    .button {
      display: inline-block;
      margin-top: 6px;
      padding: 12px 18px;
      border-radius: 999px;
      color: white;
      background: var(--purple);
      font: 700 14px/1.3 Arial, sans-serif;
      text-decoration: none;
    }
    .button:hover { color: white; background: var(--purple-dark); }
    .faq { border-top: 1px solid var(--line); }
    .faq details { padding: 17px 0; border-bottom: 1px solid var(--line); }
    .faq summary { cursor: pointer; color: var(--purple-dark); font: 700 17px/1.45 Arial, sans-serif; }
    .faq details p { margin: 12px 0 0; }
    aside { position: sticky; top: 20px; }
    .side-card {
      padding: 23px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: white;
      box-shadow: 0 12px 35px rgba(37, 94, 127, .07);
    }
    .side-card h2 { margin: 0 0 14px; font-size: 18px; }
    .side-card ul { margin: 0; padding-left: 18px; font: 14px/1.7 Arial, sans-serif; }
    .side-card li { margin-bottom: 8px; }
    .side-note { margin-top: 16px; color: var(--muted); font: 13px/1.6 Arial, sans-serif; }
    .sources { padding-top: 8px; border-top: 1px solid var(--line); font-size: 15px; }
    .sources li { overflow-wrap: anywhere; }
    footer { padding: 28px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font: 13px/1.65 Arial, sans-serif; }
    @media (max-width: 850px) {
      .layout { grid-template-columns: 1fr; gap: 25px; }
      aside { position: static; order: -1; }
      .side-card { box-shadow: none; }
      .side-card ul { columns: 2; }
    }
    @media (max-width: 560px) {
      body { font-size: 16px; }
      .wrap { width: min(100% - 28px, var(--max)); }
      .hero { padding: 56px 0 46px; }
      .layout { padding-top: 28px; }
      .definition { grid-template-columns: 1fr; }
      .side-card ul { columns: 1; }
      .cta { padding: 23px; }
    }