/* ==========================================================================
   MEASURE & BUILD — SHARED STYLESHEET  v2.0.0
   REPLACES v1 entirely. Install once. Covers every calculator and every
   article page. Only add CSS later if a tool needs a control not listed here.

   1 Tokens · 2 Calculator shell · 3 Mode tabs · 4 Fields · 5 Advanced panel
   6 Repeatable pours · 7 Result panel · 8 Buttons · 9 Article layout
   10 Answer card / figures / TOC · 11 Formula + example · 12 Tables
   13 Callouts · 14 Cards · 15 FAQ · 16 Related · 17 Print
   ========================================================================== */


/* 1 ───────────────────────────────────────────────────────────── TOKENS ── */

.mab-calc,
.mab-article {
    --ink: #14201B;
    --ink-2: #1E2E28;
    --body: #414F49;
    --soft: #6B7A73;
    --faint: #93A099;
    --line: #DDE3DE;
    --line-2: #ECEFEA;
    --bg: #FFFFFF;
    --bg-2: #F7F9F6;
    --bg-3: #EFF3EE;
    --green: #1F6B4A;
    --green-2: #15523A;
    --green-pale: #E4F0E9;
    --amber: #C2790F;
    --amber-pale: #FDF2DF;
    --amber-ink: #8A5507;
    --red: #AF432A;
    --red-pale: #FAE8E2;
    --r: 12px;
    --r-2: 8px;
    --r-3: 5px;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --shadow-2: 0 2px 4px rgba(20, 32, 27, .06), 0 14px 40px -12px rgba(20, 32, 27, .18);
}


/* 2 ─────────────────────────────────────────────────── CALCULATOR SHELL ── */

.mab-calc {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-2);
    margin: 32px 0;
    overflow: hidden;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.mab-calc *,
.mab-calc *::before,
.mab-calc *::after {
    box-sizing: border-box
}


/* CRITICAL: author display rules (grid/flex/block) override the browser's
   default [hidden]{display:none}. Without this, every toggled field group
   renders at once. Keep this rule above everything that sets display. */

.mab-calc [hidden],
.mab-article [hidden] {
    display: none!important
}

.mab-calc__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--ink);
    color: #fff;
}

@media(min-width:640px) {
    .mab-calc__bar {
        padding: 17px 24px
    }
}

.mab-calc__title {
    font-size: 16px;
    font-weight: 650;
    margin: 0;
    color: #fff !important;
    letter-spacing: -.005em;
    line-height: 1.3
}

.mab-calc__title small {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: #A9B8B0;
    margin-top: 3px;
    letter-spacing: 0
}

.mab-calc__body {
    padding: 20px
}

@media(min-width:640px) {
    .mab-calc__body {
        padding: 24px
    }
}

.mab-switch {
    display: flex;
    background: rgba(255, 255, 255, .10);
    border-radius: var(--r-3);
    padding: 3px
}

.mab-switch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none
}

.mab-switch__label {
    font-size: 12.5px;
    font-weight: 600;
    color: #B9C7C0;
    padding: 6px 13px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s ease, color .14s ease;
}

.mab-switch__input:checked+.mab-switch__label {
    background: #fff;
    color: var(--ink)
}

.mab-switch__input:focus-visible+.mab-switch__label {
    outline: 2px solid #fff;
    outline-offset: 1px
}


/* 3 ────────────────────────────────────────────────────────── MODE TABS ── */

.mab-modes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 0 0 20px
}

@media(min-width:560px) {
    .mab-modes {
        grid-template-columns: repeat(4, 1fr)
    }
}

.mab-mode__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none
}

.mab-mode__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 13px 8px;
    background: var(--bg-2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-2);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--body);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
    user-select: none;
    min-height: 74px;
}

.mab-mode__label svg {
    display: block;
    width: 22px;
    height: 22px;
    opacity: .65
}

.mab-mode__label:hover {
    border-color: var(--faint)
}

.mab-mode__input:checked+.mab-mode__label {
    background: var(--green-pale);
    border-color: var(--green);
    color: var(--green-2)
}

.mab-mode__input:checked+.mab-mode__label svg {
    opacity: 1
}

.mab-mode__input:focus-visible+.mab-mode__label {
    outline: 2px solid var(--green);
    outline-offset: 2px
}


/* 4 ───────────────────────────────────────────────────────────── FIELDS ── */

.mab-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px
}

@media(min-width:520px) {
    .mab-grid--2 {
        grid-template-columns: repeat(2, 1fr)
    }
    .mab-grid--3 {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(min-width:780px) {
    .mab-grid--4 {
        grid-template-columns: repeat(4, 1fr)
    }
}

.mab-grid__full {
    grid-column: 1/-1
}

.mab-field {
    min-width: 0
}

.mab-field__label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--soft);
    margin: 0 0 6px;
    letter-spacing: .01em
}

.mab-field__control {
    position: relative;
    display: block
}

.mab-input {
    width: 100%;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: var(--r-2);
    padding: 12px 14px;
    line-height: 1.25;
    transition: border-color .14s ease, box-shadow .14s ease;
    -moz-appearance: textfield;
    font-variant-numeric: tabular-nums;
}

.mab-input::-webkit-outer-spin-button,
.mab-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.mab-input:hover {
    border-color: var(--faint)
}

.mab-input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-pale)
}

.mab-input.is-error {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-pale)
}

.mab-field--unit .mab-input {
    padding-right: 50px
}

.mab-field__unit {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 600;
    color: var(--faint);
    pointer-events: none;
    letter-spacing: .01em;
}

.mab-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%2393A099' stroke-width='1.6' d='M1 1.3 5.5 5.7 10 1.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
    font-size: 15px;
}

.mab-field__hint {
    font-size: 12px;
    color: var(--faint);
    margin: 6px 0 0;
    line-height: 1.45
}


/* 5 ────────────────────────────────────────────── ADVANCED DISCLOSURE ── */

.mab-adv {
    margin: 18px 0 0;
    border-top: 1px solid var(--line-2)
}

