/* PrintProfit — shared visual design system
   Visual-only layer. No calculator or comparison behaviour is changed. */

:root{
  --pp-bg:#06131c;
  --pp-bg-2:#081a25;
  --pp-panel:#0b202c;
  --pp-panel-2:#0f2a39;
  --pp-panel-3:#122f3f;
  --pp-line:#285264;
  --pp-line-soft:#1b3c4b;
  --pp-text:#f5f9fb;
  --pp-muted:#a9bdc6;
  --pp-cyan:#35d6e5;
  --pp-orange:#ff8a24;
  --pp-orange-2:#ff9d4b;
  --pp-purple:#a97aff;
  --pp-green:#32df8b;
}

/* ---------- Global ---------- */
html{scroll-behavior:smooth!important}
body{
  background:
    radial-gradient(circle at 78% 3%,rgba(53,214,229,.08),transparent 26%),
    radial-gradient(circle at 8% 58%,rgba(255,138,36,.035),transparent 24%),
    linear-gradient(180deg,var(--pp-bg) 0%,#071923 52%,#06131c 100%)!important;
  color:var(--pp-text)!important;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(rgba(72,116,133,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,116,133,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}

button,input,select,textarea{font-family:Inter,Segoe UI,system-ui,sans-serif!important}
button{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease,color .16s ease!important}

.shell,.wrap{
  border-color:var(--pp-line)!important;
}

/* ---------- Navigation shared language ---------- */
#ppCleanTop .pp-top-nav,
.header{
  background:rgba(6,18,27,.92)!important;
  border-bottom-color:var(--pp-line)!important;
  backdrop-filter:blur(16px)!important;
}
#ppCleanTop .pp-top-links button,
.nav a{
  color:#dce8ed!important;
  font-weight:750!important;
  border-radius:10px!important;
}
#ppCleanTop .pp-top-links button:hover,
#ppCleanTop .pp-top-links button:focus-visible,
.nav a:hover,
.nav a.active{
  color:#fff!important;
  background:rgba(255,138,36,.08)!important;
}
#ppCleanTop .pp-top-links button[data-target="details"],
.nav a.active{
  box-shadow:inset 0 -2px 0 var(--pp-orange)!important;
}

/* ---------- Calculator: top hero ---------- */
#ppCleanTop{
  min-height:390px!important;
  background:
    radial-gradient(560px 320px at 78% 48%,rgba(53,214,229,.095),transparent 63%),
    linear-gradient(135deg,#06131c 0%,#091b26 58%,#07141e 100%)!important;
  border-bottom-color:var(--pp-line)!important;
}
#ppCleanTop .pp-top-body{
  grid-template-columns:minmax(0,1fr) 455px!important;
  gap:50px!important;
  padding:24px 3.1% 18px!important;
  min-height:328px!important;
}
#ppCleanTop .pp-top-copy{padding-top:18px!important}
#ppCleanTop .pp-eyebrow{
  color:var(--pp-orange)!important;
  font-size:11px!important;
  letter-spacing:.2em!important;
}
#ppCleanTop h1{
  font-size:clamp(47px,4.3vw,66px)!important;
  line-height:.94!important;
  letter-spacing:-.045em!important;
  margin:0 0 15px!important;
}
#ppCleanTop h1 strong{color:var(--pp-orange)!important}
#ppCleanTop .pp-top-copy>p{
  color:#c3d4db!important;
  font-size:17px!important;
  line-height:1.48!important;
}
#ppCleanTop .pp-top-actions{margin-top:20px!important}
#ppCleanTop .pp-top-actions button{
  height:46px!important;
  padding:0 17px!important;
  border-radius:11px!important;
  font-size:13px!important;
}
#ppCleanTop .pp-primary{
  background:linear-gradient(135deg,var(--pp-orange-2),var(--pp-orange))!important;
  border-color:var(--pp-orange)!important;
  box-shadow:0 10px 28px rgba(255,138,36,.22)!important;
}
#ppCleanTop .pp-projects-button{
  background:rgba(11,32,44,.86)!important;
  border-color:#365b6c!important;
}
#ppCleanTop .pp-top-card{
  width:455px!important;
  height:304px!important;
  margin-top:0!important;
  border-radius:25px!important;
  border-color:#31596a!important;
  background:
    radial-gradient(circle at 50% 20%,rgba(53,214,229,.08),transparent 44%),
    linear-gradient(145deg,#0d2937,#07141d)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 55px rgba(0,0,0,.35)!important;
}
#ppCleanTop .pp-top-card img{
  width:350px!important;
  height:205px!important;
  margin-top:18px!important;
  opacity:.98!important;
}
#ppCleanTop .pp-card-tagline{
  color:var(--pp-orange)!important;
  font-size:22px!important;
}
#ppCleanTop .pp-top-line{
  background:linear-gradient(90deg,transparent 0%,var(--pp-orange) 18%,var(--pp-orange) 82%,transparent 100%)!important;
  box-shadow:0 0 18px rgba(255,138,36,.32)!important;
}

