/* /detail-build/ — the Clean / Correct / Protect builder (STAGING DEMO, sections/detail-ccp-demo.html).
   Round 5 (docs/detail-builder-demo/round5-ui-motion-spec.md): a dark detailing bay under a light bar. Near-black
   surfaces, one cyan light on what you chose, lanes coded by a thin colored edge, not by boxes. Mobile first;
   760 tablet · 1100 desktop (three lanes) · 1680 ultra-wide (three lanes + a summary rail). Scoped to .ccp. */
.ccp{
  /* surfaces: 4 steps of near-black, raised = lighter. No borders by default. */
  --s0:#050508;--s1:#0d0d13;--s2:#14141c;--s3:#1c1c26;
  --hair:rgba(255,255,255,.07);--hair2:rgba(255,255,255,.14);
  /* text */
  --t1:#f2f2f7;--t2:#a3a3b5;--t3:#6e6e80;
  /* brand + lane hues */
  --cy:#00cfff;--cy-08:rgba(0,207,255,.08);--cy-16:rgba(0,207,255,.16);--cy-40:rgba(0,207,255,.40);
  --clean:#00cfff;--correct:#ff7a45;--protect:#d4b37a;--tint:#a78bfa;
  --gold:#d4b37a;--gold-hi:#f3dca6;
  --ok:#2bd576;--err:#ff5a5f;--warn:#ffc53d;
  /* type */
  --f-d:'Bebas Neue',sans-serif;--f-b:'DM Sans',system-ui,sans-serif;
  --fs-hero:clamp(40px,4.2vw + 18px,72px);--fs-lane:clamp(30px,1.6vw + 18px,44px);--fs-price:clamp(30px,1.2vw + 22px,40px);
  --track-kicker:.16em;
  /* radii, elevation */
  --r-row:14px;--r-panel:22px;--r-pill:999px;
  --e-row:inset 0 1px 0 rgba(255,255,255,.04);
  --e-lift:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -18px rgba(0,0,0,.8);
  --e-on:0 0 0 1px var(--cy-40),0 0 24px -6px var(--cy-40);
  --e-dock:0 -1px 0 var(--hair) inset,0 -24px 48px -12px rgba(0,0,0,.9);
  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.45,.64,1);
  --d-tap:120ms;--d-state:200ms;--d-move:320ms;--d-screen:420ms;
  --dock-h:0px;
  /* full bleed out of the page's .container: the stage sets its own width per step */
  position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:100svh;background:var(--s0);
  color:var(--t1);font-family:var(--f-b);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
}
/* The page wraps us in overflow:hidden boxes, which would make the top bar, lane headers and rail never stick. */
body:has(.ccp){overflow-y:visible !important;overflow-x:clip !important;background:#050508}
.ghl-section-scope:has(.ccp){overflow:visible;overflow-x:clip}
.bld-builder:has(.ccp),.bld-builder:has(.ccp) .container{overflow:visible}
.ccp *{box-sizing:border-box}
.ccp button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.ccp svg{flex:none}
.ccp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ccp :focus-visible{outline:2px solid var(--cy);outline-offset:2px}

/* ── global chrome: top bar with the progress line on its edge, then the demo strip ── */
.ccp-top{position:sticky;top:var(--top-off,0px);z-index:50;background:rgba(5,5,8,.85);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.ccp-top__in{display:grid;grid-template-columns:44px 1fr auto;align-items:center;height:56px;padding:0 8px 0 4px;max-width:1720px;margin:0 auto}
.ccp-top__mark{text-align:center;font-family:var(--f-d);font-size:22px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccp-top__reset{border:0;background:none;color:var(--t2);font-size:13px;padding:10px 8px}
.ccp-iconbtn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-pill);background:none;color:var(--t1)}
.ccp-iconbtn svg{width:22px;height:22px}
.ccp-iconbtn[disabled]{opacity:.25;cursor:default}
.ccp-iconbtn[hidden]{display:grid;visibility:hidden}
.ccp-progress{height:2px;background:var(--hair)}
.ccp-progress i{display:block;height:100%;background:var(--cy);box-shadow:0 0 12px var(--cy-40);transform-origin:left;transform:scaleX(0);transition:transform var(--d-screen) var(--ease-out)}
.ccp-ribbon{position:relative;z-index:1;height:28px;display:flex;align-items:center;padding:0 16px;background:var(--s1);border-left:2px solid var(--warn);color:var(--t2);font-size:12px;white-space:nowrap;overflow:hidden}
.ccp-ribbon b{color:var(--warn);margin-right:4px}

.ccp-stage{padding:24px 16px calc(var(--dock-h) + 32px);max-width:720px;margin:0 auto}
.ccp--wide .ccp-stage{max-width:720px}
.ccp-loading,.ccp-noscript{padding:60px 0;text-align:center;color:var(--t2)}
.ccp-narrow{max-width:560px;margin:0 auto}

/* screen entrance (4.1): new steps only, never a re-render of the same step */
.ccp-screen.is-new{animation:ccpIn var(--d-screen) var(--ease-out) both 60ms}
@keyframes ccpIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── type ── */
.ccp-head{margin-bottom:28px}
.ccp-kicker{font-size:11px;letter-spacing:var(--track-kicker);text-transform:uppercase;color:var(--cy);font-weight:700;margin:0 0 10px}
.ccp-kicker.gold{color:var(--gold)}
.ccp-h1{font-family:var(--f-d);font-weight:400;font-size:var(--fs-hero);line-height:.95;letter-spacing:.01em;margin:0 0 12px;text-wrap:balance}
.ccp-h1 em{font-style:normal;color:var(--cy)}
.ccp-sub{color:var(--t2);font-size:17px;line-height:1.5;margin:0;max-width:62ch}
.ccp-sub b{color:var(--t1)}
.ccp-fine{font-size:13px;line-height:1.5;color:var(--t3);margin:12px 0 0}
.ccp-welcome{display:inline-flex;align-items:center;gap:8px;color:var(--ok);font-weight:600;margin:0 0 14px}
.ccp-welcome svg{width:18px;height:18px}

/* ── buttons ── */
.ccp-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:0 24px;border:0;border-radius:var(--r-pill);
  background:var(--cy);color:#03141a !important;font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 24px -8px var(--cy-40);transition:transform var(--d-tap) var(--ease-out),background var(--d-state),color var(--d-state),box-shadow var(--d-state)}
.ccp-cta svg{width:18px;height:18px}
.ccp-cta:active{transform:scale(.97)}
.ccp-cta[disabled]{background:var(--s3);color:var(--t3) !important;box-shadow:none;cursor:default}
.ccp-cta.lg{min-height:56px}
.ccp-ghost{width:100%;min-height:44px;margin-top:12px;border-radius:var(--r-pill);border:1px solid var(--hair2);background:transparent;font-weight:600}
.ccp-linkbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--t2);padding:6px 0;font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair2)}
.ccp-linkbtn svg{width:16px;height:16px}
.ccp-linkbtn.center{display:flex;margin:10px auto 0}
.spin{animation:ccpSpin .7s linear infinite}
@keyframes ccpSpin{to{transform:rotate(360deg)}}

/* ── hero ── */
.ccp-hero{position:relative;overflow:hidden;max-width:720px;margin:8px auto 0;padding:8px 0 0}
.ccp-hero__glow{position:absolute;inset:-40% -30% auto auto;width:520px;height:520px;background:radial-gradient(closest-side,rgba(0,207,255,.16),transparent);pointer-events:none}
.ccp-hero__car{position:absolute;right:-30px;top:30px;width:220px;height:220px;opacity:.08;color:var(--cy)}
.ccp-h1--hero{max-width:12ch}
.ccp-three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:28px 0}
.ccp-three>div{display:flex;flex-direction:column;gap:2px;padding:14px 12px;border-radius:var(--r-row);background:var(--s2);box-shadow:var(--e-row);border-top:3px solid var(--k)}
.ccp-three b{font-family:var(--f-d);font-weight:400;font-size:26px;letter-spacing:.03em;margin-top:8px}
.ccp-three small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-weight:700}
.ccp-three span:last-child{font-size:13px;color:var(--t2);line-height:1.35;margin-top:4px}
.ccp-trust{display:flex;gap:8px 16px;flex-wrap:wrap;color:var(--t2);font-size:13px;margin-top:16px}
.ccp-trust span{display:inline-flex;align-items:center;gap:6px}
.ccp-trust svg{width:15px;height:15px;color:var(--ok)}
.k-clean{--k:var(--clean)}.k-correct{--k:var(--correct)}.k-protect{--k:var(--protect)}.k-tint{--k:var(--tint)}
.ccp-lane-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--s3);color:var(--k,var(--cy))}
.ccp-lane-ic svg{width:26px;height:26px}
.ccp-three .ccp-lane-ic{width:36px;height:36px}
.ccp-three .ccp-lane-ic svg{width:20px;height:20px}

/* ── forms ── */
.ccp-field{display:block;margin-bottom:14px}
.ccp-field span{display:block;font-size:13px;color:var(--t2);margin-bottom:6px;font-weight:600}
.ccp-input{width:100%;min-height:56px;border-radius:var(--r-row);border:1px solid var(--hair2);background:var(--s2);color:var(--t1);
  font:inherit;font-size:17px;padding:0 16px;outline:none;transition:border-color var(--d-state),box-shadow var(--d-state)}
