/* ============================================================
   PintarPlus Tools - tema "Lembar Kerja"
   Terang: kertas latihan + tinta + pulpen merah
   Gelap : papan tulis + kapur
   ============================================================ */

:root{

--paper:#fcfcfa;
--desk:#e8eae3;
--sheet:#ffffff;
--ink:#1c2b3a;
--ink-soft:#46586b;
--muted:#67737d;
--red:#c93a2e;
--red-deep:#a82f25;
--green:#256e49;
--line:#d6d9cf;
--line-strong:#b8bdb0;
--grid:rgba(28,43,58,.05);
--chalk:#eef2ec;
--radius:10px;

}

html[data-theme="dark"]{

--desk:#111c17;
--sheet:#18251f;
--ink:#e9efe9;
--ink-soft:#c2cdc3;
--muted:#93a297;
--red:#e2756a;
--red-deep:#ea8d83;
--green:#6fcf97;
--line:#2a3a32;
--line-strong:#3a4d43;
--grid:rgba(233,239,233,.05);
color-scheme:dark;

}

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

html{
scroll-behavior:smooth;
}

body{
background:var(--desk);
color:var(--ink);
font-family:'Inter',sans-serif;
line-height:1.7;
}

::selection{
background:rgba(201,58,46,.22);
}

:focus-visible{
outline:2px solid var(--red);
outline-offset:2px;
border-radius:4px;
}

.container{
max-width:1200px;
margin:auto;
padding:20px;
}

h1,h2,h3,h4{
font-family:'Archivo','Inter',sans-serif;
line-height:1.25;
}

/* NAVBAR */

.navbar{
position:sticky;
top:0;
z-index:100;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:12px;
background:rgba(232,234,227,.94);
border-bottom:1px solid var(--line-strong);
margin:-20px -20px 30px;
padding:13px 20px;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}

html[data-theme="dark"] .navbar{
background:rgba(17,28,23,.94);
}

.logo{
font-family:'Archivo','Inter',sans-serif;
font-size:24px;
font-weight:800;
letter-spacing:-.02em;
color:var(--ink);
text-decoration:none;
white-space:nowrap;
}

.logo .plus{
color:var(--red);
}

.nav-links{
display:flex;
flex-wrap:wrap;
gap:4px;
}

.nav-links a{
text-decoration:none;
color:var(--muted);
font-weight:600;
font-size:14px;
padding:7px 12px;
transition:color .15s;
}

.nav-links a:hover{
color:var(--ink);
}

.nav-links a.active{
color:var(--ink);
box-shadow:inset 0 -2px 0 var(--red);
}

/* BREADCRUMB */

.breadcrumb{
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:12.5px;
color:var(--muted);
margin-bottom:20px;
}

.breadcrumb a{
color:var(--ink-soft);
text-decoration:none;
border-bottom:1px dotted var(--muted);
}

.breadcrumb a:hover{
color:var(--red);
border-color:var(--red);
}

/* HERO BERANDA - kepala lembar kerja */

.hero{
position:relative;
background:var(--sheet);
background-image:
linear-gradient(var(--grid) 1px,transparent 1px),
linear-gradient(90deg,var(--grid) 1px,transparent 1px);
background-size:28px 28px;
border:1px solid var(--line);
border-radius:var(--radius);
padding:58px 48px 54px 72px;
overflow:hidden;
}

.hero::before{
content:'';
position:absolute;
left:38px;
top:0;
bottom:0;
width:2px;
background:rgba(201,58,46,.38);
}

.hero-content{
position:relative;
max-width:760px;
}

.hero-meta{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:baseline;
gap:8px 24px;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:12.5px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted);
border-bottom:1px solid var(--line);
padding-bottom:14px;
margin-bottom:30px;
}

.hero-meta strong{
color:var(--ink);
font-weight:600;
}

.hero-badge{
display:inline-block;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:12.5px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--red);
margin-bottom:16px;
}

.hero-badge::before{
content:'// ';
}

.hero h1{
font-size:clamp(30px,5vw,52px);
font-weight:800;
letter-spacing:-.02em;
margin-bottom:16px;
}

.hero p{
max-width:640px;
font-size:16.5px;
color:var(--ink-soft);
margin-bottom:30px;
}

