/* =========================================================
   Whatispercent — Unified Stylesheet
   Homepage + Calculation Pages
   Light/Dark + Responsive
   ========================================================= */

:root{
    --purple:#6743ef;
    --purple-dark:#5632df;
    --purple-soft:#f1edff;
    --blue:#376cf2;
    --green:#23964e;
    --orange:#ed7924;

    --ink:#17203a;
    --text:#3f4a61;
    --muted:#657087;
    --line:#e3e7ef;
    --line-soft:#edf0f4;
    --bg:#f6f8fc;
    --card:#fff;

    --radius:12px;
    --shadow:0 8px 24px rgba(39,52,90,.07);

    --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}

html{
    scroll-behavior:smooth;
    color-scheme:light;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

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

button,input{font:inherit}

.container{
    width:min(1160px,calc(100% - 40px));
    margin:auto;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.nav-wrap{
    min-height:72px;
    display:flex;
    align-items:center;
    gap:28px;
}

/* Logo */
.logo{
    display:flex;
    align-items:center;
    gap:11px;
    flex:0 0 auto;
    color:var(--ink);
    font-size:21px;
    font-weight:800;
    letter-spacing:-.04em;
    white-space:nowrap;
}

.logo-mark{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:linear-gradient(135deg,#7650f6,#5934dc);
    color:#fff;
    box-shadow:0 6px 15px rgba(103,67,239,.22);
}

.logo-percent{
    font-size:22px;
    font-weight:900;
    line-height:1;
}

.logo-text{color:var(--ink)}
.logo-text span{color:var(--purple)}

/* Desktop navigation */
.desktop-nav{
    display:flex;
    align-items:center;
    gap:25px;
    margin-left:auto;
    margin-right:4px;
    font-size:15px;
    font-weight:650;
}

.desktop-nav a{
    position:relative;
    display:flex;
    align-items:center;
    height:72px;
    color:#59647a;
    white-space:nowrap;
    transition:color .2s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active{color:var(--purple)}

.desktop-nav a.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:17px;
    height:2px;
    border-radius:3px;
    background:var(--purple);
}

/* Header actions */
.nav-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}

.theme-toggle{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid #dfe3eb;
    border-radius:10px;
    background:#fff;
    color:#4e5a70;
    cursor:pointer;
    transition:.2s ease;
}

.theme-toggle:hover{
    background:var(--purple-soft);
    border-color:#d3caff;
    color:var(--purple);
}

.theme-icon{
    font-size:19px;
    line-height:1;
}

.nav-calculator{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 17px;
    border-radius:9px;
    color:#fff;
    background:linear-gradient(135deg,#7650f6,#5934dc);
    font-size:14px;
    font-weight:750;
    box-shadow:0 5px 14px rgba(103,67,239,.20);
    transition:.2s ease;
}

.nav-calculator:hover{
    color:#fff;
    transform:translateY(-1px);
}

/* Hamburger */
.menu-btn{
    width:40px;
    height:40px;
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    padding:0;
    border:1px solid #dfe3eb;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
}

.menu-btn span{
    width:18px;
    height:2px;
    display:block;
    border-radius:3px;
    background:#4e5a70;
    transition:.2s ease;
}

.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
    display:none;
    padding:8px 18px 18px;
    background:#fff;
    border-top:1px solid var(--line-soft);
}

.mobile-nav.open{
    display:flex;
    flex-direction:column;
}

.mobile-nav a{
    padding:14px 4px;
    border-bottom:1px solid var(--line-soft);
    color:#465168;
    font-size:16px;
    font-weight:650;
}

.mobile-nav a:hover{color:var(--purple)}

.mobile-nav .mobile-calculator{
    margin-top:12px;
    border:0;
    border-radius:9px;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg,#7650f6,#5934dc);
}

/* =========================================================
   HOMEPAGE HERO
   ========================================================= */

.hero{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:32px 0 30px;
    background:linear-gradient(180deg,#fff 0,#f5f8ff 100%);
    border-bottom:1px solid #e9edf5;
}

.hero-content{position:relative;z-index:2}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#5b3be2;
    background:var(--purple-soft);
    border:1px solid #e0d9ff;
    border-radius:20px;
    padding:5px 11px;
    font-size:13px;
    font-weight:800;
}

.hero h1{
    margin:11px 0 8px;
    font-size:40px;
    line-height:1.18;
    letter-spacing:-.045em;
}

.hero p{
    margin:0 0 19px;
    color:#556079;
    font-size:17px;
    line-height:1.6;
}

.orb{
    position:absolute;
    border-radius:50%;
    filter:blur(1px);
    opacity:.7;
}

.orb-1{width:230px;height:230px;background:#efe9ff;left:-100px;top:100px}
.orb-2{width:250px;height:250px;background:#eaf1ff;right:-100px;top:45px}

.hero-dots{
    position:absolute;
    width:65px;
    height:65px;
    background-image:radial-gradient(#b9abff 1.5px,transparent 1.5px);
    background-size:12px 12px;
    opacity:.4;
}

.dots-1{left:7%;top:52px}
.dots-2{right:7%;top:110px;background-image:radial-gradient(#9dbbff 1.5px,transparent 1.5px)}

/* =========================================================
   HOMEPAGE CALCULATOR
   ========================================================= */

.calculator-card{
    width:min(780px,100%);
    margin:auto;
    padding:20px 25px 14px;
    background:var(--card);
    border:1px solid #e2e6ef;
    border-radius:15px;
    box-shadow:var(--shadow);
    text-align:left;
}

.calc-row{
    display:grid;
    grid-template-columns:1fr 40px 28px 1fr 180px;
    gap:12px;
    align-items:end;
}

.field>span{
    display:block;
    margin:0 0 5px 1px;
    font-size:14px;
    font-weight:800;
}

.input-shell{
    height:42px;
    border:1px solid #d1d6e1;
    border-radius:8px;
    background:#fff;
}

.input-shell input{
    width:100%;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    padding:0 12px;
    color:var(--ink);
    font-size:17px;
    font-weight:700;
}

.input-shell:focus-within{
    border-color:#8b76ee;
    box-shadow:0 0 0 3px rgba(103,67,239,.10);
}

.percent-chip{
    height:42px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#efecff;
    color:#6240e9;
    font-weight:900;
}

.of-label{
    text-align:center;
    padding-bottom:12px;
    font-size:14px;
    font-weight:800;
}

.calculate-btn{
    height:42px;
    border:0;
    border-radius:8px;
    background:linear-gradient(135deg,#7147f5,#5d38e7);
    color:#fff;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(101,64,237,.20);
}

.calculate-btn span{
    margin-left:6px;
    font-size:16px;
}

.try-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:10px;
    font-size:13px;
}

.try-row b{font-size:13px}
.try-row a{color:#5434dd;font-weight:750}
.try-row i{width:1px;height:12px;background:#d9dce6}

/* =========================================================
   FEATURE STRIP
   ========================================================= */

.feature-strip{
    background:#fff;
    border-bottom:1px solid #e8ebf2;
}

.features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:14px 12px;
}

.feature{
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 22px;
    border-right:1px solid #edf0f4;
}

.feature:last-child{border:0}

.feature-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    font-size:18px;
    font-weight:900;
}

.purple{background:#eee9ff;color:#6742ec}
.green{background:#e6f6eb;color:#2d9b5d}
.blue{background:#e8f0ff;color:#3976e8}
.orange{background:#fff0e3;color:#ef7924}

.feature strong{
    display:block;
    font-size:15px;
}

.feature p{
    margin:2px 0 0;
    color:#657087;
    font-size:14px;
    line-height:1.4;
}

/* =========================================================
   HOMEPAGE CONTENT CARDS
   ========================================================= */

.intro-card,
.how-card{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    margin-top:14px;
    padding:20px 22px;
    background:#fff;
    border:1px solid #e1e6ef;
    border-radius:10px;
}

.small-label{
    color:#6842ed;
    font-size:12px;
    font-weight:850;
    letter-spacing:.08em;
}

.intro-card h2,
.how-card h2,
.uses-section>h2,
.popular-section h2,
.cheat-card h2,
.faq-card h2{
    margin:4px 0 8px;
    font-size:24px;
    line-height:1.3;
    letter-spacing:-.025em;
}

.intro-text{max-width:760px}

.intro-text p,
.how-main>p{
    margin:0;
    color:#505b72;
    font-size:16px;
    line-height:1.65;
}

.calculator-art{
    width:105px;
    height:105px;
    flex:0 0 105px;
    margin-left:auto;
    transform:rotate(9deg);
    padding:10px;
    background:linear-gradient(145deg,#25315b,#6574a4);
    border-radius:11px;
    box-shadow:8px 8px 18px rgba(23,35,75,.18);
}

.calc-screen{
    height:25px;
    border-radius:5px;
    background:#c6cad5;
    color:#27314e;
    text-align:right;
    padding:2px 5px;
    font:800 12px monospace;
}

.calc-keys{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;
    margin-top:6px;
}

.calc-keys span{
    background:#1e2b58;
    color:#fff;
    border-radius:3px;
    text-align:center;
    font-size:8px;
    padding:3px;
}

.how-card{align-items:stretch}
.how-main{flex:1;padding-right:25px}

.formula-main{
    width:300px;
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:12px;
    padding:12px;
    background:#f1edff;
    border-radius:7px;
    color:#5634df;
    font-size:14px;
    text-align:center;
}

.formula-main strong{font-size:20px}
.formula-main span{font-weight:800}
.formula-main em{font-style:normal;color:#7455e8}

.example-box{
    width:300px;
    padding:14px;
    background:#fff;
    border:1px solid #e2e6ef;
    border-radius:9px;
    box-shadow:0 3px 10px rgba(40,52,93,.05);
}

.example-tag{
    display:inline-block;
    padding:3px 7px;
    background:#f0ecff;
    color:#6942ed;
    border-radius:5px;
    font-size:12px;
    font-weight:800;
}

.example-box h3{margin:8px 0;font-size:15px}
.example-box p{margin:5px 0;color:#34405b;font-size:14px}
.example-box>strong{display:block;margin-top:3px;color:#1e9b4b;font-size:25px}

/* =========================================================
   USES / POPULAR / FAQ
   ========================================================= */

.uses-section{
    padding:20px 0 5px;
    text-align:center;
}

.uses-section>h2{margin-bottom:12px}

.uses-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:11px;
}

.use-card{
    min-height:110px;
    padding:14px 13px;
    text-align:left;
    border:1px solid #e3e7ef;
    border-radius:9px;
}

.use-card>span{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    margin-bottom:7px;
    border-radius:7px;
    font-weight:900;
}

.use-card h3{margin:0;font-size:16px}
.use-card p{margin:4px 0 0;color:#5f6a80;font-size:14px;line-height:1.45}

.shopping{background:#faf7ff}
.shopping>span{background:#eee8ff;color:#6b42ed}
.finance{background:#f4fcf6}
.finance>span{background:#e4f5e8;color:#269a56}
.education{background:#f3f7ff}
.education>span{background:#e4edff;color:#3976e8}
.business{background:#fff8f1}
.business>span{background:#ffecd9;color:#ee7824}
.everyday{background:#fff6fa}
.everyday>span{background:#ffe8f1;color:#e9577e}

.popular-section{
    margin-top:14px;
    padding:14px;
    background:#fff;
    border:1px solid #e1e6ef;
    border-radius:10px;
}

.section-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.section-title-row h2{margin:0}
.section-title-row>a{font-size:14px;color:#6540e7;font-weight:800}

.popular-grid{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:8px;
}

.popular-grid a{
    position:relative;
    min-height:42px;
    padding:8px;
    border:1px solid #edf0f4;
    border-radius:7px;
}

.popular-grid b,
.popular-grid span{
    display:block;
    font-size:13px;
}

.popular-grid span{
    margin-top:1px;
    color:#5f687e;
}

.popular-grid i{
    position:absolute;
    right:7px;
    top:11px;
    color:#6941ec;
    font-size:14px;
    font-style:normal;
}

.bottom-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:14px;
    margin:14px 0 16px;
}

.cheat-card,
.faq-card{
    padding:15px;
    background:#fff;
    border:1px solid #e1e6ef;
    border-radius:10px;
}

.formula-list{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.formula-list div{
    display:grid;
    grid-template-columns:140px 1fr;
    border:1px solid #edf0f4;
    font-size:14px;
}

.formula-list b{
    padding:7px;
    background:#f2eeff;
    color:#5d3be1;
}

.formula-list span{
    padding:7px;
    color:#59647a;
}

.faq-card details{
    margin-top:7px;
    border:1px solid #e6e9ef;
    border-radius:6px;
}

.faq-card summary{
    padding:8px 10px;
    font-size:15px;
    font-weight:750;
    cursor:pointer;
    list-style:none;
}

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

.faq-card p{
    margin:0;
    padding:0 10px 9px;
    color:#657087;
    font-size:14px;
    line-height:1.6;
}

/* =========================================================
   CALCULATION PAGE
   ========================================================= */

.result-page{padding:18px 0 28px}

.breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 11px;
    color:#6a7387;
    font-size:13px;
}

.breadcrumb a{color:#4f3be0}

.answer-card{
    min-height:175px;
    display:grid;
    grid-template-columns:115px 1fr 130px;
    align-items:center;
    padding:24px 50px;
    background:#fff;
    border:1px solid #e1e6ef;
    border-radius:12px;
    box-shadow:var(--shadow);
}

.answer-icon{
    width:68px;
    height:68px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f1eaff;
    border:1px solid #ded1ff;
    color:#6841ed;
    font-size:34px;
    font-weight:900;
    box-shadow:0 0 0 10px #f8f5ff;
}

.answer-copy{text-align:center}

.answer-copy h1{
    margin:0 0 4px;
    font-size:30px;
    line-height:1.25;
    letter-spacing:-.035em;
}

.answer-copy p{
    margin:0;
    color:#4f5970;
    font-size:17px;
}

.answer-copy>strong{
    display:block;
    margin-top:2px;
    color:#6540e8;
    font-size:68px;
    line-height:1.05;
    letter-spacing:-.05em;
}

.verified{
    justify-self:end;
    width:82px;
    min-height:76px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#edf9f0;
    color:#21934c;
    text-align:center;
}

.verified span{font-size:18px;font-weight:900}
.verified b{font-size:12px}
.verified small{font-size:11px}

.result-columns{
    display:grid;
    grid-template-columns:1fr 1.15fr .95fr;
    gap:14px;
    margin-top:14px;
}

.result-box{
    min-height:160px;
    padding:15px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
}

.result-box h2,
.table-card h2,
.related-card h2,
.related-section h2{
    margin:0 0 13px;
    font-size:21px;
    line-height:1.3;
    letter-spacing:-.02em;
}

.math-lines{padding-top:2px}

.math-lines p{
    margin:0 0 14px;
    font-family:Georgia,serif;
    font-size:17px;
    line-height:1.7;
}

.math-lines .final{
    color:#18934a;
    font-weight:800;
}

.steps .step{
    display:flex;
    gap:9px;
    margin:0 0 11px;
    color:#333d54;
    font-size:15px;
    line-height:1.55;
}

.step>b{
    width:19px;
    height:19px;
    flex:0 0 19px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f0ebff;
    color:#6340e8;
    font-size:11px;
}

.step strong{
    display:block;
    margin-top:2px;
    color:#101936;
    font-size:16px;
}

.formula-display{
    margin:18px 0;
    text-align:center;
    font-size:15px;
}

.formula-display b{display:block;margin-bottom:5px}
.formula-display strong{display:block;line-height:1.5;font-size:18px}
.formula-display i{color:#7659dc;font-style:normal}

.formula-box p{
    margin:5px 0;
    color:#4e5970;
    font-size:15px;
    line-height:1.7;
}

/* =========================================================
   1%–100% LINKED TABLE
   ========================================================= */

.table-card{
    margin-top:18px;
    padding:24px;
    background:linear-gradient(145deg,#fff,#faf9ff);
    border:1px solid #e5e0f8;
    border-radius:16px;
    box-shadow:0 8px 24px rgba(45,35,95,.06);
}

.table-card h2{
    margin:0 0 6px;
    color:#17203a;
    font-size:22px;
}

.table-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.table-heading p{
    margin:4px 0 0;
    color:#697389;
    font-size:14px;
    line-height:1.5;
}

.table-heading>a{
    padding:7px 12px;
    border:1px solid #ddd5ff;
    border-radius:7px;
    color:#6540df;
    background:#f7f4ff;
    font-size:13px;
    font-weight:750;
}

.percent-table{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.table-col{
    overflow:hidden;
    padding:0;
    background:#fff;
    border:1px solid #e8eaf0;
    border-radius:10px;
    box-shadow:0 3px 10px rgba(30,40,70,.035);
}

.th{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    padding:10px 13px;
    background:#f5f2ff;
    border-bottom:1px solid #e3ddf7;
    color:#51427e;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.tr{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    align-items:center;
    min-height:34px;
    padding:5px 13px;
    color:#273149;
    background:#fff;
    border-bottom:1px solid #f0f1f5;
    font-size:14px;
    font-weight:550;
    text-decoration:none;
    transition:.18s ease;
}

.tr:last-child{border-bottom:0}

.tr span:first-child{
    color:#5e6678;
    font-weight:700;
}

.tr span:last-child{
    color:#252d42;
    font-weight:650;
    text-align:right;
}

.tr:hover{
    background:#f4f1ff;
    color:#5d3be1;
    transform:translateX(2px);
}

.tr:hover span:first-child,
.tr:hover span:last-child{color:#5d3be1}

.tr.active{
    position:relative;
    background:linear-gradient(135deg,#7044f0,#5b38df);
    color:#fff;
    font-weight:800;
    box-shadow:0 4px 10px rgba(104,66,237,.22);
}

.tr.active::before{
    content:"";
    position:absolute;
    left:0;
    top:5px;
    bottom:5px;
    width:3px;
    border-radius:0 4px 4px 0;
    background:#fff;
}

.tr.active span:first-child,
.tr.active span:last-child{color:#fff}

.tr.active:hover{
    background:linear-gradient(135deg,#7044f0,#5b38df);
    transform:none;
}

/* =========================================================
   RELATED
   ========================================================= */

.related-card{
    margin-top:14px;
    padding:13px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#eaf8ed;
    border:1px solid #d8f0dd;
    border-radius:10px;
}

.related-card h2{
    margin:0 0 3px;
    color:#248b49;
}

.related-card p{
    margin:0;
    color:#526b5a;
    font-size:14px;
}

.cart-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#d9f0df;
    font-size:18px;
}

.related-section{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:14px;
    margin-top:14px;
}

.related-list details{
    margin-bottom:7px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:7px;
}

.related-list summary{
    padding:9px 11px;
    font-size:15px;
    font-weight:750;
    cursor:pointer;
    list-style:none;
}

.related-list summary::-webkit-details-marker{display:none}

.related-list p{
    margin:0;
    padding:0 11px 9px;
    color:#667086;
    font-size:14px;
    line-height:1.55;
}

.related-box{
    padding:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
}

.related-box h2{margin-bottom:8px}

.related-box>a{
    display:block;
    margin:7px 0;
    color:#4d3de0;
    font-size:14px;
}

.related-box .more-btn{
    display:block;
    margin-top:12px;
    padding:7px;
    border:1px solid #dfe4ed;
    border-radius:7px;
    color:#4f5b72;
    text-align:center;
    font-weight:800;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
    margin-top:42px;
    padding:48px 0 18px;
    background:#11162a;
    color:#fff;
    border-top:1px solid #252c45;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:55px;
}

.footer-about{max-width:340px}

.footer-logo{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:21px;
    font-weight:800;
}

.footer-logo .logo-mark{
    width:36px;
    height:36px;
    flex-basis:36px;
}

.footer-logo>span:last-child,
.footer-logo>span:last-child>span{color:#fff}

.footer-about p{
    max-width:310px;
    margin:14px 0 0;
    color:#aeb6ca;
    font-size:15px;
    line-height:1.7;
}

.footer-col h3{
    margin:0 0 15px;
    color:#fff;
    font-size:16px;
    font-weight:750;
}

.footer-col a{
    display:block;
    margin:9px 0;
    color:#aeb6ca;
    font-size:14px;
    line-height:1.5;
    transition:.2s ease;
}

.footer-col a:hover{
    color:#a68cff;
    transform:translateX(2px);
}

.socials{
    display:flex;
    gap:9px;
    margin-top:18px;
}

.socials a{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid #303850;
    border-radius:9px;
    background:#181e34;
    color:#c4cbe0;
    font-size:14px;
    transition:.2s ease;
}

.socials a:hover{
    color:#fff;
    border-color:#7650f6;
    background:#6743ef;
}

.footer-bottom{
    margin-top:35px;
    padding-top:18px;
    border-top:1px solid #292f46;
    color:#8993aa;
    text-align:center;
    font-size:14px;
    line-height:1.5;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){
    .desktop-nav{gap:16px}
    .features{padding-inline:0}
    .feature{padding-inline:10px}
    .popular-grid{grid-template-columns:repeat(4,1fr)}

    .calc-row{
        grid-template-columns:1fr 42px 22px 1fr 145px;
    }

    .footer-grid{
        grid-template-columns:2fr 1fr 1fr 1fr;
        gap:22px;
    }

    .percent-table{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .answer-card{padding-inline:25px}
    .result-columns{grid-template-columns:1fr 1fr}
    .formula-box{grid-column:1/-1}
    .related-section{grid-template-columns:1fr 270px}
}@media(max-width:700px){
.container{width:calc(100% - 28px)}

    .nav-wrap{min-height:64px}

    .desktop-nav,
    .nav-calculator{display:none}

    .nav-actions{margin-left:auto}
    .menu-btn{display:flex}

    .logo{font-size:20px}
    .logo-mark{width:36px;height:36px;flex-basis:36px}

    .hero{padding:25px 0 22px}
    .hero h1{font-size:32px}
    .hero p{font-size:16px}
    .hero-dots{display:none}

    .calculator-card{padding:17px;border-radius:13px}

    .calc-row{
        grid-template-columns:1fr 42px;
        gap:9px;
    }

    .percent-chip{
        grid-column:2;
        grid-row:1;
    }

    .calc-row .field:nth-of-type(2){grid-column:1/3}
    .calculate-btn{grid-column:1/3}

    .try-row{
        overflow:auto;
        justify-content:flex-start;
        white-space:nowrap;
    }

    .features{
        grid-template-columns:1fr 1fr;
        padding:6px;
    }

    .feature{
        border-right:0;
        border-bottom:1px solid #edf0f4;
        padding:10px 7px;
    }

    .feature:nth-child(odd){border-right:1px solid #edf0f4}
    .feature:nth-last-child(-n+2){border-bottom:0}

    .feature-icon{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .intro-card,
    .how-card{
        display:block;
        padding:17px;
    }

    .calculator-art{
        margin:16px auto 0;
    }

    .how-main{padding:0}

    .example-box{
        width:100%;
        margin-top:14px;
    }

    .formula-main{
        width:100%;
        font-size:13px;
    }

    .uses-grid{grid-template-columns:1fr 1fr}
    .use-card{min-height:115px}

    .popular-grid{grid-template-columns:1fr 1fr}

    .bottom-grid{grid-template-columns:1fr}
    .formula-list{grid-template-columns:1fr}
    .formula-list div{grid-template-columns:1fr}

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:30px 22px;
    }

    .footer-about{grid-column:1/-1}

    .footer{padding-top:38px}

    .result-page{padding-top:12px}
    .breadcrumb{font-size:12px;white-space:nowrap;overflow:hidden}

    .answer-card{
        grid-template-columns:1fr;
        gap:16px;
        text-align:center;
        padding:22px 16px;
    }

    .answer-icon{margin:auto}

    .answer-copy h1{font-size:25px}
    .answer-copy p{font-size:16px}
    .answer-copy>strong{font-size:54px}

    .verified{
        justify-self:center;
        width:110px;
        min-height:44px;
        flex-direction:row;
        gap:5px;
    }

    .verified span{font-size:15px}
    .verified b{font-size:11px}
    .verified small{font-size:10px}

    .result-columns{grid-template-columns:1fr}
    .formula-box{grid-column:auto}

    .result-box{min-height:auto}

    .table-card{padding:18px}

    .table-heading{display:block}
    .table-heading>a{
        display:inline-block;
        margin-top:10px;
    }

    .percent-table{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .related-section{grid-template-columns:1fr}
    .related-box{order:-1}

}
@media(max-width:520px){
.percent-table{grid-template-columns:1fr}

}
@media(max-width:430px){
.nav-actions{gap:7px}

    .theme-toggle,
    .menu-btn{
        width:37px;
        height:37px;
    }

    .logo{font-size:18px}

    .logo-mark{
        width:34px;
        height:34px;
        flex-basis:34px;
        border-radius:9px;
    }

    .logo-percent{font-size:20px}

    .hero h1{font-size:29px}

    .uses-grid{grid-template-columns:1fr}
    .popular-grid{grid-template-columns:1fr}

    .footer-grid{grid-template-columns:1fr}
    .footer-about{grid-column:auto}

}
@media(max-width:390px){
.hero h1{font-size:27px}
    .answer-copy h1{font-size:23px}
    .answer-copy>strong{font-size:50px}

}

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

/* =========================================================
   CHEAT SHEET + FAQ
   SAME WIDTH AS MAIN CONTENT CONTAINER
   ========================================================= */

.bottom-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 14px;

    width: 100%;
    max-width: 1160px;
    margin: 14px auto 16px;

    box-sizing: border-box;
}

.cheat-card,
.faq-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.formula-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.formula-list div {
    min-width: 0;
    box-sizing: border-box;
}

.formula-list b,
.formula-list span {
    min-width: 0;
    overflow-wrap: break-word;
}


/* Mobile */
@media (max-width: 700px) {

    .bottom-grid {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr;
        margin: 14px 0 16px;
    }

    .cheat-card,
    .faq-card {
        width: 100%;
    }
}

/* =========================================================
   SHARE CALCULATION
   ========================================================= */

.share-calculation {
    width: 100%;
    max-width: 1160px;
    margin: 16px auto;
    padding: 18px 20px;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #e1e6f0;
    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    box-shadow: 0 4px 16px rgba(31, 41, 70, 0.05);
}


/* Heading */

.share-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
}

.share-heading > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.share-heading strong {
    font-size: 16px;
    line-height: 1.3;
    color: #111b3a;
}

.share-heading span:not(.share-icon) {
    font-size: 13px;
    color: #69758d;
}


/* Share icon */

.share-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #f0ebff;
    color: #6542e8;

    font-size: 20px;
    font-weight: 700;
}


/* Buttons */

.share-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.share-btn {
    height: 40px;
    padding: 0 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 9px;
    border: 1px solid #e0e5ef;

    background: #ffffff;
    color: #26314d;

    text-decoration: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.share-btn span {
    font-size: 16px;
    line-height: 1;
}

.share-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 41, 70, .08);
}


/* Facebook */

.share-facebook:hover {
    background: #eef4ff;
    border-color: #b8cdf7;
    color: #1877f2;
}


/* X */

.share-twitter:hover {
    background: #f3f4f6;
    border-color: #cdd2da;
    color: #111827;
}


/* Telegram */

.share-telegram:hover {
    background: #eef8ff;
    border-color: #b7dcf5;
    color: #168acd;
}


/* WhatsApp */

.share-whatsapp:hover {
    background: #effcf4;
    border-color: #b8e5ca;
    color: #159447;
}


/* Copy */

.share-copy:hover {
    background: #f2efff;
    border-color: #cfc4ff;
    color: #5c3be4;
}


/* Copy success */

.copy-message {
    display: none;
    position: absolute;

    padding: 7px 11px;

    border-radius: 7px;
    background: #17894c;
    color: #ffffff;

    font-size: 12px;
    font-weight: 600;
}

.share-calculation.copied .copy-message {
    display: block;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .share-calculation {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .share-heading {
        justify-content: center;
    }

    .share-buttons {
        justify-content: center;
    }

    .share-btn {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 110px;
    }
}


@media (max-width: 480px) {

    .share-calculation {
        margin: 12px 0;
        padding: 14px;
        border-radius: 12px;
    }

    .share-heading {
        justify-content: flex-start;
    }

    .share-heading strong {
        font-size: 15px;
    }

    .share-heading span:not(.share-icon) {
        font-size: 12px;
    }

    .share-btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        height: 42px;
        padding: 0 8px;
        font-size: 12px;
    }
}