.ccp-input:focus{border-color:var(--cy);box-shadow:var(--e-on)}
.ccp-code{letter-spacing:.5em;text-align:center;font-size:28px;font-weight:700}
.ccp-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--t2);line-height:1.45;margin:4px 0 20px}
.ccp-consent input{width:20px;height:20px;margin-top:1px;accent-color:var(--cy)}
.ccp-demo-code{padding:14px 16px;border-radius:var(--r-row);background:var(--s1);border-left:2px solid var(--warn);color:var(--t2);font-size:14px;margin-bottom:16px}
.ccp-demo-code b{font-size:24px;letter-spacing:.2em;color:var(--t1);margin-left:6px}
/* ── R8-I: the front door (returning sign-in / first-time setup) and "Welcome back". Builder tokens only, so a restyle carries it. ── */
.ccp-door{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:14px 0 0;color:var(--t2);font-size:14px;text-align:center}
.ccp-door svg{width:16px;height:16px;color:var(--ok)}
.ccp-door b{color:var(--t1)}
.ccp-door--new{margin-top:8px;color:var(--t3);font-size:13px}
.ccp-door--col{flex-direction:column;gap:2px}
.ccp-door__in{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--t1)}
.ccp-door__in svg{width:16px;height:16px}
.ccp-resume{padding:18px;border-radius:var(--r-row);background:var(--s2);box-shadow:var(--e-row);border-top:3px solid var(--cy);margin:20px 0 6px}
.ccp-resume .ccp-kicker{margin:0 0 6px}
.ccp-resume__t{font-family:var(--f-d);font-size:28px;letter-spacing:.03em;margin:0 0 4px}
.ccp-resume__s{color:var(--t2);font-size:15px;margin:0 0 4px}
.ccp-resume__s b{color:var(--t1)}
.ccp-resume .ccp-note{margin:10px 0 0}
.ccp-resume .ccp-cta{margin-top:14px}
.ccp-back__h{font-family:var(--f-d);font-weight:400;font-size:26px;letter-spacing:.03em;margin:24px 0 10px}
.ccp-staffbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px;color:var(--t3);font-size:13px}
.ccp-note{font-size:14px;line-height:1.45;color:var(--t2);padding:12px 14px;border-radius:var(--r-row);background:var(--s1);margin:0 0 16px;animation:ccpFade 160ms var(--ease-out)}
.ccp-note.warn{border-left:2px solid var(--warn)}
.ccp-note.err{border-left:2px solid var(--err);color:#ffd0d1}
@keyframes ccpFade{from{opacity:0}}

/* ── choice tiles (3.6) ── */
.ccp-tiles{display:grid;gap:8px}
.ccp-tile{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 16px;text-align:left;border:0;
  border-radius:var(--r-row);background:var(--s2);box-shadow:var(--e-row);transition:transform var(--d-tap) var(--ease-out),box-shadow var(--d-state),background var(--d-state)}
.ccp-tile:active{transform:scale(.985)}
@media (hover:hover){.ccp-tile:hover{background:var(--s3)}}
.ccp-tile.on{box-shadow:var(--e-on)}
.ccp-tile__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--s3);color:var(--t2);transition:background var(--d-state),color var(--d-state)}
.ccp-tile__ic svg{width:26px;height:26px}
.ccp-tile.on .ccp-tile__ic{background:var(--cy-16);color:var(--cy)}
.ccp-tile__t{flex:1;font-weight:600;font-size:17px;line-height:1.3}
.ccp-tile__s{display:block;color:var(--t2);font-size:13px;font-weight:400;margin-top:2px}
.ccp-tile__ok{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cy);color:#03141a;opacity:0;transform:scale(.6);transition:opacity var(--d-state),transform var(--d-state) var(--ease-spring)}
.ccp-tile__ok svg{width:14px;height:14px;stroke-width:3}
.ccp-tile.on .ccp-tile__ok{opacity:1;transform:none}
.ccp-tiles.two .ccp-tile{min-height:72px}

/* questions */
.ccp-q__meta{display:flex;align-items:center;justify-content:space-between;color:var(--t2);font-size:13px;margin-bottom:18px;font-variant-numeric:tabular-nums}
.ccp-q__side{padding:4px 10px;border-radius:var(--r-pill);background:var(--cy-08);color:var(--cy);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ccp-q__ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--s2);color:var(--cy);margin-bottom:16px}
.ccp-q__ic svg{width:30px;height:30px}
.ccp-qh{font-weight:700;font-size:24px;line-height:1.25;margin:0 0 10px;text-wrap:balance}
.ccp-q .ccp-sub{font-size:15px;margin-bottom:6px}
.ccp-q .ccp-tiles{margin-top:18px}
.ccp-writing{text-align:center;padding-top:40px}
.ccp-writing .ccp-q__ic{margin:0 auto 16px}
.ccp-writing .ccp-h1{font-size:clamp(30px,6vw,44px)}

/* ══ THE PROPOSAL ══════════════════════════════════════════════════════════ */
.ccp-quick{display:flex;flex-wrap:wrap;gap:8px;margin:-12px 0 24px}
.ccp-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--hair2);background:transparent;color:var(--t2);font-size:14px;font-weight:600}
.ccp-chip svg{width:16px;height:16px}
.ccp-chip.on{border-color:var(--cy-40);color:var(--cy)}

/* phone: the sticky lane switcher */
.ccp-switch3{position:sticky;top:calc(58px + var(--top-off,0px));z-index:20;display:flex;gap:6px;margin:0 -16px 8px;padding:8px 16px;background:rgba(5,5,8,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ccp-switch3 a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:var(--r-pill);background:var(--s2);color:var(--t2);font-size:14px;font-weight:600;text-decoration:none;transition:background var(--d-state),color var(--d-state)}
.ccp-switch3 a svg{width:16px;height:16px;color:var(--k)}
.ccp-switch3 a.on{background:var(--s3);color:var(--t1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 45%,transparent)}

/* lanes: not boxed on a phone — a 3 px hue edge, then the header, then rows */
.ccp-lanes{display:grid;gap:40px}
.ccp-lane{position:relative;padding-top:20px;scroll-margin-top:130px}
.ccp-lane:before{content:'';position:absolute;inset:0 -16px auto;height:3px;background:var(--k);opacity:.9}
.ccp-lane__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.ccp-lane__head .ccp-lane-ic{color:var(--k)}
.ccp-lane__head h2{flex:1;margin:0;font-family:var(--f-d);font-weight:400;font-size:var(--fs-lane);letter-spacing:.03em;line-height:1}
.ccp-lane__sub{font-size:15px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums}
.ccp-lane__lede{font-size:15px;line-height:1.5;color:var(--t2);margin:0 0 18px}
.ccp-group{display:grid;gap:8px;margin-bottom:24px}
.ccp-group__t{font-size:11px;letter-spacing:var(--track-kicker);text-transform:uppercase;color:var(--t3);font-weight:700;margin:0 0 2px}
.ccp-side-h{font-size:13px;font-weight:700;color:var(--t1);margin:6px 0 10px;letter-spacing:.04em}

/* the line row (3.1) */
.ccp-row{border-radius:var(--r-row);background:var(--s2);box-shadow:var(--e-row);transition:background var(--d-state),box-shadow var(--d-state),opacity var(--d-state)}
.ccp-row__hit{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:start;width:100%;padding:14px 16px;border:0;background:none;text-align:left;border-radius:inherit;transition:transform var(--d-tap) var(--ease-out)}
.ccp-row__hit:active:not([disabled]){transform:scale(.985)}
@media (hover:hover){.ccp-row:not(.is-on):not(.is-locked):hover{background:var(--s3)}}
.ccp-row.is-on:not(.is-locked){box-shadow:0 0 0 1px color-mix(in srgb,var(--k) 45%,transparent),var(--e-row)}
.ccp-row.is-removed{background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair2);border:0;outline:1px dashed var(--hair2);outline-offset:-1px}
.ccp-row.is-disabled{opacity:.4}
.ccp-cb{display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--hair2);color:#0a0a0f;transition:background var(--d-state),box-shadow var(--d-state),transform var(--d-state) var(--ease-spring)}
.ccp-row__hit[role=radio] .ccp-cb{border-radius:50%}
.ccp-cb svg{width:15px;height:15px}
.ccp-tick path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 220ms var(--ease-out)}
.ccp-row.is-on .ccp-cb{background:var(--k);box-shadow:none}
.ccp-row.is-on .ccp-tick path{stroke-dashoffset:0}
.ccp-row.is-locked .ccp-cb{background:var(--k);box-shadow:none}
.ccp-row.is-locked .ccp-cb svg{width:13px;height:13px;stroke-width:2.2}
.ccp-row.is-nudge .ccp-cb{animation:ccpNudge 200ms}
@keyframes ccpNudge{50%{filter:brightness(1.6)}}
.ccp-row.is-pop .ccp-cb{animation:ccpCheck 200ms var(--ease-spring)}
@keyframes ccpCheck{from{transform:scale(.6)}}
.ccp-row__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ccp-row__name{font-weight:600;font-size:17px;line-height:1.3;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ccp-row__why{font-size:15px;line-height:1.45;color:var(--t2)}
.ccp-row__why i{color:var(--t2)}
.ccp-row__prep{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--t2)}
.ccp-row__prep svg{width:14px;height:14px;color:var(--k)}
.ccp-row__price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ccp-row__price b{font-size:17px;font-weight:700;color:var(--t1);transition:color var(--d-state)}
.ccp-row:not(.is-on) .ccp-row__price b{color:var(--t2)}
.ccp-row.is-removed .ccp-row__price b{color:var(--t3)}
.ccp-row__price s{font-size:13px;color:var(--t3)}
.ccp-row__price small{font-size:13px;color:var(--t3)}
.ccp-row__extra{padding:0 16px 14px 52px;display:grid;gap:10px}
.ccp-row__caveat{margin:0;font-size:13px;line-height:1.45;color:var(--t3)}
.ccp-row__lost{margin:0;font-size:13px;line-height:1.45;color:var(--t3);animation:ccpSlide 240ms var(--ease-out)}
.ccp-row__lost .ccp-linkbtn{font-size:13px;color:var(--t1);padding:0;margin-left:4px}
.ccp-row__lost.solo{margin:-12px 0 20px}
@keyframes ccpSlide{from{opacity:0;transform:translateX(12px)}}
.ccp-info summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;font-size:13px;color:var(--t3);min-height:24px}
.ccp-info summary::-webkit-details-marker{display:none}
.ccp-info summary svg{width:16px;height:16px}
.ccp-info[open] summary{color:var(--t2)}
.ccp-info p,.ccp-info dl{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--t2)}
.ccp-info dt{color:var(--t1);font-weight:600;margin-top:6px}.ccp-info dd{margin:0}

