/* Owner guides: the shared reading layout for /guides and /guides/<slug>.
   Loaded after site.css, which owns the tokens, the header, the footer, .btn, .pill, .pcard and details.faq.
   Nothing here introduces a colour, a font or a radius the site does not already use. Owner surfaces hover blue
   (.pcard's default), never gold. Every word on these pages is plain server HTML: no reveal classes, no script. */

/* ---- The band at the top: the site's own page hero, shorter, with the reading column's width ---- */
.page-hero.g-hero { padding: 122px 0 44px; }
/* The column is the reading width itself (Chad, 22 October 2026: centred, not to the left), so the words run to the same
   edges as every box under them and the whole column sits in the middle of the page */
.g-wrap { max-width: 704px; margin: 0 auto; padding: 0 22px; }
.g-crumbs { margin: 0 0 20px; font-family: var(--jak); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1px; color: var(--dmut); }
.g-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; }
.g-crumbs li + li::before { content: "/"; margin: 0 9px; color: #5E6C93; }
.g-crumbs a { color: var(--dmut); text-decoration: none; transition: color 0.2s ease; }
@media (hover: hover) { .g-crumbs a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 4px; } }
.g-crumbs [aria-current="page"] { color: #E7ECF6; }
.page-hero.g-hero .pill { margin-bottom: 18px; }
.page-hero.g-hero h1 { font-size: clamp(30px, 5.4vw, 46px); line-height: 1.08; letter-spacing: -1.3px; max-width: 720px; }
.page-hero.g-hero .sub { margin-top: 16px; max-width: 600px; font-size: 16.5px; }

/* ---- The reading column ---- */
.g-body { padding: 36px 0 76px; }
.g-article { color: #3A3F4E; }
.g-article p { font-size: 17px; line-height: 1.72; margin: 0 0 16px; }
.g-article strong { color: var(--ink); font-weight: 700; }
.g-article :is(p, li, td, th) a:not(.btn) { color: var(--cdeep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(53, 87, 212, 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.2s ease, color 0.2s ease; }
@media (hover: hover) { .g-article :is(p, li, td, th) a:not(.btn):hover { text-decoration-color: var(--cdeep); } }
.g-article h2 { font-size: clamp(23px, 3.3vw, 29px); font-weight: 800; letter-spacing: -0.6px; line-height: 1.2; color: var(--ink); margin: 54px 0 14px; scroll-margin-top: 96px; }
.g-article h2 + p { font-size: 18px; color: var(--ink); }
.g-article h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.3; color: var(--ink); margin: 30px 0 8px; }
.g-article h3 + p { margin-top: 0; }
.g-article .g-note { font-size: 14.5px; color: var(--ink-soft); }

/* The answer, first. A quiet box an answer engine can quote whole. */
.g-answer { background: #fff; border: 1px solid var(--card-border); border-left: 4px solid var(--cobalt); border-radius: 18px; padding: 22px 26px 24px; box-shadow: 0 10px 26px rgba(16, 24, 43, 0.05); }
.g-k { font-family: var(--jak); font-size: 11.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--cdeep); margin: 0 0 9px; }
.g-article .g-answer p:not(.g-k) { font-size: 18.5px; line-height: 1.62; color: var(--ink); font-weight: 500; max-width: none; margin: 0; }
.g-byline { margin: 18px 0 0; font-size: 14px; color: var(--ink-soft); }
.g-article .g-byline { font-size: 14px; margin: 18px 0 0; }

/* The page's own photo, under the byline (on the hub, above the cards): the site's card radius and a quiet shadow.
   The img carries its width and height, so its space is held while it loads, and the border colour shows until then. */
.g-photo { margin: 24px 0 0; }
.g-photo img { display: block; width: 100%; height: auto; border-radius: 20px; background: var(--card-border); box-shadow: 0 10px 26px rgba(16, 24, 43, 0.07); }
.g-hub-photo { margin: 0 0 30px; }

/* The main call to action, three times a guide: a light strip under the answer, a dark card in the middle, a dark card at the end. */
.g-cta-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; background: #fff; border: 1px solid var(--card-border); border-radius: 18px; padding: 16px 18px 16px 24px; margin-top: 14px; }
.g-article .g-cta-strip p { font-family: var(--jak); font-weight: 700; font-size: 16.5px; letter-spacing: -0.2px; line-height: 1.35; color: var(--ink); flex: 1 1 280px; max-width: 470px; margin: 0; text-wrap: balance; }
.g-cta-strip .btn { flex: none; text-align: center; }
.g-cta-card { position: relative; overflow: hidden; background: var(--navy); color: var(--dtext); border-radius: 22px; padding: 32px 34px 34px; margin: 42px 0; text-align: center; }
.g-cta-card::after { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(77, 124, 254, 0.28), rgba(77, 124, 254, 0) 72%); top: -200px; right: -160px; pointer-events: none; }
.g-cta-card > * { position: relative; z-index: 1; }
.g-article .g-cta-card p.g-l { font-family: var(--jak); font-size: clamp(21px, 3vw, 25px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.25; color: #fff; max-width: 540px; margin: 0 auto 20px; text-wrap: balance; }
.g-cta-card .btn { text-align: center; }
.g-article .g-cta-card p.g-talk { font-size: 15px; font-weight: 600; margin: 18px 0 0; color: var(--dmut); }
.g-article .g-cta-card p.g-talk a { color: #E7ECF6; text-decoration-color: rgba(47, 212, 255, 0.55); }
@media (hover: hover) { .g-article .g-cta-card p.g-talk a:hover { color: #fff; text-decoration-color: var(--cyan); } }
.g-cta-end { margin-bottom: 8px; }
.g-cta-end .btn.big { padding: 16px 32px; }

/* On this page */
.g-toc { margin-top: 22px; background: #fff; border: 1px solid var(--card-border); border-radius: 18px; padding: 20px 24px 18px; }
.g-toc ol { list-style: none; counter-reset: toc; display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin: 0; }
.g-toc li { counter-increment: toc; max-width: none; }
.g-toc a { display: block; position: relative; padding: 8px 0 8px 34px; font-family: var(--sys); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none; transition: color 0.2s ease; }
.g-toc a::before { content: counter(toc); position: absolute; left: 0; top: 8px; width: 23px; height: 23px; border-radius: 7px; background: rgba(77, 124, 254, 0.09); color: var(--cdeep); font-family: var(--jak); font-size: 12px; font-weight: 800; display: grid; place-items: center; transition: background 0.2s ease, color 0.2s ease; }
@media (hover: hover) { .g-toc a:hover { color: var(--cdeep); } .g-toc a:hover::before { background: linear-gradient(135deg, var(--cobalt), var(--cyan)); color: #fff; } }

/* Lists */
.g-article ul.g-list, .g-article ol.g-steps { list-style: none; margin: 4px 0 20px; }
.g-article ul.g-list li { position: relative; padding: 4px 0 4px 26px; font-size: 17px; line-height: 1.65; }
.g-article ul.g-list li::before { content: ""; position: absolute; left: 3px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--cobalt), var(--cyan)); }
.g-article ol.g-steps { counter-reset: step; }
.g-article ol.g-steps > li { counter-increment: step; position: relative; padding: 2px 0 18px 54px; font-size: 17px; line-height: 1.68; }
.g-article ol.g-steps > li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--cobalt), var(--cyan)); color: #fff; font-family: var(--jak); font-weight: 800; font-size: 15px; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(77, 124, 254, 0.3); }
.g-article ol.g-steps > li > b { display: block; font-family: var(--jak); font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: var(--ink); line-height: 1.3; margin: 5px 0 3px; }

/* Tables: light borders, and they scroll sideways inside their own box on a phone */
.g-table { margin: 20px 0 26px; border: 1px solid var(--card-border); border-radius: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 34px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 34px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(16, 24, 43, 0.16), rgba(16, 24, 43, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 43, 0.16), rgba(16, 24, 43, 0)) right center / 14px 100% no-repeat scroll,
    #fff; }
.g-table table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 15px; line-height: 1.5; color: #3A3F4E; }
.g-table caption { text-align: left; font-family: var(--jak); font-weight: 800; font-size: 15px; letter-spacing: -0.2px; color: var(--ink); padding: 15px 18px 6px; }
.g-table th, .g-table td { text-align: left; vertical-align: top; padding: 12px 18px; border-bottom: 1px solid #F0EDE5; }
.g-table thead th { font-family: var(--jak); font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--card-border); white-space: nowrap; }
.g-table tbody th { font-family: var(--jak); font-weight: 700; color: var(--ink); }
.g-table tbody tr:last-child th, .g-table tbody tr:last-child td { border-bottom: 0; }
.g-table .n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-table.narrow table { min-width: 0; }
.g-table.narrow thead th { white-space: normal; }
.g-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.g-table + .g-note { margin-top: -12px; }
/* The broker guide's costs table names its source under each answer, and its labels keep to one line on a wide screen */
.g-costs tbody th { width: 28%; }
.g-costs td small { display: block; margin-top: 5px; font-family: var(--jak); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
/* A lead paragraph straight after On this page (the broker guide's) stands apart from the box, like the first line under a heading */
.g-article .g-toc + p { margin-top: 34px; font-size: 18px; color: var(--ink); }
/* A phone number in a call to action never breaks across a line */
.g-article .g-cta-card p.g-talk a[href^="tel:"] { white-space: nowrap; }

/* No lone last word: card titles, step titles and captions even out their lines, and table labels avoid a single
   word on the last line (the headings already balance in site.css) */
.g-more .g-ct, .g-hub .g-ct, .g-article ol.g-steps > li > b, .g-table caption { text-wrap: balance; }
.g-table th { text-wrap: pretty; }

/* Two cards side by side, the way the valuation page shows what pushes a multiple up and what drags it down */
.g-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 26px; }
.g-col { border-radius: 20px; padding: 22px 22px 12px; }
.g-col.up { background: #fff; border: 1px solid var(--card-border); }
.g-col.down { background: var(--day); border: 1px dashed var(--card-border); }
.g-article .g-col h3 { font-family: var(--jak); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 8px; }
.g-col.up h3 { color: var(--cdeep); }
.g-col.down h3 { color: #A0522D; }
.g-article .g-col ul { list-style: none; margin: 0; }
.g-article .g-col li { position: relative; padding: 9px 0 9px 26px; border-bottom: 1px solid #F0EDE5; font-size: 15px; line-height: 1.55; color: #3A3F4E; max-width: none; }
.g-col li:last-child { border-bottom: 0; }
.g-col li::before { font-family: var(--jak); font-weight: 800; position: absolute; left: 2px; }
.g-col.up li::before { content: "\2191"; color: var(--cdeep); }
.g-col.down li::before { content: "\2193"; color: #A0522D; }
@media (max-width: 760px) { .g-two { grid-template-columns: 1fr; } }

/* Questions owners ask: the site's own accordion, in the reading column */
.g-article .faq-list { max-width: none; margin: 18px 0 0; }
.g-article details.faq .a { font-size: 15.5px; line-height: 1.68; max-width: 640px; }

/* Sources, who publishes this */
.g-sources { list-style: none; counter-reset: src; margin: 6px 0 0; padding: 0; }
.g-article .g-sources li { counter-increment: src; position: relative; padding: 11px 0 11px 36px; border-bottom: 1px solid #EDEAE2; font-size: 14.5px; line-height: 1.55; color: #4A4F5E; max-width: none; }
.g-sources li:last-child { border-bottom: 0; }
.g-sources li::before { content: counter(src); position: absolute; left: 0; top: 11px; width: 23px; height: 23px; border-radius: 7px; background: rgba(77, 124, 254, 0.09); color: var(--cdeep); font-family: var(--jak); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.g-sources a { overflow-wrap: anywhere; }
.g-pub { background: #fff; border: 1px solid var(--card-border); border-radius: 18px; padding: 22px 26px 8px; }
.g-article .g-pub p { font-size: 16px; }

/* Related guides: the site's own premium cards, two by two, blue on hover (gold on a buyer guide, through .gold-glow) */
.g-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.g-more a.pcard, .g-hub a.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--card-border); text-decoration: none; color: inherit; }
.g-more a.pcard { padding: 22px 22px 20px; }
.g-more .g-ck, .g-hub .g-ck { display: block; font-family: var(--jak); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--cdeep); margin-bottom: 9px; }
.g-more .g-ct, .g-hub .g-ct { display: block; font-family: var(--jak); font-size: 17.5px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.25; color: var(--ink); }
.g-more .g-cl { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.g-more .g-go, .g-hub .g-go { display: block; margin-top: auto; padding-top: 14px; font-family: var(--jak); font-size: 13.5px; font-weight: 700; color: var(--cdeep); }
.g-more .g-go::after, .g-hub .g-go::after { content: " \2192"; display: inline-block; transition: transform 0.2s ease; }
@media (hover: hover) { .g-more a.pcard:hover .g-go::after, .g-hub a.pcard:hover .g-go::after { transform: translateX(4px); } }

/* The hub */
/* 1,240 wide for computer screens, as the site's .wrap (22 October 2026); below 1,040 the window sets it, as before */
.g-hub-in { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.g-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-hub a.pcard { padding: 26px 24px 22px; }
.g-hub .g-ct { font-size: 19px; margin-bottom: 10px; }
.g-hub .g-cl { display: block; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.g-hub-cta { margin-top: 26px; }
/* The hub's opening, and the buyers section's heading, line and button, sit in the middle over the centred photo and cards */
.g-hero .g-hub-in, .g-buyers > h2, .g-buyers > .g-buyers-line, .g-buyers > .g-hub-cta { text-align: center; }
.g-hero .g-hub-in .g-crumbs ol { justify-content: center; }
.page-hero.g-hero .g-hub-in h1, .page-hero.g-hero .g-hub-in .sub, .g-buyers > .g-buyers-line { margin-left: auto; margin-right: auto; }
/* A card alone on the last row sits in the middle, not at the left: the middle column three across, centred two across */
@media (min-width: 901px) { .g-hub > a.pcard:last-child:nth-child(3n+1) { grid-column: 2; } }
@media (min-width: 641px) and (max-width: 900px) { .g-hub > a.pcard:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 18px) / 2); } }

/* The hub's buyers section, under the owner cards */
.g-buyers { margin-top: 68px; scroll-margin-top: 96px; }
.g-buyers h2 { font-size: clamp(23px, 3.3vw, 29px); font-weight: 800; letter-spacing: -0.6px; line-height: 1.2; color: var(--ink); margin: 0 0 10px; }
.g-buyers-line { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; margin: 0 0 24px; }

/* Buyer surfaces hover gold, the site's own rule (the buy page and the Club page do the same): the buyer guides
   (<main class="g-buy">) and the hub's buyers section. The button is the site's gold button, the cards carry
   .gold-glow, and everything else that answers a pointer follows here. Owner pages keep blue. */
@media (hover: hover) {
  .g-buy .g-crumbs a:hover { text-decoration-color: var(--gold); }
  .g-buy .g-article :is(p, li, td, th) a:not(.btn):hover { text-decoration-color: var(--gold-d); }
  .g-buy .g-toc a:hover { color: var(--gold-d); }
  .g-buy .g-toc a:hover::before { background: linear-gradient(135deg, var(--gold), var(--gold-l)); color: var(--navy); }
  .g-buy details.faq:not([open]):hover { border-color: var(--gold); box-shadow: 0 10px 26px rgba(226, 185, 59, 0.16); }
}

/* Phones: one column, thumb sized buttons, nothing scrolls sideways but the tables inside their own boxes */
@media (max-width: 900px) { .g-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .page-hero.g-hero { padding: 108px 0 36px; }
  .g-body { padding: 28px 0 60px; }
  .g-toc ol { grid-template-columns: 1fr; }
  .g-hub, .g-more { grid-template-columns: 1fr; }
  .g-cta-strip { padding: 18px 18px 18px; }
  .g-cta-strip .btn, .g-cta-card .btn, .g-hub-cta .btn { display: block; width: 100%; padding-top: 15px; padding-bottom: 15px; }
  .g-cta-card { padding: 28px 22px 28px; border-radius: 20px; }
  .g-answer { padding: 20px 20px 22px; }
  .g-article .g-answer p:not(.g-k) { font-size: 17.5px; }
  .g-article h2 { margin-top: 46px; }
  .g-article ol.g-steps > li { padding-left: 50px; }
}
@media (max-width: 640px) {
  /* On a phone every table fits its box: the 540 px floor hid the right hand columns until swiped (site audit,
     21 October 2026). Every wide table is three columns, so they wrap instead. */
  .g-table table { font-size: 14.5px; min-width: 0; }
  .g-table thead th { white-space: normal; }
  .g-table th, .g-table td { padding: 11px 12px; }
  .g-table caption { padding: 14px 12px 4px; }
  .g-costs tbody th { width: 34%; }
}
@media (max-width: 420px) { .g-wrap, .g-hub-in { padding: 0 18px; } }

/* Wide screens, from 1,100 up (22 October 2026): the words keep the reading column in the middle of the page, and the
   page's own photo (960 wide) and its two dark button cards (860) take more of the width than the words, centred on the
   same middle. Below 1,100 nothing here applies. */
@media (min-width: 1100px) {
  .g-article > .g-photo { margin-left: -150px; margin-right: -150px; }
  .g-article > .g-cta-card { margin-left: -100px; margin-right: -100px; }
}