/* ---------- Calculator: journey / stage strip ---------- */
#pp-master-quickcards{
  margin:8px auto 18px!important;
}
#pp-master-quickcards button{
  min-height:104px!important;
  border-radius:17px!important;
  background:
    linear-gradient(145deg,rgba(16,42,57,.96),rgba(8,25,36,.98))!important;
  border:1px solid #2d5869!important;
  box-shadow:0 10px 25px rgba(0,0,0,.17)!important;
}
#pp-master-quickcards button:hover{
  transform:translateY(-2px)!important;
  border-color:#4c7382!important;
  box-shadow:0 14px 30px rgba(0,0,0,.24)!important;
}
#pp-master-quickcards .pp-master-card-icon{
  width:60px!important;height:60px!important;min-width:60px!important;
  border-radius:16px!important;
  background:#081d29!important;
  border:1px solid #335e70!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}

/* ---------- Calculator: content panels ---------- */
.main{
  max-width:1380px!important;
  margin:0 auto!important;
  padding:22px 20px 92px!important;
}
.layout{gap:18px!important}
.panel{
  background:linear-gradient(180deg,var(--pp-panel-2),var(--pp-panel))!important;
  border:1px solid var(--pp-line)!important;
  border-radius:18px!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}
.panel+.panel{margin-top:16px!important}
.head{
  gap:14px!important;
  margin-bottom:15px!important;
}
.head h2{
  color:var(--pp-text)!important;
  font-size:18px!important;
  font-weight:850!important;
}
.head p{
  color:#a9c0c9!important;
  font-size:12.5px!important;
  line-height:1.45!important;
}
.head .icon{
  width:48px!important;height:48px!important;min-width:48px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#102c3b,#091b26)!important;
  border:1px solid #3c6677!important;
  color:var(--pp-cyan)!important;
  font-size:20px!important;
  box-shadow:0 8px 20px rgba(0,0,0,.2)!important;
}
.two,.three{gap:14px!important}
label{
  color:#cfe0e6!important;
  font-size:12px!important;
  font-weight:800!important;
  margin-bottom:6px!important;
}
input,select,textarea{
  min-height:43px!important;
  border-radius:10px!important;
  background:#081b26!important;
  color:var(--pp-text)!important;
  border:1px solid #31586a!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--pp-cyan)!important;
  box-shadow:0 0 0 3px rgba(53,214,229,.10)!important;
}
.btn{
  min-height:43px!important;
  padding:10px 14px!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,#112c3a,#0b202c)!important;
  border:1px solid #3b6172!important;
  color:#eaf3f6!important;
  font-weight:800!important;
}
.btn:hover{
  border-color:#527483!important;
  transform:translateY(-1px)!important;
}
.btn.accent{
  background:linear-gradient(135deg,var(--pp-orange-2),var(--pp-orange))!important;
  border-color:var(--pp-orange)!important;
  color:#160e08!important;
  box-shadow:0 9px 24px rgba(255,138,36,.18)!important;
}
.drop{
  min-height:155px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px dashed #4a7180!important;
  border-radius:15px!important;
  background:rgba(4,20,29,.38)!important;
}
.drop b{font-size:14px!important}
.drop small{font-size:11px!important}

