/* ============================================================================
   XPS Business Systems, the easy quiz (2026-11-02).
   Built from the site.css tokens. Selection, progress and focus are gold; the one
   action that costs something, "Build my site", is solid gold with a soft glow.
   Premium pass C2 (2026-11-02): floating glass top bar, glass-edged cards, gold as
   the light source. Cyan only on the "N of 11" counter.
   Phone-first: designed at 390 px. Component rules for the plan cards, the bill
   and the assent block are carried over from the 12-screen quiz unchanged, then
   re-pointed to cyan for selection in the EASY QUIZ block at the bottom.
   ========================================================================== */
/* ============================================================================
   XPS Business Systems, contractor setup.
   The palette, type, spacing and controls are lifted from the landing page at
   business-systems-landing/c/index.html so the hand off has no visible seam.
   Single file, no build step, no framework. Dark only, same as the landing.
   ========================================================================== */
:root{
  color-scheme:dark;
  /* tokens from /assets/css/site.css (kept in step by hand; this page does not load site.css
     because its sticky .nav would collide with the quiz's bottom bar) */
  --bg:#0A0C0E; --surf:#13171A; --surf2:#1A1F24; --panel:#0D1013; --line:#222831; --line2:#343C46;
  --ink:#F4F6F8; --ink2:#C3CAD3; --ink3:#9AA3AE;
  --gold:#FFD200; --acc:#22D3EE; --jb:#F97316;
  --r:20px; --rs:14px;
  --goldgrad:linear-gradient(180deg,#FFE24D 0%,#FFD200 55%,#F2C400 100%);
  --goldgrad-hi:linear-gradient(180deg,#FFE766 0%,#FFD91F 60%,#F7CB00 100%);
  --gl:rgba(255,210,0,.55); --gl2:rgba(255,210,0,.18);
  --edgec:rgba(255,255,255,.22) rgba(255,255,255,.12) rgba(255,255,255,.08);
  --glass:rgba(16,19,23,.62);
  --hi:inset 0 1px 0 rgba(255,255,255,.07);
  --ease:cubic-bezier(.16,1,.3,1);
  --disp:'Outfit',system-ui,sans-serif;
  --ui:'Inter Tight',system-ui,-apple-system,Segoe UI,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:68px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);
  font-size:16.5px;line-height:1.58;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* the same film grain the landing page carries */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

/* ---------------------------------------------------------- preview banner --
   Only ever unhidden by script, and only when PREVIEW is true (path AND query
   both match — see the script). /quiz/ never runs that branch, so this never
   shows there even though the markup is byte-identical across both files. */
.pvbanner{background:var(--gold);color:#0A0C0E;text-align:center;font-weight:700;
  font-size:13px;letter-spacing:.01em;padding:10px 16px;line-height:1.4}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{background:var(--gold)}

/* ---------------------------------------------------------------- chrome -- */
/* floating glass bar; the progress track is its bottom edge */
.top{position:sticky;top:10px;z-index:30;margin:10px 10px 0;overflow:hidden;
  background:var(--glass);border:1px solid;border-color:var(--edgec);border-radius:18px;
  box-shadow:var(--hi),0 20px 50px -24px rgba(0,0,0,.9);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
@media(min-width:900px){.top{margin:14px auto 0;top:14px;max-width:920px}}
@media(prefers-reduced-transparency:reduce){.top{background:#101317;backdrop-filter:none;-webkit-backdrop-filter:none}}
.top .in{max-width:840px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
@media(min-width:900px){.top .in{padding:12px 28px}}
.brand{font-family:var(--disp);font-weight:700;font-size:12px;line-height:1.25;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.brand em{color:var(--gold);font-style:normal}
.brand{display:flex;align-items:center;gap:11px}
.brand svg.seal{width:54px;height:54px;flex:none;display:block}
@media(max-width:600px){.brand svg.seal{width:44px;height:44px}}
.step{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.track{height:3px;background:rgba(255,255,255,.08)}
.fill{height:100%;background:var(--goldgrad);width:10%;box-shadow:0 0 12px var(--gl);
  transition:width .35s cubic-bezier(.4,0,.2,1)}

.wrap{max-width:840px;margin:0 auto;padding:var(--s4) 20px 132px}
@media(min-width:900px){.wrap{padding:var(--s5) 40px 132px}}

/* ---------------------------------------------------------------- screen -- */
h1{margin:0 0 var(--s2);font-family:var(--disp);font-weight:800;
  font-size:clamp(28px,6.2vw,40px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.sub{margin:0 0 var(--s4);color:var(--ink2);font-size:16.5px;line-height:1.55;max-width:52ch}
.scr{display:none}
.scr.on{display:block;animation:in .3s ease both}
@media(prefers-reduced-motion:reduce){.scr.on{animation:none}}
@keyframes in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- fields -- */
.f{margin-bottom:var(--s3)}
.f.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
@media(max-width:619px){.f.two{grid-template-columns:1fr;gap:var(--s3)}}
label,.lab{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;font:inherit;font-size:16.5px;padding:14px 16px;color:var(--ink);
  background-color:rgba(6,8,10,.66);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--rs);
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
/* A placeholder has to read as an EXAMPLE, not as a value already typed in. At phone
   contrast the old #8A939D looked filled-in, and "Summit Coatings" was being read as the
   contractor's own business name (QA 2026-09-23, cosmetic 4). Dimmer, and italic. */
input::placeholder{color:#727B85;font-style:italic}
input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.34)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
  background-color:rgba(6,8,10,.86);box-shadow:0 0 0 3px rgba(255,210,0,.26)}
select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-repeat:no-repeat;background-position:right 16px center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238E97A2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
option{background:#13171A;color:#F4F6F8}
.help{font-size:13.5px;color:var(--ink3);line-height:1.45;margin:9px 0 0}

/* ----------------------------------------------------------------- chips -- */
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{border:1px solid rgba(255,255,255,.2);background-color:rgba(6,8,10,.5);color:var(--ink2);
  border-radius:var(--rs);padding:11px 16px;font:inherit;font-size:15px;font-weight:500;
  cursor:pointer;text-align:left;line-height:1.3;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease}
.opt:hover{border-color:rgba(255,255,255,.4);color:var(--ink)}
.opt[aria-pressed=true]{border-color:var(--gold);color:var(--ink);
  background-color:rgba(255,210,0,.12)}
.opt[aria-pressed=true]::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--gold);margin-right:9px;vertical-align:1px}
/* The small chips are still small, but they are a TAP TARGET on a phone: 44px is the
   floor everywhere else on this page and step 3's style/mark chips were 38px
   (QA 2026-09-23, cosmetic 3). Flex rather than extra padding so the row stays tight. */
.opt.sm{padding:9px 14px;font-size:14px;min-height:44px;
  display:inline-flex;align-items:center}

/* --------------------------------------------------------- escape hatch -- */
.hatch{display:block;width:100%;margin-top:var(--s2);padding:15px 17px;text-align:left;
  border:1px dashed var(--line2);border-radius:var(--rs);background:transparent;
  color:var(--ink2);font:inherit;font-size:15px;line-height:1.5;cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease}
.hatch:first-child{margin-top:0}
.hatch:hover{border-color:var(--line2);color:var(--ink);background-color:rgba(255,255,255,.03)}
.hatch[aria-pressed=true]{border-style:solid;border-color:var(--gold);color:var(--ink);
  background-color:rgba(255,210,0,.09)}
.hatch b{display:block;color:var(--ink);font-family:var(--disp);font-weight:700;font-size:16px;
  letter-spacing:-.018em;margin-bottom:3px}

/* ------------------------------------------------------------------- nav -- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--glass);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -20px 50px -30px rgba(0,0,0,.9);
  padding:14px 20px calc(14px + env(safe-area-inset-bottom))}
.nav .in{max-width:840px;margin:0 auto;display:flex;justify-content:space-between;
  align-items:center;gap:14px}
@media(min-width:900px){.nav{padding-left:40px;padding-right:40px}}
.btn{border:0;border-radius:var(--rs);padding:14px 28px;font:inherit;font-size:16.5px;
  font-weight:700;cursor:pointer;background:var(--gold);color:#0A0C0E;white-space:nowrap;
  box-shadow:0 14px 28px -14px rgba(0,0,0,1);
  transition:background .2s ease,box-shadow .2s ease,transform .12s ease}
.btn:hover{background:#fff}
.btn:active{transform:translateY(1px);box-shadow:none}
.back{background:none;border:0;color:var(--ink3);font:inherit;font-size:15px;font-weight:500;
  cursor:pointer;padding:12px 4px;transition:color .16s ease}
.back:hover{color:var(--ink)}
.back[hidden]{visibility:hidden;display:block!important}

/* -------------------------------------------------------------- callouts -- */
.note{background:linear-gradient(180deg,#15191D,#101316);border:1px solid;border-color:var(--edgec);box-shadow:var(--hi);border-radius:var(--rs);
  padding:16px 18px;font-size:15px;color:var(--ink2);line-height:1.55;margin:var(--s3) 0 0}
.note b{color:var(--ink);font-weight:600}
.note + .note{margin-top:var(--s2)}
.todo{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold)}

.disc{margin:var(--s4) 0 var(--s2);color:var(--ink2);font-size:15.5px;line-height:1.6;
  max-width:60ch}
.agree{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:15.5px;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2);
  line-height:1.5;cursor:pointer}
.agree input{width:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--gold);
  cursor:pointer}
.agree a{color:var(--ink2)}
.agree a:hover{color:var(--ink)}
.msg{margin:var(--s3) 0 0;font-size:15.5px;line-height:1.6;color:var(--ink);max-width:60ch}
/* The same paragraph, when it is telling them something is missing. A left rule rather
   than red text: this is a nudge on a form they are filling in, not an error. */
.msg.bad{border-left:3px solid var(--gold);padding-left:14px}
[aria-invalid="true"]{border-color:var(--gold)}

/* ============================================================== the menu == */
/* The package, as two payment plans, then the optional tools, then the sums. */
.pack{position:relative;background:linear-gradient(180deg,#15191D,#101316);border:1px solid;border-color:var(--edgec);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--hi),0 0 40px -18px var(--gl2),0 30px 60px -40px rgba(0,0,0,.9)}
.pack::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 34%,transparent 78%)}
.packhead{padding:var(--s3) var(--s3) 0}
@media(min-width:620px){.packhead{padding:var(--s4) var(--s4) 0}}
.packname{font-family:var(--disp);font-weight:800;font-size:clamp(20px,3.4vw,25px);
  letter-spacing:-.028em;margin:0 0 10px}
.instrip{display:flex;flex-wrap:wrap;align-items:center;margin:0 0 var(--s3);
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.instrip span{display:inline-flex;align-items:center;white-space:nowrap}
.instrip span + span::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--gold);flex:none;margin:0 10px}
@media(max-width:619px){
  .instrip{display:grid;grid-template-columns:auto auto;justify-content:start;row-gap:8px}
  .instrip span:nth-child(3)::before{display:none}
}
.packperk{margin:0 0 var(--s3);font-size:13.5px;font-weight:600;color:var(--gold)}

.plans{display:grid;gap:var(--s2);padding:0 var(--s3) var(--s3)}
@media(min-width:620px){.plans{grid-template-columns:1fr 1fr;gap:var(--s3);
  padding:0 var(--s4) var(--s4)}}
/* a column so the fine print sits on the floor of the card, which keeps the two
   cards agreeing with each other when one has an extra row */
.plan{display:flex;flex-direction:column;width:100%;text-align:left;font:inherit;
  color:var(--ink);cursor:pointer;
  background-color:rgba(16,19,23,.7);border:1px solid;border-color:var(--edgec);
  border-radius:var(--rs);padding:var(--s3) 20px;
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.plan:hover{border-color:rgba(255,255,255,.4)}
.plan[aria-checked=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);
  background-color:rgba(255,210,0,.07)}
.plantag{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px}
.plan[aria-checked=true] .plantag{color:var(--gold)}
.dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line2);flex:none;
  display:grid;place-items:center}
.plan[aria-checked=true] .dot{border-color:var(--gold)}
.plan[aria-checked=true] .dot::after{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--gold)}
.planline{display:block;font-family:var(--disp);font-weight:800;
  font-size:clamp(21px,4.6vw,26px);line-height:1.15;letter-spacing:-.03em;margin-bottom:4px;
  font-variant-numeric:tabular-nums}
.planline i{font-style:normal;color:var(--gold)}
.planname{display:block;font-family:var(--disp);font-weight:700;font-size:17px;
  letter-spacing:-.022em;color:var(--ink);margin-bottom:7px}

/* ---- plan C: the quiet wide rectangle under the two featured boxes ---- */
@media(min-width:620px){.plan.quiet{grid-column:1 / -1}}
.plan.quiet{background-color:rgba(6,8,10,.3);padding:19px 20px}
.plan.quiet .plantag{margin-bottom:10px}
.plan.quiet .planname{font-size:15.5px;margin-bottom:5px}
.plan.quiet .planline{font-size:clamp(19px,3.4vw,22px);margin-bottom:3px}
.plan.quiet .plansub{font-size:14.5px;margin-bottom:var(--s2)}
.plan.quiet .planrows{font-size:14px;gap:6px}
.plan.quiet .planfine{font-size:13px;padding-top:11px}
@media(min-width:760px){
  .plan.quiet .qbody{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--s4);align-items:center}
  .plan.quiet .plansub{margin-bottom:0;max-width:46ch}
  .plan.quiet .planrows{margin-bottom:0;min-width:215px}
}
.plansub{display:block;color:var(--ink2);font-size:15px;line-height:1.5;margin-bottom:var(--s2)}
.planrows{display:grid;gap:7px;margin-bottom:var(--s2);font-size:14.5px;
  font-variant-numeric:tabular-nums}
.planrows span{display:flex;justify-content:space-between;gap:12px;color:var(--ink2)}
.planrows b{color:var(--ink);font-weight:600;text-align:right}
.planfine{display:block;margin-top:auto;color:var(--ink3);font-size:13.5px;line-height:1.5;
  border-top:1px solid var(--line);padding-top:12px}
.plan[aria-checked=true] .planfine{border-top-color:rgba(255,210,0,.26)}

/* the tools, a block of their own inside the package */
.tools{background:var(--panel);border-top:1px solid var(--line);padding:var(--s3)}
@media(min-width:620px){.tools{padding:var(--s4)}}
.jbmark{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;color:var(--ink);
  white-space:nowrap}
.jbmark i{color:var(--jb);font-style:normal}
.toolshead{font-family:var(--disp);font-weight:700;font-size:clamp(17px,3vw,20px);
  letter-spacing:-.024em;margin:0 0 var(--s2)}
.toolshead-sub{display:inline-block;margin-left:8px;font-family:var(--ui);font-weight:500;
  font-size:13px;color:var(--ink3);letter-spacing:0}
.toolshead-sub .jbmark{font-size:1em;font-weight:700}
.tool{display:grid;grid-template-columns:20px 1fr auto;gap:13px;align-items:start;
  width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  background-color:rgba(6,8,10,.5);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rs);padding:16px;margin-bottom:10px;
  transition:border-color .16s ease,background-color .16s ease}
