:root{
  --bg:#000;
  --bg-1:#111;
  --bg-2:#151515;
  --bg-3:#1c1c1c;
  --line:#2a2a2a;
  --line-2:#383f42;
  --accent:#B20B03;
  --accent-d:#8a0902;
  --red:#EE3124;
  --teal:#B20B03;
  --text:#ffffff;
  --muted:rgba(255,255,255,0.62);
  --muted-2:rgba(255,255,255,0.42);
  --radius:14px;
  --radius-s:10px;
  --shadow:0 18px 50px rgba(0,0,0,0.55);
  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-head:'Montserrat','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
h1,h2,h3,h4,.brand .title,.group-title h2,.pd-doctitle{font-family:var(--font-head)}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 700px at 80% -10%, rgba(178,11,3,0.10), transparent 60%),
             radial-gradient(900px 600px at -10% 0%, rgba(178,11,3,0.08), transparent 55%),
             var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:16px 28px;
  background:rgba(10,10,10,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:14px;cursor:pointer}
.brand img{height:30px;display:block}
.brand .divider{width:1px;height:26px;background:var(--line-2)}
.brand .title{font-size:15px;font-weight:600;letter-spacing:.2px;color:var(--text)}
.brand .title span{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.header-spacer{flex:1}
.cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--text);
  padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;
  transition:border-color .15s,transform .05s;
}
.cart-btn:hover{border-color:var(--accent)}
.cart-btn:active{transform:translateY(1px)}
.cart-count{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--accent);color:#1a1300;font-size:12px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.cart-count.empty{background:var(--line-2);color:var(--muted)}

/* ---------- Layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:40px 28px 80px}
.page-head{margin-bottom:30px}
.page-head h1{font-size:30px;font-weight:800;letter-spacing:-.4px;margin:0 0 8px}
.page-head p{margin:0;color:var(--muted);max-width:760px}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px}

/* ---------- Offerings ---------- */
.group{margin-top:18px}
.group-title{display:flex;align-items:center;gap:12px;margin:0;width:100%;
  background:transparent;border:none;cursor:pointer;text-align:left;padding:14px 4px;
  border-bottom:1px solid var(--line);transition:border-color .15s}
.group-title:hover{border-color:var(--line-2)}
.group-title:hover h2{color:var(--accent)}
.group-title h2{font-size:14px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text);margin:0;transition:color .15s}
.group-title .chev{color:var(--accent);font-size:13px;width:14px;display:inline-block;
  transition:transform .18s;transform:rotate(0deg)}
.group-title[aria-expanded="true"] .chev{transform:rotate(90deg)}
.group-title .grp-count{font-size:12px;font-weight:500;color:var(--muted-2);
  background:var(--bg-3);border:1px solid var(--line);padding:3px 10px;border-radius:999px}
.group-title .bar{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.cards{margin-top:16px}
.cards[hidden]{display:none}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.card{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 18px;display:flex;flex-direction:column;
  transition:border-color .15s,transform .12s,box-shadow .15s;
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-.2px}
.card p{margin:0 0 14px;color:var(--muted);font-size:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--radius-s);font-weight:700;font-size:14px;cursor:pointer;
  padding:11px 18px;transition:transform .05s,filter .15s,background .15s,border-color .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#1a1300}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;border:1px solid var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-text{background:transparent;border:none;color:var(--muted);cursor:pointer;font-weight:600;padding:8px 6px}
.btn-text:hover{color:var(--accent)}
.btn-danger{background:transparent;border:1px solid var(--line-2);color:var(--muted)}
.btn-danger:hover{border-color:var(--red);color:var(--red)}
.card .btn{align-self:flex-start;margin-top:auto}

/* ---------- Client explainer points ---------- */
.talking-points{
  border-left:2px solid var(--accent);
  background:rgba(178,11,3,0.06);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:12px 14px;margin:0 0 18px;
}
.tp-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.talking-points ul{margin:0;padding:0 0 0 16px;list-style:disc}
.talking-points li{color:var(--muted);font-size:13px;line-height:1.45;margin:0 0 5px}
.talking-points li:last-child{margin-bottom:0}
.config-desc + .talking-points{margin-top:14px;max-width:760px}

/* ---------- Configure form ---------- */
.config-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:8px}
.config-head .ix{flex:1}
.config-head h1{margin:0 0 8px}
.config-desc{color:var(--muted);max-width:760px;margin:0 0 6px}
.panel{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;margin-top:24px;
}
.field{margin-bottom:22px}
.field:last-child{margin-bottom:0}
.qlabel{display:block;font-weight:600;font-size:14.5px;margin-bottom:9px}
.req{color:var(--accent)}
input[type=text],input[type=number],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--text);
  border-radius:var(--radius-s);padding:11px 13px;font-size:15px;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(178,11,3,0.15);
}
input[type=number]{max-width:220px}
select{max-width:360px;cursor:pointer;appearance:none;
  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 fill='%23B20B03' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
textarea{resize:vertical;min-height:74px}
.field.invalid input,.field.invalid select,.field.invalid textarea,.field.invalid .seg{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(238,49,36,0.15)}
.field.invalid .seg{border-radius:var(--radius-s)}
.err-msg{color:var(--red);font-size:12.5px;margin-top:6px;display:none}
.field.invalid .err-msg{display:block}

.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--radius-s);overflow:hidden}
.seg button{background:var(--bg);border:none;color:var(--muted);padding:10px 22px;font-weight:600;
  font-size:14px;cursor:pointer;transition:background .12s,color .12s}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button.active{background:var(--accent);color:#1a1300}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chk{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);
  border-radius:999px;padding:9px 15px;cursor:pointer;font-size:14px;font-weight:500;
  transition:border-color .12s,background .12s}
