:root {
  --bg: #ffffff;
  --text: #1a1a2e;
  --text-light: #555;
  --accent: #2d6a4f;
  --accent-light: #52b788;
  --border: #e0e0e0;
  --code-bg: #f5f5f5;
  --table-stripe: #f8f9fa;
  --table-header: #2d6a4f;
  --table-header-text: #ffffff;
  --link: #1b4332;
  --link-hover: #2d6a4f;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --page-max: 820px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  font-size: 17px;
  overflow-x: hidden;
}

/* ---------- Site header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.site-header .inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-nav a {
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  border-bottom: none;
  font-weight: 500;
}

.site-nav a:hover {
  color: var(--accent);
  border-bottom: none;
}

.site-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Main content ---------- */
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 24px 72px;
}

.page-head {
  border-bottom: 3px solid var(--accent);
  padding-bottom: 20px;
  margin-bottom: 28px;
}

.page-head .kicker {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}

h1 {
  font-size: 30px;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 12px;
}

.page-head h1 {
  margin-bottom: 0;
}

h2 {
  font-size: 24px;
  color: var(--accent);
  margin-top: 56px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

h3 {
  font-size: 19px;
  color: var(--text);
  margin-top: 28px;
  margin-bottom: 10px;
}

p {
  margin-bottom: 18px;
}

strong {
  font-weight: 700;
  color: var(--text);
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid #95d5b2;
}

a:hover {
  color: var(--link-hover);
  border-bottom: 2px solid var(--accent);
}

ul,
ol {
  margin-bottom: 18px;
  padding-left: 28px;
}

li {
  margin-bottom: 8px;
}

code {
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 15px;
}

blockquote {
  border-left: 4px solid var(--accent-light);
  padding: 12px 20px;
  margin: 18px 0;
  color: var(--text-light);
  font-style: italic;
  background: #f9fdfb;
  border-radius: 0 6px 6px 0;
}

/* ---------- Table of contents ---------- */
.toc {
  background: #f8f9fa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 36px;
}

.toc h2 {
  margin-top: 0;
  font-size: 18px;
  border-bottom: none;
  padding-bottom: 0;
}

.toc summary {
  cursor: pointer;
  margin-top: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  border-bottom: none;
  padding: 2px 0;
  list-style: none;
}

.toc summary::-webkit-details-marker {
  display: none;
}

.toc summary::after {
  content: "\25BE";
  float: right;
  font-size: 14px;
  color: var(--text-light);
  font-weight: 400;
}

.toc:not([open]) summary::after {
  content: "\25B8";
}

.toc[open] summary {
  margin-bottom: 12px;
}

.toc ol {
  margin-bottom: 0;
}

.toc li {
  margin-bottom: 6px;
}

.toc a {
  border-bottom: none;
}

/* ---------- Tables ---------- */
.table-wrapper {
  overflow-x: auto;
  margin: 24px 0;
  border-radius: 8px;
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 700px;
}

thead {
  background: var(--table-header);
  color: var(--table-header-text);
}

th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

td {
  padding: 10px 14px;
font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}


tbody tr:nth-child(even) {
  background: var(--table-stripe);
}

tbody tr:hover {
  background: #eef5f1;
}

/* ---------- Strategy steps / callouts ---------- */
.strategy-step {
  margin: 20px 0;
  padding: 16px 20px;
  background: #f8f9fa;
  border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0;
}

.strategy-step strong {
  color: var(--accent);
}

.bottom-line {
  background: linear-gradient(135deg, #f0f7f4, #e8f5e9);
  border: 1px solid var(--accent-light);
  border-radius: 10px;
  padding: 28px;
  margin-top: 40px;
}

.bottom-line p:last-child {
  margin-bottom: 0;
}

.callout {
  background: #f8f9fa;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 24px 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

.updated {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 26px;
}

.contact-card {
  background: #f8f9fa;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 26px;
  margin: 26px 0;
}

.contact-card .email {
  font-size: 20px;
  font-weight: 700;
  word-break: break-all;
}

.contact-card .email a {
  border-bottom: 2px solid var(--accent-light);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: #fafafa;
  margin-top: 20px;
}

.site-footer .inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 28px 24px 40px;
}

.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.footer-nav a {
  font-size: 15px;
  color: var(--text);
  border-bottom: none;
}

.footer-nav a:hover {
  color: var(--accent);
  border-bottom: none;
}

.site-footer p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 8px;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .container {
    padding: 24px 16px 56px;
  }

  .site-header .inner {
    padding: 12px 16px;
  }

  .site-footer .inner {
    padding: 24px 16px 32px;
  }

  h1 {
    font-size: 26px;
  }

  h2 {
    font-size: 21px;
    margin-top: 40px;
  }

  body {
    font-size: 16px;
  }

  .site-nav {
    gap: 14px;
  }

  .site-nav a {
    font-size: 14px;
  }

  .site-header .inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .brand {
    align-self: flex-start;
  }

  .site-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar { display: none; }

  .site-nav a {
    white-space: nowrap;
    padding: 10px 0;
  }

  .contact-card .email {
    font-size: 17px;
  }
}

/* ---------- answer card (first screen should be the answer) ---------- */

.answer {
  margin: 22px 0 26px;
  padding: 20px 22px;
  background: #f3f9f5;
  border: 1px solid #d9ece2;
  border-left: 4px solid var(--accent);
  border-radius: 10px;
}

.answer h2 {
  margin: 0 0 12px;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.answer p.big {
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--text);
}

.answer p:last-child {
  margin-bottom: 0;
}

/* ---------- table polish ---------- */

.table-wrapper {
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* ---------- article figures ---------- */

/* sponsored banner: keep the official creative at its native size, never stretch */
figure.ad-banner img {
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 300 / 250;
}

figure {
  margin: 0 0 22px;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

figcaption {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* alias so shared component rules work with this older variable set */
:root {
  --line: var(--border);
  --line-soft: var(--border);
  --bg-soft: var(--table-stripe);
  --ink-soft: var(--text-light);
}

/* ---------- footer last-updated badge ---------- */
.updated-line {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--accent);
  background: #f0f7f4;
  border: 1px solid #d9ece2;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}

/* ---------- mobile tables: rows become cards (2026-09-26) ---------- */
@media (max-width: 1000px) {
  .table-wrapper {
    overflow-x: visible;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    margin: 18px 0;
  }
  .table-wrapper table {
    min-width: 0;
    display: block;
    font-size: 15px;
  }
  .table-wrapper thead {
    display: none;
  }
  .table-wrapper tbody,
  .table-wrapper tr,
  .table-wrapper td {
    display: block;
    width: 100%;
  }
  .table-wrapper tbody tr:nth-child(even) {
    background: #ffffff;
  }
  .table-wrapper tr {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
  }
  .table-wrapper td {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    min-width: 0;
    overflow-wrap: break-word;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border);
    text-align: left;
  }
  .table-wrapper tr td:last-child {
    border-bottom: none;
  }
  .table-wrapper td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--text-light);
    padding-right: 10px;
  }
  .table-wrapper td:first-child::before {
    color: var(--accent);
  }
}

/* ---------- copy button ---------- */

.copyrow {
  margin-top: 14px;
}

.copybtn {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
}

.copybtn:hover {
  background: var(--code-bg);
  border-color: #c6ccd4;
}

.copybtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.copybtn[data-state="ok"] {
  color: var(--accent);
  border-color: var(--accent);
  background: #e8f3ec;
}

/* ---------- inline copy row + seed line ---------- */

.copyrow.inline {
  display: inline-block;
  margin: 0 0 0 8px;
  vertical-align: baseline;
}

.seedline {
  margin: 10px 0 0;
  font-size: 15.5px;
  color: var(--text-light);
}

.seedline code {
  font-size: 16px;
}

.affnote {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--text-light);
}

