/* Guides: /guides/ (the index) and the articles. Loads after /assets/page.css and uses its tokens and components
   (.crumbs .deflist .compare .note .script .qa .related .btn .link). Behaviour lives in /assets/guides.js.

   Reading rules: one text measure (--g-measure, about 70 characters), 18px body from tablet up, ink-2 text on paper.
   Two right edges only, and clearly different: text stops at the measure; tables, calculators, receipts and the
   call-to-action break out to the full column (--g-wide), which lines up with the byline rule above. Colour stays where page.css
   allows it: the topic line, link underlines, the contents marker, AI steps in the run traces. No cards around prose,
   no tick icons, no mono eyebrows. The robot appears once per page, in the call-to-action block. */

.g-page { --g-measure: 41.5rem; --g-wide: 52rem; }
/* lighter display weight than the service pages: long headlines read calmer at 560 */
.g-page h1, .g-page h2, .g-page h3 { font-weight: 560; }

/* ---------- Article head ---------- */
.g-head { padding: clamp(1.5rem, 1rem + 2vw, 3rem) 0 0; }
.g-head .crumbs { margin-bottom: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); }
.g-head__in { max-width: var(--g-wide); }
.g-head h1 { max-width: 21ch; }
@media (min-width: 1100px) { .g-head__in { max-width: 58rem; } .g-head .g-byline { max-width: var(--g-wide); } }
/* phones: breadcrumbs on one line, the page name truncated */
@media (max-width: 600px) {
  .g-head .crumbs { flex-wrap: nowrap; white-space: nowrap; }
  .g-head .crumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.g-kicker { margin: 0 0 var(--s-4); color: var(--accent-text); font: 600 var(--fs-sm)/1.4 var(--f-body); }
.g-head h1 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4rem); line-height: 1.04; letter-spacing: -.026em; }
.g-dek { max-width: 38rem; margin: var(--s-5) 0 0; color: var(--ink-2); font-size: clamp(1.125rem, 1.04rem + .38vw, 1.3rem); line-height: 1.5; text-wrap: pretty; }