/* metric cards / result cards */
.cards{gap:10px!important}
.card{
  background:linear-gradient(145deg,#102b3a,#0a202c)!important;
  border:1px solid #2e596b!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.result .card{
  padding:14px!important;
  min-height:92px!important;
}
.result .value{font-size:24px!important}
.tabs{
  background:#081b26!important;
  border:1px solid #2d5566!important;
  border-radius:12px!important;
}
.tab{
  border-radius:9px!important;
  font-weight:800!important;
}
.tab.active{
  background:linear-gradient(135deg,var(--pp-orange-2),var(--pp-orange))!important;
  color:#160e08!important;
}

/* calculator quick target controls */
.quick .btn.active{
  background:var(--pp-orange)!important;
  border-color:var(--pp-orange)!important;
  color:#160e08!important;
}
.break{
  background:rgba(5,20,29,.45)!important;
  border-color:#2b5161!important;
  border-radius:13px!important;
}
.line{
  border-bottom-color:rgba(102,145,159,.16)!important;
}

/* ---------- Compare Products ---------- */
.wrap{
  width:min(1320px,calc(100% - 34px))!important;
  padding-bottom:70px!important;
}
.header{
  min-height:78px!important;
  padding:8px 4px!important;
}
.brand{width:250px!important;flex:0 0 250px!important}
.brand img{height:56px!important}
.nav{gap:7px!important}
.nav a{font-size:13px!important;padding:10px 13px!important}

.hero{
  padding:46px 0 30px!important;
  max-width:1180px!important;
  margin:0 auto!important;
}
.kicker{
  font-size:11px!important;
  letter-spacing:.2em!important;
  color:var(--pp-orange)!important;
}
.hero h1{
  font-size:clamp(44px,5vw,68px)!important;
  line-height:.96!important;
  letter-spacing:-.045em!important;
  margin:9px 0 13px!important;
}
.hero h1 strong{color:var(--pp-orange)!important}
.hero .lead{
  max-width:880px!important;
  font-size:16.5px!important;
  line-height:1.55!important;
  color:#c5d6dd!important;
}

.tools{
  gap:12px!important;
  margin-top:20px!important;
}
.extra-tools{gap:12px!important}
.tool{
  padding:14px!important;
  min-height:94px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#102b3a,#0b202c)!important;
  border:1px solid #2d5869!important;
  box-shadow:0 8px 22px rgba(0,0,0,.10)!important;
}
.tool label{
  font-size:11px!important;
  color:#d7e5ea!important;
}
.tool input,.tool select{
  min-height:44px!important;
  font-size:14px!important;
}
.quick-tools{gap:8px!important;margin:12px 0 14px!important}
.quick-btn{
  padding:8px 12px!important;
  border-radius:999px!important;
  background:#0b202c!important;
  border:1px solid #315b6b!important;
  color:#d9e6eb!important;
  font-size:11px!important;
}
.quick-btn:hover,.quick-btn.active{
  background:rgba(255,138,36,.10)!important;
  border-color:var(--pp-orange)!important;
  color:#fff!important;
}
.meta{
  margin:10px 3px 14px!important;
  font-size:10px!important;
}

.insight{
  gap:12px!important;
  margin:12px 0 18px!important;
}
.insight-card{
  position:relative!important;
  min-height:92px!important;
  padding:15px 16px!important;
  border:1px solid #2d5869!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#102b3a,#0a202c)!important;
  box-shadow:0 9px 24px rgba(0,0,0,.12)!important;
}
.insight-card:before{
  content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;
  border-radius:4px;background:var(--pp-cyan);
}
.insight-card:nth-child(2):before{background:var(--pp-purple)}
.insight-card:nth-child(3):before{background:var(--pp-green)}
.insight-card .eyebrow{
  font-size:9px!important;
  color:#8ea8b4!important;
}
.insight-card strong{
  margin-top:5px!important;
  font-size:17px!important;
  color:#f8fafb!important;
}
.insight-card span{
  font-size:10.5px!important;
  color:#a7bbc4!important;
}

.results-toolbar{
  margin:2px 0 12px!important;
}
.results-heading strong{
  font-size:20px!important;
  font-weight:850!important;
}
.results-heading span{font-size:10px!important}
.view-switch{
  padding:3px!important;
  border-radius:11px!important;
  background:#081b26!important;
  border-color:#2c5566!important;
}
.view-btn{
  min-height:38px!important;
  padding:8px 12px!important;
  font-size:11px!important;
  border-radius:8px!important;
}
.view-btn.active{
  background:linear-gradient(135deg,var(--pp-orange-2),var(--pp-orange))!important;
  color:#160e08!important;
}
.selected-toggle{
  min-height:38px!important;
  padding:8px 12px!important;
  font-size:11px!important;
  background:#0b202c!important;
  border-color:#315b6b!important;
}

.table-wrap{
  border:1px solid #2b5869!important;
  border-radius:17px!important;
  background:linear-gradient(180deg,#102b3a,#091f2a)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18)!important;
}
table{min-width:900px!important}
th{
  padding:15px 13px!important;
  font-size:9px!important;
  letter-spacing:.13em!important;
  color:#9fb8c2!important;
  background:#081b26!important;
}
td{
  padding:15px 13px!important;
  font-size:12px!important;
}
td strong{
  font-size:13px!important;
  line-height:1.35!important;
}
tbody tr{
  transition:background .15s ease!important;
}
tbody tr:hover td{background:rgba(53,214,229,.025)!important}
.product-name-wrap{
  min-width:330px!important;
  gap:12px!important;
}
.product-thumb-wrap,.product-thumb{
  width:68px!important;height:68px!important;min-width:68px!important;
}
.product-thumb{
  border-radius:12px!important;
  border-color:#31596a!important;
  background:#071a25!important;
}
.price{font-size:16px!important;color:#fffaf4!important}
.unit{font-size:12px!important;color:#ffb16e!important}
.kind,.stock{
  padding:5px 8px!important;
  font-size:9px!important;
  border-radius:999px!important;
}
.stock.in{
  color:#80efb4!important;
  border-color:rgba(50,223,139,.42)!important;
  background:rgba(50,223,139,.07)!important;
}
.link{
  min-height:37px!important;
  padding:8px 10px!important;
  border-radius:9px!important;
  border-color:#3a6373!important;
  background:#0c2230!important;
  font-size:10px!important;
  font-weight:850!important;
}
.link:hover{
  background:rgba(255,138,36,.08)!important;
  border-color:var(--pp-orange)!important;
  color:#fff!important;
}

.card-grid{
  gap:14px!important;
  padding:12px 0!important;
}
.product-card{
  border-radius:16px!important;
  border-color:#2e596a!important;
  background:linear-gradient(145deg,#102b3a,#0a202c)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.14)!important;
  padding:15px!important;
}
.product-card:hover{
  border-color:#4a7180!important;
  transform:translateY(-2px)!important;
}
.product-card h3{font-size:14px!important}
.product-card .card-brand{font-size:10px!important}
.product-card .mini{
  border-color:#294f60!important;
  background:rgba(3,15,22,.30)!important;
  border-radius:9px!important;
}
.product-card .card-price strong{font-size:19px!important}

.saved-area{
  gap:8px!important;
  margin-top:10px!important;
}
.saved-select{
  min-height:38px!important;
  font-size:11px!important;
  background:#0b202c!important;
  border-color:#315b6b!important;
}
.compare-bar{
  width:min(1240px,calc(100% - 30px))!important;
  padding:13px 15px!important;
  border-radius:16px!important;
  background:rgba(7,20,29,.96)!important;
  border-color:rgba(255,138,36,.52)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.38),0 0 28px rgba(255,138,36,.07)!important;
}
.compare-summary strong{font-size:12px!important}
.compare-chip{
  background:#0b202c!important;
  border-color:#315b6b!important;
  font-size:10px!important;
}
.compare-btn{
  min-height:40px!important;
  padding:9px 12px!important;
  border-radius:10px!important;
  font-size:10px!important;
}
.compare-btn:not(.secondary){
  background:linear-gradient(135deg,var(--pp-orange-2),var(--pp-orange))!important;
  border-color:var(--pp-orange)!important;
  color:#160e08!important;
  box-shadow:0 8px 20px rgba(255,138,36,.15)!important;
}
.compare-btn.secondary{
  background:#0b202c!important;
  border-color:#315b6b!important;
  color:#dbe7eb!important;
}

.compare-dialog,.details-dialog{
  border-color:#315b6b!important;
  border-radius:19px!important;
  background:linear-gradient(180deg,#0d2635,#081b26)!important;
  box-shadow:0 28px 85px rgba(0,0,0,.5)!important;
}
.compare-head,.details-head{
  background:rgba(7,20,29,.96)!important;
  border-bottom-color:#2d5566!important;
}
.compare-table th{
  background:#0a1d29!important;
}
.compare-table td{
  font-size:12px!important;
}

.footer{
  color:#819aa6!important;
  border-top-color:#294d5d!important;
}

/* ---------- Light mode preservation ---------- */
body.pp-light{
  background:#eef3f5!important;
}
body.pp-light:before{display:none!important}
body.pp-light .tool,
body.pp-light .card,
body.pp-light .insight-card,
body.pp-light .product-card{
  box-shadow:0 8px 24px rgba(24,48,60,.08)!important;
}
body.pp-light input,body.pp-light select,body.pp-light textarea{
  background:#f7f9fa!important;
  color:#1b2b34!important;
  border-color:#b8c9d0!important;
}
body.pp-light .compare-bar{
  background:rgba(255,255,255,.97)!important;
}

/* ---------- Responsive ---------- */
@media(max-width:1050px){
  #ppCleanTop .pp-top-body{grid-template-columns:minmax(0,1fr) 360px!important;gap:25px!important}
  #ppCleanTop .pp-top-card{width:360px!important}
  .layout{grid-template-columns:1fr!important}
  .result{position:static!important}
}
@media(max-width:800px){
  #ppCleanTop .pp-top-body{grid-template-columns:1fr!important}
  #ppCleanTop .pp-top-card{width:100%!important;max-width:455px!important;justify-self:center!important}
  .main{padding:16px 12px 90px!important}
  .wrap{width:min(100% - 20px,1320px)!important}
}
@media(max-width:650px){
  #ppCleanTop{min-height:0!important}
  #ppCleanTop h1{font-size:36px!important}
  #ppCleanTop .pp-top-copy>p{font-size:15px!important}
  #ppCleanTop .pp-top-card{height:265px!important}
  #ppCleanTop .pp-top-card img{width:285px!important;height:170px!important}
  .panel{border-radius:15px!important;padding:13px!important}
  .head .icon{width:44px!important;height:44px!important;min-width:44px!important}
  .two,.three{grid-template-columns:1fr!important}
  .tool{min-height:auto!important}
  .insight{grid-template-columns:1fr!important}
  .results-heading strong{font-size:18px!important}
  .product-name-wrap{min-width:240px!important}
}


/* ===== PrintProfit premium art direction v3 ===== */
#ppCleanTop .pp-top-card{
  background-image:linear-gradient(90deg,rgba(5,17,25,.10),rgba(5,17,25,.04)),url('./assets/hero-workshop.webp?v=1')!important;
  background-size:cover!important;
  background-position:58% center!important;
}
#ppCleanTop .pp-top-card .pp-hero-art{display:none!important}
#ppCleanTop .pp-top-card:after{
  background:linear-gradient(180deg,rgba(3,14,21,.02) 0%,rgba(3,14,21,.10) 58%,rgba(3,14,21,.68) 100%)!important;
}
#ppCleanTop .pp-card-tagline{
  background:linear-gradient(90deg,transparent,rgba(4,16,24,.55),rgba(4,16,24,.72))!important;
  padding:8px 10px 8px 18px!important;
  border-radius:10px 0 0 10px!important;
}

/* A richer shared navigation bar */
#ppCleanTop .pp-top-nav,.header{box-shadow:0 1px 0 rgba(255,255,255,.025),0 10px 30px rgba(0,0,0,.12)!important}
#ppCleanTop .pp-top-links button:hover,#ppCleanTop .pp-top-links button:focus-visible,.nav a:hover,.nav a.active{transform:translateY(-1px)!important}

/* Shared premium card depth */
.panel,.tool,.insight-card,.card,.product-card,#pp-master-quickcards button{
  position:relative!important;overflow:hidden!important;
}
.panel:after,.tool:after,.insight-card:after,.card:after,.product-card:after,#pp-master-quickcards button:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 32%,transparent 72%,rgba(53,214,229,.018));
}

