/* =====================================================================
   emergencymedicalinsurance.ca — CENTRAL STYLESHEET
   Every page loads only this file. Change the design here once.
   1. Brand tokens (colours, fonts, spacing) — edit these first
   ===================================================================== */
:root{
  /* Brand: brown with black touches */
  --brown-900:#2a1810;
  --brown-800:#3d2416;
  --brown-700:#5a3520;
  --brown-600:#6f4328;   /* primary */
  --brown-500:#8a5634;
  --brown-300:#c99a72;   /* accent */
  --brown-100:#f1e6db;
  --cream:#faf6f1;
  --ink:#151110;          /* black touches */
  --ink-2:#3a332f;
  --muted:#6d625b;
  --line:#e4d8cc;
  --white:#fff;
  --ok:#2f6b3a;
  --warn:#8a5a00;

  --primary:var(--brown-600);
  --primary-dark:var(--brown-800);
  --accent:var(--brown-300);

  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;

  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(21,17,16,.06),0 8px 24px rgba(21,17,16,.08);
  --wrap:1160px;
}

/* 2. Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.65 var(--font-body);color:var(--ink-2);background:var(--cream)}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-underline-offset:3px}
a:hover{color:var(--primary-dark)}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
ul,ol{padding-left:1.25em;margin:0 0 1em}
li{margin:.25em 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* 3. Top bar --------------------------------------------------------- */
.topbar{background:var(--ink);color:#e9dfd6;font-size:.9rem}
.topbar .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;min-height:40px}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:var(--accent)}
.topbar .tb-contact{display:flex;gap:18px;flex-wrap:wrap}
.topbar .tb-note{opacity:.8}
.topbar .tb-mobile{display:none}

/* 4. Header / nav ---------------------------------------------------- */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img.site-logo{width:48px;height:48px}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:1.2rem;line-height:1.1;color:var(--ink)}
.brand-tag{display:block;font-family:var(--font-body);font-size:.78rem;color:var(--muted);font-weight:500;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:4px}
.nav > ul{list-style:none;display:flex;gap:2px;margin:0;padding:0}
.nav li{position:relative;margin:0}
.nav a,.nav button.dd{display:block;padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;background:none;border:0;cursor:pointer;font-family:inherit}
.nav a:hover,.nav button.dd:hover,.nav a[aria-current="page"]{background:var(--brown-100);color:var(--primary-dark)}
.nav .sub{display:none;position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;list-style:none;margin:0}
.nav li:hover > .sub,.nav li.open > .sub{display:block}
.nav .sub a{font-weight:500}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0}

