/* CostcoQuote remake demo · design system
   Real tokens extracted from served theme.css (2026-06-10):
   blues #005dab / #0b5ea2 / #358dd9 / #006fdb · reds #e31936 / #de2127 · gray #707070 */
:root{
  --blue:#005dab; --blue-deep:#0b5ea2; --blue-bright:#006fdb; --blue-soft:#358dd9;
  --red:#e31936; --red-alt:#de2127;
  --ink:#16181d; --ink2:rgba(22,24,29,.82); --mut:rgba(22,24,29,.64);
  --bg:#f4f7fb;
  --hair:rgba(11,94,162,.12);
  --glass:rgba(255,255,255,.66);
  --glass-edge:rgba(255,255,255,.85);
  --shadow:0 1px 2px rgba(11,94,162,.05), 0 12px 36px rgba(11,94,162,.10);
  --radius:20px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -100px, rgba(53,141,217,.14), transparent 60%),
    radial-gradient(900px 500px at -100px 30%, rgba(0,93,171,.08), transparent 55%),
    var(--bg);
  color:var(--ink); line-height:1.55; font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1020px; margin:0 auto; padding:0 16px;}
a{color:var(--blue-bright); text-decoration:none;}
a:hover{text-decoration:underline;}

/* top legal disclaimer (verbatim, always visible) */
.disclaimer{background:#eef2f7; border-bottom:1px solid var(--hair);
  font-size:12.5px; color:var(--ink2); padding:8px 16px; text-align:center;}
.disclaimer a{color:var(--blue); text-decoration:underline;}

/* glass header */
.bar{position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--hair);}
.bar-in{max-width:1020px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;}
.bar img{display:block; height:34px; width:auto;}
.bar .welcome{font-size:13px; font-weight:600; color:var(--blue);
  text-align:center; line-height:1.3; flex:1; min-width:0;}
@media(max-width:560px){ .bar .welcome{font-size:11.5px;} .bar img{height:27px;} }

/* hamburger menu */
.menubtn{background:rgba(255,255,255,.7); border:1px solid var(--hair); border-radius:12px;
  min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:0 0 auto;}
.menu{max-width:1020px; margin:0 auto; padding:14px 16px 18px;
  display:grid; grid-template-columns:1fr; gap:14px;
  border-top:1px solid var(--hair);}
.menu[hidden]{display:none;}
@media(min-width:760px){ .menu{grid-template-columns:repeat(4,1fr);} }
.menu .mcol h5{font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--red); margin-bottom:6px;}
.menu .mcol a{display:block; padding:9px 0; font-size:15px; font-weight:600; color:var(--blue-deep);
  min-height:40px;}

/* hero */
.hero{padding:42px 0 10px; text-align:center;}
.hero h1{font-size:clamp(27px,5.6vw,40px); font-weight:800; letter-spacing:-.02em;
  line-height:1.12; color:var(--blue);}
.hero .lead{font-size:clamp(17px,3.4vw,21px); color:var(--ink2); margin-top:12px; font-weight:600;}

/* audience tile grid */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:26px 0 8px;}
@media(min-width:760px){ .tiles{grid-template-columns:repeat(3,1fr);} }
.tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:var(--glass); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 14px; min-height:118px; color:var(--ink); font-weight:700; font-size:16px;
  text-align:center; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;}
.tile:hover{transform:translateY(-2px); box-shadow:0 4px 8px rgba(11,94,162,.08), 0 18px 44px rgba(11,94,162,.16); text-decoration:none;}
.tile svg{width:42px; height:42px;}

/* red band (their redbar, modernized) */
.redbar{background:linear-gradient(100deg, var(--red-alt), var(--red));
  color:#fff; text-align:center; font-weight:700; font-size:clamp(16px,3.4vw,20px);
  padding:16px 18px; margin:34px 0; border-radius:16px; letter-spacing:.01em;
  box-shadow:0 10px 28px rgba(222,33,39,.25);}

/* sections + glass cards */
section{margin:30px 0;}
.sec-title{font-size:clamp(21px,4.4vw,27px); font-weight:800; letter-spacing:-.015em;
  color:var(--blue); text-align:center; line-height:1.25;}
.sec-sub{font-size:15.5px; color:var(--ink2); text-align:center; max-width:72ch; margin:10px auto 0;}
.cards{display:grid; grid-template-columns:1fr; gap:14px; margin-top:22px;}
@media(min-width:760px){ .cards{grid-template-columns:repeat(3,1fr);} .cards.two{grid-template-columns:repeat(2,1fr);} }
.gcard{background:var(--glass); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 20px;
  display:flex; flex-direction:column;}
