/* ══════════════════════════════════════════════════════════════════
   The Buyble accents — brand kit v1.0 restored (Theo, 6 Sep 2026).
   Loaded LAST on every page: hand pages after their v3 override block,
   library pages after site.css. One file: remove the link and the site
   is back to the three-key v3 look.

   Roles, from the May 2026 brand book (brand/The Buyer's Gral.pdf):
     Buyble Red    #9D0B0B  problems, attention  — already the accent
     Buyble Green  #708857  solutions, guidance  — ticks, callouts, "proceed"
     Neon          #EEFF98  logo / highlighted text, CTAs on dark grounds
     Pink          #E8A0B4  Theo's colour: welcome, informative, contact

   Contrast (WCAG 2.1 AA, computed 6 Sep 2026):
     neon on Grail Black 17.0 · pink on Grail Black 8.9 · neon on red 7.8
     ink on a neon or pink fill passes; pink or neon AS TEXT ON CREAM fails,
     so on cream they are fills with ink text or rules, never type.
     Green as small text on cream uses --green-ink (5.2); #708857 itself is
     for marks, borders and fills. Never red type on Grail Black (v3 rule).
   ══════════════════════════════════════════════════════════════════ */
:root{
  --neon:#EEFF98;--neon-hover:#E4F77C;--neon-tint:#F7FBD9;--neon-wash:rgba(238,255,152,.16);
  --pink:#E8A0B4;--pink-hover:#F2B9C8;--pink-tint:#FBEDF1;--pink-ink:#9E3D5E;--face-bubble:#F5EFE3;
  --green:#708857;--green-deep:#5B6F46;--green-ink:#4F6B3A;--green-tint:#EEF3E6;--green-line:#CFDDC2;
  --tan:#CAAE78;--amber:#B07B1E;--amber-ink:#8F6414;--amber-tint:#FBF1DC;--amber-line:#ECD9B4;
  --ink-on-accent:#141412;
}

/* ── Everywhere ── */
::selection{background:var(--neon);color:var(--ink-on-accent)}
mark{background:var(--neon);color:var(--ink-on-accent);padding:0 .2em;border-radius:3px}

/* the one nav: neon rule beneath it, neon CTA */
.tbg-nav{border-bottom:4px solid var(--neon)}
.tbg-nav a:hover,.tbg-nav a:focus-visible{text-decoration-color:var(--neon);text-decoration-thickness:2px}
.tbg-nav .tbg-nav-cta{background:var(--neon);color:var(--ink-on-accent)}
.tbg-nav .tbg-nav-cta:hover{background:var(--neon-hover);color:var(--ink-on-accent)}

/* "Message Theo on WhatsApp" is Theo's colour, on every page and every ground */
a[href^="https://wa.me/"]{background:var(--pink);color:var(--ink-on-accent)}
a[href^="https://wa.me/"]:not(.btn){padding:2px 7px;border-radius:4px;text-decoration:none;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
:root :is(#top,#main,body) a.btn[href^="https://wa.me/"]{
  background:var(--pink) !important;color:var(--ink-on-accent) !important;border:1px solid var(--pink) !important}
:root :is(#top,#main,body) a.btn[href^="https://wa.me/"]:hover{
  background:var(--pink-hover) !important;border-color:var(--pink-hover) !important}

/* Theo's face in a speech bubble beside every "Message Theo" link (Theo, 20 Sep 2026): the
   contact number only, never the share-with-a-friend button. A cream bubble on the pink pill,
   the round face inside it, the bubble's tail at the bottom left. Decorative: content is empty. */
a[href^="https://wa.me/61433926464"]:not(.btn){white-space:nowrap}
a[href^="https://wa.me/61433926464"]::before{content:"";display:inline-block;vertical-align:middle;flex:none;
  width:24px;height:24px;margin:-4px 6px -4px -2px;border-radius:50% 50% 50% 3px;
  background:var(--face-bubble) url(/img/theo-face.png) center/20px 20px no-repeat}
a.btn[href^="https://wa.me/61433926464"]::before{width:40px;height:40px;margin:-12px 10px -12px -10px;
  border-radius:50% 50% 50% 4px;background-size:30px 30px}

/* ad landing page: pink step numerals with ink text, as the homepage steps */
.lp-steps li::before{background:var(--pink);color:var(--ink-on-accent)}

/* the founder: round portrait with a pink ring (homepage guardrail card, /about/) */
.founder-pic{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--pink);margin:0 0 14px}
.founder .founder-pic{width:128px;height:128px;margin:0;flex:none}
.founder-stat{font-family:'Archivo Black',Archivo,sans-serif;font-size:1.45rem;line-height:1.1;color:var(--red);margin:4px 0 8px}

