/* CBCins remake demo · re-skin of the W2 system
   Real tokens extracted from served theme.css (2026-06-10):
   blues #d22f2f / #303337 / #dd6363 / #e23940 · reds #d22f2f / #e23940 · gray #707070 */
:root{
  --blue:#d22f2f; --blue-deep:#303337; --blue-bright:#e23940; --blue-soft:#dd6363;
  --red:#d22f2f; --red-alt:#e23940;
  --ink:#16181d; --ink2:rgba(22,24,29,.82); --mut:rgba(22,24,29,.64);
  --bg:#f4f7fb;
  --hair:rgba(48,51,55,.12);
  --glass:rgba(255,255,255,.66);
  --glass-edge:rgba(255,255,255,.85);
  --shadow:0 1px 2px rgba(48,51,55,.05), 0 12px 36px rgba(48,51,55,.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(221,99,99,.14), transparent 60%),
    radial-gradient(900px 500px at -100px 30%, rgba(210,47,47,.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(48,51,55,.08), 0 18px 44px rgba(48,51,55,.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(48,51,55,.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(210,47,47,.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(48,51,55,.06), 0 24px 60px rgba(48,51,55,.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(48,51,55,.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(48,51,55,.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(226,57,64,.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(48,51,55,.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);}