/* badges (3.2) */
.ccp-badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:var(--r-pill);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ccp-badge svg{width:11px;height:11px}
.ccp-badge.rec{background:var(--s3);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 50%,transparent);color:var(--k)}
.ccp-badge.rec svg{fill:currentColor;stroke:none}
.ccp-badge.be{background:var(--s1);color:var(--t3);box-shadow:inset 0 0 0 1px var(--hair2);letter-spacing:.04em}
.ccp-badge.pop{background:var(--gold);color:#1a1408}

/* the grade selector: a segmented control with a sliding indicator */
.ccp-seg{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);height:36px;padding:3px;border-radius:var(--r-pill);background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair)}
.ccp-seg__ind{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n));border-radius:var(--r-pill);background:var(--s3);box-shadow:inset 0 0 0 1px var(--hair2);
  transform:translateX(calc(var(--i) * 100%));transition:transform 280ms var(--ease-in-out)}
.ccp-seg button{position:relative;z-index:1;border:0;background:none;color:var(--t2);font-size:13px;font-weight:600;border-radius:var(--r-pill);padding:0 6px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:5px;transition:color var(--d-state)}
.ccp-seg button.on{color:var(--t1)}
.ccp-seg__dot{width:6px;height:6px;border-radius:50%;background:var(--k)}

/* the paint hold, coming soon */
.ccp-hold{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-row);background:var(--s1);border-left:2px solid var(--warn);margin-bottom:24px}
.ccp-hold svg{width:20px;height:20px;color:var(--warn);margin-top:2px}
.ccp-hold p{margin:0;font-size:15px;line-height:1.5;color:var(--t2)}
.ccp-later{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ccp-later span{font-size:13px;color:var(--t3);border:1px dashed var(--hair2);border-radius:var(--r-pill);padding:6px 12px}

/* the Coating Club hero (3.3) */
.ccp-club{position:relative;overflow:hidden;border-radius:var(--r-panel);padding:20px;margin-bottom:24px;background:linear-gradient(160deg,#1d1810 0%,#0f0d09 60%);
  box-shadow:inset 0 0 0 1px rgba(212,179,122,.35);transition:box-shadow 300ms var(--ease-out)}
.ccp-club:after{content:'';position:absolute;inset:0 auto 0 0;width:40%;background:linear-gradient(105deg,transparent,rgba(243,220,166,.14),transparent);transform:translateX(-100%);pointer-events:none}
.ccp-club.is-swept:not(.ccp-upsell):after{animation:ccpSweep 1100ms var(--ease-in-out) 1}
@keyframes ccpSweep{to{transform:translateX(250%)}}
.ccp-club.is-on{box-shadow:inset 0 0 0 1px rgba(212,179,122,.6),0 0 40px -10px rgba(212,179,122,.5)}
.ccp-club__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ccp-club__head>div{flex:1;min-width:0}
.ccp-club__head h3{margin:0;font-family:var(--f-d);font-weight:400;font-size:var(--fs-lane);line-height:1;letter-spacing:.03em;color:var(--gold-hi)}
.ccp-club__head p{margin:4px 0 0;font-size:13px;color:var(--gold)}
.ccp-club__head .ccp-badge{margin-bottom:6px}
.ccp-club__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(212,179,122,.12);color:var(--gold-hi)}
.ccp-club__ic svg{width:26px;height:26px}
.ccp-club.is-pop .ccp-club__ic{animation:ccpCrown 360ms var(--ease-spring)}
@keyframes ccpCrown{50%{transform:scale(1.15)}}
.ccp-stack{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.ccp-stack li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--t2)}
.ccp-stack li b{color:var(--t1);font-weight:600}
.ccp-stack li s{color:var(--t3)}
.ccp-stack svg{width:18px;height:18px;margin-top:2px;color:var(--gold)}
.ccp-club__price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid rgba(212,179,122,.18)}
.ccp-club__price small{display:block;font-size:13px;color:var(--t2)}
.ccp-club__price b{display:block;font-family:var(--f-d);font-weight:400;font-size:var(--fs-price);line-height:1;color:var(--gold-hi);font-variant-numeric:tabular-nums;margin:2px 0}
.ccp-club__later{text-align:right}
.ccp-club__later s{display:block;font-size:20px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums}
.ccp-club__hook{font-size:13px;line-height:1.5;color:var(--t2);margin:0 0 14px}
.ccp-club__math{font-size:13px;color:var(--t3);margin:10px 0 0;text-align:center}
.ccp-club__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:var(--r-pill);border:1px solid var(--gold);background:transparent;color:var(--gold-hi);font-weight:600;font-size:16px;transition:background var(--d-state),color var(--d-state),transform var(--d-tap)}
.ccp-club__btn:active{transform:scale(.97)}
.ccp-club__btn svg{width:18px;height:18px}
.ccp-club.is-on .ccp-club__btn,.ccp-upsell .ccp-club__btn{background:var(--gold);color:#1a1408}
.ccp-club .ccp-info{margin-top:12px}
.ccp-upsell__body{font-size:15px;line-height:1.5;color:var(--t2);margin:0 0 16px}

/* the build visualizer (4.6) */
.ccp-car{display:block}
.ccp-car [data-zone]{fill:transparent;stroke:var(--hair2);stroke-width:1.2;transition:fill 400ms var(--ease-out),stroke 400ms var(--ease-out)}
.ccp-car .z-clean{fill:rgba(0,207,255,.22);stroke:var(--clean)}
.ccp-car .z-correct{fill:rgba(255,122,69,.22);stroke:var(--correct)}
.ccp-car .z-protect{fill:rgba(212,179,122,.22);stroke:var(--protect)}
.ccp-car .z-tint{fill:rgba(167,139,250,.24);stroke:var(--tint)}
.ccp-car [data-zone=trim].z-correct,.ccp-car [data-zone=trim].z-clean,.ccp-car [data-zone=trim].z-protect{fill:none}
.ccp-car__glide{stroke:var(--gold-hi);stroke-width:1.6;stroke-dasharray:.12 1;stroke-dashoffset:.12;animation:ccpGlide 4s var(--ease-in-out) 1 forwards}
@keyframes ccpGlide{to{stroke-dashoffset:-1}}
.ccp-car.sm{display:none;width:120px;height:48px}
.ccp-car.lg{width:100%;height:auto;max-height:160px}
.ccp-carpic{margin:0;flex:none}
/* Round 5: the Tint lane */
.ccp-tintadd{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:14px 16px;border:0;border-radius:var(--r-panel);background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair);color:var(--t1);text-align:left;font:inherit;cursor:pointer}
.ccp-tintadd svg{width:22px;height:22px;flex:none;color:var(--tint)}
.ccp-tintadd span{display:flex;flex-direction:column;flex:1;gap:2px}.ccp-tintadd small{color:var(--t3);font-size:13px}
.ccp-tintadd__ok{flex:none !important;opacity:0}.ccp-tintadd.on{box-shadow:inset 0 0 0 1.5px var(--tint)}.ccp-tintadd.on .ccp-tintadd__ok{opacity:1;color:var(--tint)}
.ccp-tint__add{display:inline-flex;align-items:center;gap:8px;width:auto}
.ccp-tint__add svg{width:18px;height:18px;color:var(--tint)}
.ccp-shade{margin:0 0 12px}.ccp-shade__t{margin:0 0 6px;font-size:13px;color:var(--t2)}
.ccp-shade__row{display:flex;flex-wrap:wrap;gap:6px}
.ccp-shade__o{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:999px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair);color:var(--t2);font:inherit;font-size:13.5px;cursor:pointer}
.ccp-shade__o i{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,calc(var(--vlt) / 100)),rgba(255,255,255,calc(var(--vlt) / 160)));box-shadow:0 0 0 1px var(--hair2)}
.ccp-shade__o.on{color:var(--t1);box-shadow:inset 0 0 0 1.5px var(--tint)}
.ccp-law{margin:6px 0 10px}

.ccp-carpic img{display:block;width:100%;object-fit:cover;border-radius:10px;background:var(--s2)}
.ccp-carpic figcaption{font-size:11px;line-height:1.3;color:var(--t3);margin-top:4px}
.ccp-carpic figcaption b{color:var(--t1);font-weight:600}
.ccp-carpic.sm{display:none;width:120px}
.ccp-carpic.sm img{height:60px}
.ccp-carpic.lg img{aspect-ratio:16/9;max-height:180px}
.ccp-carpic.lg figcaption{font-size:12.5px;margin-top:8px}

/* ── the dock (base → 1679): one row, total left, CTA right ── */
.ccp-dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px max(12px,env(safe-area-inset-bottom));
  background:rgba(28,28,38,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--e-dock)}
.ccp-dock__in{max-width:720px;margin:0 auto}
.ccp-dock__row{display:flex;align-items:center;gap:12px}
.ccp-dock__money{position:relative;flex:1;min-width:0}
.ccp-dock__total{font-family:var(--f-d);font-size:var(--fs-price);line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ccp-dock__mo{font-size:13px;color:var(--gold);margin-top:1px}
.ccp-dock__meta{font-size:13px;color:var(--t3);margin-top:2px}
.ccp-dock__mid{display:none}
.ccp-dock .ccp-cta{width:auto;min-width:168px}
.ccp-dock__why{margin:0 0 10px;font-size:13px;color:#ffd0d1;line-height:1.4}
.ccp-dock__chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--t2)}
.ccp-dock__chip svg{width:12px;height:12px}
.ccp-dock__chip.rec{color:var(--cy)}
.ccp-dock__chip.rec svg{fill:currentColor;stroke:none}
.ccp-dock__pay{margin:4px 0 0;font-size:12px;color:var(--t3)}
.ccp-value{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.ccp-value span{color:var(--t3)}
.ccp-value b{color:var(--t1);font-weight:600}
.ccp-value em{font-style:normal;font-size:13px;font-weight:700;color:var(--ok);background:rgba(43,213,118,.12);border-radius:var(--r-pill);padding:3px 10px;animation:ccpBadge 240ms var(--ease-spring)}
@keyframes ccpBadge{from{opacity:0;transform:scale(.9)}}
.ccp-ghost-d{position:absolute;left:0;top:-14px;font-size:13px;font-weight:700;color:var(--k,var(--cy));pointer-events:none;animation:ccpGhostUp 500ms var(--ease-out) forwards}
.ccp-ghost-d.down{top:auto;bottom:-6px;animation-name:ccpGhostDown}
@keyframes ccpGhostUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
@keyframes ccpGhostDown{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}}
/* agreement: the phone CTA reads "Agree (2 of 3)" */
.ccp-cta--dock{min-width:190px}

