/* "Design a system" inside the live kanexpro.com chrome: Poppins, navy #003E52, orange #FF671C.
   Orange is an accent (selection, callouts, the last call to action at a large size); body text and
   buttons use navy so every pair meets WCAG AA. Everything is scoped under .dz so the live theme's
   bootstrap rules do not reach in, and ours do not leak out. */
.dz{--n:#003E52;--n2:#002E3D;--o:#FF671C;--od:#B23F08;--ink:#1F3540;--mut:#4F6873;--line:#DCE6EA;--tint:#F3F7F9;--ok:#1E7A4C;--ctl:#7E97A2;
  font-family:Poppins,Helvetica,Arial,sans-serif;color:var(--ink);font-size:15px;line-height:1.5}
.dz *{box-sizing:border-box}
.dz{background:#fff}
.dz h1,.dz h2,.dz h3,.dz h4{font-family:Poppins,Helvetica,Arial,sans-serif;color:var(--n);letter-spacing:-.005em}
.dz a{color:var(--n)}
.dz button{font-family:inherit}
.dz :focus-visible{outline:3px solid var(--o);outline-offset:2px;border-radius:6px}
.dz-k{font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--od);text-transform:uppercase}
.dz-sub{color:var(--mut);margin:4px 0 0;font-size:14.5px}
.dz-wrap{max-width:1320px;margin:0 auto;padding:0 32px}

