/* ==========================================================================
   Be Wise Apps: shared Design.md layer (v131, 7 November 2026)
   Jason's design system for the Be Wise apps. Loaded near the end of each
   converted app's pages, after the family sheets (bw-nav.css, bw-family*.css,
   bw-polish.css, contact.css) and before that app's own design sheet
   (for example /consumer-wise/consumer-wise-design.css), which handles the
   app's own components.
   APPEARANCE ONLY: no wording, links, data or behaviour are changed.
   Be University Wise keeps its own sheet (/university-wise/uw-design.css)
   and does not load this file.

   Rules followed (Design.md):
   - dark theme: canvas #090D16, panels #111827, hover/active #1F2937
   - one accent, always amber #F59E0B (main actions, focus, selected items,
     labels, highlights, ad boxes); dark #090D16 text on amber fills
   - status colours only: green #10B981 (good / yes), amber (pending / needs
     a look), red #F87171 (error / no / warning)
   - text #F9FAFB / #9CA3AF / #6B7280; hairline borders rgba(255,255,255,.08), 1px max
   - Newsreader headings, Space Grotesk text and buttons, JetBrains Mono figures
   - 8px grid; inputs 38px; buttons 8px 16px (inline 6px 12px)
   - radii: containers 8px, buttons/inputs 6px, badges 4px or full
   - no gradients, no drop-shadow elevation, no glows, no decorative backdrops
   ========================================================================== */

:root{
  color-scheme:dark;

  /* ---- Design.md tokens ---- */
  --d-canvas:#090D16;
  --d-panel:#111827;
  --d-hover:#1F2937;
  --d-accent:#F59E0B;
  --d-green:#10B981;
  --d-red:#F87171;
  --d-line:rgba(255,255,255,0.08);
  --d-line-input:rgba(255,255,255,0.16);
  --d-text:#F9FAFB;
  --d-text-2:#9CA3AF;
  --d-text-3:#6B7280;
  --d-on-accent:#090D16;
  --d-accent-tint:rgba(245,158,11,0.13);
  --d-accent-edge:rgba(245,158,11,0.35);
  --d-green-tint:rgba(16,185,129,0.13);
  --d-green-edge:rgba(16,185,129,0.4);
  --d-red-tint:rgba(248,113,113,0.12);
  --d-red-edge:rgba(248,113,113,0.4);
  --d-accent-hover:color-mix(in srgb, var(--d-accent) 86%, var(--d-text));
  --d-accent-active:color-mix(in srgb, var(--d-accent) 82%, var(--d-canvas));

  --d-display:"Newsreader", Georgia, "Times New Roman", serif;
  --d-body:"Space Grotesk", "Instrument Sans", ui-sans-serif, sans-serif;
  --d-mono:"JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* ---- the family's shared tokens, re-pointed so the existing rules follow ---- */
  --bw-ink:var(--d-text); --bw-harbour:var(--d-hover);   /* --bw-ink is mostly used for text; its few backgrounds are set below */ --bw-night:var(--d-canvas);
  --bw-coral:var(--d-accent); --bw-coral-strong:var(--d-accent); --bw-coral-hover:var(--d-accent-hover); --bw-coral-deep:var(--d-accent);
  --bw-coral-light:var(--d-accent-edge); --bw-coral-soft:var(--d-accent-tint); --bw-coral-wash:var(--d-accent-tint); --bw-coral-text:var(--d-accent);
  --bw-mist:var(--d-canvas); --bw-soft:var(--d-panel); --bw-wash:var(--d-panel); --bw-tint:var(--d-panel); --bw-panel:var(--d-panel);
  --bw-rule:var(--d-line); --bw-rule-strong:var(--d-line-input); --bw-steel:var(--d-text-2);
  --bw-text:var(--d-text); --bw-text-soft:var(--d-text-2); --bw-on-ink:var(--d-text-2);
  --bw-blue:var(--d-text); --bw-blue-bg:var(--d-hover); --bw-info:var(--d-text); --bw-info-bg:var(--d-hover); --bw-link:var(--d-text);
  --bw-good:var(--d-green); --bw-good-bg:var(--d-green-tint);
  --bw-red:var(--d-red); --bw-red-dark:var(--d-red); --bw-red-bg:var(--d-red-tint); --bw-red-rule:var(--d-red-edge);
  --bw-accent:var(--d-accent);
  --bw-serif:var(--d-display); --bw-display:var(--d-display); --bw-sans:var(--d-body);

  /* contact-page tokens (contact.css) */
  --brand:var(--d-panel); --brand-2:var(--d-panel); --line:var(--d-line-input);
  --error:var(--d-red); --ok:var(--d-green);
}

/* ==========================================================================
   Base
   ========================================================================== */