.ccp-toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + 12px);z-index:60;transform:translate(-50%,8px);max-width:calc(100vw - 32px);padding:10px 18px;border-radius:var(--r-pill);background:var(--s3);color:var(--t1);font-size:14px;box-shadow:var(--e-lift);opacity:0;pointer-events:none;transition:opacity var(--d-state),transform var(--d-state) var(--ease-out)}
.ccp-toast.on{opacity:1;transform:translate(-50%,0)}
.ccp-rail{display:none}

/* ── calendar ── */
.ccp-split{display:grid;gap:24px}
.ccp-cals{display:grid}
.ccp-cal{display:none}
.ccp-cal.on{display:block;animation:ccpIn 280ms var(--ease-in-out)}
.ccp-cal__m{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:17px;margin-bottom:10px}
.ccp-cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ccp-cal__dow{text-align:center;font-size:11px;letter-spacing:.1em;color:var(--t3);font-weight:700;padding:4px 0}
.ccp-cal__d{position:relative;aspect-ratio:1;min-height:44px;border:0;border-radius:var(--r-row);background:none;color:var(--t3);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.ccp-cal__d.today{box-shadow:inset 0 0 0 1px var(--hair2)}
.ccp-cal__d.open{background:var(--s3);color:var(--t1);box-shadow:inset 0 0 0 1px var(--hair)}
@media (hover:hover){.ccp-cal__d.open:hover{background:var(--s3)}}
.ccp-cal__d i{position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%}
.ccp-cal__d i.ok,.ccp-legend i.ok{background:var(--ok)}.ccp-cal__d i.few,.ccp-legend i.few{background:var(--warn)}
.ccp-cal__d.on{background:var(--cy);color:#03141a;box-shadow:var(--e-on);animation:ccpCheck 200ms var(--ease-spring)}
.ccp-cal__d.on i{background:#03141a}
.ccp-cal__d[disabled]{cursor:default}
.ccp-legend{display:flex;align-items:center;gap:6px 14px;font-size:13px;color:var(--t3);margin:12px 0 0}
.ccp-legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:-8px}
.ccp-date{font-family:var(--f-d);font-weight:400;font-size:var(--fs-lane);line-height:1;letter-spacing:.03em;margin:0 0 8px;text-transform:uppercase}
.ccp-split__side .ccp-sub{font-size:15px;margin-bottom:16px}
.ccp-times{display:flex;flex-wrap:wrap;gap:8px}
.ccp-time{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-radius:var(--r-pill);background:var(--s2);box-shadow:var(--e-row);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;animation:ccpTime 300ms var(--ease-out) both var(--d)}
.ccp-time svg{width:16px;height:16px;color:var(--t3)}
.ccp-time.on{background:var(--cy);color:#03141a;box-shadow:var(--e-on)}
.ccp-time.on svg{color:#03141a}
@keyframes ccpTime{from{opacity:0;transform:translateY(6px)}}
/* ── R6-C: two lanes. One visit or each as soon as possible, then the times ── */
.ccp-vmodes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));max-width:860px}
.ccp-vmode{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:22px 20px 20px;border:0;border-radius:var(--r-row);background:var(--s2);box-shadow:var(--e-row);color:var(--t1);transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
@media (hover:hover){.ccp-vmode:not([disabled]):hover{transform:translateY(-2px)}}
.ccp-vmode:active:not([disabled]){transform:scale(.98)}
.ccp-vmode.is-rec{box-shadow:inset 0 0 0 2px var(--cy),var(--e-row)}
.ccp-vmode[disabled]{opacity:.55;cursor:default}
.ccp-vmode__badge{position:absolute;top:-10px;right:16px;padding:4px 10px;border-radius:var(--r-pill);background:var(--cy);color:#03141a;font-size:12px;font-weight:700;letter-spacing:.02em}
.ccp-vmode__ic svg{width:26px;height:26px;color:var(--cy)}
.ccp-vmode__t{font-size:20px;font-weight:700;line-height:1.2}
.ccp-vmode__d{color:var(--t2);font-size:15px;line-height:1.45}
.ccp-vmode__when{margin-top:6px;padding-top:12px;border-top:1px solid var(--hair);width:100%;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.ccp-vmode__when small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:2px}
.ccp-vsteps{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:560px;margin:0 0 16px}
.ccp-vstep{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:10px 14px;border:0;border-radius:var(--r-row);background:var(--s1);color:var(--t2);text-align:left}
.ccp-vstep small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.ccp-vstep b{font-size:15px;font-variant-numeric:tabular-nums}
.ccp-vstep.done b{color:var(--t1)}
.ccp-vstep.on{box-shadow:inset 0 0 0 2px var(--cy);color:var(--t1)}
.ccp-times--win{flex-direction:column}
.ccp-time--win{justify-content:flex-start;min-height:60px;border-radius:var(--r-row);text-align:left}
.ccp-time--win span{display:flex;flex-direction:column;gap:2px}
.ccp-time--win small{font-size:12.5px;font-weight:500;color:var(--t3)}
.ccp-time--win.on small{color:#03141a;opacity:.8}
@media (prefers-reduced-motion:reduce){.ccp-vmode{transition:none}}
.ccp-mini{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:20px;padding:14px 16px;border-radius:var(--r-row);background:var(--s1)}
.ccp-mini span{flex:1;display:inline-flex;align-items:center;gap:8px;color:var(--t2);font-size:14px}
.ccp-mini span svg{width:18px;height:18px;color:var(--cy)}
.ccp-mini b{font-family:var(--f-d);font-weight:400;font-size:28px;font-variant-numeric:tabular-nums}
.ccp-mini small{width:100%;font-size:13px;color:var(--t3)}
.ccp-mini.big{margin-top:0}

/* ── agreement: accordion parts ── */
.ccp-part{border-radius:var(--r-row);background:var(--s2);box-shadow:var(--e-row);margin-bottom:8px;transition:box-shadow var(--d-state)}
.ccp-part.is-on{box-shadow:inset 2px 0 0 rgba(43,213,118,.6),var(--e-row)}
.ccp-part__head{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px}
.ccp-part__toggle{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:none;text-align:left;padding:6px;border-radius:12px}
.ccp-part__toggle>span:nth-child(2){flex:1;min-width:0}
.ccp-part__toggle b{display:block;font-size:16px;font-weight:600}
.ccp-part__toggle small{display:block;font-size:13px;color:var(--t2);margin-top:2px}
.ccp-part__toggle .chev{width:18px;height:18px;color:var(--t3);transition:transform var(--d-move) var(--ease-in-out)}
.ccp-part.is-open .chev{transform:rotate(180deg)}
.ccp-part__body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-move) var(--ease-in-out)}
.ccp-part.is-open .ccp-part__body-wrap{grid-template-rows:1fr}
.ccp-part__inner{overflow:hidden;padding:0 18px}
.ccp-part.is-open .ccp-part__inner{padding-bottom:18px}
.ccp-part__intro{font-size:15px;line-height:1.5;color:var(--t1);margin:0 0 12px}
.ccp-part__body{font-size:14px;line-height:1.6;color:var(--t2);margin:0}
.ccp-part__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ccp-part__list li{padding-top:12px;border-top:1px solid var(--hair)}
.ccp-part__list b{display:block;font-size:15px}
.ccp-part__list span{display:block;font-size:14px;line-height:1.5;color:var(--t2);margin:2px 0 4px}
.ccp-agree{display:inline-flex;align-items:center;gap:8px;border:0;background:none;font-size:14px;font-weight:600;color:var(--t2);padding:8px 4px;white-space:nowrap}
.ccp-part.is-on .ccp-agree{color:var(--ok)}
.ccp-switch{position:relative;width:40px;height:24px;border-radius:12px;background:var(--s3);box-shadow:inset 0 0 0 1px var(--hair2);transition:background var(--d-state)}
.ccp-switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--t1);transition:transform var(--d-state) var(--ease-out)}
.ccp-part.is-on .ccp-switch{background:var(--ok);box-shadow:none}
.ccp-part.is-on .ccp-switch i{transform:translateX(16px)}
/* R8-H: the signature is an outlined card with a "Sign here" tag, so it can't read as a little black box on a phone. */
.ccp-signfield{display:block;margin-top:20px;padding:14px 16px 10px;border:2px solid var(--cy-40);border-radius:14px;background:var(--cy-08);
  box-shadow:0 0 0 4px var(--cy-08);transition:border-color var(--d-state),background var(--d-state)}
.ccp-signfield:focus-within{border-color:var(--cy)}
.ccp-signfield.is-signed{border-color:var(--ok);background:rgba(43,213,118,.08);box-shadow:none}
.ccp-signfield__tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cy)}
.ccp-signfield.is-signed .ccp-signfield__tag{color:var(--ok)}
.ccp-signfield__tag svg{width:16px;height:16px}
.ccp-signfield__hint{display:block;font-size:13px;color:var(--t2);margin:4px 0 2px}
.ccp-sign{display:block;width:100%;height:64px;border:0;border-bottom:2px solid var(--t2);border-radius:0;background:none;color:var(--t1);outline:none;padding:0 4px;
  font-family:'Brush Script MT','Segoe Script',cursive;font-size:30px;transition:border-color var(--d-state)}