.chk:hover{border-color:var(--accent)}
.chk input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
.chk.checked{border-color:var(--accent);background:rgba(178,11,3,0.08)}

.subsection{border-top:1px dashed var(--line-2);margin-top:6px;padding-top:22px}
.subsection-label{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--teal);margin-bottom:18px}

.form-actions{display:flex;gap:12px;align-items:center;margin-top:28px;flex-wrap:wrap}
.form-actions .spacer{flex:1}

/* ---------- Cart ---------- */
.cart-item{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:14px;
}
.cart-item-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cart-item-head h3{margin:0;font-size:17px;font-weight:700;flex:1}
.cart-item-head .grp{font-size:11px;font-weight:600;color:var(--accent);
  letter-spacing:.6px;text-transform:uppercase}
.answers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.answers li{font-size:14px;color:var(--muted);display:flex;gap:8px;padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,0.05)}
.answers li .k{color:var(--muted-2);flex:1}
.answers li .v{color:var(--text);font-weight:600;text-align:right;max-width:55%}
.cart-item-actions{display:flex;gap:8px;margin-top:16px}
.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}
.empty-state .big{font-size:46px;margin-bottom:10px;opacity:.5}
.cart-summary{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;
  padding-top:24px;border-top:1px solid var(--line)}

/* ---------- Checkout ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:620px){.grid-2{grid-template-columns:1fr}.answers{grid-template-columns:1fr}}
.note{background:rgba(178,11,3,0.07);border:1px solid rgba(178,11,3,0.3);
  border-radius:var(--radius-s);padding:14px 16px;color:var(--muted);font-size:13.5px;margin-top:20px}
.note strong{color:var(--text)}

.steps{display:flex;gap:8px;align-items:center;margin-bottom:26px;font-size:13px;color:var(--muted-2);flex-wrap:wrap}
.steps .s{display:inline-flex;align-items:center;gap:7px}
.steps .s.active{color:var(--accent)}
.steps .dot{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.steps .s.active .dot{background:var(--accent)}
.steps .arrow{color:var(--line-2)}

footer.site-footer{border-top:1px solid var(--line);padding:24px 28px;color:var(--muted-2);
  font-size:12.5px;text-align:center}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--bg-3);border:1px solid var(--accent);color:var(--text);
  padding:13px 20px;border-radius:999px;font-weight:600;font-size:14px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Print document ---------- */