html{ background:var(--d-canvas); }
html body{ background:var(--d-canvas); color:var(--d-text); font-family:var(--d-body); font-weight:400; line-height:1.6; }
html body ::selection{ background:var(--d-accent-tint); color:var(--d-text); }
html body :is(h1, h2, h3, h4){ font-family:var(--d-display); color:var(--d-text); letter-spacing:-0.01em; line-height:1.15; }
html body h1{ font-weight:500; letter-spacing:-0.02em; }
html body h2{ font-weight:500; }
html body :is(h3, h4){ font-weight:600; line-height:1.25; }
html body :is(h5, h6){ font-family:var(--d-body); color:var(--d-text); }
html body :is(p, li, dd, dt, td, th, figcaption, blockquote, small, label, summary){ font-family:var(--d-body); }
html body p{ color:var(--d-text-2); }
html body main p, html body article p{ color:var(--d-text-2); }
html body :is(strong, b){ font-weight:600; color:var(--d-text); }
html body em{ color:inherit; }
html body a{ color:var(--d-text); text-decoration-color:var(--d-accent); text-decoration-thickness:1px; text-underline-offset:3px; }
html body a:hover{ color:var(--d-accent); text-decoration-color:var(--d-accent); }
html body :focus-visible{ outline:2px solid var(--d-accent) !important; outline-offset:2px; }
html body li::marker{ color:var(--d-text-3); }
html body hr{ border:0; border-top:1px solid var(--d-line); background:none; }
html body :is(code, kbd, samp, pre, time, .num, .mono){ font-family:var(--d-mono); }
html body :is(code, kbd){ background:var(--d-hover); color:var(--d-text); border:1px solid var(--d-line); border-radius:4px; padding:0 4px; }
html body pre{ background:var(--d-panel); color:var(--d-text); border:1px solid var(--d-line); border-radius:8px; }
html body pre code{ background:none; border:0; padding:0; }
html body mark{ background:var(--d-accent-tint); color:var(--d-text); }
html body blockquote{ border-left:1px solid var(--d-accent); color:var(--d-text-2); background:transparent; }
html body img{ color:var(--d-text-2); }
html body svg text{ font-family:var(--d-body); }

/* no decorative layers (Design.md: no artificial backdrops, glows or lifts) */
html body .bwp-compass{ display:none !important; }
html body .bwp-card, html body .bwp-card:hover{ background-image:none !important; box-shadow:none !important; transform:none !important; }
html body .eyebrow-rule::before, html body .hero .eyebrow-rule::after{ background:var(--d-accent) !important; }
html body :is(.faq-group-title, .home-suggest-label, .topic-sources-label, .advertise-contact-label)::before{ background:var(--d-accent) !important; }

/* ==========================================================================
   Top strip, disclaimer bar, "Be Wise Apps" button, 3-bar menu
   ========================================================================== */
html body :is(.dis-bar, .disclaimer-bar, .disclaimer, .top-disclaimer, .bw-dis-merged){
  background:var(--d-canvas) !important; background-image:none !important; color:var(--d-text-2) !important;
  border-bottom:1px solid var(--d-line); border-top:0; font-family:var(--d-body); box-shadow:none !important;
}
html body :is(.dis-bar, .disclaimer-bar, .disclaimer, .top-disclaimer, .bw-dis-merged) :is(strong, b){ color:var(--d-text) !important; }
html body :is(.dis-bar, .disclaimer-bar, .disclaimer, .top-disclaimer, .bw-dis-merged) a:not(.bw-appsbtn){ color:var(--d-text) !important; text-decoration-color:var(--d-accent); }
html body :is(.dis-bar, .disclaimer-bar, .top-disclaimer) button{
  background:transparent !important; border:1px solid var(--d-line-input) !important; color:var(--d-text) !important;
  border-radius:6px !important; padding:4px 12px; font-family:var(--d-body); font-weight:500;
}
html body :is(.dis-bar, .disclaimer-bar, .top-disclaimer) button:hover{ background:var(--d-hover) !important; }
html body .bw-strip{ background:var(--d-canvas) !important; background-image:none !important; border-bottom:1px solid var(--d-line); box-shadow:none !important; font-family:var(--d-body); }

/* "Be Wise Apps" button: still a clear, filled button (house rule), in the amber accent */
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn{
  background:var(--d-accent) !important; color:var(--d-on-accent) !important;
  border:1px solid var(--d-accent) !important; border-radius:6px !important;
  box-shadow:none !important; font-family:var(--d-body) !important; font-weight:600 !important;
  padding:6px 16px 6px 6px !important; min-height:38px; text-shadow:none !important;
}
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn img{ box-shadow:none !important; }
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn span{ color:var(--d-on-accent) !important; }
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn:hover{ background:var(--d-accent-hover) !important; border-color:var(--d-accent-hover) !important; box-shadow:none !important; transform:none !important; }
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn:active{ background:var(--d-accent-active) !important; transform:none !important; }
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn:focus-visible{ outline:2px solid var(--d-text) !important; outline-offset:2px; background:var(--d-accent) !important; }
html body a.bw-appsbtn.bw-appsbtn.bw-on-light:not(.hero *){ border-color:var(--d-accent) !important; }

/* "Install app" button and its help panel */
html body .bw-installbtn, html body button.bw-installbtn.bw-appsbtn{
  background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important;
  border-radius:6px !important; box-shadow:none !important; font-family:var(--d-body) !important; font-weight:500 !important; min-height:38px;
}
html body .bw-installbtn:hover{ background:var(--d-hover) !important; }
html body .bw-installbtn.bw-installbtn span{ color:var(--d-text) !important; }
html body .bw-install-panel{ background:var(--d-panel) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; font-family:var(--d-body) !important; }
html body .bw-install-panel :is(h2, h3){ color:var(--d-text) !important; font-family:var(--d-display) !important; }
html body .bw-install-panel p{ color:var(--d-text-2) !important; }
html body .bw-install-panel .bw-ip-close{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; border-radius:6px !important; }