.ccp-sign::placeholder{color:var(--t3);font-family:var(--f-b);font-size:20px}
.ccp-sign:focus{border-color:var(--cy)}
.ccp-hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--t3);word-break:break-all;margin:8px 0 0}
.ccp-ph{background:rgba(255,197,61,.15);color:var(--warn);border-radius:4px;padding:0 3px}
.ccp-agree-cta{display:none;margin-top:16px}

/* ── confirmation ── */
.ccp-done{text-align:center;margin-bottom:28px}
.ccp-done__tick{display:grid;place-items:center;width:72px;height:72px;margin:8px auto 18px;border-radius:50%;background:rgba(43,213,118,.14);color:var(--ok);animation:ccpPop 480ms var(--ease-spring)}
.ccp-done__tick svg{width:36px;height:36px}
.ccp-done__tick .ccp-tick path{stroke-dashoffset:0;animation:ccpDraw 300ms var(--ease-out) 300ms both}
@keyframes ccpPop{from{transform:scale(.6);opacity:0}}
@keyframes ccpDraw{from{stroke-dashoffset:1}}
.ccp-done .ccp-sub{margin:0 auto}
.ccp-split.done .ccp-split__side:empty{display:none}
.ccp-upsell{margin:0}
.ccp-next,.ccp-sheet{padding:20px;border-radius:var(--r-panel);background:var(--s1);margin-bottom:16px}
/* R8-O: the build's PDF, first on the booked screen */
.ccp-doc{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:var(--r-panel);background:var(--s1);margin-bottom:16px;color:inherit;text-decoration:none;border:1px solid var(--cy)}
.ccp-doc svg{width:24px;height:24px;flex:none;color:var(--cy);margin-top:2px}
.ccp-doc b{display:block;font-size:16px}
.ccp-doc small{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--t2)}
.ccp-doc:hover b,.ccp-doc:focus-visible b{text-decoration:underline}
.ccp-next>div{display:flex;gap:14px;align-items:flex-start;margin-top:14px}
.ccp-next .ccp-lane-ic{width:40px;height:40px;color:var(--cy)}
.ccp-next .ccp-lane-ic svg{width:22px;height:22px}
.ccp-next p{margin:0;font-size:15px;line-height:1.5;color:var(--t2)}
.ccp-next b{color:var(--t1)}
.ccp-sheet__g{margin-top:16px}
.ccp-chiplane{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--k);margin-bottom:6px}
.ccp-chiplane svg{width:15px;height:15px}
.ccp-sheet__l{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:15px;animation:ccpTime 300ms var(--ease-out) both var(--d)}
.ccp-sheet__l span{color:var(--t1)}
.ccp-eng{display:block;font-size:12px;line-height:1.4;color:var(--t3);margin-top:2px}
.ccp-sheet__l b,.ccp-kv b{font-variant-numeric:tabular-nums;white-space:nowrap}
.ccp-kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0 0;font-size:15px}
.ccp-kv span{color:var(--t2)}
.ccp-kv small{color:var(--t3);font-weight:400}
.ccp-signed{font-family:'Brush Script MT','Segoe Script',cursive;font-size:22px;font-weight:400}
.ccp-outbox{padding:16px 20px;border-radius:var(--r-row);background:var(--s1);border-left:2px solid var(--warn);margin-bottom:8px}
.ccp-outbox:empty{display:none}
.ccp-outbox p{font-size:14px;line-height:1.5;color:var(--t2);margin:6px 0 0}

/* ══ ≥760 tablet ══ */
@media (min-width:760px){
  .ccp-stage{padding-top:32px}
  .ccp-dock{padding-left:24px;padding-right:24px}
}

/* ══ ≥1100 desktop: three lanes side by side, a floating dock ══ */
@media (min-width:1100px){
  .ccp--wide .ccp-stage{max-width:1240px;padding-left:32px;padding-right:32px}
  /* the floating dock sits 20px off the bottom: reserve that too, so the last row of every lane clears it */
  .ccp-stage{padding-bottom:calc(var(--dock-h) + 52px)}
  .ccp-switch3{display:none}
  .ccp-lanes{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
  .ccp-lanes>.k-tint{grid-column:1/-1}
  .ccp-lane{padding:24px;border-radius:var(--r-panel);background:var(--s1);overflow:clip;scroll-margin-top:100px}
  .ccp-lane:before{inset:0 0 auto}
  .ccp-lane__head{position:sticky;top:calc(64px + var(--top-off,0px));z-index:2;margin:-8px -8px 14px;padding:8px;border-radius:14px;background:var(--s1)}
  .ccp-head{max-width:820px}
  .ccp-narrow .ccp-tiles.two,.ccp-q .ccp-tiles.two{grid-template-columns:repeat(2,1fr)}
  .ccp-narrow .ccp-tiles:not(.two){grid-template-columns:repeat(2,1fr)}
  .ccp-narrow .ccp-tiles:not(.two) .ccp-tile:last-child:nth-child(odd){grid-column:1/-1}
  /* floating dock: total · value strip · CTA in one row */
  /* rows fade out above the floating dock instead of being cut by its edge */
  .ccp:has(.ccp-dock:not([hidden]))::after{content:'';position:fixed;left:0;right:0;bottom:0;z-index:39;height:calc(var(--dock-h) + 56px);pointer-events:none;
    background:linear-gradient(180deg,rgba(5,5,8,0),rgba(5,5,8,.92) 55%)}
  .ccp-dock{left:50%;right:auto;bottom:20px;width:min(880px,calc(100vw - 48px));transform:translateX(-50%);border-radius:var(--r-panel);padding:14px 16px 14px 22px;box-shadow:var(--e-lift),inset 0 0 0 1px var(--hair)}
  .ccp-dock__in{max-width:none}
  .ccp-dock__money{flex:none}
  .ccp-dock__mid{display:flex;flex:1;flex-direction:column;gap:4px;align-items:flex-start;min-width:0;padding-left:8px}
  .ccp-car.sm,.ccp-carpic.sm{display:block}
  .ccp-split{grid-template-columns:7fr 5fr;gap:40px;align-items:start}
  .ccp-split__side{position:sticky;top:calc(84px + var(--top-off,0px))}
  .ccp-cals{grid-template-columns:repeat(2,1fr);gap:32px}
  .ccp-cal,.ccp-cal.on{display:block;animation:none}
  .ccp-cal__m .ccp-iconbtn{visibility:hidden}
  .ccp-cal__d{min-height:52px}
  .ccp-times{flex-direction:column}
  .ccp-time{min-height:56px;justify-content:flex-start;padding:0 20px}
  .ccp-split.agree .ccp-agree-cta{display:block}
  .ccp[data-step=agree] .ccp-dock,.ccp[data-step=agree]::after{display:none}
  .ccp-split.done{grid-template-columns:7fr 5fr}
  .ccp-split.done .ccp-split__main{grid-row:1;grid-column:1}
  .ccp-split.done .ccp-split__side{grid-column:2}
}

/* ══ ≥1680 ultra-wide (the 34" case): three lanes + the summary rail; the dock steps aside ══ */
@media (min-width:1680px){
  .ccp--wide .ccp-stage{max-width:1720px}
  .ccp--rail .ccp-lanes{grid-template-columns:repeat(3,minmax(320px,1fr)) 380px}
  .ccp--rail .ccp-lanes>.k-tint{grid-column:1/4}
  .ccp--rail .ccp-lanes>.ccp-rail{grid-column:4;grid-row:1/span 2}
  .ccp--rail .ccp-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(72px + var(--top-off,0px));max-height:calc(100svh - 96px - var(--top-off,0px));overflow:hidden;padding:24px;border-radius:var(--r-panel);background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair)}
  .ccp--rail .ccp-dock,.ccp.ccp--rail::after{display:none}
  .ccp-rail__list{display:grid;gap:4px;align-content:start;flex:1 1 auto;min-height:0;overflow:auto}
  .ccp-rail>*{flex:none}.ccp-rail>.ccp-rail__list{flex:1 1 auto}
  .ccp-rail .ccp-car.lg{max-height:120px}
  .ccp-rail__list .ccp-group__t{margin-top:10px}
  .ccp-rail__l{display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:baseline;font-size:15px;color:var(--t2)}
  .ccp-rail__l i{width:8px;height:8px;border-radius:50%;background:var(--k)}
  .ccp-rail__l b{color:var(--t1);font-variant-numeric:tabular-nums}
  .ccp-rail__total{padding-top:12px;border-top:1px solid var(--hair)}
  .ccp-rail__total b{display:block;font-family:var(--f-d);font-weight:400;font-size:var(--fs-price);line-height:1;font-variant-numeric:tabular-nums}
  .ccp-rail__total small{display:block;font-size:13px;color:var(--t3);margin-top:4px}
  .ccp-rail .ccp-value{font-size:14px}
  .ccp-rail .ccp-dock__why{margin:0}
  .ccp--wide[data-step=time] .ccp-stage,.ccp--wide[data-step=agree] .ccp-stage,.ccp--wide[data-step=done] .ccp-stage{max-width:1400px}
}

/* ── the entrance (4.2): lanes stagger in, rows follow, recommended ticks draw. Once per visit. ── */
.ccp-lanes.is-entering .ccp-lane{animation:ccpIn var(--d-screen) var(--ease-out) both var(--d)}
.ccp-lanes.is-entering .ccp-row{animation:ccpIn var(--d-screen) var(--ease-out) both var(--d)}
.ccp-lanes.is-entering .ccp-row.is-on .ccp-tick path{animation:ccpDraw 260ms var(--ease-out) both calc(var(--d) + 300ms)}

