*{
margin:0;
padding:0;
box-sizing:border-box;
}

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

body{

font-family:'Inter',sans-serif;
background:#f6f8fc;
color:#222;
}

a{
text-decoration:none;
color:inherit;
}

.container{

width:min(1200px,92%);
margin:auto;

}

/* NAVBAR */

header{

position:sticky;
top:0;
background:white;
box-shadow:0 5px 20px rgba(0,0,0,.05);
z-index:999;

}

nav{

display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;

}

.logo{

font-size:28px;
font-weight:800;
color:#4f46e5;

}

.menu{

display:flex;
gap:30px;

}

.menu a{

font-weight:600;
color:#555;

}

.menu a:hover{

color:#4f46e5;

}

.menu-toggle{

display:none;
flex-direction:column;
justify-content:center;
gap:5px;
width:32px;
height:32px;
padding:0;
background:none;
border:none;
cursor:pointer;

}

.menu-toggle span{

display:block;
width:100%;
height:3px;
background:#222;
border-radius:2px;
transition:transform .25s ease, opacity .25s ease;

}

.menu-toggle.active span:nth-child(1){

transform:translateY(8px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

transform:translateY(-8px) rotate(-45deg);

}

/* HERO */

.hero{

padding:90px 0;
background:
linear-gradient(135deg,#4f46e5,#0891b2);

color:white;

}

.hero-content{

display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,450px);
gap:60px;
align-items:center;
max-width:100%;

}

.hero-content > *{

min-width:0;

}

.hero h1{

font-size:56px;
line-height:1.1;
margin-bottom:20px;

}

.hero p{

font-size:19px;
opacity:.95;
margin-bottom:35px;

}

.search{

background:white;
padding:10px;
border-radius:60px;
max-width:100%;

}

.search form{

display:flex;
width:100%;

}

.search input{

flex:1;
min-width:0;
background:transparent;
border:none;
outline:none;
border-radius:50px;
padding:15px;
font-size:17px;

}

.search button{

background:#4f46e5;
color:white;
border:none;
padding:15px 20px;
border-radius:50px;
font-weight:700;
cursor:pointer;
white-space:nowrap;
flex-shrink:0;

}

.hero-card{

background:white;
padding:35px;
border-radius:25px;
box-shadow:0 25px 50px rgba(0,0,0,.15);
color:#222;

}

.hero-card h2{

font-size:19px;
margin-bottom:20px;

}

.hero-card ul{

display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:15px;

list-style:none;

}

.hero-card li{

background:#eef4ff;
padding:12px;
border-radius:10px;
font-weight:600;

}

/* SECTION */

section{

padding:70px 0;

}

/* ============================
   HOMEPAGE: STATS BAR
   ============================ */
.stats-bar{

background:white;
padding:40px 0;
border-bottom:1px solid #eef0f5;

}

.stats-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
text-align:center;

}

.stat-number{

font-size:36px;
font-weight:800;
background:linear-gradient(135deg,#4f46e5,#0891b2);
-webkit-background-clip:text;
background-clip:text;
color:transparent;

}

.stat-label{

margin-top:6px;
font-size:15px;
font-weight:600;
color:#666;

}

@media(max-width:700px){

.stats-grid{

grid-template-columns:repeat(2,1fr);
gap:30px 20px;

}

}

/* ============================
   HOMEPAGE: SECTION SUBTITLE
   ============================ */
.section-subtitle{

text-align:center;
color:#666;
font-size:17px;
margin-top:-25px;
margin-bottom:40px;

}

/* ============================
   HOMEPAGE: FEATURED TOOLS
   ============================ */
.featured-tools{

background:white;

}

.featured-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:22px;

}

.featured-card{

background:white;
padding:28px 24px;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
border:1px solid #eef0f5;
transition:.3s;
display:block;
color:inherit;

}

.featured-card:hover{

transform:translateY(-8px);
box-shadow:0 18px 40px rgba(60,50,150,.16);

}