html body .bw-burger, html body .bw-burger.bw-on-light{
  color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; background:transparent !important; box-shadow:none !important;
}
html body .bw-burger:hover, html body .bw-burger[aria-expanded="true"], html body .bw-burger.bw-on-light:hover, html body .bw-burger.bw-on-light[aria-expanded="true"]{
  background:var(--d-hover) !important; border-color:var(--d-line-input) !important;
}
html body .bw-menu{
  background:var(--d-panel) !important; color:var(--d-text); border:1px solid var(--d-line-input) !important; border-radius:8px !important;
  box-shadow:none !important; font-family:var(--d-body); padding:8px;
}
html body .bw-menu a, html body .bw-menu button{ color:var(--d-text) !important; background:transparent; border-radius:6px; padding:10px 16px; font-family:var(--d-body); }
html body .bw-menu a:hover, html body .bw-menu button:hover, html body .bw-menu a:focus-visible, html body .bw-menu button:focus-visible{ background:var(--d-hover) !important; }
html body .bw-menu .bw-sep{ background:var(--d-line) !important; }
html body .bw-menu .bw-contact{ box-shadow:inset 2px 0 0 var(--d-accent) !important; font-weight:600; background:transparent !important; }

/* older in-app menu toggles (three bars drawn with spans) */
html body .nav-toggle{ background:transparent !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; box-shadow:none !important; color:var(--d-text); }
html body .nav-toggle:hover{ background:var(--d-hover) !important; }
html body .nav-toggle span, html body .nav-toggle span::before, html body .nav-toggle span::after{ background:var(--d-text) !important; }

/* ==========================================================================
   App headers and in-app navigation (family pattern)
   ========================================================================== */
html body :is(header.masthead, header.site, header.site-header, header.app-header, .topnav, .top-nav, .app-bar){
  background:var(--d-panel) !important; background-image:none !important; border-bottom:1px solid var(--d-line) !important;
  box-shadow:none !important; color:var(--d-text);
}
html body :is(.wordmark, .wordmark .name, .brand, .brand span, .logo-text, .app-name){ color:var(--d-text) !important; font-family:var(--d-display); font-weight:600; letter-spacing:-0.02em; text-shadow:none !important; }
html body .wordmark .juris{ color:var(--d-text-2) !important; background:transparent !important; border:1px solid var(--d-line-input) !important; border-radius:4px !important; font-family:var(--d-mono); font-weight:400; }
html body :is(nav.primary-nav, nav.primary){ background:var(--d-panel) !important; border-color:var(--d-line) !important; box-shadow:none !important; }
html body :is(nav.primary-nav, nav.primary) :is(button, a.nav-link, a.navlink){
  color:var(--d-text-2) !important; background:transparent !important; font-family:var(--d-body); font-weight:500; border-radius:6px; box-shadow:none !important;
}
html body :is(nav.primary-nav, nav.primary) :is(button, a.nav-link, a.navlink):hover{ background:var(--d-hover) !important; color:var(--d-text) !important; }
html body :is(nav.primary-nav, nav.primary) :is(button.active, button.on, button[aria-current], a[aria-current]){
  color:var(--d-text) !important; background:transparent !important; box-shadow:inset 0 -2px 0 var(--d-accent) !important;
}
html body nav.primary-nav button.advertise-tab, html body nav.primary-nav button.advertise-tab:hover{
  color:var(--d-accent) !important; background:transparent !important; border:1px solid var(--d-accent-edge) !important;
}
@media(max-width:900px){
  html body :is(nav.primary-nav, nav.primary) :is(button.active, button.on){ box-shadow:inset 2px 0 0 var(--d-accent) !important; }
}

/* bottom tab bars on phone-style apps */
html body :is(.bottom-nav, .bnav, nav.bottom, .tabbar){ background:var(--d-panel) !important; border-top:1px solid var(--d-line) !important; box-shadow:none !important; }
html body :is(.bottom-nav, .bnav, nav.bottom, .tabbar) :is(button, a){ color:var(--d-text-2) !important; background:transparent !important; font-family:var(--d-body); }
html body :is(.bottom-nav, .bnav, nav.bottom, .tabbar) :is(button, a):is(.active, .on, [aria-current], [aria-selected="true"]){ color:var(--d-accent) !important; }

/* ==========================================================================
   Home screen hero (family pattern): a plain panel, no backdrop
   ========================================================================== */
html body .hero{ color:var(--d-text); background-image:none !important; box-shadow:none !important; }
html body .hero:not(.hero-kigali):not(.hero-saigon)::before, html body .hero:not(.hero-kigali):not(.hero-saigon)::after{ background:var(--d-panel) !important; background-image:none !important; box-shadow:none !important; }
/* Rwanda and Vietnam Wise keep their own hero photographs (see rwanda-vietnam-design.css) */
html body .hero :is(h1, h2){ color:var(--d-text) !important; text-shadow:none !important; }
html body .hero :is(.lede, p){ color:var(--d-text-2) !important; text-shadow:none !important; }
html body .hero a:not(.btn):not(.bw-appsbtn){ color:var(--d-text); text-decoration-color:var(--d-accent); }
html body :is(.eyebrow, .kicker, .eyebrow-rule, .overline){ color:var(--d-accent) !important; font-family:var(--d-body); font-weight:500; letter-spacing:.08em; }
html body :is(.eyebrow, .kicker)::before{ background:var(--d-accent) !important; }

/* ==========================================================================
   Advertising boxes: must stand out (house rule), done with an amber
   highlight and a 1px edge rather than a shadow
   ========================================================================== */