.tool:hover{border-color:rgba(255,255,255,.34)}
.tool[aria-pressed=true]{border-color:var(--gold);background-color:rgba(255,210,0,.08)}
.tick{width:19px;height:19px;border:1.5px solid var(--line2);border-radius:6px;margin-top:3px;
  display:grid;place-items:center;font-size:12px;line-height:1;color:transparent}
.tool[aria-pressed=true] .tick{background:var(--gold);border-color:var(--gold);color:#0A0C0E}
.tname{display:block;font-family:var(--disp);font-weight:700;font-size:16.5px;
  letter-spacing:-.02em}
.px{font-weight:700;font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums;
  text-align:right;padding-top:1px}
.px small{display:block;font-weight:500;font-size:11.5px;color:var(--ink3)}
.toolsfine{margin:var(--s2) 0 0;font-size:13.5px;color:var(--ink3);line-height:1.5}
/* Unused since 2026-10-26 (no non-member prices on the public site). */
.was{margin-left:7px;font-weight:500;font-size:13px;color:var(--ink3)}
.tname small{display:block;font-family:var(--ui);font-weight:400;font-size:13px;
  color:var(--ink3);letter-spacing:0}
.tname small.fromans{color:var(--gold)}

/* ------------------------------------------------------- your best fit (13) --
   Added 2026-10-14 with the FullCommand tiers. One recommended tier with the
   reasons taken from his own answers, then the other two side by side. */
.eyebrow{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.fitcard{background:linear-gradient(180deg,#17191A,#111314);border:1px solid var(--gold);border-radius:var(--r);
  padding:20px;margin:0 0 var(--s3);box-shadow:var(--hi),0 30px 70px -40px rgba(255,210,0,.35)}
@media(min-width:620px){.fitcard{padding:28px}}
.fitcard h1{margin-bottom:var(--s2)}
.fitcard h1 .x{color:var(--gold)}
.fitcard h1 .was{font-family:var(--ui);font-size:15px;vertical-align:middle}
.fitwhy{display:grid;gap:10px;margin:0 0 var(--s3)}
.fitwhy div{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink2);line-height:1.5}
.fitwhy .ok{color:var(--gold);font-weight:700}
.fitwhy a{color:var(--gold)}
.fitchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 var(--s2)}
.fitchips .lab{margin:0 6px 0 0}
.chip{border:1px solid var(--gold);border-radius:999px;padding:6px 12px;font-size:13.5px;
  color:var(--ink);background:rgba(255,210,0,.08)}
.fitfine{margin:0;font-size:13.5px;color:var(--ink3);line-height:1.5}
/* Commercial line (preview 2026-10-28, COMMERCIAL-PLAN.md §6; not live). Shown only when
   "Commercial and warehouse" is among the jobs he takes. */
.fitcom{margin:0 0 var(--s2);padding:14px 16px;border-left:3px solid var(--gold);
  background:rgba(255,210,0,.06);border-radius:0 8px 8px 0;color:var(--ink2);line-height:1.5}
.fitcom b{display:block;color:var(--ink);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.fitalts{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.fitalts{grid-template-columns:1fr 1fr}}
.fitalt{display:block;width:100%;text-align:left;font:inherit;color:var(--ink2);cursor:pointer;
  background-color:rgba(6,8,10,.5);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rs);padding:16px;min-height:44px;font-size:14.5px;line-height:1.45}
.fitalt:hover{border-color:rgba(255,255,255,.34)}
.fitalt b{display:block;color:var(--ink);font-family:var(--disp);font-size:16.5px;margin-bottom:4px}
.fitalt b .x{color:var(--gold)}
.fitalt .pick{display:block;margin-top:8px;color:var(--gold);font-weight:600;font-size:13.5px}
.fitalt:disabled{cursor:not-allowed;opacity:.6}
.fitalt:disabled .pick{color:var(--ink3)}
.fitlinks{margin:var(--s3) 0 0;font-size:14.5px}
.fitlinks a{color:var(--gold)}

/* ------------------------------------------------------------------- the bill
   Rebuilt 2026-09-20. It used to be one list that mixed four different things —
   what comes off the card today, a charge tied to go-live, a "your monthly" that
   changed after the tool trial, and a month-7 drop — with TWO rows both labelled
   "your monthly". Chris read it and could not tell what his bill was.
   It is now a timeline: Today, then each thing in the order it happens, then one
   figure for what the monthly settles at. Every row is label left, amount right,
   so it reads the same at 390px as it does on a laptop. */
.tot{margin-top:var(--s3);background:linear-gradient(180deg,#15191D,#101316);border:1px solid;border-color:var(--edgec);
  border-radius:var(--r);overflow:hidden;font-variant-numeric:tabular-nums;box-shadow:var(--hi),0 30px 60px -40px rgba(0,0,0,.9)}
.bsec{padding:var(--s3) 20px;border-top:1px solid var(--line)}
.bsec:first-child{border-top:0}
@media(min-width:620px){.bsec{padding:var(--s3) var(--s4)}}
.blab{margin:0 0 9px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3)}
.bbig{margin:0;font-family:var(--disp);font-weight:800;color:var(--gold);
  font-size:clamp(30px,7.4vw,38px);letter-spacing:-.03em;line-height:1;text-shadow:0 0 40px rgba(255,210,0,.2)}
.bbig+.brow{margin-top:10px}
.brow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:4px 0;color:var(--ink2);font-size:15px}
.brow b{color:var(--ink);font-weight:600;white-space:nowrap}
.bnote{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink3)}
.bend{background:var(--panel)}
.btot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-top:12px;border-top:1px solid var(--line)}
.bend .brow:first-child+.btot,.bend>.btot:first-child{padding-top:0;border-top:0}
.btot .k{color:var(--ink);font-size:15px;font-weight:600}
.btot .v{font-family:var(--disp);font-weight:800;font-size:clamp(25px,5.8vw,30px);
  letter-spacing:-.028em;color:var(--gold);white-space:nowrap}
