/* ONBO · lime look (2026-11-01). Loaded last, it turns every purple on the site into lime #C6F432.
   Purple stays only inside the academy screenshots. On lime, text and buttons turn near-black;
   on the dark page, lime is the one bright thing. Remove this file's <link> to get the purple look back. */

html:root[data-look="2"][data-v] {
  --lime: #C6F432; --lime-hi: #D6FB5C; --lime-lo: #B2E21F; --lime-ink: #10130A; --lime-ink-2: rgba(16, 19, 10, .72); --lime-line: rgba(16, 19, 10, .16);
  --pop: #C6F432; --pop-ink: #10130A; --pop-on-dark: #C6F432; --pop-soft: rgba(198, 244, 50, .3); --pop-tint: rgba(198, 244, 50, .12); --pop-deep: #C6F432;
  --block-accent: #C6F432; --mark: #C6F432; --grid: rgba(198, 244, 50, .05);
  --band: #C6F432;
}

/* buttons: lime with near-black text everywhere on the dark page */
html[data-look="2"][data-v] .btn--primary, html[data-look="2"][data-v] .btn--pop, html[data-look="2"][data-v] .d-sticky, html[data-look="2"][data-v] .bar nav a.btn--primary {
  background: var(--lime); color: var(--lime-ink); border-color: transparent;
  box-shadow: 0 10px 28px -14px rgba(198, 244, 50, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
html[data-look="2"][data-v] .btn--primary:hover, html[data-look="2"][data-v] .btn--pop:hover, html[data-look="2"][data-v] .d-sticky:hover {
  background: var(--lime-hi); box-shadow: 0 16px 36px -14px rgba(198, 244, 50, .85), inset 0 1px 0 rgba(255, 255, 255, .4); }

/* on a lime band or card, buttons turn near-black so they still stand out */
html[data-look="2"][data-v] .d-proof .btn--pop, html[data-look="2"][data-v] .d-calc__out .btn--pop, html[data-look="2"][data-v] .close .cta-row .btn--primary {
  background: var(--lime-ink); color: #FFFFFF; box-shadow: 0 14px 30px -14px rgba(16, 19, 10, .6); }
html[data-look="2"][data-v] .d-proof .btn--pop:hover, html[data-look="2"][data-v] .d-calc__out .btn--pop:hover, html[data-look="2"][data-v] .close .cta-row .btn--primary:hover {
  background: #23281A; box-shadow: 0 18px 38px -14px rgba(16, 19, 10, .75); }

/* hero: a faint lime light behind the scene */
html[data-look="2"][data-v] .p-hero__light { background: radial-gradient(42% 50% at 72% 50%, rgba(198, 244, 50, .09), transparent 72%); }
html[data-look="2"][data-v] .p-hero__copy .h1 .p-hl { color: var(--lime); }

/* results band (Titan Properties): lime band, near-black type, the main number on a black tile */
html[data-look="2"][data-v] .d-proof { background: var(--lime); --block-ink: var(--lime-ink); --block-ink-2: var(--lime-ink-2); --block-line: var(--lime-line); color: var(--lime-ink); }
html[data-look="2"][data-v] .d-proof .d-kick { color: var(--lime-ink-2); }
html[data-look="2"][data-v] .d-proof .d-kick::before { background-color: var(--lime-ink); }
html[data-look="2"][data-v] .d-proof .h2, html[data-look="2"][data-v] .d-proof h2 { color: var(--lime-ink); }
html[data-look="2"][data-v] .d-proof .d-big__item { background: rgba(16, 19, 10, .06); border: 1px solid var(--lime-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-look="2"][data-v] .d-proof .d-big dd { color: var(--lime-ink); }
html[data-look="2"][data-v] .d-proof .d-big dt { color: var(--lime-ink-2); }
html[data-look="2"][data-v] .d-proof .d-big__item--hi { background: var(--lime-ink); border-color: var(--lime-ink); box-shadow: 0 30px 60px -30px rgba(16, 19, 10, .6); }
html[data-look="2"][data-v] .d-proof .d-big__item--hi dd { color: var(--lime); }
html[data-look="2"][data-v] .d-proof .d-big__item--hi dt { color: rgba(255, 255, 255, .72); }
html[data-look="2"][data-v] .d-proof .d-link, html[data-look="2"][data-v] .d-proof .body, html[data-look="2"][data-v] .d-proof p { color: var(--lime-ink); }

/* calculator: the result is a lime card with near-black numbers */
html[data-look="2"][data-v] .d-calc__out { background: var(--lime); border-color: transparent; box-shadow: none; --block-ink: var(--lime-ink); --block-ink-2: var(--lime-ink-2); --block-line: var(--lime-line); color: var(--lime-ink); }
html[data-look="2"][data-v] .d-calc__out .d-out__num, html[data-look="2"][data-v] .d-calc__out .d-out__pair b, html[data-look="2"][data-v] .d-calc__out b { color: var(--lime-ink); text-shadow: none; }
html[data-look="2"][data-v] .d-calc__out .d-kick, html[data-look="2"][data-v] .d-calc__out span, html[data-look="2"][data-v] .d-calc__out p { color: var(--lime-ink-2); }
html[data-look="2"][data-v] .d-calc input[type="range"]::-webkit-slider-thumb { border-color: var(--lime); }
html[data-look="2"][data-v] .d-calc input[type="range"]::-moz-range-thumb { border-color: var(--lime); }

/* steps, tabs, stats and team: small filled lime accents */
html[data-look="2"][data-v] .d-steps__n { background: var(--lime); color: var(--lime-ink); border: 0; box-shadow: none; }
html[data-look="2"][data-v] .feat__tabs [role="tab"][aria-selected="true"] { background: var(--lime); color: var(--lime-ink); border-color: transparent; box-shadow: none; }
html[data-look="2"][data-v] .d-stat--dark { background: var(--lime); border-color: transparent; }
html[data-look="2"][data-v] .d-stat--dark b, html[data-look="2"][data-v] .d-stat--dark b small { color: var(--lime-ink); }
html[data-look="2"][data-v] .d-stat--dark span, html[data-look="2"][data-v] .d-stat--dark .src, html[data-look="2"][data-v] .d-stat--dark a { color: var(--lime-ink-2); }
html[data-look="2"][data-v] .d-team__ic { background: var(--lime); box-shadow: none; }
html[data-look="2"][data-v] .d-team__ic svg { stroke: var(--lime-ink); }
html[data-look="2"][data-v] .d-team__faces span:first-child { background: #EDEFF6; color: var(--lime-ink); }
html[data-look="2"][data-v] .d-team__faces span + span { background: var(--lime); color: var(--lime-ink); }
html[data-look="2"][data-v] .d-laptop__screen { box-shadow: 0 0 0 1px rgba(198, 244, 50, .18), 0 40px 90px -30px rgba(0, 0, 0, .8); }
html[data-look="2"][data-v] .d-ba__fig--after figcaption b { background: var(--lime); color: var(--lime-ink); }

/* the route: lime fill and a lime dot that drops into the logo */
html[data-look="2"][data-v] .p-route__fill { background: var(--lime); }
html[data-look="2"][data-v] .p-route__dot { background: var(--lime); box-shadow: 0 0 0 2px #06070B, 0 0 18px -2px rgba(198, 244, 50, .7); }
html[data-look="2"][data-v] .p-route__stop:focus-visible { outline-color: var(--lime); }

/* enquiry: a lime band, near-black type and logo, the form as a white card */
html[data-look="2"][data-v] .close { background: var(--lime); --block-ink: var(--lime-ink); --block-ink-2: var(--lime-ink-2); color: var(--lime-ink); }
html[data-look="2"][data-v] .close .h2, html[data-look="2"][data-v] .close h2 { color: var(--lime-ink); }
html[data-look="2"][data-v] .close .lede { color: var(--lime-ink-2); }
html[data-look="2"][data-v] .p-arrive { color: var(--lime-ink); }
html[data-look="2"][data-v] .p-arrive__dot { fill: var(--lime-ink); }
html[data-look="2"][data-v] .p-slogan { color: var(--lime-ink); }
html[data-look="2"][data-v] .close .form { box-shadow: 0 30px 70px -36px rgba(16, 19, 10, .55); }
html[data-look="2"][data-v] .close .form .btn--primary, html[data-look="2"][data-v] .close .form button[type="submit"] { background: var(--lime-ink); color: #FFFFFF; box-shadow: none; }
html[data-look="2"][data-v] .close .form .btn--primary:hover, html[data-look="2"][data-v] .close .form button[type="submit"]:hover { background: #23281A; }
html[data-look="2"][data-v] .close .form .d-reassure::before { background: var(--lime-ink) var(--check) center / 12px no-repeat; }
html[data-look="2"][data-v] .close .form input:focus-visible, html[data-look="2"][data-v] .close .form select:focus-visible, html[data-look="2"][data-v] .close .form textarea:focus-visible { outline: 2px solid var(--lime-ink); }
html[data-look="2"][data-v] mark.d-hl { background: linear-gradient(transparent 58%, rgba(198, 244, 50, .38) 58%, rgba(198, 244, 50, .38) 92%, transparent 92%); }

/* ---------- white bands (2026-11-04): the results and the enquiry sections sit on white; the lime moves onto the
   cards, so the page has colour without whole screens of lime. */
html[data-look="2"][data-v] .d-proof, html[data-look="2"][data-v] .close { background: #FFFFFF; --block-ink: #10130A; --block-ink-2: #4B5060; --block-line: #E3E5EA; color: #10130A; }
html[data-look="2"][data-v] .d-proof .d-kick { color: #4B5060; }
html[data-look="2"][data-v] .d-proof .d-kick::before { background-color: #10130A; }
html[data-look="2"][data-v] .d-proof .h2, html[data-look="2"][data-v] .d-proof h2 { color: #10130A; }
html[data-look="2"][data-v] .d-proof .body, html[data-look="2"][data-v] .d-proof p { color: #4B5060; }
html[data-look="2"][data-v] .d-proof .d-link { color: #10130A; }
html[data-look="2"][data-v] .d-proof .d-big__item { background: var(--lime); border: 0; box-shadow: none; }
html[data-look="2"][data-v] .d-proof .d-big__item dd { color: #10130A; }
html[data-look="2"][data-v] .d-proof .d-big__item dt { color: rgba(16, 19, 10, .72); }
html[data-look="2"][data-v] .d-proof .d-big__item--hi { background: #10130A; box-shadow: 0 24px 50px -30px rgba(16, 19, 10, .55); }
html[data-look="2"][data-v] .d-proof .d-big__item--hi dd { color: var(--lime); }
html[data-look="2"][data-v] .d-proof .d-big__item--hi dt { color: rgba(255, 255, 255, .75); }
html[data-look="2"][data-v] .d-proof .logo-tile { box-shadow: 0 0 0 1px #E3E5EA; }
html[data-look="2"][data-v] .d-proof .d-ask { color: #10130A; }
html[data-look="2"][data-v] .close .h2, html[data-look="2"][data-v] .close h2 { color: #10130A; }
html[data-look="2"][data-v] .close .lede { color: #4B5060; }
html[data-look="2"][data-v] .close .p-arrive { color: #10130A; }
html[data-look="2"][data-v] .close .p-arrive__dot { fill: var(--lime); stroke: #10130A; stroke-width: 4px; }
html[data-look="2"][data-v] .close .p-slogan { color: #10130A; }
html[data-look="2"][data-v] .close .form { background: #F4F5F0; box-shadow: none; border: 1px solid #E3E5EA; }
html[data-look="2"][data-v] .close .form input, html[data-look="2"][data-v] .close .form select, html[data-look="2"][data-v] .close .form textarea { background: #FFFFFF; }