/* ============================================================
   GAUGE — a toolkit of everyday calculators
   Design language: instrument nameplates + calibration rulers.
   ============================================================ */

:root{
  --paper: #F5F5FC;
  --paper-raised: #FFFFFF;
  --ink: #171A2B;
  --ink-soft: #5B5F7A;
  --line: #E4E3F5;
  --brass: #6C5CE7;
  --brass-dark: #4B3FC4;
  --verdigris: #00B6A5;
  --coral: #FF6B6B;
  --amber: #F5A623;
  --green: #1E9E6B;
  --sky: #2E86DE;
  --rose: #E84393;
  --white: #ffffff;
  --radius: 10px;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'IBM Plex Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  --display: 'Space Grotesk', var(--sans);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brass-dark); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ---------- calibration rule (signature divider) ---------- */
.ruler{
  position:relative;
  height:6px;
  margin:0 0 8px 0;
  background:linear-gradient(90deg, var(--brass), var(--verdigris), var(--coral));
  border-radius:4px;
  opacity:.85;
}
.ruler::after{content:none;}

/* ---------- header / nameplate ---------- */
header.site{
  border-bottom:1px solid var(--line);
  background:var(--paper-raised);
  box-shadow:0 2px 16px -8px rgba(23,26,43,.08);
  position:relative;
}
header.site::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--brass), var(--verdigris), var(--coral));
}
.nameplate{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.brand{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--display);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:.01em;
  color:var(--ink);
}
.brand .dial{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:9px;
  background:linear-gradient(135deg, var(--brass), var(--verdigris));
  box-shadow:0 4px 14px -4px rgba(108,92,231,.55);
  position:relative;
}
.brand .dial::after{
  content:"⚡";
  font-size:.95rem;
  filter:brightness(0) invert(1);
}
.grad-text{
  background:linear-gradient(135deg, var(--brass), var(--verdigris));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand small{
  font-family:var(--mono);
  font-size:.6rem;
  color:var(--ink-soft);
  letter-spacing:.12em;
  font-weight:500;
}
nav.site-nav{display:flex; align-items:center; gap:22px; font-family:var(--mono); font-size:.82rem; letter-spacing:.03em;}
nav.site-nav > a{color:var(--ink-soft);}
nav.site-nav > a:hover{color:var(--brass-dark);}

/* ---------- nav search ---------- */
.nav-search{position:relative; flex:1; max-width:340px; margin:0 20px;}
.nav-search input{
  width:100%; padding:9px 14px; font-family:var(--sans); font-size:.85rem;
  border:1px solid var(--line); border-radius:20px; background:var(--paper);
}
.nav-search input:focus{outline:none; border-color:var(--brass); background:var(--white);}
.nav-search-results{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 28px -10px rgba(23,26,43,.25); overflow:hidden; z-index:60; max-height:360px; overflow-y:auto;
}
.nav-search-results.open{display:block;}
.nav-search-results a{
  display:flex; align-items:center; gap:10px; padding:10px 14px; font-family:var(--sans);
  font-size:.88rem; color:var(--ink); border-bottom:1px solid var(--line);
}
.nav-search-results a:last-child{border-bottom:none;}
.nav-search-results a:hover{background:var(--paper); text-decoration:none;}
.nav-search-empty{padding:14px; font-family:var(--mono); font-size:.8rem; color:var(--ink-soft);}

/* ---------- tools mega-menu ---------- */
.tools-menu-wrap{position:relative;}
.tools-menu-trigger{
  font-family:var(--mono); font-size:.82rem; font-weight:600; letter-spacing:.03em;
  background:none; border:none; color:var(--ink); cursor:pointer; padding:0; margin:0;
  box-shadow:none;
}
.tools-menu-trigger:hover{color:var(--brass-dark); filter:none; transform:none;}
.tools-menu{
  display:none; position:absolute; top:calc(100% + 16px); right:-20px;
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 44px -14px rgba(23,26,43,.3); padding:22px; z-index:70;
  width:min(680px, 92vw); grid-template-columns:repeat(4, 1fr); gap:20px;
}
.tools-menu-wrap.open .tools-menu{display:grid;}
.menu-col h4{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--brass-dark); margin:0 0 10px;
}
.menu-col h4 a{color:inherit;}
.menu-tool-link{
  display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:.85rem;
  color:var(--ink); padding:5px 0;
}
.menu-tool-link:hover{color:var(--brass-dark); text-decoration:none;}
.menu-tool-icon{font-size:.95rem; width:20px; text-align:center; flex-shrink:0;}

@media (max-width: 900px){
  .nameplate{flex-wrap:wrap; row-gap:12px;}
  .nav-search{order:3; max-width:none; margin:0; flex-basis:100%;}
  .tools-menu{right:auto; left:0; grid-template-columns:repeat(2, 1fr); width:min(480px, 92vw);}
}