/* ── reduced motion (4.11): opacity only, no movement ── */
@media (prefers-reduced-motion:reduce){
  .ccp *,.ccp *:before,.ccp *:after{animation-duration:120ms !important;animation-delay:0ms !important;transition-duration:120ms !important}
  .ccp-screen.is-new,.ccp-lanes.is-entering .ccp-lane,.ccp-lanes.is-entering .ccp-row,.ccp-cal.on,.ccp-time,.ccp-sheet__l{animation-name:ccpFade !important}
  .ccp-club:after,.ccp-car__glide{display:none}
  .ccp-tick path{transition:none}
  .ccp-seg__ind,.ccp-part__body-wrap{transition:none}
  .ccp-ghost-d{animation:ccpFade 1.2s reverse forwards !important}
}

/* v4 M7: the customer notes for the technician, above the signature. */
.ccp-notes{margin-top:16px}
.ccp-notes small{font-weight:400;opacity:.7}
.ccp-notes textarea{resize:vertical;min-height:64px;font:inherit;line-height:1.4}

/* ── v4 M2: the vehicle ── */
.ccp-vehgrid{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.ccp-field span small,.ccp-field span small{font-weight:400;opacity:.7}
select.ccp-input{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--t2) 50%),linear-gradient(135deg,var(--t2) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
select.ccp-input:disabled{opacity:.55}
.ccp-vehmodel .ccp-linkbtn{margin-top:8px}
.ccp-car{margin:6px 0 18px;padding:0;border-radius:var(--r-panel);overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,var(--cy-08),transparent 60%),var(--s1);box-shadow:var(--e-lift)}
.ccp-car__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--s2)}
.ccp-car.is-sil,.ccp-car--art{display:grid;place-items:center;padding:22px 18px 0}
.ccp-art{display:block;width:min(420px,92%);height:auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.ccp-car--art{margin-bottom:20px}
.ccp-car--art figcaption{text-align:center;color:var(--t2);font-size:13.5px}
/* the paint swatches */
.ccp-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.ccp-sw{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:var(--r-row);border:1px solid transparent;background:none;color:var(--t2);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:border-color var(--d-state),background-color var(--d-state)}
.ccp-sw i{display:block;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 -6px 10px rgba(0,0,0,.35),inset 0 4px 8px rgba(255,255,255,.25),0 0 0 1px rgba(255,255,255,.18)}
.ccp-sw__other{background:conic-gradient(#ac1620,#dcb424,#2f5a3a,#1e4c9c,#ac1620)}
.ccp-sw.on{border-color:var(--cy);background:var(--cy-08);color:var(--t1)}
.ccp-sw__name{margin-top:10px}
.ccp-car figcaption{padding:10px 16px 14px;font-size:12.5px;line-height:1.45;color:var(--t3)}
.ccp-car figcaption a{color:var(--t2)}
.ccp-match{grid-template-columns:1fr!important}
.ccp-cq{margin:0 0 18px}
.ccp-cq__q{margin:0 0 8px;font-weight:600;font-size:15.5px;line-height:1.35}
.ccp-cq__seg{display:flex;gap:6px;flex-wrap:wrap}
.ccp-cq__o{flex:1 1 0;min-width:96px;min-height:48px;padding:8px 12px;border-radius:var(--r-row);border:1px solid var(--hair2);background:var(--s2);color:var(--t1);font:inherit;font-size:14.5px;font-weight:600;transition:border-color var(--d-state),background-color var(--d-state),transform var(--d-tap)}
.ccp-cq__o:active{transform:scale(.97)}
.ccp-cq__o.on{border-color:var(--cy);background:var(--cy-08);box-shadow:var(--e-on)}
.ccp-cta:disabled{opacity:.45;cursor:not-allowed}
@media (min-width:760px){.ccp-car__img{aspect-ratio:16/9}}

/* ── v4 M3: the AI's "for your car" line under a recommended row (static copy stays above it) ── */
.ccp-row__ai{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--cy-08);color:var(--t1);font-size:13.5px;line-height:1.45;animation:ccpFade 240ms var(--ease-out)}
.ccp-row__ai svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--cy)}
.ccp-row__ai b{color:var(--cy);font-weight:600}
.ccp-row.is-removed .ccp-row__ai{opacity:.55}
.ccp-club .ccp-row__ai{margin:4px 0 12px}
@media (prefers-reduced-motion:reduce){.ccp-row__ai{animation:none}}

/* ── v4 M4: the stand-in guide, only while the real Buff (mad-pet.js guide mode) is not on the page. It lives on
   <body>, outside .ccp, so it carries its own colors (the builder's tokens are scoped to .ccp). ── */
