/* ============================================================
   VERCHO Engineering Tools — shared shell
   One header, hero, breadcrumb and footer for every calculator,
   so all tools share the same logo, spacing and type scale.
   Light theme on purpose: data-heavy tool screens read better on white.
   ============================================================ */
:root{
  --vt-acc:#e2691a; --vt-acc-dk:#c2530f; --vt-acc-soft:#fdf0e6; --vt-acc-line:#f3c6aa;
  --vt-ink:#1b1b1e; --vt-ink2:#55535a; --vt-ink3:#8a8790;
  --vt-line:#e3e0db; --vt-line2:#eeebe7; --vt-bg:#f5f4f1; --vt-paper:#ffffff;
  --vt-sans:'Jost','Futura','Century Gothic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --vt-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --vt-pad:clamp(14px,2.2vw,28px);
}
html{-webkit-text-size-adjust:100%;scroll-padding-top:120px}
/* base type for every tool page (a tool's own stylesheet may refine it) */
:where(body){margin:0;background:var(--vt-bg);color:var(--vt-ink);font:400 15px/1.55 var(--vt-sans)}
.vt-hdr,.vt-hero,.vt-about,.vt-foot,.vt-hub{font-family:var(--vt-sans)}
.vt-hdr,.vt-hdr *,.vt-hero,.vt-hero *,.vt-about,.vt-about *,.vt-foot,.vt-foot *,.vt-hub,.vt-hub *{box-sizing:border-box}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- header ---------- */
.vt-hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;
  padding:10px var(--vt-pad);padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--vt-line)}
.vt-logo{display:flex;flex-direction:column;gap:6px;text-decoration:none;flex:none;min-width:0}
.vt-logo img{height:22px;width:auto;display:block}
.vt-logo img.wordmark{filter:invert(1) brightness(.12)}
.vt-logo span{font:500 9.5px/1 var(--vt-sans);letter-spacing:.34em;text-transform:uppercase;color:var(--vt-ink3);white-space:nowrap}
.vt-tabs{display:flex;gap:2px;flex:1;justify-content:center;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vt-tabs::-webkit-scrollbar{display:none}
.vt-hdr .vt-tabs>a,.vt-hdr .vt-tabs>button{font:500 12px/1 var(--vt-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--vt-ink2);
  text-decoration:none;background:none;border:0;border-bottom:2px solid transparent;padding:11px 11px 10px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.vt-hdr .vt-tabs>a:hover,.vt-hdr .vt-tabs>button:hover{color:var(--vt-ink)}
.vt-hdr .vt-tabs>.on{color:var(--vt-ink);border-bottom-color:var(--vt-acc)}
.vt-acts{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-left:auto}
.vt-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:500 11.5px/1 var(--vt-sans);letter-spacing:.14em;text-transform:uppercase;
  background:var(--vt-paper);color:var(--vt-ink);border:1px solid var(--vt-line);border-radius:2px;padding:10px 13px;min-height:38px;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s,background .2s,box-shadow .2s,transform .2s}
.vt-btn:hover{border-color:var(--vt-acc);color:var(--vt-acc)}
.vt-btn svg{width:14px;height:14px;flex:none}
.vt-btn.vt-out{border-color:var(--vt-acc);color:var(--vt-acc)}
.vt-btn.vt-out:hover{background:var(--vt-acc-soft)}
.vt-btn.vt-solid{background:var(--vt-acc);border-color:var(--vt-acc);color:#fff;font-weight:600;box-shadow:0 6px 20px -8px rgba(226,105,26,.7)}
.vt-btn.vt-solid:hover{background:var(--vt-acc-dk);border-color:var(--vt-acc-dk);color:#fff;transform:translateY(-1px)}
.vt-btn:focus-visible,.vt-tabs>*:focus-visible,.vt-logo:focus-visible{outline:2px solid var(--vt-acc);outline-offset:2px}

/* ---------- hero ---------- */
.vt-hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 420px at 88% 0%,rgba(226,105,26,.08),transparent 60%),var(--vt-paper);border-bottom:1px solid var(--vt-line)}
.vt-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(226,105,26,.28) 1px,transparent 1.4px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 75%,transparent)}
.vt-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;padding:18px var(--vt-pad) 22px}
.vt-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 14px;padding:0;list-style:none;font:400 11px/1.4 var(--vt-mono);letter-spacing:.06em;color:var(--vt-ink3)}
.vt-crumb li{display:flex;align-items:center;gap:8px}
.vt-crumb li+li::before{content:'/';color:var(--vt-line)}
.vt-crumb a{color:var(--vt-ink2);text-decoration:none}
.vt-crumb a:hover{color:var(--vt-acc)}
.vt-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:500 11px/1.3 var(--vt-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--vt-acc-dk)}
.vt-eyebrow i{width:8px;height:8px;background:var(--vt-acc);flex:none}
.vt-eyebrow b{width:26px;height:1.5px;background:var(--vt-acc);flex:none}
.vt-h1{font:400 clamp(28px,3.4vw,44px)/1.08 var(--vt-sans);letter-spacing:-.01em;color:var(--vt-ink);margin:0 0 10px;text-wrap:balance}
.vt-h1 em{font-style:normal;color:var(--vt-acc)}
.vt-lede{font:400 clamp(15px,1.15vw,16.5px)/1.6 var(--vt-sans);color:var(--vt-ink2);max-width:64ch;margin:0 0 14px}
.vt-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:6px;font:400 11px/1.3 var(--vt-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vt-ink3)}
.vt-more a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--vt-line);background:var(--vt-paper);color:var(--vt-ink);text-decoration:none;border-radius:2px;letter-spacing:.1em;transition:border-color .2s,color .2s}
.vt-more a:hover{border-color:var(--vt-acc);color:var(--vt-acc)}
.vt-more a.vt-read{border-color:var(--vt-acc-line);color:var(--vt-acc-dk);background:var(--vt-acc-soft)}
.vt-art{justify-self:end;width:100%;max-width:540px;min-width:0}
.vt-art img,.vt-art svg{display:block;width:100%;height:auto}
.vt-art img{mix-blend-mode:multiply}