.affnote a {
  color: var(--accent);
}
@media (max-width: 600px){ .copybtn{ min-height: 44px; padding: 10px 14px; } }

/* appended 2026-10-12: single-line nav at all widths (was @600 only) */
.site-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { white-space: nowrap; padding: 10px 0; }

/* mobile footer nav: one scrollable row (2026-10-13 T1) */
@media (max-width: 600px) {
  .footer-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 12px;
  }
  .footer-nav a {
    white-space: nowrap;
    padding: 6px 0;
  }
}
.footer-nav::-webkit-scrollbar { display: none; }

/* mobile nav tap height >= 46px (2026-10-14 T1) */
@media (max-width: 600px) {
  .site-nav a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
  }
}

/* 2026-10-15 T1: match footer link tap height to the header nav on small screens */
@media (max-width: 600px) {
  .footer-nav a { min-height: 46px; display: inline-flex; align-items: center; }
}

/* ---------- mobile small-text legibility bump (2026-10-16) ---------- */
@media (max-width: 600px) {
  .kicker,
  .page-head .kicker,
  .updated-line,
  .site-footer p,
  .seed li span { font-size: 14px; }
}

/* 2026-10-17 T1: mobile copy button label 13px -> 14px (append at end; .copybtn is defined twice in this file) */
@media (max-width: 600px) {
  .copybtn {
    font-size: 14px;
  }
}

