/* TMN Creative buyer guides (the growth-guides template, first best-website-design-for-financial-advisors) in
   the TMN Flow world. Loads after tmn-home.css, which carries the tokens, type, buttons, header, menu, device
   frames and footer. scripts/convert-guide-v2.mjs keeps each guide's markup as written, so every answer, table
   cell and source is the page's own (docs/guide-v2/COPY-CHANGES.md). Read mode: a calm reading column, hairline
   ledgers, white panels for the answer and the sources. */

/* ===== Header: up to 5 links and 2 actions, so the menu takes over below 1280px and the secondary action
   shows from 1440px ===== */
.guide-page .nav-links { gap: clamp(0.9rem, 1.25vw, 1.35rem); }
.guide-page .nav-link,
.guide-page .nav-ghost { font-size: 0.9375rem; }
@media (max-width: 1439px) {
  .guide-page .nav-ghost { display: none; }
}
@media (max-width: 1279px) {
  .guide-page .nav-links,
  .guide-page .nav-cta { display: none; }
  .guide-page .menu-btn { display: block; }
  .guide-page .mob-menu { display: block; }
}

/* ===== Hero: the question beside its short answer ===== */
.gd-hero { padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.gd-hero-grid { position: relative; display: grid; gap: 2.25rem; align-items: start; }
.gd-hero .display { max-width: 15ch; font-size: clamp(2.3rem, 4vw, 3.6rem); line-height: 1.03; text-wrap: balance; }
.gd-hero .hero-deck { margin-top: 1.3rem; max-width: 34em; text-wrap: pretty; }
.gd-hero .hero-ctas { margin-top: 1.75rem; }
.gd-byline { margin-top: 1.4rem; font-size: 0.9375rem; color: var(--ink-3); }
.gd-byline a { color: var(--ink); font-weight: 560; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
.gd-answer { padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-2); }
.gd-answer h2 { max-width: 20ch; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.14; letter-spacing: -0.025em; }
.gd-answer > p { margin-top: 0.85rem; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.gd-answer-facts { display: grid; margin-top: 1.1rem; padding: 0; list-style: none; }
.gd-answer-facts li { display: grid; gap: 0.2rem; padding: 0.8rem 0; border-top: 1px solid var(--line-2); }
.gd-answer-facts strong { font-weight: 600; color: var(--ink); }
.gd-answer-facts span { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 1000px) {
  .gd-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .gd-answer { animation: stage-in 1.1s var(--ease-out) 0.12s both; }
}

/* "On this page" */
.gd-jump { position: relative; display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); font-size: 0.9375rem; }
.gd-jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgb(51 65 90 / 0.3); }
.gd-jump a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ===== Sections: Flow's rhythm, 2 neighbours on the same ground share 1 gap ===== */
.gd-sec { padding-block: clamp(3.25rem, 6vw, 5.5rem); }
.gd-sec.ground-paper + .gd-sec.ground-paper,
.gd-sec.ground-paper-2 + .gd-sec.ground-paper-2 { padding-top: 0; }
.gd-head { display: grid; gap: 1rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.gd-head h2 { max-width: 20ch; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.gd-sec .gd-head p { max-width: 38em; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 1000px) {
  .gd-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: end; }
}
.gd-head a,
.gd-item a,
.gd-panel a,
.gd-note a,
.gd-sources p a,
.gd-proof-copy p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
.gd-head a:hover,
.gd-item a:hover,
.gd-panel a:hover,
.gd-note a:hover,
.gd-sources a:hover,
.gd-proof-copy p a:hover { text-decoration-color: var(--ink); }

/* Ledgers: hairline rows, 2 or 3 across on wide screens */
.gd-ledger { display: grid; gap: 0 clamp(1.5rem, 3vw, 3rem); }
.gd-item { padding: 1.35rem 0 1.5rem; border-top: 1px solid var(--line); }
.gd-item h3 { font-size: 1.1875rem; line-height: 1.3; }
.gd-sec .gd-item p { margin-top: 0.55rem; font-size: 0.9875rem; line-height: 1.62; color: var(--ink-2); }
.gd-sec .gd-item p + p { margin-top: 0.8rem; }
.gd-item strong { font-weight: 600; color: var(--ink); }
@media (min-width: 700px) {
  .gd-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .gd-ledger:not(.gd-ledger--2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Link rows */
.gd-links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-top: 1.5rem; }
.gd-links a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-size: 0.9375rem; font-weight: 560; color: var(--ink); text-decoration: none; }
.gd-links .button-icon { width: 0.85rem; transition: transform 0.35s var(--ease-out); }
.gd-links a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.gd-links a:hover .button-icon { transform: translateX(3px); }

/* The cost table: a white surface, hairlines, TMN's own row tinted gold. Phones read each row as a labelled stack. */
.gd-table-wrap { overflow: hidden; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); }
.gd-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.gd-table th { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.gd-table td { padding: 1rem 1.25rem; border-top: 1px solid var(--line-2); vertical-align: top; color: var(--ink-2); }
.gd-table tbody tr:first-child td { border-top: 0; }
.gd-table td:first-child,
.gd-table .price { font-weight: 560; color: var(--ink); }
.gd-table .tmn-row td { background: rgb(201 164 76 / 0.08); }
@media (max-width: 760px) {
  .gd-table thead { display: none; }
  .gd-table,
  .gd-table tbody,
  .gd-table tr,
  .gd-table td { display: block; }
  .gd-table tr { padding: 0.95rem 1.1rem; border-top: 1px solid var(--line-2); }
  .gd-table tbody tr:first-child { border-top: 0; }
  .gd-table .tmn-row { background: rgb(201 164 76 / 0.08); }
  .gd-table .tmn-row td { background: none; }
  .gd-table td { padding: 0.15rem 0; border-top: 0; }
  .gd-table td[data-label]::before { content: attr(data-label); display: block; margin-top: 0.55rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
  .gd-table td:first-child::before { margin-top: 0; }
}

/* A white panel and a quiet note */
.gd-panel { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); }
.gd-panel h3 { font-size: 1.1875rem; }
.gd-sec .gd-panel p { margin-top: 0.55rem; max-width: 62em; font-size: 0.9875rem; line-height: 1.62; color: var(--ink-2); }
.gd-sec .gd-note { margin-top: 1.25rem; max-width: 62em; font-size: 0.9375rem; line-height: 1.62; color: var(--ink-3); }

/* Live proof: the capture in the home page's CSS MacBook beside the story */
.gd-proof { display: grid; gap: 2.5rem; align-items: center; }
.gd-proof-figure { margin: 0; min-width: 0; }
/* The MacBook's base runs 2% past the lid on each side, so the link pads to hold it */
.gd-proof-link { display: block; padding-inline: 2.2%; border-radius: var(--r-md); }
.gd-mac { position: relative; width: 100%; }
.gd-mac .mac-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.gd-proof-cap { margin-top: 1.1rem; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-3); }
.gd-proof-cap strong { font-weight: 600; color: var(--ink); }
.gd-proof-cap a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 560; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
.gd-proof-copy h2 { max-width: 16ch; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.gd-sec .gd-proof-copy > p { margin-top: 1rem; max-width: 36em; font-size: 1.03rem; line-height: 1.65; color: var(--ink-2); }
@media (min-width: 1000px) {
  .gd-proof { grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr); column-gap: clamp(3rem, 6vw, 5.5rem); }
}