.featured-icon{

width:52px;
height:52px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:#fff;
background:linear-gradient(135deg,#4f46e5,#0891b2);
box-shadow:0 6px 14px rgba(79,70,229,.25);
margin-bottom:16px;

}

.featured-card h3{

font-size:18px;
margin-bottom:8px;

}

.featured-card p{

color:#666;
font-size:14px;

}

.featured-more{

text-align:center;
margin-top:40px;

}

/* ============================
   HOMEPAGE: PERSONAS
   ============================ */
.persona-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;

}

.persona-card{

background:white;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.06);
transition:.3s;

}

.persona-card:hover{

transform:translateY(-8px);

}

.persona-card img{

width:100%;
height:200px;
object-fit:cover;
display:block;

}

.persona-body{

padding:24px;
position:relative;

}

.persona-icon{

position:absolute;
top:-24px;
left:24px;
width:48px;
height:48px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
color:#fff;
background:linear-gradient(135deg,#4f46e5,#0891b2);
box-shadow:0 6px 14px rgba(79,70,229,.3);
border:3px solid white;

}

.persona-body h3{

margin-top:14px;
margin-bottom:8px;
font-size:19px;

}

.persona-body p{

color:#666;
font-size:14px;
margin-bottom:14px;

}

.persona-body a{

color:#4f46e5;
font-weight:700;
font-size:14px;

}

.persona-body a:hover{

text-decoration:underline;

}

/* ============================
   HOMEPAGE: WHY CHOOSE US
   ============================ */
.why-us{

background:white;

}

.why-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;

}

.why-card{

background:#f9fafb;
padding:30px;
border-radius:18px;
text-align:center;

}

.why-icon{

width:56px;
height:56px;
margin:0 auto 18px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:#fff;
background:linear-gradient(135deg,#4f46e5,#0891b2);

}

.why-card h3{

margin-bottom:10px;
font-size:18px;

}

.why-card p{

color:#666;
font-size:14px;

}

/* ============================
   HOMEPAGE: HOW IT WORKS
   ============================ */
.steps-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;

}

.step-card{

text-align:center;
padding:0 15px;

}