.gcard h3{font-size:18.5px; font-weight:800; color:var(--blue); letter-spacing:-.01em; margin-bottom:4px;}
.gcard .tag{font-size:14.5px; color:var(--ink2); margin-bottom:10px;}
.gcard ul{list-style:none; margin:2px 0 14px;}
.gcard li{padding:5px 0 5px 26px; position:relative; font-size:15px; color:var(--ink2);}
.gcard li::before{content:""; position:absolute; left:2px; top:11px; width:14px; height:14px;
  border-radius:5px; background:linear-gradient(135deg, var(--blue-soft), var(--blue));
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.6 1.8 8.2l1.4-1.4 3 3 6.6-6.6 1.4 1.4z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.6 1.8 8.2l1.4-1.4 3 3 6.6-6.6 1.4 1.4z"/></svg>') center/contain no-repeat;}
.gcard .more{margin-top:auto; font-weight:700; font-size:15px;}
.gcard h4{font-size:16px; font-weight:800; color:var(--ink); margin:8px 0 2px;}

/* chip cloud */
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px;}
.chip{background:var(--glass); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:99px; padding:9px 16px; font-size:14px; font-weight:600; color:var(--blue-deep);
  box-shadow:0 2px 10px rgba(11,94,162,.07);}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(160deg, var(--blue-bright), var(--blue));
  color:#fff; font-weight:700; font-size:17px; border:0; cursor:pointer;
  min-height:50px; padding:12px 28px; border-radius:14px;
  box-shadow:0 8px 22px rgba(0,93,171,.30); transition:transform .15s ease;}
.btn:hover{transform:translateY(-1px); text-decoration:none; color:#fff;}
.btn.red{background:linear-gradient(160deg, var(--red), var(--red-alt)); box-shadow:0 8px 22px rgba(222,33,39,.30);}
.btn.ghost{background:rgba(255,255,255,.7); color:var(--blue); border:1.5px solid var(--blue);
  box-shadow:none;}

/* multi-step quote form (glass) */
.flow{background:var(--glass); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
  border-radius:24px; box-shadow:0 2px 6px rgba(11,94,162,.06), 0 24px 60px rgba(11,94,162,.16);
  padding:26px 22px; max-width:560px; margin:26px auto 0; text-align:left;}
.flow .progress{display:flex; align-items:center; gap:8px; margin-bottom:18px;}
.flow .progress .pbar{flex:1; height:6px; border-radius:99px; background:rgba(11,94,162,.12); overflow:hidden;}
.flow .progress .pbar i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--blue-soft), var(--blue)); transition:width .3s ease;}
.flow .progress .plabel{font-size:13px; font-weight:700; color:var(--mut); white-space:nowrap;}
.flow label{display:block; font-size:14px; font-weight:700; color:var(--ink); margin:14px 0 6px;}
.flow label .req{color:var(--red);}
.flow input, .flow select{font:inherit; font-size:17px; width:100%; min-height:50px; color:var(--ink);
  padding:12px 14px; border:1.5px solid rgba(11,94,162,.25); border-radius:13px;
  background:rgba(255,255,255,.85); outline:none;}
.flow select{-webkit-appearance:none; appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%230b5ea2" d="M3.2 5.6 8 10.4l4.8-4.8"/></svg>');
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px;}
.flow input:focus, .flow select:focus{border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(0,111,219,.15);}
.flow .hint{font-size:13px; color:var(--mut); margin-top:8px;}
.flow .nav{display:flex; gap:10px; margin-top:20px;}
.flow .nav .btn{flex:1;}
.flow .back{background:rgba(255,255,255,.7); color:var(--blue); border:1.5px solid rgba(11,94,162,.3);
  box-shadow:none; flex:0 0 auto; min-width:96px;}
.flow .save-note{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--mut); margin-top:14px;}
.flow .save-note svg{width:15px; height:15px; flex:0 0 auto;}
.flow .demo-done{text-align:center; padding:14px 4px;}
.flow .demo-done .check{width:56px; height:56px; margin:4px auto 14px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-soft), var(--blue)); display:flex; align-items:center; justify-content:center;}
.flow .demo-done .check svg{width:30px; height:30px;}
.flow .demo-done h3{font-size:20px; font-weight:800; color:var(--ink); margin-bottom:8px;}
.flow .demo-done p{font-size:15px; color:var(--ink2); max-width:42ch; margin:0 auto;}

/* FAQ accordion */
details.faq{background:var(--glass); border:1px solid var(--glass-edge);
  border-radius:16px; box-shadow:var(--shadow); margin-top:10px; overflow:hidden;}