.mab-adv__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--soft);
    background: none;
    border: 0;
    padding: 14px 0 0;
    cursor: pointer;
    list-style: none;
    transition: color .14s ease;
}

.mab-adv__toggle::-webkit-details-marker {
    display: none
}

.mab-adv__toggle:hover {
    color: var(--green-2)
}

.mab-adv__toggle:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 3px
}

.mab-adv__toggle::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(-45deg);
    margin-top: -3px;
    transition: transform .16s ease;
}

.mab-adv[open] .mab-adv__toggle::before {
    transform: rotate(45deg);
    margin-top: 2px
}

.mab-adv__body {
    padding: 16px 0 2px
}


/* 6 ────────────────────────────────────────────────── REPEATABLE POURS ── */

.mab-pours {
    display: flex;
    flex-direction: column;
    gap: 0
}

.mab-pour {
    position: relative
}

.mab-pour__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px
}

.mab-pour__name {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0
}

.mab-pours .mab-pour:only-child .mab-pour__head {
    display: none
}

.mab-pour__remove {
    background: none;
    border: 0;
    color: var(--faint);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 4px;
    line-height: 1;
}

.mab-pour__remove:hover {
    color: var(--red);
    background: var(--red-pale)
}

.mab-pour+.mab-pour {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line)
}

.mab-pour__sum {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--green-2);
    margin: 10px 0 0;
    font-weight: 600
}

.mab-pours .mab-pour:only-child .mab-pour__sum {
    display: none
}

.mab-addrow {
    margin: 14px 0 0
}


/* 7 ──────────────────────────────────────────────────── RESULT PANEL ── */

.mab-out {
    margin: 22px 0 0
}

.mab-out[hidden] {
    display: none
}

.mab-out__hero {
    background: linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 100%);
    border-radius: var(--r-2) var(--r-2) 0 0;
    padding: 22px;
    color: #fff;
}

.mab-out__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8FA79A;
    margin: 0 0 8px
}

.mab-out__figure {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap
}

.mab-out__num {
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
    color: #fff;
    font-variant-numeric: tabular-nums
}

@media(min-width:560px) {
    .mab-out__num {
        font-size: 56px
    }
}

.mab-out__unit {
    font-size: 19px;
    font-weight: 600;
    color: #B7CCC0
}

.mab-out__note {
    font-size: 13.5px;
    color: #A9BFB4;
    margin: 12px 0 0;
    line-height: 1.55;
    max-width: 54ch
}

.mab-out__note strong {
    color: #fff;
    font-weight: 600
}

.mab-out__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--r-2) var(--r-2);
    overflow: hidden;
}

@media(min-width:620px) {
    .mab-out__stats {
        grid-template-columns: repeat(4, 1fr)
    }
}

.mab-stat {
    background: var(--bg-2);
    padding: 14px 16px
}

.mab-stat__k {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 5px
}

.mab-stat__v {
    display: block;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.15
}

.mab-stat__s {
    display: block;
    font-size: 12px;
    color: var(--faint);
    margin: 4px 0 0
}

.mab-stat--accent {
    background: var(--amber-pale)
}

.mab-stat--accent .mab-stat__v {
    color: var(--amber-ink)
}

.mab-stat--accent .mab-stat__k {
    color: var(--amber-ink);
    opacity: .75
}

.mab-out__lines {
    margin: 12px 0 0;
    padding: 13px 16px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--body);
    line-height: 1.8;
    overflow-x: auto;
}

.mab-out__lines strong {
    color: var(--ink)
}


/* 8 ──────────────────────────────────────────────────────────── BUTTONS ── */

.mab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 16px 0 0
}

.mab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 11px 17px;
    border-radius: var(--r-2);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
    white-space: nowrap;
}

.mab-btn:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px
}

.mab-btn--primary {
    background: var(--green);
    color: #fff
}

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

.mab-btn--ghost {
    background: var(--bg);
    border-color: var(--line);
    color: var(--body)
}

.mab-btn--ghost:hover {
    border-color: var(--faint);
    color: white
}

.mab-btn--add {
    background: none;
    border: 1.5px dashed var(--line);
    color: var(--green-2);
    width: 100%;
    padding: 11px 14px
}

.mab-btn--add:hover {
    border-color: var(--green);
    background: var(--green-pale)
}

.mab-btn--sm {
    font-size: 13px;
    padding: 9px 13px
}


/* 9 ────────────────────────────────────────────────────── ARTICLE BODY ── */

.mab-article {
    font-family: var(--sans);
    color: var(--body);
    font-size: 17px;
    line-height: 1.72;
    max-width: 760px;
    -webkit-font-smoothing: antialiased;
}

.mab-article *,
.mab-article *::before,
.mab-article *::after {
    box-sizing: border-box
}

.mab-article>h1 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 14px;
    letter-spacing: -.025em
}

@media(min-width:640px) {
    .mab-article>h1 {
        font-size: 42px
    }
}

.mab-article h2 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--ink);
    margin: 52px 0 16px;
    letter-spacing: -.018em;
    scroll-margin-top: 90px;
    padding-top: 22px;
    border-top: 1px solid var(--line-2);
}

@media(min-width:640px) {
    .mab-article h2 {
        font-size: 29px
    }
}

.mab-article h3 {
    font-size: 19.5px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ink);
    margin: 34px 0 12px;
    letter-spacing: -.01em;
    scroll-margin-top: 90px
}

.mab-article h4 {
    font-size: 16.5px;
    font-weight: 650;
    color: var(--ink);
    margin: 26px 0 8px
}

.mab-article p {
    margin: 0 0 20px
}

.mab-article strong {
    color: var(--ink);
    font-weight: 650
}

.mab-lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--body);
    margin: 0 0 26px
}

@media(min-width:640px) {
    .mab-lead {
        font-size: 20px
    }
}

.mab-article ul,
.mab-article ol {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none
}

.mab-article ol {
    counter-reset: mabol
}

.mab-article li {
    position: relative;
    padding-left: 26px;
    margin: 0 0 11px
}

.mab-article ul>li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green)
}