/* 5. Buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:1rem;font-family:inherit;line-height:1.2}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;color:var(--accent)}
.btn-ghost{background:transparent;border-color:currentColor;color:var(--primary-dark)}
.btn-ghost:hover{background:var(--brown-100)}
.btn-light{background:#fff;color:var(--ink)}
.btn-wa{background:#1f7a46;color:#fff}
.btn-wa:hover{background:#16603a;color:#fff}
.btn-sm{padding:8px 14px;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* 6. Hero ------------------------------------------------------------ */
.hero{background:linear-gradient(135deg,var(--brown-900) 0%,var(--brown-700) 60%,var(--brown-600) 100%);color:#f6eee7;padding:56px 0 64px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(201,154,114,.35),transparent 70%)}
.hero h1{color:#fff}
.hero .lead{font-size:1.15rem;max-width:62ch;color:#efe2d6}
.hero .eyebrow{color:var(--accent)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;z-index:1}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px;padding:0;list-style:none}
.hero-badges li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:6px 12px;border-radius:999px;font-size:.9rem;margin:0}
.hero .btn-ghost{color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.1)}
.hero-card{background:#fff;color:var(--ink-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.hero-card h2{font-size:1.3rem}
.page-hero{padding:44px 0 48px}
.crumbs{font-size:.88rem;margin-bottom:14px;color:#e2d2c4}
.crumbs a{color:#fff}
.updated{font-size:.88rem;color:#e2d2c4;margin-top:10px}

/* 7. Sections -------------------------------------------------------- */
.section{padding:64px 0}
.section.alt{background:#fff}
.section.dark{background:var(--ink);color:#e8ddd3}
.section.dark h2,.section.dark h3{color:#fff}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;color:var(--primary);margin-bottom:10px}
.section-head{max-width:760px;margin-bottom:28px}
.prose{max-width:780px}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.3em}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
.sidebar{position:sticky;top:100px;display:grid;gap:18px}

.answer{background:var(--brown-100);border-left:5px solid var(--primary);border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 24px}
.answer h2,.answer h3{font-size:1.05rem;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--primary-dark);margin-bottom:6px}
.answer p:last-child{margin:0}
.note{background:#fff8ec;border:1px solid #f0dcb6;border-radius:var(--radius-sm);padding:14px 18px;font-size:.95rem}

.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
a.card{text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card .more{font-weight:700;color:var(--primary)}
.icon{width:42px;height:42px;border-radius:12px;background:var(--brown-100);color:var(--primary-dark);display:grid;place-items:center;font-size:1.3rem;margin-bottom:12px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-34px;position:relative;z-index:2}
.stat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;text-align:center}
.stat b{display:block;font-family:var(--font-head);font-size:1.6rem;color:var(--primary-dark)}
.stat span{font-size:.9rem;color:var(--muted)}

.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 22px 22px;margin:0;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;margin-bottom:10px}
.steps.vertical{grid-template-columns:1fr}

.checks{list-style:none;padding:0}
.checks li{padding-left:30px;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--brown-100);color:var(--primary-dark);font-weight:800;font-size:.8rem;display:grid;place-items:center;margin-top:2px}
.cols-2{columns:2;column-gap:32px}
.cols-2 li{break-inside:avoid}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin:0 0 1.2em}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--ink);color:#fff;font-weight:600}
tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:#fcf8f4}

/* Insurers */
.insurers{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.insurers li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;color:var(--ink);margin:0}
.featured-plan{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:#fff;border:2px solid var(--accent);border-radius:var(--radius);padding:22px;margin-top:22px}
.featured-plan .tag{display:inline-block;background:var(--ink);color:#fff;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:8px}

/* Advisor */
.advisor{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:center}
.advisor-photo{width:240px;height:280px;border-radius:var(--radius);object-fit:cover;background:var(--brown-100)}
.photo-fallback{width:240px;height:280px;border-radius:var(--radius);background:linear-gradient(135deg,var(--brown-700),var(--ink));color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-size:4rem}
.creds{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.creds li{background:var(--brown-100);color:var(--primary-dark);border-radius:999px;padding:5px 12px;font-size:.88rem;font-weight:600;margin:0}

/* Testimonials (rendered from site-config.js) */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0}
.testimonial blockquote{margin:0 0 12px;font-style:italic}
.testimonial figcaption{font-weight:700;color:var(--ink)}
.testimonial figcaption span{display:block;font-weight:400;color:var(--muted);font-size:.9rem}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 18px}
.faq summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;position:relative;font-weight:700;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{display:inline;font-family:var(--font-body);font-size:1.02rem;margin:0;color:inherit}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:1.4rem;color:var(--primary)}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 0 16px}
.faq .faq-a p:last-child{margin:0}
.faq-group h2{font-size:1.35rem;margin-top:28px}

/* Quote widget zone */
.quote-zone{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;scroll-margin-top:110px}
.quote-zone h2{font-size:1.4rem}
.quote-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.quote-tabs button{border:1px solid var(--line);background:var(--cream);padding:8px 14px;border-radius:999px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--ink)}
.quote-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.quote-widget{min-height:120px}
.quote-fallback{display:grid;gap:12px;text-align:center;padding:18px;border:1px dashed var(--line);border-radius:12px;background:var(--cream)}
.quote-widget.loaded .quote-fallback{display:none}
.disclaimer-sm{font-size:.82rem;color:var(--muted);margin-top:12px}