details.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:10px; padding:16px 18px; font-weight:700; font-size:15.5px; color:var(--ink); min-height:50px;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+"; font-size:22px; color:var(--blue); font-weight:600; flex:0 0 auto;}
details.faq[open] summary::after{content:"–";}
details.faq .a{padding:0 18px 16px; font-size:15px; color:var(--ink2);}
details.faq .a strong{color:var(--ink);}

/* footer */
footer{margin-top:46px; border-top:1px solid var(--hair); background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  padding:30px 0 40px; font-size:13.5px; color:var(--ink2);}
footer .fwrap{max-width:1020px; margin:0 auto; padding:0 16px;}
footer .flinks{display:flex; flex-wrap:wrap; gap:6px 14px; margin:12px 0; font-weight:600;}
footer details{margin:10px 0; border:1px solid var(--hair); border-radius:12px; background:rgba(255,255,255,.55);}
footer details summary{cursor:pointer; padding:12px 14px; font-weight:700; color:var(--blue); min-height:44px; display:flex; align-items:center;}
footer details .inner{padding:4px 16px 14px; columns:2; column-gap:24px; font-size:13px;}
@media(min-width:700px){ footer details .inner{columns:3;} }
footer .legal{font-size:12.5px; color:var(--mut); margin-top:14px;}
footer .legal p{margin-top:10px;}
.paperst{margin-top:22px; padding-top:14px; border-top:1px solid var(--hair);
  font-size:12.5px; color:var(--mut); text-align:center;}

/* demo toast */
#toast{position:fixed; left:50%; bottom:24px; visibility:hidden; transform:translateX(-50%) translateY(120%);
  background:rgba(22,24,29,.92); color:#fff; font-size:14px; font-weight:600;
  padding:12px 20px; border-radius:99px; transition:transform .25s ease; z-index:99;
  max-width:90vw; text-align:center;}
#toast.show{visibility:visible; transform:translateX(-50%) translateY(0);}
/* ===== CBCFULL additive layer (cqkit-20260610-v1) — template kit classes.
   Everything above is the shipped demo design system; do not edit it. ===== */
.crumb{font-size:13px; color:var(--mut); padding:14px 0 0;}
.crumb a{color:var(--blue);}
.page-hero{padding:34px 0 6px; text-align:center;}
.page-hero h1{font-size:clamp(25px,5.2vw,36px); font-weight:800; letter-spacing:-.02em;
  line-height:1.15; color:var(--blue);}
.gcard.art{margin-top:18px;}
.gcard.art p{font-size:15.5px; color:var(--ink2); margin-top:10px; overflow-wrap:anywhere;}
.gcard.art p:first-child{margin-top:0;}
.gcard.art h3{margin-top:14px;}
.gcard.art h3:first-child{margin-top:0;}
.gcard.art ul{margin:8px 0 4px;}
.actrow{text-align:center; margin:18px 0 4px;}
.gcard .actrow{margin:14px 0 2px;}
.tblwrap{overflow-x:auto; margin-top:10px; border-radius:12px;}
.tbl{border-collapse:collapse; width:100%; font-size:14.5px;}
.tbl td{border:1px solid var(--hair); padding:9px 12px; color:var(--ink2); vertical-align:top;}
.tbl tr:first-child td{background:rgba(0,93,171,.07); font-weight:700; color:var(--blue-deep);}
.glossary-grid{display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px;}
@media(min-width:760px){ .glossary-grid{grid-template-columns:repeat(2,1fr);} }
.gcard.term h3{font-size:16.5px;}
.gcard.term p{font-size:14.5px; color:var(--ink2); margin-top:6px; overflow-wrap:anywhere;}
.smlink{padding:4px 0;}
.sel{font:inherit; font-size:16px; width:100%; min-height:48px; color:var(--ink);
  padding:10px 14px; border:1.5px solid rgba(11,94,162,.25); border-radius:13px;
  background:rgba(255,255,255,.85); margin-top:8px;}
.lbl{margin-top:12px;}
footer .flinks a{min-height:44px; display:inline-flex; align-items:center;}
.menu .mcol a{overflow-wrap:anywhere;}
.menu .mcol a{min-height:44px; display:flex; align-items:center;}
.crumb a{display:inline-flex; min-height:44px; align-items:center;}
.gcard .more{display:inline-flex; min-height:44px; align-items:center;}
.letters{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:18px 0 6px;}
.letters .chip{min-width:44px; min-height:44px; display:inline-flex; align-items:center;
  justify-content:center; font-weight:700; color:var(--blue);}