/* ---------- hero ---------- */
.hero{padding:52px 0 30px; position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; top:-140px; right:-100px; width:380px; height:380px;
  background:radial-gradient(circle, var(--brass) 0%, transparent 70%); opacity:.22; z-index:0; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; bottom:-160px; left:-120px; width:320px; height:320px;
  background:radial-gradient(circle, var(--verdigris) 0%, transparent 70%); opacity:.18; z-index:0; pointer-events:none;
}
.hero > *{position:relative; z-index:1;}
.eyebrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--verdigris); font-weight:600;
  margin-bottom:14px; display:block;
}
h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2rem, 4vw, 3.1rem);
  line-height:1.08; margin:0 0 18px; color:var(--ink);
  max-width:16ch;
}
.lede{font-size:1.08rem; color:var(--ink-soft); max-width:62ch; margin:0 0 8px;}

/* ---------- tool grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:16px;
  margin:34px 0 60px;
}
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 22px 20px;
  position:relative;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:0 14px 32px -10px rgba(108,92,231,.35);
}
.card-icon{
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:12px;
  background:var(--card-accent, var(--brass)); color:#fff;
  box-shadow:0 6px 16px -6px rgba(108,92,231,.5);
}
.grid--teal{ --card-accent: var(--verdigris); }
.grid--coral{ --card-accent: var(--coral); }
.grid--amber{ --card-accent: var(--amber); }
.grid--green{ --card-accent: var(--green); }
.grid--sky{ --card-accent: var(--sky); }
.grid--rose{ --card-accent: var(--rose); }

/* ---------- shared file-list / thumbnail components for PDF & image tools ---------- */
.dropzone{
  border:2px dashed var(--line); border-radius:14px; padding:28px; text-align:center;
  background:var(--paper-raised); cursor:pointer; transition:border-color .12s ease, background .12s ease;
}
.dropzone:hover, .dropzone.dragover{border-color:var(--brass); background:rgba(108,92,231,.04);}
.dropzone input[type=file]{display:none;}
.dropzone .dz-label{font-family:var(--mono); font-size:.85rem; color:var(--ink-soft);}
.dropzone .dz-label strong{color:var(--brass-dark);}

.file-list{margin-top:14px;}
.file-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--paper-raised); margin-bottom:8px; font-family:var(--mono); font-size:.82rem;
}
.file-item .file-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.file-item .file-size{color:var(--ink-soft); font-size:.78rem;}

.thumb-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:14px; margin-top:16px;
}
.thumb-item{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--white);
  text-align:center;
}
.thumb-item img, .thumb-item canvas{width:100%; display:block; background:#eee;}
.thumb-item .thumb-cap{padding:8px; font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);}
.thumb-item .thumb-cap a{display:block; margin-top:4px;}

.progress-text{font-family:var(--mono); font-size:.82rem; color:var(--ink-soft); margin-top:10px;}
.note-box{
  background:rgba(245,166,35,.08); border:1px solid rgba(245,166,35,.3); border-radius:10px;
  padding:12px 14px; font-size:.86rem; color:var(--ink-soft); margin:14px 0;
}
.card .unit{
  font-family:var(--mono); font-size:.68rem; color:var(--ink-soft);
  letter-spacing:.08em; font-weight:600; display:block; margin-bottom:8px; opacity:.7;
}
.card h3{font-family:var(--display); font-size:1.15rem; margin:0 0 8px; color:var(--ink);}
.card p{font-size:.9rem; color:var(--ink-soft); margin:0 0 14px;}
.card a.go{
  font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:6px;
}
.card a.go::after{content:"→"; transition:transform .12s ease;}
.card:hover a.go::after{transform:translateX(3px);}
.card a.go{text-decoration:none;}

/* ---------- tool page ---------- */
main.tool{padding:36px 0 24px;}
.tool-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:8px; position:relative;
}
.tool-head::before{
  content:""; position:absolute; top:-40px; right:-60px; width:220px; height:220px;
  background:radial-gradient(circle, var(--verdigris) 0%, transparent 70%); opacity:.16; z-index:-1; pointer-events:none;
}
.serial{
  font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);
  border:1px solid var(--line); padding:5px 10px; border-radius:20px;
  white-space:nowrap; background:var(--white);
}
.panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
  margin:26px 0;
  box-shadow:0 4px 20px -12px rgba(23,26,43,.12);
}
.panel h2{font-family:var(--display); font-size:1.1rem; margin:0 0 18px;}