/* Kotak pencarian - gaya isian jawaban */

.search-box input{
width:100%;
max-width:520px;
padding:12px 4px;
border:none;
border-bottom:2px dashed var(--line-strong);
border-radius:0;
font-size:16px;
font-family:'IBM Plex Mono',ui-monospace,monospace;
color:var(--ink);
background:transparent;
outline:none;
transition:border-color .15s;
}

.search-box input::placeholder{
color:var(--muted);
}

.search-box input:focus{
border-bottom:2px solid var(--red);
}

.search-info{
margin-top:12px;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:13px;
color:var(--muted);
min-height:20px;
}

.search-info.notfound{
color:var(--red);
}

.category-menu{
margin-top:26px;
display:flex;
flex-wrap:wrap;
column-gap:26px;
row-gap:10px;
counter-reset:kat;
}

.category-menu a{
text-decoration:none;
color:var(--ink);
font-weight:600;
font-size:14.5px;
border-bottom:1px solid transparent;
transition:border-color .15s,color .15s;
counter-increment:kat;
}

.category-menu a::before{
content:counter(kat,decimal-leading-zero);
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:11.5px;
font-weight:500;
color:var(--red);
margin-right:7px;
vertical-align:2px;
}

.category-menu a:hover{
border-color:var(--ink);
}

/* HERO HALAMAN TOOL */

.hero-tool{
position:relative;
background:var(--sheet);
background-image:
linear-gradient(var(--grid) 1px,transparent 1px),
linear-gradient(90deg,var(--grid) 1px,transparent 1px);
background-size:28px 28px;
border:1px solid var(--line);
border-radius:var(--radius);
padding:42px 36px 40px 56px;
margin-bottom:32px;
overflow:hidden;
}

.hero-tool::before{
content:'';
position:absolute;
left:28px;
top:0;
bottom:0;
width:2px;
background:rgba(201,58,46,.38);
}

.badge{
display:inline-block;
position:relative;
z-index:1;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:12px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--red);
margin-bottom:14px;
}

.badge::before{
content:'// ';
}

.hero-tool h1{
position:relative;
z-index:1;
font-size:clamp(24px,4vw,38px);
font-weight:800;
letter-spacing:-.02em;
margin-bottom:12px;
}

.hero-tool p{
position:relative;
z-index:1;
max-width:640px;
color:var(--ink-soft);
font-size:16px;
}

/* SECTION */

.section{
margin-top:64px;
scroll-margin-top:80px;
}

.section-head{
margin-bottom:24px;
}

.section-title{
font-size:clamp(22px,3vw,30px);
font-weight:800;
letter-spacing:-.01em;
margin-bottom:6px;
}

.section-title::after{
content:'';
display:block;
width:44px;
height:3px;
border-radius:2px;
background:var(--red);
margin-top:12px;
}

.section-desc,
.section-title + p{
color:var(--muted);
margin-bottom:18px;
}

/* GRID & KARTU - lembar tersusun */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:16px;
}

.card{
position:relative;
background:var(--sheet);
border:1px solid var(--line);
border-radius:var(--radius);
padding:24px;
display:flex;
flex-direction:column;
transition:transform .18s,border-color .18s;
}

.card:hover{
transform:translateY(-3px);
border-color:var(--line-strong);
}

.card h3{
font-size:19px;
margin-bottom:8px;
letter-spacing:-.01em;
}

.card p{
color:var(--muted);
margin-bottom:18px;
font-size:14.5px;
flex-grow:1;
}

.go{
display:inline-flex;
align-items:center;
gap:6px;
text-decoration:none;
color:var(--ink);
font-weight:700;
font-size:14.5px;
width:fit-content;
border-bottom:2px solid var(--line-strong);
padding-bottom:2px;
transition:color .15s,border-color .15s;
}

.go:hover{
color:var(--red);
border-color:var(--red);
}

.btn{
display:block;
text-align:center;
padding:11px 14px;
background:var(--ink);
color:var(--paper);
text-decoration:none;
border-radius:8px;
font-weight:700;
font-size:14.5px;
transition:background .15s;
}

.btn:hover{
background:var(--red);
color:#fff;
}

