:root {
  --brand: #0a6a5e; --deep: #0c2f2c; --accent: #f4c15d;
  --sky: #d9e8ee; --grass: #4f7d3c; --soil-1: #5c4330; --soil-2: #7a5b3f; --soil-3: #5a4230; --soil-4: #33261b;
  --water: #7fc4cf; --scum: #d8c48c; --sludge: #2f2318; --concrete: #b9b8ae; --gravel: #9b917f; --pipe: #e8e6dc; --roof: #39524a;
  --deep-green: var(--brand);
  --paper: #fff; --mist: #eaf4f1; --ink: #14282a; --ink-soft: #4b5f60; --line: #d5e2df; --link: #0a5f6b;
  --alert: #a33a1a; --alert-bg: #fbece6;
  --sans: 'Segoe UI Variable Text', 'SF Pro Text', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Segoe UI Variable Display', 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem); --section: clamp(3rem, 7vw, 5.5rem); --measure: 46rem;
  --radius: 14px; --lift: 0 18px 40px -22px rgba(12, 47, 44, .45);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--sans); overflow-wrap: break-word; }
h1, h2, h3 { font-family: var(--display); font-weight: 750; line-height: 1.1; letter-spacing: -.022em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); }
h3 { font-size: 1.25rem; letter-spacing: -.012em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--link); text-underline-offset: .16em; }
a:hover { color: var(--ink); }
img { max-width: 100%; height: auto; }
svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.wrap { width: min(100%, 76rem); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: .5rem; top: -4rem; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 30; }
.skip:focus { top: .5rem; color: #fff; }

/* Header */
.site-banner { margin: 0; padding: .5rem var(--gutter); text-align: center; background: var(--accent); color: var(--ink); font-size: .95rem; font-weight: 600; }
.site-banner a { color: inherit; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .55rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font: 750 1.12rem/1 var(--display); letter-spacing: -.015em; color: var(--ink); text-decoration: none; min-height: 44px; }
.logo { display: block; flex: none; }
.custom-logo { display: block; max-height: 44px; width: auto; }
.menu-toggle { font: 600 1rem var(--sans); color: var(--ink); background: none; border: 1.5px solid var(--line); border-radius: 999px; padding: 0 1rem; min-height: 44px; cursor: pointer; }
.site-nav { display: none; flex-basis: 100%; padding-bottom: .75rem; }
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; }
.site-nav li + li { border-top: 1px solid var(--line); }
.site-nav li a { display: block; padding: .75rem 0; color: var(--ink); font-weight: 550; text-decoration: none; }
.site-nav li a:hover, .site-nav .current-menu-item > a, .site-nav .current-post-ancestor > a { color: var(--brand); }
.site-nav__cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: .5rem; padding: 0 1.15rem; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 650; text-decoration: none; }
.site-nav__cta:hover { background: var(--deep); color: #fff; }
@media (min-width: 66rem) {
  .menu-toggle { display: none; }
  .site-header__row { flex-wrap: nowrap; }
  .site-nav { display: flex; align-items: center; gap: 1.5rem; flex-basis: auto; padding: 0; }
  .site-nav ul { display: flex; gap: 1.35rem; }
  .site-nav li + li { border: 0; }
  .site-nav li a { padding: .5rem 0; font-size: .98rem; }
  .site-nav__cta { margin: 0; }
}

/* Footer */
.site-footer { background: var(--deep); color: #cfe0dc; font-size: .95rem; padding-block: 3.25rem 1.25rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer ul { list-style: none; }
.site-footer li { padding-block: .28rem; }
.site-footer__grid { display: grid; gap: 2rem; }
.site-footer__name { font: 750 1.25rem var(--display); color: #fff; margin-bottom: .4rem; }
.site-footer__head { font-weight: 700; color: #fff; margin-bottom: .35rem; }
.site-footer__legal { margin-top: 2.25rem; color: #a9c0bb; }
.site-footer__legal p { margin: 0; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 3.5rem; } }

/* Homepage blocks */
.home > * { margin-block: 0; }
.home .alignfull { width: 100%; max-width: none; margin-inline: 0; }
.sg-lede { font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem); line-height: 1.5; }
.sg-hero { background: radial-gradient(70rem 34rem at 88% -10%, #16564f 0, transparent 65%), var(--deep); color: #e8f3f0; padding: clamp(2.25rem, 6vw, 5rem) var(--gutter); }
.sg-hero h1 { color: #fff; }
.sg-hero a:not(.wp-block-button__link) { color: #fff; }
.sg-hero .sg-lede { margin: 1.1rem 0 1.6rem; max-width: 34em; }
.sg-hero__grid, .sg-split { width: min(100%, 71rem); margin: 0 auto !important; display: grid !important; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
.sg-hero__grid > *, .sg-split > * { min-width: 0; flex-basis: auto !important; }
@media (min-width: 56rem) { .sg-hero__grid { grid-template-columns: 1.15fr 1fr; } .sg-split { grid-template-columns: 1fr 1.1fr; } }
.sg-panel { background: #fff; color: var(--ink); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.6rem); box-shadow: var(--lift); }
.sg-panel__title { font-size: 1.35rem; margin-bottom: 1rem; color: var(--ink); }
.home-flow { background: var(--sky); padding-top: 2.4rem; }
.sg-section { width: min(100%, 76rem); margin-inline: auto; padding: var(--section) var(--gutter); }
.sg-section > h2 + .sg-lede { margin-top: .6rem; color: var(--ink-soft); }
.sg-section > h2 + .topic-cards { margin-top: 1.75rem; }
.sg-narrow { width: min(100%, 50rem); }
.sg-narrow h2 { margin-bottom: 1rem; }
.sg-band { background: var(--mist); padding: var(--section) var(--gutter); }
.sg-band h2 { margin-bottom: .7rem; }
.sg-dark { background: var(--deep); color: #d6e6e2; padding: var(--section) max(var(--gutter), calc((100% - 71rem) / 2)); }
.sg-dark h2, .sg-dark h3 { color: #fff; }
.sg-dark a { color: #fff; }
.sg-points { display: grid !important; gap: 1.75rem; margin: 1.75rem 0 0 !important; }
.sg-points > * { flex-basis: auto !important; border-top: 2px solid var(--accent); padding-top: .9rem; }
.sg-points p { margin: .45rem 0 0; }
@media (min-width: 48rem) { .sg-points { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .65rem; }
.wp-block-button__link, .button { display: inline-flex; align-items: center; min-height: 46px; padding: .55rem 1.35rem; border: 2px solid transparent; border-radius: 999px; background: var(--accent); color: var(--ink); font: 650 1rem var(--sans); text-decoration: none; cursor: pointer; }
.wp-block-button__link:hover, .button:hover { filter: brightness(1.06); color: var(--ink); }
.is-style-outline .wp-block-button__link { background: transparent; color: inherit; border-color: currentColor; }
.is-style-outline .wp-block-button__link:hover { color: inherit; }

/* Cards */
.tool-cards { list-style: none; display: grid; gap: 1px; margin-top: 1.75rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tool-cards a { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 .8rem; height: 100%; padding: 1.15rem 1.2rem; background: #fff; color: var(--ink); text-decoration: none; transition: background .15s; }
.tool-cards a:hover { background: var(--mist); }
.tool-icon { grid-row: span 2; width: 2.6rem; height: 2.6rem; padding: .5rem; border-radius: 10px; background: var(--mist); color: var(--brand); }
.tool-cards__name { font: 700 1.08rem/1.25 var(--display); letter-spacing: -.01em; }
.tool-cards__job { color: var(--ink-soft); font-size: .96rem; line-height: 1.4; margin-top: .15rem; }
@media (min-width: 40rem) { .tool-cards { grid-template-columns: repeat(2, 1fr); } .tool-cards li:last-child { grid-column: span 2; } }
@media (min-width: 66rem) { .tool-cards { grid-template-columns: repeat(3, 1fr); } .tool-cards li:last-child { grid-column: span 3; } }
.topic-cards { list-style: none; display: grid; gap: 2rem 2.5rem; }
.topic-cards__item > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: .85rem; border-radius: var(--radius); }
.topic-cards__item h3 a { color: var(--ink); text-decoration: none; }
.topic-cards__item h3 a:hover { color: var(--brand); }
.topic-cards__item p { margin: .35rem 0 .5rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.45; }
.topic-cards__item ul { list-style: none; font-size: 1rem; }
.topic-cards__item li { padding-block: .16rem; }
@media (min-width: 40rem) { .topic-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .topic-cards { grid-template-columns: repeat(3, 1fr); } }
.guide-list { list-style: none; display: grid; gap: 1rem; }
.guide-card { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1.15rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.guide-card:hover { border-color: var(--brand); box-shadow: var(--lift); color: var(--ink); }
.guide-card img { display: block; width: calc(100% + 2.4rem); max-width: none; height: auto; margin: -1.15rem -1.2rem .6rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.sg-illustration { margin: 0 0 1.25rem; }
.sg-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); }
.guide-card__title { font: 700 1.12rem/1.25 var(--display); letter-spacing: -.01em; }
.guide-card__text { color: var(--ink-soft); font-size: .96rem; line-height: 1.45; }
@media (min-width: 40rem) { .guide-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .guide-list { grid-template-columns: repeat(3, 1fr); } }

/* Tools */
.tool { display: grid; gap: .9rem; }
.prose .tool { margin: 0 0 1.75rem; padding: clamp(1.1rem, 3vw, 1.5rem); background: var(--mist); border-radius: var(--radius); }
.tool__row { display: grid; gap: .25rem; }
.tool__row label, .tool__set legend { font-weight: 650; }
.tool select, .tool input[type="number"], .tool input[type="search"] { width: 100%; min-height: 46px; padding: .4rem .7rem; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid #9fb4b0; border-radius: 9px; }
.tool__set { margin: 0; padding: 0; border: 0; display: grid; gap: .1rem; }
.tool__set legend { padding: 0; margin-bottom: .35rem; }
.tool__check { display: flex; align-items: flex-start; gap: .55rem; padding-block: .45rem; line-height: 1.35; }
.tool__check input { flex: none; width: 20px; height: 20px; margin: .05rem 0 0; accent-color: var(--brand); }
.tool__result { padding-top: .9rem; border-top: 1px solid var(--line); }
.tool__result p { margin: 0 0 .4rem; font-size: 1rem; line-height: 1.45; }
.tool__big { font: 750 clamp(1.5rem, 1.3rem + .8vw, 1.95rem)/1.15 var(--display) !important; letter-spacing: -.02em; color: var(--brand); }
.tool__table { width: 100%; margin-top: .5rem; border-collapse: collapse; font-size: .98rem; }
.tool__table th, .tool__table td { padding: .35rem 0 !important; background: none !important; text-align: left; font-weight: 500; border-bottom: 1px solid var(--line); }
.tool__table td { text-align: right; font-weight: 650; }
.tool__fine { margin: 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }
.tool__level { padding: .8rem .95rem; margin-bottom: .6rem; border-radius: 10px; background: #fff; border-left: 5px solid var(--brand); }
.tool__level--urgent { background: var(--alert-bg); border-color: var(--alert); }
.tool__level--urgent .tool__big { color: var(--alert); }
.tool__level--soon { border-color: var(--accent); }
.tool__progress { margin: 0; font-weight: 650; }
.tool__progress:empty { display: none; }
.tool .button { background: var(--brand); color: #fff; justify-self: start; }
@media print {
  .site-header, .site-footer, .hub-head .crumbs, .article__side, .related, .sources, .answer, .prose > :not(.tool), .tool .button { display: none !important; }
  .prose .tool { background: none; padding: 0; }
}

/* Pages and guides */
.crumbs { padding-block: 0 .6rem; font-size: .9rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; }
.crumbs li + li::before { content: '/'; margin-inline: .45rem; opacity: .6; }
.crumbs a { color: inherit; }
.hub-head { background: var(--mist); padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 2.75rem); color: var(--ink-soft); }
.hub-head h1 { color: var(--ink); font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); max-width: 20em; }
.hub__intro { font-size: 1.15rem; line-height: 1.5; margin: .8rem 0 0; max-width: 40em; }
.byline { margin: .7rem 0 0; font-size: .92rem; }
.hub, .page-body { padding-block: clamp(1.75rem, 4vw, 3rem) var(--section); }
.page-body .prose { max-width: var(--measure); }
.article { display: grid; gap: 1.5rem; padding-block: clamp(1.5rem, 3.5vw, 2.5rem) var(--section); }
.article__main { min-width: 0; max-width: var(--measure); }
.article__side { min-width: 0; grid-row: 1; }
.article__image { margin: 0 0 1.5rem; }
.article__image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 66rem) {
  .article { grid-template-columns: minmax(0, 1fr) 19rem; gap: 4rem; }
  .article__side { grid-row: auto; grid-column: 2; position: sticky; top: 5.5rem; align-self: start; }
}
.answer { background: var(--mist); border-left: 5px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; margin-bottom: 1.75rem; }
.answer__label { font-weight: 750; margin: 0 0 .2rem; }
.answer p:last-child { margin: 0; }
.toc { font-size: .98rem; margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.toc__title { font-weight: 750; margin: 0 0 .3rem; }
.toc ol { padding-left: 1.2rem; }
.toc li { padding-block: .14rem; }
.side-tool { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 .8rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--deep); color: #fff; text-decoration: none; }
.side-tool .tool-icon { background: rgba(255, 255, 255, .12); color: var(--accent); }
.side-tool .tool-cards__job { color: #cfe0dc; }
.side-tool:hover { color: #fff; box-shadow: var(--lift); }
.side-list { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: .98rem; }
.side-list ul { list-style: none; }
.side-list li { padding-block: .2rem; }
.prose h2 { margin: 2.5rem 0 .7rem; }
.prose h3 { margin: 1.6rem 0 .4rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1em; }
.prose li { margin-bottom: .35em; }
.prose figure.flow { margin: 1.5rem 0; background: var(--sky); padding-top: .5rem; border-radius: var(--radius); }
.prose .flow__svg { height: auto; }
.prose .flow__labels { display: block; }
.prose .wp-block-table { overflow-x: auto; margin: 0 0 1.25rem; }
.prose table:not(.tool__table) { border-collapse: collapse; width: 100%; font-size: 1rem; }
.prose .wp-block-table th, .prose .wp-block-table td { text-align: left; padding: .6rem .7rem; border: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose .wp-block-table th { background: var(--mist); }
@media (max-width: 30rem) { .prose .wp-block-table th, .prose .wp-block-table td { padding: .5rem .4rem; font-size: .92rem; } }
.wp-block-code { padding: .8rem 1rem; overflow-x: auto; background: var(--mist); border-radius: 10px; font-size: .95rem; }
.wp-block-details { border-bottom: 1px solid var(--line); padding-block: .85rem; }
.wp-block-details summary { font-weight: 650; cursor: pointer; }
.wp-block-details p { margin: .5rem 0 0; }
.is-style-sg-safety, .is-style-sg-note, .is-style-sg-local { margin-block: 1.5rem; padding: 1rem 1.2rem; border-radius: var(--radius); }
.is-style-sg-safety { background: var(--alert-bg); border-left: 5px solid var(--alert); }
.is-style-sg-note { background: var(--mist); border-left: 5px solid var(--brand); }
.is-style-sg-local { background: #fdf6e6; border-left: 5px solid var(--accent); }
.callout__title { font-weight: 750; margin-bottom: .3rem; }
.is-style-sg-safety > :last-child, .is-style-sg-note > :last-child, .is-style-sg-local > :last-child { margin-bottom: 0; }
.sources { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .95rem; }
.sources h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.sources ul { list-style: none; }
.sources li { padding-block: .22rem; }
.sources__note { margin: .75rem 0 0; color: var(--ink-soft); font-size: .9rem; }
.related { background: var(--mist); padding-block: var(--section); }
.related h2 { margin-bottom: 1.25rem; }
.ad { margin-block: 1.75rem; }
.ad__label { margin: 0 0 .25rem; color: var(--ink-soft); font-size: .8rem; }
.search-form { display: flex; gap: .5rem; }
.plan__label { font-size: 24px; fill: var(--ink); }
.plan__on-dark { font-size: 22px; fill: #fff; }
.flow figcaption { margin-top: .5rem; padding-inline: .75rem; font-size: .9rem; color: var(--ink-soft); }

.flow { margin: 0; }
.flow__svg { display: block; width: 100%; max-width: none; height: clamp(190px, 46vw, 500px); overflow: visible; font-family: var(--sans); }
.flow { overflow: hidden; background: linear-gradient(var(--sky) 60%, var(--soil-4) 60%); }
.flow__marker circle { fill: #fff; stroke: var(--ink); stroke-width: 2.5; transition: fill 0.15s; }
.flow__marker text { font: 700 21px var(--sans); text-anchor: middle; fill: var(--ink); }
a:hover .flow__marker circle, a:focus-visible .flow__marker circle { fill: var(--scum); }
.flow__label { font: 600 17px var(--sans); fill: #fff; text-anchor: middle; }
.flow__tag text { font: 500 12.5px var(--sans); fill: #1d2620; }
.flow__tag text:last-child { fill: #fff; }
.flow__drop { fill: var(--water); }
.flow__stream { fill: none; stroke: var(--link); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
@media (max-width: 40rem) {
  .home-flow .flow__labels { display: none; }
  .home-flow .flow__marker circle { r: 27px; stroke-width: 3; }
  .home-flow .flow__marker text { font-size: 32px; transform: translateY(4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .flow.is-visible .flow__stream { animation: flow-run 2.6s .2s ease-in-out forwards; }
  .js .flow:not(.is-visible) .flow__drop { opacity: 0; }
  .flow.is-visible .flow__drop { animation: flow-drop 1.1s calc(2.2s + var(--i) * .1s) ease-out backwards; }
  .flow.is-visible .flow__marker circle { animation: marker-pop .5s calc(var(--m, 0) * 1ms) ease-out backwards; }
}
@keyframes flow-run { 0% { opacity: 1; stroke-dashoffset: 1; } 88% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes flow-drop { from { opacity: 0; transform: translateY(-14px); } }


/* Soil line: the site's signature edge */
.hub-head { position: relative; }
.hub-head::after, .site-footer::before { content: ''; position: absolute; inset: auto 0 0; height: 10px; background: linear-gradient(var(--grass) 0 3px, var(--soil-1) 3px 7px, var(--soil-2) 7px 10px); }
.site-footer { position: relative; }
.site-footer::before { inset: 0 0 auto; }

/* Header and reading bar */
.site-header { transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 10px 24px -20px rgba(12, 47, 44, .7); }
.site-nav li a { position: relative; }
@media (min-width: 66rem) {
  .site-nav li a::after { content: ''; position: absolute; inset: auto 0 .2rem; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
  .site-nav li a:hover::after, .site-nav .current-menu-item > a::after, .site-nav .current-post-ancestor > a::after { transform: scaleX(1); }
}
.read-bar { position: fixed; inset: 0 0 auto; z-index: 25; height: 3px; background: linear-gradient(90deg, var(--brand), var(--water)); transform: scaleX(0); transform-origin: left; }
.site-nav.is-open { animation: drop-in .2s ease-out; }

/* Stats strip */
.stats { position: relative; z-index: 2; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); width: min(calc(100% - 2 * var(--gutter)), 71rem); margin: -2.4rem auto -2.4rem; background: #fff; border-radius: var(--radius); box-shadow: var(--lift); }
.stats li { display: grid; gap: .1rem; padding: 1rem clamp(.6rem, 2vw, 1.75rem); text-align: center; }
.stats li + li { border-left: 1px solid var(--line); }
.stats__n { font: 750 clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem)/1 var(--display); letter-spacing: -.03em; color: var(--brand); font-variant-numeric: tabular-nums; }
.stats__label { color: var(--ink-soft); font-size: clamp(.8rem, .75rem + .25vw, .98rem); line-height: 1.25; }
.sg-hero { padding-bottom: clamp(4.5rem, 8vw, 6.5rem); }

/* Hover and press */
.wp-block-button__link, .button, .site-nav__cta { transition: transform .15s, box-shadow .15s, background .15s; }
.wp-block-button__link:hover, .button:hover, .site-nav__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .55); }
.wp-block-button__link:active, .button:active { transform: translateY(0); }
.tool-icon { transition: background .18s, color .18s, transform .18s; }
.tool-cards a:hover .tool-icon { background: var(--brand); color: #fff; transform: scale(1.06) rotate(-3deg); }
.tool-cards__name { transition: color .15s; }
.tool-cards a:hover .tool-cards__name { color: var(--brand); }
.guide-card { transition: border-color .18s, box-shadow .18s, transform .18s; }
.guide-card:hover { transform: translateY(-4px); }
.guide-card img, .topic-cards__item > img { transition: transform .35s; }
.guide-card { overflow: hidden; }
.topic-cards__item > img:hover { transform: scale(1.015); }
.side-tool { transition: box-shadow .18s, transform .18s; }
.side-tool:hover { transform: translateY(-2px); }
.tool select:focus, .tool input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10, 106, 94, .18); outline: 0; }
.wp-block-details summary { transition: color .15s; }
.wp-block-details summary:hover { color: var(--brand); }

/* Motion */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes marker-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes glow { to { transform: translate(-6%, 8%) scale(1.15); } }
@keyframes result-in { from { opacity: .35; transform: translateY(6px); } }
@media (prefers-reduced-motion: no-preference) {
  .sg-hero { position: relative; overflow: hidden; }
  .sg-hero::before { content: ''; position: absolute; top: -30%; right: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(127, 196, 207, .22), transparent 68%); animation: glow 14s ease-in-out infinite alternate; pointer-events: none; }
  .sg-hero__grid { position: relative; }
  .sg-hero h1 { animation: rise .7s ease-out both; }
  .sg-hero .sg-lede { animation: rise .7s .12s ease-out both; }
  .sg-hero .wp-block-buttons { animation: rise .7s .22s ease-out both; }
  .sg-hero .sg-panel { animation: rise .8s .3s ease-out both; }
  .stats { animation: rise .7s .45s ease-out both; }
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--d, 0ms) ease-out, transform .6s var(--d, 0ms) ease-out; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .tool__result.is-new > *, .tool__progress.is-new { animation: result-in .3s ease-out; }
  .wp-block-details::details-content { transition: height .25s, content-visibility .25s allow-discrete; height: 0; overflow: hidden; }
  .wp-block-details[open]::details-content { height: auto; }
  :root { interpolate-size: allow-keywords; }
}
@media print { .read-bar, .stats { display: none; } .js .reveal { opacity: 1; transform: none; } }

.tool__progress + * { margin-top: 0; }
@media (max-width: 30rem) { .prose .wp-block-table td a { overflow-wrap: anywhere; } }