/* Calculator journey becomes a visual roadmap */
#pp-master-quickcards{position:relative!important}
#pp-master-quickcards:before{content:"";position:absolute;left:3%;right:3%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#2e6577 10%,#2e6577 90%,transparent);opacity:.75;z-index:0}
#pp-master-quickcards button{z-index:1!important}

/* Compare Products: let the workshop imagery carry the hero */
.wrap .hero{
  position:relative!important;
  isolation:isolate!important;
  min-height:285px!important;
  max-width:none!important;
  margin:0 -17px!important;
  padding:54px max(4.2%,48px) 38px!important;
  border-bottom:1px solid #2b5566!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(6,19,28,.98) 0%,rgba(6,19,28,.92) 45%,rgba(6,19,28,.45) 78%,rgba(6,19,28,.20) 100%),
    url('./assets/hero-workshop.webp?v=1')!important;
  background-size:cover!important;
  background-position:center right!important;
}
.wrap .hero:after{
  content:"";position:absolute;inset:auto 0 0;height:2px;
  background:linear-gradient(90deg,var(--pp-orange),rgba(255,138,36,.55),transparent 78%);z-index:1;
}
.wrap .hero>*{position:relative!important;z-index:2!important}
.wrap .hero .lead{max-width:720px!important}

/* Compare search gets the 'app' treatment */
.tools .tool:first-child{
  grid-column:span 2!important;
}
.tools .tool:first-child input{
  font-size:15px!important;height:48px!important;padding-left:15px!important;
  box-shadow:inset 0 0 0 1px rgba(53,214,229,.045),0 8px 22px rgba(0,0,0,.10)!important;
}

