@font-face{font-family:"Bowlby One";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bowlby-one.woff2) format("woff2")}
:root{
  --paper:#F4F6F8;--card:#FFFFFF;--ink:#16181D;--mute:#5C6570;--line:#D9DEE3;--sky:#D8ECF7;--grass:#2F8F5B;
  --signal:#FFC928;--signal-ink:#1B1600;--danger:#C2362B;
  --shadow:0 10px 30px rgba(22,24,29,.08);
  --display:"Bowlby One","Arial Black","Helvetica Neue",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){color-scheme:dark;
    --paper:#111418;--card:#181C21;--ink:#EEF1F4;--mute:#9AA4AE;--line:#2A3038;--sky:#15212B;--grass:#4FB57E;--danger:#FF8A7A;--shadow:0 10px 30px rgba(0,0,0,.35)}
}
:root[data-theme="dark"]{color-scheme:dark;
  --paper:#111418;--card:#181C21;--ink:#EEF1F4;--mute:#9AA4AE;--line:#2A3038;--sky:#15212B;--grass:#4FB57E;--danger:#FF8A7A;--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;padding-inline:0;padding-block:0}
.g{padding-inline:16px}
.wrap{max-width:1180px;margin-inline:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,5.2vw,46px);line-height:1.12}
.kicker{font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.lede{color:var(--mute);max-width:60ch;margin:14px 0 0;font-size:17px;line-height:1.55}
section{padding-block:72px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1.1 var(--body);border:0;cursor:pointer;text-decoration:none;
  padding:15px 20px;border-radius:999px;background:var(--signal);color:var(--signal-ink);box-shadow:0 3px 0 #C99A00;text-align:center}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #C99A00}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.sm{padding:10px 14px;font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top */
.announce{background:var(--ink);color:var(--paper);font-size:13px;text-align:center;padding-block:9px}
.announce b{color:var(--signal)}
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.navin{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:23px;letter-spacing:-.02em}
.logo svg{width:34px;height:28px}
.navlinks{display:flex;gap:22px;font-weight:600;font-size:15px}
.navlinks a{text-decoration:none;color:var(--mute)}
.navlinks a:hover{color:var(--ink)}
.cartbtn{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:15px}
.cartbtn .n{background:var(--signal-ink);color:var(--signal);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:12px;padding:0 6px}
@media (max-width:820px){.navlinks{display:none}}
.valance{height:18px;background:radial-gradient(circle at 12px 0,var(--vc,var(--ink)) 11.5px,transparent 12px) 0 0/24px 18px repeat-x}

/* hero */
.hero{background:var(--sky);padding-block:36px 52px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start}.stick{position:sticky;top:84px}.stick.proofing{position:static}}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6.6vw,62px);line-height:1.14}
.hero h1 em{font-style:normal;display:inline-block;line-height:1.02;margin-top:.1em;background:var(--signal);color:var(--signal-ink);padding:.04em .14em .08em;border-radius:.08em}
.hero .lede{margin-top:18px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:4px 2px 8px;margin-top:22px;scrollbar-width:thin}
.tab{flex:none;display:flex;align-items:center;gap:8px;border:2px solid transparent;background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px 8px 10px;font:700 15px var(--body);cursor:pointer;box-shadow:var(--shadow)}
.tab svg{width:22px;height:22px;flex:none}
.tab[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.stage{margin-top:12px;background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.stage svg{display:block;width:100%;height:auto}
.viewtabs{display:flex;gap:4px;padding:8px 10px 0}
.viewtabs button{font:700 13px var(--sans,inherit);padding:7px 12px;border-radius:999px;border:2px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.viewtabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.proofview{padding:4px 0 0}
.proofinfo{padding:4px 16px 12px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.45}
.proofinfo .pid{display:flex;flex-direction:column;gap:2px}.proofinfo .pid b{font:600 16px var(--mono);letter-spacing:.06em}.proofinfo .pid span{color:var(--mute);font-size:12.5px}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;color:var(--mute);font-size:12px}
.lg{display:inline-block;width:18px;height:0;border-top:2px solid var(--ink);vertical-align:middle;margin-right:4px}.lg.safe{border-top:2px dashed #0EA5E9}.lg.bleed{height:10px;border:0;background:repeating-linear-gradient(45deg,#ccc 0 3px,#eee 3px 6px)}.lg.hole{width:10px;height:10px;border:2px solid #DC2626;border-radius:50%}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.checks li{padding:7px 10px 7px 30px;border-radius:10px;position:relative;background:var(--paper)}
.checks li::before{position:absolute;left:10px;top:7px;font-weight:800}
.checks li.ok::before{content:"\2713";color:#16A34A}.checks li.warn::before{content:"!";color:#D97706}.checks li.bad::before{content:"\00D7";color:#DC2626}.checks li.note::before{content:"i";color:var(--mute);font-style:italic}
.checks li.bad{background:rgba(220,38,38,.08)}.checks li.warn{background:rgba(217,119,6,.08)}
.oline .pf{margin-top:6px}
.proofmail{display:flex;flex-direction:column;gap:6px;padding:12px;border:2px solid var(--ink);border-radius:12px;margin-top:4px}.proofmail label{font-weight:700}.proofmail div{display:flex;gap:8px}.proofmail input{flex:1;min-width:0;font-size:16px;padding:9px 11px}
.stage-foot{display:flex;justify-content:space-between;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:10px 16px 12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--mute)}
.chipsw{display:flex;gap:6px;align-items:center}
.chipsw i{width:16px;height:16px;border-radius:4px;border:1px solid var(--line);display:inline-block}

/* panel */
.panel{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:14px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;font-weight:800;font-size:17px}
.card-h::-webkit-details-marker{display:none}
.card-h .stepn{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;display:block}
.card-h .tog{font-weight:500;font-size:14px;color:var(--mute)}
details.bk[open] .tog::after{content:"Hide"}
details.bk:not([open]) .tog::after{content:"Edit"}
.bk-body{display:flex;flex-direction:column;gap:14px;padding-top:14px}
.bk-sum{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);margin-top:6px}
details.bk[open] .bk-sum{display:none}
.divider{border:0;border-top:2px dashed var(--line);margin:4px 0}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field > label,.field > .lbl{font-weight:700;font-size:14px}
.field .hint{font-size:12px;color:var(--mute);margin:0;line-height:1.4}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:10px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{font:500 16px var(--body);padding:11px 13px;border-radius:10px;border:2px solid var(--line);background:var(--paper);color:var(--ink);width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.seg input,.checks input.hid{position:absolute;opacity:0;pointer-events:none}
.seg label{display:flex;flex-direction:column;gap:1px;padding:9px 11px;border-radius:10px;border:2px solid var(--line);cursor:pointer;font-weight:700;font-size:14px;line-height:1.3;background:var(--paper)}
.seg label small{font-weight:500;font-size:12px;color:var(--mute)}
.seg label .pr{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--mute);margin-top:2px}
.seg input:checked + label{border-color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1px var(--ink)}
.seg input:focus-visible + label{outline:3px solid var(--signal);outline-offset:2px}
.checks{display:grid;gap:8px}
.addon{display:flex;align-items:center;gap:12px;padding:9px 12px;border:2px solid var(--line);border-radius:10px;cursor:pointer;background:var(--paper)}
.addon input{width:20px;height:20px;accent-color:var(--ink);flex:none}
.addon span{flex:1;font-weight:600;font-size:14px;line-height:1.35}
.addon small{display:block;font-weight:500;color:var(--mute);font-size:12px}
.addon b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--mute);white-space:nowrap}
.addon:has(input:checked){border-color:var(--ink);background:var(--card)}
.colours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.col{display:flex;flex-direction:column;gap:6px;border:2px solid var(--line);border-radius:10px;padding:8px;background:var(--paper)}
.col .top{display:flex;align-items:center;gap:8px}
.col input[type=color]{width:34px;height:34px;border:0;padding:0;background:none;border-radius:8px;cursor:pointer;flex:none}
.col input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.col input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:8px}
.col .nm{font-size:12px;font-weight:700}
.col input[type=text]{font:500 13px var(--mono);padding:6px 8px;border-radius:7px}
.col .cmyk{font:400 10.5px var(--mono);color:var(--mute);line-height:1.3}
.logo-drop{display:flex;align-items:center;gap:12px;border:2px dashed var(--line);border-radius:12px;padding:10px 12px;background:var(--paper);cursor:pointer}
.logo-drop.drag{border-color:var(--ink)}
.logo-drop .thumb{width:56px;height:56px;border-radius:8px;background:repeating-conic-gradient(var(--line) 0 25%,transparent 0 50%) 0 0/12px 12px;display:grid;place-items:center;overflow:hidden;flex:none}
.logo-drop .thumb img{max-width:100%;max-height:100%}
.logo-drop .t{font-size:14px;line-height:1.35}
.logo-drop .t b{display:block}
.logo-drop .t small{color:var(--mute)}
.linkbtn{background:none;border:0;padding:0;font:700 13px var(--body);color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:3px;text-underline-offset:3px;cursor:pointer}
.qty{display:flex;align-items:center;gap:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;width:max-content;background:var(--paper)}
.qty button{width:44px;height:44px;border:0;background:transparent;color:var(--ink);font:700 20px var(--body);cursor:pointer}
.qty input{width:70px;border:0;border-inline:2px solid var(--line);border-radius:0;text-align:center;font:700 17px var(--body);padding:10px 4px;background:var(--card)}
.nudge{font-size:13px;color:var(--grass);font-weight:700;margin:0}
.total{display:flex;align-items:end;justify-content:space-between;gap:12px;border-top:2px dashed var(--line);padding-top:14px}
.total .amt{font-family:var(--display);font-size:38px;line-height:1;font-variant-numeric:tabular-nums}
.total .per{font-size:13px;color:var(--mute);line-height:1.4}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acts .btn{padding:15px 12px}
.assure{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:13px;color:var(--mute);justify-content:center;margin:0}
.assure span::before{content:"✓ ";color:var(--grass);font-weight:800}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));top:auto;margin-top:calc(0px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--shadow)}