.ccp-buff{position:fixed;z-index:60;left:16px;bottom:var(--mp-guide-bottom,16px);display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none;font-family:'DM Sans',system-ui,sans-serif;transition:opacity 200ms,bottom 320ms cubic-bezier(.22,1,.36,1)}
.ccp-buff.is-quiet{opacity:0}
.ccp-buff__face{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3a4a,#14141c);box-shadow:0 18px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(0,207,255,.4);color:#00cfff;pointer-events:auto}
.ccp-buff__face svg{width:26px;height:26px}
.ccp-buff__bubble{max-width:min(320px,calc(100vw - 32px));padding:12px 14px;border-radius:16px 16px 16px 4px;background:#1c1c26;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px -12px rgba(0,0,0,.9);color:#f2f2f7;font-size:14px;line-height:1.45;pointer-events:auto;animation:ccpFade 200ms ease-out}
.ccp-buff__bubble[hidden]{display:none}
.ccp-buff__bubble p{margin:0}
.ccp-buff__acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ccp-buff__acts button{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#14141c;color:#f2f2f7;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ccp-buff__acts button:first-child{background:#00cfff;border-color:#00cfff;color:#001018}
@media (prefers-reduced-motion:reduce){.ccp-buff,.ccp-buff__bubble{transition:none;animation:none}}
/* The client portal link next to "Welcome back" (portal C1). */
.ccp-welcome__acct{color:var(--t2);font-weight:500;margin-left:6px;text-decoration:underline}

/* ── Round 3: the interview as a chat with Buff, and the confirm card ── */
.ccp-chat{display:flex;flex-direction:column;gap:10px;padding:4px 0 104px}
.ccp-msg{display:flex;align-items:flex-end;gap:8px;max-width:90%}
.ccp-msg__av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--cy-16);color:var(--cy);flex:none}
.ccp-msg__av svg{width:16px;height:16px}
/* Round 4: the real Buff rides the newest message, sitting where its avatar is. */
.ccp-msg.is-buff .ccp-msg__av{visibility:hidden}
.ccp-msg__b{margin:0;padding:11px 14px;border-radius:18px 18px 18px 6px;background:var(--s2);font-size:16px;line-height:1.4;box-shadow:var(--e-row)}
.ccp-msg__b small{display:block;margin-top:4px;color:var(--t2);font-size:13.5px;line-height:1.4}
.ccp-msg--me{align-self:flex-end;justify-content:flex-end}
.ccp-msg--me .ccp-msg__b{border:0;text-align:left;font-weight:600;color:#00141c;background:var(--cy);border-radius:18px 18px 6px 18px;transition:transform var(--d-tap) var(--ease-out),opacity var(--d-tap)}
.ccp-msg--me .ccp-msg__b:active{transform:scale(.97);opacity:.85}
.ccp-replies{display:flex;flex-wrap:wrap;gap:8px;padding-left:38px}
.ccp-reply{min-height:44px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--cy-40);background:var(--cy-08);font-size:15px;font-weight:600;text-align:left;line-height:1.3;
  transition:background var(--d-tap) var(--ease-out),color var(--d-tap),transform var(--d-tap) var(--ease-out)}
.ccp-reply:active{transform:scale(.97)}
.ccp-reply.on{background:var(--cy);color:#00141c;border-color:var(--cy)}
.ccp-say{flex-wrap:nowrap}
.ccp-say .ccp-input{flex:1;min-width:0;min-height:48px;font-size:16px;border-radius:var(--r-pill);padding:0 18px}
.ccp-reply--go{width:48px;min-height:48px;padding:0;display:grid;place-items:center;background:var(--cy);color:#00141c;border-color:var(--cy)}
.ccp-reply--go svg{width:20px;height:20px}
.ccp-msg.is-new{animation:ccpMsgIn 260ms var(--ease-out) both}
.ccp-replies.is-new{animation:ccpMsgIn 260ms var(--ease-out) 120ms both}
@keyframes ccpMsgIn{from{opacity:0;transform:translateY(8px)}}
@media (hover:hover){.ccp-reply:hover{background:var(--cy-16)}.ccp-reply.on:hover{background:var(--cy)}}
.ccp-diff{margin-top:14px}
.ccp-car figcaption b{color:var(--t1);font-weight:600}
.ccp-sum{margin:6px 0 18px;border-radius:var(--r-panel);overflow:hidden;background:var(--s1);box-shadow:var(--e-lift)}
.ccp-sum .ccp-car{margin:0;border-radius:0}
.ccp-sum__sec{padding:12px 16px 8px;border-top:1px solid var(--hair)}
.ccp-sum__t{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.ccp-sum__li{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:44px;padding:10px 0;border:0;background:none;text-align:left;font-size:15px;line-height:1.4}
.ccp-sum__li + .ccp-sum__li{border-top:1px solid var(--hair)}
.ccp-sum__li > svg{width:18px;height:18px;margin-top:1px;color:var(--t2)}
.ccp-sum__li > svg + span{flex:1}
.ccp-sum__ch{font-style:normal;font-size:13px;font-weight:700;color:var(--cy);opacity:0;transition:opacity var(--d-state)}
.ccp-sum.is-edit .ccp-sum__ch{opacity:1}
.ccp-sum.is-edit .ccp-sum__li{color:var(--t1)}
.ccp-sum__ok{display:flex;align-items:center;gap:8px;margin:2px 0 6px;color:var(--t3);font-size:13px}
.ccp-sum__ok svg{width:15px;height:15px;color:var(--ok)}
@media (hover:hover){.ccp-sum__li:hover .ccp-sum__ch{opacity:1}}
@media (prefers-reduced-motion:reduce){.ccp-msg.is-new,.ccp-replies.is-new{animation-name:ccpFade}}
/* Round 4 (R4-B): Buff is typing (his AI line for this car is on its way). */
.ccp-msg--typing .ccp-msg__b{display:flex;gap:5px;align-items:center;min-height:44px}
.ccp-msg--typing i{width:7px;height:7px;border-radius:50%;background:var(--t2);opacity:.35;animation:ccpDot 1s infinite ease-in-out}
.ccp-msg--typing i:nth-child(2){animation-delay:.15s}.ccp-msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes ccpDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:.9;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.ccp-msg--typing i{animation:none;opacity:.6}}
.ccp-msg--me .ccp-msg__b:disabled{opacity:.7}

/* ══ Round 6 (R6-B): the service picker, the two-section offer stack, tint shades as the customer's choice ══ */
.ccp-svcs .ccp-tile{min-height:92px;align-items:flex-start;padding-top:16px;padding-bottom:16px}
.ccp-svcs .ccp-tile__s{margin-top:4px;line-height:1.45}
.ccp-svcs [data-svc=tint] .ccp-tile__ic{color:var(--tint)}
.ccp-svcs + .ccp-note,.ccp-svcs + .ccp-cta{margin-top:20px}
.ccp .ccp-cta[disabled]{opacity:.45;cursor:default}
.k-detail{--k:var(--cy)}
/* A section header: what the section is, and its subtotal (the engine's lines summed). */
.ccp-sec{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 14px;padding:18px 18px 16px;border-radius:var(--r-panel);overflow:clip;
  background:linear-gradient(135deg,color-mix(in srgb,var(--k) 13%,var(--s1)),var(--s1) 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 32%,transparent);scroll-margin-top:130px}
.ccp-sec:before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--k)}
.ccp-sec.k-detail:before{background:linear-gradient(90deg,var(--clean),var(--correct) 55%,var(--protect))}
.ccp-sec__n{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:var(--track-kicker);text-transform:uppercase;color:var(--k)}
.ccp-sec h2{margin:0;font-family:var(--f-d);font-weight:400;font-size:clamp(26px,1.4vw + 18px,38px);letter-spacing:.03em;line-height:1.02}
.ccp-sec__sub{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ccp-sec__sub small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.ccp-sec__sub b{font-size:22px;font-variant-numeric:tabular-nums}
.ccp-lanes>.ccp-sec + .ccp-lane{margin-top:-20px}
/* The other service, offered once, quietly. */
.ccp-invite{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:16px 18px;border-radius:var(--r-panel);background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair);border-left:3px solid var(--k)}
.ccp-invite>svg{width:24px;height:24px;color:var(--k)}
.ccp-invite>div{flex:1 1 200px;min-width:0}
.ccp-invite b{display:block;font-size:16px}
.ccp-invite p{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--t2)}
.ccp-invite .ccp-ghost{width:auto;margin:0;flex:1 1 100%}
/* Both services: the build total, section by section. */
.ccp-sectotal{display:grid;gap:8px;padding:16px 18px;border-radius:var(--r-panel);background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair)}
.ccp-sectotal>div{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--t2)}
.ccp-sectotal b{color:var(--t1);font-variant-numeric:tabular-nums}
.ccp-sectotal__all{padding-top:10px;border-top:1px solid var(--hair2);font-size:17px !important;color:var(--t1) !important;font-weight:700}
.ccp-sectotal__all b{font-size:20px}
.ccp-dock__split{font-size:12.5px;color:var(--t2);margin-top:2px;font-variant-numeric:tabular-nums}
.ccp-rail__sec{display:flex;justify-content:space-between;gap:10px;margin:14px 0 2px;padding-top:10px;border-top:1px solid var(--hair2);font-size:13px;font-weight:700;color:var(--t1)}
.ccp-rail__sec:first-child{margin-top:0;padding-top:0;border-top:0}
/* Shades: Alabama's limit per window; a darker pick marked and noted, never blocked. */
.ccp-shade__law{display:flex;gap:6px;align-items:flex-start;margin:-2px 0 8px;font-size:12.5px;line-height:1.4;color:var(--t3)}
.ccp-shade__law svg{width:14px;height:14px;margin-top:1px}
.ccp-shade__o em{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn);font-style:normal;font-size:11px;font-weight:800}
.ccp-shade__adv,.ccp-part__adv{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--warn) 9%,var(--s1));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 30%,transparent);font-size:13.5px;line-height:1.45;color:#ffe4a3}
.ccp-shade__adv svg,.ccp-part__adv svg{width:16px;height:16px;margin-top:2px;color:var(--warn)}
.ccp-part__list .ccp-part__adv span{display:inline;margin:0;color:inherit}
.ccp-part__list .ccp-part__adv b{display:inline;font-size:inherit}
@media (min-width:1100px){
  .ccp-lanes>.ccp-sec,.ccp-lanes>.ccp-invite,.ccp-lanes>.ccp-sectotal{grid-column:1/-1}
  .ccp-lanes>.ccp-sec + .ccp-lane{margin-top:0}
  .ccp-lanes.is-tintonly{grid-template-columns:minmax(0,1fr)}
  .ccp-invite .ccp-ghost{flex:0 0 auto}
  .ccp-sectotal{max-width:520px;justify-self:end;width:100%}
}
@media (min-width:1680px){
  .ccp--rail .ccp-lanes>.ccp-sec,.ccp--rail .ccp-lanes>.ccp-invite,.ccp--rail .ccp-lanes>.ccp-sectotal{grid-column:1/4}
  .ccp--rail .ccp-lanes>.ccp-rail{grid-row:1/span var(--rows,2)}
  .ccp--rail .ccp-lanes.is-tintonly{grid-template-columns:minmax(0,1fr) 380px}
  .ccp--rail .ccp-lanes.is-tintonly>*{grid-column:1}
  .ccp--rail .ccp-lanes.is-tintonly>.ccp-rail{grid-column:2}
}
/* A long price subline ("Intro offer: …", "Estimate, not in your total") wraps under the price instead of squeezing
   the row's words into a narrow column. */
.ccp-row__price small{white-space:normal;max-width:9.5em;line-height:1.3}
.ccp-part__advsum{display:flex !important;gap:5px;align-items:center;color:var(--warn) !important}
.ccp-part__advsum svg{width:13px;height:13px}