/* Make the three headline stats feel like product metrics */
.insight-card:nth-child(1) strong{font-size:21px!important}
.insight-card:nth-child(2) strong,.insight-card:nth-child(3) strong{font-size:21px!important}
.insight-card:nth-child(2) .eyebrow{color:#bca8ff!important}
.insight-card:nth-child(3) .eyebrow{color:#6cf2ad!important}

/* Cleaner, more editorial product rows */
.table-wrap table th:nth-child(1){width:80px!important}
.table-wrap table th:nth-child(2){width:38%!important}
.table-wrap table th:nth-child(3){width:13%!important}
.table-wrap table th:nth-child(4){width:10%!important}
.table-wrap table th:nth-child(5){width:10%!important}
.table-wrap table th:nth-child(6){width:10%!important}
.table-wrap table th:nth-child(7){width:10%!important}
.product-name-wrap>div:last-child strong{display:block!important;max-width:390px!important}

/* Hero artwork disappears cleanly on small displays */
@media(max-width:800px){
  .wrap .hero{margin:0 -5px!important;padding:38px 20px 28px!important;background-position:68% center!important;}
  body:not(.pp-light) .wrap .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,19,28,.92),rgba(6,19,28,.82))!important;z-index:1}
  .tools .tool:first-child{grid-column:auto!important}
  #pp-master-quickcards:before{display:none!important}
}
@media(max-width:650px){
  #ppCleanTop .pp-top-card{background-position:62% center!important}
  .wrap .hero{min-height:250px!important;background-position:70% center!important}
}