#print-doc{display:none}
@media screen{
  .print-preview #print-doc{
    display:block;background:#fff;color:#111;border-radius:var(--radius);
    max-width:840px;margin:0 auto;box-shadow:var(--shadow);overflow:hidden;
  }
}
.pd-header{background:#000;padding:26px 40px;display:flex;align-items:center;gap:16px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.pd-header img{height:30px}
.pd-header .pd-doctitle{color:#fff;font-size:13px;font-weight:600;border-left:1px solid #444;
  padding-left:16px;line-height:1.35}
.pd-header .pd-doctitle span{display:block;color:rgba(255,255,255,.6);font-weight:500;font-size:12px}
.pd-body{padding:34px 40px 40px}
.pd-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;margin-bottom:26px;
  border-bottom:2px solid #B20B03;padding-bottom:22px}
.pd-meta div{font-size:13px;color:#444}
.pd-meta b{color:#000}
.pd-svc{margin-bottom:22px;page-break-inside:avoid;break-inside:avoid}
.pd-svc h3{margin:0 0 3px;font-size:16px;color:#000;border-left:4px solid #B20B03;padding-left:10px}
.pd-svc .pd-grp{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:#8a0902;margin:0 0 10px;padding-left:14px}
.pd-svc table{width:100%;border-collapse:collapse;margin-left:14px;width:calc(100% - 14px)}
.pd-svc td{font-size:13px;padding:5px 0;border-bottom:1px solid #eee;vertical-align:top}
.pd-svc td.k{color:#666;width:55%;padding-right:18px}
.pd-svc td.v{color:#000;font-weight:600}
.pd-foot{margin-top:30px;border-top:1px solid #ddd;padding-top:16px;font-size:11.5px;color:#777}
.pd-foot b{color:#333}
.print-actions{max-width:840px;margin:0 auto 22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

@media print{
  @page{margin:14mm}
  body{background:#fff !important}
  .site-header,.site-footer,.print-actions,#app{display:none !important}
  #print-doc{display:block !important;box-shadow:none;max-width:none;margin:0}
  .pd-header{padding:0 0 18px}
}

/* =====================================================================
   ADDITIONS FOR THE CLIENT-FACING TOOL + PARTNER ATTRIBUTION
   ===================================================================== */

/* Fix: email / tel inputs previously fell through the text-input styling. */
input[type=email],input[type=tel],input[type=url]{
  width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--text);
  border-radius:var(--radius-s);padding:11px 13px;font-size:15px;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}

/* ---------- Partner co-branding ribbon ---------- */
.cobrand{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:10px 24px;font-size:13px;
  background:linear-gradient(90deg,rgba(178,11,3,0.16),rgba(178,11,3,0.05) 55%,transparent);
  border-bottom:1px solid var(--line);
  color:var(--muted);
}
.cobrand[hidden]{display:none}
.cobrand b{color:var(--text);font-weight:700}
.cobrand .pill{
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(178,11,3,.45);
  border-radius:999px;padding:3px 9px;
}

/* ---------- "Not sure where to start?" helper ---------- */
.helper{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin:0 0 30px;
}
.helper-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;
  color:var(--text);cursor:pointer;text-align:left;padding:0;font-family:var(--font-head)}
.helper-head h2{margin:0;font-size:16px;font-weight:700;flex:1}
.helper-head .chev{color:var(--accent);font-size:13px;transition:transform .18s}
.helper-head[aria-expanded="true"] .chev{transform:rotate(90deg)}
.helper-body{margin-top:16px}
.helper-body[hidden]{display:none}
.helper-body > p{margin:0 0 14px;color:var(--muted);font-size:14px}
.goals{display:flex;flex-wrap:wrap;gap:9px}
.goal{
  background:var(--bg);border:1px solid var(--line-2);color:var(--text);
  border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:500;
  cursor:pointer;transition:border-color .12s,background .12s,color .12s;
}
.goal:hover{border-color:var(--accent)}
.goal.active{border-color:var(--accent);background:rgba(178,11,3,.12);font-weight:700}
.helper-result{margin-top:16px;font-size:13.5px;color:var(--muted)}
.helper-result b{color:var(--text)}
.helper-clear{margin-left:10px}

/* ---------- Recommended service cards ---------- */
.card.recommended{border-color:var(--accent);box-shadow:0 0 0 1px rgba(178,11,3,.35)}
.rec-badge{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(178,11,3,.45);border-radius:999px;
  padding:3px 9px;margin:0 0 10px;
}
.group.has-rec .group-title h2{color:var(--accent)}

/* ---------- "Not sure" escape hatch on number fields ---------- */
.num-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.num-row input[type=number]{flex:0 0 auto}
.notsure{
  background:transparent;border:1px dashed var(--line-2);color:var(--muted);
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;
}
.notsure:hover{border-color:var(--accent);color:var(--text)}
.notsure.active{border-style:solid;border-color:var(--accent);
  background:rgba(178,11,3,.12);color:var(--text)}
.field input:disabled{opacity:.4;cursor:not-allowed}
.hint{display:block;margin-top:7px;font-size:12.5px;color:var(--muted-2)}

/* ---------- Locked (registry-supplied) field ---------- */
.field.locked input{background:var(--bg-3);color:var(--muted);cursor:not-allowed}
.lock-note{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--accent);font-weight:600;margin-left:8px}

/* ---------- Privacy / disclosure note ---------- */
.privacy{margin-top:20px;font-size:12.5px;color:var(--muted-2);line-height:1.55}
.privacy strong{color:var(--muted)}

/* ---------- Reference number ---------- */
.refno{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--text);
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--radius-s);
  padding:9px 16px;margin:6px 0 18px;
}

/* ---------- Attribution debug strip (only with ?debug=1) ---------- */
.attrib-debug{
  max-width:1120px;margin:0 auto;padding:8px 28px;font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--muted-2);border-bottom:1px dashed var(--line);
}

@media(max-width:620px){
  .site-header{padding:12px 16px;gap:12px}
  .brand .title span{display:none}
  .wrap{padding:28px 16px 60px}
  .page-head h1{font-size:24px}
}