/*
Theme Name: Percent Studio
Description: Fast, accessible percentage tools and guides with native WordPress editing.
Version: 1.0.1
Author: Percentage Calculator
License: GPL-2.0-or-later
*/
:root{--ink:#132c33;--muted:#52676b;--paper:#f7faf8;--line:#dbe5df;--mint:#c6f56e;--green:#174b3e;--white:#fff;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.7 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--green);text-underline-offset:4px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid #598b16;outline-offset:4px}h1,h2,h3{line-height:1.13;letter-spacing:-.045em}h1{font-size:clamp(2.4rem,5.8vw,4.8rem);margin:18px 0 24px;max-width:850px}h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:0 0 22px}h3{font-size:1.35rem}p{margin:0 0 1.3em}.wrap{width:min(1160px,calc(100% - 44px));margin:auto}.site-header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20}.navrow{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:88px}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);font-size:1.1rem;font-weight:800;line-height:1.15;letter-spacing:-.04em}.brand small{display:block;font-size:11px;letter-spacing:.13em;font-weight:600;margin-top:6px;text-transform:uppercase}.logo{width:44px;height:44px;display:grid;place-items:center;background:var(--ink);border-radius:14px;color:var(--mint);font-size:28px;box-shadow:3px 3px 0 var(--mint)}nav{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:650}nav a{text-decoration:none;color:var(--ink)}nav a:hover{color:#48720e}.navgroup{position:relative}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.navgroup summary:after{content:'⌄';margin-left:8px}.dropdown{position:absolute;top:35px;left:-22px;min-width:265px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 15px 40px #132c3317;padding:12px;display:grid;gap:2px}.dropdown a{padding:9px 12px;border-radius:8px}.dropdown a:hover{background:#edf6e4}.mobile-toggle{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border:1px solid var(--ink);border-radius:12px;background:var(--ink);color:white;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #132c3314}.btn.mint{background:var(--mint);color:var(--ink);border-color:var(--mint)}.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}.hero{padding:64px 0 80px;background:radial-gradient(ellipse at 90% 20%,#d9efdf 0,transparent 45%),#edf5ef;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr .8fr;gap:55px;align-items:center}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;text-transform:uppercase;display:flex;align-items:center;gap:9px}.eyebrow:before{content:'';width:8px;height:8px;background:#629e24;border-radius:50%}.hero p{font-size:18px;color:#415a5c;max-width:590px}.hero h1 span{color:#397650}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 20px}.micro{font-size:12px!important;color:var(--muted)!important}.hero-art{background:var(--ink);padding:30px;color:white;border-radius:30px;transform:rotate(2deg);position:relative;box-shadow:0 24px 0 -10px #cadecf}.hero-art .mini-label{color:#aec5be;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.big-equation{font-size:clamp(2rem,4vw,3.2rem);font-weight:750;letter-spacing:-.06em;margin:22px 0}.big-equation b{color:var(--mint)}.square-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:25px 0}.square-grid i{aspect-ratio:1;border-radius:3px;background:#355259}.square-grid i:nth-child(-n+25){background:var(--mint)}.art-bottom{display:flex;justify-content:space-between;color:#d2ded9;font-size:12px}.section{padding:72px 0}.section.white{background:#fff}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}.section-head p{margin:0;color:var(--muted);max-width:420px}.badge{font-size:11px;text-transform:uppercase;letter-spacing:.12em;background:#e9f2e8;border-radius:30px;padding:7px 11px;font-weight:750}.calculator{background:white;border:1px solid var(--line);border-radius:26px;padding:12px;box-shadow:0 16px 50px #163c2d0a}.calc-tabs{display:flex;gap:7px;flex-wrap:wrap;padding:10px;border-bottom:1px solid var(--line)}.calc-tabs button{background:transparent;border:0;border-radius:10px;padding:10px 13px;cursor:pointer;color:var(--muted);font-weight:650;font-size:13px}.calc-tabs button[aria-pressed=true]{background:var(--ink);color:#fff}.calc-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;padding:28px}.calc-form h3{font-size:1.65rem;margin:0 0 8px}.calc-form p{font-size:14px;color:var(--muted)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}input,select,textarea{width:100%;border:1px solid #b5c7bf;border-radius:10px;padding:13px;color:var(--ink);background:#fff}input[type=number]{font-size:22px;font-weight:650;min-width:0}.form-actions{display:flex;gap:10px;margin-top:23px}.example-btn{background:none;border:0;padding:10px 0;color:var(--green);text-decoration:underline;cursor:pointer;font-size:13px}.result{padding:28px;background:#edf5ef;border-radius:18px;display:flex;flex-direction:column;min-height:280px;justify-content:center}.result-caption{font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:700}.result-value{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.05em;font-weight:800;line-height:1.2;margin:12px 0;overflow-wrap:anywhere}.result-steps{font-size:14px;color:#405c51}.result-note{font-size:12px;color:var(--muted);margin-top:15px}.result.error{background:#fff0e9;color:#852f11}.result.error .result-steps{color:#852f11}.precision{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:12px}.precision select{width:auto;padding:5px 10px;font-size:12px}.precision label{margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{border:1px solid var(--line);background:white;border-radius:20px;padding:28px;position:relative;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 15px 30px #132c330d}.card a{text-decoration:none;color:var(--ink)}.card h3{margin:20px 0 13px}.card p{font-size:14px;color:var(--muted);margin:0 0 18px}.card .arrow{font-size:23px;color:var(--green)}.icon{display:grid;place-items:center;width:42px;height:42px;background:#edf5e4;border-radius:12px;font-size:21px;font-weight:800}.content-grid{display:grid;grid-template-columns:230px 1fr;gap:55px}.toc{position:sticky;top:25px;align-self:start;font-size:13px;border-left:2px solid var(--line);padding-left:18px}.toc strong{font-size:11px;letter-spacing:.1em;text-transform:uppercase}.toc a{display:block;padding:8px 0;color:var(--muted);text-decoration:none}.prose{max-width:820px}.prose h2{margin-top:55px;font-size:2rem}.prose h2:first-child{margin-top:0}.prose h3{margin:30px 0 14px}.prose p,.prose li{color:#3c555a}.prose li{margin-bottom:10px}.formula{background:var(--ink);color:var(--mint);font-family:ui-monospace,monospace;padding:22px;border-radius:14px;margin:25px 0;overflow-wrap:anywhere;font-size:16px}.callout{border-left:4px solid #6da732;background:#edf5e9;padding:22px 25px;border-radius:0 14px 14px 0;margin:25px 0}.callout p:last-child{margin:0}.table-scroll{overflow-x:auto;margin:25px 0;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}th{background:#edf5ef;font-weight:750}td,th{padding:16px;border-bottom:1px solid var(--line);vertical-align:top}tr:last-child td{border-bottom:0}.faq details{border-bottom:1px solid var(--line);padding:20px 0}.faq summary{font-size:18px;font-weight:700;padding-right:25px;position:relative}.faq summary:after{content:'+';position:absolute;right:0}.faq details[open] summary:after{content:'−'}.faq details p{margin:15px 0 0;font-size:16px}.end-cta{background:var(--ink);border-radius:28px;padding:45px;color:#fff;display:flex;gap:35px;justify-content:space-between;align-items:center}.end-cta h2{max-width:600px}.end-cta p{color:#c5d5cd;margin:0}.end-cta .btn{flex-shrink:0}.site-footer{background:#102b30;color:#e0ece4;padding:60px 0 25px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}.site-footer .brand{color:white}.site-footer p{font-size:13px;color:#abc1b8;margin-top:25px;max-width:310px}.site-footer h3{font-size:13px;letter-spacing:0;margin:0 0 15px}.site-footer a{color:#c5d7ce;text-decoration:none;font-size:13px}.site-footer ul{list-style:none;padding:0;margin:0}.site-footer li{margin:8px 0}.footer-bottom{border-top:1px solid #365057;margin-top:40px;padding-top:20px;display:flex;gap:25px;justify-content:space-between;font-size:12px;color:#abc1b8}.article-hero{padding:50px 0;background:#edf5ef}.article-hero h1{font-size:clamp(2.2rem,4.6vw,3.8rem);max-width:950px}.article-hero p{max-width:740px;color:var(--muted);font-size:18px}.breadcrumbs{font-size:12px;margin-bottom:25px}.breadcrumbs a{color:var(--muted)}.article-body{max-width:850px}.article-body>h2{margin-top:45px}.article-meta{font-size:12px;color:var(--muted)}.skip-link{position:absolute;top:-100px;background:white;z-index:100;padding:15px}.skip-link:focus{top:0}.hp{position:absolute;left:-10000px}.feedback-form{max-width:650px}.feedback-form label{margin-top:20px}.feedback-form .btn{margin-top:20px}.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}code{overflow-wrap:anywhere}.home .section#calculate{margin-top:-35px;padding-top:0;position:relative;z-index:2}.home #calculate .section-head{background:var(--paper);padding-top:45px;border-radius:25px 25px 0 0}button{min-height:42px}a:hover{text-decoration:underline}.btn:hover,.brand:hover{text-decoration:none}
@media(max-width:950px){nav{gap:16px}.hero-grid{gap:28px}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}.content-grid{grid-template-columns:180px 1fr;gap:30px}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.wrap{width:calc(100% - 32px)}.navrow{min-height:76px;flex-wrap:wrap;padding:15px 0}.mobile-toggle{display:block;background:var(--ink);color:white;border:0;border-radius:9px;padding:8px 14px;font-size:14px}nav{display:none;flex:0 0 100%;align-items:stretch;gap:0;flex-direction:column;border-top:1px solid var(--line);padding-top:10px}nav.is-open{display:flex}nav>a,nav summary{padding:12px}nav .btn{margin-top:10px}.dropdown{position:static;box-shadow:none;min-width:0;background:#f3f7f2;margin:0 10px 8px}.hero{padding:40px 0 65px}.hero-grid{grid-template-columns:1fr;gap:30px}.hero h1{font-size:3rem}.hero-art{transform:none;padding:25px;max-width:440px;width:100%;margin:auto}.square-grid{gap:5px;margin:15px 0}.big-equation{margin:12px 0}.section{padding:48px 0}.section-head{display:block}.section-head p{margin-top:10px}.calc-layout{grid-template-columns:1fr;padding:17px;gap:20px}.calc-tabs{gap:3px;padding:7px}.calc-tabs button{flex:1 1 auto;font-size:12px;padding:9px}.result{min-height:230px}.field-row{gap:12px}.cards{gap:14px}.card{padding:20px}.content-grid{grid-template-columns:1fr;gap:30px}.toc{position:static;display:flex;gap:10px;flex-wrap:wrap;font-size:12px}.toc strong{flex-basis:100%}.toc a{padding:3px 5px}.end-cta{display:block;padding:28px}.end-cta .btn{margin-top:24px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:10px}.article-hero{padding:35px 0}.article-hero h1{font-size:2.6rem}.article-body{width:calc(100% - 36px)}.prose h2{font-size:1.75rem}.home #calculate .section-head{padding-top:30px}}
@media(max-width:430px){.hero h1{font-size:2.65rem}.cards{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}.brand{font-size:16px}.hero-actions .btn{flex:1}.calc-tabs button{font-size:11px}.footer-grid{gap:24px}.hero-art{padding:22px}.big-equation{font-size:2.5rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;transform:none!important}}
/* Compact tool-first hero */
.hero{padding-top:46px;padding-bottom:60px}.hero h1{font-size:clamp(2.7rem,4.4vw,3.8rem)}.hero-art{transform:rotate(1.5deg)}.hero-art .square-grid{max-width:250px;gap:4px}.hero-art .big-equation{font-size:2.8rem;line-height:1.15;margin:16px 0}.hero-art .art-bottom{margin-top:20px}.hero-art .mini-label{line-height:1.5}.hero-grid{grid-template-columns:1.1fr .85fr}.hero-art p{margin:0}.hero-art br{display:none}.hero-art .big-equation br{display:block}
@media(max-width:760px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:34px}.hero h1{font-size:2.7rem}.hero-art .square-grid{max-width:none;grid-template-columns:repeat(20,1fr);gap:3px}.hero-art{padding:24px}.hero-art .big-equation{font-size:2.3rem}.hero-art .mini-label{font-size:10px}.hero-art .big-equation br{display:none}.hero-art .art-bottom{margin-top:12px}}
.content-grid>*{min-width:0}.table-scroll{max-width:100%}.calc-form,.result{min-width:0}@media(max-width:760px){.content-grid{grid-template-columns:minmax(0,1fr)}}