@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap");

:root{
  --rose:#C23850;
  --rose-light:#FBECEF;
  --rose-dark:#A82C43;
  --cream:#FEF8F9;
  --warm-white:#FFFCFD;
  --text-dark:#241016;
  --text-mid:#4A3238;
  --text-soft:#8A4A57;
  --border:#C23850;
  --hair:rgba(194,56,80,.22);
  --grid:rgba(194,56,80,.07);
  --shadow:3px 3px 0 rgba(194,56,80,.13);
  --radius:0;
  --font-display:"Libre Caslon Display",Georgia,serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--text-dark);
  background-color:var(--cream);
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
  line-height:1.6;
  overflow-x:clip;
}
:focus-visible{outline:3px solid var(--rose-dark);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- menu bar ---------- */
nav{
  position:sticky;top:0;z-index:100;
  background:var(--warm-white);
  border-bottom:2px solid var(--rose);
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 20px;
  height:46px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav-logo{
  font-family:var(--font-display);font-size:21px;color:var(--rose);
  text-decoration:none;letter-spacing:-.01em;display:flex;align-items:baseline;gap:5px;
}
.nav-logo span{color:var(--rose-dark)}
.nav-links{display:flex;align-items:center;gap:16px}
.nav-links a{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rose-dark);text-decoration:none;padding:3px 4px;
}
.nav-links a:hover{background:var(--rose);color:#fff}
.lang-switcher{display:flex;gap:2px;margin-left:6px;border:1px solid var(--rose);padding:2px}
.lang-switcher a{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  color:var(--rose-dark);text-decoration:none;padding:2px 6px;
}
.lang-switcher a:hover{background:var(--rose-light)}
.lang-switcher a.active{background:var(--rose);color:#fff}

main{max-width:1180px;margin:0 auto;padding:38px 20px 72px}

/* ---------- window chrome ---------- */
.tool-card,.blog-card,.tool-link-card,.page-header,.ad-slot,
main > div[style*="background:var(--warm-white)"],
main > div[style*="background:var(--cream)"]{
  position:relative;background:var(--warm-white);
  border:2px solid var(--rose);border-radius:0!important;box-shadow:var(--shadow);
}
.tool-card,.page-header{padding-top:44px!important}
.tool-card::before,.page-header::before{
  content:"";position:absolute;top:0;left:0;right:0;height:26px;
  background:var(--rose-light);border-bottom:2px solid var(--rose);
}
.tool-card::after,.page-header::after{
  content:"\00d7";position:absolute;top:4px;right:8px;width:16px;height:16px;
  border:1px solid var(--rose);color:var(--rose-dark);font-size:12px;line-height:14px;
  text-align:center;background:var(--warm-white);
}
.tool-card{max-width:660px;margin:0 auto 40px;padding:44px 30px 30px}

h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:1.06;color:var(--rose)}
.tool-card h1{font-size:clamp(28px,4vw,40px);color:var(--rose)}
.tool-subtitle{color:var(--text-mid);font-size:15px;margin-bottom:22px}
.page-header{padding:52px 30px 26px;margin-bottom:34px;text-align:left}
.page-header h1{font-size:clamp(30px,5vw,50px)}
.page-header p{color:var(--text-mid);font-size:15px;margin-top:10px;max-width:60ch}

/* ---------- forms ---------- */
.form-group{margin-bottom:16px}
label{
  display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rose-dark);margin-bottom:6px;font-weight:500;
}
input[type=date],input[type=number],input[type=text],select{
  width:100%;font-family:var(--font-body);font-size:15px;padding:11px 12px;
  border:1.5px solid var(--rose);border-radius:0;background:#fff;color:var(--text-dark);
}
input:focus,select:focus{outline:2px solid var(--rose);outline-offset:1px}
.btn-calculate{
  width:100%;margin-top:8px;padding:14px;cursor:pointer;
  background:var(--rose);color:#fff;border:2px solid var(--rose);border-radius:0;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
}
.btn-calculate:hover{background:var(--rose-dark);border-color:var(--rose-dark)}

/* ---------- results ---------- */
.result-card{
  display:none;margin-top:22px;padding:20px;background:#fff;
  border:1.5px dashed var(--rose);border-radius:0;
}
.result-card.show{display:block;animation:slideUp .2s ease-out}
@keyframes slideUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.result-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft);
}
.result-main{font-family:var(--font-display);font-size:clamp(26px,4vw,38px);color:var(--rose);line-height:1.1;margin-top:6px}
.result-sub{color:var(--text-mid);font-size:14px;margin-top:6px}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;margin-top:18px;background:var(--hair);border:1px solid var(--hair)}
.result-item{background:#fff;padding:12px 10px;text-align:center}
.result-item-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}
.result-item-value{font-family:var(--font-display);font-size:24px;color:var(--rose);margin-top:4px}