/* Sources: how the guide was checked, on a white panel */
.gd-sources { padding: clamp(1.5rem, 3.4vw, 2.5rem); border-radius: var(--r-xl); background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); }
.gd-sources h2 { max-width: 26ch; font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.gd-sec .gd-sources p { margin-top: 0.85rem; max-width: 60em; font-size: 0.9875rem; line-height: 1.65; color: var(--ink-2); }
.gd-sources ul { display: grid; gap: 0 2rem; margin-top: 1.1rem; padding: 0; list-style: none; }
.gd-sources li { border-top: 1px solid var(--line-2); }
.gd-sources li a { display: flex; align-items: center; min-height: 44px; padding-block: 0.45rem; font-size: 0.9375rem; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.3); }
@media (min-width: 800px) {
  .gd-sources ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Close: the ask beside its actions, on paper with Flow's gold radial ===== */
.gd-close {
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
  border-top: 1px solid var(--line-2);
  background: radial-gradient(50% 70% at 85% 30%, rgb(201 164 76 / 0.09), transparent 70%), var(--paper);
}
.gd-close-inner { display: grid; gap: 1.75rem; align-items: center; }
.gd-close h2 { max-width: 16ch; font-size: clamp(2.1rem, 3.8vw, 3.4rem); }
.gd-close .gd-close-copy p { margin-top: 1rem; max-width: 34em; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.gd-close-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 900px) {
  .gd-close-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: clamp(2.5rem, 6vw, 5.5rem); }
  .gd-close-actions { justify-content: flex-end; }
}
@media (max-width: 430px) {
  .gd-close .button,
  .gd-hero .hero-ctas .button { width: 100%; white-space: normal; line-height: 1.25; text-align: center; }
}

