/* ── FONTS ── Inter (variable, 300-700), self-hosted — no request to Google at
   page load (GDPR: loading Google Fonts from Google's servers sends every
   visitor's IP to Google without consent, which German courts have already
   penalised; also removes a render-blocking third-party stylesheet). Only
   the two subsets this site's four languages need: latin (EN/DE/FR + digits/
   punctuation) and latin-ext (Romanian ă ș ț — fetched only when a page
   actually contains one of those characters, thanks to unicode-range). */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{scroll-padding-top:72px}
body{font-family:'Inter',sans-serif;background:#fff;color:#1a1a1a;font-size:15px;line-height:1.5}

/* ── ACCESSIBILITY ── skip link (first focusable element on every page) +
   a visible keyboard-focus ring everywhere, including on the non-native
   controls (chips, swatches, upload zone) that app.js's keyboard enhancer
   makes focusable. */
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:#1b5e20;color:#fff;padding:10px 16px;border-radius:0 0 6px 6px;font-size:14px;font-weight:600;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid #1b5e20;outline-offset:2px}
main{display:block}
main:focus{outline:none}

/* Kill native number-input spinners — they render as an unstyled grey/dark
   box that clashes with our own qty-btn +/- controls. */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ── WHATSAPP FLOAT ── */
.wa-float{position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:500;text-decoration:none;transition:transform .15s,box-shadow .15s}
.wa-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.wa-float svg{width:30px;height:30px;fill:#fff;display:block}
@media(max-width:600px){.wa-float{width:50px;height:50px;bottom:16px;right:16px}.wa-float svg{width:26px;height:26px}}

/* ── TOKENS ── */
:root{
  color-scheme:light;
  --green:#2e7d32;
  --green-h:#1b5e20;
  --green-l:#e8f5e9;
  --green-m:#c8e6c9;
  --border:#e0e0e0;
  --bg:#f8f9fa;
  --bg2:#f1f8f1;
  --text:#1a1a1a;
  --text2:#555;
  --text3:#6b6b6b; /* was #888 (3.5:1 on white) — WCAG AA needs 4.5:1; #6b6b6b is 5.3:1 on white, 5.1:1 on --bg */
  --r:4px;
  --r2:8px;
}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:999;background:#fff;border-bottom:1px solid var(--border);height:56px}
.nav-in{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:center;height:100%;gap:18px}
.nav-logo img{height:28px;display:block}
.nav-links{display:flex;gap:2px;align-items:center;flex:1}
.nav-links a{color:var(--text2);text-decoration:none;font-size:12px;font-weight:500;padding:6px 7px;border-radius:var(--r);transition:all .15s;cursor:pointer;white-space:nowrap;letter-spacing:-.01em}
.nav-links a:hover{color:var(--green);background:var(--green-l)}
.nav-links a.active{color:var(--green);font-weight:600;background:var(--green-l)}
.nav-links .nav-mobile-only{display:none}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn-quote{background:var(--green);color:#fff;border:none;padding:8px 14px;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.btn-quote:hover{background:var(--green-h)}
.btn-ghost{background:#fff;color:var(--green);border:1.5px solid var(--green);padding:7px 12px;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.btn-ghost:hover{background:var(--green-l)}
.mnav-btn{display:none;background:none;border:none;font-size:20px;color:var(--text);cursor:pointer;padding:4px 8px}
.lang-select{height:34px;border:1.5px solid var(--border);border-radius:var(--r);background:#fff;color:var(--text2);font-size:12px;font-weight:700;padding:0 4px;cursor:pointer;font-family:'Inter',sans-serif;flex-shrink:0}
.lang-select:hover{border-color:var(--green);color:var(--green)}

/* ── HERO (home) ── */
.hero{padding-top:56px;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:#fff}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:72px 48px;max-width:600px;margin-left:auto;min-width:0}
.hero-tag{display:inline-flex;align-items:center;gap:6px;background:var(--green-l);color:var(--green);font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;margin-bottom:20px;border:1px solid var(--green-m)}
.hero-h1{font-size:clamp(32px,3.5vw,52px);font-weight:700;line-height:1.1;margin-bottom:14px;letter-spacing:-.02em;color:#111;overflow-wrap:break-word}
.hero-sub{color:var(--text2);font-size:15px;font-weight:400;line-height:1.7;margin-bottom:32px;max-width:480px}

/* Quick configurator */
.qc{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:var(--r2);overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.08);animation:qcGlow 2.4s ease-in-out 3}
@keyframes qcGlow{0%,100%{box-shadow:0 2px 16px rgba(0,0,0,.08),0 0 0 0 rgba(46,125,50,0)}50%{box-shadow:0 2px 22px rgba(0,0,0,.12),0 0 28px 6px rgba(46,125,50,.5)}}
@media(prefers-reduced-motion:reduce){.qc{animation:none}.qc::after{animation:none;display:none}}
/* translateX() is relative to the element's OWN width, not the card's — the
   "parked" end value must be recomputed whenever `width` changes, or the
   band rests only partway off-screen instead of fully past the edge, which
   reads as the effect getting "stuck" rather than finishing its sweep.
   width:45% needs translateX(220%) (220% of 45% ≈ 99% of the card, safely
   clear of the right edge) — this is that same, originally-correct pairing. */
.qc-head{background:var(--green);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:3px}
.qc::after{content:'';position:absolute;top:0;left:0;height:100%;width:45%;pointer-events:none;background:linear-gradient(115deg,transparent 0%,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%,transparent 100%);transform:translateX(-180%);animation:qcShine 4.5s ease-in-out 2;z-index:2}
@keyframes qcShine{0%{transform:translateX(-180%)}25%{transform:translateX(220%)}100%{transform:translateX(220%)}}
.qc-head span{color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
.qc-head small{color:rgba(255,255,255,.8);font-size:11px}
.qc-body{padding:18px}
.qc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.qc-field label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px}
.layer-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.lb{height:34px;border:1.5px solid var(--border);background:#fff;color:var(--text2);border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;transition:all .12s;font-family:'Inter',sans-serif}
.lb.on{background:var(--green);color:#fff;border-color:var(--green);font-weight:700}
.lb:hover:not(.on){border-color:var(--green);color:var(--green)}
.dim-row{display:flex;align-items:center;gap:6px}
.dim-row input{height:36px;border:1.5px solid var(--border);border-radius:var(--r);padding:0 10px;font-size:14px;font-weight:500;color:#111;background:#fff;outline:none;width:80px;text-align:center;font-family:'Inter',sans-serif;transition:border-color .15s;cursor:pointer}
.hero-fields{display:flex;gap:14px;flex-wrap:wrap}
.hero-field{flex:1;min-width:110px}
.hero-input{height:38px!important;font-size:15px!important;font-weight:600!important;width:100%!important}
.hero-field .dim-row input.hero-input{width:0!important;flex:1}
.dim-row input:focus{border-color:var(--green)}
.dim-row span{color:var(--text3);font-size:16px}
.qty-row{display:flex;align-items:center;gap:6px}
.qty-btn{width:36px;height:36px;border:1.5px solid var(--border);border-radius:var(--r);background:#fff;color:var(--green);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:700;transition:all .15s;flex-shrink:0;line-height:1}
.qty-btn:hover{border-color:var(--green);background:var(--green-l)}
.qty-row input{height:36px;border:1.5px solid var(--border);border-radius:var(--r);padding:0 8px;font-size:14px;font-weight:600;color:#111;background:#fff;width:72px;text-align:center;font-family:'Inter',sans-serif;outline:none;transition:border-color .15s;cursor:pointer}
.qty-row input:focus{border-color:var(--green)}
.qc-cta{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border-top:1px solid var(--border);margin-top:14px;padding-top:14px}
.qc-note{font-size:11px;color:var(--text3);line-height:1.5}
.qc-note strong{color:var(--text2);font-weight:600}
.btn-go{background:var(--green);color:#fff;border:none;height:42px;padding:0 24px;border-radius:var(--r);font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s;white-space:nowrap;display:flex;align-items:center;gap:6px;text-decoration:none}
.btn-go:hover{background:var(--green-h)}
.hero-stats{display:flex;gap:0;margin-top:24px;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.hstat{flex:1;padding:14px 16px;text-align:center;border-right:1px solid var(--border)}
.hstat:last-child{border-right:none}
.hstat .val{font-size:22px;font-weight:700;color:var(--green);line-height:1}
.hstat .lbl{font-size:11px;color:var(--text3);margin-top:3px}

.hero-right{position:relative;overflow:hidden;min-height:480px;max-height:760px}
.hero-right img{width:100%;height:100%;object-fit:cover;display:block}
.hero-right-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(46,125,50,.15) 0%,transparent 60%)}

/* ── PAGE HERO (inner pages) ── */
.page-hero{padding:128px 20px 48px;background:linear-gradient(180deg,var(--bg2) 0%,#fff 100%);border-bottom:1px solid var(--border)}
.page-hero .container{text-align:left}
.breadcrumb{font-size:12px;color:var(--text3);margin-bottom:14px}
.breadcrumb a{color:var(--text3);text-decoration:none;display:inline-block;padding:6px 3px;margin:-6px -3px}   /* a bigger tap area on phones, no change in layout */
.breadcrumb a:hover{color:var(--green)}

/* ── TRUST BAR ── */
.trust{background:var(--green);padding:10px 20px}
.trust-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.titem{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:500}
.titem svg{opacity:.9}

/* ── SECTIONS ── */
section{padding:80px 20px}
.container{max-width:1200px;margin:0 auto}
.sec-label{font-size:12px;font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.sec-title{font-size:clamp(24px,3vw,38px);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-bottom:12px}
.sec-sub{color:var(--text2);font-size:15px;max-width:560px;line-height:1.7}

/* ── ABOUT ── */
#about{background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-img{position:relative;border-radius:var(--r2);overflow:hidden;aspect-ratio:4/3}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-badge{position:absolute;bottom:20px;right:20px;background:var(--green);color:#fff;padding:14px 18px;border-radius:var(--r2);text-align:center}
.about-badge .n{font-size:36px;font-weight:800;line-height:1}
.about-badge .t{font-size:11px;font-weight:600;margin-top:2px}
.about-text p{color:var(--text2);line-height:1.8;margin-bottom:14px;font-size:15px}
.feature-list{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.feature-list.two-col{display:block;column-count:2;column-gap:32px}
.feature-list.two-col .feat{break-inside:avoid;margin-bottom:14px}
.feat{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text2)}
.feat-dot{width:20px;height:20px;border-radius:50%;background:var(--green-l);border:1.5px solid var(--green-m);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.feat-dot svg{width:10px;height:10px}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-top:40px}
.stat-cell{background:#fff;padding:22px 18px;text-align:center}
.stat-cell .n{font-size:30px;font-weight:800;color:var(--green);line-height:1}
.stat-cell .l{font-size:12px;color:var(--text3);margin-top:6px}
.sister-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:28px}
.sister-card{background:#fff;padding:22px 18px;text-align:center;transition:background .15s}
.sister-card:hover{background:var(--green-l)}
.sister-card .sc-name{font-size:16px;font-weight:800;color:var(--green);margin-bottom:6px}
.sister-card .sc-desc{font-size:12.5px;color:var(--text2);line-height:1.5}
.sister-card .sc-link{display:inline-block;font-size:12px;font-weight:600;color:var(--green);margin-top:10px;text-decoration:none}
.sister-card .sc-link:hover{text-decoration:underline}
.sc-note{font-size:12.5px;color:var(--text2);line-height:1.6;margin-top:14px;max-width:620px}
.about-video-wrap{margin-top:56px}
.video-embed{position:relative;display:block;width:100%;max-width:900px;aspect-ratio:16/9;border-radius:var(--r2);overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.14);background:#000}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
/* Click-to-load video: nothing from YouTube is requested until the visitor presses play. */
.video-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .2s}
.video-facade:hover img,.video-facade:focus-visible img{opacity:1}
.video-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:rgba(27,94,32,.92);color:#fff;font-size:22px;line-height:48px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.video-note{font-size:12px;color:var(--text3);margin-top:8px}

/* ── GALLERY ── */
#production{background:var(--bg)}
.gallery-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:520px}
.gcard{position:relative;overflow:hidden;border-radius:var(--r2)}
.gcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.gcard:hover img{transform:scale(1.03)}
.gcard-cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.65));padding:16px;color:#fff}
.gcard-cap strong{font-size:14px;font-weight:600;display:block}
.gcard-cap span{font-size:12px;opacity:.8}
.gcard.tall{grid-row:span 2}
.proc-matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:40px}
.pm-step{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r2);padding:14px;transition:background .15s,border-color .15s}
.pm-step .num{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.pm-step h3{font-size:13px;font-weight:700;line-height:1.3}
.pm-step p{font-size:11.5px;color:var(--text2);line-height:1.55;max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease,margin-top .25s ease}
@media (hover:hover) and (pointer:fine){
  .pm-step:hover{background:var(--green-l);border-color:var(--green-m)}
  .pm-step:hover p{max-height:200px;opacity:1;margin-top:6px}
}
@media not all and (hover:hover){
  .pm-step p{max-height:none;opacity:1;margin-top:6px}
}

/* ── CAPABILITIES ── */
#capabilities{background:#fff}
.caps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-radius:var(--r2);overflow:hidden;border:1px solid var(--border)}
.capcard{background:#fff;padding:28px 24px;transition:background .15s;cursor:default;position:relative;text-decoration:none;color:inherit;display:block}
.capcard .more{font-size:12px;font-weight:600;color:var(--green);margin-top:12px}
.capcard:hover{background:var(--bg2)}
.capcard-icon{width:44px;height:44px;border-radius:var(--r);background:var(--green-l);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:22px}
.capcard h3{font-size:16px;font-weight:700;margin-bottom:8px}
.capcard p{font-size:13px;color:var(--text2);line-height:1.6}
.capcard .badge{display:inline-block;margin-top:10px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--green-l);color:var(--green)}
.caps-grid.compact .capcard{padding:14px 14px}
.caps-grid.compact .capcard-icon{width:30px;height:30px;font-size:15px;margin-bottom:8px;border-radius:8px}

/* ── FAQ ── */
/* No max-height/overflow-y here on purpose: at ~63px per collapsed
   question and 16 questions in this list, a 230px cap showed only the
   first 3-4 and hid the rest behind a thin, easy-to-miss nested
   scrollbar — most visitors would never discover most of the FAQ. Same
   fix as the calculator's price sidebar: let it take the height its
   content needs and scroll with the page like everything else. */
.faq-list{max-width:820px}
.faq-item{border:1px solid var(--border);border-radius:var(--r2);margin-bottom:10px;background:#fff}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 20px;font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:20px;font-weight:400;color:var(--green);flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:var(--bg)}
.faq-item p{padding:0 20px 18px;color:var(--text2);font-size:14px;line-height:1.7}
.caps-grid.compact .capcard h3{font-size:13px;margin-bottom:4px}
.caps-grid.compact .capcard p{font-size:11.5px;line-height:1.45}
.caps-grid.compact .capcard .badge{margin-top:6px;font-size:11px;padding:1px 7px}
.caps-grid.compact{grid-template-columns:repeat(5,1fr)}
.stackgrid-wrap{background:linear-gradient(135deg,var(--green-l) 0%,#fff 65%);padding:14px;border-radius:calc(var(--r2) + 6px);box-shadow:0 10px 30px rgba(46,125,50,.14);border:1px solid var(--green-m)}
.stackgrid-hint{text-align:center;font-size:13px;color:var(--text3);margin-top:8px}
.stackcard{padding:0!important;text-align:center;overflow:visible;perspective:1200px;cursor:pointer}
.stackcard:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:var(--r)}
.stack-inner{position:relative;width:100%;min-height:190px;transition:transform .7s cubic-bezier(.4,.15,.2,1);transform-style:preserve-3d}
.stackcard:hover .stack-inner,.stackcard.active .stack-inner{transform:rotateY(180deg)}
.stack-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px}
.stack-front{}
.stack-front .capcard-icon{margin-left:auto;margin-right:auto}
.stack-back{transform:rotateY(180deg);gap:6px;padding:12px 10px}
.stackup-svg{width:100%;max-width:96px;height:auto;display:block}
.stack-cap{font-size:9.5px;font-weight:600;color:var(--text3);letter-spacing:.02em}
@keyframes cardPeek{0%{transform:rotateY(0)}28%{transform:rotateY(20deg)}55%{transform:rotateY(-8deg)}80%{transform:rotateY(4deg)}100%{transform:rotateY(0)}}
.stackcard.peek .stack-inner{animation:cardPeek 1.1s ease}
.cert-list{display:flex;flex-direction:column}
.cert-row{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}
.cert-row:last-child{border-bottom:none}
.cert-row .cicon{width:44px;height:44px;font-size:20px}
.cert-row-body{flex:1;min-width:0}
.cert-row-body h3{font-size:15px;font-weight:700;margin-bottom:3px}
.cert-row-body p{font-size:13px;color:var(--text2);line-height:1.5}
.cert-row .btn-ghost{flex-shrink:0}
@media(max-width:600px){.cert-row{flex-wrap:wrap}.cert-row .btn-ghost{flex-basis:calc(100% - 60px);margin-left:60px;margin-top:10px}}

/* ── TECH SPECS ── */
#technical{background:var(--bg)}

.reco-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;font-size:13px}
.reco-table th{background:var(--green);color:#fff;text-align:left;padding:10px 16px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.reco-table td{padding:10px 16px;border-bottom:1px solid var(--border);color:var(--text2)}
.reco-table tr:last-child td{border-bottom:none}
.reco-table tr:nth-child(even) td{background:var(--bg)}
.reco-table strong{color:#111}
.table-wrap{overflow-x:auto}

/* ── FULL CALCULATOR ── */
#calculator{background:#fff;padding:60px 20px}
.calc-wrap{max-width:1200px;margin:0 auto}
.calc-layout{display:block;margin-top:20px}
.calc-main{min-width:0}
.calc-side{margin-top:16px}
.calc-header{text-align:center;margin-bottom:36px}
.calc-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:24px;gap:0}
.calc-tab{padding:10px 20px;font-size:14px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.calc-tab.on{color:var(--green);font-weight:700;border-bottom-color:var(--green)}
.calc-grid{display:block;margin-bottom:16px}.calc-col{display:contents}
@media(min-width:1100px){.calc-grid .f-toggle,.calc-grid .layer-btns,.calc-grid select{max-width:560px}}
.calc-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);padding:16px 18px;margin-bottom:16px;break-inside:avoid;display:inline-block;width:100%;vertical-align:top}
.calc-card-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.calc-card textarea{width:100%;min-height:90px;border:1.5px solid var(--border);border-radius:var(--r);padding:9px 12px;font-size:14px;color:#111;background:#fff;outline:none;font-family:'Inter',sans-serif;resize:vertical;transition:border-color .15s}
.calc-card textarea:focus{border-color:var(--green)}
.f-label{font-size:12px;font-weight:500;color:var(--text2);margin-bottom:5px;display:flex;align-items:center;gap:4px}
/* Custom tooltip, not the native `title` attribute — the browser's own
   title-hover tooltip turned out unreliable inside the sandboxed Artifact
   preview (and never appears at all on touch/mobile, tap has no hover).
   `content:attr(title)` reads the SAME already-translated title text with
   zero extra markup or JS-side duplication of the tip copy. tabindex+click
   (via toggleTip() in app.js) make it work on tap too, not just desktop hover. */
.tip{position:relative;width:14px;height:14px;border-radius:50%;background:var(--border);color:var(--text3);font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:help;flex-shrink:0}
/* The bubble is display:none until shown — visibility:hidden/opacity:0 elements STILL count toward the
   page's scrollable overflow, so a closed tooltip anchored near the right edge (longer DE/FR/RO titles
   push the "?" icon further right) used to make the whole calculator scroll sideways on phones.
   --tip-shift (set by positionTip() in app.js right before a bubble opens) slides it back inside the
   viewport when the icon sits too close to the right edge. */
.tip::after{content:attr(title);position:absolute;bottom:calc(100% + 7px);left:calc(0px - var(--tip-shift,0px));width:max-content;max-width:min(220px,70vw);background:#1a1a1a;color:#fff;font-size:11px;font-weight:400;line-height:1.5;padding:8px 10px;border-radius:6px;text-align:left;text-transform:none;letter-spacing:normal;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:50;display:none;pointer-events:none}
.tip:hover::after,.tip:focus::after,.tip.tip-open::after{display:block;animation:tipin .15s}
@media (pointer:coarse){.tip::before{content:"";position:absolute;inset:-9px}}   /* the "?" icon is 14 px: on touch screens the tap area is 32 px */
@keyframes tipin{from{opacity:0}to{opacity:1}}
@media(max-width:480px){.tip::after{max-width:min(200px,60vw)}}
/* touch screens: the "?" help bubbles meet the 24 x 24 px minimum target size (WCAG 2.2, 2.5.8) */
@media(max-width:600px),(pointer:coarse){.tip{width:24px;height:24px;font-size:12px}}
.f-group{margin-bottom:12px}
.f-group:last-child{margin-bottom:0}
/* Base Parameters: Number of layers / Board thickness / Copper thickness /
   Tg / Plating sit back-to-back with no visual break between zones — a
   little extra breathing room (not a redesign) so each reads as its own
   question instead of blurring into the next. */
#layer-section,
#stock-selector-box,
#plating-field{margin-top:8px}
#stock-selector-box .f-group{margin-bottom:18px}
.f-select,.f-input{height:36px;border:1.5px solid var(--border);border-radius:var(--r);padding:0 10px;font-size:13px;color:#111;background:#fff;outline:none;width:100%;font-family:'Inter',sans-serif;transition:border-color .15s,background-color .15s;cursor:pointer}
.f-select:focus,.f-input:focus{border-color:var(--green)}
.f-input.auto-detected,.f-select.auto-detected{background:#fff8e1;border-color:#f0c419}
.gap-zero-choice{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
.gap-zero-choice .gzc-label,.dim-row .gzc-label{font-size:11px;color:var(--text3);font-weight:700;min-width:10px}
.gap-zero-choice .f-toggle{flex:1;min-width:160px}
.gap-zero-choice .f-toggle button{min-height:26px;font-size:11px;padding:2px 6px}
.gap-zero-choice .gzc-note{width:100%;font-size:10.5px;color:var(--text3);line-height:1.4}
.f-toggle{display:flex;border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden}
.f-toggle button{flex:1;min-height:36px;border:none;background:#fff;color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;border-right:1px solid var(--border);font-family:'Inter',sans-serif;transition:all .12s;padding:4px}
.f-toggle button:last-child{border-right:none}
.f-toggle button.on{background:var(--green);color:#fff;font-weight:700}
.f-toggle button:hover:not(.on){background:var(--green-l);color:var(--green)}
.f-toggle button:disabled{opacity:.35;cursor:not-allowed}
.f-toggle button.auto-detected{box-shadow:inset 0 0 0 2px #f0c419}
.layer-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.lbtn2{height:36px;border:1.5px solid var(--border);border-radius:var(--r);background:#fff;color:var(--text2);font-size:13px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;transition:all .12s}
.lbtn2.on{background:var(--green);color:#fff;border-color:var(--green);font-weight:700}
.lbtn2:hover:not(.on){border-color:var(--green);color:var(--green)}
.lbtn2.auto-detected{box-shadow:0 0 0 2px #f0c419}
.sw-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.swatch{height:34px;padding:0 14px;border-radius:var(--r);border:1.5px solid var(--border);box-sizing:border-box;justify-content:center;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .12s;background:#fff}
.swatch.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.swatch.na{opacity:.3;pointer-events:none}
.sdot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip{min-height:34px;padding:0 14px;border-radius:999px;border:1.5px solid var(--border);background:#fff;color:var(--text2);font-size:12.5px;font-weight:500;line-height:1;cursor:pointer;font-family:'Inter',sans-serif;transition:all .12s;display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box}
.chip.on{background:var(--green);color:#fff;border-color:var(--green);font-weight:700}
.chip.auto-detected{box-shadow:0 0 0 2px #f0c419}
.chip.locked{cursor:not-allowed}
.chip.locked::after{content:"\0000a0\0000b7\0000a0auto";font-weight:500}
.chip.na{pointer-events:none;background:#f2f2f2;color:#595959;border-style:dashed}   /* unavailable option: greyed with a solid-contrast label (opacity would drop the text below WCAG AA) */
.ctag{font-size:11px;padding:1px 6px;border-radius:999px;font-weight:700}
.ctag-ok{background:#e8f5e9;color:var(--green);border:1px solid #c8e6c9}
.ctag-no{background:#ffebee;color:#c62828;border:1px solid #ffcdd2}

.info-box{font-size:12px;color:var(--text2);background:var(--bg2);padding:8px 12px;border-radius:var(--r);margin-top:8px;line-height:1.6;border-left:3px solid var(--green)}
.warn-box{font-size:12px;color:#b45309;background:#fffbeb;padding:8px 10px;border-radius:var(--r);margin-top:8px;border:1px solid #fde68a;display:flex;gap:6px}
.err-box{font-size:12px;color:#c62828;background:#ffebee;padding:8px 10px;border-radius:var(--r);margin-top:8px;border:1px solid #ffcdd2;display:flex;gap:6px}
.stackup-viz{margin-top:10px}
.sv-layer{display:flex;align-items:center;gap:8px;padding:3px 10px;border-radius:3px;font-size:11px;font-weight:500;margin-bottom:2px}
.sv-cu{background:#fff8e1;color:#c05700;border:1px solid #ffe082}
.sv-pre{background:#e3f2fd;color:#1565c0;border:1px solid #90caf9}
.sv-core{background:#f6e7a8;color:#6b5a12;border:1px solid #e3d283}
.sv-mask{background:#e8f5e9;color:var(--green);border:1px solid #c8e6c9}
/* RESULTS */
.results-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:var(--r2);overflow:hidden;border:1px solid var(--border);margin-top:16px}
.res-cell{background:#fff;padding:16px 18px}
.res-cell .rl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;font-weight:600}
.res-cell .rv{font-size:22px;font-weight:700;color:var(--green)}
.res-cell .rv.dark{color:#111}
.res-cell .rs{font-size:11px;color:var(--text3);margin-top:2px}
@media(min-width:1001px){
  .calc-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
  /* No max-height/overflow-y here on purpose: a short viewport (a laptop
     display, or a browser window that isn't maximized) made this panel's
     own content — price, breakdown, the Request Quote button — taller
     than that capped height, so it silently required a SECOND, nested
     scroll inside this small box to reach the CTA button, easy to miss
     entirely (mouse-wheel scroll over the panel scrolls the page, not the
     box, unless the cursor is precisely over it). Sticky positioning
     works fine without a max-height: it stays pinned near the top while
     there's room, and once its own content runs long it just scrolls
     with the page like anything else — one scrollbar, nothing hidden. */
  .calc-side{margin-top:0;position:sticky;top:72px}
  .calc-side .results-bar{grid-template-columns:repeat(2,1fr)}
  .calc-side .res-cell{padding:10px 12px}
  .calc-side .res-cell .rv{font-size:17px}
  .calc-side .breakdown .bdr{padding:6px 12px;font-size:12px}
  .calc-side .breakdown .bdr.tot{padding:14px 12px;font-size:19px}
}
@media(min-width:1200px){
  .calc-layout{grid-template-columns:minmax(0,1fr) 410px}
  .calc-side .res-cell{padding:12px 16px}
  .calc-side .res-cell .rv{font-size:20px}
  .calc-side .breakdown .bdr{padding:7px 16px;font-size:13px}
  .calc-side .breakdown .bdr.tot{padding:16px;font-size:21px}
}
.breakdown{background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-top:8px}
.bdr{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border);font-size:13px}
.bdr:last-child{border-bottom:none}
.bdl{color:var(--text2)}
.bdr.tot{font-weight:700;font-size:14px;background:var(--green-l);padding:12px 16px;color:var(--green);border-top:2px solid var(--green)}
.spec-sheet{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);padding:14px 16px;margin-top:8px}
#datasheet-wrap{display:none}
.sr{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border);gap:8px;min-width:0}
.sr .sk,.sr>div{min-width:0}
.sr:last-child{border-bottom:none}
.sk{color:var(--text2)}.sv{font-weight:600;color:#111;text-align:right}
.calc-cta{display:flex;align-items:center;justify-content:space-between;background:var(--green-l);border:1px solid var(--green-m);border-radius:var(--r2);padding:20px 24px;margin-top:16px;flex-wrap:wrap;gap:14px}
.calc-cta-text h3{font-size:16px;font-weight:700;margin-bottom:4px}
.calc-cta-text p{font-size:13px;color:var(--text2)}
.calc-cta-btns{display:flex;gap:8px;flex-wrap:wrap}
.upzone{border:2px dashed var(--border);border-radius:var(--r2);padding:20px;text-align:center;cursor:pointer;background:#fff;transition:border-color .15s;animation:qcGlow 2.4s ease-in-out 3}
.upzone:hover,.upzone.is-drag{border-color:var(--green)}
.upzone.is-drag{border-style:solid;background:var(--green-l)}
@media(prefers-reduced-motion:reduce){.upzone{animation:none}}
.ufi{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);font-size:13px;margin-top:6px}
.ufr{cursor:pointer;background:none;border:none;font-size:16px;color:var(--text3);padding:0 4px;cursor:pointer}
.stencil-wrap{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
#panel-box:not(.ml-ui) .sub-box>.stencil-wrap{grid-column:1/-1}
.stencil-chk{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;margin:2px 0 8px}
.stencil-chk input{width:18px;height:18px;flex:none;accent-color:var(--green)}
#stencil-up .info-box{margin-top:0}
#stencil-up .obs-btn{margin:8px 0 2px}
.sub-box{background:var(--bg);border-radius:var(--r);padding:12px 14px;margin-top:10px;border:1px solid var(--border)}
.panel-viz-wrap{position:relative;margin-top:10px}
.panel-viz{display:flex;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px}
.panel-viz-svg{width:100%;max-width:240px;height:auto;display:block}
.pv-panel{fill:var(--bg2);stroke:var(--border);stroke-width:2;vector-effect:non-scaling-stroke}
.pv-board{fill:var(--green-l);stroke:var(--green);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pv-mill-line{stroke:#dc2626}
.pv-score-line{stroke:#2563eb}
.pv-legend text{dominant-baseline:middle}
.pv-fs-btn{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:4px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:12px;line-height:1;color:var(--text2);z-index:2}
.pv-fs-btn.pv-fs-btn-fixed{position:fixed;top:24px;right:24px;z-index:1001;width:32px;height:32px;font-size:16px}
.panel-viz.panel-viz-fs{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:92vw;height:88vh;max-width:92vw;box-shadow:0 10px 50px rgba(0,0,0,.4)}
.panel-viz.panel-viz-fs .panel-viz-svg{max-width:100%;width:100%;height:100%}
.pp-comp{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:8px 12px;margin-bottom:6px}
.pp-sheets{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pp-sheets select{height:28px;border:1px solid var(--border);border-radius:var(--r);background:#fff;color:#111;padding:0 6px;font-size:12px;flex:1;min-width:90px;font-family:'Inter',sans-serif;outline:none}
.obs-btn{font-size:11px;color:var(--green);cursor:pointer;background:var(--green-l);padding:6px 12px;border-radius:999px;border:1px solid var(--green-m);margin-top:8px;display:inline-flex;align-items:center;gap:4px;font-family:'Inter',sans-serif}
.obs-panel{display:none;margin-top:6px;padding:8px 12px;background:var(--bg2);border-radius:var(--r);border:1px solid var(--green-m);font-size:12px;color:var(--text2);line-height:1.7}
.obs-panel.open{display:block}

/* ── SERVICES ── */
#services{background:var(--bg)}

.svc-icon{width:44px;height:44px;border-radius:var(--r);background:var(--green-l);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px;border:1px solid var(--green-m)}

.svc-detail{background:#fff;border:1px solid var(--border);border-radius:var(--r2);padding:28px;margin-bottom:20px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px}
.svc-detail:last-child{margin-bottom:0}
.svc-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.svc-detail-head .svc-icon{margin-bottom:0;flex-shrink:0}
.svc-detail-head h3{font-size:18px;font-weight:700}
/* Long compound words (German/Romanian) must wrap instead of widening the page on phones. */
h1,h2,h3,.sec-title,.svc-detail-head h2{overflow-wrap:anywhere}
.svc-detail>*,.svc-detail-head>div{min-width:0}
.svc-detail-head .tag{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.svc-detail p.desc{color:var(--text2);font-size:14px;line-height:1.7;margin-bottom:12px}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.svc-list li{font-size:13px;color:var(--text2);padding-left:16px;position:relative}
.svc-list li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.svc-examples{font-size:12px;color:var(--text3);margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.svc-examples strong{color:var(--text2)}

/* ── CONTACT ── */
#contact{background:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-info h2{margin-bottom:16px}
.contact-info p{color:var(--text2);line-height:1.8;margin-bottom:28px}
.citem{display:flex;gap:12px;align-items:flex-start;padding:12px;margin-bottom:10px;border-radius:var(--r);border:1px solid transparent;transition:border-color .18s,background .18s,transform .18s}
.citem:hover{background:var(--bg);border-color:var(--border);transform:translateX(3px)}
.cicon{width:38px;height:38px;border-radius:var(--r);background:var(--green-l);border:1px solid var(--green-m);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;transition:background .18s,transform .18s}
.citem:hover .cicon{background:var(--green);color:#fff;transform:scale(1.08)}
.clbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.cval{font-size:14px;font-weight:500;color:#111}
.cval a{color:var(--green);text-decoration:none;transition:opacity .15s}
.cval a:hover{opacity:.75}
.contact-map-link{display:block;position:relative;border-radius:var(--r2);overflow:hidden;margin:4px 0 20px;border:1px solid var(--border);transition:box-shadow .2s,transform .2s}
.contact-map-link:hover{box-shadow:0 10px 28px rgba(0,0,0,.12);transform:translateY(-2px)}
.contact-map-img{display:block;width:100%;height:auto}
.contact-map-badge{position:absolute;left:12px;bottom:12px;background:#fff;color:var(--green);font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.contact-form{background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);padding:28px;transition:box-shadow .2s,border-color .2s}
.contact-form:hover{box-shadow:0 8px 28px rgba(0,0,0,.06);border-color:var(--green-m)}
.contact-form h3{font-size:20px;font-weight:700;margin-bottom:20px}
.contact-fade{opacity:0;transform:translateY(14px);animation:contactFadeUp .55s ease forwards}
.contact-grid .contact-info{animation-delay:.02s}
.contact-grid .contact-form{animation-delay:.14s}
@keyframes contactFadeUp{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.contact-fade{animation:none;opacity:1;transform:none}}
.fg{margin-bottom:14px}
.fg label{font-size:12px;font-weight:600;color:var(--text2);display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
.fg input,.fg select,.fg textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--r);padding:9px 12px;font-size:14px;color:#111;background:#fff;outline:none;font-family:'Inter',sans-serif;transition:border-color .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--green)}
#rq-circuit.auto-detected{background:#fff8e1;border-color:#f0c419}
.fg textarea{min-height:110px;resize:vertical}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-success{display:none;text-align:center;padding:30px;color:var(--green)}
.form-success .big{font-size:48px;margin-bottom:10px}
.social-row{display:flex;gap:8px;margin-top:24px}
.social-row .soc2{width:38px;height:38px;border-radius:var(--r);background:var(--green-l);border:1px solid var(--green-m);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--green);font-size:16px;font-weight:700;transition:all .15s}
.social-row .soc2:hover{background:var(--green);color:#fff}

/* ── FINAL QUOTE CTA (calculator) ── the one and only action left in that
   row (Save as PDF/phone were removed — the phone number already lives on
   Contact, and the PDF is now only ever offered from the post-submission
   confirmation modal, see showQuoteSentModal in app.js) — given the same
   glow treatment as the homepage's Quick Quote card (.qc/qcGlow) so it
   reads as the calculator's equivalent "hero" CTA. */
.btn-final-cta{background:var(--green);color:#fff;border:none;padding:14px 28px;border-radius:var(--r2);font-size:16px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s,transform .15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;animation:qcGlow 2.4s ease-in-out infinite}
.btn-final-cta:hover{background:var(--green-h);transform:translateY(-2px)}
.btn-final-cta:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.btn-final-cta{animation:none}}

.account-wrap{max-width:440px;margin:0 auto}
.account-card{background:#fff;border:1px solid var(--border);border-radius:var(--r2);padding:32px}
.portal-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);padding:18px 22px;margin-bottom:28px}
.portal-header .who{font-size:13px;color:var(--text2)}
.portal-header .who strong{color:#111;font-size:15px;display:block;margin-bottom:2px}
.req-card{background:#fff;border:1px solid var(--border);border-radius:var(--r2);padding:16px 18px;margin-bottom:10px}
.req-card.has-thumb{display:flex;gap:16px;align-items:flex-start}
.req-thumb{width:128px;max-height:110px;object-fit:contain;flex-shrink:0;background:#fff;border:1px solid var(--border);border-radius:6px;padding:3px}
.req-card-body{flex:1;min-width:0}
@media(max-width:560px){.req-card.has-thumb{flex-direction:column}.req-thumb{width:100%;max-height:150px}}
.req-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.req-card-title{font-size:16px;font-weight:700;color:#111;overflow-wrap:anywhere}
.req-card-untitled{color:var(--text3);font-weight:600;font-style:italic}
.req-card-specs{font-size:13px;color:var(--text2);margin-bottom:4px}
.req-card-meta{font-size:12px;color:var(--text3);margin-bottom:6px}
.req-card-files{font-size:12px;color:var(--text2)}
.req-card-notes{font-size:12px;color:var(--text2);margin-top:6px;font-style:italic}
.req-actions{margin-top:10px;display:flex;gap:16px;flex-wrap:wrap}
.req-history{margin-top:10px;border-top:1px solid var(--border);padding-top:8px;font-size:12px}
.req-history summary{cursor:pointer;color:var(--green);font-weight:600;padding:2px 0}
.req-hist-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:7px 0;border-top:1px solid #f0f0f0;color:var(--text2)}
.req-hist-row:first-of-type{margin-top:6px}
.req-hist-main{line-height:1.5}
/* file check, viewer modes, price-by-quantity */
.dfm-box{margin-top:12px;border-top:1px solid var(--border);padding-top:8px;font-size:12px;text-align:left}
.dfm-title{font-weight:700;color:var(--text2);margin-bottom:4px}
.dfm-row{padding:2px 0;line-height:1.45}
.dfm-ok{color:#2e7d32}
.dfm-warn{color:#b26a00;font-weight:600}
.dfm-foot{margin-top:4px;color:var(--text3);font-size:11px}

.vm-chip{cursor:pointer}
.vg-group{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 16px 6px 0}
.vg-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3)}
.vm-legend{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:8px;font-size:12px;color:var(--text2)}
.vm-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:6px}
/* Client-panel summary card (under the panel diagram): big figures instead of one small line */
#panel-info{padding:12px}
.pi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.pi-tile{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:10px 12px}
.pi-tile.pi-auto{background:#fff8e1;border-color:#f0c419}
.pi-size{grid-column:1/-1;display:flex;align-items:center;gap:14px}
.pi-mini{flex:none;display:block}
.pi-frame{fill:#f1f8f1;stroke:#2e7d32;stroke-width:1.2}
.pi-box{fill:#c8e6c9;stroke:#2e7d32;stroke-width:.5}
.pi-dims{min-width:0}
.pi-lbl-top{margin:0 0 4px}
.pi-dim{display:flex;align-items:baseline;gap:8px;line-height:1.2}
.pi-ax{width:14px;font-size:12px;font-weight:700;color:var(--text3)}
.pi-num{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.pi-num::after{content:" mm";font-size:12px;font-weight:600;color:var(--text3)}
.pi-val{font-size:22px;font-weight:800;line-height:1.15;color:var(--text);letter-spacing:-.01em}
.pi-lbl{margin-top:3px;font-size:12px;color:var(--text2);line-height:1.35}
.pi-bar{margin-top:8px;height:6px;border-radius:99px;background:#e8e8e8;overflow:hidden}
.pi-bar i{display:block;height:100%;border-radius:99px;background:#2e7d32}
.pi-good .pi-val{color:#2e7d32}
.pi-mid .pi-val{color:#b7791f}.pi-mid .pi-bar i{background:#e0a100}
.pi-low .pi-val{color:#c62828}.pi-low .pi-bar i{background:#c62828}
.pi-foot{margin-top:8px;font-size:12px;color:var(--text3)}
/* client-panel editor: numbered steps on the left (circuits -> distance -> separation -> margins), the drawing and the figures on the right */
#panel-box:not(.ml-ui) .sub-box{counter-reset:pstep}
#panel-box:not(.ml-ui) .sub-box>.f-group>.f-label::before{counter-increment:pstep;content:counter(pstep);display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:11px;font-weight:700;margin-right:6px}
#panel-box:not(.ml-ui) .sub-box>.f-group>.f-label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px}
#panel-box:not(.ml-ui) .dim-row input{width:84px}
#panel-box:not(.ml-ui) .gap-zero-choice{margin-top:8px}
#panel-box:not(.ml-ui) .gap-zero-choice .gzc-label{min-width:18px;font-size:12px}
#panel-box:not(.ml-ui) .panel-viz:not(.panel-viz-fs){padding:10px}
#panel-box:not(.ml-ui) .panel-viz:not(.panel-viz-fs) .panel-viz-svg{width:auto;max-width:100%;max-height:300px;margin:0 auto}
#panel-box:not(.ml-ui) #panel-info{padding:10px}
#panel-box:not(.ml-ui) #panel-info .pi-tile{padding:8px 10px}
#panel-box:not(.ml-ui) #panel-info .pi-val{font-size:19px}
@media(min-width:1100px){
#panel-box:not(.ml-ui) .sub-box{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);column-gap:28px;align-items:start}
#panel-box:not(.ml-ui) .sub-box>#panel-suggest,#panel-box:not(.ml-ui) .sub-box>.err-box,#panel-box:not(.ml-ui) .sub-box>.warn-box{grid-column:1/-1}
#panel-box:not(.ml-ui) .sub-box>.f-group{grid-column:1;margin:0;padding:14px 0;border-top:1px solid var(--border)}
#panel-box:not(.ml-ui) .sub-box>.f-group:nth-child(2){border-top:0;padding-top:0}
#panel-box:not(.ml-ui) .sub-box>.panel-viz-wrap{grid-column:2;grid-row:2/span 4;margin-top:0}
#panel-box:not(.ml-ui) .sub-box>#panel-info{grid-column:2;grid-row:6;margin-top:12px}
}
}
/* Multilayer client panel: mode switch ("suggested by us" / "I configure it") + the settings pop-up with 2-3 variants */
.mlp-bar{margin-bottom:12px}
.mlp-switch{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.mlp-opt{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r);background:#fff;cursor:pointer;font-family:'Inter',sans-serif;color:var(--text);transition:border-color .15s,background .15s}
.mlp-opt b{font-size:14px}.mlp-opt span{font-size:12px;color:var(--text3);line-height:1.35}
.mlp-opt:hover{border-color:var(--green)}
.mlp-opt.on{border-color:var(--green);background:var(--green-l);box-shadow:0 0 0 1px var(--green) inset}

.mlp-none{margin-top:8px;font-size:13px;color:#b7791f}
.mlp-q{display:inline-block;font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px;vertical-align:middle}
.mlp-q-good{background:#e3f4e5;color:#2e7d32}.mlp-q-ok{background:#fff3d6;color:#b7791f}.mlp-q-low{background:#fde3e3;color:#c62828}
#panel-box.ml-ui .sub-box > .f-group{display:none}
.mlp-use{font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--green);border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:middle}
.mlp-edit{font-style:normal;font-size:11px;font-weight:600;color:var(--green);margin-top:2px}
.mlp-opt{position:relative}
.mlp-var[data-act]{cursor:pointer}
.mlp-var[data-act]:hover{border-color:var(--green)}

.mlp-bad{margin-top:6px;font-size:12px;font-weight:600;color:#c62828}
.mlp-warn{margin-top:6px;font-size:12px;color:#b7791f}
.mlp-done[disabled]{opacity:.5;cursor:not-allowed}
.mlp-var:not([data-act]){grid-template-columns:150px 1fr}
body.mlp-lock{overflow:hidden}
.mlp-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.mlp-modal[hidden]{display:none}
.mlp-backdrop{position:absolute;inset:0;background:rgba(20,30,20,.55)}
.mlp-dialog{position:relative;background:#fff;border-radius:14px;max-width:980px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.mlp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mlp-head h3{margin:0;font-size:18px}
.mlp-x{border:none;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--text3);padding:0 6px}
.mlp-intro{margin:8px 0 14px;font-size:13px;color:var(--text2);line-height:1.5}
.mlp-body{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:18px;align-items:start}
.mlp-form h4,.mlp-vars h4{margin:0 0 10px;font-size:14px}
.mlp-row{margin-bottom:12px}.mlp-row label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px}
.mlp-pair{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mlp-pair>span:not([id]){font-size:12px;font-weight:700;color:var(--text3)}
.mlp-pair input{width:74px;padding:7px 8px;border:1.5px solid var(--border);border-radius:var(--r);font-size:14px;font-family:'Inter',sans-serif}
.mlp-seg{display:inline-flex;border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden}
.mlp-seg button{border:none;background:#fff;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;color:var(--text2)}
.mlp-seg button.on{background:var(--green);color:#fff}
.mlp-hint{margin-top:4px;font-size:11px;color:var(--text3);line-height:1.4}
.mlp-var{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;padding:12px;border:1.5px solid var(--border);border-radius:12px;margin-bottom:10px;background:#fff}
.mlp-var.best{border-color:#9ccc9c}
.mlp-var.chosen{border-color:var(--green);background:var(--green-l)}
.mlp-var-head{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.mlp-tag{font-size:11px;font-weight:700;background:var(--green);color:#fff;border-radius:99px;padding:2px 8px}

.mlp-svg{width:100%;max-width:150px;height:auto;display:block}
.mlp-p{fill:#f1f8f1;stroke:#2e7d32;stroke-width:1.4}
.mlp-c{fill:#c8e6c9;stroke:#2e7d32;stroke-width:.6}
.mlp-sh{fill:#eceff1;stroke:#90a4ae;stroke-width:2}
.mlp-sp{fill:#c8e6c9;stroke:#2e7d32;stroke-width:2}
.mlp-sheet{max-width:110px}

.mlp-var-sub{font-size:12px;color:var(--text3)}
.mlp-var-price{margin-top:4px;font-weight:700}
.mlp-var-price small{font-weight:400;color:var(--text3)}
.mlp-choose{white-space:nowrap}
.mlp-choose[disabled]{opacity:.7;cursor:default}
.mlp-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}
@media(max-width:760px){.mlp-body{grid-template-columns:1fr}.mlp-var{grid-template-columns:1fr}.mlp-choose{width:100%}.mlp-switch{grid-template-columns:1fr}}
/* yield on OUR production sheet: one wide row under the four figures */
.pi-prod{margin-top:10px;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:10px 12px}
.pi-prod-val{font-size:22px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--text)}
.pi-prod-txt .pi-lbl{margin-top:0}
.pi-prod-sub{font-size:12px;color:var(--text3);line-height:1.35}
.pi-prod .pi-bar{grid-column:1/-1}
.pi-prod.pi-good .pi-prod-val{color:#2e7d32}.pi-prod.pi-mid .pi-prod-val{color:#b7791f}.pi-prod.pi-mid .pi-bar i{background:#e0a100}
.pi-prod.pi-low .pi-prod-val{color:#c62828}.pi-prod.pi-low .pi-bar i{background:#c62828}
.qty-table{margin:14px 0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r2);background:#fff;font-size:13px}
.qt-title{font-weight:700;margin-bottom:6px}
.qty-table table{width:100%;border-collapse:collapse}
.qty-table th{font-size:11px;font-weight:600;color:var(--text3);text-align:right;padding:3px 6px;border-bottom:1px solid var(--border)}
.qty-table th:first-child,.qty-table td:first-child{text-align:left}
.qty-table td{padding:5px 6px;text-align:right;border-bottom:1px solid #f1f1f1}
.qt-row{cursor:pointer}
.qt-row:hover{background:#f6faf6}
.qt-row:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.qt-cur{background:#e8f5e9;font-weight:700}
.qt-foot{margin-top:6px;font-size:11px;color:var(--text3)}
/* request status (set by sales) */
.st-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;background:#eceff1;color:#455a64;letter-spacing:.02em;vertical-align:1px}
.st-in_review{background:#e3f2fd;color:#1565c0}
.st-quoted{background:#e8f5e9;color:#2e7d32}
.st-cannot_make{background:#fdecea;color:#c62828}
.st-in_production{background:#f3e5f5;color:#6a1b9a}
.st-shipped{background:#e0f2f1;color:#00695c}
.st-draft{background:#fff8e1;color:#8a6d00}
.req-msg{margin:8px 0 2px;padding:8px 10px;border-radius:6px;background:#f5f7f6;border-left:3px solid #9e9e9e;font-size:13px;color:var(--text2);line-height:1.5}
.req-msg-quoted,.req-msg-shipped{background:#f1f8f1;border-left-color:#2e7d32}
.req-msg-cannot_make{background:#fdf1ef;border-left-color:#c62828}
.req-msg-in_review{background:#f0f6fd;border-left-color:#1565c0}
.req-msg-draft{background:#fffaf0;border-left-color:#d4a017}
.req-final{margin:8px 0 2px;font-size:14px;color:#1b5e20}
/* board above the maximum production format: the price shown is not valid, strike it through (sending is blocked as well) */
body.dim-exceeds #s-total-vat,body.dim-exceeds #s-unit,body.dim-exceeds #s-unit-vat,body.dim-exceeds #s-pcb{text-decoration:line-through;opacity:.4}
.req-hist-actions{display:flex;gap:14px;flex-wrap:wrap}
.req-edit-btn{background:none;border:none;color:var(--green);font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;font-family:'Inter',sans-serif}
.req-edit-btn:hover{text-decoration:underline}
.req-del-btn{background:none;border:none;color:#c62828;font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;font-family:'Inter',sans-serif}
.req-del-btn:hover{text-decoration:underline}
.req-del-confirm{margin-top:10px;background:#ffebee;border:1px solid #ffcdd2;border-radius:var(--r);padding:8px 10px;font-size:12px;color:#c62828;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gate-card{max-width:480px;margin:0 auto;text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);padding:40px 32px}
.gate-card .big{font-size:36px;margin-bottom:12px}

/* ── FOOTER ── */
footer{background:#1b2e1b;color:#fff;padding:48px 20px 80px}
.footer-in{max-width:1200px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7;margin-top:18px}
.footer-grid>*{min-width:0}
.footer-brand p,.footer-col a{overflow-wrap:anywhere}
.footer-col .footer-h{font-size:12px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.footer-col a{display:block;color:rgba(255,255,255,.75);text-decoration:none;font-size:13px;padding:4px 0;margin-bottom:4px;cursor:pointer;transition:color .15s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,.65)}
.footer-legal{flex-basis:100%;line-height:1.6}
.sal-badge{display:inline-block;margin-right:10px;padding:3px 10px;border:1px solid rgba(255,255,255,.45);border-radius:4px;color:#fff;text-decoration:none;font-weight:600}
.sal-badge:hover{background:rgba(255,255,255,.12)}
.portal-header-btns{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-danger-ghost{color:#b71c1c;border-color:#e0a0a0}
.btn-danger-ghost:hover{background:#fdecea}
.btn-danger{background:#c62828}
.btn-danger:hover{background:#a81f1f}
.da-box{margin-bottom:24px;border-left-color:#c62828;max-width:640px}
.da-box p{font-size:13px;line-height:1.55;margin:8px 0 14px}
.da-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.form-privacy-note{font-size:12px;line-height:1.5;color:var(--text3,#6b6b6b);margin:2px 0 12px}
.form-privacy-note a{text-decoration:underline}
.terms-check{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;font-size:.9rem;line-height:1.45;cursor:pointer}
.terms-check input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--green,#1b5e20)}
.terms-check a{text-decoration:underline}
.footer-legal-grid{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);padding:22px 0}
.fl-company{display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.65)}
.fl-company strong{color:#fff;font-size:13px;letter-spacing:.02em}
.fl-company a{color:rgba(255,255,255,.85);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);width:fit-content}
.fl-company a:hover{color:#fff}
.fl-consumer{display:flex;align-items:center;gap:16px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.65)}
.fl-consumer .sal-pict{margin-right:0;flex:none}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:6px 20px;border-top:1px solid rgba(255,255,255,.06);padding:14px 0}
.footer-legal-links a{font-size:12px;color:rgba(255,255,255,.75);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)}
.footer-legal-links a:hover{color:#fff}
.footer-legal-grid + .footer-bottom,.footer-legal-links + .footer-bottom{border-top-color:rgba(255,255,255,.06);padding-top:16px}
@media(max-width:600px){.fl-consumer{flex-direction:column;align-items:flex-start;gap:10px}}
.sal-pict{display:inline-block;vertical-align:middle;margin-right:12px;line-height:0}
.sal-pict img{display:block;width:201px;height:50px;max-width:100%;border-radius:3px}
.footer-admin-link a{color:rgba(255,255,255,.55);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);font-size:12px}
.footer-admin-link a:hover{color:#fff}
.social-links{display:flex;gap:8px}
.soc{width:32px;height:32px;border-radius:var(--r);background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;text-decoration:none;color:rgba(255,255,255,.7);font-size:13px;font-weight:700;transition:all .15s}
.soc:hover{background:var(--green);color:#fff}
.footer-newsletter{max-width:320px}
.footer-newsletter .footer-h{font-size:12px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.nl-consent{font-size:11px;line-height:1.5;color:rgba(255,255,255,.65);margin-top:8px}
.nl-consent a{color:rgba(255,255,255,.85);text-decoration:underline}
/* Legal pages (privacy / terms) */
.legal-page{background:#fff;padding:40px 20px 72px}
.legal-wrap{max-width:880px}
.legal-wrap h2{font-size:20px;font-weight:700;margin:34px 0 10px;color:var(--text,#111)}
.legal-wrap p,.legal-wrap li{font-size:15px;line-height:1.7;color:var(--text2,#444)}
.legal-wrap p{margin:0 0 12px}
.legal-wrap ul{margin:0 0 12px;padding-left:22px}
.legal-wrap li{margin-bottom:6px}
.legal-wrap a{color:var(--blue,#0b5cad);text-decoration:underline}
.legal-updated{font-size:13px!important;color:var(--text3,#6b6b6b)!important;margin-bottom:6px!important}
.legal-other{margin-top:32px!important;font-weight:600}
.legal-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 16px;display:block;overflow-x:auto}
.legal-table th,.legal-table td{border:1px solid #e3e3e3;padding:8px 10px;text-align:left;vertical-align:top;line-height:1.5;color:var(--text2,#444)}
.legal-table th{background:#f5f5f5;font-weight:600;color:var(--text,#111);white-space:nowrap}
.legal-table td:first-child{min-width:120px}
.nl-row{display:flex}
.nl-input{flex:1;min-width:0;border:1.5px solid rgba(255,255,255,.2);border-right:none;border-radius:var(--r) 0 0 var(--r);padding:9px 12px;font-size:13px;background:rgba(255,255,255,.07);color:#fff;outline:none;font-family:'Inter',sans-serif;transition:border-color .15s,background .15s}
.nl-input::placeholder{color:rgba(255,255,255,.35)}
.nl-input:focus{border-color:var(--green);background:rgba(255,255,255,.12)}
.nl-btn{border:none;border-radius:0 var(--r) var(--r) 0;background:var(--green);color:#fff;padding:0 16px;font-weight:700;font-size:13px;cursor:pointer;transition:background .15s;font-family:'Inter',sans-serif;flex-shrink:0}
.nl-btn:hover{background:#256b29}
.nl-status{margin-top:8px;font-size:12px}
.nl-status.ok{color:#8ce39b}
.nl-status.err{color:#ffb3b3}

/* ── RESPONSIVE ── */
/* Nav switches to the hamburger menu earlier than other sections (1260px) since the
   longest-language labels (German needs about 1240 px) no longer fit the inline nav past that width. */
@media(max-width:1260px){
  .mnav-btn{display:block}
  .nav-links{position:fixed;top:56px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;padding:8px;gap:2px;display:none;box-shadow:0 8px 20px rgba(0,0,0,.08)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;white-space:normal}
  .nav-links .nav-mobile-only{display:block}
  .nav-links .nav-mobile-only.cta{background:var(--green);color:#fff;text-align:center;font-weight:600;margin-top:6px}
  .nav-links .nav-mobile-only.cta:hover{background:#256b29;color:#fff}
  .nav-in{gap:12px}
  .nav-logo img{height:26px!important}
  .nav-right{gap:6px}
  .nav-right .btn-ghost,.nav-right .btn-quote{display:none}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-right{display:none}
  .hero-left{padding:80px 24px 40px;max-width:100%;margin:0}
  .about-grid,.contact-grid,.footer-grid{grid-template-columns:1fr;gap:32px}
  .caps-grid{grid-template-columns:1fr 1fr}
  .caps-grid.compact{grid-template-columns:repeat(3,1fr)}
  .caps-grid.compact .capcard:last-child{grid-column:2/4}

  .qc-row{grid-template-columns:1fr}
  .results-bar{grid-template-columns:1fr 1fr}
  .calc-grid{grid-template-columns:minmax(0,1fr)}
  .feature-list.two-col{column-count:1}
  .spec-sheet{grid-template-columns:1fr}
  .gallery-grid{grid-template-rows:auto;height:auto}
  .gcard.tall{grid-row:auto}
  .gallery-grid{grid-template-columns:1fr}
  .stat-strip,.sister-grid,.proc-matrix{grid-template-columns:1fr 1fr}
  .svc-detail{grid-template-columns:1fr}
  .page-hero{padding-top:96px}
}
@media(max-width:600px){
  .caps-grid{grid-template-columns:1fr}
  .caps-grid.compact{grid-template-columns:1fr 1fr}
  .caps-grid.compact .capcard:last-child{grid-column:1/-1}
  section{padding:56px 16px}
  .trust-in{gap:20px}
  .stat-strip,.sister-grid,.proc-matrix{grid-template-columns:1fr}
  .qc-cta{grid-template-columns:1fr}
  .btn-go{width:100%;white-space:normal;justify-content:center;text-align:center;height:auto;padding:10px 16px;line-height:1.3}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr}
  .hstat{border-right:1px solid var(--border)}
  .hstat:nth-child(2n){border-right:none}
  .hstat:nth-child(1),.hstat:nth-child(2){border-bottom:1px solid var(--border)}
}

.stack-learn-btn{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;max-width:132px;margin-top:6px;font-size:11px;font-weight:700;color:#fff;background:var(--green);padding:9px 10px;border-radius:var(--r);text-decoration:none;letter-spacing:.01em;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 3px 10px rgba(46,125,50,.35)}
.stack-learn-btn:hover{background:var(--green-h);transform:translateY(-2px);box-shadow:0 5px 14px rgba(46,125,50,.45)}
.stack-learn-btn:active{transform:translateY(0)}

.board-switcher{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:60;background:#fff;border:1px solid var(--border);border-radius:var(--r2);box-shadow:0 4px 20px rgba(0,0,0,.14);padding:10px 8px;display:flex;flex-direction:column;gap:8px}
.board-switcher .bsw-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);text-align:center;margin-bottom:2px}
.bsw-item{width:44px;height:44px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;text-decoration:none;position:relative;border:1.5px solid transparent;transition:all .15s}
.bsw-item svg{width:20px;height:20px;pointer-events:none}
.bsw-item:hover{background:var(--green-l);border-color:var(--green-m)}
.bsw-item.active{background:var(--green-l);border-color:var(--green)}
.bsw-item .bsw-tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#1a1a1a;color:#fff;font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.bsw-item:hover .bsw-tip{opacity:1}
@media (max-width:1180px){
  .board-switcher{top:auto;bottom:0;left:0;right:0;transform:none;flex-direction:row;justify-content:center;border-radius:0;border-left:none;border-right:none;border-bottom:none;padding:6px 10px;gap:6px;box-shadow:0 -4px 16px rgba(0,0,0,.14)}
  .board-switcher .bsw-label{display:none}
  .bsw-item{width:38px;height:38px}
  .bsw-item .bsw-tip{display:none}
  body.has-board-switcher{padding-bottom:60px}
  body.has-board-switcher .whatsapp-float,body.has-board-switcher .wa-float{bottom:66px}
  body.has-board-switcher .cookie-banner{bottom:60px}
}

/* ── COOKIE CONSENT BANNER ── */
/* padding-right reserves space for .wa-float (fixed bottom-right, 56px +
   20px offset = 76px on desktop), so the fixed WhatsApp bubble never sits on
   top of the Accept/Decline buttons — this banner shows on every first visit,
   unlike content that only scrolls into that corner occasionally. */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(0,0,0,.1);z-index:200;padding:16px 96px 16px 16px}
.cookie-banner-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cookie-banner-in p{font-size:13px;color:var(--text2);line-height:1.6;margin:0;flex:1;min-width:240px}
.cookie-banner-in a{color:var(--green);text-decoration:underline}
.cookie-banner-btns{display:flex;gap:10px;flex-shrink:0}
@media(max-width:600px){
  .cookie-banner{padding:16px 84px 16px 16px}
  .cookie-banner-in{flex-direction:column;align-items:stretch}
  .cookie-banner-btns{justify-content:stretch}
  .cookie-banner-btns button{flex:1}
}

/* long translations: call-to-action buttons wrap instead of overflowing narrow screens (QA 13 Oct 2026) */
.calc-cta-btns .btn-quote,.calc-cta-btns .btn-ghost{white-space:normal;max-width:100%;text-align:center;line-height:1.35}
.legal-wrap .table-wrap{overflow-x:auto;margin:0 0 18px}
.legal-wrap table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.legal-wrap th,.legal-wrap td{border:1px solid var(--border,#dcdfe0);padding:8px 10px;text-align:left;vertical-align:top;color:var(--text2,#444)}
.legal-wrap th{background:#f3f6f4;color:var(--text,#111);font-weight:700}
.legal-wrap ol{margin:0 0 12px;padding-left:24px}
.guide-page h2 a{color:inherit;text-decoration:none}
.guide-page h2 a:hover{text-decoration:underline}
/* Home "Explore" hub: intent chips, guides card, popular-guides strip */
.explore-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.explore-chips button{font:inherit;font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.explore-chips button:hover{border-color:var(--green);color:var(--green)}
.explore-chips button.on{background:var(--green);border-color:var(--green);color:#fff}
.explore-chips button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.explore-grid .capcard{transition:background .15s,opacity .25s,filter .25s}
.explore-grid .capcard .capcard-icon{transition:transform .2s}
.explore-grid .capcard:hover .capcard-icon,.explore-grid .capcard:focus-visible .capcard-icon{transform:scale(1.12) rotate(-4deg)}
.explore-grid .capcard .more{display:inline-block;transition:transform .2s}
.explore-grid .capcard:hover .more,.explore-grid .capcard:focus-visible .more{transform:translateX(5px)}
.explore-grid .capcard.dim{opacity:.3;filter:grayscale(.7)}
.explore-grid .capcard.dim:hover{opacity:.85;filter:none}
.capcard-guides{background:var(--green-l)}
.capcard-guides:hover{background:#dcefdd}
.capcard-guides h3 .badge{margin:0 0 0 6px;vertical-align:middle;background:var(--green);color:#fff}
.explore-guides{margin:18px 0 0;font-size:13px;color:var(--text3);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.explore-guides a{color:var(--green);font-weight:600;text-decoration:none;padding:4px 12px;border-radius:999px;background:var(--green-l)}
.explore-guides a:hover{background:#dcefdd;text-decoration:underline}
@media (prefers-reduced-motion:reduce){.explore-grid .capcard,.explore-grid .capcard .more,.explore-grid .capcard .capcard-icon{transition:none}.explore-grid .capcard:hover .more,.explore-grid .capcard:hover .capcard-icon{transform:none}}
/* Home FAQ: scrollable list, about 4-5 questions visible; fade at the bottom until the end is reached */
.faq-wrap{position:relative;max-width:820px}
.faq-wrap .faq-list{max-height:350px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--green) var(--bg2)}
.faq-wrap .faq-list::-webkit-scrollbar{width:8px}
.faq-wrap .faq-list::-webkit-scrollbar-track{background:var(--bg2);border-radius:8px}
.faq-wrap .faq-list::-webkit-scrollbar-thumb{background:var(--green);border-radius:8px}
.faq-wrap .faq-list:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:var(--r2)}
.faq-wrap::after{content:'';position:absolute;left:0;right:16px;bottom:0;height:44px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;transition:opacity .2s}
.faq-wrap.at-end::after{opacity:0}
.guide-page h3{font-size:16px;font-weight:700;margin:20px 0 4px;color:var(--text,#111)}
.guide-page h3 a{color:inherit;text-decoration:none}
.guide-page h3 a:hover{text-decoration:underline;color:var(--green)}

/* Guide pages: back button, table of contents, FAQ, call to action, previous / next */
.guide-page a.guide-back{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border:2px solid var(--green);border-radius:999px;background:#fff;color:var(--green);font-size:15px;font-weight:700;text-decoration:none;line-height:1.2;text-align:center;transition:background .15s,color .15s}
.guide-page a.guide-back:hover,.guide-page a.guide-back:focus-visible{background:var(--green);color:#fff}
.guide-page h2[id]{scroll-margin-top:96px}
.guide-faq{margin:0 0 8px}
.guide-faq .faq-item p{margin:0}
.guide-cta{margin:36px 0 8px;padding:24px 26px;border-radius:var(--r2);background:var(--green-l);border:1px solid var(--green-m);text-align:center}
.guide-cta .guide-cta-t{margin:0 0 6px;font-size:19px;font-weight:700;color:var(--green-h)}
.guide-cta p{margin:0 0 14px}
.guide-page a.guide-cta-btn{display:inline-block;padding:12px 26px;border-radius:var(--r);background:var(--green);color:#fff;font-weight:700;font-size:15px;text-decoration:none;transition:background .15s}
.guide-page a.guide-cta-btn:hover,.guide-page a.guide-cta-btn:focus-visible{background:var(--green-h)}
.guide-pn{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin:24px 0 0}
.guide-page a.guide-pn-a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r2);color:var(--text);font-size:14px;font-weight:600;line-height:1.35;text-decoration:none;transition:border-color .15s,background .15s}
.guide-page a.guide-pn-a span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green)}
.guide-page a.guide-pn-a:hover,.guide-page a.guide-pn-a:focus-visible{border-color:var(--green);background:var(--bg)}
.guide-page a.guide-pn-next{text-align:right}
@media (max-width:720px){
  .guide-pn{grid-template-columns:1fr;gap:10px}
  .guide-pn .guide-back-b{order:-1}
  .guide-page a.guide-pn-next{text-align:left}
  .guide-pn>span:empty{display:none}
}
/* Guides knowledge centre (2026-10-23): hub with search + filters + card grid, article with contents column, questions-and-answers page. Behaviour: guides.js */
.page-hero.guide-hero{padding-bottom:26px}
.guide-hero .container{max-width:1100px}
.guide-hero .sec-title{max-width:900px;margin-bottom:10px}
.guide-hero .sec-sub{max-width:760px}
.guide-meta{display:flex;flex-wrap:wrap;margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--text2)}
.guide-meta>*+*::before{content:'·';margin:0 8px;color:var(--text3)}
.guide-meta a.guide-meta-cat{color:var(--green-h);font-weight:700;text-decoration:none}
.guide-meta a.guide-meta-cat:hover{text-decoration:underline}
.guide-meta a.guide-meta-cat:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}
.gh-faqlink{margin:14px 0 0;font-size:14px}
.gh-faqlink a{color:var(--green-h);font-weight:600}
.gh-faqlink a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}
.guides-hub{background:#fff;padding:28px 20px 72px}
.guides-wide{max-width:1100px}
.guides-hub [hidden],.guide-main [hidden]{display:none!important}
/* search + chips (same look as the chips of the home page) */
.gh-tools{display:grid;gap:14px;margin:0 0 26px;padding:18px;border:1px solid var(--border);border-radius:var(--r2);background:var(--bg)}
.gh-search{display:flex;flex-direction:column;gap:6px}
.gh-label{font-size:13px;font-weight:700;color:var(--text)}
.gh-input{width:100%;height:46px;padding:0 14px;font:inherit;font-size:16px;color:var(--text);background:#fff;border:1.5px solid #767676;border-radius:var(--r2)}
.gh-input:focus-visible{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
.gh-chips{display:flex;flex-wrap:wrap;gap:8px}
.gh-chips button{font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid #bdbdbd;background:#fff;color:var(--text2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.gh-chips button:hover{border-color:var(--green);color:var(--green-h)}
.gh-chips button.on{background:var(--green);border-color:var(--green);color:#fff}
.gh-chips button:focus-visible{outline:3px solid var(--green-h);outline-offset:2px}
.gh-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.gh-count{margin:0;font-size:14px;font-weight:600;color:var(--text)}
.gh-reset{font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--r);border:1px solid var(--green);background:#fff;color:var(--green-h);cursor:pointer}
.gh-reset:hover{background:var(--green-l)}
.gh-reset:focus-visible{outline:3px solid var(--green-h);outline-offset:2px}
.gh-empty{margin:0 0 28px;padding:22px 24px;border:1.5px dashed #9e9e9e;border-radius:var(--r2);background:#fff}
.gh-empty p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--text2)}
.gh-empty .gh-empty-t{font-size:17px;font-weight:700;color:var(--text)}
.gh-empty .gh-ask{margin-left:10px;color:var(--green-h);font-weight:600}
/* card grid: 3 columns on desktop, 2 on tablets, 1 on phones */
.gh-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.guides-hub a.gcard,.guide-page a.gcard{display:flex;flex-direction:column;gap:8px;height:100%;padding:18px 18px 16px;border:1px solid var(--border);border-radius:var(--r2);background:#fff;color:var(--text);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.guides-hub a.gcard:hover,.guide-page a.gcard:hover{border-color:var(--green);box-shadow:0 4px 14px rgba(0,0,0,.09)}
.guides-hub a.gcard:focus-visible,.guide-page a.gcard:focus-visible{outline:3px solid var(--green-h);outline-offset:2px;border-color:var(--green)}
.gcard .gcard-cat{font-size:11.5px;font-weight:700;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--green-h)}
.gcard .gcard-title{margin:0;font-size:17px;line-height:1.3;font-weight:700;color:var(--text)}
.gcard:hover .gcard-title{color:var(--green-h);text-decoration:underline;text-underline-offset:3px}
.gcard .gcard-desc{margin:0;font-size:14px;line-height:1.55;color:var(--text2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.gcard .gcard-meta{margin-top:auto;padding-top:6px;font-size:12.5px;line-height:1.4;color:var(--text3)}
.gcard-sm .gcard-title{font-size:15px}
.guides-hub h2{margin:0 0 14px;font-size:22px;line-height:1.25;font-weight:700;color:var(--text)}
.gh-cat{margin:0 0 38px;padding:0}
.gh-cat-n{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--border);font-size:13px;font-weight:600;vertical-align:middle;color:var(--text2)}
.gh-start{margin:0 0 40px;padding:22px 22px 24px;border:1px solid var(--green-m);border-radius:var(--r2);background:var(--bg2)}
.gh-start h2{margin-bottom:4px}
.gh-sub{margin:0 0 16px;font-size:14.5px;color:var(--text2)}
.gh-faqbox,.guide-ask{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;padding:20px 24px;border:1px solid var(--border);border-radius:var(--r2);background:var(--bg)}
.gh-faqbox{margin:8px 0 0}
.guide-ask{margin:16px 0 0;background:#fff}
.gh-faqbox p,.guide-ask p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text2)}
.gh-faqbox p.gh-faqbox-t,.guide-ask p.guide-ask-t{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--text)}
.gh-faqbox>div,.guide-ask>div{flex:1 1 320px}
a.guide-ask-btn{display:inline-block;padding:10px 20px;border:2px solid var(--green);border-radius:var(--r);background:#fff;color:var(--green-h);font-size:14.5px;font-weight:700;line-height:1.3;text-align:center;text-decoration:none;transition:background .15s,color .15s}
a.guide-ask-btn:hover{background:var(--green);color:#fff}
a.guide-ask-btn:focus-visible{outline:3px solid var(--green-h);outline-offset:2px}
/* questions and answers page */
.gf-item{scroll-margin-top:84px}
.gf-a{padding:0 20px 14px}
.faq-item .gf-a p{margin:0 0 8px;padding:0;font-size:14.5px;line-height:1.7;color:var(--text2)}
.faq-item .gf-a p.gf-src{font-size:13px;color:var(--text3)}
.gf-a a{color:var(--green-h);font-weight:600}
.gf-a a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}
.gf-a a.gf-full{white-space:nowrap}
/* article: contents column (sticky from 1100 px), reading column, related guides, progress bar */
.guide-layout{max-width:1100px;margin:0 auto}
.guide-layout:not(.has-side) .guide-main{margin:0 auto}
.guide-main{max-width:780px;min-width:0}
.guide-side{margin:0 0 24px}
.guide-toc{border:1px solid var(--green-m);border-radius:var(--r2);background:var(--bg2)}
.guide-toc summary.guide-toc-t{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-h)}
.guide-toc summary.guide-toc-t::-webkit-details-marker{display:none}
.guide-toc summary.guide-toc-t::after{content:'';width:8px;height:8px;border:solid var(--green-h);border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.guide-toc[open] summary.guide-toc-t::after{transform:rotate(-135deg);margin-top:4px}
.guide-toc summary.guide-toc-t:focus-visible{outline:3px solid var(--green-h);outline-offset:2px;border-radius:var(--r2)}
.guide-toc ol{margin:0;padding:0 16px 14px 38px}
.guide-toc li{margin-bottom:6px;font-size:14px;line-height:1.4}
.guide-toc a{display:block;padding:2px 0;color:var(--text);text-decoration:none}
.guide-toc a:hover{color:var(--green-h);text-decoration:underline}
.guide-toc a:focus-visible{outline:2px solid var(--green-h);outline-offset:2px;border-radius:2px}
.guide-toc a[aria-current]{color:var(--green-h);font-weight:700}
.guide-related{margin:40px 0 0;padding:0}
.guide-related h2{margin:0 0 14px}
.gh-grid-sm{grid-template-columns:repeat(3,minmax(0,1fr))}
.legal-wrap .gh-grid{margin:0;padding:0}
.legal-wrap .gh-grid li{margin:0}
.guide-progress{position:fixed;top:56px;left:0;right:0;height:3px;z-index:997;pointer-events:none}
.guide-progress>span{display:block;height:100%;background:var(--green);transform-origin:0 50%;transform:scaleX(0)}
@media (min-width:1100px){
  .guide-layout.has-side{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
  .guide-side{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;margin:0}
  .guide-toc summary.guide-toc-t{pointer-events:none;cursor:default}
  .guide-toc summary.guide-toc-t::after{display:none}
}
@media (max-width:979px){
  .gh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:719px){
  .gh-grid-sm{grid-template-columns:1fr}
}
@media (max-width:599px){
  .guide-meta{gap:2px 14px}
  .guide-meta>*+*::before{display:none}
  .guides-hub{padding:20px 16px 56px}
  .gh-tools{padding:14px}
  .gh-grid{grid-template-columns:1fr}
  .gh-start{padding:16px}
  .gh-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:3px 14px 6px;scrollbar-width:thin}
  .gh-chips button{flex:none;white-space:nowrap;padding:8px 12px}
  .gh-faqbox,.guide-ask{padding:16px}
  .gf-a{padding:0 16px 12px}
}
@media (prefers-reduced-motion:reduce){.gh-chips button,.guides-hub a.gcard,.guide-toc summary.guide-toc-t::after{transition:none}}
@media print{.guide-progress,.gh-tools,.guide-side{display:none!important}}
/* announcements + non-working periods (admin: Site tab; site-notices.js) — up to 3 bars stacked under the menu */
.site-announcements{position:fixed;top:56px;left:0;right:0;z-index:998}
.site-announcements.is-preview{position:static;border:1px solid #f0d58c;border-radius:6px;overflow:hidden}   /* the admin preview of the same bars */
.site-announcement{position:relative;background:#fff8e1;color:#5d4200;border-bottom:1px solid #f0d58c;padding:8px 48px 8px 16px;font-size:13.5px;line-height:1.4;text-align:center}
.site-announcement-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer;border-radius:50%}
.site-announcement-x:hover{background:rgba(0,0,0,.08)}
.site-announcement-x:focus-visible{outline:2px solid #5d4200;outline-offset:1px}
@media print{.site-announcements{display:none}}
/* calculator: shipping / VAT information in one short line + collapsible details */
.ship-brief{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin-top:8px;padding:7px 12px;border-radius:var(--r);background:var(--bg2);border-left:3px solid var(--green);font-size:12.5px;line-height:1.5;color:var(--text)}
.ship-brief>span{flex:1 1 220px}
.ship-more{background:none;border:0;padding:2px 0;font:inherit;font-weight:600;color:var(--green);cursor:pointer;text-decoration:underline}
.ship-details{margin-top:4px;padding:4px 12px;border-radius:var(--r);background:var(--bg2);font-size:12px;line-height:1.55;color:var(--text2)}
.ship-details p{margin:6px 0}
.ship-details[hidden]{display:none}
/* panel suggestions (better production yield) */
/* its own openable card ABOVE the manual panel settings; dashed outline + bulb + "show" pill keep it from being mistaken for the (pre-filled, editable) fields below it */
.panel-suggest{border:1.5px dashed var(--green);background:var(--bg2);border-radius:var(--r);padding:10px 12px;margin-bottom:14px}
.ps-bulb{font-size:16px;line-height:1}
.ps-ttl{flex:1 1 auto;min-width:0}
.ps-act{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--green);border:1px solid var(--green);border-radius:999px;padding:3px 10px;background:#fff;white-space:nowrap}

.ps-intro{font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:8px}
.ps-item{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:6px}
.ps-item.ps-best{border-color:var(--green)}
.ps-main{flex:1 1 220px;min-width:0;font-size:13px}
.ps-sub{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.45}
.ps-badge{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--green);border-radius:999px;padding:1px 8px;margin-left:4px}
.ps-use{white-space:nowrap}
.ps-restore{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;background:#fff8e6;border:1px solid #f0c36d;border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:13px}
.ps-restore-txt{flex:1 1 220px;min-width:0}
.panel-suggest.ps-only-restore .ps-restore{margin-bottom:0}
.ps-current{white-space:nowrap;font-size:12px;font-weight:700;color:var(--green)}

.ps-toggle{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;padding:0;font:inherit;font-weight:700;font-size:13px;color:var(--text);text-align:left;cursor:pointer}
.ps-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
.ps-chev{display:inline-block;transition:transform .15s;color:var(--green)}
.panel-suggest.open .ps-chev{transform:rotate(90deg)}
.ps-body{margin-top:8px}
.ps-body[hidden]{display:none}
@media(max-width:760px){.mlp-var:not([data-act]){grid-template-columns:1fr}}
/* multilayer pop-up cards: client panel above, production format below */
.mlp-var{display:block}
.mlp-var-head{margin-bottom:8px}
.mlp-sec{padding:10px 0;border-top:1px solid #e3ebe3}
.mlp-var-head + .mlp-sec{border-top:none;padding-top:2px}
.mlp-sec-h{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text2);margin-bottom:8px}
.mlp-sec-prod .mlp-sec-h{color:#546e7a}
.mlp-sec-b{display:grid;grid-template-columns:minmax(96px,140px) 1fr;gap:6px 16px;align-items:center}
.mlp-draw{display:flex;justify-content:center;align-items:center}
.mlp-draw .mlp-svg{max-width:140px;max-height:150px}
.mlp-draw .mlp-sheet{max-width:120px;max-height:150px}
.mlp-facts{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:13px;line-height:1.35;align-items:baseline}
.mlp-facts dt{color:var(--text3);font-size:12px;margin:0}
.mlp-facts dd{margin:0;color:var(--text)}
.mlp-facts .mlp-q{white-space:nowrap}
.mlp-var.bad{border-color:#e57373;background:#fff6f6}
.mlp-var .mlp-bad,.mlp-var .mlp-warn{margin:6px 0 0;padding:7px 10px;border-radius:8px}
.mlp-var .mlp-bad{background:#fde3e3}
.mlp-var .mlp-warn{background:#fff3d6}
.mlp-var .mlp-choose{margin-top:10px;width:100%}
.mlp-var-price{font-size:15px}
@media(max-width:520px){.mlp-sec-b{grid-template-columns:1fr}.mlp-draw{justify-content:flex-start}.mlp-facts{grid-template-columns:1fr 1fr}}
/* the pop-up's title and the Cancel / Apply bar stay on screen while the content scrolls */
.mlp-head{position:sticky;top:-18px;background:#fff;margin:-18px -20px 0;padding:14px 20px 8px;z-index:3}
.mlp-foot{position:sticky;bottom:-18px;background:#fff;margin:14px -20px -18px;padding:12px 20px;border-top:1px solid #dfe7df;z-index:3;box-shadow:0 -6px 12px -8px rgba(0,0,0,.18);border-radius:0 0 14px 14px}
.mlp-foot .btn-quote,.mlp-foot .btn-ghost{min-width:150px}
@media(max-width:520px){.mlp-foot{flex-wrap:nowrap}.mlp-foot .btn-quote,.mlp-foot .btn-ghost{min-width:0;flex:1}}
/* related guides on product and company pages */
.related-guides{padding:28px 0 8px}
.related-guides .rg-title{font-size:1.05rem;margin:0 0 12px;color:var(--text)}
.rg-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.rg-list a{display:inline-block;color:var(--green);font-weight:600;text-decoration:none;padding:8px 14px;border-radius:999px;background:var(--green-l);font-size:14px}
.rg-list a:hover{background:#dcefdd;text-decoration:underline}

/* ── Client portal (2026-10-22): toolbar, status chips, request number, offer/confirm box, timeline, profile, confirm dialog ── */
.req-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.req-search{width:100%;max-width:420px;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r);font:inherit;font-size:14px;background:#fff;color:#111;margin-bottom:10px}
.req-search:focus{outline:2px solid var(--green-m);outline-offset:1px}
.req-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.req-chip{background:#fff;border:1px solid var(--border);border-radius:99px;padding:5px 12px;font:600 12px 'Inter',sans-serif;color:var(--text2);cursor:pointer}
.req-chip b{margin-left:4px;color:var(--text3)}
.req-chip.on{background:var(--green);border-color:var(--green);color:#fff}
.req-chip.on b{color:#fff}
.req-chip.attn{border-color:#e0a100;background:#fff8e1;color:#8a5200}
.req-chip.attn.on{background:#e0a100;border-color:#e0a100;color:#fff}
.req-no{display:inline-block;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;background:#f1f5f2;color:#1b5e20;border:1px solid #d5e3d8;border-radius:5px;padding:4px 7px;vertical-align:1px}
.st-order_confirmed{background:#e0f7fa;color:#006064}
.req-msg-order_confirmed{background:#f0fafb;border-left-color:#00838f}
.req-offer-box{margin:10px 0 2px;padding:12px 14px;border-radius:8px;background:#f1f8f1;border:1px solid #cfe5d1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#1b5e20;line-height:1.5}
.req-confirmed-box{margin:8px 0 2px;padding:9px 12px;border-radius:8px;background:#f0fafb;border:1px solid #cdebef;font-size:13px;color:#005b63;line-height:1.55}
.req-timeline{margin-top:8px;font-size:12px}
.req-timeline summary{cursor:pointer;color:var(--green);font-weight:600;padding:2px 0}
.req-tl-row{display:flex;gap:10px;padding:5px 0 5px 12px;border-left:2px solid #d5e3d8;margin-left:4px;color:var(--text2);line-height:1.5}
.req-tl-row .tl-when{flex:0 0 auto;color:var(--text3);min-width:118px}
.req-lock-hint{font-size:11px;color:var(--text3);align-self:center}
.profile-box{margin-bottom:24px}
.pf-h{font-size:1.1em;margin:0 0 12px}
.pf-h2{font-size:1em;margin:22px 0 10px;padding-top:14px;border-top:1px solid var(--border)}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.pf-grid .fg{margin:0}
.pf-grid .pf-wide{grid-column:1/-1}
.pf-grid textarea{width:100%;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r);resize:vertical;box-sizing:border-box}
.pf-note{font-size:12px;color:var(--text3);margin:8px 0 0;line-height:1.5}
.pf-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
@media(max-width:600px){.pf-grid{grid-template-columns:1fr}}
.cfm-overlay{position:fixed;inset:0;background:rgba(20,30,20,.55);z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.cfm-card{background:#fff;border-radius:10px;max-width:480px;width:100%;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:92vh;overflow:auto}
.cfm-card h3{font-size:17px;margin:0 0 8px}
.cfm-card p{font-size:13px;color:var(--text2);line-height:1.55;margin:0 0 12px}
.cfm-card .fg{margin-bottom:10px}
.cfm-card textarea,.cfm-card input[type=text]{width:100%;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r);box-sizing:border-box}
.cfm-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* "Made in EU" (tools/transform-origin.php): EU flag, hero badge, footer line */
.eu-flag{display:inline-block;flex:0 0 auto;width:27px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 18'%3E%3Crect width='27' height='18' rx='1.5' fill='%23039'/%3E%3Ccircle cx='13.50' cy='3.00' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='16.50' cy='3.80' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='18.70' cy='6.00' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='19.50' cy='9.00' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='18.70' cy='12.00' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='16.50' cy='14.20' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='13.50' cy='15.00' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='10.50' cy='14.20' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='8.30' cy='12.00' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='7.50' cy='9.00' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='8.30' cy='6.00' r='1.15' fill='%23fc0'/%3E%3Ccircle cx='10.50' cy='3.80' r='1.15' fill='%23fc0'/%3E%3C/svg%3E") center/contain no-repeat;vertical-align:middle}
.origin-badge{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 14px;border:1px solid #d5e3d8;background:#f6faf6;border-radius:8px;font-size:13px;color:var(--text2);line-height:1.45;max-width:100%}
.origin-badge strong{color:#003399;letter-spacing:.01em}
.hero-left .origin-badge{margin:0 0 16px}
.footer-origin{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:rgba(255,255,255,.75);font-size:12px}
.footer-origin .eu-flag{width:22px;height:15px}
@media print{.origin-badge{border-color:#999;background:#fff}}

/* ── Public-page audit fixes (2026-10-23) ─────────────────────────────────────────────────────────────────────── */
/* contact form: required marker + legend, invalid state, honeypot (off-screen: invisible to people and to assistive technology), success box */
.fg label.req::after{content:" *";color:#c62828;font-weight:700}
.req-legend{font-size:12px;color:var(--text3);margin:0 0 12px}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fg input[aria-invalid="true"],.fg textarea[aria-invalid="true"],.fg select[aria-invalid="true"]{border-color:#c62828;background:#fff8f8}
.fg input:focus-visible,.fg select:focus-visible,.fg textarea:focus-visible{border-color:var(--green);box-shadow:0 0 0 3px rgba(27,94,32,.25)}
#cf-submit:disabled{opacity:.7;cursor:progress}
.form-success:focus{outline:none}
.cfs-email{color:var(--text2);font-size:14px;margin-top:6px}
.cfs-again{margin-top:18px}
/* menu button: a comfortable touch target and a visible focus ring */
.mnav-btn{min-width:44px;min-height:44px}
.mnav-btn:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:var(--r)}
/* touch targets (WCAG 2.5.8, at least 24 px): the footer legal row, the footer e-mail, the contact page's own links, the sister-site link */
.footer-legal-links{gap:0 20px}
.footer-legal-links a{padding:4px 0}
.fl-company a{padding:3px 0}
.cval a{display:inline-block;padding:3px 0}
.sister-card .sc-link{padding:5px 0}
.guide-meta a.guide-meta-cat{display:inline-block;padding:3px 0;margin:-3px 0}   /* guide pages: the category link above the title (20 px -> 26 px, no change in layout) */
.guide-toc a{padding:3px 0}                                                      /* guide pages: table-of-contents links (23.6 px -> 25.6 px) */
.terms-check{min-height:24px}                                                     /* the checkbox itself is 18 px: the whole label is the target */
a[data-i18n="account.forgot_link"]{padding:5px 0}                                 /* account page: "Forgot your password?" (18 px -> 28 px) */
@media(max-width:600px){
  /* chips and small buttons of the pages (calculator options, "Details", "Technical notes"): at least 36 px / 32 px high on a phone */
  .chip{min-height:36px}
  .ship-more{min-height:32px;padding:6px 0}
  .obs-btn{min-height:36px}
}

/* "100% electrical test · SC + OC" stamp (home hero), trust-bar highlight and calculator chip */
.test-stamp{width:156px;height:156px;box-sizing:border-box;border-radius:50%;border:3px double #1b5e20;color:#1b5e20;background:rgba(255,255,255,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px;padding:10px;transform:rotate(-8deg);box-shadow:0 0 0 4px rgba(255,255,255,.9),0 8px 22px rgba(0,0,0,.22);line-height:1.15;pointer-events:none}
.test-stamp .ts-top{font-size:9px;letter-spacing:.16em;font-weight:700}
.test-stamp .ts-big{font-size:36px;font-weight:800;line-height:1;letter-spacing:-.02em}
.test-stamp .ts-mid{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.test-stamp .ts-sc{font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-top:1.5px solid #1b5e20;border-bottom:1.5px solid #1b5e20;margin:4px 0;padding:2px 6px;max-width:124px;line-height:1.2}
.test-stamp .ts-bot{font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;max-width:112px}
.test-stamp-d{position:absolute;right:36px;top:96px;z-index:2}
.trust .titem-hl{font-weight:700;color:#1b5e20;background:#fff;padding:4px 12px;border-radius:999px}
.test-chip{display:inline-block;margin-top:8px;padding:4px 10px;border:1px solid #1b5e20;border-radius:999px;color:#1b5e20;background:#f1f8f2;font-size:12.5px;font-weight:700}
.test-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.test-list li{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid #1b5e20;border-radius:999px;color:#1b5e20;background:#f1f8f2;font-size:13px;font-weight:700;line-height:1.3}
.test-list li>span:first-child{font-size:14px}
@media print{.test-stamp{box-shadow:none}}

/* ── Client portal v23 (2026-10-24): attention block, folds, sort/CSV tools, prices, delivery, documents, messages, addresses, WhatsApp on a phone ── */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.attn-block{margin:0 0 18px;padding:14px 16px;border:1px solid #ecd98a;border-left:5px solid #e0a100;border-radius:var(--r2);background:#fffbe6}
.attn-block[hidden]{display:none}
.attn-title{font-weight:800;font-size:14px;color:#6b4e00;margin-bottom:8px}
.attn-count{display:inline-block;min-width:20px;padding:1px 7px;border-radius:99px;background:#e0a100;color:#fff;font-size:12px;text-align:center;margin-left:4px}
.attn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.attn-list li{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;padding:8px 0;border-top:1px solid #f0e3a8}
.attn-list li:first-child{border-top:0;padding-top:0}
.attn-main{flex:1 1 220px;min-width:0;font-size:13px;color:#333;cursor:pointer;overflow-wrap:anywhere}
.attn-what{font-size:13px;color:#4a3b00;margin-top:2px}
.attn-no{display:inline-block;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;color:#1b5e20;margin-left:4px}
.attn-btn .btn-quote,.attn-btn .btn-ghost{padding:7px 16px;font-size:13px;height:auto;white-space:normal}
.msg-new{display:inline-block;padding:1px 8px;border-radius:99px;background:#c62828;color:#fff;font-size:11px;font-weight:700;vertical-align:1px}
.fold{margin:0 0 16px;border:1px solid var(--border);border-radius:var(--r2);background:#fff}
.fold[hidden]{display:none}
.fold>summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:700;font-size:14px;color:#14391a;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"\25B8";font-size:14px;color:var(--text3);transition:transform .15s}
.fold[open]>summary::after{transform:rotate(90deg)}
.fold>summary:focus-visible{outline:2px solid var(--green-m);outline-offset:-2px;border-radius:var(--r2)}
.fold>.profile-box,.fold>#my-promo-box{margin:0;border:0;border-top:1px solid var(--border);border-radius:0 0 var(--r2) var(--r2)}
.fold>#my-promo-box{padding:12px 16px 14px}
.fold>#my-promo-box .info-box{margin:0}
.req-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.req-sort{height:38px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r);font:inherit;font-size:13px;background:#fff;color:#111;max-width:100%}
.req-csv{height:38px;padding:0 14px}
.portal-help{margin:0 0 28px;font-size:13px}
.wa-inline{color:#128c4a;font-weight:600;text-decoration:underline;overflow-wrap:anywhere}
.req-estimate{font-weight:600;white-space:normal;text-align:right}
.req-est-label{font-weight:500;color:var(--text2)}
.req-delivery{margin:8px 0 2px;padding:9px 12px;border-radius:8px;background:#f4f8ff;border:1px solid #d3e2fa;font-size:13px;color:#16407a;line-height:1.6}
.req-track{font-weight:700;color:#0d47a1;text-decoration:underline}
.req-offer-valid{display:block;font-size:12px;color:#33691e;margin-top:3px}
.req-offer-valid.exp{color:#b71c1c;font-weight:600}
.req-offer-box.expired{background:#fdf1ef;border-color:#f0c4be;color:#7f1d1d}
.req-repeat-tag{display:inline-block;font-size:11.5px;font-weight:700;color:#4527a0;background:#ede7f6;border-radius:5px;padding:3px 7px;margin-right:6px}
.req-proforma-done{font-size:12px;color:var(--text2);align-self:center}
.req-reorder-btn{border-color:var(--green);color:#fff;background:var(--green)}
.req-sec-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.req-docs{margin:10px 0 2px}
.req-docs ul{list-style:none;margin:0;padding:0}
.req-doc{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:baseline;width:100%;text-align:left;font:inherit;font-size:13px;background:#f6faf6;border:1px solid #d5e3d8;border-radius:6px;padding:7px 10px;margin-bottom:4px;cursor:pointer;color:#14391a;min-height:36px}
.req-doc:hover{background:#eaf4eb}
.req-doc-kind{font-weight:700}
.req-doc-name{overflow-wrap:anywhere}
.req-doc-meta{font-size:11.5px;color:var(--text3)}
.req-msgs{margin-top:10px;border:1px solid var(--border);border-radius:8px;background:#fcfdfc}
.req-msgs>summary{cursor:pointer;padding:9px 12px;font-weight:700;font-size:13px;color:var(--green);list-style:none;min-height:40px;display:flex;align-items:center;gap:6px}
.req-msgs>summary::-webkit-details-marker{display:none}
.req-msgs[open]>summary{border-bottom:1px solid var(--border)}
.msg-thread{padding:10px 12px;display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.msg{max-width:92%;padding:8px 11px;border-radius:10px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.msg-client{align-self:flex-end;background:#e8f5e9;border:1px solid #cfe5d1}
.msg-sales{align-self:flex-start;background:#fff;border:1px solid var(--border)}
.msg.unread{border-color:#c62828;box-shadow:0 0 0 2px rgba(198,40,40,.12)}
.msg-who{font-size:11px;color:var(--text3);margin-bottom:2px}
.msg-empty{font-size:13px;color:var(--text2)}
.msg-ta{display:block;width:calc(100% - 24px);margin:0 12px;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r);resize:vertical;min-height:70px}
.msg-actions{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;padding:8px 12px 10px}
.msg-hint{font-size:11.5px;color:var(--text3)}
.msg-note{margin:0 12px 10px;font-size:13px}
.req-card.req-flash{animation:reqFlash 2.2s ease-out 1}
@keyframes reqFlash{0%{box-shadow:0 0 0 4px rgba(224,161,0,.55);background:#fffbe6}100%{box-shadow:0 0 0 0 rgba(224,161,0,0);background:#fff}}
@media(prefers-reduced-motion:reduce){.req-card.req-flash{animation:none;box-shadow:0 0 0 3px rgba(224,161,0,.55)}}
.portal-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,24px);max-width:min(92vw,460px);padding:11px 16px;border-radius:10px;background:#1b3d1f;color:#fff;font-size:13.5px;line-height:1.45;box-shadow:0 8px 28px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:2100}
.portal-toast.show{opacity:1;transform:translate(-50%,0)}
.portal-toast.err{background:#8e1b1b}
.cfm-billing{margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#f8faf8;font-size:13px;line-height:1.55}
.cfm-sec{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.cfm-billing .fg select,.cfm-card .fg select{width:100%;font:inherit;font-size:14px;padding:7px 8px;border:1px solid var(--border);border-radius:var(--r);background:#fff}
.cfm-edit-link{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--green);font-weight:600}
.cfm-muted{color:var(--text3)}
.cfm-warn{color:#b71c1c;font-weight:600}
.cfm-valid{color:#33691e!important;font-weight:600}
.cfm-card .terms-check a{color:var(--green);text-decoration:underline}
.addr-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.addr-row{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:#fff}
.addr-main{flex:1 1 220px;min-width:0;font-size:13px;overflow-wrap:anywhere}
.addr-text{color:var(--text2);margin-top:2px;line-height:1.5}
.addr-kind{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:#e8f0fe;color:#174ea6}
.addr-kind.addr-delivery{background:#fff3e0;color:#8a5200}
#fold-profile h2.pf-h{display:none}   /* the fold's own summary already says "My details" */
.addr-group{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);background:#fafcfa}
.addr-group .addr-h{margin:0 0 2px;font-size:14px}
.addr-group .addr-list{display:grid;gap:8px;margin:8px 0}
.addr-def{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--green-l);color:#1b5e20}
.addr-btns{display:flex;gap:6px;flex-wrap:wrap}
.addr-btns .btn-ghost{padding:5px 10px;font-size:12px}
.addr-form{margin:10px 0;padding:12px;border:1px dashed var(--green-m);border-radius:8px;background:#f8fbf8}
.addr-form[hidden]{display:none}
.pf-grid select{width:100%;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r);background:#fff}
body.portal-edit #attn-block,body.portal-edit .fold,body.portal-edit .portal-help{display:none}
.calc-card#req-addr-box{display:block}   /* (the inline display:none of the page still hides it until the address book has entries) */
/* the WhatsApp bubble keeps clear of the browser bars on a phone with a notch, and does not float over the controls of the portal at all on a small screen
   (the portal has its own WhatsApp link under the list) */
.wa-float{bottom:calc(20px + env(safe-area-inset-bottom));right:calc(20px + env(safe-area-inset-right))}
@media(max-width:600px){.wa-float{bottom:calc(16px + env(safe-area-inset-bottom));right:calc(16px + env(safe-area-inset-right))}}
@media(max-width:700px){
  body.is-portal .wa-float{display:none}
  body.is-portal .portal-header{padding:12px 14px;margin-bottom:14px;gap:8px}
  body.is-portal .portal-header-btns{width:100%}
  body.is-portal .portal-header-btns .btn-ghost{flex:1 1 0;justify-content:center;padding:8px 6px;font-size:12px;white-space:normal;text-align:center}
  body.is-portal .req-head .btn-quote{flex:1 1 auto;justify-content:center;text-align:center}
  body.is-portal .req-search{max-width:none}
  body.is-portal .req-sort{flex:1 1 140px}
  body.is-portal .req-csv{flex:1 1 140px;justify-content:center}
  body.is-portal #portal-main{padding-top:20px}
  .attn-main{flex-basis:100%}
  .attn-btn{width:100%}
  .attn-btn .btn-quote,.attn-btn .btn-ghost{width:100%;justify-content:center}
  .req-estimate{text-align:left}
  .msg{max-width:100%}
  .req-doc{flex-direction:column;gap:2px}
}


/* hero photo is wrapped in a <picture> (desktop-only source): keep it filling the panel */
.hero-right picture{display:block;height:100%}

/* hero photo: no green tint over it (the picture is already white-balanced to the page white) */
.hero-right-overlay{background:none}

/* home hero: live availability chip (green = online during working hours in Romania, amber = outside them); a link to the WhatsApp chat */
.hero-live{text-decoration:none;cursor:pointer;transition:filter .15s;border-radius:18px;line-height:1.35;text-align:left;max-width:100%}
.hero-live:hover{filter:brightness(.97)}
.hero-live:focus-visible{outline:2px solid #1b5e20;outline-offset:2px}
.hero-live .live-dot{width:20px;height:20px;border-radius:50%;color:#9e9e9e;flex:none;display:inline-flex;align-items:center;justify-content:center}.hero-live .live-dot svg{display:block}
.hero-live.is-open{background:var(--green-l);color:var(--green);border-color:var(--green-m)}
.hero-live.is-open .live-dot{color:#1fa855;animation:livePulse 2.2s infinite}
.hero-live.is-closed{background:#fff8e1;color:#7a5200;border-color:#ffe082}
.hero-live.is-closed .live-dot{color:#b7791f}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(46,125,50,.5)}70%{box-shadow:0 0 0 7px rgba(46,125,50,0)}100%{box-shadow:0 0 0 0 rgba(46,125,50,0)}}
@media (prefers-reduced-motion:reduce){.hero-live.is-open .live-dot{animation:none}}

/* custom stack-up: the pickers sit on the drawing, on the row of the layer they belong to */
.stackup-viz.is-custom .sv-row{display:grid;grid-template-columns:minmax(210px,34%) minmax(0,1fr);gap:0 14px;align-items:stretch;margin-bottom:6px}
.stackup-viz.is-custom .sv-layer{margin:0;min-height:34px;font-size:12.5px;align-items:center}
.stackup-viz.is-custom .sv-slot .pp-comp{margin:0}
.stackup-viz.is-custom .sv-slot-empty{display:none}
@media(max-width:760px){.stackup-viz.is-custom .sv-row{grid-template-columns:minmax(0,1fr);gap:4px 0}}

/* calculator cards: one rhythm between the option groups (material, layers, thickness, copper, Tg, plating ...), also for the groups wrapped in #layer-section / #stock-selector-box (":last-child" had removed their gap) */
.calc-card .f-group,.calc-card #layer-section>.f-group,.calc-card #stock-selector-box>.f-group{margin-bottom:18px}
.calc-card .f-group:last-child{margin-bottom:0}
.calc-card #layer-section>.f-group:last-child,.calc-card #stock-selector-box>.f-group:last-child{margin-bottom:18px}
.calc-card #layer-section:empty,.calc-card #stock-selector-box[style*="display:none"]{margin:0}
.calc-card .f-group>.f-label{margin-bottom:8px;min-height:18px}
.calc-card .info-box{margin-top:0;margin-bottom:18px}
.calc-card .info-box:last-child{margin-bottom:0}
.calc-card .hero-fields{margin-bottom:14px}

/* "?" help card */
.tip::after,.tip:hover::after,.tip:focus::after,.tip.tip-open::after{display:none!important}
.tip{transition:background .12s,color .12s}
.tip:hover,.tip.tip-open,.tip:focus-visible{background:var(--green);color:#fff}
.tip-pop{position:fixed;z-index:1300;width:min(330px,calc(100vw - 16px));background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.24);padding:12px 14px 14px;animation:tipin .15s}
.tp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.tp-title{font-size:13px;font-weight:700;color:var(--text)}
.tp-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--text3);cursor:pointer;padding:0 4px}
.tp-x:hover{color:var(--text)}
.tp-art{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px;margin-bottom:10px}
.tp-art svg{display:block;width:100%;height:auto}
.tp-art svg text{font-family:'Inter',sans-serif;font-size:9.5px;fill:#555}
.tp-art svg text.k{font-size:10.5px;font-weight:700;fill:#1b5e20}
.tp-text{font-size:12.5px;line-height:1.6;color:var(--text2)}
@media(max-width:600px){.tip-pop.tip-sheet{left:8px;right:8px;bottom:8px;top:auto;width:auto;max-height:80vh;overflow:auto;border-radius:16px}}
/* numbered cards (hidden cards do not count) */
.calc-grid{counter-reset:cstep}
.calc-grid .calc-card>.calc-card-title::before{counter-increment:cstep;content:counter(cstep);display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:var(--green);color:#fff;font-size:11px;font-weight:700;letter-spacing:0;vertical-align:middle}
/* layer buttons with a small cross-section icon */
.layer-row .lbtn2{height:auto;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:6px 4px;line-height:1.2}
.layer-row .lbtn2::before{content:"";display:block;width:34px;height:16px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}.layer-row .lbtn2[data-click="setLayer(1,this)"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'><rect y='0' width='34' height='2' rx='1'/><rect y='3' width='34' height='10' opacity='.28'/></svg>")}
.layer-row .lbtn2[data-click="setLayer(2,this)"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'><rect y='0' width='34' height='2' rx='1'/><rect y='14' width='34' height='2' rx='1'/><rect y='3' width='34' height='10' opacity='.28'/></svg>")}
.layer-row .lbtn2[data-click="setLayer(4,this)"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'><rect y='0' width='34' height='2' rx='1'/><rect y='4.67' width='34' height='2' rx='1'/><rect y='9.33' width='34' height='2' rx='1'/><rect y='14' width='34' height='2' rx='1'/><rect y='3' width='34' height='10' opacity='.28'/></svg>")}
.layer-row .lbtn2[data-click="setLayer(6,this)"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'><rect y='0' width='34' height='2' rx='1'/><rect y='2.8' width='34' height='2' rx='1'/><rect y='5.6' width='34' height='2' rx='1'/><rect y='8.4' width='34' height='2' rx='1'/><rect y='11.2' width='34' height='2' rx='1'/><rect y='14' width='34' height='2' rx='1'/><rect y='3' width='34' height='10' opacity='.28'/></svg>")}

/* home hero photo: a little air under the menu bar and a rounded inner corner (it still runs to the right edge of the window) */
@media(min-width:901px){.hero-right{margin:72px 24px 72px 12px;max-height:none;border-radius:28px}.test-stamp-d{top:44px}}

/* line icons that replace the emoji (see the Icons block in i18n.js): one colour, the colour of the text around them; alone in a box: the theme green */
.ic{display:inline-block;flex:none;width:1.15em;height:1.15em;vertical-align:-.22em;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic-solo{color:var(--green)}

/* stack-up drawing: silkscreen rows (colours are set inline from the chosen silkscreen / solder mask colour) */
.sv-silk{background:#fff;color:#444;border:1px solid #cfcfcf;min-height:24px}
/* number of layers: taller buttons so the little cross-section drawings breathe */
.layer-row .lbtn2{min-height:78px;gap:9px}
.layer-row .lbtn2::before{width:44px;height:22px}

/* board cross-section (1L / 2L / aluminium): aluminium core grey, thermal dielectric cream; the FR4 core / copper / mask colours are the multilayer ones */
.sv-al{background:#b9c1c7;color:#222;border:1px solid #97a1a8}
.sv-diel{background:#ffe9a8;color:#7a5c00;border:1px solid #e6c866}
.sec-viz .sv-layer{padding:0 14px;margin-bottom:3px;border-radius:4px;font-size:12.5px;font-weight:600;align-items:center}

/* client-panel pop-up drawing: separation lines like the calculator drawing - red = milled, dashed blue = V-cut, with a legend */
.mlp-dw{display:flex;flex-direction:column;align-items:center}
.mlp-draw .mlp-svg{max-width:150px;max-height:170px}
.mlp-lg{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;margin-top:6px;font-size:11px;color:var(--text3)}
.mlp-lg i{display:inline-block;width:18px;height:0;border-top:2px solid;vertical-align:middle;margin-right:4px}
.mlp-lg .m i{border-color:#dc2626}
.mlp-lg .s i{border-top-style:dashed;border-color:#2563eb}

/* fiducials in the technological margins of the panel drawing: copper dot + clear ring */
.pv-fid{fill:#d97706;stroke:none}
.pv-fid-ring{fill:#fff;fill-opacity:.55;stroke:#d97706;stroke-dasharray:1.2 .8}
.mlp-lg .f i{width:8px;height:8px;border:2px solid #d97706;border-radius:50%;background:#d97706;box-sizing:content-box;margin-right:5px}

/* circuit routing drawing */
.routing-viz{margin-top:10px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.rv-svg{display:block;width:100%;max-width:340px;height:auto;margin:0 auto}
.rv-lg{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;margin-top:6px;font-size:11.5px;color:var(--text3)}
.rv-lg i{display:inline-block;width:12px;height:12px;vertical-align:-2px;margin-right:5px;border-radius:50%}
.rv-lg .p i{background:#d8913a;box-shadow:inset 0 0 0 3px #fff,0 0 0 1.5px #b9701f}
.rv-lg .m i{width:18px;height:0;border-radius:0;border-top:2px solid #dc2626;vertical-align:middle}
.rv-cap{margin-top:6px;font-size:12px;line-height:1.5;color:var(--text2);text-align:center}
.rv-cap p{margin:0 0 3px}

/* stack-up rows: name + numbers as chips (room to unfold now that the calculator is wider) */
.stackup-viz .sv-layer{flex-wrap:wrap;gap:4px 10px;min-height:30px;padding:5px 12px}
.stackup-viz .sv-n{flex:0 0 auto;min-width:112px;font-weight:700}
.stackup-viz .sv-d{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;flex:1 1 auto;font-weight:500}
.stackup-viz .sv-chip{background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:1px 9px;font-size:11.5px;line-height:1.5;white-space:nowrap}
.stackup-viz .sv-chip.sv-tot{background:rgba(255,255,255,.95);font-weight:700}
.stackup-viz .sv-op{opacity:.55;font-weight:600}
.stackup-viz.is-custom .sv-n{min-width:0;flex:1 0 100%}
/* panel section: roomier option cards and a one-row legend under the drawing */
.mlp-opt{padding:14px 16px;gap:6px}
.mlp-opt b{font-size:15px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.mlp-opt span{font-size:13px;line-height:1.5}
.mlp-lg.pv-lg{font-size:12px;gap:4px 18px;margin-top:10px}.panel-viz{flex-direction:column;align-items:center}
.panel-viz.panel-viz-fs .panel-viz-svg{flex:1 1 auto;min-height:0}
.panel-viz .pv-lg{flex:none}

/* sign-in on the quote request form */
.rq-login{max-width:640px;background:var(--green-l);border:1px solid var(--green-m);border-radius:var(--r);padding:12px 14px;margin-bottom:6px}
.rq-login-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;font-size:13px;line-height:1.5;color:var(--text2)}
.rq-login-bar>span{flex:1 1 260px}
.rq-login.is-in .rq-login-bar{justify-content:flex-start;color:var(--green);font-weight:600}
.rq-login-form{margin-top:12px}
.rq-login-form[hidden]{display:none}
.rq-login-form .fg-row{max-width:none}
.rq-login-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
.rq-login-act a{font-size:12.5px}
.rq-login #rql-notice{margin-top:10px}

.rq-login-anon{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--green-m);font-size:12.5px;line-height:1.5;color:#7a5200}
.rq-modal-anon{margin-top:12px;padding:9px 12px;border-radius:var(--r);background:#fff8e1;border:1px solid #ffe082;color:#7a5200;font-size:12.5px;line-height:1.5;text-align:left}

.rq-login-btns{display:inline-flex;align-items:center;gap:8px;flex:none}
.rq-info{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--green);background:#fff;color:var(--green);font:italic 700 13px/1 Georgia,serif;cursor:pointer;padding:0}
.rq-info:hover,.rq-info[aria-expanded="true"]{background:var(--green);color:#fff}
.rq-login-anon[hidden]{display:none}

/* share link of the configuration */
#share-box .share-url{display:block;width:100%;margin:8px 0 4px;padding:7px 9px;border:1px solid var(--border);border-radius:var(--r);font:12px/1.4 Consolas,Menlo,monospace;color:var(--text2);background:#fff}
#share-box .share-note{font-size:12px;color:var(--text3);line-height:1.45}
#share-msg{margin-top:8px}

/* the path of a request in the portal: steps */
.req-steps{list-style:none;display:flex;margin:10px 0 8px;padding:0}
.req-steps li{flex:1 1 0;position:relative;text-align:center;font-size:11.5px;line-height:1.35;color:var(--text3);padding:24px 3px 0}
.req-steps li::before{content:'';position:absolute;top:5px;left:50%;width:12px;height:12px;margin-left:-8px;border-radius:50%;background:#fff;border:2px solid #cfd8d1;z-index:1}
.req-steps li::after{content:'';position:absolute;top:10px;left:-50%;width:100%;height:2px;background:#e1e8e3}
.req-steps li:first-child::after{display:none}
.req-steps li.done{color:var(--text2)}
.req-steps li.done::before{background:var(--green);border-color:var(--green)}
.req-steps li.done::after,.req-steps li.cur::after{background:var(--green)}
.req-steps li.cur{color:var(--green);font-weight:700}
.req-steps li.cur::before{border-color:var(--green);box-shadow:0 0 0 3px rgba(46,125,50,.18)}
.req-steps li.cur.bad{color:#b71c1c}
.req-steps li.cur.bad::before{border-color:#b71c1c;background:#b71c1c;box-shadow:0 0 0 3px rgba(183,28,28,.15)}
.req-steps li.cur.bad::after{background:#e5b4b4}
.req-steps .st-date{display:block;font-weight:400;font-size:10.5px;color:var(--text3)}
@media(max-width:560px){
  .req-steps{flex-direction:column;gap:0}
  .req-steps li{text-align:left;padding:4px 0 4px 26px}
  .req-steps li::before{top:50%;left:0;margin:-6px 0 0 3px}
  .req-steps li::after{top:-50%;left:8px;width:2px;height:100%}
  .req-steps .st-date{display:inline;margin-left:8px}
}

#share-box.share-bottom{margin:2px 0 12px;max-width:640px}
#share-box .share-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#share-box .share-row .btn-ghost{padding:6px 12px;font-size:13px}
#share-box .share-info{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--text2)}
#share-box .share-info[hidden]{display:none}
#share-box #share-msg{text-align:left;margin-top:8px}

/* the cross-section card (1L / 2L / aluminium): same name + chips layout as the stack-up of the multilayer boards */
.sec-viz .sv-layer{flex-wrap:wrap;gap:4px 10px;padding:6px 14px}
.sec-viz .sv-n{flex:0 0 auto;min-width:150px;font-weight:700}
.sec-viz .sv-d{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;flex:1 1 auto;font-weight:500}
.sec-viz .sv-chip{background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:1px 9px;font-size:11.5px;line-height:1.5;white-space:nowrap;color:inherit}
.sec-viz .sv-chip.sv-tot{background:rgba(255,255,255,.95);font-weight:700}
.sec-viz .sv-op{opacity:.55;font-weight:600}
.sv-chip.sv-chip-ol{background:transparent!important;border:1px solid currentColor!important}
/* ── Accessibility pass (go-live audit 2026-10-28): input borders >= 3:1, newsletter placeholder, small coloured texts, tiny phones ── */
:root{--input-border:#8a8a8a}
.f-input,.f-select,.dim-row input,.qty-row input,.qty-btn,.fg input,.fg select,.fg textarea,.calc-card textarea,.lang-select,.req-sort,.req-search{border-color:var(--input-border)}
.f-input:focus,.f-select:focus,.dim-row input:focus,.qty-row input:focus,.fg input:focus,.fg select:focus,.fg textarea:focus,.calc-card textarea:focus{border-color:var(--green)}
.nl-input::placeholder{color:rgba(255,255,255,.7)}
.sv-cu .sv-n,.sv-cu .sv-chip{color:#a34a00}
.wa-inline{color:#0f7a40}
@media(max-width:360px){.nav-in{padding:0 8px;gap:8px}.nav-right{gap:4px}.nav-logo img{height:22px!important;width:auto}}
.hero-live.is-open .live-dot{animation:livePulse 2.2s 3}
/* phones: cookie banner and hero chips take less height, so the Quick Quote card starts higher */
@media(max-width:600px){.hero-left{padding-top:72px}.hero-left .origin-badge{font-size:12px;padding:6px 10px;margin-bottom:8px}.hero-left .hero-live{font-size:12px;padding:5px 10px;margin-bottom:12px}.hero-left .hero-sub{margin-bottom:20px}.cookie-banner{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.cookie-banner-in{gap:10px}.cookie-banner-in p{font-size:12.5px;line-height:1.45;min-width:0}.cookie-banner-btns button{min-height:44px}body:has(#cookie-banner) .wa-float{display:none}}