.mab-article ol>li {
    counter-increment: mabol
}

.mab-article ol>li::before {
    content: counter(mabol);
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--green-2);
    background: var(--green-pale);
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mab-article a {
    color: var(--green-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(31, 107, 74, .35)
}

.mab-article a:hover {
    text-decoration-color: var(--green)
}


/* 10 ────────────────────────────────── ANSWER CARD · FIGURES · TOC ── */

.mab-answer {
    background: var(--green-pale);
    border: 1px solid rgba(31, 107, 74, .20);
    border-radius: var(--r);
    padding: 20px 22px;
    margin: 0 0 30px
}

.mab-answer__k {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--green-2);
    margin: 0 0 9px
}

.mab-answer p {
    font-size: 17px;
    line-height: 1.62;
    color: var(--ink);
    margin: 0 0 12px
}

.mab-answer p:last-child {
    margin-bottom: 0
}

.mab-answer code {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    background: rgba(255, 255, 255, .7);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--green-2)
}

.mab-figures {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
    margin: 0 0 30px
}

@media(min-width:620px) {
    .mab-figures {
        grid-template-columns: repeat(4, 1fr)
    }
}

.mab-figure {
    background: var(--bg-2);
    padding: 15px 16px
}

.mab-figure__v {
    display: block;
    font-size: 23px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums
}

.mab-figure__k {
    display: block;
    font-size: 12.5px;
    color: var(--soft);
    margin: 5px 0 0;
    line-height: 1.4
}

.mab-toc {
    margin: 0 0 34px;
    padding: 18px 20px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2)
}

.mab-toc__k {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 12px
}

.mab-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none
}

.mab-toc li {
    margin: 0;
    padding: 0
}

.mab-toc li::before {
    display: none
}

.mab-toc a {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--body);
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: 100px;
    text-decoration: none;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.mab-toc a:hover {
    border-color: var(--green);
    color: var(--green-2);
    background: var(--green-pale)
}


/* 11 ─────────────────────────────────────────── FORMULA + EXAMPLE ── */

.mab-formula {
    margin: 24px 0;
    padding: 20px 22px;
    background: var(--ink);
    border-radius: var(--r-2);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.8;
    color: #DCE7E1;
    overflow-x: auto
}

.mab-formula__k {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7E948A;
    margin: 0 0 12px
}

.mab-formula strong {
    color: #fff;
    font-weight: 600
}

.mab-formula em {
    color: #E5A94A;
    font-style: normal
}

.mab-formula hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
    margin: 13px 0
}

.mab-eg {
    margin: 24px 0;
    padding: 20px 22px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2)
}

.mab-eg__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--amber-ink);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px
}

.mab-eg__k::before {
    content: "";
    width: 16px;
    height: 2px;
    background: var(--amber)
}

.mab-eg p {
    font-size: 16px;
    margin: 0 0 12px
}

.mab-eg p:last-child {
    margin-bottom: 0
}

.mab-steps {
    margin: 14px 0
}

.mab-steps__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 15px
}

.mab-steps__row:last-child {
    border-bottom: 0
}

.mab-steps__row span:first-child {
    color: var(--soft)
}

.mab-steps__row span:last-child {
    font-family: var(--mono);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums
}

.mab-steps__row--total {
    border-bottom: 0;
    border-top: 2px solid var(--ink);
    margin-top: 4px;
    padding-top: 12px
}

.mab-steps__row--total span {
    color: var(--ink)!important;
    font-weight: 700;
    font-size: 16.5px
}


/* 12 ───────────────────────────────────────────────────────── TABLES ── */

.mab-tw {
    overflow-x: auto;
    margin: 24px 0;
    border-radius: var(--r-2);
    border: 1px solid var(--line)
}

.mab-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 14.5px;
    background: var(--bg);
    min-width: 440px
}

.mab-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--faint);
    background: var(--bg-2);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap
}

.mab-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: top;
    color: var(--body);
    line-height: 1.5
}

.mab-table tbody tr:last-child td {
    border-bottom: 0
}

.mab-table tbody tr:hover td {
    background: var(--bg-2)
}

.mab-table td strong {
    color: var(--ink)
}

.mab-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ink)!important
}


/* 13 ─────────────────────────────────────────────────────── CALLOUTS ── */

.mab-note {
    margin: 24px 0;
    padding: 17px 20px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--green);
    border-radius: 0 var(--r-2) var(--r-2) 0;
    font-size: 15.5px;
    line-height: 1.62
}

.mab-note p {
    margin: 0 0 10px;
    font-size: 15.5px
}

.mab-note p:last-child {
    margin-bottom: 0
}

.mab-note__k {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--green-2);
    margin: 0 0 8px
}

.mab-note--warn {
    border-left-color: var(--amber);
    background: var(--amber-pale);
    border-color: rgba(194, 121, 15, .25)
}

.mab-note--warn .mab-note__k {
    color: var(--amber-ink)
}

.mab-note--danger {
    border-left-color: var(--red);
    background: var(--red-pale);
    border-color: rgba(175, 67, 42, .22)
}

.mab-note--danger .mab-note__k {
    color: var(--red)
}


/* 14 ──────────────────────────────────────── COMPARISON + STEP CARDS ── */

.mab-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 24px 0
}

@media(min-width:620px) {
    .mab-split {
        grid-template-columns: repeat(3, 1fr)
    }
}

.mab-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 18px 20px
}

.mab-card__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 6px
}

.mab-card__v {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: -.015em
}

.mab-card p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--body);
    margin: 0
}

.mab-card--go {
    border-color: rgba(31, 107, 74, .3);
    background: var(--green-pale)
}

.mab-card--go .mab-card__v,
.mab-card--go .mab-card__k {
    color: var(--green-2)
}

.mab-card--mid {
    border-color: rgba(194, 121, 15, .3);
    background: var(--amber-pale)
}

.mab-card--mid .mab-card__v,
.mab-card--mid .mab-card__k {
    color: var(--amber-ink)
}


/* 15 ──────────────────────────────────────────────────────────── FAQ ── */