/* KARTU "SEGERA HADIR" */

.more-card{
background:transparent;
border:1px dashed var(--line-strong);
justify-content:center;
}

.more-card h3{
font-size:18px;
}

.more-icon{
display:none;
}

.tool-list{
margin:0 0 18px;
padding-left:18px;
flex-grow:1;
list-style:none;
}

.tool-list li{
margin-bottom:5px;
color:var(--muted);
font-size:13.5px;
}

.tool-list li::before{
content:'+ ';
color:var(--red);
font-weight:700;
margin-right:2px;
}

.more-btn{
background:transparent;
color:var(--ink);
border:1px solid var(--line-strong);
}

.more-btn:hover{
background:var(--ink);
color:var(--paper);
border-color:var(--ink);
}

.card.hidden,
.section.hidden{
display:none;
}

/* STATISTIK - tidak dipakai lagi, tetap aman bila ada */

.stats{
display:none;
}

/* FAQ - tanya jawab di pinggir kertas */

.faq{
margin-top:64px;
}

.faq-item{
background:var(--sheet);
border:1px solid var(--line);
border-radius:var(--radius);
margin-bottom:10px;
overflow:hidden;
}

.faq-item summary{
list-style:none;
cursor:pointer;
padding:16px 20px;
font-weight:600;
font-size:15.5px;
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
}

.faq-item summary::-webkit-details-marker{
display:none;
}

.faq-item summary::after{
content:'+';
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:20px;
font-weight:500;
color:var(--red);
transition:transform .2s;
flex-shrink:0;
}

.faq-item[open] summary::after{
transform:rotate(45deg);
}

.faq-item p{
padding:0 20px 18px;
color:var(--ink-soft);
font-size:14.5px;
}

/* CTA */

.cta{
margin-top:64px;
background:var(--ink);
border-radius:var(--radius);
padding:44px 30px;
text-align:center;
color:var(--paper);
}

.cta h2{
font-size:clamp(20px,3vw,28px);
margin-bottom:10px;
}

.cta p{
max-width:560px;
margin:auto auto 24px;
color:#b9c4cc;
font-size:15px;
}

.cta-btn{
display:inline-block;
padding:13px 26px;
background:var(--paper);
color:var(--ink);
text-decoration:none;
font-weight:700;
font-size:15px;
border-radius:8px;
transition:background .15s,color .15s;
}

.cta-btn:hover{
background:var(--red);
color:#fff;
}

/* FOOTER */

footer{
margin-top:72px;
background:#16202b;
color:#c6cfc7;
padding:52px 20px 28px;
}

.footer-inner{
max-width:1200px;
margin:auto;
}

.footer-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
flex-wrap:wrap;
gap:35px;
padding-bottom:35px;
border-bottom:1px solid rgba(255,255,255,.09);
}

.footer-grid{
display:grid;
grid-template-columns:1.7fr 1fr 1fr;
gap:35px;
padding-bottom:35px;
border-bottom:1px solid rgba(255,255,255,.09);
}

footer .logo{
color:#fff;
}

footer .logo .plus{
color:var(--red);
}

.footer-brand .logo{
font-size:22px;
}

.footer-brand p{
max-width:330px;
font-size:13.5px;
color:#93a096;
margin-top:12px;
}

.footer-col h4{
color:#fff;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:11.5px;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
margin-bottom:14px;
}

.footer-col a{
display:block;
color:#93a096;
text-decoration:none;
font-size:13.5px;
margin-bottom:9px;
transition:color .15s;
}

.footer-col a:hover{
color:#fff;
}

.copyright{
text-align:center;
padding-top:24px;
color:#7d8a80;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:12px;
}

.copyright a{
color:#aebbaf;
text-decoration:none;
border-bottom:1px dotted #5c6a60;
}

.copyright a:hover{
color:#fff;
border-color:#fff;
}

/* KALKULATOR */

.calc-card{
background:var(--sheet);
border:1px solid var(--line);
border-radius:var(--radius);
padding:32px;
margin-bottom:30px;
}