.step-number{

width:56px;
height:56px;
margin:0 auto 18px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
font-weight:800;
color:#fff;
background:linear-gradient(135deg,#4f46e5,#0891b2);

}

.step-card h3{

margin-bottom:10px;
font-size:18px;

}

.step-card p{

color:#666;
font-size:14px;

}

/* ============================
   HOMEPAGE: FINAL CTA
   ============================ */
.final-cta{

background:linear-gradient(135deg,#4f46e5,#0891b2);
color:white;

}

.final-cta-content{

text-align:center;

}

.final-cta h2{

font-size:36px;
margin-bottom:15px;

}

.final-cta p{

font-size:18px;
opacity:.9;
margin-bottom:30px;

}

.btn-lg{

display:inline-block;
padding:16px 36px;
border-radius:10px;
font-weight:700;
font-size:17px;
background:white;
color:#4f46e5;
text-align:center;

}

.btn-lg:hover{

background:#f3f4f6;

}

@media(max-width:600px){

.persona-grid, .why-grid, .steps-grid, .featured-grid{

grid-template-columns:1fr;

}

.final-cta h2{

font-size:28px;

}

}

.search-box{

max-width:600px;
margin:0 auto 50px;

}

.contact-page{

max-width:700px;
margin:0 auto;

}

.error-page{

max-width:700px;
margin:0 auto;
text-align:center;

}

.hp-field{

position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;

}

.contact-form{

margin-top:30px;

}

.form-row{

margin-bottom:20px;

}

.form-row label{

display:block;
font-weight:600;
margin-bottom:8px;

}

.form-row .optional{

font-weight:400;
color:#888;
font-size:14px;

}

.contact-form input,
.contact-form textarea{

width:100%;
padding:12px 15px;
border:1px solid #ddd;
border-radius:8px;
font-size:16px;
font-family:inherit;

}

.contact-form textarea{

resize:vertical;

}

.contact-form .btn{

border:none;
cursor:pointer;
font-size:16px;

}

.alert-box{

padding:15px 20px;
border-radius:8px;
margin:20px 0;
font-weight:600;

}

.alert-success{

background:#dcfce7;
color:#166534;

}

.alert-error{

background:#fee2e2;
color:#991b1b;

}

.search-status{

text-align:center;
margin-bottom:30px;
color:#666;

}

.section-title{

font-size:38px;
margin-bottom:40px;
text-align:center;

}

/* BREADCRUMBS */

.breadcrumbs{

margin-bottom:20px;

}

.breadcrumbs ol{

display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
list-style:none;
font-size:14px;
color:#777;

}

.breadcrumbs li{

display:flex;
align-items:center;
gap:8px;

}

.breadcrumbs li:not(:last-child)::after{

content:"/";
color:#ccc;

}

.breadcrumbs a{

color:#4f46e5;
font-weight:600;

}

.breadcrumbs a:hover{

text-decoration:underline;

}

.breadcrumbs li[aria-current="page"]{

color:#777;
font-weight:600;

}

/* CATEGORY */

.category-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:25px;

}

.category{

background:white;
padding:30px;
border-radius:18px;
transition:.3s;
box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.category:hover{

transform:translateY(-8px);

}

.category h2,
.category h3{

margin-bottom:0;
color:#4f46e5;
font-size:19px;
line-height:1.3;

}

.category .cat-header{

display:flex;
align-items:center;
gap:14px;
margin-bottom:12px;

}

.category .cat-icon{

width:44px;
height:44px;
flex-shrink:0;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
color:#fff;
background:linear-gradient(135deg,#4f46e5,#0891b2);
box-shadow:0 6px 14px rgba(79,70,229,.25);

}

.category-grid .category:nth-child(6n+2) .cat-icon{
background:linear-gradient(135deg,#0d9488,#059669);
box-shadow:0 6px 14px rgba(13,148,136,.25);
}

.category-grid .category:nth-child(6n+3) .cat-icon{
background:linear-gradient(135deg,#d97706,#ea580c);
box-shadow:0 6px 14px rgba(217,119,6,.25);
}

.category-grid .category:nth-child(6n+4) .cat-icon{
background:linear-gradient(135deg,#e11d48,#c026d3);
box-shadow:0 6px 14px rgba(225,29,72,.25);
}

.category-grid .category:nth-child(6n+5) .cat-icon{
background:linear-gradient(135deg,#7c3aed,#4f46e5);
box-shadow:0 6px 14px rgba(124,58,237,.25);
}

.category-grid .category:nth-child(6n+6) .cat-icon{
background:linear-gradient(135deg,#0284c7,#4338ca);
box-shadow:0 6px 14px rgba(2,132,199,.25);
}

.category p{

color:#666;

}

/* CALCULATORS */

.calc-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;

}

.card{

background:white;
padding:25px;
border-radius:18px;
transition:.3s;
box-shadow:0 10px 30px rgba(0,0,0,.05);

display:flex;
flex-direction:column;

}

.card:hover{

transform:translateY(-8px);

}

.card h3{

margin-bottom:12px;

}

.card p{

color:#666;
margin-bottom:25px;
flex:1;

}

.btn{

display:inline-block;
padding:12px 18px;
background:#4f46e5;
color:white;
border-radius:10px;
font-weight:700;
text-align:center;

}

.btn:hover{

background:#4338ca;

}

/* FOOTER */

footer{

background:linear-gradient(180deg,#0b1120 0%,#111827 55%);
color:white;
padding:60px 0 0;
position:relative;
overflow:hidden;

}

footer .container{

position:relative;
z-index:1;

}

.footer-stars{

position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background-repeat:repeat;
animation:footer-twinkle 4s ease-in-out infinite;

}

.footer-stars-1{

background-image:
	radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),
	radial-gradient(1.5px 1.5px at 90px 80px,#fff,transparent),
	radial-gradient(1px 1px at 150px 20px,#fff,transparent),
	radial-gradient(1.5px 1.5px at 200px 120px,#fff,transparent),
	radial-gradient(1px 1px at 260px 60px,#fff,transparent),
	radial-gradient(1.5px 1.5px at 40px 150px,#fff,transparent),
	radial-gradient(1px 1px at 120px 170px,#fff,transparent),
	radial-gradient(1.5px 1.5px at 280px 180px,#fff,transparent);
background-size:300px 200px;
animation-duration:3.5s;

}

.footer-stars-2{

background-image:
	radial-gradient(1px 1px at 60px 40px,#fff,transparent),
	radial-gradient(1px 1px at 130px 90px,#fff,transparent),
	radial-gradient(2px 2px at 10px 110px,#fff,transparent),
	radial-gradient(1px 1px at 190px 30px,#fff,transparent),
	radial-gradient(1px 1px at 230px 140px,#fff,transparent),
	radial-gradient(2px 2px at 90px 170px,#fff,transparent),
	radial-gradient(1px 1px at 250px 80px,#fff,transparent);
background-size:280px 220px;
animation-duration:4.5s;
animation-delay:1.2s;

}

.footer-stars-3{

background-image:
	radial-gradient(2px 2px at 45px 60px,#fff,transparent),
	radial-gradient(1.5px 1.5px at 170px 100px,#fff,transparent),
	radial-gradient(2px 2px at 100px 20px,#fff,transparent),
	radial-gradient(1.5px 1.5px at 220px 150px,#fff,transparent),
	radial-gradient(2px 2px at 30px 180px,#fff,transparent);
background-size:260px 190px;
animation-duration:5.5s;
animation-delay:2.4s;

}

@keyframes footer-twinkle{

0%,100%{ opacity:.3; }
50%{ opacity:1; }

}

.footer-grid{

display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:40px;
padding-bottom:45px;

}

.footer-brand .logo{

font-size:24px;
font-weight:800;
color:white;
margin-bottom:14px;

}

.footer-brand p{

opacity:.7;
line-height:1.7;
max-width:320px;

}

footer h4{

margin-bottom:18px;
font-size:15px;
text-transform:uppercase;
letter-spacing:.05em;
color:#9ca3af;

}

footer ul{

list-style:none;

}

footer li{

margin:12px 0;

}

footer a{

opacity:.75;
transition:.2s;

}

footer a:hover{

opacity:1;
color:#818cf8;

}

.footer-bottom{

border-top:1px solid rgba(255,255,255,.1);
padding:25px 0;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px;

}

.footer-bottom p{

opacity:.6;
font-size:14px;

}

.footer-legal{

display:flex;
gap:25px;
list-style:none;

}

.footer-legal a{

font-size:14px;

}

@media(max-width:900px){

.footer-grid{

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

}

.footer-bottom{

justify-content:center;
text-align:center;

}

}

/* MOBILE */

@media(max-width:900px){

.hero-content{

grid-template-columns:minmax(0,1fr);

}

.hero h1{

font-size:40px;

}

.hero-card{

padding:25px;

}

nav{

position:relative;

}

.menu-toggle{

display:flex;

}

.menu{

display:none;
position:absolute;
top:100%;
left:0;
right:0;
flex-direction:column;
gap:0;
background:white;
border-top:1px solid #eee;
box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.menu.open{

display:flex;

}

.menu a{

padding:16px 20px;
border-bottom:1px solid #f0f0f0;

}

.menu a:last-child{

border-bottom:none;

}

}

@media(max-width:480px){

.hero-card ul{

grid-template-columns:minmax(0,1fr);

}

.search{

border-radius:20px;

}

.search form{

flex-direction:column;

}

.search input{

width:100%;
border-radius:14px;
padding:12px 15px;

}

.search button{

width:100%;
border-radius:14px;
margin-top:8px;
padding:12px 20px;

}

}

/* =========================================
   RELATED CALCULATORS
   ========================================= */
.related-calcs{

margin:30px 0;
padding:24px;
background:#f6f8fc;
border:1px solid #eef0f5;
border-radius:14px;

}

.related-calcs h2{

font-size:18px;
margin-bottom:14px;

}

.related-calcs-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:12px;

}

.related-calc-link{

display:block;
background:white;
border:1px solid #e2e6f0;
border-radius:10px;
padding:12px 16px;
font-weight:600;
color:#4f46e5;
transition:.2s;

}

.related-calc-link:hover{

border-color:#4f46e5;
background:#f6f5ff;
transform:translateY(-2px);

}

/* =========================================
   CONVERT-TO-OTHER-UNITS LINK (injected by calc-convert.js)
   ========================================= */
.calc-convert-link{

display:inline-flex;
align-items:center;
gap:8px;
margin-top:12px;
padding:10px 16px;
background:#eef2ff;
border:1px solid #c7d2fe;
border-radius:8px;
color:#4f46e5;
font-weight:600;
font-size:14px;
transition:.2s;

}

.calc-convert-link:hover{

background:#e0e7ff;
border-color:#4f46e5;

}

/* =========================================
   1. BASE .PAGE CONTAINER & VARIABLES
   ========================================= */
.page {
  /* Scoped Variables (Only apply inside .page) */
  --text-color: #333333;
  --heading-color: #111111;
  --accent-color: #4f46e5;
  --highlight-bg: #fff3cd;
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Container Styles */
  background-color: #FFF;
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--text-color);
  line-height: 1.6;

  margin: 0;
  padding: 2rem;
}

/* =========================================
   2. HEADINGS (h1 - h6)
   ========================================= */
.page h1, 
.page h2, 
.page h3, 
.page h4, 
.page h5, 
.page h6 {
  color: var(--heading-color);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* Individual Heading Sizes */
.page h1 { font-size: 2.25rem; }
.page h2 { font-size: 1.875rem; border-bottom: 2px solid #f0f0f0; padding-bottom: 0.3em; }
.page h3 { font-size: 1.5rem; }
.page h4 { font-size: 1.25rem; }
.page h5 { font-size: 1.1rem; }
.page h6 { font-size: 1rem; color: #555; text-transform: uppercase; letter-spacing: 0.05em; }

/* Remove top margin if a heading is the very first element */
.page > h1:first-child,
.page > h2:first-child {
  margin-top: 0;
}

/* =========================================
   3. PARAGRAPHS (p)
   ========================================= */
.page p {
  margin-top: 0;
  margin-bottom: 1.25em;
}

/* =========================================
   4. LISTS (ul, ol, li)
   ========================================= */
.page ul, 
.page ol {
  padding-left: 1.5rem;
  margin-top: 0;
  margin-bottom: 1.25em;
}

.page li {
  margin-bottom: 0.5em;
}

/* Custom bullet/number color */
.page li::marker {
  color: var(--accent-color);
  font-weight: 600;
}

/* =========================================
   5. INLINE TEXT (span, b, strong)
   ========================================= */
.page b, 
.page strong {
  font-weight: 700;
  color: var(--heading-color); /* Makes bold text pop slightly */
}

/* Base span inherits text color. 
   Here is a utility class if you want to highlight specific spans */
.page span.highlight {
  background-color: var(--highlight-bg);
  padding: 0.1em 0.3em;
  border-radius: 4px;
  font-weight: 500;
}

/* Optional: Style for inline code spans if needed */
.page span.code, .page code {
  background-color: #f4f4f4;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
  color: #d63384;
}

/* =========================================
   6. TABLES
   ========================================= */
.page .table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5em;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
}

.page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.page table caption {
  text-align: left;
  font-weight: 600;
  color: var(--heading-color);
  padding: 0.75em 1em 0;
}

.page thead th {
  background: #f3f5fb;
  color: var(--heading-color);
  text-align: left;
  font-weight: 700;
  padding: 0.75em 1em;
  border-bottom: 2px solid #e2e6f0;
  white-space: nowrap;
}

.page tbody td {
  padding: 0.65em 1em;
  border-bottom: 1px solid #eef0f5;
}

.page tbody tr:last-child td {
  border-bottom: none;
}

.page tbody tr:nth-child(even) {
  background: #fafbfd;
}

/* =========================================
   7. CALLOUTS / KEY FORMULA BLOCKS
   ========================================= */
.page .formula-box {
  background: #f6f4ff;
  border-left: 4px solid var(--accent-color, #4f46e5);
  border-radius: 8px;
  padding: 1em 1.25em;
  margin: 0 0 1.5em;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  color: #2a2a3a;
  line-height: 1.7;
  overflow-x: auto;
}

.page .callout {
  background: #fff9ec;
  border: 1px solid #f0e2bd;
  border-radius: 8px;
  padding: 1em 1.25em;
  margin: 0 0 1.5em;
}

.page .callout strong {
  color: #8a6d1d;
}

.page .calc-note {
  font-size: 0.85rem;
  color: #777;
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}

/* =========================================
   8. INLINE SVG CHART WRAPPER
   ========================================= */
.page .chart-wrap {
  margin: 0 0 1.5em;
  padding: 1.25em;
  background: #fafbfd;
  border: 1px solid #eef0f5;
  border-radius: 10px;
}

.page .chart-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.page .chart-caption {
  margin-top: 0.75em;
  font-size: 0.85rem;
  color: #666;
  text-align: center;
}



/* ============================
   Calculator Card - Stunning UI
   ============================ */

.calculators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 10px 0 30px;
}

.calculator-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 28px 24px 48px;
    border-radius: 16px;
    background: linear-gradient(160deg, #f3f1ff 0%, #eefaf9 100%);
    border: 1px solid #e4ddff;
    box-shadow: 0 2px 8px rgba(20, 20, 43, 0.06);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    isolation: isolate;
}

/* Gradient glow that sweeps in on hover */
.calculator-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, #4f46e5, #0891b2, #4f46e5);
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease, background-position 0.8s ease;
    z-index: 0;
}

/* Soft glow blob in the corner */
.calculator-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.15), transparent 70%);
    border-radius: 50%;
    z-index: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.calculator-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(60, 50, 150, 0.16);
    border-color: transparent;
    background: linear-gradient(160deg, #ece7ff 0%, #e4f7f6 100%);
}

.calculator-card:hover::before {
    opacity: 1;
    background-position: 100% 50%;
}

.calculator-card:hover::after {
    opacity: 1;
    transform: scale(1.15);
}

.calculator-card h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: #1c1e2b;
    display: inline;
    background-image: linear-gradient(90deg, #4f46e5, #0891b2);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size 0.35s ease, color 0.35s ease;
    padding-bottom: 2px;
}

.calculator-card,
.calculator-card:hover,
.calculator-card:focus {
    text-decoration: none;
}

.calculator-card:hover h3 {
    color: #3730a3;
    background-size: 100% 2px;
}

.calculator-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}

/* Small icon badge before the title (optional - add <span class="calc-icon">🧮</span> in the tpl) */
.calculator-card .calc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.75);
    position: relative;
    z-index: 1;
    transition: transform 0.35s ease;
}

.calculator-card:hover .calc-icon {
    transform: scale(1.08) rotate(-4deg);
}

/* Arrow that slides in on hover */
.calculator-card .calc-arrow {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4fb;
    color: #4f46e5;
    font-size: 14px;
    z-index: 1;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.35s ease, transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.calculator-card:hover .calc-arrow {
    opacity: 1;
    transform: translateX(0);
    background: #4f46e5;
    color: #fff;
}

/* Responsive tweaks */
@media (max-width: 767px) {
    .calculator-card {
        padding: 22px 18px;
    }
    .calculator-card h2 {
        font-size: 16px;
    }
}

/* Optional dark mode support */
@media (prefers-color-scheme: dark) {
    .calculator-card {
        background: linear-gradient(160deg, #201b3d 0%, #16302f 100%);
        border-color: #2c2650;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }
    .calculator-card:hover {
        background: linear-gradient(160deg, #291f4d 0%, #1a3a38 100%);
    }
    .calculator-card h2 {
        color: #f1f2f6;
    }
    .calculator-card p {
        color: #b8bcd6;
    }
    .calculator-card .calc-icon {
        background: rgba(255, 255, 255, 0.08);
    }
    .calculator-card .calc-arrow {
        background: rgba(255, 255, 255, 0.1);
    }
}

.calcbody {
    font-family: Arial, sans-serif; /* Added a standard fallback font */
    width: 100%;                    /* Takes up full width on mobile devices */
    max-width: 300px;               /* Caps the width at 300px on desktops */
    margin: 60px auto;              /* Keeps it perfectly centered */
    
    /* --- Crucial additions for a Calculator --- */
    box-sizing: border-box;         /* Ensures padding/borders don't break the 300px limit */
    padding: 0 15px;                /* Prevents the calculator from touching the screen edges on mobile */
}

/* When the screen is 480px or smaller (most mobile phones) */
@media (max-width: 480px) {
    .calcbody {
        margin: 20px auto; /* Reduces the top/bottom spacing */
    }
}

.calcbody input, .calcbody select, .calcbody button{
	width: 100%;
	padding: 10px;
	margin: 8px 0;
	font-size: 16px;
}

#result{
	margin-top: 20px;
	font-size: 22px;
	font-weight: bold;
	color: green;
}

.calcbody button.is-loading{
	opacity: .75;
	cursor: progress;
}

.calc-loading{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 15px;
	background: #f8f9fa;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 15px;
	font-weight: normal;
	color: #555;
}

.calc-spinner{
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 3px solid #d1d5db;
	border-top-color: #4f46e5;
	border-radius: 50%;
	display: inline-block;
	animation: calc-spin .7s linear infinite;
}

@keyframes calc-spin{
	to{ transform: rotate(360deg); }
}

pre {
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  padding: 1rem;
  box-sizing: border-box;
}

.calc-result{
	background:#f8f9fa;
	border:1px solid #ddd;
	border-radius:8px;
	padding:15px;
	margin-top:20px;
}

.calc-result .answer{
	font-size:28px;
	font-weight:bold;
	color:#4f46e5;
	margin-bottom:15px;
}

.calc-result pre{
	white-space:pre-wrap;
	word-wrap:break-word;
	background:#fff;
	border:1px solid #e5e5e5;
	border-radius:6px;
	padding:12px;
	line-height:1.6;
	font-family:inherit;
	color:#333;
	font-size:15px;
	font-weight:normal;
	margin:0;
}

.calc-result .error{
	color:#c0392b;
}

/* CALCULATOR ACTIONS: copy result + report issue */

.calc-actions{
	display:flex;
	gap:10px;
	margin-top:15px;
	flex-wrap:wrap;
}

.calc-action-btn{
	background:white;
	border:1px solid #d1d5db;
	color:#374151;
	padding:8px 16px;
	border-radius:8px;
	font-size:14px;
	font-weight:600;
	cursor:pointer;
	transition:.2s;
}

.calc-action-btn:hover{
	background:#f3f4f6;
	border-color:#9ca3af;
}

.calc-copy-btn:hover{
	background:#eef2ff;
	border-color:#4f46e5;
	color:#4f46e5;
}

.calc-report-btn:hover{
	background:#fef2f2;
	border-color:#dc2626;
	color:#dc2626;
}

.calc-modal-overlay{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(17,24,39,.55);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9999;
	padding:20px;
}

.calc-modal{
	background:white;
	border-radius:14px;
	padding:30px;
	width:100%;
	max-width:440px;
	box-shadow:0 25px 50px rgba(0,0,0,.25);
}

.calc-modal h3{
	margin-bottom:10px;
}

.calc-modal p{
	color:#666;
	margin-bottom:15px;
	font-size:15px;
}

.calc-modal textarea.calc-report-comment{
	width:100%;
	padding:12px;
	border:1px solid #ddd;
	border-radius:8px;
	font-family:inherit;
	font-size:15px;
	resize:vertical;
}

.calc-hp-field{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}

.calc-modal-status{
	min-height:20px;
	margin-top:12px;
	font-size:14px;
	font-weight:600;
}

.calc-modal-success{
	color:#166534;
}

.calc-modal-error{
	color:#991b1b;
}

.calc-modal-actions{
	display:flex;
	justify-content:flex-end;
	gap:10px;
	margin-top:15px;
}