.btot .v small{font-family:var(--ui);font-weight:500;font-size:13px;letter-spacing:0;
  color:var(--ink2);margin-left:5px}
.bend .brow+.btot{margin-top:10px}
/* The add-ons. Deliberately the LAST section and deliberately not part of the settled
   monthly above it: they are real order lines, billed separately by JobBring, never with
   the website (QA 2026-09-23, B2; reworked as order lines with card consent 2026-09-23). */
.baddon{border-top:1px solid var(--line2)}

/* ---------------------------------------------------------------- assent -- */
.assent{margin:var(--s4) 0 var(--s2)}
.assent .alines{margin:0 0 14px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:4px 16px}
.assent .alines div{padding:10px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5}
.assent .alines div:first-child{border-top:0}
.assent .alines dt{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 2px}
.assent .alines dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.assent .agree{margin:0 0 12px}
.assent .afine{margin:6px 0 0;font-size:14px;color:var(--ink2)}
.assent .afine a{color:var(--ink2)}

/* ---------------------------------------------------------------- review -- */
.rev{background:linear-gradient(180deg,#15191D,#101316);border:1px solid;border-color:var(--edgec);border-radius:var(--r);overflow:hidden;box-shadow:var(--hi)}
.rev dl{margin:0;display:grid;grid-template-columns:168px 1fr}
@media(max-width:619px){.rev dl{grid-template-columns:1fr}}
.rev dt{padding:14px 20px 14px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);border-top:1px solid var(--line)}
.rev dd{padding:14px 20px;margin:0;font-size:15px;border-top:1px solid var(--line);
  color:var(--ink);overflow-wrap:anywhere}
@media(max-width:619px){
  .rev dd{padding-top:0;border-top:0}
  .rev dt{padding-bottom:2px}
}
.rev dl>:nth-child(1),.rev dl>:nth-child(2){border-top:0}
.rev dd em{color:var(--ink3);font-style:normal}
.rev dd b{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}

/* ============================================================ EASY QUIZ == */
:focus-visible{outline-color:var(--gold)}
.fill{background:var(--gold)}
.step{color:var(--acc)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,210,0,.24)}
[aria-invalid="true"]{border-color:var(--gold)}
.msg.bad{border-left-color:var(--gold)}
.wrap{padding-top:28px}
h1{font-size:clamp(28px,7.4vw,40px)}
.sub{margin-bottom:var(--s3)}

