:root {
  color-scheme: light;
  --ink: #1a1b20;
  --muted: #545760;
  --line: #c4c6d0;
  --surface: #fdfcff;
  --surface-low: #f7f6f9;
  --blue: #0b57d0;
  --blue-ink: #001b3d;
  --blue-wash: #d3e3fd;
  --blue-wash-2: #eaf2ff;
  --radius: 28px;
  --reading-width: 760px;
  font-family: Roboto, "Roboto Flex", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: #f8fafd; overflow-x: clip; scroll-behavior: smooth; }
body { background: #f8fafd; color: var(--ink); margin: 0; min-width: 280px; overflow-wrap: break-word; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.skip-link { background: var(--blue); color: #fff; left: 12px; padding: 10px 14px; position: fixed; top: -60px; z-index: 10; }
.skip-link:focus { top: 12px; }
.site-header { align-items: center; background: rgb(253 252 255 / .92); border-bottom: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; min-height: 68px; padding: 0 clamp(20px, 5vw, 72px); position: sticky; top: 0; z-index: 3; backdrop-filter: blur(16px); }
.brand { align-items: center; color: var(--ink); display: inline-flex; font-size: 18px; font-weight: 750; gap: 10px; letter-spacing: -.02em; text-decoration: none; }
.brand-mark { align-items: center; background: var(--blue-wash); border-radius: 10px; color: var(--blue-ink); display: inline-flex; height: 32px; justify-content: center; width: 32px; }
.brand-mark svg { height: 19px; width: 19px; }
.header-action { align-items: center; background: var(--blue-wash); border-radius: 999px; color: var(--blue-ink); display: inline-flex; flex: 0 0 auto; font-size: 14px; font-weight: 700; gap: 7px; min-height: 44px; padding: 10px 15px; text-decoration: none; white-space: nowrap; }
article { padding: 0 clamp(16px, 4vw, 64px) 72px; }
.hero { margin: 0 auto; max-width: 1240px; padding: clamp(44px, 8vw, 112px) 0 56px; }
.breadcrumbs { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 8px; margin-bottom: 32px; }
.breadcrumbs a { color: var(--muted); }
.eyebrow { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .1em; margin: 0 0 16px; }
h1, h2, h3 { color: var(--ink); overflow-wrap: anywhere; scroll-margin-top: 100px; }
h1 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -.055em; line-height: .98; margin: 0; max-width: 1030px; }
.lead { color: #3f424a; font-size: clamp(19px, 2vw, 24px); line-height: 1.55; margin: 28px 0 18px; max-width: 850px; }
.article-meta { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 14px; gap: 9px; margin: 0 0 42px; }
figure { margin: 36px 0; }
figure img { background: var(--surface-low); border: 1px solid var(--line); border-radius: 18px; display: block; height: auto; max-width: 100%; width: 100%; }
figcaption { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 10px 4px 0; }
.hero-figure { margin: 0; }
.hero-figure img { border-radius: var(--radius); box-shadow: 0 18px 55px rgb(30 43 68 / .14); }
.guide-layout { display: grid; gap: clamp(32px, 7vw, 112px); grid-template-columns: 190px minmax(0, var(--reading-width)); justify-content: center; margin: 0 auto; max-width: 1120px; }
.toc { align-self: start; border-left: 1px solid var(--line); padding-left: 16px; position: sticky; top: 104px; }
.toc p { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; margin: 0 0 10px; }
.toc ol { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.toc a { color: var(--muted); font-size: 13px; line-height: 1.3; text-decoration: none; }
.toc a:hover { color: var(--blue); }
.article-content { min-width: 0; }
.article-content section { border-top: 1px solid var(--line); padding: 42px 0 14px; }
.article-content section:first-child { border-top: 0; padding-top: 0; }
h2 { font-size: clamp(29px, 4vw, 43px); letter-spacing: -.04em; line-height: 1.08; margin: 0 0 20px; }
h3 { font-size: 21px; letter-spacing: -.02em; line-height: 1.2; margin: 35px 0 10px; }
p, li { font-size: 17px; line-height: 1.72; overflow-wrap: anywhere; }
p { margin: 0 0 20px; }
ul { margin: 0 0 22px; padding-left: 24px; }
li + li { margin-top: 8px; }
code { background: #e9edf5; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; padding: .15em .35em; }
.callout { background: var(--blue-wash-2); border-left: 4px solid var(--blue); border-radius: 0 14px 14px 0; font-size: 16px; line-height: 1.65; margin: 30px 0 6px; padding: 19px 21px; }
.final-cta { align-items: center; background: var(--blue-ink); border: 0 !important; border-radius: var(--radius); color: #eaf2ff; display: grid; justify-items: center; margin-top: 42px; padding: clamp(30px, 5vw, 60px) !important; text-align: center; }
.final-cta h2 { color: #fff; margin-left: auto; margin-right: auto; max-width: 630px; }
.final-cta p:not(.eyebrow) { color: #d3e3fd; margin-left: auto; margin-right: auto; max-width: 600px; }
.final-cta .eyebrow { color: #a8c7fa; }
.cta-actions { align-items: stretch; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; max-width: 100%; width: 100%; }
.primary-cta, .secondary-cta { align-items: center; border-radius: 999px; display: inline-flex; flex: 0 1 auto; font-size: 15px; font-weight: 750; justify-content: center; max-width: 100%; min-height: 48px; padding: 10px 22px; text-align: center; text-decoration: none; }
.primary-cta { background: #fff; color: var(--blue-ink); }
.secondary-cta { border: 1px solid #a8c7fa; color: #fff; }
footer { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 14px 22px; justify-content: center; padding: 32px 20px; }
footer a { color: var(--muted); }

@media (max-width: 850px) {
  .guide-layout { display: block; }
  .toc { border-bottom: 1px solid var(--line); border-left: 0; margin-bottom: 38px; padding: 0 0 22px; position: static; }
  .toc ol { column-gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .site-header { min-height: 60px; padding: 0 16px; }
  .brand { font-size: 16px; }
  .header-action { font-size: 12px; padding: 9px 12px; }
  article { padding-left: 16px; padding-right: 16px; }
  .hero { padding-top: 42px; }
  h1 { font-size: 42px; }
  .lead { font-size: 19px; }
  p, li { font-size: 16px; }
  .toc ol { grid-template-columns: 1fr; }
  .article-content section { padding-top: 34px; }
  figure { margin: 28px 0; }
  .final-cta { border-radius: 22px; }
  .cta-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .primary-cta, .secondary-cta { min-width: 0; width: 100%; }
}
@media (max-width: 360px) {
  .site-header { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .brand { font-size: 0; gap: 0; }
  .brand-mark { height: 30px; width: 30px; }
  .header-action { min-width: 42px; padding: 10px 12px; }
  .header-action { font-size: 0; }
  .header-action span { font-size: 16px; }
  article { padding-left: 12px; padding-right: 12px; }
  .hero { padding-top: 34px; }
  h1 { font-size: 38px; }
  .final-cta { border-radius: 18px; padding: 26px 18px !important; }
}