html body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta, .ad-banner, .ad-slot, .advertise-box){
  background:var(--d-accent-tint) !important; background-image:none !important; border:1px solid var(--d-accent) !important;
  border-radius:8px !important; box-shadow:none !important; color:var(--d-text) !important; font-family:var(--d-body);
}
html body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta, .ad-banner, .ad-slot, .advertise-box) :is(p, span, small, li){ color:var(--d-text-2) !important; }
html body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta, .ad-banner, .ad-slot, .advertise-box) :is(h2, h3, h4, strong, b){ color:var(--d-text) !important; }
html body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta, .ad-banner, .ad-slot, .advertise-box) a:not(.btn):not(.bw-spot-cta){ color:var(--d-text) !important; text-decoration-color:var(--d-accent) !important; }
html body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta, .ad-banner, .ad-slot, .advertise-box) a:not(.btn):not(.bw-spot-cta):hover{ color:var(--d-accent) !important; }
html body :is(.bw-spot, .bw-spot-banner) > strong:first-child, html body .bw-spot-label.bw-spot-label.bw-spot-label, html body .dealer-spot > .lbl.lbl.lbl{
  background:var(--d-accent) !important; color:var(--d-on-accent) !important; border-radius:4px !important;
  font-family:var(--d-body) !important; font-weight:600 !important;
}
html body :is(.bw-spot, .bw-spot-banner, .dealer-spot, .advertise-cta, .avail-slot:has(> .cbtn), .ad-banner, .advertise-box) :is(.btn, .bw-spot-cta, button){
  background:var(--d-accent) !important; color:var(--d-on-accent) !important; border:1px solid var(--d-accent) !important;
  border-radius:6px !important; box-shadow:none !important; font-family:var(--d-body) !important; font-weight:600 !important;
}
html body :is(.bw-spot, .bw-spot-banner, .dealer-spot, .advertise-cta, .avail-slot:has(> .cbtn), .ad-banner, .advertise-box) :is(.btn, .bw-spot-cta, button):hover{ background:var(--d-accent-hover) !important; }

/* the same, when an app has switched its own dark display setting on (bw-polish.css has dark-setting ad colours) */
:root[data-theme] body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta){
  background:var(--d-accent-tint) !important; border:1px solid var(--d-accent) !important; box-shadow:none !important; color:var(--d-text) !important;
}
:root[data-theme] body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta) a{ color:var(--d-text) !important; }
:root[data-theme] body :is(.bw-spot, .bw-spot-banner, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta) strong{ color:var(--d-text) !important; }
:root[data-theme] body :is(.bw-spot, .bw-spot-banner) > strong:first-child{ color:var(--d-on-accent) !important; }

/* ==========================================================================
   Buttons
   ========================================================================== */
html body :is(.btn, .button, .cta-btn, .primary-btn, button.primary, .btn-primary){
  background:var(--d-accent) !important; background-image:none !important; color:var(--d-on-accent) !important;
  border:1px solid var(--d-accent) !important; border-radius:6px !important; padding:8px 16px; min-height:38px;
  font-family:var(--d-body) !important; font-weight:600; box-shadow:none !important; text-shadow:none !important;
  transition:background-color .12s ease, border-color .12s ease;
}
html body :is(.btn, .button, .cta-btn, .primary-btn, button.primary, .btn-primary):hover{ background:var(--d-accent-hover) !important; border-color:var(--d-accent-hover) !important; color:var(--d-on-accent) !important; transform:none !important; }
html body :is(.btn, .button, .cta-btn, .primary-btn, button.primary, .btn-primary):active{ background:var(--d-accent-active) !important; border-color:var(--d-accent-active) !important; }
html body :is(.btn, .button, .cta-btn, .primary-btn, button.primary, .btn-primary):is(:disabled, [disabled], [aria-disabled="true"]){
  background:var(--d-hover) !important; border-color:var(--d-line) !important; color:var(--d-text-3) !important; opacity:1; cursor:not-allowed;
}
html body :is(.btn, .button, button)[aria-busy="true"]{ cursor:progress; opacity:.75; }
html body :is(.btn, .button):is(.secondary, .ghost, .outline, .btn-secondary, .light, .plain, .link-btn, .alt),
html body :is(.btn-secondary, .btn-ghost, .btn-outline, .secondary-btn, .ghost-btn){
  background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important;
  border-radius:6px !important; box-shadow:none !important; font-family:var(--d-body) !important; font-weight:500;
}
html body :is(.btn, .button):is(.secondary, .ghost, .outline, .btn-secondary, .light, .plain, .link-btn, .alt):hover,
html body :is(.btn-secondary, .btn-ghost, .btn-outline, .secondary-btn, .ghost-btn):hover{ background:var(--d-hover) !important; color:var(--d-text) !important; border-color:var(--d-line-input) !important; }
html body :is(.btn, .button):is(.brass, .gold, .accent, .coral){ background:var(--d-accent) !important; color:var(--d-on-accent) !important; border-color:var(--d-accent) !important; }
html body :is(.btn, .button):is(.small, .sm, .btn-sm, .mini){ padding:6px 12px; min-height:32px; font-size:.85rem; }
html body :is(.btn, .button):is(.danger, .warn, .delete, .btn-danger){ background:transparent !important; color:var(--d-red) !important; border-color:var(--d-red-edge) !important; }
html body :is(.btn, .button):is(.danger, .warn, .delete, .btn-danger):hover{ background:var(--d-red-tint) !important; }