/* ══ Hand-written sales pages (v1 classes under the v3 override layer).
   Prefixed with :root so they outrank the page's own !important rules,
   including the cream-stage block that sits inside the homepage body. ══ */

/* cream stage: pink kicker chips, pink step numerals, green ticks, neon rule under the hero */
:root .kicker,:root #hero .kicker,:root section#how .kicker,:root section#close .kicker{
  background:var(--pink) !important;color:var(--ink-on-accent) !important;border:1px solid var(--pink) !important;
  padding:5px 10px;border-radius:4px}
:root #hero .num,:root #hero .step .n,:root section#how .step .n,:root .card .num,:root .step .n{
  background:var(--pink) !important;color:var(--ink-on-accent) !important}
:root .facts li::before{color:var(--green-ink) !important}
:root .herowrap{border-bottom:6px solid var(--neon) !important}

/* the red anchor strip: neon CTA on red, as the v1 hero had */
:root .anchor.dk .btn{background:var(--neon) !important;color:var(--ink-on-accent) !important;border-color:var(--neon) !important}
:root .anchor.dk .btn:hover{background:var(--neon-hover) !important}
:root .anchor.dk .btn.ghost{background:transparent !important;color:var(--gk-cream,#F5EFE3) !important;border:1px solid var(--gk-cream,#F5EFE3) !important}
/* the anchor strip is painted light since the 3 Sep cream stage: the highlighted figure is red there, never neon */
:root .anchor .cell .val.hi{color:var(--gk-red,#9D0B0B) !important}

/* Grail Black bands: neon for the highlighted things — CTAs, tags, prices, ticks, links */
:root .dk .btn,:root section#pricing .btn,:root section#compare .btn,:root section#inside .btn,:root section#faq .btn,
:root .unlock .btn,:root .tier .btn{
  background:var(--neon) !important;color:var(--ink-on-accent) !important;border-color:var(--neon) !important}
:root .dk .btn:hover,:root section#pricing .btn:hover,:root section#compare .btn:hover,:root section#inside .btn:hover,
:root section#faq .btn:hover,:root .unlock .btn:hover,:root .tier .btn:hover{
  background:var(--neon-hover) !important;border-color:var(--neon-hover) !important}
:root .dk .btn.ghost,:root section#pricing .btn.ghost,:root section#compare .btn.ghost,:root section#inside .btn.ghost,:root section#faq .btn.ghost{
  background:transparent !important;color:var(--neon) !important;border:1px solid var(--neon) !important}
:root .dk .btn.ghost:hover,:root section#pricing .btn.ghost:hover,:root section#compare .btn.ghost:hover,
:root section#inside .btn.ghost:hover,:root section#faq .btn.ghost:hover{background:var(--neon-wash) !important}
:root .dk .kicker,:root section#realone .kicker,:root .unlock .kicker{
  background:transparent !important;color:var(--neon) !important;border-color:var(--neon) !important}
:root .dk .tier .tag,:root section#pricing .tier .tag,:root .tier .tag{background:var(--neon) !important;color:var(--ink-on-accent) !important}
:root .dk .card .num,:root .dk .step .n{background:var(--neon) !important;color:var(--ink-on-accent) !important}
:root .dk .tier.hot,:root section#pricing .tier.hot,:root .tier.hot{border-color:var(--neon) !important}
:root .dk :is(.tier .amount,.tier li::before),
:root section#pricing :is(.tier .amount,.tier li::before),
:root section#compare :is(.tier .amount,.tier li::before),
:root section#inside :is(.tier .amount,.tier li::before),
:root .tier .amount,:root .tier ul li::before,:root .unlock .price{color:var(--neon) !important}
:root section#pricing a:not(.btn),:root section#faq a:not(.btn),:root .dk details a:not(.btn){color:var(--neon)}
:root .dk .save{background:transparent !important;color:var(--neon) !important;border-color:var(--neon) !important}
:root .dk .rev,:root section#proof .rev{border-left:3px solid var(--green) !important}

/* green = solutions, amber = check, on the light surfaces */
:root .save{background:var(--green-tint) !important;color:var(--green-ink) !important;border:1px solid var(--green-line) !important}
:root .verdict{background:var(--amber-tint) !important;color:var(--amber-ink) !important;border-color:var(--amber-line) !important}
:root .cr i.y{color:var(--green-ink) !important}
:root .cr i.p{color:var(--amber-ink) !important}
:root .ex .v.proceed{background:var(--green-tint) !important;color:var(--green-ink) !important}
:root .ex .v.caution{background:var(--amber-tint) !important;color:var(--amber-ink) !important}
:root .tick{background:var(--green) !important;color:#fff !important}
:root .quote{border-left-color:var(--pink) !important}
:root .reason .statefact{border-left:3px solid var(--pink)}

/* homepage state panels: the link to the state's rules hub (Phase 3), green ink on cream */
:root section#sample .mappanel .mp-note a.mp-rules{display:inline-block;margin-top:6px;color:var(--green-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--green)}
:root section#sample .mappanel .mp-note a.mp-rules:hover{color:var(--pink-ink);text-decoration-color:var(--pink-ink)}

/* teaser result card: neon property name on the red head */
:root .r-head .prop{color:var(--neon) !important}

/* property-report comparison (.vswrap): the Report column header is neon on its black cell,
   the column carries the neon wash. The why page's .vs table has a light header, so its
   "Decision Report" column header is green ink instead. */
:root .vswrap .vs td:nth-child(3){background:var(--neon-wash) !important}
:root .vswrap .vs thead th:nth-child(3),:root .vs-card .head.hot{color:var(--neon) !important}
:root .tablewrap .vs thead th:nth-child(2){color:var(--green-ink) !important}
:root .tablewrap .vs td:nth-child(2){background:var(--neon-wash) !important}
:root .tablewrap .vs td:nth-child(3){background:transparent !important}

/* ══ Library pages (site.css base; no !important needed) ══ */
.eyebrow{background:var(--pink);color:var(--ink-on-accent);border-color:var(--pink)}
.article-head .status{border-left-color:var(--amber);background:var(--amber-tint)}
.prose .callout{border-left-color:var(--green);background:var(--green-tint)}
.prose blockquote{border-left-color:var(--pink);background:var(--pink-tint)}
.prose thead th{color:var(--neon)}
.prose dfn a{text-decoration-color:var(--pink-ink)}
.cta-box{border-top:6px solid var(--neon)}
.cta-box h2{color:var(--neon)}
.cta-box .btn{background:var(--neon);color:var(--ink-on-accent);border-color:var(--neon)}
.cta-box .btn:hover{background:var(--neon-hover);border-color:var(--neon-hover)}
.cta-box .btn.ghost{background:transparent;color:var(--cream);border-color:var(--cream)}
.cta-box .btn.ghost:hover{background:rgba(245,239,227,.12)}
.stage-card{border-top:4px solid var(--pink)}
.stage-card:nth-child(2n){border-top-color:var(--green)}
.stage-card:nth-child(3n){border-top-color:var(--neon)}
.faq summary::after{color:var(--green-ink)}
.faq details[open]{border-left:3px solid var(--pink)}
.tag-draft{color:var(--amber-ink);border-color:var(--amber)}
.sample-list a:hover{border-color:var(--pink-ink);background:var(--pink-tint)}
.glossary dt::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pink);margin-right:8px;vertical-align:1px}
.disclaimer{border-left:4px solid var(--tan)}
.calc-result h2{color:var(--neon)}
.calc-result .primary .v{color:var(--neon)}
.calc-result .primary{padding-bottom:12px;border-bottom:1px solid var(--neon)}
.calc-list a{border-top:4px solid var(--green)}
.calc-list a:hover{border-color:var(--green)}
/* charts and diagrams (visual system, 7 Sep 2026). Series colours validated with the
   dataviz palette checks on cream: Buyble Red for the full cost or the problem, a
   chart-grade step of Buyble Green (#5F8A45, enough chroma to read as a colour at mark
   size; #708857 itself reads grey) for the buyer's side or the solution, a red ramp for
   ordered series. Pink and neon are fills and rules here, never data marks. */