.calc-card > h2:first-child{
font-size:22px;
margin-bottom:22px;
letter-spacing:-.01em;
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.form-group label{
display:block;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:12px;
font-weight:600;
letter-spacing:.06em;
text-transform:uppercase;
margin-bottom:8px;
color:var(--ink-soft);
}

.form-group.full{
grid-column:1 / -1;
}

input[type="number"],
input[type="date"],
input[type="text"],
input[type="password"],
textarea,
select{
width:100%;
padding:12px 14px;
border:1px solid var(--line-strong);
border-radius:8px;
font-size:16px;
font-family:inherit;
color:var(--ink);
background:var(--paper);
outline:none;
transition:border-color .15s,box-shadow .15s;
}

textarea{
resize:vertical;
min-height:110px;
font-family:'IBM Plex Mono',ui-monospace,monospace;
}

input:focus,
select:focus,
textarea:focus{
border-color:var(--red);
box-shadow:0 0 0 3px rgba(201,58,46,.14);
}

.check-row{
display:flex;
flex-wrap:wrap;
gap:10px 22px;
}

.check-row label{
display:flex;
align-items:center;
gap:8px;
font-size:14.5px;
font-weight:500;
color:var(--ink);
text-transform:none;
letter-spacing:0;
font-family:'Inter',sans-serif;
cursor:pointer;
margin-bottom:0;
}

.check-row input[type="checkbox"]{
width:auto;
accent-color:var(--red);
}

.btn-primary{
width:100%;
margin-top:22px;
padding:14px;
border:none;
border-radius:8px;
background:var(--ink);
color:var(--paper);
font-size:15px;
font-weight:700;
letter-spacing:.03em;
cursor:pointer;
transition:background .15s,transform .1s;
}

.btn-secondary{
width:auto;
margin-top:14px;
padding:10px 18px;
border:1px solid var(--line-strong);
border-radius:8px;
background:transparent;
color:var(--ink);
font-size:14px;
font-weight:700;
cursor:pointer;
transition:background .15s,color .15s,border-color .15s;
}

.btn-primary:hover{
background:var(--red);
color:#fff;
}

.btn-secondary:hover{
background:var(--ink);
color:var(--paper);
border-color:var(--ink);
}

.btn-primary:active{
transform:translateY(1px);
}

/* HASIL - kotak jawaban dilingkari pulpen merah */

.result-box{
display:none;
margin-top:26px;
padding:30px 24px 26px;
border-radius:var(--radius);
background:transparent;
border:none;
text-align:center;
}

.result-box.show{
display:block;
animation:fadeIn .25s ease;
}

@keyframes fadeIn{
from{opacity:0;transform:translateY(6px);}
to{opacity:1;transform:translateY(0);}
}

.result-label{
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:12px;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:14px;
}

.result-label::before{
content:'jawaban';
display:inline-block;
color:var(--red);
border:1px solid currentColor;
border-radius:4px;
padding:1px 8px;
margin-right:10px;
transform:rotate(-2deg);
font-size:10.5px;
}

.result-value{
position:relative;
display:inline-block;
padding:14px 34px;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:clamp(24px,4vw,36px);
font-weight:600;
color:var(--ink);
word-break:break-word;
}

.result-value::before{
content:'';
position:absolute;
inset:-6px -10px;
pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 96' preserveAspectRatio='none'%3E%3Cpath d='M160 8 C 258 5 312 22 310 47 C 308 74 232 90 154 89 C 72 88 10 72 8 46 C 6 20 78 9 168 8' fill='none' stroke='%23c93a2e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
transform:rotate(-1.2deg);
}

html[data-theme="dark"] .result-value::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 96' preserveAspectRatio='none'%3E%3Cpath d='M160 8 C 258 5 312 22 310 47 C 308 74 232 90 154 89 C 72 88 10 72 8 46 C 6 20 78 9 168 8' fill='none' stroke='%23e2756a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.result-extra{
margin-top:16px;
font-size:14px;
color:var(--ink-soft);
}

.error-box{
display:none;
margin-top:20px;
padding:13px 16px;
border-left:3px solid var(--red);
border-radius:6px;
background:rgba(201,58,46,.08);
color:var(--red);
font-weight:600;
font-size:14.5px;
text-align:left;
}

.error-box.show{
display:block;
}

/* KONTEN ARTIKEL */

.content-section{
background:var(--sheet);
border:1px solid var(--line);
border-radius:var(--radius);
padding:32px;
margin-bottom:26px;
}

.content-section h2{
font-size:23px;
margin-bottom:14px;
letter-spacing:-.01em;
}

.content-section h3{
font-size:17.5px;
margin:22px 0 10px;
}

.content-section p{
color:var(--ink-soft);
margin-bottom:13px;
font-size:15px;
}

.content-section ul,
.content-section ol{
margin:0 0 14px 22px;
color:var(--ink-soft);
font-size:15px;
}

.content-section li{
margin-bottom:7px;
}

.content-section a{
color:var(--ink);
font-weight:600;
text-decoration-color:var(--red);
text-decoration-thickness:2px;
text-underline-offset:3px;
}

.content-section a:hover{
color:var(--red);
}

.formula{
background:transparent;
border:1px dashed var(--line-strong);
border-left:3px solid var(--red);
border-radius:6px;
padding:14px 18px;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-weight:600;
color:var(--ink);
text-align:center;
margin:16px 0;
font-size:15px;
}

/* TABEL */

.table-wrap{
overflow-x:auto;
margin:18px 0;
border:1px solid var(--line);
border-radius:8px;
}

table{
width:100%;
border-collapse:collapse;
font-size:14.5px;
}

th{
background:var(--ink);
color:var(--paper);
padding:11px 14px;
text-align:left;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:12.5px;
font-weight:600;
letter-spacing:.05em;
text-transform:uppercase;
}

td{
padding:10px 14px;
border-bottom:1px solid var(--line);
color:var(--ink-soft);
}

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

tr:nth-child(even) td{
background:rgba(28,43,58,.03);
}

html[data-theme="dark"] tr:nth-child(even) td{
background:rgba(233,239,233,.04);
}

/* TOOLS TERKAIT */

.related-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:14px;
}