/* ===== Icon + journey correction ===== */
/* The preferred PrintProfit icon language: rounded square, thin coloured outline, simple line art. */
section.panel .head>.icon,
section.panel .head>.pp-pretty-icon,
section.panel .head>.pp-master-circular,
.merge-block .head>.icon,
.merge-block .head>.pp-pretty-icon,
.merge-block .head>.pp-master-circular{
  width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  flex:0 0 48px!important;border-radius:14px!important;
  background:#091d28!important;border:1.5px solid #35d6e5!important;
  color:#35d6e5!important;box-shadow:0 0 0 1px rgba(53,214,229,.06),0 8px 20px rgba(0,0,0,.22)!important;
}
section.panel .head>.pp-master-circular::before,
section.panel .head>.pp-master-circular::after,
.merge-block .head>.pp-master-circular::before,
.merge-block .head>.pp-master-circular::after{display:none!important}
section.panel .head>.icon svg,
section.panel .head>.pp-pretty-icon svg,
section.panel .head>.pp-master-circular svg,
.merge-block .head>.icon svg,
.merge-block .head>.pp-pretty-icon svg,
.merge-block .head>.pp-master-circular svg{
  width:30px!important;height:30px!important;fill:none!important;stroke:currentColor!important;
  stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;filter:none!important;
}
/* Stage identity colours */
.pp-tab-panel[data-panel="machine"] .head>.icon,
.pp-tab-panel[data-panel="machine"] .head>.pp-pretty-icon,
.pp-tab-panel[data-panel="machine"] .head>.pp-master-circular,
.merge-block[data-panel="machine"] .head>.icon{border-color:#a97aff!important;color:#a97aff!important}
.pp-tab-panel[data-panel="costs"] .head>.icon,
.pp-tab-panel[data-panel="costs"] .head>.pp-pretty-icon,
.pp-tab-panel[data-panel="costs"] .head>.pp-master-circular,
.merge-block[data-panel="costs"] .head>.icon{border-color:#32df8b!important;color:#32df8b!important}
/* Results is the final orange action stage. */
#singleResultView~* .head>.icon{}
section.panel.result>.head>.icon,
section.panel.result>.head>.pp-pretty-icon,
section.panel.result>.head>.pp-master-circular{border-color:#ff8a24!important;color:#ff8a24!important}

/* Keep the journey badges outside their cards so 01/02/03/04 can never be clipped. */
#pp-master-quickcards{overflow:visible!important;padding-top:12px!important;margin-top:20px!important}
#pp-master-quickcards button{overflow:visible!important}
#pp-master-quickcards .pp-flow-number{z-index:20!important;top:-12px!important;left:-12px!important}
#pp-master-quickcards button:not(:last-child):after{z-index:21!important}

/* Keep the field-icon treatment crisp and square rather than filled. */
.pp-tab-panel .head .icon,
.pp-tab-panel .head>.pp-pretty-icon{box-shadow:0 0 0 1px rgba(255,255,255,.02),0 8px 18px rgba(0,0,0,.2)!important}

@media(max-width:650px){
 section.panel .head>.icon,section.panel .head>.pp-pretty-icon,section.panel .head>.pp-master-circular,
 .merge-block .head>.icon,.merge-block .head>.pp-pretty-icon,.merge-block .head>.pp-master-circular{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex-basis:44px!important}
}


/* Journey content spacing: keep connector arrows clear of icon + text. */
#pp-master-quickcards button{
  padding-left:46px!important;
  padding-right:18px!important;
}
#pp-master-quickcards button .pp-master-card-icon{
  flex:0 0 60px!important;
}
#pp-master-quickcards button > span:last-child{
  min-width:0!important;
}
@media(max-width:900px){
  #pp-master-quickcards button{padding-left:28px!important}
}