/* Forms */
.form{display:grid;gap:14px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{font-weight:600;font-size:.92rem;color:var(--ink);display:grid;gap:6px}
.form input,.form select,.form textarea{font:inherit;padding:11px 12px;border:1px solid #d6c7b8;border-radius:10px;background:#fff;color:var(--ink)}
.form textarea{min-height:110px}
.form-status{font-weight:600}

/* Calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.calc-result{background:var(--ink);color:#fff;border-radius:var(--radius);padding:24px}
.calc-result h3{color:#fff}
.calc-result .big{font-family:var(--font-head);font-size:2.4rem;color:var(--accent);margin:6px 0 12px}
.calc-result table td{border-color:rgba(255,255,255,.15);color:#f2e8de;background:transparent!important}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--ink),var(--brown-800));color:#efe3d8;border-radius:var(--radius);padding:36px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.cta-band h2{color:#fff;margin-bottom:.3em}
.cta-band p{margin:0}

/* Guides list */
.guide-meta{font-size:.85rem;color:var(--muted)}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.toc h2{font-size:1rem;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.08em}
.toc ol{margin:0}
.related{display:grid;gap:8px;list-style:none;padding:0}
.related a{font-weight:600}

/* 8. Footer ---------------------------------------------------------- */
.site-footer{background:var(--ink);color:#cfc3b8;padding:56px 0 24px;margin-top:0;font-size:.94rem}
.site-footer a{color:#f1e6db;text-decoration:none}
.site-footer a:hover{color:var(--accent)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:30px}
.site-footer h3{color:#fff;font-family:var(--font-body);font-size:.85rem;text-transform:uppercase;letter-spacing:.12em}
.site-footer ul{list-style:none;padding:0}
.footer-brand{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.footer-brand img{width:44px;height:44px}
.footer-brand b{color:#fff;font-family:var(--font-head);font-size:1.1rem}
.areas{font-size:.86rem;line-height:1.7;border-top:1px solid #2f2824;margin-top:28px;padding-top:20px}
.legal{border-top:1px solid #2f2824;margin-top:20px;padding-top:18px;font-size:.84rem;display:grid;gap:10px}
.legal .bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.iqc-credit a{color:var(--accent)}

/* 9. Mobile sticky action bar --------------------------------------- */
.mobile-actions{display:none}

/* 10. Responsive ----------------------------------------------------- */
@media (max-width:1000px){
  .hero-grid,.two-col,.advisor,.calc{grid-template-columns:1fr}
  .sidebar{position:static}
  .grid-3,.testimonials{grid-template-columns:repeat(2,1fr)}
  .grid-4,.stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:860px){
  .menu-toggle{display:block}
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);background:#fff;flex-direction:column;align-items:stretch;padding:84px 16px 24px;transform:translateX(100%);transition:transform .25s;box-shadow:-10px 0 30px rgba(0,0,0,.15);overflow-y:auto;z-index:60}
  .nav.open{transform:none}
  .nav > ul{flex-direction:column}
  .nav .sub{position:static;display:none;box-shadow:none;border:0;padding:0 0 0 12px}
  .nav li.open > .sub{display:block}
  .nav li:hover > .sub{display:none}
  .nav li.open:hover > .sub{display:block}
  .nav .header-cta{margin-top:12px}
  .menu-close{position:absolute;top:18px;right:18px;font-size:1.6rem;background:none;border:0;cursor:pointer}
  /* Mobile top bar: Call / WhatsApp / Email advisor buttons instead of text */
  .topbar .tb-contact,.topbar .tb-note{display:none}
  .topbar .tb-mobile{display:flex;gap:8px;width:100%;padding:6px 0}
  .topbar .tb-mobile a{flex:1;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 6px;font-weight:700;font-size:.85rem}
  .mobile-actions{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);padding:8px;gap:8px;box-shadow:0 -6px 20px rgba(0,0,0,.2)}
  .mobile-actions a{flex:1;text-align:center;padding:12px 6px;border-radius:10px;font-weight:700;text-decoration:none;color:#fff;background:var(--brown-600)}
  .mobile-actions a.alt{background:#2c2420}
  body{padding-bottom:70px}
}
@media (min-width:861px){.menu-close{display:none}}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4,.testimonials,.footer-grid,.form .row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .cta-band,.featured-plan{grid-template-columns:1fr}
  .cols-2{columns:1}
  .section{padding:48px 0}
  .advisor-photo,.photo-fallback{width:100%;height:320px}
  .brand-tag{font-size:.7rem}
}
@media print{.topbar,.site-header,.mobile-actions,.site-footer,.quote-zone{display:none}}

/* 11. Fixes ---------------------------------------------------------- */
.nav a,.nav button.dd{line-height:1.5}
.nav a.header-cta{background:var(--primary);color:#fff;padding:10px 18px;border-radius:999px;margin-left:6px}
.nav a.header-cta:hover{background:var(--primary-dark);color:#fff}
.quote-zone{color:var(--ink-2)}
.quote-zone h2{margin-top:0;color:var(--ink)}
.quote-zone .quote-fallback strong{color:var(--ink)}
.hero .quote-zone .btn-ghost{color:var(--primary-dark)}
.hero .quote-zone .btn-ghost:hover{background:var(--brown-100)}
@media (max-width:860px){
  .topbar .tb-mobile a{white-space:nowrap;font-size:.8rem;padding:6px 4px}
  .nav a.header-cta{margin:12px 0 0;text-align:center}
}

/* 12. Logo, insurer links, results ---------------------------------- */
.brand-stack{display:flex;flex-direction:column;gap:4px}
.brand img.site-logo{width:auto;height:50px}
.brand .brand-tag{font-size:.75rem;letter-spacing:.04em;color:var(--muted)}
.footer-brand img{width:auto;height:40px}
.insurers a.ins-link{color:inherit;text-decoration:none}
.insurers li:has(a.ins-link):hover{border-color:var(--primary);background:var(--brown-100)}
.quote-results{min-height:200px}
.quote-results.loaded .quote-fallback{display:none}
.advisor-photo{object-position:center top}
@media (max-width:860px){.brand img.site-logo{height:38px}.brand .brand-tag{display:none}}
@media (max-width:380px){.brand img.site-logo{height:32px}}
.site-header .wrap{padding-top:8px;padding-bottom:8px}

/* 13. Keep site fonts when the quote app's stylesheet loads ---------- */
html body{font-family:var(--font-body);color:var(--ink-2);background:var(--cream)}
html body :is(h1,h2,h3,h4):not(.app-wrapper *){font-family:var(--font-head);color:var(--ink);line-height:1.2}
html body .hero :is(h1,h2):not(.app-wrapper *){color:#fff}
html body .section.dark :is(h2,h3),html body .calc-result h3,html body .cta-band h2{color:#fff}
html body .faq summary h3,html body .answer :is(h2,h3),html body .site-footer h3,html body .toc h2{font-family:var(--font-body)}
html body .answer :is(h2,h3){color:var(--primary-dark)}
html body .site-footer h3{color:#fff}
html body .app-wrapper{font-family:var(--font-body)}

/* =====================================================================
   14. QUOTE ENGINE THEME (Insurance Quotes Cloud / Material UI)
   Recolours every quote form, results page, compare and plan page to the
   site theme. Change colours here only (uses the tokens at the top).
   ===================================================================== */
.app-wrapper{--q-primary:var(--primary);--q-dark:var(--primary-dark);--q-soft:var(--brown-100)}

/* Main buttons: GET QUOTE, Buy, Send quote, Compare, Apply */
html body .app-wrapper .MuiButton-contained,
html body .app-wrapper .MuiButton-containedPrimary,
html body .app-wrapper .MuiButton-containedSecondary{
  background-color:var(--q-primary)!important;color:#fff!important;border-radius:999px!important;
  box-shadow:none!important;font-weight:700!important;letter-spacing:.02em;text-transform:none!important;padding-left:22px!important;padding-right:22px!important}
html body .app-wrapper .MuiButton-contained:hover,
html body .app-wrapper .MuiButton-containedPrimary:hover,
html body .app-wrapper .MuiButton-containedSecondary:hover{background-color:var(--ink)!important;color:#fff!important}
html body .app-wrapper .MuiButton-contained.Mui-disabled{background-color:#d8cbbf!important;color:#fff!important}
html body .app-wrapper .MuiButton-outlined,
html body .app-wrapper .MuiButton-outlinedPrimary,
html body .app-wrapper .MuiButton-outlinedSecondary{color:var(--q-dark)!important;border-color:var(--q-primary)!important;border-radius:999px!important;text-transform:none!important}
html body .app-wrapper .MuiButton-outlined:hover{background:var(--q-soft)!important}
html body .app-wrapper .MuiButton-text,
html body .app-wrapper .MuiButton-textPrimary,
html body .app-wrapper .MuiButton-textSecondary{color:var(--q-dark)!important}

/* Icons, radios, checkboxes, switches */
html body .app-wrapper .MuiIconButton-colorPrimary,
html body .app-wrapper .MuiIconButton-colorSecondary,
html body .app-wrapper .MuiRadio-root.Mui-checked,
html body .app-wrapper .MuiRadio-colorPrimary.Mui-checked,
html body .app-wrapper .MuiRadio-colorSecondary.Mui-checked,
html body .app-wrapper .MuiCheckbox-root.Mui-checked,
html body .app-wrapper .MuiCheckbox-colorPrimary.Mui-checked,
html body .app-wrapper .MuiCheckbox-colorSecondary.Mui-checked{color:var(--q-primary)!important}
html body .app-wrapper .MuiSwitch-colorPrimary.Mui-checked,
html body .app-wrapper .MuiSwitch-colorSecondary.Mui-checked{color:var(--q-primary)!important}
html body .app-wrapper .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track,
html body .app-wrapper .MuiSwitch-colorSecondary.Mui-checked + .MuiSwitch-track{background-color:var(--q-primary)!important}

/* Inputs and labels */
html body .app-wrapper .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:var(--q-primary)!important}
html body .app-wrapper .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline{border-color:var(--brown-500)!important}
html body .app-wrapper .MuiFormLabel-root.Mui-focused,
html body .app-wrapper .MuiInputLabel-root.Mui-focused{color:var(--q-dark)!important}
html body .app-wrapper .MuiInput-underline:after{border-bottom-color:var(--q-primary)!important}
html body .app-wrapper .MuiOutlinedInput-root{border-radius:10px!important}

/* Tabs, toggles, chips, pagination, sliders, progress */
html body .app-wrapper .MuiTabs-indicator{background-color:var(--q-primary)!important}
html body .app-wrapper .MuiTab-root.Mui-selected,
html body .app-wrapper .MuiTab-textColorPrimary.Mui-selected,
html body .app-wrapper .MuiTab-textColorSecondary.Mui-selected{color:var(--q-dark)!important}
html body .app-wrapper .MuiToggleButton-root.Mui-selected{background-color:var(--q-primary)!important;color:#fff!important}
html body .app-wrapper .MuiChip-colorPrimary,
html body .app-wrapper .MuiChip-colorSecondary{background-color:var(--q-primary)!important;color:#fff!important}
html body .app-wrapper .MuiPaginationItem-page.Mui-selected{background-color:var(--q-primary)!important;color:#fff!important}
html body .app-wrapper .MuiSlider-colorPrimary,
html body .app-wrapper .MuiSlider-colorSecondary{color:var(--q-primary)!important}
html body .app-wrapper .MuiCircularProgress-colorPrimary,
html body .app-wrapper .MuiCircularProgress-colorSecondary,
html body .app-wrapper .MuiLinearProgress-barColorPrimary{color:var(--q-primary)!important}
html body .app-wrapper .MuiLinearProgress-barColorPrimary,
html body .app-wrapper .MuiLinearProgress-barColorSecondary{background-color:var(--q-primary)!important}
html body .app-wrapper .MuiTypography-colorPrimary,
html body .app-wrapper .MuiTypography-colorSecondary,
html body .app-wrapper a{color:var(--q-dark)}
html body .app-wrapper .MuiPaper-root{border-radius:12px}
html body .app-wrapper .active{border-color:var(--q-primary)}
html body .Toastify__progress-bar{background:var(--q-primary)!important}

/* Site quote tabs (Super Visa / Visitors / Student) — brown, not black */
.quote-tabs button{background:#fff;border:1.5px solid var(--line);color:var(--primary-dark)}
.quote-tabs button:hover{border-color:var(--primary)}
.quote-tabs button[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:#fff}

/* Results / compare / plan pages: full width, help cards underneath */
.results-layout{display:grid;gap:28px}
.results-layout .sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.results-layout .sidebar{grid-template-columns:1fr}}
html body .hero .quote-zone :is(h2,h3){color:var(--ink)!important}

/* =====================================================================
   15. QUOTE FORM THEME — inside the quote engine's shadow DOM
   The visible quote forms/results are drawn in a sealed "shadow DOM" that
   normal CSS can't reach. site.js copies the rules in this @supports block
   into each quote form automatically. The condition is never true on the
   page itself, so these rules ONLY affect the quote forms. Edit colours
   here (they use the tokens at the top of this file).
   ===================================================================== */
@supports (--quote-theme: 1) and (not (display: block)) {
  :host{font-family:var(--font-body)}
  input[type=radio],input[type=checkbox],input[type=range]{accent-color:var(--primary)}

  /* Buttons (Bootstrap classes used by the engine) */
  .btn-primary,.btn.btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;border-radius:999px!important;font-weight:700!important;box-shadow:none!important}
  .btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active{background-color:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important}
  .btn-primary:disabled,.btn-primary.disabled{background-color:#cdbcad!important;border-color:#cdbcad!important}
  .btn-secondary,.btn-info,.btn-success{background-color:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important;border-radius:999px!important}
  .btn-outline-primary,.btn-outline-secondary,.btn-outline-info{color:var(--primary-dark)!important;border-color:var(--primary)!important;border-radius:999px!important;background:#fff!important}
  .btn-outline-primary:hover,.btn-outline-primary.active,.btn-outline-secondary:hover,.btn-outline-info:hover{background-color:var(--primary)!important;color:#fff!important}
  .btn-link,a,a:not(.btn){color:var(--primary-dark)}
  .text-primary,.link-primary{color:var(--primary-dark)!important}
  .bg-primary,.badge.bg-primary,.progress-bar{background-color:var(--primary)!important}
  .border-primary{border-color:var(--primary)!important}

  /* Tabs / pills / pagination (Bootstrap) */
  .nav-pills .nav-link.active,.nav-pills .show>.nav-link{background-color:var(--primary)!important;color:#fff!important}
  .nav-tabs .nav-link.active{color:var(--primary-dark)!important;border-bottom-color:var(--primary)!important}
  .nav-link{color:var(--primary-dark)}
  .page-item.active .page-link{background-color:var(--primary)!important;border-color:var(--primary)!important}
  .form-check-input:checked{background-color:var(--primary)!important;border-color:var(--primary)!important}
  .form-control:focus,.form-select:focus{border-color:var(--primary)!important;box-shadow:0 0 0 .2rem rgba(111,67,40,.2)!important}

  /* Material UI v5 */
  .MuiButton-containedPrimary,.MuiButton-containedSecondary,.MuiButton-contained{background-color:var(--primary)!important;color:#fff!important;border-radius:999px!important;box-shadow:none!important}
  .MuiButton-containedPrimary:hover,.MuiButton-containedSecondary:hover,.MuiButton-contained:hover{background-color:var(--ink)!important}
  .MuiButton-outlinedPrimary,.MuiButton-outlinedSecondary{color:var(--primary-dark)!important;border-color:var(--primary)!important;border-radius:999px!important}
  .MuiButton-textPrimary,.MuiButton-textSecondary{color:var(--primary-dark)!important}
  .MuiRadio-root.Mui-checked,.MuiCheckbox-root.Mui-checked,.MuiRadio-colorPrimary.Mui-checked,.MuiCheckbox-colorPrimary.Mui-checked,.MuiRadio-colorSecondary.Mui-checked,.MuiCheckbox-colorSecondary.Mui-checked{color:var(--primary)!important}
  .MuiSwitch-switchBase.Mui-checked{color:var(--primary)!important}
  .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track{background-color:var(--primary)!important}
  .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:var(--primary)!important}
  .MuiOutlinedInput-root:hover:not(.Mui-disabled) .MuiOutlinedInput-notchedOutline{border-color:var(--brown-500)!important}
  .MuiInputLabel-root.Mui-focused,.MuiFormLabel-root.Mui-focused{color:var(--primary-dark)!important}
  .MuiFormHelperText-root{color:var(--muted)!important}
  .MuiTabs-indicator{background-color:var(--primary)!important}
  .MuiTab-root.Mui-selected{color:var(--primary-dark)!important}
  .MuiToggleButton-root.Mui-selected{background-color:var(--primary)!important;color:#fff!important}
  .MuiChip-colorPrimary,.MuiChip-filledPrimary{background-color:var(--primary)!important;color:#fff!important}
  .MuiSlider-root,.MuiCircularProgress-root,.MuiLinearProgress-bar{color:var(--primary)!important}
  .MuiLinearProgress-bar{background-color:var(--primary)!important}
  .MuiPaginationItem-root.Mui-selected{background-color:var(--primary)!important;color:#fff!important}
  .MuiPickersDay-root.Mui-selected,.MuiPickersDay-root.Mui-selected:hover{background-color:var(--primary)!important}
  .Toastify__progress-bar{background:var(--primary)!important}

  /* Headings inside quotes / plan details */
  h1,h2,.plan-details-section-title{font-family:var(--font-head)!important;color:var(--ink)!important;letter-spacing:-.01em}
  h3,h4{color:var(--ink)!important}
  .w-1.rounded-full,.w-1.shrink-0.rounded-full{background-color:var(--primary)!important}

  /* Plan detail tabs: Benefit Summary / Eligibility / Claims / Refund / Exclusions / FAQ */
  .plan-details-nav-link,.plan-details-nav-link.btn-secondary{background:#fff!important;color:var(--primary-dark)!important;border:1.5px solid var(--line)!important;border-radius:999px!important;font-weight:700!important}
  .plan-details-nav-link:hover,.plan-details-nav-link:focus,.plan-details-nav-link.active,.plan-details-nav-link[aria-selected="true"],.plan-details-nav-link[aria-current="true"]{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}
  *:has(> .plan-details-nav-link){flex-wrap:wrap!important;gap:8px!important;overflow:visible!important}

  /* Links and secondary buttons */
  .plan-details-readmore,.plan-details-top-link,[class*="text-blue-"],[class*="text-sky-"],[class*="text-indigo-"]{color:var(--primary-dark)!important}
  .send-quote-send-btn{background:var(--ink)!important;color:#fff!important;border-radius:999px!important}
  .send-quote-send-btn:hover{background:var(--primary)!important}
  .btn-outline-secondary{color:var(--primary-dark)!important;border-color:var(--line)!important}
  [class*="bg-blue-"],[class*="bg-indigo-"],[class*="bg-sky-"]{background-color:var(--primary)!important}
  [class*="bg-blue-50"],[class*="bg-blue-100"],[class*="bg-indigo-50"],[class*="bg-sky-50"]{background-color:var(--brown-100)!important}
  [class*="border-blue-"],[class*="border-indigo-"]{border-color:var(--primary)!important}
  .bg-slate-800,.bg-slate-900,.bg-gray-800,.bg-gray-900{background-color:var(--ink)!important}

  /* Phone: keep everything inside the screen */
  @media (max-width:640px){
    img,table{max-width:100%}
    .grid{min-width:0}
  }
}


/* 16. Phone layout fixes ------------------------------------------- */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
.results-layout,.two-col,.hero-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:1001px){.two-col{grid-template-columns:minmax(0,1fr) 340px}.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.results-layout>*,.two-col>*,.hero-grid>*{min-width:0}
.app-wrapper,.widget-mount{max-width:100%;min-width:0}
@media (max-width:860px){
  .nav{visibility:hidden}
  .nav.open{visibility:visible}
  .mobile-actions a,.mobile-actions a:hover{color:#fff}
}
@media (max-width:620px){
  .quote-zone{padding:16px 12px}
  .page-hero{padding:28px 0 32px}
  .page-hero h1{font-size:1.75rem}
  .page-hero .lead{font-size:1rem}
}

/* 17. Sources list on guides */
.sources{font-size:.92rem;padding-left:1.1em}
.sources a{word-break:break-word}