/* strip */
.strip{border-block:1px solid var(--line);background:var(--card)}
.strip-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:18px;padding-block:22px}
.strip-in div{display:flex;flex-direction:column;gap:4px}
.strip-in b{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2}
.strip-in span{color:var(--mute);font-size:14px}

/* everything grid */
.every{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));margin-top:26px}
.ev{background:var(--card);border:2px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;padding:0;color:var(--ink);font:inherit;display:flex;flex-direction:column;transition:transform .15s,border-color .15s}
.ev:hover{transform:translateY(-3px);border-color:var(--ink)}
.ev svg{display:block;width:100%;height:auto}
.ev .t{padding:12px 14px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px solid var(--line)}
.ev h3{font-size:17px;font-weight:800}
.ev .from{font-size:13px;color:var(--mute);white-space:nowrap}
.ev .from b{color:var(--ink);font-size:15px}

/* kits */
.kits{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));margin-top:28px}
.kit{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;position:relative}
.kit.pop{border-color:var(--ink);box-shadow:var(--shadow)}
.kit .flag{position:absolute;top:-13px;left:20px;background:var(--signal);color:var(--signal-ink);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.kit h3{font-size:20px;font-weight:800}
.kit .for{color:var(--mute);font-size:14px;margin:-4px 0 0}
.kit ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:14px;flex:1}
.kit li{display:flex;gap:8px}
.kit li::before{content:"✓";color:var(--grass);font-weight:800}
.kit .price{font-family:var(--display);font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.kit .was{font-size:13px;color:var(--mute)}
.kit .was s{margin-right:6px}

/* steps + faq */
.steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin-top:28px;counter-reset:s}
.step{border-top:4px solid var(--ink);padding-top:14px}
.step::before{counter-increment:s;content:"Step " counter(s);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.step h3{font-size:19px;font-weight:800;margin-top:6px}
.step p{margin:4px 0 0;color:var(--mute);font-size:15px}
.step .when{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:12px;background:var(--card);border:1px solid var(--line);padding:3px 8px;border-radius:6px}
.faq{margin-top:24px;border-top:1px solid var(--line);max-width:800px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-weight:700;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:26px;font-weight:500}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--mute);max-width:65ch}