/* chips, pills and suggestion buttons */
html body :is(.chip, .pill, .suggest-chip, .suggestion, .quick-q, .prompt-chip, .tag-btn, .sugg button, .home-suggest button){
  background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important;
  border-radius:999px; box-shadow:none !important; font-family:var(--d-body); font-weight:500; background-image:none !important;
}
html body :is(.chip, .pill, .suggest-chip, .suggestion, .quick-q, .prompt-chip, .tag-btn, .sugg button, .home-suggest button):hover{ background:var(--d-hover) !important; }
html body :is(.chip, .pill):is(.active, .on, .selected, [aria-pressed="true"]){ background:var(--d-accent-tint) !important; border-color:var(--d-accent) !important; }

/* ==========================================================================
   Forms
   ========================================================================== */
html body :is(select, textarea, input[type=text], input[type=number], input[type=search], input[type=email], input[type=tel], input[type=date], input[type=url], input[type=password], input:not([type]), .cf-input, .cf-select, .cf-textarea){
  background:var(--d-canvas) !important; background-image:none; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important;
  border-radius:6px !important; font-family:var(--d-body) !important; box-shadow:none !important;
}
html body :is(select, input[type=text], input[type=number], input[type=search], input[type=email], input[type=tel], input[type=date], input[type=url], input[type=password], input:not([type]), .cf-input, .cf-select){ min-height:38px; }
html body select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239CA3AF' stroke-width='1.5'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; padding-right:36px !important; -webkit-appearance:none; appearance:none; }
html body select[multiple]{ background-image:none !important; padding-right:12px !important; }
html body :is(select, textarea, input[type=text], input[type=number], input[type=search], input[type=email], input[type=tel], input[type=date], input[type=url], input[type=password]):hover{ border-color:var(--d-text-3) !important; }
html body :is(select, textarea, input, .cf-input, .cf-select, .cf-textarea):focus{
  outline:2px solid var(--d-accent) !important; outline-offset:1px; border-color:var(--d-accent) !important; box-shadow:none !important;
}
html body :is(select, textarea, input):disabled{ color:var(--d-text-3) !important; background-color:var(--d-hover) !important; cursor:not-allowed; }
html body ::placeholder{ color:var(--d-text-3) !important; opacity:1; }
html body select option, html body select optgroup{ background:var(--d-panel); color:var(--d-text); }
html body :is(input[type=checkbox], input[type=radio], input[type=range], progress){ accent-color:var(--d-accent) !important; }
html body input[type=range]{ background:transparent !important; border:0 !important; min-height:0; }
html body :is(input[type=checkbox], input[type=radio]){ min-height:0; }
html body label{ color:var(--d-text-2); }
html body :is(.cf-field > label, .cf-field > legend, legend, label.f, .field-label, .form-label){
  font-family:var(--d-body); font-size:13px; font-weight:500; color:var(--d-text-2); letter-spacing:0;
}
html body fieldset{ border:1px solid var(--d-line); border-radius:8px; background:transparent; }

/* ==========================================================================
   Panels, cards, notes and call-outs (family pattern)
   Cards become flat panels with a hairline edge; no lift, no shadow.
   ========================================================================== */
html body :is(.country-panel, .journey-card, .choice-card, .doc-summary, .chat-panel, .saved-item, .saved-empty, .home-note, .callout,
  .faq-acc details, .next-steps-panel, .choice-option, .card, .panel, .box, .tile, .info-card, .result-card, .tool-card, .topic-card, .guide-card){
  background:var(--d-panel) !important; background-image:none !important; color:var(--d-text);
  border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important;
}
html body :is(.journey-card, .choice-card, .choice-option, .card, .tile, .tool-card, .topic-card, .guide-card):hover{ background:var(--d-hover) !important; transform:none !important; box-shadow:none !important; }
html body :is(.callout.brass, .home-note.brass, .note, .notice, .tip, .callout-brass){ background:var(--d-accent-tint) !important; border:1px solid var(--d-accent-edge) !important; color:var(--d-text); }
html body :is(.warning, .warn-box, .callout.flag, .callout.red, .alert, .danger-box){ background:var(--d-red-tint) !important; border:1px solid var(--d-red-edge) !important; color:var(--d-text); }
html body :is(.callout.sage, .callout.green, .success, .ok-box){ background:var(--d-green-tint) !important; border:1px solid var(--d-green-edge) !important; color:var(--d-text); }
html body :is(.callout, .note, .notice, .warning, .alert, .home-note) :is(p, li){ color:var(--d-text-2); }
html body .warranty-hero{ background:var(--d-panel) !important; background-image:none !important; color:var(--d-text) !important; border:1px solid var(--d-accent) !important; border-radius:8px !important; box-shadow:none !important; }
html body :is(.warranty-hero strong, .next-steps-panel a){ color:var(--d-accent) !important; }

/* details / accordions */
html body details{ border-color:var(--d-line); }
html body details > summary{ color:var(--d-text); font-family:var(--d-body); font-weight:500; }
html body details > summary::marker{ color:var(--d-accent); }
html body .faq-acc summary{ color:var(--d-text) !important; }
html body .faq-acc summary::after{ color:var(--d-accent) !important; }
html body .faq-acc .acc-body{ color:var(--d-text-2) !important; }