:root{--chart-1:var(--red);--chart-2:#5F8A45;--chart-r1:#C86A6A;--chart-r2:#B03030;--chart-r3:#7A0808}
.chart-svg .s1,.chart-legend .s1{fill:var(--chart-1);background:var(--chart-1);stroke:var(--chart-1)}
.chart-svg .s2,.chart-legend .s2{fill:var(--chart-2);background:var(--chart-2);stroke:var(--chart-2)}
.chart-svg .r1,.chart-legend .r1{fill:var(--chart-r1);background:var(--chart-r1);stroke:var(--chart-r1)}
.chart-svg .r2,.chart-legend .r2{fill:var(--chart-r2);background:var(--chart-r2);stroke:var(--chart-r2)}
.chart-svg .r3,.chart-legend .r3{fill:var(--chart-r3);background:var(--chart-r3);stroke:var(--chart-r3)}
.chart-svg .line{fill:none}
.chart-svg .dot{stroke:var(--card)}
figure.chart,figure.diagram{border-top:4px solid var(--pink)}
figure.chart-note{border-top-color:var(--amber)}
.diagram-svg .dg-node-hi rect{fill:var(--neon);stroke:var(--neon)}
.diagram-svg .dg-node-green rect{fill:var(--green-tint);stroke:var(--green)}
.diagram-svg .dg-node-red rect{fill:var(--pink-tint);stroke:var(--red)}
.diagram-svg .dg-band rect{fill:var(--green-tint);stroke:var(--green-line)}
.diagram-svg .dg-dot circle{fill:var(--chart-2);stroke:var(--card);stroke-width:2}
.diagram-svg .dg-marker path{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.diagram-svg .dg-red{fill:var(--red)}
.diagram-svg .dg-tick-green path{stroke:var(--chart-2);stroke-width:4;stroke-linecap:round}
.diagram-svg .dg-tick-neon path{stroke:var(--neon);stroke-width:4;stroke-linecap:round}
.diagram-svg .dg-tick-red path{stroke:var(--red);stroke-width:4;stroke-linecap:round}
.diagram-svg .dg-fill-green rect{fill:var(--green-tint)}
.diagram-svg .dg-fill-red rect{fill:var(--red)}
.diagram-svg .dg-on-red{fill:var(--cream)}

/* state pages: the current state is a neon chip with ink text (a fill on cream), the
   remembered state a pink ring; unconfirmed facts and the "still to confirm" list are amber */
.state-chips a[aria-current="page"]{background:var(--neon);color:var(--ink-on-accent);border-color:var(--neon)}
.state-chips a.is-saved{border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.state-chips .state-hint{background:var(--pink-tint);border-left:3px solid var(--pink);padding:8px 12px;border-radius:0 8px 8px 0}
.state-topics a{border-top:4px solid var(--pink)}
.state-topics a:nth-child(2n){border-top-color:var(--green)}
.state-topics a:nth-child(3n){border-top-color:var(--neon)}
.state-topics a:hover{border-color:var(--pink-ink)}
.state-card{border-top:4px solid var(--green)}
.state-card:nth-child(2n){border-top-color:var(--pink)}
.state-card:nth-child(3n){border-top-color:var(--neon)}
.unconfirmed{color:var(--amber-ink)}
.open-items{border-left:3px solid var(--amber);background:var(--amber-tint);padding:16px 20px;border-radius:0 10px 10px 0}
.open-items .section-title{margin-top:0;color:var(--amber-ink)}
.state-facts h3 a:hover{border-bottom-color:var(--pink-ink)}
.agency-list li{border-left:3px solid var(--green)}
.calc-form .check input:checked{accent-color:var(--green)}
.site-footer{border-top:6px solid var(--pink)}
.site-footer .f-head{color:var(--neon)}
.site-footer a:hover{color:var(--neon)}