/* ---------- mobile table card: let the field label wrap instead of pushing the page (2026-10-19) ---------- */
@media (max-width: 600px) {
  .table-wrapper td::before {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* 2026-10-20 T1: mobile legibility - unclassed inline <code> 13.8px -> 14px (table paths + seed codes in headings); .seedcode stays 15px */
@media (max-width: 600px) {
  code:not(.seedcode) { font-size: 14px; }
}

/* 2026-10-21 T1: seed codes inside card headings now match the .seedcode chip (were plain inherited 13.8px) */
h3 > code {
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  background: var(--code-bg);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 15px;
  word-break: break-all;
}
@media (max-width: 600px) {
  h3 > code { font-size: 14px; }
}

/* 2026-10-23 T1: kicker desktop 13px -> 14px (legibility of the eyebrow label) */
.kicker, .page-head .kicker, .hero .kicker { font-size: 14px; }

/* 2026-10-24 T1: caption readability - taller leading, capped measure */
figcaption { line-height: 1.65; max-width: 58ch; }

/* 2026-10-25 T1: seed-card field labels + footer prose 13/13.5px -> 14px (desktop floor) */
.seed li span, .site-footer p { font-size: 14px; }

/* 2026-10-26 T1: copy button raised to 14px on desktop (mobile was already 14px) */
.copybtn { font-size: 14px; }

/* 2026-10-28 T1: headline ragging - balance the wrap on page/section titles (browsers without support ignore it) */
h1, h2 { text-wrap: balance; }

/* ---------- wide tables: keep the row label pinned while the rest scrolls ---------- */
@media (min-width: 1001px) {
  .table-wrapper thead th:first-child,
  .table-wrapper tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg, #ffffff);
    box-shadow: inset -1px 0 0 var(--border, #e0e0e0);
  }
  .table-wrapper thead th:first-child {
    background: var(--table-header, #2d6a4f);
    z-index: 3;
  }
  .table-wrapper tbody tr:nth-child(even) td:first-child {
    background: var(--table-stripe, #f8f9fa);
  }
  .table-wrapper tbody tr:hover td:first-child {
    background: #eef5f1;
  }
}

/* 2026-10-29 T1: the last-updated badge was 13px on desktop and 14px on phones - the meta line was smaller on the big screen than on the small one. Raised to 14px everywhere. */
.updated-line { font-size: 14px; }


/* 2026-11-01 PM T1: the reading measure on the five non-article pages. Measured with the
   same exact first-line count at 1280px: the 17px body paragraphs were running 100 characters
   per line (64 of 66 past 75) and the list items 90, because the home page column is 772px
   wide. The copy is now capped in `ch` rather than left to the container - 58ch of the 17px
   system sans brings the median paragraph down to 69 characters with no paragraph past 75,
   and the list items to 64. The cap scales with each element's own font, so the 24px opening
   line and the 14.5px footnote keep their own rhythm. Headings, tables and the hero image
   keep their full width. */
main p, main li { max-width: 58ch; }

/* The text panels are capped to the same measure as the paragraphs inside them, so a panel
   hugs its own copy instead of leaving an empty band of background on the right. No panel
   holds a table - checked across all 46 pages - so nothing gets squeezed. */
.answer, .faq, .callout, .strategy-step { max-width: 58ch; }
/* appended 2026-11-03 (T1): the 2026-10-12 "single-line nav at all widths" change also set
   scrollbar-width:none and hid the webkit scrollbar. There are now 47 nav links; at 1280px
   only 6 are visible and nothing on screen said the strip scrolls, so 41 links looked missing.
   This restores a visible thin scrollbar on desktop only. Mobile keeps the hidden-bar swipe. */
@media (min-width: 1001px) {
  .site-nav {
    scrollbar-width: thin;
    scrollbar-color: #95d5b2 transparent;
    gap: 14px;
    padding-bottom: 6px;
  }
  .site-nav::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .site-nav::-webkit-scrollbar-track {
    background: transparent;
  }
  .site-nav::-webkit-scrollbar-thumb {
    background: #95d5b2;
    border-radius: 3px;
  }
  .site-nav::-webkit-scrollbar-thumb:hover {
    background: #2d6a4f;
  }
  .site-nav a {
    font-size: 13.5px;
    padding: 9px 0;
  }
}

/* 2026-11-04 T1: single-word last lines. Measured before this rule, at 320px: 26 of 102
   paragraphs on the home page ended with one word alone on the final line, 13 of 56 on the
   archive page, 11 of 63 on the old-codes page. Headings were already balanced (2026-10-28);
   body copy was not, and a one-word line is the most visible rag on a narrow column because
   the eye reads it as a missing sentence. text-wrap: pretty lets the browser re-break the
   last few lines to avoid that. It changes no width, font or margin - on a browser that does
   not support the property the declaration is simply ignored. */
main p, main li, .answer .big, .lede, figcaption { text-wrap: pretty; }

/* appended 2026-11-05: phone nav strip had no scroll affordance (49 links, 5142px wide, 3 visible) */
@media (max-width: 600px){
  .site-nav{
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 90%, rgba(0,0,0,0.10) 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 90%, rgba(0,0,0,0.10) 100%);
    overscroll-behavior-x: contain;
  }
  .footer-nav{
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 91%, rgba(0,0,0,0.10) 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 91%, rgba(0,0,0,0.10) 100%);
    overscroll-behavior-x: contain;
  }
}

/* footer current page marker (2026-11-09 T1) */
.footer-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}