.related-card{
position:relative;
background:var(--sheet);
border:1px solid var(--line);
border-radius:var(--radius);
padding:20px;
text-decoration:none;
transition:transform .18s,border-color .18s;
}

.related-card:hover{
transform:translateY(-3px);
border-color:var(--line-strong);
}

.related-card::after{
content:'\2197';
position:absolute;
top:14px;
right:16px;
color:var(--line-strong);
font-size:15px;
transition:color .15s;
}

.related-card:hover::after{
color:var(--red);
}

.related-card strong{
display:block;
color:var(--ink);
font-family:'Archivo','Inter',sans-serif;
font-size:16px;
margin-bottom:4px;
padding-right:20px;
}

.related-card span{
color:var(--muted);
font-size:13px;
}

.related-card .icon{
display:none;
}

.related-card.soon{
background:transparent;
border-style:dashed;
cursor:default;
}

.related-card.soon::after{
content:'';
}

.related-card.soon em{
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-style:normal;
font-size:10.5px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--red);
display:inline-block;
border:1px solid currentColor;
border-radius:4px;
padding:0 6px;
margin-left:8px;
transform:rotate(-2deg);
}

/* TOMBOL MELAYANG */

.pp-fab-wrap{
position:fixed;
right:16px;
bottom:16px;
z-index:9999;
display:flex;
flex-direction:column;
gap:10px;
}

.pp-fab{
width:44px;
height:44px;
border-radius:10px;
border:1px solid var(--line-strong);
background:var(--sheet);
color:var(--ink);
font-size:18px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 2px 8px rgba(28,43,58,.14);
transition:transform .15s,border-color .15s;
padding:0;
}

.pp-fab:hover{
transform:translateY(-2px);
border-color:var(--red);
}

#ppTop{
opacity:0;
pointer-events:none;
}

#ppTop.show{
opacity:1;
pointer-events:auto;
}

/* REVEAL */

@media(prefers-reduced-motion:no-preference){

.pp-reveal{
opacity:0;
translate:0 14px;
transition:opacity .5s ease,translate .5s ease;
}

.pp-reveal.pp-in{
opacity:1;
translate:0 0;
}

}

/* TOMBOL HAMBURGER (mobile) */

.pp-burger{
display:none;
width:38px;
height:38px;
border:1px solid var(--line-strong);
border-radius:8px;
background:var(--sheet);
cursor:pointer;
flex-shrink:0;
position:relative;
padding:0;
}