/* Master artwork for the remaining Workspace, Pro and Settings controls. */
#ppProjectsPanel .pp-workspace-nav button svg,#ppMaterialsPanel .pp-workspace-nav button svg,
#ppProjectsPanel .pp-project-icon svg,#ppProjectsPanel .pp-projects-empty-icon svg,
#ppMaterialsPanel .pp-materials-empty-icon svg,#ppMaterialsPanel .pp-pro-card-icon svg,
#ppSettingsPanel .pp-settings-icon svg{visibility:hidden!important}
#ppProjectsPanel .pp-workspace-nav button svg,#ppMaterialsPanel .pp-workspace-nav button svg{
 background-image:url("./assets/printprofit-nav-icons.webp?v=1")!important;background-size:500% 100%!important;background-repeat:no-repeat!important;visibility:visible!important}
#ppProjectsPanel .pp-workspace-nav button svg use,#ppMaterialsPanel .pp-workspace-nav button svg use{visibility:hidden!important}
.pp-workspace-nav [data-workspace-section="projects"] svg{background-position:25% center!important}
.pp-workspace-nav [data-workspace-section="workshop"] svg{background-position:0% center!important}
.pp-workspace-nav [data-workspace-section="pro"] svg{background-image:url("./assets/printprofit-calculator-icons.webp?v=1")!important;background-size:1400% 100%!important;background-position:92.308% center!important}
.pp-workspace-nav [data-workspace-section="account"] svg{background-position:100% center!important}
#ppProjectsPanel .pp-project-icon,#ppProjectsPanel .pp-projects-empty-icon,
#ppMaterialsPanel .pp-materials-empty-icon{background-image:url("./assets/printprofit-nav-icons.webp?v=1")!important;background-size:500% 100%!important;background-repeat:no-repeat!important;background-position:25% center!important;border:0!important}
#ppMaterialsPanel .pp-materials-empty-icon{background-image:url("./assets/printprofit-calculator-icons.webp?v=1")!important;background-size:1400% 100%!important;background-position:15.385% center!important}
#ppMaterialsPanel .pp-pro-card-icon,#ppSettingsPanel .pp-settings-icon{
 background-image:url("./assets/printprofit-calculator-icons.webp?v=1")!important;background-size:1400% 100%!important;background-repeat:no-repeat!important;border:0!important;box-shadow:none!important}