/* top + step tabs */
.dz-top{display:flex;align-items:flex-end;gap:16px;padding:18px 32px 8px;max-width:none}
.dz-top h1{font-size:24px;font-weight:600;margin:2px 0 0}
.dz-top-r{margin-left:auto;display:flex;gap:10px;align-items:center}
.dz-top-r .dz-link{display:inline-flex;align-items:center;min-height:44px}
.dz-crumb{font-size:13px;color:var(--mut)}.dz-crumb a{color:var(--mut);display:inline-block;padding:12px 0;margin:-12px 0}
.dz-tabs{display:flex;gap:2px;padding:0 24px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;position:sticky;top:0;background:#fff;z-index:6}
.dz-tabs::-webkit-scrollbar{display:none}
.dz-tab{flex:none;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border:0;border-bottom:3px solid transparent;background:none;color:var(--mut);font-size:14px;font-weight:500;cursor:pointer}
.dz-tab i{font-style:normal;width:24px;height:24px;border-radius:50%;border:1.5px solid #9DB3BC;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.dz-tab.done{color:var(--n)}.dz-tab.done i{background:var(--n);border-color:var(--n);color:#fff}
.dz-tab.on{color:var(--n);font-weight:600;border-bottom-color:var(--o)}.dz-tab.on i{background:var(--o);border-color:var(--o);color:#1d0d03}
.dz-tab-res{margin-left:auto}
.dz-tabs{align-items:center}
.dz-tabs .dz-skip{flex:none;margin:0 0 0 auto;min-height:40px;padding:0 14px;font-size:13px}
.dz-tabs.more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.dz-resume{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 32px;background:#FFF7F2;border-bottom:1px solid #F3D3BF;font-size:14px;color:var(--n)}
.dz-resume[hidden]{display:none}
.dz-resume span{margin-right:auto}

/* split: questions | sticky drawing */
.dz-split{display:grid;grid-template-columns:minmax(380px,42%) minmax(0,1fr);border-bottom:1px solid var(--line)}
.dz-q{padding:28px 32px 36px;border-right:1px solid var(--line);min-height:calc(100vh - 49px)}
.dz-q h2{font-size:27px;line-height:1.2;font-weight:600;margin:8px 0 4px}
.dz-cards{display:grid;gap:12px;margin:20px 0 6px}
.dz-cards-2{grid-template-columns:1fr 1fr}
.dz-card{display:flex;flex-direction:column;gap:4px;text-align:left;border:1.5px solid var(--ctl);border-radius:14px;padding:14px 16px;background:#fff;color:var(--n);cursor:pointer;min-height:64px;transition:border-color .15s,box-shadow .15s,background .15s}
.dz-card-h{display:flex;align-items:center;gap:12px}
.dz-card-h svg{flex:none;width:34px;height:34px;color:var(--n)}
.dz-card b{font-weight:600;font-size:15px;line-height:1.25}
.dz-card small{color:var(--mut);font-size:13px;padding-left:46px}
.dz-card:hover{border-color:#8FAAB5}
.dz-card.sel{border-color:var(--od);background:#FFF7F2;box-shadow:0 0 0 4px rgba(255,103,28,.13)}
.dz-card.sel svg{color:var(--od)}
.dz-rows{margin:16px 0 4px;border-top:1px solid var(--line)}
.dz-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.dz-row small{display:block;color:var(--mut);font-size:12.5px}
.dz-step{display:inline-flex;align-items:center;border:1.5px solid var(--ctl);border-radius:12px;overflow:hidden;flex:none;background:#fff}
.dz-step button{width:44px;height:44px;border:0;background:var(--tint);color:var(--n);font-size:21px;line-height:1;cursor:pointer}
.dz-step button:disabled{color:#9DB0B8;cursor:default}
.dz-step output{min-width:48px;text-align:center;font-weight:600;color:var(--n);font-size:16px}
.dz-step-s button{width:44px;height:40px;font-size:18px}.dz-step-s output{min-width:38px;font-size:15px}
.dz-field{margin-top:20px}
.dz-lab{font-size:13px;font-weight:600;color:var(--n);margin-bottom:8px}
.dz-wallpick{display:inline-grid;gap:4px;padding:8px;border:1.5px solid var(--line);border-radius:12px}
.dz-wallpick [role=row]{display:flex;gap:4px}
.dz-wallpick button{width:44px;height:32px;border:1.5px solid #7E97A2;border-radius:4px;background:#fff;cursor:pointer}
.dz-wallpick button.on{background:var(--n);border-color:var(--n)}
.dz-wallpick button:hover{border-color:var(--o)}
.dz-wallsay{display:inline-block;margin-left:14px;vertical-align:top;font-size:14px;color:var(--mut)}
.dz-seg{display:inline-flex;border:1.5px solid var(--ctl);border-radius:999px;padding:3px;gap:2px}
.dz-seg button{min-height:42px;min-width:84px;border:0;border-radius:999px;background:none;color:var(--n);font-weight:500;font-size:14.5px;cursor:pointer}
.dz-seg button.on{background:var(--n);color:#fff}
.dz-dist{margin-top:22px}
.dz-dist-v{font-size:15px;color:var(--mut);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dz-dist-v input{width:104px;height:48px;border:1.5px solid var(--ctl);border-radius:12px;font:600 22px Poppins,sans-serif;color:var(--n);text-align:center}
.dz-dist-b{margin-left:6px;padding:4px 12px;border-radius:999px;background:#FFF1E8;color:var(--od);font-weight:600;font-size:13px}
.dz-dist input[type=range]{width:100%;margin:22px 0 4px;accent-color:var(--n);height:28px}
.dz-ticks{position:relative;height:20px;font-size:12px;color:var(--mut);margin:0 8px}
.dz-ticks span{position:absolute;transform:translateX(-50%)}
.dz-ticks span:before{content:"";position:absolute;left:50%;top:-8px;height:6px;border-left:1.5px solid #9DB3BC}
.dz-why{margin-top:14px;border-left:3px solid var(--o);background:#FFF7F2;padding:10px 14px;border-radius:0 10px 10px 0;font-size:14px}
.dz-warn,.dz-callout.dz-warn{border-left:3px solid #C2570C;background:#FFF7F0;padding:10px 14px;border-radius:0 10px 10px 0;font-size:14px;margin-top:10px}
.dz-nav{display:flex;justify-content:space-between;gap:10px;margin-top:26px;flex-wrap:wrap}
.dz-q .dz-nav{position:sticky;bottom:0;z-index:4;background:#fff;padding:12px 0;margin-bottom:-12px;box-shadow:0 -10px 12px -10px rgba(0,46,61,.18)}

.dz-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1.5px solid var(--n);background:#fff;color:var(--n);font-weight:600;font-size:14.5px;cursor:pointer;text-decoration:none;white-space:nowrap}
.dz-btn:hover{background:var(--tint)}
.dz-btn:disabled{border-color:#B9CBD2;color:#7E949D;cursor:default;background:#fff}
.dz-btn-n,.dz a.dz-btn-n{background:var(--n);color:#fff}.dz-btn-n:hover{background:var(--n2)}
.dz-btn-o{background:var(--o);border-color:var(--o);color:#1d0d03;font-size:16px;font-weight:700}.dz-btn-o:hover{background:#ff7d3b}
.dz-btn-s{min-height:44px;padding:0 14px;font-size:13.5px}
.dz-link{background:none;border:0;padding:0;color:var(--n);text-decoration:underline;font-size:14px;cursor:pointer;min-height:24px}
.dz-ic{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--ctl);background:#fff;color:var(--n);font-size:19px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dz-ic:hover{border-color:#8FAAB5}
.dz-pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500;color:var(--mut);background:#fff}
.dz-pill-n{border-color:var(--n);color:var(--n);background:#EEF5F8}

/* the drawing panel */
.dz-canvas{background:var(--tint);padding:18px 22px}
.dz-frame{position:sticky;top:60px;height:calc(100vh - 78px);display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(0,62,82,.07);overflow:hidden}
.dz-fh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--mut)}
.dz-fh b{color:var(--n);font-size:16px;font-weight:600}
.dz-zoom{display:flex;gap:6px}
.dz-draw{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;touch-action:none;cursor:grab}
.dz-draw svg{width:100%;height:100%;display:block}
.dz-leg{display:flex;gap:14px;flex-wrap:wrap;padding:8px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut)}
.dz-leg i{display:inline-block;width:22px;vertical-align:middle;margin-right:6px}
.dz-leg .lg-by{border:1.5px dashed #93A9B3;height:12px;width:20px;border-radius:3px}
.dz-leg .lg-n{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--o);color:#1d0d03;font-size:11px;align-items:center;justify-content:center;margin-right:6px}
.dz-chips{display:flex;gap:8px;flex-wrap:wrap;padding:4px 18px 10px}
.dz-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;color:var(--n);min-height:34px;display:inline-flex;align-items:center;gap:4px}
.dz-chip b{color:var(--od)}
.dz-chip.chg{border-color:var(--o);animation:dzFlash 1.4s}
.dz-chip-why{cursor:pointer;font-weight:600;min-height:44px}
.dz-whybox{margin:0 18px 10px;border-left:3px solid var(--o);background:#FFF7F2;padding:8px 14px;border-radius:0 10px 10px 0;font-size:14px}
.dz-whybox p{margin:4px 0}
.dz-sig{margin:0;padding:0 18px 10px;font-size:12px;color:var(--mut)}
.dz-frame.fs{position:fixed;inset:0;top:0;height:100%;z-index:10003;border-radius:0}
html.dz-noscroll{overflow:hidden}
.dz-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 20px;text-align:center;color:var(--mut);margin:auto}
.dz-empty b{color:var(--n);font-size:17px}
.dz-err{margin:40px auto;max-width:640px;padding:20px;border:1px solid #E7B9A0;background:#FFF7F2;border-radius:12px}

/* drawing nodes */
.dz-svg .nd{transition:opacity .2s}
.dz-svg .nd-new{animation:dzIn .5s cubic-bezier(.2,.8,.2,1) both}
.dz-svg .ln-new{stroke-dasharray:1;stroke-dashoffset:1;animation:dzDraw .7s .15s ease-out forwards}
.dz-svg .ln-new[stroke-dasharray]{animation:none}
.dz-svg .nd-chg .badge rect,.dz-svg .nd-chg>rect:not(.nd-hit){animation:dzBadge 1.4s}
.dz-svg .nd-hi .nd-hit{fill:rgba(255,103,28,.08);stroke:#FF671C;stroke-width:2.5}
.dz-svg [data-slot]{cursor:pointer}
@keyframes dzIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dzDraw{to{stroke-dashoffset:0}}
@keyframes dzBadge{0%,60%{fill:#FF671C}100%{}}
@keyframes dzFlash{0%,50%{box-shadow:0 0 0 4px rgba(255,103,28,.35);background:#FFF1E8}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.dz-svg .nd-new,.dz-svg .ln-new,.dz-chip.chg,.dz-part.chg,.dz-other.chg,.dz-ttab tr.chg{animation:none!important}.dz-svg .ln-new{stroke-dashoffset:0}}

/* the live footer sits at z-index 9999, so everything we pin to the screen goes above it */
/* the preview while answering, the result after: one at a time */
.dz-fh-s{display:block;font-size:12px;color:var(--mut);line-height:1.2}
.dz-fh-s[hidden]{display:none}
.dz-grab,.dz-peek-x,.dz-dock,.dz-scrim{display:none}
.dz-skip[hidden]{display:none}
.dz-skipl{display:none;margin:14px 0 0;font-size:13.5px;color:var(--mut)}
.dz-skipl .dz-link{min-height:44px;font-size:13.5px}
.dz:not(.dz-at-res) .dz-result,.dz:not(.dz-at-res) .dz-totbar{display:none}
.dz-at-res .dz-q{display:none}
.dz-at-res .dz-split{grid-template-columns:minmax(0,1fr);border-bottom:0}
.dz-at-res .dz-canvas{padding:18px 32px 0;background:#fff}
.dz-at-res .dz-frame{position:relative;top:0;height:min(64vh,660px);max-width:1256px;margin:0 auto;box-shadow:none}
.dz-at-res .dz-frame.fs{position:fixed;height:100%;max-width:none}
.dz-at-res .dz-result{padding-top:22px}
.dz-at-res .dz-result{padding-bottom:28px}
.dz-back{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
html.dz-embed .dz-stagebar,html.dz-embed header.header,html.dz-embed .footer,html.dz-embed .mobile-menu-container,html.dz-embed .mobile-menu-overlay,html.dz-embed .dz-crumb{display:none!important}
html.dz-embed .dz-top,html.dz-embed .dz-help{display:none}

/* result */
.dz-result{padding:36px 0 120px;background:#fff}
.dz-rh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.dz-rh h2{font-size:26px;margin:6px 0 0;font-weight:600}
.dz-acts{display:flex;gap:8px;flex-wrap:wrap}
.dz-whyp{margin:20px 0 6px;border:1px solid var(--line);border-left:4px solid var(--n);border-radius:10px;padding:14px 18px;background:var(--tint);font-size:15px}
.dz-callout{display:flex;gap:10px;align-items:baseline;margin-top:10px;padding:10px 14px;border-radius:0 10px 10px 0;font-size:14px}
.dz-callout>b{flex:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.dz-callout.dz-warn>b{color:#9A3F0A}
.dz-callout.dz-info{border-left:3px solid var(--n);background:#EEF5F8}
.dz-callout.dz-info>b{color:var(--n)}
.dz-sm{font-size:13px;padding:8px 12px}
.dz-parts{columns:2;column-gap:20px;margin-top:22px}
.dz-grp{break-inside:avoid;display:inline-block;width:100%;margin-bottom:8px}
.dz-grp h3{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:14px 0 8px}
.dz-part{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;background:#fff;transition:border-color .15s,box-shadow .15s}
.dz-part.hi{border-color:var(--o);box-shadow:0 0 0 3px rgba(255,103,28,.14)}
.dz-part.chg{animation:dzFlash 1.6s}
.dz-part-art{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #EEF3F5;border-radius:10px;padding:6px;min-height:72px}
.dz-part-art img{max-width:100%;max-height:96px;object-fit:contain}
.dz-noart{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:60px;border:1.5px solid var(--n);border-radius:8px;background:var(--tint);color:var(--n);font-weight:600;font-size:12.5px;text-align:center;padding:6px}
.dz-noart small{font-weight:400;color:var(--mut);font-size:11.5px}
.dz-part-h{display:flex;align-items:center;gap:10px}
.dz-n{display:inline-flex;flex:none;width:26px;height:26px;border-radius:50%;background:var(--o);color:#1d0d03;font-weight:700;font-size:13px;align-items:center;justify-content:center}
.dz-mpn{font-weight:700;color:var(--n);font-size:15.5px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.dz-mpn:hover{text-decoration:underline}
.dz-qty{margin-left:auto;font-weight:700;color:var(--n);font-size:18px}
.dz-t{font-size:13.5px;color:var(--ink);margin:3px 0 4px}
.dz-w{font-size:13.5px;color:var(--mut);margin-top:3px}
.dz-part-a{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.dz-others{margin-top:18px}
.dz-ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.dz-other{border:1.5px dashed #A9BEC6;border-radius:12px;padding:12px 14px;background:var(--tint)}
.dz-other.chg{animation:dzFlash 1.6s}
.dz-other-h{display:flex;justify-content:space-between;gap:8px;color:var(--n)}
.dz-other-h span{font-weight:700}
.dz-other p{margin:4px 0 0;font-size:13.5px;color:var(--mut)}
.dz-cite{display:inline-flex;align-items:center;margin-left:4px;padding:0 8px;min-height:22px;border-radius:999px;border:1px solid #A9C3CD;background:#fff;color:#2C5361;font:500 11.5px Poppins,sans-serif;vertical-align:1px;cursor:pointer;white-space:nowrap}
.dz-cite:hover{border-color:var(--n)}
.dz-ck{color:var(--ok);font-weight:700;margin-right:4px}
.dz-pop .dz-pop-h{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--od);margin-bottom:8px}
.dz-half{grid-template-columns:1fr;border-style:dashed;background:var(--tint)}
.dz-same{margin-left:auto;font-size:13px;font-weight:600;color:var(--mut)}
/* the lead card on the result and its two forms */
.dz-lead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:16px 0 4px;padding:16px 18px;border:1.5px solid #F3C9B0;border-radius:14px;background:#FFF7F2}
.dz-lead>div:first-child{flex:1 1 260px;min-width:0}
.dz-lead b{display:block;color:var(--n);font-size:16px}
.dz-lead span{color:var(--mut);font-size:14px}
.dz-lead-a{display:flex;gap:10px;flex-wrap:wrap}
.dz-dlg.dz-dlg-l{max-width:min(640px,96vw);width:100%;max-height:92vh;overflow:auto}
.dz-lf .dz-sh-h h3{font-size:19px}
.dz-fg{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:12px 0}
.dz-fg label,.dz-about{min-width:0;display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:#003E52}
.dz-fg input,.dz-fg select,.dz-fg textarea,.dz-about textarea,.dz-pick select{width:100%;min-width:0;max-width:100%;height:44px;border:1.5px solid #7E97A2;border-radius:10px;padding:0 10px;font:15px Poppins,Helvetica,Arial,sans-serif;color:#1F3540;background:#fff}
.dz-fg textarea,.dz-about textarea{height:84px;padding:8px 10px;font-size:13.5px;resize:vertical}
.dz-pick{margin:4px 0 12px}.dz-pick .dz-lab{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;font-weight:600;color:#003E52}
.dz-pdays,.dz-ptimes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dz-pc{min-height:40px;padding:0 12px;border:1.5px solid #7E97A2;border-radius:999px;background:#fff;color:#003E52;font:500 13.5px Poppins,Helvetica,Arial,sans-serif;cursor:pointer}
.dz-pc[aria-pressed=true]{background:#003E52;border-color:#003E52;color:#fff}
.dz-pnote,.dz-lf-fine{font-size:12.5px;color:#4F6873;margin:6px 0 0}
.dz-lf-err{color:#9A3F0A;font-size:14px;margin:8px 0 0}
.dz-chk{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:#1F3540}
.dz-chk input{width:20px;height:20px;accent-color:#003E52}
.dz-cite-ans{border-style:dashed;color:var(--mut)}
.dz-draft{border-color:#E3A47E;background:#FFF1E8;color:#8C3507}
.dz-draft-i{display:inline-block;padding:0 7px;border-radius:999px;background:#FFF1E8;color:#8C3507;font-size:11.5px;border:1px solid #E3A47E}
.dz-pop{position:absolute;z-index:10005;width:320px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,46,61,.18);padding:12px 14px;font-size:13px;color:var(--ink)}
.dz-pop b{display:block;color:var(--n);margin-bottom:4px}
.dz-pop .dz-pop-r{display:block;font-weight:600;color:var(--mut);font-size:12px}
.dz-pop .dz-pop-s{display:block;margin-top:6px;color:var(--mut);font-size:12px}
.dz-pop a{display:inline-block;margin-top:4px;font-size:12.5px}
.dz-pop-i+.dz-pop-i{margin-top:10px;padding-top:10px;border-top:1px solid #DCE6EA}
.dz-pop{max-height:60vh;overflow:auto}
.dz-rules{margin-top:26px;border:1px solid var(--line);border-radius:14px;padding:6px 18px}
.dz-rules summary{cursor:pointer;font-weight:600;color:var(--n);min-height:44px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dz-rules summary span{font-weight:400;color:var(--mut);font-size:13.5px}
.dz-rules h4{font-size:14px;margin:14px 0 6px}
.dz-rules ul{margin:0 0 10px;padding-left:18px;font-size:13.5px}
.dz-rules li{margin:4px 0}
.dz-facts{columns:2;column-gap:28px}
.dz-facts li{break-inside:avoid}

/* trade view */
.dz-tradenote{margin:22px 0 10px;font-size:13.5px;color:var(--mut)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px}
.tbl-scroll{border-collapse:collapse;width:100%;min-width:880px}
.dz-ttab th{position:sticky;top:0;background:var(--tint);text-align:left;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:10px 12px;border-bottom:1px solid var(--line)}
.dz-ttab td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
.dz-ttab td:nth-child(3){min-width:300px}
.dz-ttab .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dz-ttab tfoot td{background:var(--tint);font-size:15px;border-bottom:0}
.dz-ttab tr.chg td{animation:dzFlash 1.6s}
.dz-ttab tr[data-slot]:hover td{background:#FFFAF6}
table.rownum{counter-reset:rn}
table.rownum tbody tr{counter-increment:rn}
table.rownum td.rn:before{content:counter(rn)}
table.rownum .rn{width:40px;color:var(--mut);font-size:12.5px}
.dz-band{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#EEF5F8;color:var(--n);white-space:nowrap}
.dz-band-instock{background:#E6F4EC;color:var(--ok)}
.dz-band-low{background:#FFF1E8;color:#8C3507}
.dz-totbar{position:fixed;left:0;right:0;bottom:0;z-index:10000;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 32px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,46,61,.08);font-family:Poppins,Helvetica,Arial,sans-serif}
.dz-tot-t{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;color:var(--mut);font-size:13.5px}
.dz-tot-t b{font-size:22px;color:#003E52;font-variant-numeric:tabular-nums}
.dz-tot-t small{font-size:12px;color:#4F6873}
.dz-tot-a{display:flex;gap:10px}
.dz-stub{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;background:#FFF1E8;color:#8C3507;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.dz-btn-n .dz-stub{background:rgba(255,255,255,.2);color:#fff}

/* swap sheet, dialog, toast, help */
.dz-sheet{margin:0 0 0 auto;height:100vh;max-height:100vh;width:min(520px,100vw);border:0;padding:20px 22px;box-shadow:-12px 0 40px rgba(0,46,61,.2);font-family:Poppins,Helvetica,Arial,sans-serif;color:#1F3540}
.dz-sheet::backdrop,.dz-dlg::backdrop{background:rgba(0,30,40,.35)}
.dz-sh-h{display:flex;justify-content:space-between;align-items:center}
.dz-sh-h h3{margin:0;font-size:20px;display:flex;gap:8px;align-items:center;color:#003E52}
.dz-alts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.dz-alt{display:grid;grid-template-columns:24px 110px minmax(0,1fr);gap:12px;align-items:center;border:1.5px solid #7E97A2;border-radius:12px;padding:10px 12px;cursor:pointer;min-height:64px}
.dz-alt input{width:20px;height:20px;accent-color:#003E52}
.dz-alt.sel{border-color:#B23F08;background:#FFF7F2}
.dz-alt.off{background:#F7F9FA;cursor:not-allowed}
.dz-alt.off .dz-alt-b>b,.dz-alt.off .dz-alt-art{opacity:.6}
.dz-alt-art img{max-width:110px;max-height:52px;object-fit:contain;display:block}
.dz-alt-b{display:flex;flex-direction:column;gap:2px;font-size:13px}
.dz-alt-b b{color:#003E52;font-size:14.5px}
.dz-alt-b .dz-pill{align-self:flex-start}
.dz-alt-b small{color:#4F6873;font-size:12.5px}
.dz-why-no{color:#8C3507;font-size:12.5px}
.dz-dlg{border:0;border-radius:16px;padding:22px 24px;max-width:480px;box-shadow:0 20px 50px rgba(0,46,61,.25);font-family:Poppins,Helvetica,Arial,sans-serif;color:#1F3540}
.dz-dlg h3{margin:0 0 8px;color:#003E52;font-size:19px}
.dz-dlg-b{font-size:14.5px}
.dz-copy{width:100%;height:44px;border:1px solid #DCE6EA;border-radius:10px;padding:0 10px;font:13px monospace}
.dz-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#003E52;color:#fff;border-radius:999px;padding:10px 20px;font:500 14px Poppins,sans-serif;z-index:10004;transition:.25s;max-width:calc(100vw - 32px)}
.dz-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dz-toast .dz-link{color:#FFB48A;margin-left:8px}
.dz-help{position:fixed;right:18px;bottom:18px;z-index:10000;min-height:48px;padding:0 18px;border-radius:999px;border:0;background:#003E52;color:#fff;font:500 14px Poppins,sans-serif;box-shadow:0 6px 18px rgba(0,46,61,.25);cursor:pointer}
.dz-print{display:none}

/* tablet and phone */
@media (max-width:980px){
  .dz-top{padding:14px 16px 6px}.dz-top h1{font-size:20px}
  .dz-tabs{padding:0 8px}
  .dz-split{grid-template-columns:minmax(0,1fr)}
  .dz-canvas{display:none}
  .dz-canvas:has(.fs){display:block;padding:0}
  .dz-frame.fs{display:flex}
  .dz-dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:10000;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 22px rgba(0,46,61,.10);padding:8px 12px calc(10px + env(safe-area-inset-bottom))}
  .dz-at-res .dz-dock{display:none}
  .dz-mini{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .dz-dnav{display:flex;gap:10px;padding-top:8px}
  .dz-dnav .dz-btn{flex:1 1 0;min-height:52px;font-size:15.5px;padding:0 10px}
  .dz-dnav .dz-btn-n,.dz-dnav .dz-btn-o{flex:2 1 0}
  .dz-q .dz-nav{display:none}
  .dz-skipl{display:block}
  .dz-tabs .dz-skip{display:none}
  .dz-fg{grid-template-columns:1fr}
  .dz-lead-a .dz-btn{flex:1 1 100%}
  .dz-resume{padding:10px 16px}
  .dz-fh>div:first-child{min-width:0;line-height:1.25}
  .dz-c-l,.dz-fh-s{display:none!important}
  .dz:not(.dz-at-res) .dz-q{padding-bottom:180px}
  .dz:not(.dz-at-res) .dz-toast{bottom:150px}
  .dz-top-r .dz-skip{padding:0 12px;font-size:13px}
  .dz-scrim{position:fixed;inset:0;z-index:10001;background:rgba(0,30,40,.4)}
  .dz-scrim:not([hidden]){display:block}
  .dz-canvas.peek{display:block;position:fixed;left:0;right:0;bottom:0;top:7vh;z-index:10002;padding:0;background:transparent}
  .dz-canvas.peek .dz-frame{position:relative;top:0;height:100%;border-radius:18px 18px 0 0;transition:transform .2s ease-out}
  .dz-canvas.peek .dz-grab{display:flex;justify-content:center;padding:8px 0 2px;touch-action:none;cursor:grab}
  .dz-canvas.peek .dz-grab i{width:44px;height:5px;border-radius:3px;background:#B9CBD2}
  .dz-canvas.peek .dz-fh{touch-action:none}
  .dz-canvas.peek .dz-peek-x{display:inline-flex}
  .dz-canvas.peek #dz-fsb{display:none}
  .dz-canvas.peek .dz-fh{flex-wrap:nowrap;padding:6px 10px 8px 14px}
  .dz-canvas.peek .dz-fh>div:first-child{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .dz-canvas.peek .dz-fh-s,.dz-canvas.peek .dz-c-l{display:none}
  .dz-canvas.peek .dz-zoom{gap:4px;flex:none}
  .dz-at-res .dz-canvas{display:block;padding:12px 12px 0}
  .dz-at-res .dz-frame{height:58vh}
  .dz-mini-th{width:72px;height:46px;flex:none;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;cursor:pointer}
  .dz-mini-th svg{width:100%;height:100%}
  .dz-mini-t{min-width:0;font-size:12.5px;line-height:1.3;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dz-mini-t b{display:block;color:var(--n);font-size:14px}
  .dz-mini .dz-btn{margin-left:auto;flex:none}
  .dz-q{padding:20px 16px 28px;border:0;min-height:0}
  .dz-q h2{font-size:22px}
  .dz-cards-2{grid-template-columns:1fr}
  .dz-card{padding:10px 14px;min-height:56px}
  .dz-card-h svg{width:28px;height:28px}
  .dz-card small{padding-left:40px}
  .dz-wrap{padding:0 16px}
  .dz-parts{columns:1}
  .dz-part{grid-template-columns:1fr}
  .dz-part-art{min-height:56px}
  .dz-facts{columns:1}
  .dz-rh h2{font-size:21px}
  .dz-acts .dz-btn{flex:1 1 44%}
  .dz-totbar{padding:10px 12px;flex-direction:column;align-items:stretch;gap:8px}
  .dz-tot-a .dz-btn{flex:1 1 0;min-width:0;padding:0 8px;font-size:14px}
  .dz-lg{display:none}
  .dz-tot-t small{display:none}
  .dz-tot-t b{font-size:19px}
  .dz-wallsay{display:block;margin:10px 0 0}
  .dz-alt{grid-template-columns:22px 72px minmax(0,1fr)}
  .dz-alt-art img{max-width:72px}
  .dz-tab-res{margin-left:0}
}
@media (max-width:980px){.dz[data-mode=trade] .dz-result{padding-bottom:250px}}

/* print: cover with the venue and the drawing, then the parts, then the notes */

/* round 3: three screens. Room = venue + counts on one screen; Extras = compact toggle cards; switching on the result */
.dz-cards-v{grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.dz-cards-v .dz-card{min-height:0;padding:10px 12px}
.dz-cards-v .dz-card-h svg{width:28px;height:28px}
.dz-cards-v .dz-card small{padding-left:40px;font-size:12.5px}
.dz-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 20px}
.dz-two .dz-rows{margin-top:0}
.dz-two .dz-row{padding:6px 0;font-size:13.5px;line-height:1.3}
.dz-two .dz-step button{width:36px;height:38px;font-size:18px}.dz-two .dz-step output{min-width:34px;font-size:15px}
.dz-lab small{font-weight:400;color:var(--mut);margin-left:4px}
.dz-lab-2{margin-top:14px}
.dz-wallrow .dz-wallpick button{width:34px;height:24px}
.dz-wallrow .dz-wallsay{display:block;margin:8px 0 0}
.dz-cards-t{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin:0}
.dz-cards-t .dz-card{min-height:0;padding:9px 11px;border-radius:12px}
.dz-cards-t .dz-card-h{gap:8px}
.dz-cards-t .dz-card-h svg{width:24px;height:24px}
.dz-cards-t .dz-card b{font-size:14px}
.dz-cards-t .dz-card small{padding-left:32px;font-size:12px}
.dz-built{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;font-size:15px;color:var(--n)}
.dz-built>span{color:var(--mut)}.dz-built b{color:var(--n)}
.dz-built .dz-link{font-weight:600}
.dz-swbox{margin:10px 0 4px;border:1px solid var(--line);border-radius:12px;padding:12px 16px 16px;background:#fff}
.dz-swbox .dz-sub{margin:0 0 10px}
@media (max-width:600px){
  .dz-cards-v .dz-card small{display:none}
  .dz-cards-t{grid-template-columns:1fr 1fr}
}

/* round 3 result (Kelvin: "too much information and messy confusing"): one header, one action row, compact part rows */
.dz-rhead{display:none}
.dz-at-res .dz-rhead{display:block;padding:4px 0 14px}
.dz-at-res .dz-rhead .dz-back{margin-bottom:10px}
.dz-at-res #dz-count,.dz-at-res #dz-chips,.dz-at-res #dz-whybox,.dz-at-res .dz-sig{display:none!important}
.dz-rh{align-items:flex-start}
.dz-rh-t{flex:1 1 420px;min-width:0}
.dz-rh-s{margin:6px 0 0;color:var(--mut);font-size:15px;max-width:52em}
.dz-rh .dz-built{margin-top:8px}
.dz-built .dz-link{margin-left:6px}
.dz-bk-how{margin:4px 0 0;font-weight:600;color:var(--n)}
.dz-acts{align-items:center}
.dz-more{position:relative}
.dz-more>summary{list-style:none;cursor:pointer}
.dz-more>summary::-webkit-details-marker{display:none}
.dz-more>summary::after{content:" ▾";font-size:12px}
.dz-more-m{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;align-items:stretch;min-width:190px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,46,61,.16)}
.dz-more-m .dz-link{display:block;text-align:left;padding:10px 12px;border-radius:8px;text-decoration:none;font-weight:500}
.dz-more-m .dz-link:hover{background:var(--tint)}
.dz-more-m .dz-link:disabled{color:#9DB0B8}
.dz-parts-h{display:flex;align-items:baseline;gap:12px;margin:26px 0 0;padding-bottom:8px;border-bottom:2px solid var(--n)}
.dz-parts-h h3{margin:0;font-size:19px;font-weight:600;color:var(--n)}
.dz-parts-h span{color:var(--mut);font-size:14px}
.dz-parts{columns:1;margin-top:4px}
.dz-grp h4{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:16px 0 6px}
.dz-part{grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px 14px;margin-bottom:6px;border-radius:12px}
.dz-part-art{min-height:56px;padding:4px;border:0;background:var(--tint)}
.dz-part-art img{max-height:56px}
.dz-noart{min-height:48px;border:0;background:none;color:#9DB0B8}
.dz-part .dz-t{font-size:14px;color:var(--mut);margin-top:2px}
.dz-w0{font-size:13px;color:var(--n);margin-top:2px}
.dz-part-a{margin-top:0;flex-wrap:nowrap;justify-content:flex-end}
.dz-why1{margin-top:4px;font-size:13.5px}
.dz-why1>summary{cursor:pointer;color:var(--n);font-weight:500;font-size:13px;width:max-content}
.dz-why1 p{margin:6px 0 0;color:var(--mut)}
.dz-fold{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:#fff}
.dz-fold>summary{cursor:pointer;font-weight:600;color:var(--n)}
.dz-fold>summary span{font-weight:400;color:var(--mut);margin-left:8px;font-size:14px}
.dz-fold p{margin:8px 0 0;font-size:14px;color:var(--mut)}
.dz-others ul{margin:10px 0 0;padding:0;list-style:none}
.dz-others li.dz-other{border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:8px 0;font-size:14px;color:var(--mut)}
.dz-others li.dz-other b{color:var(--n);font-weight:600}
@media (max-width:700px){
  .dz-part{grid-template-columns:72px minmax(0,1fr);gap:10px}
  .dz-part-a{grid-column:2;justify-content:flex-start}
  .dz-acts{width:100%}
  .dz-acts>.dz-btn{flex:1 1 44%}
  .dz-acts #dz-book{flex-basis:100%}
}
/* product photos, quick view and the spec sheet viewer (Kelvin: no new pages for these) */
.dz-qv-t{display:block;width:100%;border:0;padding:0;background:#fff;cursor:zoom-in;border-radius:8px}
.dz-qv-t img{display:block;width:100%;height:72px;object-fit:contain}
.dz-part-art{background:#fff;border:1px solid var(--line)}
.dz-mpn[data-qv]{cursor:pointer}
dialog.dz-qv{width:min(760px,94vw)}
.dz-qv-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.dz-qv-img img{display:block;width:100%;max-height:300px;object-fit:contain;background:#fff}
.dz-qv-img .dz-qv-cad{margin-top:10px;max-height:110px;border-top:1px solid var(--line);padding-top:10px}
.dz-qv-title{font-weight:600;color:var(--n);font-size:16px;margin:0 0 8px}
.dz-qv-in{margin:0 0 8px;color:var(--mut)}
.dz-qv-t2 p{font-size:14px}
.dz-pdfv{width:min(980px,96vw);height:min(92vh,1100px);max-width:none;max-height:none;padding:0;border:0;border-radius:14px;overflow:hidden}
.dz-pdfv[open]{display:flex;flex-direction:column}
.dz-pdfv .dz-sh-h{padding:10px 14px;border-bottom:1px solid var(--line);margin:0}
.dz-pdf-p{flex:1;overflow-y:auto;background:#525659;padding:14px;display:flex;flex-direction:column;align-items:center;gap:14px}
.dz-pdf-p img{display:block;width:100%;max-width:900px;height:auto;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.35);cursor:zoom-in}
.dz-pdf-p.z{align-items:flex-start;overflow:auto}
.dz-pdf-p.z img{width:1400px;max-width:none;cursor:zoom-out}
.dz-pdf-hint{font-size:12.5px;color:var(--mut)}
@media (min-width:701px){.dz-pdf-hint{display:none}}
.dz-pdf-a{display:flex;align-items:center;gap:12px}
.dz-pdfv::backdrop,dialog.dz-qv::backdrop{background:rgba(0,30,40,.55)}
@media (max-width:700px){.dz-qv-b{grid-template-columns:1fr}.dz-pdfv{width:100vw;height:100dvh;border-radius:0}.dz-qv-t img{height:56px}}
/* the print footer exists only on paper */
.pc-foot{display:none}
/* the quick view's "Watch the film" button */
.dz-btn svg{vertical-align:-1px;margin-right:2px}
@media print{
  @page{size:letter;margin:14mm 14mm 20mm}
  body *{visibility:visible}
  .dz-stagebar,header.header,.footer,.mobile-menu-container,.mobile-menu-overlay,.dz-top,.dz-tabs,.dz-split,.dz-dock,.dz-back,.dz-scrim,.dz-help,.dz-toast,.dz-pop,.dz-totbar,.dz-acts,.dz-part-a,.dz-cite,.dz-tradenote,.dz-lead,.dz-built,.dz-swbox,.dz-more,.dz-why1>summary,dialog{display:none!important}
  .dz-fold{border:0;padding:0}.dz-fold>summary{list-style:none}.dz-why1 p{display:none}
  /* round 3: the short link on every page (a fixed box repeats on each printed page); the emailed PDF is this page */
  .pc-foot{display:flex!important;position:fixed;left:0;right:0;bottom:-12mm;justify-content:space-between;font-size:8.5pt;color:#4F6873;border-top:.5pt solid #DCE6EA;padding-top:3pt}
  .pc-foot b{color:#003E52}
  .pc-link{margin-top:8pt!important;font-size:10pt;color:#4F6873!important}.pc-link b{color:#003E52}
  .dz{font-size:11pt}
  .dz-print{display:block}
  .pc-cover{page-break-after:always;break-after:page}
  .pc-brand{font-size:10pt;letter-spacing:.14em;text-transform:uppercase;color:#B23F08;font-weight:600}
  .pc-cover h1{font-size:26pt;margin:6pt 0 4pt;color:#003E52}
  .pc-cover p{margin:0 0 2pt;color:#1F3540}
  .pc-d{color:#4F6873!important;font-size:9.5pt}
  .pc-draw{margin-top:12pt;border:1px solid #DCE6EA;border-radius:8pt;overflow:hidden}
  .pc-draw svg{width:100%;height:auto;max-height:200mm}
  .dz-result{padding:0}
  .dz-wrap{max-width:none;padding:0}
  .dz-parts{columns:1}
  .dz-part{break-inside:avoid;grid-template-columns:110px 1fr;border-color:#C9D6DC}
  .dz-part.chg,.dz-other.chg{animation:none}
  .dz-rules{border:0;padding:0}
  .dz-rules[open] summary~*,.dz-rules summary~*{display:block}
  .dz-ttab td:nth-child(6),.dz-ttab th:nth-child(6),.dz-ttab td:nth-child(7),.dz-ttab th:nth-child(7),.dz-ttab tfoot{display:none}
  .tbl-scroll{min-width:0}
  a{text-decoration:none}
}
/* b2b, on a phone: the price columns sit off to the right, so each part says its price, MSRP and margin under it */
.dz-pm{display:none;font-size:13px;color:var(--mut);margin:6px 0 0}.dz-pm b{color:var(--ink,#1f2a33)}
@media(max-width:760px){.dz-pm{display:block}}
.dz-fg label:has(textarea){grid-column:1/-1}