.pp-burger span,
.pp-burger::before,
.pp-burger::after{
content:'';
position:absolute;
left:9px;
right:9px;
height:2px;
border-radius:2px;
background:var(--ink);
transition:transform .2s,opacity .2s;
}

.pp-burger::before{top:11px}
.pp-burger span{top:18px}
.pp-burger::after{top:25px}

.pp-open .pp-burger::before{
transform:translateY(7px) rotate(45deg);
}

.pp-open .pp-burger span{
opacity:0;
}

.pp-open .pp-burger::after{
transform:translateY(-7px) rotate(-45deg);
}

/* MOBILE */

@media(max-width:768px){

.container{
padding:12px;
}

.navbar{
margin:-12px -12px 22px;
padding:9px 12px;
gap:8px;
flex-wrap:wrap;
}

.logo{
font-size:19px;
flex-shrink:0;
}

.pp-burger{
display:block;
margin-left:auto;
}

.nav-links{
display:none;
flex-direction:column;
width:100%;
gap:2px;
padding:6px 0 8px;
margin-top:4px;
border-top:1px dashed var(--line);
}

.navbar.pp-open .nav-links{
display:flex;
}

.nav-links a{
font-size:14px;
padding:11px 12px;
border-radius:8px;
white-space:normal;
}

.nav-links a.active{
background:rgba(201,58,46,.09);
box-shadow:none;
border-left:3px solid var(--red);
}

.hero{
padding:30px 18px 30px 34px;
}

.hero::before{
left:18px;
}

.hero h1{
font-size:26px;
}

.hero p{
font-size:14.5px;
margin-bottom:24px;
}

.hero-meta{
font-size:10.5px;
margin-bottom:22px;
}

.hero-badge{
font-size:11px;
}

.hero-tool{
padding:26px 16px 26px 30px;
}

.hero-tool::before{
left:16px;
}

.hero-tool h1{
font-size:21px;
}

.hero-tool p{
font-size:14px;
}

.section{
margin-top:44px;
}

.section-title{
font-size:20px;
}

h2{
font-size:19px;
}

h3{
font-size:16.5px;
}

p,
li{
font-size:14px;
line-height:1.65;
}

input,
select,
textarea{
font-size:16px !important;
}

.grid,
.related-grid{
gap:12px;
grid-template-columns:1fr 1fr;
}

.card,
.content-section,
.calc-card{
padding:18px 15px;
}

.card h3{
font-size:16px;
}

.card p,
.related-card span{
font-size:13px;
}

.go{
font-size:13.5px;
}

.btn{
padding:10px;
font-size:13.5px;
}

.tool-list li{
font-size:12.5px;
}

.form-grid{
grid-template-columns:1fr;
gap:12px;
}

.btn-primary{
padding:13px;
font-size:15px;
}

.result-box{
padding:22px 12px 18px;
}

.result-extra{
font-size:13px;
}

.error-box{
font-size:13.5px;
}

.content-section p,
.content-section li{
font-size:13.5px;
}

.formula{
font-size:13px;
padding:12px 12px;
}

table{
display:block;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

.related-grid .related-card{
padding:14px;
}

.related-card strong{
font-size:14px;
padding-right:16px;
}

.faq-item summary{
font-size:14px;
padding:13px 14px;
}

.faq-item p{
font-size:13.5px;
padding:0 14px 15px;
}

.cta{
padding:28px 18px;
}

.cta h2{
font-size:20px;
}

.cta p{
font-size:13.5px;
}

.footer-top,
.footer-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.footer-brand{
grid-column:1 / -1;
}

.footer-brand p,
.footer-col a{
font-size:13px;
}

.copyright{
font-size:11px;
}

.pp-fab-wrap{
right:12px;
bottom:12px;
}

.pp-fab{
width:41px;
height:41px;
font-size:16px;
}

}

@media(max-width:420px){

.grid,
.related-grid,
.footer-top,
.footer-grid{
grid-template-columns:1fr;
}

.hero h1{
font-size:23px;
}

.nav-links a{
font-size:12px;
padding:5px 8px;
}

}