/* step track dots */
html body .step-track .dot{ background:var(--d-hover) !important; border:1px solid var(--d-line-input) !important; color:var(--d-text-2) !important; box-shadow:none !important; }
html body .step-track .dot.done, html body .step-track .dot.active, html body .step-track .dot.current{ background:var(--d-accent) !important; border-color:var(--d-accent) !important; color:var(--d-on-accent) !important; }

/* ==========================================================================
   Data tables
   ========================================================================== */
html body table{ border-color:var(--d-line); color:var(--d-text); }
html body :is(table.data, table.plain, .compare-table, .bw-md-table, .table, table.grid, .data-table, .fees){
  background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px; border-collapse:separate; border-spacing:0;
  color:var(--d-text); font-family:var(--d-body); box-shadow:none !important;
}
html body th{ background:var(--d-panel) !important; color:var(--d-text-2) !important; font-family:var(--d-body); font-weight:500; border-color:var(--d-line-input) !important; }
html body td{ border-color:var(--d-line) !important; color:var(--d-text); background-color:transparent; }
html body thead th{ position:sticky; top:0; z-index:1; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
html body :is(table.data, table.plain, .compare-table, .bw-md-table, .table, .data-table, .fees) :is(td, th){ padding:10px 16px; }
html body tr:nth-child(even) > td{ background-color:transparent !important; }
html body tbody tr:hover > td{ background-color:var(--d-hover) !important; }
html body .compare-table .pill, html body .compare-table .pill.mid{ background:var(--d-hover) !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:4px !important; }
html body :is(td, .num, .figure, .stat-num, .amount, .price, .money, .stat .v){ font-variant-numeric:tabular-nums lining-nums; }
html body :is(.num, .figure, .stat-num, .amount, .price, .money, .count, .score, .pct, .metric){ font-family:var(--d-mono); letter-spacing:0; }

/* status badges with a dot */
html body :is(.badge, .status, .tag){ border-radius:4px; font-family:var(--d-body); font-weight:500; box-shadow:none !important; }

/* ==========================================================================
   Chat (the Be Wise chatbots)
   ========================================================================== */
html body :is(.chat-log, .chatlog, .chat-window, .chat-messages, .messages){ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px; box-shadow:none !important; }
html body :is(.chat-msg.user, .msg.user, .msg.me, .message.user, .bubble.user){
  background:var(--d-hover) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-radius:6px !important; box-shadow:none !important;
}
html body :is(.chat-msg.assistant, .chat-msg.bot, .msg.bot, .msg.assistant, .message.bot, .message.assistant, .bubble.bot){
  background:transparent !important; color:var(--d-text) !important; border:0 !important; border-left:1px solid var(--d-accent) !important;
  border-radius:0 !important; box-shadow:none !important; padding-left:16px;
}
html body :is(.chat-msg, .msg, .message, .bubble) :is(p, li){ color:var(--d-text); }
html body :is(.chat-input-row, .chat-input, .chatin, .composer){ background:var(--d-panel) !important; border-color:var(--d-line) !important; box-shadow:none !important; }
html body :is(.chat-input-row, .chat-input, .chatin, .composer) :is(textarea, input){ border-color:var(--d-accent) !important; }
html body :is(.typing, .typing-dots) span{ background:var(--d-text-2) !important; }

/* ==========================================================================
   Before-you-start gate
   ========================================================================== */
html body :is(.gate, .entry-gate-backdrop, .entry-gate, .gate-backdrop, #gate, .disclaimer-gate, .modal-backdrop, .overlay){ background:rgba(9,13,22,0.88) !important; backdrop-filter:none !important; }
html body :is(.gate-box, .entry-gate-box, .gate-card, .gate-inner, .modal, .modal-box, .dialog, dialog){
  background:var(--d-panel) !important; background-image:none !important; color:var(--d-text) !important;
  border:1px solid var(--d-line-input) !important; border-top:1px solid var(--d-accent) !important; border-radius:8px !important; box-shadow:none !important;
}
html body :is(.gate-box, .entry-gate-box, .gate-card, .gate-inner, .modal, .modal-box, .dialog, dialog) :is(h2, h3){ color:var(--d-text) !important; font-weight:600; }
html body :is(.gate-box, .entry-gate-box, .gate-card, .gate-inner, .modal, .modal-box, .dialog, dialog) :is(p, li, label, span){ color:var(--d-text-2); }
html body :is(.gate-box, .entry-gate-box, .gate-card, .gate-inner, .modal, .modal-box, .dialog, dialog) :is(p strong, label strong){ color:var(--d-text); }
html body .bwp-gate-mark{ color:var(--d-accent) !important; }

/* ==========================================================================
   Back / Back to Top, footers
   ========================================================================== */
html body .bw-bottom{ color:var(--d-text-2); font-family:var(--d-body); background:transparent; }
html body .bw-bottom :is(button, a){ font-family:var(--d-body) !important; color:var(--d-text-2) !important; background:transparent !important; }
html body .bw-bottom :is(button, a):hover{ color:var(--d-text) !important; }
html body :is(footer, footer.site, footer.bw-footer, footer.cf-foot, footer.site-footer, .site-footer, .app-footer){
  background:var(--d-panel) !important; background-image:none !important; border-top:1px solid var(--d-line) !important; color:var(--d-text-2) !important; font-family:var(--d-body);
}
html body :is(footer, .site-footer, .app-footer) :is(p, span, small, li, .fl, .footer-meta, .footer-disclaimer, .footer-family){ color:var(--d-text-2) !important; }
html body :is(footer, .site-footer, .app-footer) :is(strong, b){ color:var(--d-text) !important; }
html body :is(footer, .site-footer, .app-footer) a{ color:var(--d-text) !important; text-decoration-color:var(--d-accent) !important; }
html body :is(footer, .site-footer, .app-footer) a:hover{ color:var(--d-accent) !important; }
html body .bw-legal-links a{ color:var(--d-text) !important; }
html body .content-footer-nav{ border-color:var(--d-line) !important; }

/* ==========================================================================
   Contact pages (/<app>-contact)
   ========================================================================== */
html body header.cf-head{ background:var(--d-panel) !important; background-image:none !important; border-bottom:1px solid var(--d-line); box-shadow:none !important; }
html body .cf-brand{ color:var(--d-text) !important; font-family:var(--d-display); font-weight:600; letter-spacing:-0.02em; }
html body .cf-brand img{ filter:none; }
html body .cf-back{ color:var(--d-text-2) !important; }
html body .cf-back:hover{ color:var(--d-text) !important; }
html body .cf-card{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; color:var(--d-text); }
html body .cf-card h1{ font-family:var(--d-display); font-weight:500; letter-spacing:-0.02em; color:var(--d-text); }
html body :is(.cf-intro, .cf-hint, .cf-privacy){ color:var(--d-text-2) !important; }
html body :is(.cf-intro, .cf-privacy) a{ color:var(--d-text) !important; }
html body .cf-app-icon{ background:var(--d-hover) !important; color:var(--d-accent) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body label.cf-option{ background:var(--d-canvas) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; color:var(--d-text) !important; box-shadow:none !important; }
html body label.cf-option span{ font-weight:500; color:var(--d-text); }
html body label.cf-option small{ color:var(--d-text-2) !important; }
html body label.cf-option:hover{ background:var(--d-hover) !important; }
html body label.cf-option:has(input:checked){ background:var(--d-accent-tint) !important; border-color:var(--d-accent) !important; box-shadow:none !important; }
html body .cf-subject{ background:var(--d-hover) !important; border:1px dashed var(--d-line-input) !important; color:var(--d-text-2) !important; }
html body .cf-invalid{ border-color:var(--d-red) !important; }
html body :is(.cf-err, .cf-status.error){ color:var(--d-red) !important; }
html body .cf-status{ color:var(--d-text-2); }
html body .cf-send{
  background:var(--d-accent) !important; background-image:none !important; color:var(--d-on-accent) !important; border:1px solid var(--d-accent) !important; border-radius:6px !important;
  padding:8px 16px; min-height:40px; font-family:var(--d-body) !important; font-weight:600; box-shadow:none !important;
}
html body .cf-send:hover{ background:var(--d-accent-hover) !important; }
html body .cf-send[disabled]{ background:var(--d-hover) !important; border-color:var(--d-line) !important; color:var(--d-text-3) !important; opacity:1; cursor:progress; }
html body .cf-done h2{ color:var(--d-accent) !important; font-family:var(--d-display); font-weight:600; }

/* ==========================================================================
   Cookie banner (drawn by consent.js)
   ========================================================================== */
html body .bwc{ background:var(--d-panel) !important; border-top:1px solid var(--d-line-input) !important; box-shadow:none !important; font-family:var(--d-body) !important; }
html body .bwc .bwc-box, html body .bwc .bwc-box p{ color:var(--d-text-2) !important; }
html body .bwc .bwc-box strong, html body .bwc .bwc-box a{ color:var(--d-text) !important; }
html body .bwc .bwc-box a{ text-decoration-color:var(--d-accent) !important; }
html body .bwc .bwc-row button{ background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; font-family:var(--d-body) !important; font-weight:500 !important; }
html body .bwc .bwc-row button:hover{ background:var(--d-hover) !important; }
html body .bwc .bwc-row button:focus-visible{ outline:2px solid var(--d-accent) !important; }

/* ==========================================================================
   Latest-updates ticker (bw-ticker.css)
   ========================================================================== */
html body :is(.bw-ticker, .ticker){ background:var(--d-panel) !important; background-image:none !important; border-top:1px solid var(--d-line) !important; border-bottom:1px solid var(--d-line) !important; color:var(--d-text-2) !important; box-shadow:none !important; }
html body :is(.bw-ticker, .ticker) :is(a, strong, span){ color:var(--d-text) !important; }
html body :is(.bw-ticker, .ticker) :is(.bw-ticker-label, .ticker-label, .label){ background:var(--d-accent) !important; color:var(--d-on-accent) !important; border-radius:4px !important; }

/* ==========================================================================
   Guide pages shared by several apps
   ========================================================================== */
html body :is(.crumbs, .breadcrumb, .breadcrumbs, nav.crumbs){ color:var(--d-text-2) !important; }
html body :is(.crumbs, .breadcrumb, .breadcrumbs) a{ color:var(--d-text-2) !important; text-decoration-color:var(--d-line-input) !important; }
html body :is(.crumbs, .breadcrumb, .breadcrumbs) a:hover{ color:var(--d-accent) !important; }
html body :is(.toc, .faq-toc, .on-this-page, .contents){ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body :is(.toc, .faq-toc, .on-this-page, .contents) a{ color:var(--d-text) !important; }
html body :is(.updated, .last-checked, .checked, .meta, .byline, .muted, .hint, .tiny, .small, .src, .source, .sources-note){ color:var(--d-text-2) !important; }
html body :is(.src, .source, .sources-note) a{ color:var(--d-text-2) !important; text-decoration-color:var(--d-line-input) !important; }
html body .lede{ color:var(--d-text-2) !important; }
html body .qa:target{ background:var(--d-accent-tint); outline:8px solid var(--d-accent-tint); border-radius:2px; }
html body :is(.related, .faq-cat){ border-color:var(--d-line-input) !important; }
html body figure img{ border-radius:8px; }
html body figure figcaption{ color:var(--d-text-2) !important; }

/* family guide pages: link cards, tables, call to action, "more" buttons */
html body :where(.cards a, a.bwp-card, .topic-card, .guide-list a, .related a.card){
  background:var(--d-panel) !important; background-image:none !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; color:var(--d-text) !important; transform:none !important;
}
html body :where(.cards a, a.bwp-card, .topic-card, .guide-list a, .related a.card):hover{ background:var(--d-hover) !important; border-color:var(--d-line-input) !important; color:var(--d-text) !important; }
html body :is(.cards a, a.bwp-card, .topic-card) :is(small, span, p){ color:var(--d-text-2) !important; }
html body :is(.cards a, a.bwp-card, .topic-card) :is(strong, h3, b){ color:var(--d-text) !important; }
/* guide link lists: one framed grid split by hairlines, not floating cards */
html body ul.cards{ gap:0 !important; border:1px solid var(--d-line); border-radius:8px; overflow:hidden; background:var(--d-panel); padding:0; }
html body ul.cards > li{ border:0 !important; border-radius:0 !important; margin:0 !important; background:transparent !important; display:flex; }
html body ul.cards > li > a, html body ul.cards > li > a.bwp-card{ border:0 !important; border-left:1px solid var(--d-line) !important; border-top:1px solid var(--d-line) !important; border-radius:0 !important; margin:-1px 0 0 -1px !important; flex:1 1 auto; }
html body .tbl{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; }
html body .tbl :is(th, td){ border-color:var(--d-line) !important; }
html body :is(.cta, .cta-box){ background:var(--d-panel) !important; background-image:none !important; color:var(--d-text-2) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body :is(.cta, .cta-box) :is(p, li){ color:var(--d-text-2) !important; }
html body :is(.cta, .cta-box) :is(h2, h3, strong){ color:var(--d-text) !important; }
html body :is(.cta, .cta-box) a:not(.btn){ color:var(--d-text) !important; text-decoration-color:var(--d-accent) !important; }
html body :is(.more button, .cq-more, .show-more, .load-more){ background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; font-family:var(--d-body); font-weight:500; box-shadow:none !important; }
html body :is(.more button, .cq-more, .show-more, .load-more):hover{ background:var(--d-hover) !important; }
html body :is(.quick-answer, .answer-box, .key-point, .summary-box){ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-left:1px solid var(--d-accent) !important; border-radius:8px !important; box-shadow:none !important; }
html body :is(.quick-answer, .answer-box, .key-point, .summary-box) p{ color:var(--d-text) !important; }
html body section.qas{ border-top:1px solid var(--d-line-input) !important; }
html body :is(.num-table, .tbl table) th{ background:var(--d-panel) !important; color:var(--d-text-2) !important; }

/* ==========================================================================
   v152: "Last checked for accuracy" line at the top of each app's footer
   (set by set-checked-date.mjs; Google also reads the date from the page's
   WebPage structured data and the sitemap). A small badge: amber dot,
   secondary text, date in the figures font. Appearance only.
   ========================================================================== */
html body p.bw-checked-line{ display:block !important; margin:0 0 16px !important; padding:0 !important; background:none !important; border:0 !important; }
/* line the badge up with the footer's own centred column (Consumer and Contract Wise, 1080px) */
html body footer > p.bw-checked-line{ max-width:1080px; margin-left:auto !important; margin-right:auto !important; }
html body footer .in > p.bw-checked-line{ margin:0 !important; }
html body .bw-checked{ display:inline-flex !important; align-items:center; gap:6px; flex-wrap:wrap; padding:6px 10px !important; border:1px solid var(--d-line-input) !important; border-radius:4px !important; background:var(--d-panel) !important; color:var(--d-text-2) !important; font-family:var(--d-body) !important; font-size:13px !important; font-weight:500 !important; line-height:1.4 !important; max-width:100%; text-align:left; }
html body .bw-checked time{ font-family:var(--d-mono) !important; color:var(--d-text) !important; font-weight:600; letter-spacing:-0.02em; white-space:nowrap; }
html body .bw-checked-dot{ width:8px; height:8px; border-radius:50%; background:var(--d-accent); flex:none; }
@media print{ html body .bw-checked{ background:white !important; color:black !important; border-color:gray !important; } html body .bw-checked time{ color:black !important; } }

/* ==========================================================================
   Printing: white paper, black ink
   ========================================================================== */
@media print{
  :root{ color-scheme:light; }
  html, html body{ background:white !important; color:black !important; }
  html body :is(h1, h2, h3, h4, strong, b, a, p, li, td, th){ color:black !important; }
  html body :is(.card, .panel, .callout, .note, table, th, td, .chat-msg, .saved-item, .faq-acc details){ background:white !important; color:black !important; border-color:gray !important; }
  html body :is(header, footer, .site-footer){ background:white !important; color:black !important; border:0 !important; }
  html body :is(.muted, .src, .hint, .lede){ color:dimgray !important; }
}