.mab-faq {
    margin: 26px 0;
    border-top: 1px solid var(--line)
}

.mab-faq__i {
    border-bottom: 1px solid var(--line)
}

.mab-faq__q {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 650;
    color: var(--ink);
    text-align: left;
    background: none;
    border: 0;
    padding: 18px 0;
    cursor: pointer;
    line-height: 1.45;
    list-style: none;
}

.mab-faq__q::-webkit-details-marker {
    display: none
}

.mab-faq__q:hover {
    color: var(--green-2)
}

.mab-faq__q:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -2px;
    border-radius: 3px
}

.mab-faq__q::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 6px;
    border-right: 2px solid var(--faint);
    border-bottom: 2px solid var(--faint);
    transform: rotate(45deg);
    transition: transform .16s ease;
}

.mab-faq__i[open] .mab-faq__q::after {
    transform: rotate(-135deg);
    margin-top: 10px
}

.mab-faq__a {
    padding: 0 0 20px;
    font-size: 16px;
    line-height: 1.68;
    color: var(--body)
}

.mab-faq__a p {
    margin: 0 0 12px;
    font-size: 16px
}

.mab-faq__a p:last-child {
    margin-bottom: 0
}


/* 16 ──────────────────────────────────────────────────── RELATED TOOLS ── */

.mab-rel {
    margin: 44px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.mab-rel__k {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 14px
}

.mab-rel__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px
}

@media(min-width:560px) {
    .mab-rel__grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:860px) {
    .mab-rel__grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.mab-rel__a {
    display: block;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    text-decoration: none!important;
    transition: border-color .14s ease, background .14s ease
}

.mab-rel__a:hover {
    border-color: var(--green);
    background: var(--green-pale)
}

.mab-rel__n {
    display: block;
    font-size: 15px;
    font-weight: 650;
    color: var(--ink);
    margin: 0 0 3px
}

.mab-rel__d {
    display: block;
    font-size: 13px;
    color: var(--soft);
    line-height: 1.45
}

.mab-meta {
    margin: 30px 0 0;
    font-size: 13.5px;
    color: var(--faint);
    line-height: 1.6
}


/* 16b ───────────────────────────────────────── AUTHOR / E-E-A-T BOX ── */

.mab-author {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 0 28px;
    padding: 16px 18px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}

.mab-author__badge {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mab-author__b {
    min-width: 0
}

.mab-author__n {
    font-size: 14.5px;
    font-weight: 650;
    color: var(--ink);
    margin: 0 0 2px
}

.mab-author__d {
    font-size: 13px;
    color: var(--soft);
    line-height: 1.5;
    margin: 0
}

.mab-author__d span {
    color: var(--faint)
}

.mab-sources {
    margin: 22px 0;
    padding: 16px 20px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2)
}

.mab-sources__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 10px
}

.mab-sources ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.mab-sources li {
    font-size: 13.5px;
    color: var(--soft);
    margin: 0 0 7px;
    padding-left: 16px;
    line-height: 1.5
}

.mab-sources li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--faint)
}

.mab-sources li:last-child {
    margin-bottom: 0
}


/* 17 ───────────────────────────────────────────────── PRINT + MOTION ── */

@media print {
    .mab-calc {
        box-shadow: none;
        border: 1px solid #999;
        break-inside: avoid
    }
    .mab-actions,
    .mab-btn,
    .mab-pour__remove,
    .mab-toc {
        display: none!important
    }
    .mab-calc__bar,
    .mab-out__hero,
    .mab-formula {
        background: #fff!important;
        color: #000!important;
        border: 1px solid #999
    }
    .mab-calc__title,
    .mab-out__num,
    .mab-out__unit,
    .mab-formula strong {
        color: #000!important
    }
    .mab-faq__i {
        break-inside: avoid
    }
    .mab-faq__a {
        display: block!important
    }
    .mab-adv .mab-adv__body {
        display: block!important
    }
}

@media(prefers-reduced-motion:reduce) {
    .mab-calc *,
    .mab-article * {
        transition: none!important;
        animation: none!important
    }
}


/* ==========================================================================
   18 — HOMEPAGE COMPONENTS  (added v2.1.0)
   Used only on the homepage and category pages. Same tokens as everything else.
   ========================================================================== */

.mab-home {
    --ink: #14201B;
    --ink-2: #1E2E28;
    --body: #414F49;
    --soft: #6B7A73;
    --faint: #93A099;
    --line: #DDE3DE;
    --line-2: #ECEFEA;
    --bg: #FFFFFF;
    --bg-2: #F7F9F6;
    --bg-3: #EFF3EE;
    --green: #1F6B4A;
    --green-2: #15523A;
    --green-pale: #E4F0E9;
    --amber: #C2790F;
    --amber-pale: #FDF2DF;
    --amber-ink: #8A5507;
    --r: 12px;
    --r-2: 8px;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-family: var(--sans);
    color: var(--body);
    -webkit-font-smoothing: antialiased;
}

.mab-home *,
.mab-home *::before,
.mab-home *::after {
    box-sizing: border-box
}

.mab-home [hidden] {
    display: none!important
}


/* ---- hero ---- */

.mab-hero {
    background: linear-gradient(165deg, var(--ink-2) 0%, var(--ink) 100%);
    border-radius: var(--r);
    padding: 44px 28px;
    margin: 0 0 40px;
    color: #fff;
    text-align: center;
}

@media(min-width:720px) {
    .mab-hero {
        padding: 64px 48px
    }
}

.mab-hero__k {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8FA79A;
    margin: 0 0 16px;
}

