article{overflow-wrap:break-word}
/* Article pages. Uses the tokens defined in home.css. */
.hero .wrap{max-width:820px;margin:0 auto;padding:0 26px}
article .wrap{max-width:640px;margin:0 auto;padding:0 26px}
.hero{background:var(--navy);color:#C9CCD3;padding:60px 0 52px}
.hero .eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin:0 0 22px}
.hero h1{font-family:var(--display);font-size:clamp(32px,5.2vw,48px);line-height:1.1;color:#fff;margin:0 0 20px;font-weight:400;text-wrap:balance}
.hero .deck{font-size:20px;line-height:1.55;color:#D7DCE6;margin:0;max-width:56ch}
.hero .byline{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(201,204,211,.75)}
.hero .byline b{color:#fff;font-weight:600}
article{padding:52px 0 64px}
h2{font-family:var(--display);font-size:29px;line-height:1.2;color:var(--ink-strong);margin:48px 0 16px;font-weight:400;text-wrap:balance}
h3{font-size:20px;font-weight:600;color:var(--ink-strong);margin:32px 0 12px}
p{margin:0 0 19px}
ul,ol{margin:0 0 19px;padding-left:22px}
li{margin:9px 0}
strong{font-weight:700;color:var(--ink-strong)}
a{color:var(--accent-ink)}
.answer{background:var(--callout);border:1px solid var(--callout-rule);border-radius:12px;padding:24px 26px;margin:0 0 32px}
.answer p{margin:0;font-size:20px;line-height:1.6;color:var(--ink-strong)}
.answer .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:11px;font-weight:700}
.tscroll{overflow-x:auto;margin:32px 0 8px;border:1px solid var(--rule);border-radius:12px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:17px;min-width:520px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:600;background:var(--ground-alt);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--ink-strong)}
blockquote{margin:32px 0;padding:22px 26px;background:var(--ground-alt);border-left:3px solid var(--gold);border-radius:0 12px 12px 0}
blockquote p{margin:0;font-family:var(--display);font-size:20px;line-height:1.5;color:var(--ink-strong)}
.checklist{background:var(--ground-alt);border:1px solid var(--rule);border-radius:12px;padding:26px 28px;margin:32px 0}
.checklist h3{margin-top:0}
.checklist ol{counter-reset:c;list-style:none;padding:0;margin:0}
.checklist li{counter-increment:c;position:relative;padding-left:38px;margin:16px 0}
.checklist li::before{content:counter(c);position:absolute;left:0;top:50%;transform:translateY(-50%);width:25px;height:25px;border-radius:50%;background:var(--gold);color:var(--navy);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
.checklist li b{display:block;color:var(--ink-strong)}
.src{font-size:14px;color:var(--ink-muted);margin-top:8px}
.src strong{color:inherit;font-weight:650}
.cta{background:var(--navy);color:#C9CCD3;border-radius:12px;padding:32px 34px;margin:48px 0 0;border:1px solid transparent}
.cta h3{color:#fff;font-family:var(--display);font-size:24px;font-weight:400;margin:0 0 12px}
.cta p{color:rgba(201,204,211,.86);font-size:17px}
.cta p:last-of-type{margin-bottom:0}
.cta p:nth-last-of-type(2){margin-bottom:14px}
.cta p:nth-last-of-type(3){margin-bottom:22px}
/* Two actions, one primary. The ghost button is 9.49:1 on --navy and the gold
   fill is 8.46:1, so both clear AA without relying on the border alone. */
.cta a.btn{display:inline-block;background:var(--gold);color:var(--navy);font-weight:600;padding:13px 24px;border-radius:10px;text-decoration:none;margin:0 10px 10px 0}
.cta a.btn-ghost{background:transparent;color:#C9CCD3;border:1px solid rgba(240,180,41,.55)}
.cta a.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.cta p.cta-foot{font-size:15px;color:rgba(201,204,211,.72);margin-top:14px}
.cta p.cta-foot a{color:#C9CCD3;text-decoration:underline}
.related{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:24px 0 0;margin:48px 0 0}
.related h3{margin-top:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);font-family:var(--sans);font-weight:600}
.related ul{margin:0;padding-left:20px}
.related li{margin:14px 0;font-size:17px;line-height:1.5;color:var(--ink-muted)}
.related a{font-weight:600;display:block;margin-bottom:2px}
.foot{border-top:1px solid var(--rule);margin-top:48px;padding-top:24px;font-size:14px;color:var(--ink-muted)}
.foot b{color:var(--ink-strong)}
@media(max-width:600px){
  .hero .wrap,article .wrap{padding:0 20px}
  .hero{padding:44px 0 38px}
  h2{font-size:24px} h3{font-size:17px}
  .answer p{font-size:17px} .cta h3{font-size:21px} .hero .deck{font-size:18px}
  .answer,.checklist,.cta{padding:20px 21px}
  .related{padding:20px 0 0}
  blockquote{padding:18px 20px} blockquote p{font-size:18px}
  table{min-width:0}
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cta{border-color:var(--gold)}}
:root[data-theme="dark"] .cta{border-color:var(--gold)}

/* Bare element selectors in this file leak into the shared footer, which is
   markup from home.css. Scope them back to the article body. */
.footer li{margin:0}
.footer p{margin:0}
.footer a{text-decoration:none}

/* Wide content scrolls inside its own box; the page body never scrolls
   sideways. Measured: the comparison table pushed an article 270px past a
   320px viewport. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0}
.tablewrap table{margin:0;min-width:520px}
article img,article svg,article pre,article table{max-width:100%}
@media (max-width:480px){
  .cta a.btn{display:block;width:100%;white-space:normal;text-align:center;margin:0 0 10px}
  .cta p:last-of-type a.btn{margin-bottom:0}
}