/* Byline: the studio mark, then date, reading time and a link to the sources */
.g-byline { display: flex; align-items: center; gap: .85rem; margin-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.g-byline__mark { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); }
.g-byline__mark svg { width: 24px; height: 24px; }
.g-byline p { display: flex; flex-direction: column; gap: .1rem; margin: 0; }
.g-byline__who { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.g-byline__facts { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.g-byline__facts > span { white-space: nowrap; }
.g-byline__facts a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; white-space: nowrap; }
.g-byline__facts a:hover { color: var(--ink); text-decoration-color: var(--accent); }

/* ---------- Layout: the reading column + a contents rail on wide screens ---------- */
.g-layout { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); padding-bottom: var(--s-8); }
.g-main { min-width: 0; max-width: var(--g-wide); }
@media (min-width: 1100px) {
  .g-layout { grid-template-columns: minmax(0, var(--g-wide)) minmax(0, 13.5rem); justify-content: space-between; column-gap: var(--s-7); }
  .g-toc { position: sticky; top: 108px; grid-column: 2; grid-row: 1; align-self: start; max-height: calc(100vh - 132px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .g-toc-m { display: none; }
}
@media (max-width: 1099px) { .g-toc { display: none; } }

/* Contents rail (desktop): a hairline with the current section marked in the accent */
.g-toc__title { margin: 0 0 .7rem; color: var(--ink); font: 600 var(--fs-xs)/1.3 var(--f-body); }
.g-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.g-toc a { display: block; margin-left: -1px; padding: .34rem 0 .34rem .95rem; border-left: 2px solid transparent; color: var(--muted); font-size: .84rem; line-height: 1.38; text-decoration: none; transition: color .2s, border-color .2s; }
.g-toc a:hover { color: var(--ink); }
.g-toc a[aria-current="true"] { border-left-color: var(--accent); color: var(--ink); }

/* Contents on phones and tablets: one closed row between the takeaways and the text */
.g-toc-m { max-width: var(--g-measure); margin: 0 0 var(--s-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.g-toc-m summary { display: flex; align-items: center; gap: .6rem; padding: .95rem 0; color: var(--ink); font: 600 var(--fs-sm)/1.3 var(--f-body); list-style: none; cursor: pointer; }
.g-toc-m summary::-webkit-details-marker { display: none; }
.g-toc-m summary span { color: var(--muted); font-weight: 400; }
.g-toc-m summary::after { content: ""; width: 7px; height: 7px; margin: -3px 2px 0 auto; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); rotate: 45deg; transition: rotate .3s var(--ease), margin .3s var(--ease); }
.g-toc-m details[open] summary::after { rotate: 225deg; margin-top: 4px; }
.g-toc-m ol { margin: 0; padding: 0 0 var(--s-4) .9rem; list-style: none; border-left: 1px solid var(--line); }
.g-toc-m a { display: block; padding: .42rem 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.4; text-decoration: none; }

/* ---------- Key takeaways: numbered, ruled, under an ink rule. No card, no icons. ---------- */
.g-takeaways { max-width: var(--g-measure); margin: 0 0 var(--s-6); padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.g-takeaways h2 { margin: 0 0 var(--s-2); font-size: 1.125rem; letter-spacing: var(--tr-h3); }
.g-takeaways ol { margin: 0; padding: 0; list-style: none; counter-reset: kt; }
.g-takeaways li { position: relative; padding: .85rem 0 .85rem 2.1rem; border-top: 1px solid var(--line); counter-increment: kt; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.g-takeaways li::before { content: counter(kt); position: absolute; left: 0; top: .85rem; color: var(--muted); font: 500 1rem/1.55 var(--f-display); font-variant-numeric: tabular-nums; }

/* ---------- Article text ---------- */
.g-body { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.68; }
@media (min-width: 768px) { .g-body { font-size: 1.125rem; line-height: 1.66; } }
.g-body > * { max-width: var(--g-measure); }
.g-body > :first-child { margin-top: 0; }
.g-body p { margin: 0 0 1.1em; text-wrap: pretty; }
.g-body h2 { margin: 2.3em 0 .65em; color: var(--ink); font-size: clamp(1.55rem, 1.25rem + 1vw, 2.05rem); line-height: 1.14; letter-spacing: -.02em; scroll-margin-top: 96px; }
.g-body h3 { margin: 1.9em 0 .5em; color: var(--ink); font-size: clamp(1.22rem, 1.15rem + .3vw, 1.36rem); line-height: 1.3; letter-spacing: var(--tr-h3); scroll-margin-top: 96px; }
.g-body h2 + h3 { margin-top: 1.1em; }
.g-body strong { color: var(--ink); font-weight: 600; }
.g-body em { font-style: italic; }
.g-body a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.g-body a:not(.btn):hover { text-decoration-color: var(--ink); }
.g-body ul, .g-body ol { margin: 0 0 1.3em; padding-left: 1.25em; }
.g-body li { margin: .4em 0; padding-left: .25em; }
.g-body li::marker { color: var(--muted); }
.g-body ol > li::marker { font-variant-numeric: tabular-nums; }
.g-body code { padding: .1em .35em; border-radius: 5px; background: var(--paper-2); font: .86em var(--f-mono); }
.g-body .g-cite { white-space: nowrap; }
/* lead paragraph (a definition or the short answer) */
.g-body .g-lead { color: var(--ink); font-size: 1.16em; line-height: 1.55; letter-spacing: -.005em; }
/* small print */
.g-body .g-note { color: var(--muted); font-size: .86em; line-height: 1.55; }
.g-body .g-outro { margin-top: 1.6em; }

/* Data breaks out to the full column; everything you read line by line stays at the measure */
.g-body > .compare, .g-body > .g-calc, .g-body > .g-receipts, .g-body > .g-decide, .g-body > .g-template, .g-body > .g-plan { max-width: none; }

/* ---------- The short answer ---------- */
.g-verdict { margin: .2em 0 1.3em; }
.g-body .g-verdict p { margin: 0; color: var(--ink); font-size: 1.12em; line-height: 1.58; }
.g-verdict strong { display: block; margin-bottom: .5em; font: 600 clamp(1.3rem, 1.15rem + .55vw, 1.6rem)/1.28 var(--f-display); letter-spacing: -.016em; }

/* ---------- Tables: ruled, no box ---------- */
.g-body .compare { margin: 1.6em 0 1.2em; overflow: visible; border: 0; border-radius: 0; background: none; }
.g-body .compare table { font-size: .9375rem; line-height: 1.5; }
.g-body .compare th, .g-body .compare td { padding: .85rem 1.1rem .85rem 0; border-bottom: 1px solid var(--line); }
.g-body .compare tr > :last-child { padding-right: 0; }
.g-body .compare thead th, .g-body .compare thead td { padding-top: 0; padding-bottom: .65rem; border-bottom: 1.5px solid var(--ink); background: none; color: var(--ink); font: 600 var(--fs-xs)/1.35 var(--f-body); vertical-align: bottom; }
.g-body .compare tbody th { color: var(--ink); font-weight: 600; }
.g-body .compare tr:last-child > * { border-bottom: 1px solid var(--line); }
.g-body .compare__note { margin: 0 0 1.6em; color: var(--muted); font-size: .86em; line-height: 1.55; }
@media (min-width: 761px) {
  .g-body .compare tbody th { width: 24%; }
  .g-body .compare.g-compare-4 th, .g-body .compare.g-compare-4 td { padding-right: .9rem; }
  .g-body .compare.g-compare-4 tbody th { width: 18%; }
  .g-body .compare.g-rules tbody th { width: 19%; }
  .g-body .compare.g-rules td:last-child { width: 17%; }
  .g-body .compare.g-pick tbody th { width: 46%; font-weight: 500; }
  .g-body .compare.g-types tbody th { width: 34%; }
  .g-body .compare.g-more table { font-size: .875rem; line-height: 1.45; }
  .g-body .compare.g-more tbody th { width: 21%; }
  .g-body .compare.g-scorecard table { table-layout: fixed; }
  .g-body .compare.g-scorecard th, .g-body .compare.g-scorecard td { padding: .7rem .5rem .7rem 0; }
  .g-body .compare.g-scorecard thead td { width: 17%; }
  .g-body .compare.g-scorecard thead th { font-size: .72rem; }
  .g-body .compare.g-scorecard tbody th { width: 17%; font-size: .9rem; }
  .g-body .compare.g-scorecard tbody td { height: 3.1rem; border-left: 1px solid var(--line); padding-left: .5rem; }
}
/* phones: page.css stacks each row; here the rows are ruled, not boxed */
@media (max-width: 760px) {
  .g-body .compare { border-top: 1.5px solid var(--ink); }
  .g-body .compare tr { padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .g-body .compare tr:last-child { border-bottom: 1px solid var(--line); }
  .g-body .compare tbody th, .g-body .compare tr:last-child > th { padding: 0 0 .45rem; border: 0; font-size: 1.04rem; }
  .g-body .compare td, .g-body .compare tr:last-child > td { padding: .35rem 0; border: 0; }
  .g-body .compare.g-stack td { display: block; }
  .g-body .compare.g-stack td::before { display: inline; margin-right: .5em; }
  .g-body .compare.g-scorecard td > span:empty { display: block; min-height: 1.35rem; border-bottom: 1px dashed var(--line-2); }
}

/* ---------- Definition lists (page.css .deflist), sized to the text ---------- */
.g-body .deflist { margin: 1.3em 0 1.5em; }
.g-body .deflist > div { padding: .8em 0; }
.g-body .deflist dt, .g-body .deflist dd { font-size: .95em; line-height: 1.55; }
.g-body .deflist--wide > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
.g-body .g-defs > div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
.g-meters dt span { display: block; margin-top: .1rem; color: var(--muted); font-size: .86em; font-weight: 400; }
@media (max-width: 560px) { .g-body .deflist--wide > div, .g-body .g-defs > div { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Notes (page.css .note), sample scripts (page.css .script) ---------- */
.g-body .note { margin: 1.5em 0 1.6em; font-size: .9em; }
.g-body .note p { margin: 0; }
.g-body .note p + p { margin-top: .5em; }
.g-body .note__title { color: var(--ink); font-weight: 600; }
.g-body .script { position: relative; margin: 1.5em 0 1.7em; }
.g-body .script blockquote { margin: 0; }
.g-body .script p { margin: 0; font-size: 1.02rem; }
.g-body .script--doc p { font-size: .95rem; line-height: 1.65; }
.g-body .script figcaption { padding-right: 5rem; }
.g-copy { display: inline-flex; align-items: center; min-height: 34px; padding: .3rem .85rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font: 500 .84rem/1.2 var(--f-body); cursor: pointer; transition: border-color .2s, background-color .2s; }
.g-copy:hover { border-color: var(--ink); }
.g-copy[hidden] { display: none; }
.script.has-copy > .g-copy { position: absolute; top: .65rem; right: .75rem; }

/* ---------- Numbered steps: plain numbers, ruled rows ---------- */
.g-body ol.g-steps { margin: 1.3em 0 1.6em; padding: 0; list-style: none; counter-reset: gs; border-bottom: 1px solid var(--line); }
.g-steps > li { position: relative; margin: 0; padding: .85em 0 .85em 2.2rem; border-top: 1px solid var(--line); counter-increment: gs; }
.g-steps > li::before { content: counter(gs); position: absolute; left: 0; top: .85em; color: var(--muted); font: 500 1em/1.66 var(--f-display); font-variant-numeric: tabular-nums; }
.g-steps--titled > li > strong:first-child { display: block; margin-bottom: .1em; color: var(--ink); font-family: var(--f-body); font-size: 1em; font-weight: 600; letter-spacing: 0; }
.g-then { display: block; margin-top: .3em; color: var(--ink); font-weight: 600; }
.g-then::before { content: "\2192\00a0"; content: "\2192\00a0" / ""; color: var(--accent-text); }

/* ---------- Checklists: empty boxes, real checkboxes once guides.js runs (ticks kept in this browser) ---------- */
.g-body .g-checklist { margin: 1.3em 0 1.6em; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.g-checklist > li { position: relative; margin: 0; padding: .8em 0 .8em 2.1rem; border-top: 1px solid var(--line); }
.g-checklist:not(.is-live) > li::before { content: ""; position: absolute; left: 0; top: 1.12em; width: 1.05rem; height: 1.05rem; border: 1.5px solid rgba(15, 15, 16, .32); border-radius: 4px; }
.g-checklist.is-live > li { padding: 0; }
.g-checklist.is-live input { position: absolute; left: 0; top: 1.1em; width: 1.1rem; height: 1.1rem; margin: 0; border: 1.5px solid rgba(15, 15, 16, .38); border-radius: 4px; background: var(--card); cursor: pointer; appearance: none; -webkit-appearance: none; transition: background-color .15s, border-color .15s; }
.g-checklist.is-live input:hover { border-color: var(--ink); }
.g-checklist.is-live input:checked { border-color: var(--ink); background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%23F3EFE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.g-checklist.is-live input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.g-checklist.is-live label { display: block; padding: .8em 0 .8em 2.1rem; cursor: pointer; }
.g-checklist li.is-done label, .g-checklist li.is-done label strong { color: var(--muted); }
.g-checkstatus { display: none; align-items: center; gap: .9rem; margin: -.9em 0 1.6em; color: var(--muted); font-size: var(--fs-sm); }
.g-checkstatus.is-on { display: flex; }
.g-checkstatus button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
.g-checkstatus button:hover { text-decoration-color: var(--ink); }

/* ---------- Run trace: a timeline. AI steps get the accent dot, automation (fixed steps) a hollow one, people an ink one. ---------- */
.g-body ol.g-trace { margin: 1.4em 0 1.6em; padding: 0; list-style: none; }
.g-body .g-trace > li { position: relative; display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 2.1rem; margin: 0; padding: 0 0 1.15em; }
.g-trace > li::before { content: ""; position: absolute; left: calc(7rem + .7rem); top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--paper); }
.g-trace > li::after { content: ""; position: absolute; left: calc(7rem + .7rem + 4px); top: 1.15em; bottom: -.1em; width: 1px; background: var(--line-2); }
.g-trace > li:last-child::after { content: none; }
.g-trace > li.is-flow::before { border: 1.5px solid var(--ink-2); background: var(--paper); }
.g-trace > li.is-person::before { background: var(--ink); }
.g-trace__tag { padding-top: .12em; color: var(--accent-text); font: 600 .8rem/1.45 var(--f-body); text-align: right; }
.g-trace > li.is-flow .g-trace__tag, .g-trace > li.is-person .g-trace__tag { color: var(--muted); }
.g-body .g-trace p { margin: 0; font-size: .97em; line-height: 1.6; }
.g-trace p > strong:first-child { display: block; color: var(--ink); }
@media (max-width: 560px) {
  .g-body .g-trace > li { grid-template-columns: minmax(0, 1fr); padding-left: 1.6rem; }
  .g-trace > li::before { left: 0; top: .4em; }
  .g-trace > li::after { left: 4px; }
  .g-trace__tag { text-align: left; padding: 0 0 .1rem; }
}

/* ---------- Workflow recipes and agent examples: title, what it does, then the four facts ---------- */
.g-body ul.g-jobs { margin: 1.3em 0 1.6em; padding: 0; list-style: none; max-width: none; }
.g-body .g-jobs > li { margin: 0; padding: 1.35em 0 1.4em; border-top: 1px solid var(--line); }
.g-jobs > li:last-child { border-bottom: 1px solid var(--line); }
.g-body .g-jobs h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0 0 .45em; font-size: 1.2rem; }
.g-body .g-n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.g-jobs__tag { color: var(--muted); font: 500 .8rem/1.4 var(--f-body); letter-spacing: 0; }
.g-body .g-jobs > li > p { max-width: var(--g-measure); margin: 0 0 .75em; font-size: .97em; }
.g-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; margin: .9em 0 .2em; padding: 1rem 1.15rem; border-radius: var(--r-sm); background: var(--card-2); }
.g-facts > div { min-width: 0; }
.g-facts dt { margin: 0 0 .15rem; color: var(--muted); font: 600 .8rem/1.35 var(--f-body); }
.g-facts dd { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.g-facts + p { margin-top: .9em; }
@media (max-width: 600px) { .g-facts { grid-template-columns: minmax(0, 1fr); gap: .7rem; } }
.g-body .g-stage { display: block; margin-top: .2rem; color: var(--muted); font: 500 .8rem/1.35 var(--f-body); }

/* ---------- A month plan: four weeks side by side ---------- */
.g-body ol.g-plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin: 1.3em 0 1.7em; padding: 0; list-style: none; }
.g-plan > li { margin: 0; padding: .8rem 0 0; border-top: 1.5px solid var(--ink); }
.g-plan__when { display: block; margin-bottom: .35rem; color: var(--ink); font: 600 1rem/1.3 var(--f-display); }
.g-body .g-plan p { margin: 0; font-size: .9rem; line-height: 1.55; }
@media (max-width: 760px) { .g-body ol.g-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); } }

/* ---------- A formula, set as a quiet line ---------- */
.g-body .g-formula { margin: 1.3em 0; padding: .9rem 1.15rem; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink); font: 500 .95em/1.55 var(--f-body); font-variant-numeric: tabular-nums; }

/* ---------- FAQ: page.css .qa rows, the question is the h3 ---------- */
.g-faq { margin: 1em 0 1.4em; }
.g-faq .qa summary { padding-top: 1.05rem; padding-bottom: 1.05rem; }
.g-faq .qa summary h3 { margin: 0; color: var(--ink); font: inherit; font-size: 1.1rem; letter-spacing: inherit; }
.g-faq .qa__a { max-width: var(--g-measure); padding: 0 0 1.1rem; }
.g-body .g-faq .qa__a p { margin: 0 0 .8em; font-size: .97em; }
.g-body .g-faq .qa__a p:last-child { margin-bottom: 0; }

/* ---------- The call to action (one per page): ink, a small robot at the edge ---------- */
.g-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 12.5rem; align-items: end; gap: var(--s-5); margin: var(--s-8) 0 0; padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); overflow: hidden; border-radius: var(--r-md); background: var(--ink); color: var(--on-ink); }
.g-cta h2 { max-width: 19ch; margin: 0 0 var(--s-3); color: var(--on-ink); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.12; }
.g-cta p { max-width: 30rem; margin: 0; color: var(--on-ink-2); text-wrap: pretty; }
.g-cta .btn { margin-top: var(--s-5); }
.g-cta .g-cta__fine { margin-top: var(--s-3); color: var(--on-ink-3); font-size: var(--fs-xs); }
.g-cta__bot { width: 12.5rem; height: auto; margin: 0 -.6rem calc(-1 * clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) - 1.2rem) 0; justify-self: end; }
.g-cta :focus-visible { outline-color: var(--on-ink); }
@media (max-width: 600px) {
  .g-cta { grid-template-columns: minmax(0, 1fr); }
  .g-cta h2 { padding-right: 5.2rem; }
  .g-cta__bot { position: absolute; top: .4rem; right: -.2rem; width: 6.4rem; margin: 0; }
  .g-cta .btn { width: 100%; justify-content: space-between; }
}

/* ---------- Sources ---------- */
.g-refs { margin-top: var(--s-8); }
.g-refs h2 { margin: 0 0 var(--s-3); font-size: 1.35rem; scroll-margin-top: 96px; }
.g-refs__about { max-width: 40rem; margin: 0 0 var(--s-5); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.g-refs__about a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.g-refs__list { margin: 0; padding: 0; list-style: none; counter-reset: ref; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .875rem; line-height: 1.55; }
.g-refs__list li { position: relative; margin: 0; padding: .6rem 0 .6rem 2.2rem; border-top: 1px solid var(--line); counter-increment: ref; }
.g-refs__list li::before { content: counter(ref); position: absolute; left: 0; top: .6rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-ref__pub { color: var(--ink); font-weight: 500; }
.g-refs__list a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; overflow-wrap: anywhere; }
.g-refs__list a:hover { color: var(--ink); text-decoration-color: var(--accent); }

/* ---------- Keep reading ---------- */
.g-next { padding: var(--section) 0; border-top: 1px solid var(--line); }
.g-next h2 { margin: 0 0 var(--s-6); }
.g-related small { display: block; margin-bottom: .1rem; color: var(--muted); font: 500 var(--fs-xs)/1.4 var(--f-body); }

/* ---------- Calculators (cost guides): number fields over a live table, and a stacked running sum ---------- */
.g-calc { margin: 1.4em 0 1.2em; padding: 1.1rem 1.25rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.g-body .g-calc__title { margin: 0 0 .85rem; color: var(--ink); font: 600 var(--fs-sm)/1.35 var(--f-body); }
.g-calc__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.g-calc__field label { display: block; margin-bottom: .35rem; color: var(--ink-2); font-size: .86rem; line-height: 1.3; }
.g-calc input { width: 100%; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: 500 1rem/1.2 var(--f-body); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.g-calc input::-webkit-outer-spin-button, .g-calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.g-calc input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.g-body .g-calc__sum { margin: .95rem 0 0; padding-top: .85rem; border-top: 1px solid var(--line); color: var(--ink); font-size: .95rem; line-height: 1.5; }
.g-body .g-calc + .compare { margin-top: .6em; }
@media (max-width: 520px) {
  .g-calc__fields { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .g-calc__field { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; align-items: center; gap: .8rem; }
  .g-calc__field label { margin: 0; }
}
.g-tape__line { display: grid; grid-template-columns: 1.1rem 7.4rem minmax(0, 1fr); align-items: center; gap: .85rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.g-tape__line:first-of-type { padding-top: 0; border-top: 0; }
.g-tape__op { color: var(--muted); font: 500 1.05rem/1 var(--f-body); text-align: center; }
.g-tape__num { display: flex; align-items: center; gap: .3rem; padding: 0 .65rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); }
.g-tape__num:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.g-tape .g-tape__num input, .g-tape .g-tape__num input:focus-visible { padding: .5rem 0; border: 0; border-radius: 0; background: transparent; text-align: right; outline: none; }
.g-tape__unit { color: var(--muted); font: .9rem/1 var(--f-body); }
.g-tape label { color: var(--ink); font-size: .95rem; line-height: 1.35; }
.g-tape label small { display: block; margin-top: .15rem; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.g-tape .g-tape__total { border-top: 1.5px solid var(--ink); }
.g-tape__out { justify-self: end; padding-right: .7rem; color: var(--ink); font: 600 1.3rem/1.1 var(--f-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.g-tape__out.is-neg { color: var(--data-tomato); }
.g-tape__lab { color: var(--ink-2); font-size: .95rem; line-height: 1.35; }
.g-tape__lab output { color: var(--ink); font-weight: 600; }
@media (max-width: 520px) {
  .g-tape__line { grid-template-columns: .9rem 6rem minmax(0, 1fr); gap: .6rem; }
  .g-tape__out { font-size: 1.15rem; letter-spacing: 0; }
}

/* ---------- Receipts: two priced months side by side ---------- */
.g-receipts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 1.2em 0 1.3em; }
@media (max-width: 640px) { .g-receipts { grid-template-columns: minmax(0, 1fr); } }
.g-receipt { margin: 0; padding: 1rem 1.15rem .9rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.g-receipt figcaption { margin: 0 0 .55rem; color: var(--ink); font: 600 .95rem/1.35 var(--f-body); }
.g-receipt dl { margin: 0; }
.g-receipt dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.4; }
.g-receipt dt { color: var(--ink-2); }
.g-receipt dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.g-receipt dl > .g-receipt__total { margin-top: .2rem; padding-top: .6rem; border-top: 1.5px solid var(--ink); font-size: 1rem; }
.g-receipt__total dt, .g-receipt__total dd { color: var(--ink); font-weight: 600; }
.g-body .g-receipt__per { margin: .3rem 0 0; color: var(--muted); font-size: .86rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Fill-in template: field + hint, then a filled-in example ---------- */
.g-template { margin: 1.3em 0 1.5em; padding: 1rem 1.2rem .35rem; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--card); }
.g-body .g-template__title { margin: 0 0 .55rem; color: var(--ink); font: 600 var(--fs-sm)/1.35 var(--f-body); }
.g-template dl { margin: 0; }
.g-template dl > div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1.1rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.g-template > dl:first-child > div:first-child { padding-top: .2rem; border-top: 0; }
.g-template dt { color: var(--ink); font-size: .95rem; font-weight: 600; line-height: 1.45; }
.g-template dt small { display: block; margin-top: .15rem; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.4; }
.g-template dd { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.g-template__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 .55rem; }
.g-body .g-template__head .g-template__title { margin: 0; }
.g-template--blank dd { color: var(--muted); }
.g-template--blank dl > div, .g-template--filled dl > div { grid-template-columns: 9rem minmax(0, 1fr); }
.g-template--filled { border-style: solid; border-color: var(--line); }
@media (max-width: 560px) { .g-template dl > div, .g-template--blank dl > div, .g-template--filled dl > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }

/* ---------- Decision test: three questions, then answers to outcome ---------- */
.g-decide { margin: 1.5em 0 1.4em; padding: 1.15rem 1.25rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.g-body .g-decide h3 { margin: 0 0 .4rem; }
.g-body ol.g-decide__qs { margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: dq; }
.g-body .g-decide__qs > li { position: relative; margin: 0; padding: .5rem 0 .5rem 2rem; counter-increment: dq; font-size: .97rem; line-height: 1.55; }
.g-decide__qs > li::before { content: counter(dq); position: absolute; left: 0; top: .5rem; color: var(--muted); font: 500 1rem/1.55 var(--f-display); }
.g-decide__qs strong { display: block; }
.g-decide__out { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.5; }
.g-decide__out th, .g-decide__out td { padding: .7rem .9rem .7rem 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.g-decide__out td:last-child { padding-right: 0; }
.g-decide__out thead th { padding-top: .2rem; border-top: 0; color: var(--muted); font-size: .8rem; font-weight: 500; }
.g-decide__out td:first-child { width: 9.6rem; color: var(--ink-2); white-space: nowrap; }
.g-yn { display: inline-block; min-width: 2.25rem; margin-right: .25rem; padding: .08rem .35rem; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-2); font-size: .78rem; font-weight: 600; text-align: center; }
.g-yn.is-y { border-color: transparent; background: var(--accent-wash); color: var(--ink); }
@media (max-width: 420px) {
  .g-decide { padding: 1rem 1rem 1.05rem; }
  .g-decide__out td:first-child { width: 8.4rem; }
  .g-yn { min-width: 2rem; margin-right: .15rem; padding: .05rem .25rem; }
}

/* ---------- Loop diagram (inline SVG): a wide row on desktop, a tall version on phones ---------- */
.g-loopfig { margin: 1.7em 0 1.8em; }
.g-loopfig svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-loopfig .g-loopfig__narrow { display: none; }
@media (max-width: 600px) {
  .g-loopfig .g-loopfig__wide { display: none; }
  .g-loopfig .g-loopfig__narrow { display: block; max-width: 340px; }
}
.g-loopfig .bx rect { fill: var(--card); stroke: var(--line-2); stroke-width: 1; }
.g-loopfig .bx rect.is-check { stroke: var(--ink); }
.g-loopfig .bx--exit rect { fill: none; stroke-dasharray: 4 3; }
.g-loopfig .t { fill: var(--ink); font-family: var(--f-display); font-size: 15.5px; font-weight: 600; letter-spacing: 0; }
.g-loopfig .t--sm { font-size: 14px; }
.g-loopfig .s { fill: var(--ink-2); font-family: var(--f-body); font-size: 12.5px; }
.g-loopfig .s .em { fill: var(--ink); font-weight: 600; }
.g-loopfig .ln { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.g-loopfig .hd { fill: var(--ink); }
.g-loopfig .ln--loop { stroke: var(--accent-text); stroke-width: 1.75; }
.g-loopfig .hd--loop { fill: var(--accent-text); }
.g-loopfig .lb { fill: var(--accent-text); font-family: var(--f-body); font-size: 12.5px; font-weight: 600; }
.g-loopfig figcaption { margin-top: .9rem; color: var(--muted); font-size: .86rem; line-height: 1.5; }

/* =================================================================== Index (/guides/) */
.g-hub-head { padding: clamp(1.5rem, 1rem + 2vw, 3rem) 0 clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); }
.g-hub-head .crumbs { margin-bottom: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); }
.g-hub-head h1 { max-width: 13ch; font-size: clamp(2.6rem, 1.5rem + 4vw, 4.6rem); line-height: 1.02; letter-spacing: -.028em; }
.g-hub-head .g-dek { max-width: 36rem; margin-top: 0; }
.g-hub-head__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 1000px) {
  .g-hub-head__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; column-gap: clamp(2rem, 6vw, 6rem); }
  .g-hub-head__grid > div { padding-bottom: .5rem; }
}
.g-hub-head__meta { margin: var(--s-5) 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* Start here: the first guide, larger, with three of its findings */
.g-feature__in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: var(--s-6) clamp(2rem, 6vw, 6rem); padding-top: var(--s-5); padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); }
.g-feature__in::before { content: ""; grid-column: 1 / -1; height: 2px; margin-bottom: calc(var(--s-6) * -1 + var(--s-3)); background: var(--ink); }
.g-feature__label { margin: 0 0 var(--s-4); color: var(--accent-text); font: 600 var(--fs-sm)/1.4 var(--f-body); }
.g-feature__label span { color: var(--muted); font-weight: 500; }
/* a guide's topic carries the colour of the service it belongs to */
.g-feature__label span::before, .g-index__topic::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--cobalt)); vertical-align: .05em; }
.g-feature__label span::before { margin: 0 .45rem 0 .5rem; }
.g-index__topic::before { margin-right: .45rem; }
.g-feature h2 { max-width: 20ch; margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.07; letter-spacing: -.025em; }
.g-feature h2 a, .g-index h3 a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.g-feature h2 a:hover { text-decoration-color: var(--accent); }
.g-feature__dek { max-width: 34rem; margin: var(--s-5) 0 0; color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.5; }
.g-feature__meta { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.g-feature__inside { align-self: end; }
.g-feature__inside-title { margin: 0 0 var(--s-2); color: var(--ink); font: 600 var(--fs-sm)/1.4 var(--f-body); }
.g-feature__inside ul { margin: 0 0 var(--s-5); padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.g-feature__inside li { padding: .7rem 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
@media (max-width: 860px) { .g-feature__in { grid-template-columns: minmax(0, 1fr); } .g-feature__inside { align-self: start; } }

/* More guides: an index with real topics, a one-line dek and what's in each */
.g-index { padding-bottom: var(--s-8); }
.g-index__head { padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--ink); }
.g-index__head h2 { margin: 0; font-size: 1.25rem; letter-spacing: var(--tr-h3); }
.g-index__list { margin: 0; padding: 0; list-style: none; }
.g-index__list > li { position: relative; display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 8rem); gap: .4rem clamp(1.5rem, 4vw, 3.5rem); padding: 1.6rem 0 1.7rem; border-bottom: 1px solid var(--line); }
.g-index__topic { margin: 0; padding-top: .35rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }
.g-index h3 { max-width: 30ch; margin: 0 0 .5rem; font-size: clamp(1.3rem, 1.15rem + .55vw, 1.6rem); line-height: 1.2; letter-spacing: -.016em; }
.g-index h3 a::after { content: ""; position: absolute; inset: 0; }
.g-index__list > li:hover h3 a { text-decoration-color: var(--accent); }
.g-index__dek { max-width: 40rem; margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.g-index__meta { margin: 0; padding-top: .35rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; text-align: right; }
.g-index__meta span { display: block; }
.g-index__services { max-width: 46rem; margin: var(--s-6) 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }
.g-index__services a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.g-index__services a:hover { color: var(--ink); text-decoration-color: var(--accent); }
@media (max-width: 760px) {
  .g-index__list > li { grid-template-columns: minmax(0, 1fr); padding: 1.3rem 0 1.4rem; }
  .g-index__topic { padding: 0; }
  .g-index__meta { padding: .2rem 0 0; text-align: left; }
  .g-index__meta span { display: inline; }
  .g-index__meta span + span::before { content: "· "; }
}
.g-hub-cta { padding-bottom: var(--section); }
.g-hub-cta .g-cta { margin-top: 0; }
@media (min-width: 761px) {
  .g-index__services, .g-hub-cta .g-cta { margin-left: calc(12rem + clamp(1.5rem, 4vw, 3.5rem)); }
}