.mab-hero h1 {
    font-size: clamp(30px, 5.2vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0 0 16px;
}

.mab-hero h1 em {
    font-style: normal;
    color: #7FC9A3
}

.mab-hero p {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.6;
    color: #B7CCC0;
    margin: 0 auto;
    max-width: 60ch;
}

.mab-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 34px;
    margin: 30px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.mab-hero__stat {
    text-align: center
}

.mab-hero__n {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em
}

.mab-hero__l {
    display: block;
    font-size: 12.5px;
    color: #8FA79A;
    margin-top: 5px
}


/* ---- section headers ---- */

.mab-sec {
    margin: 0 0 44px
}

.mab-sec__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.mab-sec__t {
    font-size: 23px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.018em;
    line-height: 1.2;
}

.mab-sec__d {
    font-size: 14.5px;
    color: var(--soft);
    margin: 0
}

.mab-sec__c {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--faint);
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 3px 10px;
    border-radius: 100px;
    white-space: nowrap;
}


/* ---- calculator cards ---- */

.mab-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

@media(min-width:560px) {
    .mab-cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:920px) {
    .mab-cards {
        grid-template-columns: repeat(3, 1fr)
    }
}

.mab-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    text-decoration: none!important;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.mab-tile:hover {
    border-color: var(--green);
    background: var(--green-pale);
    transform: translateY(-1px)
}

.mab-tile:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px
}

.mab-tile__top {
    display: flex;
    align-items: center;
    gap: 10px
}

.mab-tile__ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--green-pale);
    color: var(--green-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mab-tile__ico svg {
    width: 18px;
    height: 18px
}

.mab-tile:hover .mab-tile__ico {
    background: #fff
}

.mab-tile__n {
    font-size: 16px;
    font-weight: 650;
    color: var(--ink);
    margin: 0;
    line-height: 1.3
}

.mab-tile__d {
    font-size: 13.5px;
    color: var(--soft);
    margin: 0;
    line-height: 1.5
}

.mab-tile--wide {
    grid-column: 1/-1
}


/* ---- trust strip ---- */

.mab-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
    margin: 0 0 44px;
}

@media(min-width:700px) {
    .mab-trust {
        grid-template-columns: repeat(3, 1fr)
    }
}

.mab-trust__i {
    background: var(--bg-2);
    padding: 20px 22px
}

.mab-trust__t {
    font-size: 15px;
    font-weight: 650;
    color: var(--ink);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mab-trust__t svg {
    width: 17px;
    height: 17px;
    color: var(--green);
    flex: 0 0 auto
}

.mab-trust__d {
    font-size: 13.5px;
    color: var(--soft);
    margin: 0;
    line-height: 1.55
}


/* ---- intro / prose on homepage ---- */

.mab-home__prose {
    max-width: 70ch;
    margin: 0 0 44px
}

.mab-home__prose h2 {
    font-size: 23px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 14px;
    letter-spacing: -.018em
}

.mab-home__prose p {
    font-size: 16.5px;
    line-height: 1.7;
    margin: 0 0 16px
}

.mab-home__prose a {
    color: var(--green-2);
    text-decoration: underline;
    text-underline-offset: 3px
}


/* ---- CTA band ---- */

.mab-cta {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 30px 28px;
    text-align: center;
    margin: 0 0 20px;
}

.mab-cta h2 {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -.015em
}

.mab-cta p {
    font-size: 15.5px;
    color: var(--soft);
    margin: 0 auto 18px;
    max-width: 56ch;
    line-height: 1.6
}

.mab-btn-lg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 650;
    background: var(--green);
    color: #fff!important;
    padding: 13px 24px;
    border-radius: var(--r-2);
    text-decoration: none!important;
    transition: background .15s ease;
}

.mab-btn-lg:hover {
    background: var(--green-2)
}

@media(prefers-reduced-motion:reduce) {
    .mab-home * {
        transition: none!important
    }
}


/* ==========================================================================
   19 — THEME COMPATIBILITY  (added v2.1.0)
   GeneratePress and most themes style .entry-content headings and lists at
   the same specificity as ours. These rules raise ours so the components
   render correctly regardless of stylesheet load order.
   ========================================================================== */


/* Homepage headings must not inherit theme heading styles */

.mab-home .mab-hero h1,
.entry-content .mab-home .mab-hero h1 {
    font-size: clamp(30px, 5.2vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.mab-home .mab-sec__t,
.entry-content .mab-home .mab-sec__t,
.mab-home .mab-home__prose h2,
.entry-content .mab-home .mab-home__prose h2,
.mab-home .mab-cta h2,
.entry-content .mab-home .mab-cta h2 {
    padding: 0;
    border: 0;
    margin-top: 0;
}

.mab-home .mab-sec__t {
    font-size: 23px;
    margin: 0 0 4px
}

.mab-home .mab-home__prose h2 {
    font-size: 23px;
    margin: 0 0 14px
}

.mab-home .mab-cta h2 {
    font-size: 21px;
    margin: 0 0 8px
}


/* Homepage tiles and links must not pick up theme link styling */

.mab-home a,
.entry-content .mab-home a {
    box-shadow: none
}

.mab-home .mab-tile,
.entry-content .mab-home .mab-tile {
    color: inherit;
    text-decoration: none
}

.mab-home .mab-tile__n,
.mab-home .mab-tile__d,
.mab-home .mab-trust__t,
.mab-home .mab-trust__d,
.mab-home .mab-hero p,
.mab-home .mab-sec__d {
    padding: 0;
    border: 0
}


/* Homepage lists (none currently, but guard anyway) */

.mab-home ul,
.mab-home ol {
    list-style: none;
    margin: 0;
    padding: 0
}

.mab-home li {
    margin: 0;
    padding: 0
}

.mab-home li::before {
    display: none
}


/* Article: theme heading overrides */

.entry-content .mab-article h2 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--ink);
    margin: 52px 0 16px;
    padding-top: 22px;
    border-top: 1px solid var(--line-2);
}

@media(min-width:640px) {
    .entry-content .mab-article h2 {
        font-size: 29px
    }
}

.entry-content .mab-article h3 {
    font-size: 19.5px;
    font-weight: 650;
    color: var(--ink);
    margin: 34px 0 12px;
    padding: 0;
    border: 0;
}


/* Sources list inside an article: use the faint dot, not the green one */

.mab-article .mab-sources li {
    padding-left: 16px
}

.mab-article .mab-sources ul>li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--faint);
}


/* Cards and notes inside an article must not inherit paragraph margins */