/* ══ Round 6 (R6-A): the header's "Talk to a person", the staff badge, Buff's seat; the help sheet ══ */
.ccp-top__in{grid-template-columns:44px minmax(0,1fr) auto}
.ccp-top__end{display:flex;align-items:center;gap:2px}
.ccp-top__help{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;border:0;background:none;color:var(--t2);font-size:13px;white-space:nowrap}
.ccp-top__help svg{width:20px;height:20px;flex:none}
.ccp-top__help[hidden],.ccp-top__staff[hidden]{display:none}
.ccp-top__staff{padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--cy-40);background:var(--cy-08);color:var(--cy);font-size:12px;font-weight:600;white-space:nowrap}
.ccp-top__buff{display:none}
@media (max-width:759px){
  .ccp-top__mark{font-size:15px;letter-spacing:.04em;text-align:left;padding-left:2px}
  .ccp-top__help span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ccp-top__help{padding:0 10px}
  .ccp-top__reset{padding:10px 4px}
  /* Buff's home on a phone: a seat of his own in the sticky bar, so he never sits over the page. */
  .ccp-top__buff{display:block;position:relative;width:46px;height:44px;flex:none}
  .ccp-top__buff i{position:absolute;inset:0}
}
/* What Buff is explaining, ringed (a phone: he's up in the header, it's down here). */
.ccp-stage{margin-top:var(--buff-room,0px);transition:margin-top 260ms cubic-bezier(.22,1,.36,1)}
.ccp-buff-focus{outline:2px solid var(--cy-40);outline-offset:4px;border-radius:var(--r-row);transition:outline-color var(--d-state,200ms)}
.ccp-help{position:fixed;inset:0;z-index:9998;display:flex;align-items:flex-end;justify-content:center}
.ccp-help[hidden]{display:none}
.ccp-help__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.ccp-help__card{position:relative;width:100%;max-width:440px;padding:22px 16px calc(18px + env(safe-area-inset-bottom));border-radius:var(--r-panel) var(--r-panel) 0 0;background:var(--s2);border:1px solid var(--hair2,rgba(255,255,255,.14));box-shadow:0 -20px 50px -20px rgba(0,0,0,.9);animation:ccpHelpUp 260ms cubic-bezier(.22,1,.36,1)}
.ccp-help__x{position:absolute;top:8px;right:8px;color:var(--t2)}
.ccp-help__t{margin:0 44px 6px 0;font-family:var(--f-d);font-weight:400;font-size:30px;line-height:1;letter-spacing:.02em}
.ccp-help__s{margin:0 0 16px;color:var(--t2);font-size:14px;line-height:1.45}
.ccp-help__opts{display:grid;gap:10px}
.ccp-help__opt{display:flex;gap:12px;align-items:flex-start;width:100%;padding:14px;border-radius:var(--r-row);border:1px solid var(--hair2,rgba(255,255,255,.14));background:var(--s3);color:var(--t1);text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.ccp-help__opt>svg{width:22px;height:22px;flex:none;margin-top:1px;color:var(--cy)}
.ccp-help__opt b{display:block;font-size:16px}
.ccp-help__opt small{display:block;margin-top:2px;color:var(--t2);font-size:13px;line-height:1.4}
.ccp-help__opt q{display:block;margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--s1);color:var(--t1);font-size:13px;line-height:1.4;quotes:none}
.ccp-help__opt em{display:block;margin-top:6px;color:var(--warn,#ffb020);font-size:12px;font-style:normal;font-weight:600}
.ccp-help__opt:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
@media (hover:hover){.ccp-help__opt:hover{border-color:var(--cy-40)}.ccp-top__help:hover{color:var(--t1)}}
@media (min-width:760px){.ccp-help{align-items:center}.ccp-help__card{border-radius:var(--r-panel);padding:26px 22px 22px}}
@keyframes ccpHelpUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ccp-help__card{animation:none}.ccp-buff-focus,.ccp-stage{transition:none}}

/* ── R7-A (UX/CRO review) ── */
/* The shop's Google rating leads the hero's promises and sits under the agreement's CTA. */
.ccp-rating{display:inline-flex;align-items:center;gap:6px;color:var(--t1);font-weight:600}
.ccp-rating svg{width:15px;height:15px;color:var(--gold);fill:currentColor;stroke:none}
p.ccp-trust{margin-top:10px}
/* What Stripe's page will show, said beside the button that goes there. */
.ccp-stripenote{display:flex;gap:8px;align-items:flex-start;margin-top:10px}
.ccp-stripenote svg{width:15px;height:15px;margin-top:2px;color:var(--ok)}
.ccp-later{align-items:center}
/* Phones: the hero's CTA landed at ~810px of an 844px screen, under Safari's bars. Tighter lane cards lift it into view. */
@media (max-width:759px){
  .ccp-three{margin:18px 0 20px}
  .ccp-three>div{padding:10px 10px 12px}
  .ccp-three b{font-size:22px;margin-top:4px}
  .ccp-three .ccp-lane-ic{width:30px;height:30px}
  .ccp-three .ccp-lane-ic svg{width:17px;height:17px}
  .ccp-hero .ccp-sub{margin-bottom:0}
}
.ccp-vmodes__total{margin-top:14px}
@media (max-width:759px){.ccp-vmodes{gap:12px}.ccp-vmode{padding:16px 16px 14px;gap:6px}.ccp-vmode__d{font-size:14px}.ccp-vmode__when{padding-top:8px;margin-top:2px}}
/* R7-A: Buff's line as a note in the page (the proposal at 760-1679px): it takes room instead of covering anything.
   He sits on the note's seat at its left (the pet's ride mode). */
.ccp-buffnote{position:relative;display:flex;gap:12px;margin:0 0 12px;padding:14px 16px 14px 70px;border-radius:var(--r-row);background:#f4fbff;color:#06222b;box-shadow:var(--e-row);animation:ccpFade .25s ease-out}
.ccp-buffnote__seat{position:absolute;left:12px;top:12px;width:48px;height:48px}
.ccp-buffnote__body p{margin:0 0 10px;font-size:15px;line-height:1.45}
.ccp-buffnote__acts{display:flex;flex-wrap:wrap;gap:8px}
.ccp-buffnote__acts button{width:auto;min-height:40px;margin:0;padding:0 16px;border-radius:var(--r-pill);font-size:14px;font-weight:600}
.ccp-buffnote .ccp-buffnote__go{border:0;background:#06222b;color:#fff}
.ccp-buffnote .ccp-ghost{border-color:rgba(6,34,43,.25);color:#06222b}
@media (prefers-reduced-motion:reduce){.ccp-buffnote{animation:none}}
/* R7-A: illustrations (labelled as such), sized up front so nothing shifts as they lazy-load. */
.ccp-illo{margin:12px 0 4px;max-width:420px}
.ccp-illo img{display:block;width:100%;height:auto;aspect-ratio:1920/1072;border-radius:12px;background:var(--s2);object-fit:cover}
.ccp-illo figcaption{margin-top:6px;font-size:12px;color:var(--t3)}
/* R8-C: "this is our recommendation": said before the first row, with the Remove control it names. */
.ccp-ourrec{display:flex;gap:12px;align-items:flex-start;margin:4px 0 16px;padding:14px 16px;border-radius:var(--r-row);background:var(--s1);box-shadow:inset 0 0 0 1px var(--cy-40)}
.ccp-ourrec__ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--cy-16);color:var(--cy)}
.ccp-ourrec__ic svg{width:17px;height:17px}
.ccp-ourrec b{display:block;font-size:16px;color:var(--t1);margin-bottom:4px}
.ccp-ourrec p{margin:0;font-size:14px;line-height:1.5;color:var(--t2)}
.ccp-ourrec__pill{display:inline-flex;align-items:center;gap:3px;padding:1px 8px 1px 6px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--hair2);color:var(--t1);font-size:12px;font-weight:600;white-space:nowrap}
.ccp-ourrec__pill svg{width:11px;height:11px}
/* Every optional row says what a tap does: Remove (on) or Add (off). Locked rows say Required. */
.ccp-row__act,.ccp-row__req{display:inline-flex;align-items:center;gap:4px;margin-top:6px;min-height:28px;padding:0 11px 0 9px;border-radius:var(--r-pill);font-size:13px;font-weight:600;white-space:nowrap}
.ccp-row__act svg,.ccp-row__req svg{width:13px;height:13px;stroke-width:2.2}
.ccp-row__act{box-shadow:inset 0 0 0 1px var(--hair2);color:var(--t1);background:var(--s2);transition:background var(--d-state),box-shadow var(--d-state)}
.ccp-row__act:not(.is-on){box-shadow:inset 0 0 0 1px var(--k);color:var(--k)}
.ccp-row__hit:hover .ccp-row__act{background:var(--s3)}
.ccp-row__req{color:var(--t3);padding:0 2px}
.ccp-row__lockwhy{display:flex;gap:6px;align-items:flex-start;margin:0;font-size:13px;line-height:1.45;color:var(--t3)}
.ccp-row__lockwhy svg{width:13px;height:13px;flex:none;margin-top:2px}
.ccp-club__remove{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:8px;border-radius:var(--r-pill);border:1px solid var(--hair2);background:transparent;color:var(--t1);font-weight:600}
.ccp-club__remove svg{width:15px;height:15px}
.ccp-club__btn svg{flex:none}
/* Tint: the premium install beside the top-edge illustration, and why 50% is the sweet spot. */
.ccp-tintprem{display:grid;gap:4px 20px;align-items:start;margin:0 0 18px}
.ccp-tintprem .ccp-stack svg{color:var(--tint)}
.ccp-tintprem .ccp-illo{margin-top:0}
@media (min-width:760px){.ccp-tintprem{grid-template-columns:1fr minmax(0,240px)}}
.ccp-sweet{display:flex;gap:10px;align-items:flex-start;margin:10px 0 14px;padding:12px 14px;border-radius:var(--r-row);background:var(--s1);border-left:2px solid var(--tint)}
.ccp-sweet svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--tint)}
.ccp-sweet p{margin:0;font-size:14px;line-height:1.5;color:var(--t2)}
.ccp-sweet b{color:var(--t1)}
/* Split schedule: each part a card with its own Change button (not an underline). */
.ccp-vstep{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;min-height:64px}
.ccp-vstep__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ccp-vstep__act{display:inline-flex;align-items:center;gap:5px;flex:none;min-height:34px;padding:0 12px;border-radius:var(--r-pill);background:var(--cy);color:#04121a;font-size:13px;font-weight:700}
.ccp-vstep__act svg{width:14px;height:14px}
.ccp-vstep__act.is-now{background:transparent;color:var(--cy);box-shadow:inset 0 0 0 1px var(--cy-40)}
@media (max-width:480px){.ccp-vsteps{grid-template-columns:1fr}}
.ccp-vback{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;padding:0 16px;margin:0 0 16px}
.ccp-vback svg{width:15px;height:15px}
/* Guarantees and risk reversal: only the agreement's and the catalog's own words. */
.ccp-guar{margin:20px 0;padding:16px;border-radius:var(--r-panel);background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair)}
.ccp-guar .ccp-group__t{display:flex;align-items:center;gap:6px}
.ccp-guar .ccp-group__t svg{width:15px;height:15px;color:var(--ok)}
.ccp-guar__list,.ccp-guar__safe{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.ccp-guar__list li,.ccp-guar__safe li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--t2)}
.ccp-guar__list b{display:block;color:var(--t1);font-weight:600}
.ccp-guar__list svg,.ccp-guar__safe svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ok)}
.ccp-guar__all{margin:0;font-size:13px;line-height:1.5;color:var(--t3)}
/* The Club, added after booking, on the build sheet. */
.ccp-sheet__club{margin:8px 0 12px;padding:12px 14px;border-radius:var(--r-row);background:var(--s2);box-shadow:inset 0 0 0 1px var(--gold)}
.ccp-sheet__club .ccp-sheet__l span{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--t1);font-weight:600}
.ccp-sheet__club .ccp-sheet__l svg{width:16px;height:16px;color:var(--gold)}
.ccp-sheet__club .ccp-stack{margin:10px 0 8px}
.ccp-sheet__club .ccp-eng{flex-basis:100%;font-weight:400}
/* R8-G: the last-chance Club before the time step (one look, then the time step) */
.ccp-lc{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(5,6,8,.72);overflow-y:auto}
@media (min-width:720px){.ccp-lc{align-items:center}}
.ccp-lc__card{width:100%;max-width:460px;margin:0;max-height:calc(100dvh - 32px);overflow-y:auto}
.ccp-lc .ccp-linkbtn.center{display:block;margin:12px auto 0}
.ccp-lc__terms{margin:4px 0 16px;font-size:14px;line-height:1.5;color:var(--t2)}
.ccp-lc__terms dt{font-weight:700;color:var(--t1);margin-top:10px}
.ccp-lc__terms dd{margin:2px 0 0}
.ccp-lc__ok{margin:0 0 14px;font-size:15px;color:var(--t1)}
.ccp-lc .ccp-cta{width:100%}
.ccp-lc-open{overflow:hidden}

/* R8-O: a member's verdict (included / one-off / normal build), before they confirm */
.ccp-note--member{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--cy);border-radius:var(--r-panel);padding:12px 14px}
.ccp-note--member svg{width:20px;height:20px;flex:none;color:var(--cy);margin-top:1px}