#ppMaterialsPanel .pp-pro-production .pp-pro-card-icon{background-position:7.692% center!important}
#ppMaterialsPanel .pp-pro-scenarios .pp-pro-card-icon{background-position:92.308% center!important}
#ppMaterialsPanel .pp-pro-quote .pp-pro-card-icon{background-position:69.231% center!important}
#ppMaterialsPanel .pp-pro-export .pp-pro-card-icon{background-image:url("./assets/printprofit-action-icons.webp?v=1")!important;background-size:600% 100%!important;background-position:20% center!important}
#ppMaterialsPanel .pp-pro-materials .pp-pro-card-icon{background-position:15.385% center!important}
#ppSettingsPanel .pp-settings-card:has(#ppSettingsDark) .pp-settings-icon{background-position:7.692% center!important}
#ppSettingsPanel .pp-settings-card:has(#ppSettingsLanguage) .pp-settings-icon{background-image:url("./assets/printprofit-nav-icons.webp?v=1")!important;background-size:500% 100%!important;background-position:75% center!important}
#ppSettingsPanel .pp-settings-card:has(#ppSettingsUnits) .pp-settings-icon{background-position:0% center!important}
#ppSettingsPanel .pp-settings-card:has(#ppSettingsCurrency) .pp-settings-icon{background-position:46.154% center!important}
#ppSettingsPanel .pp-settings-card:has(#ppSettingsRate) .pp-settings-icon{background-position:92.308% center!important}
#ppSettingsPanel .pp-settings-card:has(#ppSettingsReset) .pp-settings-icon{background-image:url("./assets/printprofit-action-icons.webp?v=1")!important;background-size:600% 100%!important;background-position:60% center!important}

#ppMaterialsPanel .pp-materials-empty-icon:has(use[href$="pp-printer"]){background-position:0% center!important}
#ppMaterialsPanel .pp-material-dot,#ppMaterialsPanel .pp-printer-icon{
 background-image:url("./assets/printprofit-calculator-icons.webp?v=1")!important;background-size:1400% 100%!important;background-position:15.385% center!important;background-repeat:no-repeat!important;border:0!important}
#ppMaterialsPanel .pp-material-dot svg,#ppMaterialsPanel .pp-printer-icon svg{visibility:hidden!important}
#ppMaterialsPanel .pp-pro-hero-icon{background-image:url("./assets/printprofit-calculator-icons.webp?v=1")!important;background-size:1400% 100%!important;background-position:92.308% center!important;background-repeat:no-repeat!important}
#ppMaterialsPanel .pp-pro-hero-icon svg{visibility:hidden!important}

/* Wide screens use the viewport with safe gutters. */
@media(min-width:801px){
  .shell{width:calc(100% - clamp(24px,3vw,64px))!important;max-width:none!important;margin-inline:auto!important}
  .shell .main{width:100%!important;max-width:none!important;padding-inline:clamp(16px,2vw,38px)!important}
}

/* Align Workspace tabs and show the correct master tile in each. */
#ppMaterialsPanel .pp-workspace-nav button,#ppProjectsPanel .pp-workspace-nav button{justify-content:center!important;text-align:center!important}
#ppMaterialsPanel .pp-workspace-nav [data-workspace-section="projects"] svg,#ppProjectsPanel .pp-workspace-nav [data-workspace-section="projects"] svg{background-position:25% center!important}
#ppMaterialsPanel .pp-workspace-nav [data-workspace-section="workshop"] svg,#ppProjectsPanel .pp-workspace-nav [data-workspace-section="workshop"] svg{background-position:0% center!important}
#ppMaterialsPanel .pp-workspace-nav [data-workspace-section="pro"] svg,#ppProjectsPanel .pp-workspace-nav [data-workspace-section="pro"] svg{background-image:url("./assets/printprofit-calculator-icons.webp?v=1")!important;background-size:1400% 100%!important;background-position:92.308% center!important}
#ppMaterialsPanel .pp-workspace-nav [data-workspace-section="account"] svg,#ppProjectsPanel .pp-workspace-nav [data-workspace-section="account"] svg{background-position:100% center!important}