.affiliate-box{
  margin-top:20px;padding:14px 16px;background:rgba(194,56,80,.05);
  border:0;border-left:3px solid var(--rose);border-radius:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.affiliate-box span{font-size:13.5px;color:var(--text-mid)}
.affiliate-box a{color:var(--rose-dark);font-weight:500;text-decoration:underline;font-size:13.5px}
.affiliate-box a:hover{color:var(--rose)}
.disclaimer{
  margin-top:18px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-soft);line-height:1.8;
}

/* ---------- card grids ---------- */
.tools-grid,.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;margin-top:26px;
}
.tool-link-card{
  display:block;padding:18px;text-decoration:none;color:var(--text-dark);
  transition:background .12s;
}
.tool-link-card:hover{background:var(--rose)}
.tool-link-card .tool-icon{font-size:26px;display:block;margin-bottom:8px;filter:grayscale(.15)}
.tool-link-card h3{font-size:19px;color:var(--rose);margin-bottom:5px}
.tool-link-card p{font-size:13px;color:var(--text-mid);line-height:1.5}
.tool-link-card:hover h3,.tool-link-card:hover p{color:#fff}

.blog-card{overflow:hidden;text-decoration:none;color:inherit;display:block}
.blog-card:hover{background:var(--rose-light)}
.blog-card-body{padding:20px}
.blog-card h2{font-size:20px;color:var(--rose);margin-bottom:8px;line-height:1.15}
.blog-card p{font-size:13.5px;color:var(--text-mid);line-height:1.55}
.blog-category{
  display:inline-block;font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--rose);padding:3px 8px;margin-bottom:10px;
}
.blog-read-more{
  display:inline-block;margin-top:12px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rose-dark);
}

/* ---------- article typography ---------- */
main p{color:var(--text-mid)}
main h2{font-size:clamp(22px,3vw,30px);margin:26px 0 12px}
main h3{font-size:19px;margin:20px 0 8px}
main a{color:var(--rose-dark)}
main ul,main ol{color:var(--text-mid);padding-left:20px}
main li{margin:6px 0}
main strong{color:var(--text-dark)}

.ad-slot{
  margin:34px auto;padding:16px;text-align:center;min-height:110px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px dashed var(--hair);box-shadow:none;background:rgba(194,56,80,.03);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);
}

/* ---------- footer ---------- */
footer{
  border-top:2px solid var(--rose);background:var(--warm-white);
  padding:26px 20px;text-align:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);
}
footer a{color:var(--rose-dark);text-decoration:none;margin:0 7px}
footer a:hover{background:var(--rose);color:#fff}

@media (max-width:640px){
  .nav-inner{height:auto;padding:9px 14px;flex-wrap:wrap;gap:8px}
  .nav-links{gap:10px}
  .nav-links .hide-mobile{display:none}
  main{padding:24px 14px 56px}
  .tool-card{padding:42px 18px 22px}
  .page-header{padding:48px 18px 22px}
  .btn-calculate{padding:16px}
  .result-grid{grid-template-columns:repeat(3,1fr)}
}


/* featured hero cards (inline gradients in markup) */
main a[style*="linear-gradient"]{
  background:var(--rose)!important;border:2px solid var(--rose)!important;
  border-radius:0!important;box-shadow:var(--shadow);color:#fff!important;
  transition:background .12s;
}
main a[style*="linear-gradient"]:hover{background:var(--rose-dark)!important}
main a[style*="linear-gradient"] *{color:#fff!important;opacity:1!important}
main a[style*="linear-gradient"] div[style*="font-display"]{font-family:var(--font-display)!important;font-size:24px!important}

/* stat / section panels written with inline styles */
main div[style*="background:var(--warm-white)"]{border-radius:0!important;box-shadow:var(--shadow)}
main div[style*="border-radius"]{border-radius:0!important}
main div[style*="font-family:var(--font-display)"]{font-family:var(--font-display)!important;color:var(--rose)}