/* ---------- footer ---------- */
.vt-foot{background:var(--vt-paper);border-top:1px solid var(--vt-line);color:var(--vt-ink2);font:400 13.5px/1.6 var(--vt-sans)}
.vt-foot-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:24px 40px;padding:28px var(--vt-pad) 22px}
.vt-foot-brand img{height:20px;width:auto;display:block;margin-bottom:10px}
.vt-foot-brand p{margin:0;max-width:44ch;color:var(--vt-ink2);font-weight:300}
.vt-tag{display:inline-block;margin-top:10px;font:500 10.5px/1 var(--vt-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--vt-acc)}
.vt-foot h2{font:500 10.5px/1 var(--vt-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--vt-acc-dk);margin:4px 0 12px}
.vt-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.vt-foot a{color:var(--vt-ink);text-decoration:none;transition:color .2s}
.vt-foot a:hover{color:var(--vt-acc)}
.vt-foot a.on{color:var(--vt-acc)}
.vt-foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding:14px var(--vt-pad) calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--vt-line2);font:400 11.5px/1.5 var(--vt-mono);color:var(--vt-ink3)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .vt-tabs{order:3;flex-basis:100%;justify-content:flex-start;margin:2px calc(-1*var(--vt-pad)) -10px;padding:0 var(--vt-pad);border-top:1px solid var(--vt-line2)}
}
@media (max-width:900px){
  .vt-hero-in{grid-template-columns:minmax(0,1fr);gap:14px}
  .vt-art{display:none}
  .vt-foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vt-foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .vt-hdr{gap:8px 10px}
  .vt-logo img{height:19px}
  .vt-logo span{font-size:8.5px;letter-spacing:.26em}
  .vt-btn{padding:9px 10px;min-height:38px}
  .vt-btn .vt-lbl{display:none}
  .vt-hdr .vt-tabs>a,.vt-hdr .vt-tabs>button{font-size:11px;padding:11px 9px 10px;letter-spacing:.12em}
  .vt-foot-in{grid-template-columns:minmax(0,1fr)}
  .vt-foot-bot{flex-direction:column}
}
@media print{.vt-hdr,.vt-hero,.vt-foot{display:none!important}}

/* ---------- about / SEO content block ---------- */
.vt-about{background:var(--vt-paper);border-top:1px solid var(--vt-line)}
.vt-about-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px 48px;padding:34px var(--vt-pad) 36px}
.vt-about h2{font:400 clamp(22px,2.2vw,30px)/1.2 var(--vt-sans);color:var(--vt-ink);margin:0 0 14px;letter-spacing:-.005em}
.vt-about h3{font:500 10.5px/1 var(--vt-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--vt-acc-dk);margin:4px 0 14px}
.vt-about p{font:300 15.5px/1.75 var(--vt-sans);color:var(--vt-ink2);margin:0 0 12px;max-width:72ch}
.vt-about p b{font-weight:500;color:var(--vt-ink)}
.vt-about ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.vt-about li{position:relative;padding-left:18px;font:400 14.5px/1.55 var(--vt-sans);color:var(--vt-ink)}
.vt-about li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--vt-acc)}
.vt-note{font:400 12.5px/1.55 var(--vt-mono)!important;color:var(--vt-ink3)!important;border-left:2px solid var(--vt-acc-line);padding-left:12px}
.vt-about .vt-btn{margin-top:6px}
@media (max-width:900px){.vt-about-in{grid-template-columns:minmax(0,1fr)}}