/* the tap cards: one per row on a phone, min 56 px, the whole width is the target */
.cards{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:620px){.cards{grid-template-columns:1fr 1fr}}
.card{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:14px 18px;
  text-align:left;font:inherit;font-size:17.5px;font-weight:600;line-height:1.3;color:var(--ink);
  background-color:rgba(16,19,23,.7);background-image:linear-gradient(180deg,rgba(255,255,255,.035),transparent 60%);
  border:1.5px solid;border-color:var(--edgec);border-radius:var(--rs);box-shadow:var(--hi);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease),transform .08s ease}
.card::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line2);box-sizing:border-box}
[data-multi] .card::before{border-radius:7px}
.card:hover{border-color:rgba(255,255,255,.36)}
.card:active{transform:scale(.99)}
.card[aria-pressed=true]{border-color:var(--gold);background-color:var(--surf2);color:var(--ink);
  box-shadow:var(--hi),0 0 30px -12px var(--gl)}
.card[aria-pressed=true]::before{border-color:var(--gold);background:var(--gold);
  box-shadow:inset 0 0 0 4px #0A0C0E}
[data-multi] .card[aria-pressed=true]::before{box-shadow:none;
  background:var(--gold) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 7.5l2.6 2.6L11 4.6' fill='none' stroke='%230A0C0E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat}
#domyes{margin-top:var(--s3)}
input[type=text],input[type=tel],input[type=email]{font-size:17px;min-height:56px}

/* plan cards: selection in cyan */
.plan[aria-checked=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 36px -12px var(--gl);background-color:var(--surf2)}
.plan[aria-checked=true] .plantag{color:var(--gold)}
.plan[aria-checked=true] .dot{border-color:var(--gold)}
.plan[aria-checked=true] .dot::after{background:var(--gold)}
.plan[aria-checked=true] .planfine{border-top-color:rgba(255,210,0,.26)}
.plan{min-height:56px}

.callme{margin:var(--s3) 0 0;padding:16px 18px;border:1px dashed var(--line2);border-radius:var(--rs);
  display:grid;gap:4px;color:var(--ink2);font-size:15px;line-height:1.5}
.callme b{color:var(--ink);font-family:var(--disp);font-size:16.5px}
.callbtn{justify-self:start;margin-top:8px;display:inline-flex;align-items:center;min-height:48px;
  padding:10px 18px;border:1.5px solid var(--gold);border-radius:var(--rs);color:var(--ink);
  font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.upsell{margin:var(--s3) 0 0}
.upsell .lab{margin-bottom:10px}
.fitalt .fitfine{display:block;margin-top:8px;font-size:12.5px;color:var(--ink3)}
.fitalt .pick{color:var(--gold)}

/* the last screen: the answers fold away, the bill stays */
details.rev{margin:var(--s3) 0 0}
details.rev summary{cursor:pointer;padding:16px 20px;font-weight:600;color:var(--ink);min-height:56px;
  display:flex;align-items:center;list-style:none}
details.rev summary::-webkit-details-marker{display:none}
details.rev summary::after{content:"+";margin-left:auto;color:var(--gold);font-size:20px}
details.rev[open] summary::after{content:"\2212"}
details.rev dl{border-top:1px solid var(--line)}
.agree input{width:22px;height:22px;accent-color:var(--gold)}
.agree{padding:6px 0;margin-top:var(--s2)}

/* the bottom bar: Back is a link, Next is cyan-outlined, the final button is gold */
.nav .btn{min-height:52px;background:transparent;color:var(--ink);border:1.5px solid var(--gold);box-shadow:none;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.nav .btn:hover{background:rgba(255,210,0,.12);box-shadow:0 0 26px -10px var(--gl)}
.nav .btn.final{background:var(--goldgrad);color:#0A0C0E;border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 30px -14px var(--gl),0 14px 28px -14px rgba(0,0,0,1)}
.nav .btn.final:hover{background:var(--goldgrad-hi);border-color:var(--gold);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px var(--gl),0 16px 50px -8px rgba(255,210,0,.7)}
@media(prefers-reduced-motion:reduce){.nav .btn{transition:none}.nav .btn.final:hover{transform:none}}
.nav .btn{flex:1;max-width:360px}
.back{text-decoration:underline;text-underline-offset:3px;min-height:48px}

/* add to your plan (11): ticked add-ons in cyan, same as every other selection */
.addons .tools:first-child{border-top:0}
.tool{min-height:56px;background-color:rgba(16,19,23,.7);border-color:var(--edgec);box-shadow:var(--hi)}
.tool[aria-pressed=true]{border-color:var(--gold);background-color:var(--surf2)}
.tool[aria-pressed=true] .tick{background:var(--gold);border-color:var(--gold)}
.tname small.fromans{color:var(--gold)}

.recchip{display:inline-block;margin-top:6px;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:0;padding:4px 10px;border:1px solid var(--gold);border-radius:999px;color:var(--ink);background:rgba(255,210,0,.08)}