/* order */
.quote{background:var(--ink);color:var(--paper)}
.quote .kicker,.quote .lede{color:#AEB6BF}
.q-grid{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);margin-top:24px}
@media (min-width:920px){.q-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.order{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px}
.order h3{font-size:12px;font-family:var(--mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#AEB6BF}
.oline{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px dashed rgba(255,255,255,.18)}
.oline svg{width:64px;height:40px;border-radius:6px;background:#233;display:block}
.oline b{display:block;font-size:15px}
.oline small{display:block;color:#AEB6BF;font-size:12.5px;line-height:1.4}
.oline .r{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.oline .rm{background:none;border:0;color:#AEB6BF;font:600 12px var(--body);text-decoration:underline;cursor:pointer;padding:0;margin-top:4px}
.empty{color:#AEB6BF;font-size:15px}
.tots{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:15px}
.tots dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.tots .save{color:#8EE0A8}
.tots .grand{font-family:var(--display);font-size:32px;color:var(--signal);line-height:1.1}
form.q{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
form.q .full{grid-column:1/-1}
form.q label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
form.q input,form.q select,form.q textarea{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--paper)}
form.q input:focus,form.q textarea:focus,form.q select:focus{border-color:var(--signal)}
form.q option{color:#16181D}
.err{color:#FF9B8A;font-size:14px;min-height:1.4em;margin:0}
.done{background:var(--signal);color:var(--signal-ink);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px}
.done h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.15}
.done p{margin:0}
.sheet{background:#fff;color:#16181D;border-radius:10px;padding:12px;font:12px/1.5 var(--mono);white-space:pre-wrap;max-height:320px;overflow:auto;border:1px solid rgba(0,0,0,.15)}

/* price book */
.pb{background:var(--card)}
.pb-bar{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:18px;padding:14px 16px;border:2px solid var(--ink);border-radius:14px;background:var(--paper)}
.pb-bar label{font-weight:700;font-size:14px;display:flex;align-items:center;gap:10px}
.pb-bar input[type=range]{width:180px;accent-color:var(--ink)}
.pb-bar output{font:500 16px var(--mono);min-width:48px}
.pb-bar .warn{color:var(--danger);font-weight:700;font-size:13px}
.pbt{overflow-x:auto;margin-top:18px;border:1px solid var(--line);border-radius:12px}
.pbt table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
.pbt th,.pbt td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left}
.pbt th{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:var(--paper);position:sticky;top:0}
.pbt td.n{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:13px}
.pbt tr.grp td{background:var(--sky);font-weight:800}
.pbt td .code{font:400 11px var(--mono);color:var(--mute)}
#prodCard{display:flex;flex-direction:column;gap:14px}
.sup.main{border-color:var(--ink)}
.jmwrap{margin-top:14px;border:2px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card)}
.jmwrap>summary{cursor:pointer;font-weight:800;font-size:16px}
.pbh{font-size:18px;font-weight:800;margin:30px 0 10px}
.sups{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.sup{border:2px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;font-size:14px;background:var(--paper)}
.sup b{font-size:17px}.sup .kind{font-weight:700;color:var(--ink)}.sup span{color:var(--mute)}.sup p{margin:6px 0;font-size:14px}
.stat{align-self:flex-start;font:500 12px var(--mono);padding:3px 8px;border-radius:6px}.stat.ok{background:#DDF3E4;color:#1E6B3A!important}.stat.wait{background:#FFF1C9;color:#7A5A00!important}
.jmform details{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--paper)}
.jmform summary{cursor:pointer;padding:12px 14px;font-weight:700;display:flex;justify-content:space-between;gap:10px}
.jmform summary span{font:500 12px var(--mono);color:var(--mute)}
.jf{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:end;padding:8px 14px;border-top:1px solid var(--line);font-size:14px}
.jf.one{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.jf small{color:var(--mute);font-size:12px}
.jf label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--mute)}
.jf input{padding:8px 10px;font-size:15px}
.routing{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.rt{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper)}
.rt small{color:var(--mute);font-size:12px}
.rt .seg{grid-template-columns:repeat(3,1fr)}
#jobCheck table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
#jobCheck th,#jobCheck td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left}
#jobCheck th{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:var(--paper)}
#jobCheck td.n{text-align:right;font-family:var(--mono);font-size:13px}
#jobCheck tr.grp td{background:var(--sky);font-weight:800}
.logolab{display:flex;flex-direction:column;gap:10px;border:2px solid var(--line);border-radius:12px;padding:12px;background:var(--paper)}
.logolab .lbl{font-weight:700;font-size:14px}
.lvars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lvars figure{margin:0;display:flex;flex-direction:column;gap:4px}
.lvars svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px}
.lvars figcaption{font-size:11.5px;color:var(--mute);text-align:center}
.ai-read{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ai-done{border:2px solid var(--ink);border-radius:10px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:6px;width:100%}
.ai-done p{margin:0;font-size:14px}
.ai-done .chipsw{flex-wrap:wrap;font:500 11.5px var(--mono);color:var(--mute)}
.look select{font-size:14px;padding:9px 10px}
.mini{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--mute)}
.sw{display:flex;flex-direction:column;gap:6px;border-radius:10px;padding:9px 11px;margin-top:4px;font-size:13.5px;line-height:1.45}
.sw>span{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.sw p{margin:0}
.sw.warn{background:#FFF1C9;color:#4A3700}.sw.fix{background:#FDE3DF;color:#6B1A10}.sw.tip{background:var(--paper);color:var(--mute);border:1px solid var(--line)}
.swf{display:flex;gap:6px;flex-wrap:wrap}.chip.sm{padding:5px 10px;font-size:13px}
.mainpick{display:flex;flex-direction:column;gap:6px}
.mp{display:flex;gap:8px;flex-wrap:wrap}
.mp button{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.mp button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--ink)}
.cmap{display:flex;flex-direction:column;gap:8px;border-bottom:1px dashed var(--line);padding-bottom:12px}
.cmap:empty{display:none}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px}
.role{display:flex;gap:10px;align-items:flex-start;text-align:left;border:2px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
.role.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.role i{width:26px;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.2);flex:none;margin-top:2px}
.role b{display:block;font-size:14px}.role small{display:block;font-size:11.5px;color:var(--mute);line-height:1.35}
i.auto{background:repeating-linear-gradient(45deg,var(--line) 0 4px,var(--card) 4px 8px)!important}
.pal{display:flex;flex-wrap:wrap;gap:6px}
.pc{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 4px;background:var(--card);color:var(--ink);cursor:pointer;font:600 12.5px var(--body)}
.pc i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.pc em{font-style:normal;font:500 10.5px var(--mono);color:var(--mute)}
.pickwrap{display:flex;flex-direction:column;gap:4px}
#pickCv{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;cursor:crosshair;background:#fff;align-self:flex-start}
.look-b{display:flex;flex-direction:column;gap:1px;text-align:left;padding:9px 11px;border-radius:10px;border:2px solid var(--line);cursor:pointer;font:700 14px var(--body);line-height:1.3;background:var(--paper);color:var(--ink)}
.look-b small{font-weight:500;font-size:12px;color:var(--mute)}
.look-b:hover{border-color:var(--ink)}
.sugg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;order:3}
.sugg span{font-size:12px;color:var(--mute)}
.field:has(.sugg){display:flex;flex-direction:column}
.ocr b{color:var(--ink)}
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-2px;margin-right:4px}
@keyframes sp{to{transform:rotate(360deg)}}
.qrall{align-items:center}.qrall .qrprev{flex:none;width:60px;height:60px;line-height:0}.qrall .qrprev:empty{display:none}
.qrbox .qrf{display:flex;flex-direction:column;gap:8px;border:2px solid var(--ink);border-radius:12px;padding:10px 12px;background:var(--card)}
.qrbox input[type=text]{font-size:15px;padding:9px 11px}
.qrcode{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13px}.qrcode span{color:var(--mute)}.qrcode b{font:600 15px var(--mono);letter-spacing:.04em}
.qrurl code{font:12px var(--mono);word-break:break-all;background:var(--paper);padding:2px 4px;border-radius:4px}
.stale{margin:0;background:#FFF1C9;color:#4A3700;border-radius:10px;padding:9px 11px;font-size:13.5px;line-height:1.45}
.ocr{font-size:14px}
.custom{margin-top:8px;border:2px solid var(--ink);border-radius:12px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:6px}
.cz{display:grid;grid-template-columns:1fr auto 1fr 88px;gap:8px;align-items:end}
.cz label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:13px}
.cz .x{padding-bottom:12px;font-weight:700;color:var(--mute)}
.sch{display:flex;gap:3px;margin-bottom:4px}.sch i{width:18px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.15);display:inline-block}
.src{font:500 10.5px var(--mono);padding:2px 6px;border-radius:5px;white-space:nowrap}.src.q{background:#DDF3E4;color:#1E6B3A}.src.e{background:#FFF1C9;color:#7A5A00}
.pbt td.note{font-size:13px;color:var(--mute);background:var(--paper)}
button:disabled{opacity:.45;cursor:not-allowed}
.pb-note{font-size:13px;color:var(--mute);margin-top:12px;max-width:80ch}

footer{padding-block:36px 110px;font-size:14px;color:var(--mute)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.foot b{color:var(--ink)}
.tpl{font-family:var(--mono);font-size:12px;margin-top:18px}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -8px 24px rgba(0,0,0,.08);transform:translateY(110%);transition:transform .3s}
.sticky.show{transform:none}
.sticky .p{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.sticky .p b{font-family:var(--display);font-weight:400;font-size:22px;font-variant-numeric:tabular-nums}
.sticky .p span{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{padding:13px 16px}
@media (min-width:1000px){.sticky{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ev,.sticky{transition:none}}

/* Ask Peg chat */
.peg-launch{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:8px 18px 8px 8px;font:800 16px var(--body);cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.25);transition:bottom .3s,transform .15s}
.peg-launch:hover{transform:translateY(-2px)}
body.has-sticky .peg-launch{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.peg-av{width:38px;height:38px;border-radius:50%;background:var(--signal);display:grid;place-items:center;flex:none}
.peg-av svg{width:22px;height:22px}
.peg-dot{width:9px;height:9px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 2px var(--ink);margin-left:-18px;margin-top:24px}
.peg-tease{position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:40;max-width:260px;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:12px 34px 12px 14px;font-size:15px;box-shadow:var(--shadow);cursor:pointer}
body.has-sticky .peg-tease{bottom:calc(144px + env(safe-area-inset-bottom,0px))}
.peg-tease button{position:absolute;top:4px;right:4px;border:0;background:transparent;color:var(--mute);font-size:18px;cursor:pointer;width:28px;height:28px}
.peg-panel{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;width:min(390px,calc(100vw - 32px));
  height:min(620px,calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden}
.peg-head{display:flex;align-items:center;gap:12px;padding:14px 14px 12px;background:var(--ink);color:var(--paper)}
.peg-head b{display:block;font-size:17px}
.peg-head small{font-size:12px;opacity:.75}
.peg-head .x{margin-left:auto;border:0;background:rgba(255,255,255,.12);color:inherit;width:34px;height:34px;border-radius:50%;font-size:18px;cursor:pointer}
.peg-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.bub{max-width:86%;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.bub.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.bub.me{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:4px}
.bub.wait{color:var(--mute);font-style:italic}
.rec{align-self:stretch;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.rec .rt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.rec .rn{font-weight:800;font-size:16px}
.rec .rp{font-family:var(--display);font-size:28px;line-height:1}
.rec ul{margin:0;padding-left:18px;font-size:14px;color:var(--mute)}
.rec .ra{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.rec .ra button{flex:1;min-width:130px}
.btn.sm{padding:10px 12px;font-size:14px}
.peg-chips{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 0;background:var(--paper)}
.peg-chips:empty{display:none}
.chip{border:2px solid var(--ink);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 12px;font:700 14px var(--body);cursor:pointer}
.chip:hover{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.peg-form{display:flex;gap:8px;padding:10px 14px;background:var(--paper);border-top:1px solid var(--line)}
.peg-form input{flex:1;min-width:0;font:500 16px var(--body);padding:11px 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink)}
.peg-form input:focus{outline:none;border-color:var(--ink)}
.peg-form button{border:0;border-radius:999px;background:var(--signal);color:var(--signal-ink);font:800 15px var(--body);padding:0 16px;cursor:pointer}
.peg-form button[data-stop]{background:var(--ink);color:var(--paper)}
.peg-foot{margin:0;padding:0 14px 10px;background:var(--paper);font-size:11px;color:var(--mute);text-align:center}
.askpeg{background:none;border:0;padding:0;font:inherit;color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:3px;text-underline-offset:3px;cursor:pointer}
@media (max-width:520px){.peg-panel{right:0;left:0;bottom:0;width:100%;height:calc(100dvh - env(safe-area-inset-top,0px));border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}}
@media (prefers-reduced-motion:reduce){.peg-launch{transition:none}}
.h1sub{display:block;font:700 clamp(15px,2.2vw,19px)/1.3 var(--body);color:var(--mute);margin-top:12px;letter-spacing:0}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--card);padding:8px 14px}
.trust4{display:grid;gap:14px;margin-top:22px}@media(min-width:760px){.trust4{grid-template-columns:repeat(4,1fr)}}.trust4>div{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--paper)}.trust4 h3{font-size:18px;margin-bottom:6px}.trust4 p{margin:0;color:var(--mute)}.trust4 a{color:inherit;font-weight:700}
.hub{list-style:none;padding:0;margin:24px 0;display:grid;gap:10px}@media(min-width:620px){.hub{grid-template-columns:repeat(2,1fr)}}@media(min-width:980px){.hub{grid-template-columns:repeat(3,1fr)}}
.hub a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:16px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;font-weight:700}.hub a:hover{border-color:var(--ink)}.hub b{white-space:nowrap;font-family:var(--mono);font-weight:500;font-size:14px}
.hub2{display:grid;gap:20px}@media(min-width:860px){.hub2{grid-template-columns:repeat(3,1fr)}}.hub2 ul{padding-left:18px;margin:8px 0}.hub2 li{margin:4px 0}.hub2 p{color:var(--mute)}
.amt.qor{font-size:24px!important}#tabs{min-height:154px}@media(min-width:700px){#tabs{min-height:104px}}#every{min-height:520px}#kitsGrid{min-height:373px}#prodCard{min-height:1800px}
.stick{position:static!important}@media(min-width:900px){.stick .stage{position:sticky;top:76px}}.stage #preview{display:block;width:100%;height:auto;max-height:calc(100vh - 170px);max-height:calc(100svh - 170px);margin:0 auto}.stage .proofview{max-height:calc(100vh - 120px);overflow:auto}.foot a{color:inherit}

/* ---- polish pass: calmer type, AA contrast, form fixes ---- */
body{font-weight:400;line-height:1.6}
h2,h3,.card-h,.kit h3,.step h3,.ev h3,.rec .rn,.jmwrap>summary,.pbh,.done h3{font-family:var(--body)!important;font-weight:600!important;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);line-height:1.2}
.hero h1,body>main h1,h1{font-family:var(--display)}
b,strong{font-weight:600}
.tab,.pill,.chip,.seg label,.seg label b,.addon b,label,.mini,.kicker,.logo,.askpeg,.checks li,.tag{font-weight:600}
.seg label small,.addon small,.hint,.field small{font-weight:400}
.total .amt,.kit .price,.tots .grand,.sticky .p b,.rec .rp,.strip-in b{font-family:var(--body)!important;font-weight:700!important;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hl,.hero h1 .hl,.hero h1 mark{font-weight:inherit}
/* top banner: fixed dark strip in both themes */
.announce{background:#16181D!important;color:#E9EDF1!important}
.announce b{color:#FFC928;font-weight:600}
/* order section: a dark card in both themes */
.quote{background:#16181D!important;color:#EEF1F4!important;color-scheme:dark}
.quote .kicker,.quote .lede,.quote h3,.quote .empty,.quote .hint{color:#B9C1CA!important}
.quote a{color:#FFD666}
.tots .grand{color:#FFC928}
form.q input,form.q select,form.q textarea{background:#20252C!important;color:#F3F5F7!important;border:1.5px solid #6B7480!important}
form.q ::placeholder{color:#A3ACB6;opacity:1}
::placeholder{color:var(--mute);opacity:1}
input:focus-visible,select:focus-visible,textarea:focus-visible,form.q input:focus,form.q textarea:focus,form.q select:focus{outline:3px solid #FFC928!important;outline-offset:2px;border-color:#FFC928!important}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill,form.q input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E8F0FE inset!important;box-shadow:0 0 0 1000px #E8F0FE inset!important;-webkit-text-fill-color:#16181D!important;caret-color:#16181D;transition:background-color 9999s}
input:autofill{-webkit-text-fill-color:#16181D!important}
input[type=date]{cursor:pointer;position:relative}
input[type=date]::-webkit-calendar-picker-indicator{opacity:1;cursor:pointer;width:22px;height:22px;filter:invert(1) brightness(1.15)}
/* Peg chat: compact on desktop, never covers the builder or form */
@media(min-width:900px){.peg-launch{padding:6px!important;gap:0!important;right:14px;bottom:14px}.peg-launch>:not(.peg-av):not(svg):not(img){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.peg-tease{display:none!important}}
@media(max-width:899px){.peg-tease{max-width:220px;font-size:13px}}