label{
  display:block; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);
  margin:14px 0 6px;
}
label:first-child{margin-top:0;}
input[type=text], input[type=number], select, textarea{
  width:100%; padding:11px 12px; font-size:1rem; font-family:var(--mono);
  border:1px solid var(--line); border-radius:9px;
  background:var(--paper-raised); color:var(--ink);
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass);
}
textarea{font-family:var(--sans); resize:vertical;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
@media (max-width:600px){.row,.row3{grid-template-columns:1fr;}}

button, .btn{
  font-family:var(--mono); font-weight:600; font-size:.85rem; letter-spacing:.03em;
  background:linear-gradient(135deg, var(--brass), var(--brass-dark)); color:var(--white); border:none;
  padding:12px 22px; border-radius:9px; cursor:pointer;
  margin-top:18px; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow:0 6px 16px -6px rgba(108,92,231,.5);
}
button:hover, .btn:hover{filter:brightness(1.08); transform:translateY(-1px);}
button:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
button.secondary{background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none;}
button.secondary:hover{border-color:var(--brass); background:transparent; color:var(--brass-dark); filter:none; transform:none;}

.result{
  margin-top:20px; padding:18px 20px;
  background:linear-gradient(135deg, rgba(108,92,231,.06), rgba(0,182,165,.06));
  border-left:4px solid var(--brass); border-radius:12px; font-family:var(--mono);
  min-height:20px;
}
.result .big{font-size:1.7rem; font-weight:700; color:var(--ink); display:block; margin-bottom:4px;}
.result .small{font-size:.8rem; color:var(--ink-soft);}

/* article / explainer */
.article{max-width:72ch; margin:40px 0;}
.article h2{font-family:var(--display); font-size:1.3rem; margin:32px 0 12px;}
.article h2:first-child{margin-top:0;}
.article p{color:var(--ink-soft); margin:0 0 14px;}
.article ul{color:var(--ink-soft); padding-left:20px;}
.article li{margin-bottom:6px;}

#calculators, #smart-tools, #career-tools, #document-tools, #investment-tools, #developer-tools, #marketing-tools{scroll-margin-top:24px;}

.quick-nav{
  display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px;
}
.quick-nav a{
  font-family:var(--mono); font-size:.82rem; font-weight:600; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:24px;
  padding:9px 16px; transition:border-color .12s ease, transform .12s ease;
}
.quick-nav a:hover{border-color:var(--brass); color:var(--brass-dark); text-decoration:none; transform:translateY(-1px);}

.related{margin:50px 0;}

.faq-block{margin:44px 0;}

.ad-slot{
  margin:28px 0; padding:14px; border:1px dashed var(--line); border-radius:12px;
  background:var(--paper-raised); text-align:center; min-height:100px;
}
.ad-label{
  display:block; font-family:var(--mono); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; opacity:.7;
}
.faq-block h2{font-family:var(--display); font-size:1.2rem; margin-bottom:18px;}
.faq-item{
  border-top:1px solid var(--line); padding:18px 0;
}
.faq-item:last-child{padding-bottom:0;}
.faq-item h3{font-family:var(--sans); font-size:1rem; font-weight:600; margin:0 0 8px; color:var(--ink);}
.faq-item p{font-size:.92rem; color:var(--ink-soft); margin:0; line-height:1.6;}
.related h2{font-family:var(--display); font-size:1.1rem; margin-bottom:16px;}
.related-list{display:flex; flex-wrap:wrap; gap:10px;}
.related-list a{
  font-family:var(--mono); font-size:.8rem; padding:8px 14px;
  border:1px solid var(--line); border-radius:20px; color:var(--ink); background:var(--white);
}
.related-list a:hover{border-color:var(--brass); color:var(--brass-dark); text-decoration:none; box-shadow:0 4px 12px -6px rgba(108,92,231,.4);}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--line);
  margin-top:60px;
  padding:34px 0 40px;
  background:var(--paper-raised);
}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.foot-links{display:flex; gap:18px; font-family:var(--mono); font-size:.8rem;}
.foot-links a{color:var(--ink-soft);}
.copyright{font-family:var(--mono); font-size:.75rem; color:var(--ink-soft); margin-top:14px;}

/* utility */
.error-text{color:#B3261E; font-family:var(--mono); font-size:.85rem; margin-top:10px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
::selection{background:var(--brass); color:var(--white);}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}

@keyframes fadeInUp{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
.hero > *{animation:fadeInUp .5s ease both;}
.hero .eyebrow{animation-delay:0s;}
.hero h1{animation-delay:.05s;}
.hero .lede{animation-delay:.1s;}
.grid .card{animation:fadeInUp .4s ease both;}
.grid .card:nth-child(2){animation-delay:.03s;}
.grid .card:nth-child(3){animation-delay:.06s;}
.grid .card:nth-child(4){animation-delay:.09s;}
.grid .card:nth-child(5){animation-delay:.12s;}
.grid .card:nth-child(6){animation-delay:.15s;}