.gloss-letter{margin-top:26px; scroll-margin-top:80px;}
.postgrid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px;}
@media(min-width:760px){ .postgrid{grid-template-columns:repeat(3,1fr);} }
.gcard.post{padding:0 0 16px; overflow:hidden;}
.gcard.post .postimg{width:100%; height:auto; display:block; border-radius:var(--radius) var(--radius) 0 0;}
.gcard.post h3{padding:12px 18px 0; font-size:16.5px;}
.gcard.post p{padding:6px 18px 0; font-size:14.5px; color:var(--ink2);}
.gcard.post .actrow{text-align:right; margin:8px 0 0;}
.post-article{margin-top:18px;}
.post-title{font-size:clamp(21px,4.6vw,28px); font-weight:800; color:var(--blue); letter-spacing:-.015em;}
.post-date{font-size:13.5px; color:var(--mut); margin-top:2px;}
.post-tags{margin-top:14px;}
.postfig{margin:14px 0 4px;}
.postfig img{width:100%; height:auto; border-radius:14px; display:block;}
.radiorow{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px;}
.rchip{font:inherit; font-size:15px; font-weight:600; color:var(--blue-deep);
  background:rgba(255,255,255,.85); border:1.5px solid rgba(11,94,162,.3);
  border-radius:99px; min-height:44px; padding:8px 18px; cursor:pointer;}
.rchip.on{background:linear-gradient(160deg, var(--blue-bright), var(--blue)); color:#fff; border-color:transparent;}
/* ===== CBCFULL additive layer P4 (cbckit-20260610-v1) — cbcins kit classes.
   Appended after the P3 layer; additive only, never edits existing rules. */
.audpills{display:flex; flex-direction:column; gap:10px; margin:16px 0 6px;}
@media(min-width:700px){ .audpills{flex-direction:row; justify-content:center;} }
.audpill{display:flex; align-items:center; justify-content:center; min-height:54px;
  padding:10px 20px; border-radius:16px; font-size:16.5px; font-weight:800;
  color:var(--blue-deep); background:rgba(255,255,255,.78);
  border:1.5px solid rgba(210,47,47,.28); box-shadow:0 4px 16px rgba(48,51,55,.07);}
.redbar{margin:20px 0 4px; padding:13px 18px; border-radius:14px; text-align:center;
  font-size:15.5px; font-weight:800; color:#fff;
  background:linear-gradient(150deg, var(--blue-bright, #e23940), var(--blue, #d22f2f));}
.gcard.home-box{margin-top:16px;}
.gcard.home-box h3{font-size:19px;}
.gcard.home-box .lead{margin-top:10px; font-size:15px;}
.gcard.home-box p{font-size:14.5px; color:var(--ink2); margin-top:10px; overflow-wrap:anywhere;}
.ticks{list-style:none; margin:10px 0 2px; padding:0;}
.ticks li{position:relative; padding:6px 0 6px 26px; font-size:14.5px; color:var(--ink2);}
.ticks li::before{content:""; position:absolute; left:2px; top:12px; width:9px; height:9px;
  border-radius:50%; background:linear-gradient(150deg, var(--blue-bright,#e23940), var(--blue,#d22f2f));}
.gcard.quote{margin-top:12px;}
.gcard.quote blockquote{font-size:14.5px; color:var(--ink2); line-height:1.55;}
.gcard.quote blockquote strong{color:var(--blue, #d22f2f); font-size:18px;}
.contact-grid{display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px;}
@media(min-width:760px){ .contact-grid{grid-template-columns:repeat(2,1fr);} }
.contact-card h3{font-size:15.5px; letter-spacing:.04em;}
.crow{display:flex; gap:12px; margin-top:10px; align-items:flex-start;}
.crow > strong{flex:0 0 84px; font-size:12.5px; letter-spacing:.05em; color:var(--mut);
  padding-top:4px;}
.crow > div{flex:1;}
.crow p{font-size:14.5px; color:var(--ink2); overflow-wrap:anywhere;}
.crow a{color:var(--blue-deep); display:inline-flex; min-height:44px; align-items:center;}
.btn.chat{min-height:44px; padding:8px 22px; width:auto;}
/* B2: inline link inside an h3 heading (common/f-a-qs "email") needs the 44px tap floor */
.gcard h3 a{display:inline-flex; min-height:44px; align-items:center;}
/* B3: privacy-policy pages carry bare URLs both as link text (google.ie cookie policy)
   and as plain text nodes (iContact li); inherit anywhere-wrap through the whole card */
.gcard.art{overflow-wrap:anywhere;}