.entry-content .mab-article .mab-card p:last-child,
.entry-content .mab-article .mab-note p:last-child,
.entry-content .mab-article .mab-answer p:last-child {
    margin-bottom: 0
}


/* Author box heading weight */

.mab-article .mab-author__n {
    padding: 0;
    border: 0;
    margin: 0 0 2px
}


/* ==========================================================================
   20 — HOMEPAGE FIXES  (added v2.2.0)
   ========================================================================== */


/* H1 second line must break */

.mab-home .mab-hero h1 em,
.entry-content .mab-home .mab-hero h1 em {
    display: block;
    font-style: normal;
    color: #7FC9A3;
    margin-top: 6px;
}


/* WordPress injects empty <p> and <br> between block children. Inside a grid
   every one becomes a cell, which pushes cards into a single column with
   blanks beside them. Neutralise anything empty. */

.mab-cards>p,
.mab-cards>br,
.mab-trust>p,
.mab-trust>br,
.mab-hero__stats>p,
.mab-hero__stats>br,
.mab-rel__grid>p,
.mab-rel__grid>br,
.mab-split>p,
.mab-split>br,
.mab-out__stats>p,
.mab-figures>p {
    display: none!important
}

.mab-cards>p:not(:empty),
.mab-trust>p:not(:empty),
.mab-split>p:not(:empty) {
    display: block!important
}


/* Belt and braces: any genuinely empty direct child of a grid is removed */

.mab-cards>*:empty,
.mab-trust>*:empty,
.mab-rel__grid>*:empty,
.mab-split>*:empty,
.mab-figures>*:empty {
    display: none!important
}


/* Section header: keep the count pill tied to the heading, not the far edge */

.mab-sec__head {
    align-items: flex-end
}

.mab-sec__head>div {
    flex: 1 1 auto;
    min-width: 0
}


/* Tile: arrow affordance on hover */

.mab-tile__n {
    display: flex;
    align-items: center;
    gap: 6px
}

.mab-tile__n::after {
    content: "→";
    font-size: 15px;
    color: var(--faint);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
}

.mab-tile:hover .mab-tile__n::after {
    opacity: 1;
    transform: translateX(0);
    color: var(--green-2)
}


/* Tile height consistency in a row */

.mab-tile {
    height: 100%
}

.mab-cards {
    align-items: stretch
}


/* Prose block should not be full-bleed narrow on wide screens */

.mab-home__prose {
    max-width: 100%;
}


/* Tile internals are spans so WordPress cannot wrap them in paragraphs */

.mab-tile__top {
    display: flex!important;
    align-items: center;
    gap: 10px;
    width: 100%
}

.mab-tile__d {
    display: block;
    font-size: 13.5px;
    color: var(--soft);
    margin: 0;
    line-height: 1.5
}

.mab-tile__n {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 650;
    color: var(--ink);
    margin: 0;
    line-height: 1.3
}

.mab-tile {
    display: flex;
    flex-direction: column;
    gap: 6px
}
.full-width-content .container.grid-container {
    margin:0 20px;
}
.mab-article.mab-about {
    max-width:100% !important;
}
.site-header {
    border-bottom:1px solid #ccc;;
}

/* ==========================================================================
   21 ─────────────────────────────────────── SIDEBAR CALCULATOR DIRECTORY ──
   Single column. A sidebar is ~300px; two columns clip mid-word and the
   second column has nowhere to go. Rows are full-width, full-name, with a
   left accent rail that fills on hover.
   ========================================================================== */
 
/* Suppress the theme's own widget heading — the card carries its own.
   GeneratePress uses .widget-title; other themes vary, so cover the usual set. */
.mab-widget-wrap > .widget-title,
.mab-widget-wrap > .widgettitle,
.mab-widget-wrap > h2,
.mab-widget-wrap > h3,
.mab-widget-wrap > h4,
.widget_mab_calculators > .widget-title,
.widget_mab_calculators > .widgettitle,
.widget_mab_calculators > h2,
.widget_mab_calculators > h3,
.widget_mab_calculators > h4{
	display:none!important;
}
 
.mab-widget-wrap,
.widget_mab_calculators{margin:0 0 30px}
 
/* ── Card ─────────────────────────────────────────────────────────────── */
/* Tokens are declared on .mab-calc/.mab-article in section 1. The widget
   lives in the sidebar, outside both, so it must carry its own copy or every
   var() below resolves to nothing and the card renders unstyled. */
.mab-widget-wrap,
.widget_mab_calculators,
.mab-w{
	--ink:#14201B;
	--ink-2:#1E2E28;
	--body:#414F49;
	--soft:#6B7A73;
	--faint:#93A099;
	--line:#DDE3DE;
	--line-2:#ECEFEA;
	--bg-2:#F7F9F6;
	--green:#1F6B4A;
	--green-2:#15523A;
	--green-pale:#E4F0E9;
}
 
.mab-w{
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	background:#fff;
	border:1px solid var(--line);
	border-radius:12px;
	overflow:hidden;
	box-shadow:0 1px 2px rgba(20,32,27,.04);
}
 
/* ── Header ───────────────────────────────────────────────────────────── */
.mab-w__head{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:13px 15px;
	background:var(--bg-2);
	border-bottom:1px solid var(--line);
}
.mab-w__t{
	font-size:12px;font-weight:700;
	letter-spacing:.07em;text-transform:uppercase;
	color:var(--ink);
	line-height:1.3;
}
.mab-w__n{
	flex:none;
	min-width:22px;height:22px;padding:0 7px;
	display:inline-flex;align-items:center;justify-content:center;
	border-radius:11px;
	background:var(--green-pale);
	color:var(--green-2);
	font-size:11px;font-weight:700;
	font-variant-numeric:tabular-nums;
}
 
/* ── List ─────────────────────────────────────────────────────────────── */
.mab-w__list{
	list-style:none!important;
	margin:0!important;padding:0!important;
}
.mab-w__list li{
	margin:0!important;padding:0!important;
	list-style:none!important;
	border-bottom:1px solid var(--line-2);
}
.mab-w__list li:last-child{border-bottom:0}
 