/* ---------- tools hub ---------- */
.vt-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:24px var(--vt-pad) 40px;background:var(--vt-bg)}
.vt-card{position:relative;display:flex;flex-direction:column;background:var(--vt-paper);border:1px solid var(--vt-line);text-decoration:none;color:var(--vt-ink);overflow:hidden;transition:border-color .25s,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.vt-card:hover{border-color:var(--vt-acc);transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(0,0,0,.25)}
.vt-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-bottom:1px solid var(--vt-line)}
.vt-card-b{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.vt-card-n{font:500 10.5px/1 var(--vt-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--vt-acc-dk)}
.vt-card h2{font:400 22px/1.2 var(--vt-sans);margin:0}
.vt-card p{font:300 14.5px/1.6 var(--vt-sans);color:var(--vt-ink2);margin:0;flex:1}
.vt-card-go{font:500 11px/1 var(--vt-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--vt-acc);margin-top:6px}
@media (max-width:1100px){.vt-hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.vt-hub{grid-template-columns:minmax(0,1fr)}}

/* ---------- on-page tool guide (about section) ---------- */
.vt-about-in{grid-template-columns:minmax(0,1.7fr) minmax(260px,.75fr);align-items:start}
.vt-guide{min-width:0;max-width:820px}
.vt-guide>h2:not(#about-h){font:500 clamp(19px,1.7vw,23px)/1.3 var(--vt-sans);margin:30px 0 10px;color:var(--vt-ink)}
.vt-guide h3{font:500 17px/1.35 var(--vt-sans);letter-spacing:0;text-transform:none;color:var(--vt-ink);margin:22px 0 8px}
.vt-guide p{max-width:none}
.vt-guide strong{font-weight:500;color:var(--vt-ink)}
.vt-guide a{color:var(--vt-acc-dk);text-decoration:underline;text-decoration-color:var(--vt-acc-line);text-underline-offset:3px}
.vt-guide a:hover{color:var(--vt-acc)}
.vt-guide ul{margin:6px 0 18px}
.vt-guide em{color:var(--vt-ink3)}
.vt-guide .fx{font:500 15px/1.45 var(--vt-mono);color:var(--vt-acc-dk);background:var(--vt-acc-soft);border:1px solid var(--vt-acc-line);padding:12px 14px;overflow-x:auto;white-space:nowrap}
.vt-guide .vt-tbl{overflow-x:auto;border:1px solid var(--vt-line);margin:6px 0 20px;-webkit-overflow-scrolling:touch}
.vt-guide table{width:100%;border-collapse:collapse;font:400 14px/1.5 var(--vt-sans)}
.vt-guide th{font:500 10.5px/1.3 var(--vt-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--vt-acc-dk);text-align:left;padding:9px 12px;background:var(--vt-acc-soft);border-bottom:2px solid var(--vt-acc);white-space:nowrap}
.vt-guide td{padding:8px 12px;border-bottom:1px solid var(--vt-line);color:var(--vt-ink2)}
.vt-guide td:not(:first-child){font:400 13px/1.5 var(--vt-mono);white-space:nowrap}
.vt-guide tbody tr:nth-child(even) td{background:#FBFAF8}
.vt-guide .tool-sign{font:500 12px/1 var(--vt-mono);letter-spacing:.22em;margin-top:22px}
.vt-guide .tool-sign strong{color:var(--vt-acc)}
.vt-aside{display:grid;gap:16px;position:sticky;top:90px;min-width:0}
.vt-aside-box{border:1px solid var(--vt-line);background:var(--vt-bg);padding:18px 18px 8px}
.vt-rel ul{gap:6px}
.vt-rel li{font-size:14px}
.vt-rel a{color:var(--vt-ink);text-decoration:none}
.vt-rel a:hover{color:var(--vt-acc)}
@media (max-width:1000px){.vt-about-in{grid-template-columns:minmax(0,1fr)}.vt-aside{position:static}}