/* ===== Footer: brand, then this page's own groups ===== */
.gd-foot-logo { width: 74px; height: auto; }
.gd-foot-home { display: inline-flex; align-items: center; min-height: 44px; }
.gd-foot .foot-brand p { margin-top: 1rem; }
.gd-foot .foot-links a { min-width: 44px; }
@media (min-width: 1180px) {
  .gd-foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .gd-foot .foot-links a { min-height: 36px; padding-block: 4px; }
}
@media (max-width: 1179px) {
  .gd-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .gd-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-foot .foot-links { grid-template-columns: minmax(0, 1fr); }
  /* The brand line and the contact row take the full width, so the email address never squeezes into a half column */
  .gd-foot .foot-brand,
  .gd-foot .gd-foot-contact { grid-column: 1 / -1; }
  .gd-foot .gd-foot-contact .foot-links { display: flex; flex-wrap: wrap; column-gap: 1.75rem; }
}

/* ===== /verify: the entity facts beside the H1, then ledgers of name, note and outside link ===== */
.gd-score-route { margin-top: 1.4rem; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.gd-score-route a { font-weight: 560; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
.gd-facts-list { display: grid; }
.gd-fact { display: grid; gap: 0.2rem; padding: 0.85rem 0; border-top: 1px solid var(--line-2); }
.gd-fact:first-child { padding-top: 0; border-top: 0; }
.gd-fact:last-child { padding-bottom: 0; }
.gd-fact span { font-size: 0.875rem; color: var(--ink-3); }
.gd-fact strong { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.gd-vsec h2 { max-width: 22ch; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.gd-sec .gd-intro { margin-top: 1rem; max-width: 42em; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.gd-sec .gd-vlist + .gd-intro { margin-top: 1.6rem; font-size: 1rem; }
.gd-intro a { font-weight: 560; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
.gd-vlist { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-bottom: 1px solid var(--line); }
.gd-vrow { display: grid; gap: 0.35rem 2rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.gd-vrow h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.gd-sec .gd-vrow p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
.gd-vrow p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
.gd-vlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 560; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); overflow-wrap: anywhere; }
.gd-vlink:hover { text-decoration-color: var(--ink); }
.gd-vstatus { font-size: 0.9375rem; color: var(--ink-3); }
@media (min-width: 900px) {
  .gd-vrow { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 13rem); align-items: baseline; }
  .gd-vlink, .gd-vstatus { justify-self: end; text-align: right; }
}

/* ===== /new-ria-website-design: the promise beside the live Hilpan Moxie site, then splits, a ledger, the work ===== */
.gd-price-line { margin-top: 1.25rem; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.gd-price-line strong { font-weight: 600; color: var(--ink); }
.nr-proof .gd-proof-cap { display: grid; gap: 0.15rem; }
.gd-split { display: grid; gap: 1.5rem 2rem; }
.gd-split > h2,
.gd-prose-col > h2 { max-width: 18ch; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.gd-sec .gd-prose p,
.gd-sec .gd-prose-col > p { max-width: 38em; font-size: 1.0625rem; line-height: 1.68; color: var(--ink-2); text-wrap: pretty; }
.gd-prose p + p { margin-top: 1rem; }
.gd-prose-col > h2 + p { margin-top: 1.1rem; }
.gd-prose-col > p + p { margin-top: 0.9rem; }
.gd-prose-col a,
.gd-side a,
.faq-head a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
.gd-side { margin-top: 0; align-self: start; }
.gd-side ul { display: grid; gap: 0.5rem; margin-top: 0.75rem; padding-left: 1.1rem; font-size: 0.9875rem; line-height: 1.55; color: var(--ink-2); }
.gd-side ul + p { margin-top: 1rem; }
@media (min-width: 1000px) {
  .gd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .gd-split:has(> .gd-side) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.gd-work { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.gd-work-item { margin: 0; }
.gd-work-shot { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-lg); background: var(--paper-2); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.gd-work-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s var(--ease-out); }
.gd-work-shot:hover img { transform: scale(1.015); }
.gd-work-cap { margin-top: 1.1rem; }
.gd-work-cap h3 { font-size: clamp(1.2rem, 1.6vw, 1.375rem); font-weight: 520; letter-spacing: -0.02em; }
.gd-work-cap h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.gd-work-cap h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.gd-sec .gd-work-cap p { margin-top: 0.5rem; max-width: 40em; font-size: 0.9875rem; line-height: 1.62; color: var(--ink-2); }
.gd-work-link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; margin-top: 0.35rem; font-weight: 580; color: var(--ink); text-decoration: none; }
.gd-work-link .button-icon { width: 0.9rem; transition: transform 0.35s var(--ease-out); }
.gd-work-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.gd-work-link:hover .button-icon { transform: translateX(3px); }
@media (min-width: 800px) {
  .gd-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .gd-work-shot img { transition: none; }
}

/* Proof strip: the copy first, the capture beside it */
.gd-proof--copy-first .gd-proof-copy > p + p { margin-top: 0.85rem; }
.gd-proof--copy-first .gd-proof-copy a:not(.button) { color: var(--ink); font-weight: 560; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
.gd-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.gd-proof-shot { display: block; }
.gd-proof--solo { grid-template-columns: minmax(0, 1fr) !important; }
.gd-proof--solo .gd-proof-copy { max-width: 46em; }
.gd-proof-shot:not(a) { padding-inline: 2.2%; }
@media (min-width: 1000px) {
  .gd-proof--copy-first { grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); }
}

/* Comparison: 2 buyer columns on white panes */
.gd-compare { display: grid; gap: 1.25rem; }
.gd-compare-col { padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); }
.gd-compare-col h3 { font-size: 1.1875rem; }
.gd-compare-col ul { display: grid; gap: 0.55rem; margin-top: 0.85rem; padding-left: 1.1rem; font-size: 0.9875rem; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 800px) {
  .gd-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Labels that carry information: a numbered group or step line, and a plain card's name line */
.gd-group-label { margin-bottom: 0.6rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink-3); }
.gd-who { margin-bottom: 0.35rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.gd-who:not([data-case]) { text-transform: lowercase; }
.gd-who:not([data-case])::first-letter { text-transform: uppercase; }
.gd-head > .gd-group-label { grid-column: 1 / -1; margin-bottom: 0; }
/* An all-caps fact label in the answer panel ("COST") reads in sentence case; the words are unchanged */
.gd-answer-facts strong[data-caps] { text-transform: lowercase; }
.gd-answer-facts strong[data-caps]::first-letter { text-transform: uppercase; }
.gd-hero-note { margin-top: 1.4rem; max-width: 40em; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-3); }
.gd-hero-note a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
.gd-facts-row { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.6rem; font-size: 0.9375rem; color: var(--ink-3); }
.gd-titled > .gd-group-label { margin: 0.55rem 0 0; }
.gd-head > .gd-titled > h2 { max-width: 20ch; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.keep-case { text-transform: none; }