.mab-w__a{
	display:block;
	position:relative;
	padding:11px 15px 11px 17px;
	color:var(--ink-2)!important;
	text-decoration:none!important;
	transition:background .13s ease;
}
/* Accent rail — sits flush left, grows on hover */
.mab-w__a::before{
	content:"";
	position:absolute;left:0;top:0;bottom:0;
	width:3px;
	background:var(--green);
	transform:scaleY(0);
	transform-origin:center;
	transition:transform .16s ease;
}
a.mab-w__a:hover{background:var(--bg-2);text-decoration:none!important}
a.mab-w__a:hover::before{transform:scaleY(1)}
a.mab-w__a:focus-visible{
	outline:2px solid var(--green);
	outline-offset:-2px;
	background:var(--bg-2);
}
 
.mab-w__nm{
	display:block;
	font-size:14px;font-weight:600;
	line-height:1.35;
	color:var(--ink);
}
a.mab-w__a:hover .mab-w__nm{color:var(--green-2)}
 
.mab-w__d{
	display:block;
	margin-top:2px;
	font-size:12px;font-weight:400;
	line-height:1.4;
	color:var(--soft);
}
 
/* Current page */
.mab-w__i--on .mab-w__a{
	background:var(--green-pale);
	cursor:default;
}
.mab-w__i--on .mab-w__a::before{transform:scaleY(1)}
.mab-w__i--on .mab-w__nm{color:var(--green-2)}
.mab-w__here{
	display:block;margin-top:2px;
	font-size:11px;font-weight:600;
	letter-spacing:.04em;text-transform:uppercase;
	color:var(--green);
}
 
/* Items topped up from outside the current category */
.mab-w__i--out .mab-w__nm{font-weight:500;color:var(--body)}
 
/* ── Category chips ───────────────────────────────────────────────────── */
.mab-w__cats{
	display:flex;flex-wrap:wrap;gap:6px;
	padding:12px 15px;
	border-top:1px solid var(--line);
	background:var(--bg-2);
}
.mab-w__cat{
	display:inline-flex;align-items:center;gap:5px;
	padding:4px 9px;
	border:1px solid var(--line);
	border-radius:20px;
	background:#fff;
	font-size:11.5px;font-weight:600;
	line-height:1.5;
	color:var(--body)!important;
	text-decoration:none!important;
	transition:border-color .13s ease,background .13s ease,color .13s ease;
}
.mab-w__cat:hover{
	border-color:var(--green);
	color:var(--green-2)!important;
	text-decoration:none!important;
}
.mab-w__catn{
	font-size:10px;font-weight:700;
	color:var(--faint);
	font-variant-numeric:tabular-nums;
}
.mab-w__cat:hover .mab-w__catn{color:var(--green)}
.mab-w__cat--on{
	background:var(--green);
	border-color:var(--green);
	color:#fff!important;
}
.mab-w__cat--on .mab-w__catn{color:rgba(255,255,255,.75)}
.mab-w__cat--on:hover{
	background:var(--green-2);
	border-color:var(--green-2);
	color:#fff!important;
}
 
/* ── Footer link ──────────────────────────────────────────────────────── */
.mab-w__all{
	display:flex;align-items:center;justify-content:center;gap:6px;
	padding:12px 15px;
	border-top:1px solid var(--line);
	font-size:12.5px;font-weight:650;
	color:var(--green-2)!important;
	text-decoration:none!important;
	transition:background .13s ease;
}
.mab-w__all:hover{background:var(--green-pale);text-decoration:none!important}
.mab-w__all span{transition:transform .13s ease;display:inline-block}
.mab-w__all:hover span{transform:translateX(3px)}
 
/* ── Inline grid variant, for the [mab_calc_list] shortcode in content ── */
.mab-article .mab-w,
.entry-content > .mab-w{max-width:none}
@media (min-width:700px){
	.mab-article .mab-w__list,
	.entry-content > .mab-w .mab-w__list{
		display:grid;grid-template-columns:1fr 1fr;
	}
	.mab-article .mab-w__list li:nth-last-child(2):nth-child(odd){border-bottom:0}
}
 
/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:768px){
	.mab-w__a{padding-top:13px;padding-bottom:13px}
	.mab-w__nm{font-size:15px}
}
 
@media (prefers-reduced-motion:reduce){
	.mab-w__a,.mab-w__a::before,.mab-w__cat,.mab-w__all,.mab-w__all span{transition:none}
}
 
@media print{ .mab-widget-wrap,.widget_mab_calculators{display:none} }

.widget-area .widget {
    padding:5px !important;
}


/* ==========================================================================
   22 ────────────────────────────── HOMEPAGE + ARCHIVE TEMPLATE (v2.4.0) ──
   Applies to the plugin page templates. GeneratePress gives the content area
   its own padding and heading styles, so these override where they collide.
   ========================================================================== */
 
.mab-home-wrap .site-main{padding:0}
.mab-home-wrap .entry-header,
.mab-home-wrap .entry-title{display:none}
 
/* The homepage and archive want the full container width */
.mab-home{max-width:100%}
 
/* "n more in …" link under a truncated homepage section */
.mab-sec__more{margin:14px 0 0;text-align:center}
.mab-sec__more a{
	display:inline-flex;align-items:center;gap:6px;
	font-size:14px;font-weight:600;
	color:var(--green-2)!important;
	text-decoration:none!important;
	padding:9px 18px;
	border:1px solid var(--line);
	border-radius:100px;
	background:var(--bg);
	transition:border-color .15s ease,background .15s ease;
}
.mab-sec__more a:hover{border-color:var(--green);background:var(--green-pale)}
 
