/* SIE Simplified guide pages. One stylesheet for every guide.
   Everything is scoped under .sg so it cannot collide with the site's own CSS.
   Brand tokens match the live site: Archivo headings, Public Sans body,
   ink #13293D, accent #0E8A6D. The .site-* rules are preview chrome only:
   in production the site's real header and footer replace them.

   Layout (Oct 28, 2026 redesign, after Andrew's review): a full-width title band,
   then ONE centered reading column. Every block in the column shares the same
   left and right edges. No sidebars, nothing hidden behind clicks: everything a
   reader or Google needs is on the page as plain text. */

.sg {
  --ink: #13293D;
  --ink-2: #0C1C2B;
  --body: #22384B;
  --muted: #5A6B77;
  --paper: #FFFFFF;
  --wash: #F4F7F6;
  --band: #EAF2EE;
  --sage: #E2EDE8;
  --accent: #0E8A6D;
  --accent-deep: #0B725A;
  --accent-btn: #0D8266;
  --accent-tint: #E7F3EF;
  --trap: #B3551D;
  --trap-deep: #8F4214;
  --trap-tint: #FBF0E8;
  --line: rgba(19, 41, 61, 0.14);
  --line-soft: rgba(19, 41, 61, 0.08);
  --disp: "Archivo", system-ui, sans-serif;
  --text: "Public Sans", system-ui, sans-serif;
  --col: 760px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  color: var(--body);
  background: var(--paper);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
.sg :where(h1, h2, h3, h4, p, ul, ol, figure, table, blockquote, dl, dd) { margin: 0; }
.sg img, .sg svg { display: block; max-width: 100%; height: auto; }
/* :where() keeps the base link rule at the lowest specificity so buttons and the logo win */
.sg :where(a) { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sg :where(a):hover { color: var(--ink); }
.sg a[data-planned] { text-decoration-style: dotted; }
.sg :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.sg strong { color: var(--ink); font-weight: 650; }

/* ------------------------------------------------------------ the column */
.sg-col { max-width: calc(var(--col) + 48px); margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------ title band */
.sg-hero { background: var(--band); padding: 22px 0 52px; }
.sg-crumbs { font-size: 14px; color: var(--muted); }
.sg-crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sg-crumbs li + li::before { content: "/"; margin-right: 6px; color: rgba(19, 41, 61, .3); }
.sg-crumbs a { color: var(--muted); text-decoration: none; }
.sg-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.sg-hero h1 {
  margin-top: 30px;
  font-family: var(--disp);
  font-variation-settings: "wdth" 104;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.sg-dek { margin-top: 18px; font-size: 20px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.sg-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14.5px; color: var(--muted); }
.sg-meta span { display: inline-flex; align-items: center; gap: 7px; }
.sg-meta svg { width: 15px; height: 15px; flex: none; }
.sg-meta strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ contents */
.sg-toc { margin-top: 40px; padding: 20px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sg-toc-h { font-family: var(--disp); font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.sg-toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 40px; font-size: 16px; line-height: 1.5; }
.sg-toc li { break-inside: avoid; padding: 4px 0; }
.sg-toc li::marker { color: var(--muted); font-size: 14px; }
.sg-toc a { color: var(--body); text-decoration: none; }
.sg-toc a:hover { color: var(--accent-deep); text-decoration: underline; }

/* ------------------------------------------------------------ article */
.sg-article { padding: 8px 0 88px; }
.sg-article > * + * { margin-top: 22px; }
.sg-article > h2 { margin-top: 72px; }
.sg-article > h3 { margin-top: 40px; }
.sg-article > h2 + *, .sg-article > h3 + * { margin-top: 14px; }
.sg-article > .sg-fig, .sg-article > .sg-tablewrap, .sg-article > .sg-steps, .sg-article > .sg-call,
.sg-article > .sg-cta, .sg-article > .sg-quiz { margin-top: 32px; margin-bottom: 8px; }

.sg-article h2 {
  font-family: var(--disp);
  font-weight: 750;
  font-size: clamp(26px, 3.2vw, 33px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  scroll-margin-top: 24px;
  text-wrap: balance;
}
.sg-article h3 { font-family: var(--disp); font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--ink); scroll-margin-top: 24px; }
.sg-article p { text-wrap: pretty; }
.sg-article ul, .sg-article ol { padding-left: 1.3em; }
.sg-article li + li { margin-top: 10px; }
.sg-article li::marker { color: var(--accent); }

/* ------------------------------------------------------------ figures and tables */
.sg-fig { border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 26px 18px; background: var(--paper); }
.sg-fig svg { width: 100%; max-width: 580px; margin-inline: auto; } /* diagram labels stay close to body-text size on desktop */
.sg-fig figcaption, .sg-tablewrap figcaption { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.sg-src { display: block; margin-top: 2px; }

.sg-tablewrap { overflow-x: auto; }
.sg-tablewrap table { width: 100%; border-collapse: collapse; font-size: 16.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.sg-tablewrap th, .sg-tablewrap td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.sg-tablewrap thead th { font-family: var(--disp); font-weight: 700; font-size: 14.5px; color: var(--ink); background: var(--wash); border-bottom: 1px solid var(--line); }
.sg-tablewrap thead th:first-child { border-top-left-radius: var(--r-sm); }
.sg-tablewrap thead th:last-child { border-top-right-radius: var(--r-sm); }
.sg-tablewrap td.n, .sg-tablewrap th.n { text-align: right; white-space: nowrap; }
.sg-tablewrap tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.sg-tablewrap tr.is-hl td, .sg-tablewrap tr.is-hl th { background: var(--accent-tint); }

/* ------------------------------------------------------------ steps (any real sequence) */
.sg .sg-steps-list { list-style: none; padding: 0; margin: 0; }
.sg .sg-steps-list li + li { margin-top: 0; }
.sg-step { position: relative; padding-left: 42px; display: grid; gap: 1px; }
.sg-step-dot { position: absolute; left: 4px; top: 5px; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--paper); }
.sg-step--go .sg-step-dot { border-color: var(--accent); background: var(--accent); }
.sg-step b { font-family: var(--disp); font-size: 17.5px; line-height: 1.45; color: var(--ink); }
.sg-step span:last-child { font-size: 15px; line-height: 1.5; color: var(--muted); }
.sg-wait { position: relative; padding: 14px 0 14px 42px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.sg-wait::before { content: ""; position: absolute; left: 13px; top: -2px; bottom: -2px; border-left: 2.5px dashed #B9C6CF; }
.sg-step:has(+ .sg-wait)::after { content: ""; position: absolute; left: 13px; top: 27px; bottom: -2px; border-left: 2.5px dashed #B9C6CF; }
.sg-step:has(+ .sg-step)::after { content: ""; position: absolute; left: 13px; top: 27px; bottom: -14px; border-left: 2.5px solid #B9C6CF; }
.sg-step + .sg-step { margin-top: 14px; }
.sg-step:has(+ .sg-wait--trap)::after { left: 12px; border-left: 4px solid var(--trap); }
.sg-wait + .sg-step .sg-step-dot { top: 3px; }
.sg-wait--trap { padding: 18px 0 18px 42px; color: var(--trap-deep); font-weight: 700; }
.sg-wait--trap::before { left: 12px; border-left: 4px solid var(--trap); }

/* ------------------------------------------------------------ callouts: two kinds, used sparingly */
.sg-call { border-radius: var(--r-md); padding: 20px 22px 20px 56px; position: relative; }
.sg-call > svg { position: absolute; left: 20px; top: 23px; width: 22px; height: 22px; }
.sg-call h3 { font-family: var(--disp); font-size: 17.5px; font-weight: 700; margin: 0 0 4px; }
.sg-call p + p { margin-top: 10px; }
.sg-call--trap { background: var(--trap-tint); }
.sg-call--trap h3 { color: var(--trap-deep); }
.sg-call--key { background: var(--accent-tint); }
.sg-call--key h3 { color: var(--accent-deep); }

/* ------------------------------------------------------------ worked questions (practice and concept pages only), all text visible */
.sg-quiz { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.sg-quiz-head { background: var(--ink); color: #fff; padding: 16px 24px; }
.sg-quiz-head h3 { font-family: var(--disp); font-size: 18px; font-weight: 700; color: #fff; margin: 0; }
.sg-quiz-head p { margin-top: 2px; font-size: 14px; color: #B9C8D4; }
.sg-q { padding: 24px 24px 26px; }
.sg-q + .sg-q { border-top: 1px solid var(--line); }
.sg-q-num { font-family: var(--disp); font-size: 14px; font-weight: 650; color: var(--muted); }
.sg-q-stem { margin-top: 6px; color: var(--ink); font-weight: 500; }
.sg .sg-q-opts { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 8px; }
.sg .sg-q-opts li + li { margin-top: 0; }
.sg-q-opts li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; }
.sg-q-opts .sg-opt-l { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--disp); font-weight: 700; font-size: 13.5px; color: var(--ink); background: var(--wash); }
.sg-q-opts li.is-right { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.sg-q-opts li.is-right .sg-opt-l { background: var(--accent); color: #fff; }
.sg-q-ans { margin-top: 16px; border-radius: var(--r-sm); background: var(--wash); padding: 16px 18px; font-size: 16.5px; line-height: 1.65; }
.sg-q-ans p + p { margin-top: 8px; }
.sg-q-ans .sg-q-verdict { font-family: var(--disp); font-weight: 700; color: var(--ink); }
.sg-q-ans .sg-q-cite { font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------ buttons and CTAs */
.sg-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-btn); color: #fff; font-family: var(--text); font-weight: 650; font-size: 16px; line-height: 1.25; padding: 13px 22px; border-radius: 8px; text-decoration: none; border: 0; cursor: pointer; text-align: center; transition: background-color .15s ease; }
.sg-btn:hover { background: var(--accent-deep); color: #fff; }

.sg-cta { border-radius: var(--r-lg); background: var(--ink); color: #DCE6EE; padding: 28px 28px 30px; display: grid; gap: 14px; }
.sg-cta h3 { font-family: var(--disp); font-size: 23px; line-height: 1.25; font-weight: 750; color: #fff; margin: 0; }
.sg-cta p { font-size: 17px; line-height: 1.6; }
.sg-cta-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.sg-cta-row small { font-size: 14px; color: #9FB3C3; }

/* ------------------------------------------------------------ FAQ (static: every answer is on the page) */
.sg-faq h3 { font-size: 19px; }
.sg-faq-item { padding: 22px 0; border-top: 1px solid var(--line-soft); }
.sg-faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.sg-faq-item p { margin-top: 8px; }

/* ------------------------------------------------------------ related, sources */
.sg .sg-related { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.sg .sg-related li { margin: 0; border-bottom: 1px solid var(--line); }
.sg-related a { display: grid; gap: 2px; padding: 16px 0; text-decoration: none; }
.sg-related a b { font-family: var(--disp); font-size: 18px; font-weight: 700; color: var(--ink); }
.sg-related a span { color: var(--muted); font-size: 16px; }
.sg-related a:hover b { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.sg-sources { font-size: 15px; line-height: 1.6; color: var(--muted); }
.sg-sources li + li { margin-top: 6px; }
.sg-sources a { color: var(--muted); }
.sg-review { font-size: 15px; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 18px; }

/* ------------------------------------------------------------ closing band */
.sg-band { background: var(--band); }
.sg-band .sg-col { padding-top: 64px; padding-bottom: 68px; }
.sg-band h2 { font-family: var(--disp); font-variation-settings: "wdth" 104; font-weight: 800; font-size: clamp(28px, 3.6vw, 38px); line-height: 1.1; letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; }
.sg-band p { margin-top: 14px; font-size: 18px; }
.sg-band-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.sg-band-row small { font-size: 14.5px; color: var(--muted); }

/* ------------------------------------------------------------ hub page */
.sg-hub-group + .sg-hub-group { margin-top: 56px; }
.sg-hub-group h2 { font-family: var(--disp); font-weight: 750; font-size: 26px; color: var(--ink); margin-bottom: 8px; }

/* ------------------------------------------------------------ preview chrome (replaced by the real site) */
body { margin: 0; }
.site-head { border-bottom: 1px solid rgba(19, 41, 61, .08); background: #fff; }
.site-head .site-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.site-logo { font-family: "Archivo", system-ui, sans-serif; font-weight: 700; font-size: 20px; color: #13293D; text-decoration: none; letter-spacing: -0.01em; }
.site-logo span { color: #0E8A6D; font-weight: 500; }
.site-nav { display: none; gap: 28px; font-size: 15px; }
.site-nav a { color: #22384B; text-decoration: none; }
.site-nav a[aria-current="page"] { color: #13293D; font-weight: 600; }
@media (min-width: 860px) { .site-nav { display: flex; } }
.site-foot { background: #0C1C2B; color: #9FB3C3; font-size: 13.5px; line-height: 1.6; }
.site-foot .site-in { max-width: 1180px; margin: 0 auto; padding: 40px 24px 48px; display: grid; gap: 14px; }
.site-foot a { color: #DCE6EE; }

/* ------------------------------------------------------------ phones */
@media (max-width: 700px) {
  .sg { font-size: 17px; }
  .sg-col { padding: 0 16px; }
  .sg-hero { padding-bottom: 40px; }
  .sg-hero h1 { margin-top: 22px; }
  .sg-dek { font-size: 18px; }
  .sg-toc { margin-top: 28px; }
  .sg-toc ol { columns: 1; }
  .sg-article > h2 { margin-top: 56px; }
  .sg-fig { padding: 18px 14px 14px; }
  .sg-q { padding: 18px 16px 20px; }
  .sg-quiz-head { padding: 14px 16px; }
  .sg-call { padding: 16px 16px 16px 48px; }
  .sg-call > svg { left: 15px; top: 19px; }
  .sg-tablewrap table { font-size: 15px; }
  .sg-tablewrap th, .sg-tablewrap td { padding: 10px 10px; }
  .sg-tablewrap tbody th { white-space: normal; min-width: 5.5em; } /* short labels like "12 to 15" stay on one line */
}

@media (prefers-reduced-motion: reduce) {
  .sg *, .sg *::before, .sg *::after { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .sg-band, .site-head, .site-foot { display: none; }
}