/* ── Archive header ───────────────────────────────────────────────────── */
.mab-arch__head{
	padding:0 0 26px;
	margin:0 0 22px;
	border-bottom:1px solid var(--line);
}
.mab-arch__k{
	font-size:11.5px;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;
	color:var(--faint);
	margin:0 0 12px;
}
.mab-home .mab-arch__h1,
.entry-content .mab-home .mab-arch__h1{
	font-size:clamp(28px,4.4vw,40px);
	font-weight:700;line-height:1.12;
	letter-spacing:-.028em;
	color:var(--ink);
	margin:0 0 12px;padding:0;border:0;
}
.mab-arch__sub{
	font-size:17px;line-height:1.62;
	color:var(--soft);
	margin:0;max-width:64ch;
}
 
/* ── Sticky filter bar ────────────────────────────────────────────────── */
.mab-arch__nav{
	position:sticky;top:0;z-index:20;
	display:flex;flex-wrap:wrap;gap:7px;
	padding:14px 0;
	margin:0 0 30px;
	background:rgba(255,255,255,.94);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	border-bottom:1px solid var(--line-2);
}
.mab-arch__chip{
	display:inline-flex;align-items:center;gap:6px;
	padding:7px 14px;
	border:1px solid var(--line);
	border-radius:100px;
	background:var(--bg);
	font-size:13.5px;font-weight:600;
	line-height:1.4;
	color:var(--body)!important;
	text-decoration:none!important;
	transition:border-color .14s ease,background .14s ease,color .14s ease;
	white-space:nowrap;
}
.mab-arch__chip:hover{
	border-color:var(--green);
	background:var(--green-pale);
	color:var(--green-2)!important;
}
.mab-arch__chipn{
	font-size:11px;font-weight:700;
	color:var(--faint);
	font-variant-numeric:tabular-nums;
}
.mab-arch__chip:hover .mab-arch__chipn{color:var(--green)}
 
/* Anchored sections must clear the sticky bar */
.mab-arch .mab-sec{scroll-margin-top:80px}
 
/* Section headings on the archive should not inherit the theme rule */
.mab-arch .mab-sec__t,
.entry-content .mab-arch .mab-sec__t{
	padding:0;border:0;margin:0 0 4px;
}
 
@media (max-width:600px){
	.mab-arch__nav{padding:11px 0;gap:6px}
	.mab-arch__chip{padding:6px 11px;font-size:12.5px}
}
 
@media (prefers-reduced-motion:reduce){
	.mab-arch__chip,.mab-sec__more a{transition:none}
}
 
@media print{
	.mab-arch__nav{position:static;background:none;border:0}
}
 
/* ── Category archive additions (v2.4.1) ──────────────────────────────── */
 
.mab-arch__count{
	font-size:13px;font-weight:600;
	letter-spacing:.04em;text-transform:uppercase;
	color:var(--faint);
	margin:14px 0 0;
}
 
/* Active chip on a category archive */
.mab-arch__chip--on{
	background:var(--green);
	border-color:var(--green);
	color:#fff!important;
}
.mab-arch__chip--on .mab-arch__chipn{color:rgba(255,255,255,.75)}
.mab-arch__chip--on:hover{
	background:var(--green-2);
	border-color:var(--green-2);
	color:#fff!important;
}
 
/* A category archive has one unlabelled section — drop the head spacing */
.mab-arch .mab-sec:first-of-type .mab-sec__head:empty{display:none}
 
/* Empty state */
.mab-arch__empty{
	text-align:center;
	padding:50px 24px;
	background:var(--bg-2);
	border:1px solid var(--line);
	border-radius:var(--r);
	margin:0 0 30px;
}
.mab-arch__empty p{
	font-size:16px;color:var(--soft);
	margin:0 0 18px;
}
 
/* Pagination */
.mab-pager{
	display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
	margin:32px 0 40px;
}
.mab-pager .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:40px;height:40px;padding:0 13px;
	border:1px solid var(--line);
	border-radius:var(--r-2);
	background:var(--bg);
	font-size:14px;font-weight:600;
	color:var(--body)!important;
	text-decoration:none!important;
	transition:border-color .14s ease,background .14s ease,color .14s ease;
}
.mab-pager .page-numbers:hover{
	border-color:var(--green);
	background:var(--green-pale);
	color:var(--green-2)!important;
}
.mab-pager .page-numbers.current{
	background:var(--green);
	border-color:var(--green);
	color:#fff!important;
}
.mab-pager .page-numbers.dots{
	border-color:transparent;background:none;color:var(--faint)!important;
}
 
@media (max-width:600px){
	.mab-pager .page-numbers{min-width:36px;height:36px;padding:0 10px;font-size:13px}
}
 
/* ── Full-width templates (v2.5.0) ────────────────────────────────────── */
 
/* GeneratePress applies no-sidebar via the layout filter; these rules widen
   the container and remove the padding the theme adds for a sidebar. */
.mab-full .site-content{display:block}
.mab-full #primary,
.mab-full .content-area{width:100%;max-width:100%;float:none;margin:0;padding:0}
.mab-full .widget-area,
.mab-full #right-sidebar,
.mab-full #left-sidebar{display:none}
 
/* Wider container on the templates only — the article pages keep 1100px */
.mab-full .site-content .container,
.mab-full .container.grid-container{max-width:1280px}
 
/* The extra width buys a fourth tile column rather than wider tiles */
@media (min-width:1180px){
	.mab-full .mab-cards{grid-template-columns:repeat(4,1fr)}
}
 
/* With a sidebar the grid must drop back to two, or tiles get cramped */
.mab-has-sidebar .mab-cards{grid-template-columns:1fr}
@media (min-width:700px){
	.mab-has-sidebar .mab-cards{grid-template-columns:repeat(2,1fr)}
}
 
/* Hero and CTA read badly at full bleed on a very wide screen */
.mab-full .mab-hero p{max-width:64ch;margin-left:auto;margin-right:auto}
 
/* Trust panels can take a fourth column too when there are four */
@media (min-width:1180px){
	.mab-full .mab-trust{grid-template-columns:repeat(3,1fr)}
}
 
/* Archive header and filter bar stay aligned to the grid edge */
.mab-full .mab-arch__head,
.mab-full .mab-arch__nav{max-width:100%}
 
@media print{
	.mab-full .mab-cards{grid-template-columns:repeat(2,1fr)}
}