:root {
    /* Core surfaces */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-subtle: #f7f9fc;
    --surface-pressed: #edf1f7;
    --surface-info: #f4f7fc;
    --surface-error: #fff6f5;

    /* Text hierarchy */
    --text: #111827;
    --text-primary: #101828;
    --text-strong: #0b1220;
    --text-secondary: #475467;
    --text-tertiary: #667085;
    --muted: #667085;
    --muted-2: #667085;

    /* Borders */
    --line: #e1e6ed;
    --line-strong: #c8d0db;
    --line-error: #e6a9a3;

    /* Brand tokens. Customizer updates this complete family, not only --primary. */
    --primary: #2c8fcb;
    --primary-rgb: 44, 143, 203;
    --primary-dark: #267baf;
    --primary-soft: #eef6fb;
    --primary-soft-strong: #e6f2f9;
    --primary-soft-subtle: #f7fbfd;
    --primary-border: #afd4eb;
    --primary-border-strong: #91c5e4;
    --primary-line-soft: #d1e6f4;
    --focus-ring: rgba(var(--primary-rgb), .16);
    --focus-ring-strong: rgba(var(--primary-rgb), .18);
    --input-focus-ring: rgba(var(--primary-rgb), .10);

    /* Semantic colors */
    --success: #08783f;
    --error: #b42318;

    /* Layout */
    --shell: 1200px;
    --reading: 820px;

    /* Shape */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;
    --radius-small: var(--radius);

    /* Elevation */
    --shadow-tool: 0 3px 12px rgba(16, 24, 40, .06);
}

/*
 * Responsive contract
 * 900px: dense hub/category grids
 * 820px: wide navigation / large finance layouts
 * 860px: primary navigation switches to the compact mobile menu
 * 640px: compact calculator layout
 * 520px: one-column forms
 * 420px: small-phone refinements
 * 340px: extreme narrow-screen fallback
 * Component-specific micro breakpoints below 520px remain only where controls would overflow.
 */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

.site-shell {
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    left: 12px;
    top: -70px;
    z-index: 1000;
    padding: 9px 12px;
    border-radius:var(--radius);
    background: var(--text);
    color: var(--surface);
    font-size: 14px;
}
.skip-link:focus { top: 12px; }

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
}
body.admin-bar .site-header { top: 32px; }
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-branding { min-width: 0; display: flex; align-items: center; }
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-strong);
    font-weight: 700;
    letter-spacing: -.025em;
}
.brand:hover { color: var(--text-strong); }
.brand:focus-visible,
.custom-logo-link:focus-visible { outline: 3px solid var(--focus-ring-strong); outline-offset: 3px; border-radius: var(--radius-sm); }
.brand-text { font-size: 19px; line-height: 1.2; white-space: nowrap; }
.brand-icon {
    width: 34px;
    height: 34px;
    padding: 5px;

    background: var(--primary);
    color: var(--surface);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    font-size: 7px;
    line-height: 1;
    font-weight: 800;
}
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo {
    display: block;
    width: auto;
}
.main-nav,
.main-nav .menu {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.main-nav a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 2px 0 0;
    line-height: 1.2;
    white-space: nowrap;
}

.main-nav a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 5px; border-radius: 2px; }

.main-nav a.is-current::after,
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    background: var(--primary);
}

.mobile-nav { display: none; position: relative; }
.mobile-nav summary {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line-strong);
    cursor: pointer;
    list-style: none;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary span {
    width: 18px;
    height: 1.5px;
    border-radius: var(--radius-pill);
    background: var(--text-secondary);
    transform-origin: center;
    transition: transform .14s ease, opacity .14s ease;
}
.mobile-nav summary:hover { border-color: #bdc5d1; background: var(--surface-subtle); }
.mobile-nav summary:focus-visible { outline: 3px solid var(--focus-ring-strong); outline-offset: 2px; }
.mobile-nav[open] summary { border-color: var(--primary-border); background: var(--primary-soft-subtle); }
.mobile-nav[open] summary span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.mobile-nav[open] summary span:nth-child(2) { opacity: 0; }
.mobile-nav[open] summary span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.mobile-nav-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(292px, calc(100vw - 24px));
    border: 1px solid var(--line);
    background: var(--surface);
    display: grid;
    gap: 1px;
}
.mobile-nav-panel .mobile-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mobile-nav-panel .mobile-menu li { margin: 0; padding: 0; }
.mobile-nav-panel a {
    display: block;
    padding: 11px 12px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.35;
}
.mobile-nav-panel a:hover { background: var(--surface-subtle); color: var(--text-primary); }
.mobile-nav-panel a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -1px; }
.mobile-nav-panel a[aria-current="page"],
.mobile-nav-panel .current-menu-item > a,
.mobile-nav-panel .current_page_item > a { background: var(--primary-soft-subtle); color: var(--primary-dark); }

@media (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
}

/* Home hero */

.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero h1 {
    margin: 0;
    color: var(--text-strong);
    text-align: center;
    line-height: 1.06;
    letter-spacing: -.045em;
}
.hero-subtitle {
    max-width: 660px;
    margin: 10px 0 23px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.6;
}

/* Calculator */
.calculator {
    width: min(100%, 560px);
    padding: 10px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
}
.calculator-noscript {
    margin: 0 0 9px;
    padding: 9px 10px;
    border: 1px solid #fecdca;
    border-radius:var(--radius);
    background: #fff5f4;
    color: var(--error);
    font-size: 13px;
}
.calculator-screen {
    min-height: 148px;
    margin-bottom: 8px;
    padding: 14px 16px 16px;
    border: 1px solid #d9dee7;
    background: var(--surface-subtle);
    text-align: right;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.calculator-screen-top {
    min-height: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
.calculator-expression {
    min-width: 0;
    min-height: 25px;
    color: #5d697a;
    font-size: 16px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    user-select: text;
}
.calculator-expression::-webkit-scrollbar { display: none; }
/* Long expressions stay anchored to the newest value, while a subtle edge
   fade reveals that older/newer content can still be inspected by swiping. */
.calculator-expression.has-scroll-overflow.can-scroll-left:not(.can-scroll-right) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 100%);
}
.calculator-expression.has-scroll-overflow.can-scroll-right:not(.can-scroll-left) {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
}
.calculator-expression.has-scroll-overflow.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.calculator-screen-actions {
    display: inline-flex;
    align-items: center;
}
.screen-action,
.screen-backspace {
    min-width: 40px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius:var(--radius);
    background: transparent;
    color: #344054;
    display: inline-grid;
    place-items: center;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .08s ease, border-color .08s ease, transform .06s ease;
}
.screen-backspace svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.screen-action:hover,
.screen-backspace:hover { border-color: #dde2ea; background: var(--surface); }
.screen-action:active,
.screen-action.is-pressed,
.screen-backspace:active,
.screen-backspace.is-pressed { background: #e9edf2; transform: translateY(1px); }
.screen-action:focus-visible,
.screen-backspace:focus-visible { outline: 3px solid var(--focus-ring-strong); outline-offset: 1px; }
.calculator-result {
    display: block;
    margin-top: 8px;
    color: var(--text-strong);
    font-size: 54px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    user-select: text;
    cursor: text;
}

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.calc-key {
    min-height: 58px;
    border: 1px solid #d7dde6;
    background: #fbfcfd;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .08s ease, border-color .08s ease, box-shadow .08s ease, transform .06s ease;
    touch-action: manipulation;
    user-select: none;
}
.calc-key:hover { background: #f4f6f8; border-color: #c8d0da; }
.calc-key:active,
.calc-key.is-pressed {
    transform: translateY(1px);
    background: #eef1f4;
    border-color: #c5cdd7;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06);
}
.calc-key:focus-visible { outline: 3px solid var(--focus-ring-strong); outline-offset: 2px; }
.calc-key--utility {
    background: #f1f3f6;
    border-color: #d9dee6;
    color: #344054;
    font-size: 17px;
    font-weight: 650;
}
.calc-key--utility:hover { background: #e9edf2; border-color: #cdd4de; }
.calc-key--backspace {
    color: #344054;
}
.calc-key--backspace svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.calc-key--clear {
    color: var(--error);
    background: #fff7f6;
    border-color: #f0cbc7;
    font-variant-numeric: tabular-nums;
}
.calc-key--clear:hover { background: #fff0ee; border-color: #e8b7b2; }
.calc-key--operator {
    background: var(--primary-soft);
    border-color: var(--primary-line-soft);
    color: var(--primary-dark);
    font-size: 24px;
    font-weight: 650;
}
.calc-key--operator:hover { background: var(--primary-soft-strong); border-color: var(--primary-border); }
.calc-key--operator.is-active,
.calc-key--operator[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--surface);
    box-shadow: none;
}
.calc-key--operator.is-active:hover,
.calc-key--operator[aria-pressed="true"]:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.calc-key--zero { grid-column: auto; }
.calc-key--equals {
    color: var(--surface);
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 1px 2px rgba(var(--primary-rgb), .18);
    font-size: 25px;
    font-weight: 700;
}
.calc-key--equals:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.calc-key--equals:active,
.calc-key--equals.is-pressed {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

.calculator-tools {
    min-height: 46px;
    margin: 9px -10px -10px;
    padding: 0 7px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
}
.calc-tool {
    min-height: 43px;
    padding: 4px 7px;
    border: 0;
    border-radius:var(--radius);
    background: transparent;
    color: #556274;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.calc-tool:hover { background: #f5f7f9; color: #202939; }
.calc-tool--share,
.calc-tool--keyboard { color: var(--text-tertiary); }
.calc-tool:focus-visible { outline: 3px solid var(--focus-ring); }
.tool-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--text-tertiary);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tool-divider { width: 1px; height: 18px; background: #e0e4ea; }
.tool-label--mobile { display: none; }
.history-count {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius:var(--radius-lg);
    background: var(--primary-soft);
    color: var(--primary-dark);
    display: inline-grid;
    place-items: center;
    font-size: 10px;
}
.calculator-history,
.keyboard-help {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    font-size: 13px;
}
.history-heading { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.history-summary { color: var(--muted-2); font-size: 11px; font-weight: 500; white-space: nowrap; }
.history-clear {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}
.history-clear:hover:not(:disabled) { color: var(--error); }
.history-clear:disabled { color: var(--muted-2); cursor: default; opacity: .62; }
.history-clear[data-confirm="1"] { color: var(--error); font-weight: 600; }
.history-setting {
    min-height: 34px;
    margin: 0 0 6px;
    padding: 6px 8px;
    border-radius:var(--radius);
    background: #f7f8fa;
    color: #596579;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
}
.history-setting input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.history-setting input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.history-empty { padding: 14px 0 6px; color: var(--muted-2); text-align: center; font-size: 13px; }
.history-list { display: grid; gap: 3px; max-height: 292px; overflow: auto; overscroll-behavior: contain; }
.history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 3px;
    border-radius:var(--radius);
}
.history-item {
    width: 100%;
    min-width: 0;
    padding: 8px 7px;
    border: 0;
    border-radius:var(--radius);
    background: transparent;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "expression result" "meta meta";
    gap: 3px 12px;
    text-align: left;
    cursor: pointer;
}
.history-item:hover { background: #f6f7f9; }
.history-item:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.history-expression { grid-area: expression; min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.history-result { grid-area: result; min-width: 0; max-width: 100%; overflow: hidden; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.history-meta { grid-area: meta; color: var(--muted-2); font-size: 10px; line-height: 1.3; }
.history-actions { display: flex; align-items: stretch; gap: 1px; }
.history-action {
    width: 36px;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-radius:var(--radius);
    background: transparent;
    color: var(--muted);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}
.history-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.history-action:hover { background: #f3f5f8; color: var(--primary); }
.history-delete:hover { color: var(--error); background: #fff5f4; }
.history-action:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.keyboard-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #596579;
    font-size: 12px;
}
.keyboard-help span {
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius:var(--radius);
    background: #fafbfc;
}
.calculator-status { min-height: 16px; margin: 5px 0 -4px; color: var(--muted); text-align: center; font-size: 12px; }
.calculator.has-error .calculator-screen { border-color: #e9aaa5; background: #fffafa; }
.calculator.has-error .calculator-result,
.calculator.has-error .calculator-expression { color: var(--error); }
.calculator.has-error .calculator-result { font-size: 36px; letter-spacing: -.02em; }
.calculator-result.is-medium { font-size: 45px; }
.calculator-result.is-long { font-size: 37px; letter-spacing: -.035em; }
.calculator-result.is-xlong { font-size: 31px; letter-spacing: -.025em; }
.calculator-result.is-scientific { font-size: 36px; letter-spacing: -.025em; }
.calculator-result.is-overflowing { font-size: 25px; letter-spacing: -.015em; }
.calculator-result.is-overflowing-tight { font-size: 20px; letter-spacing: 0; }

/* Homepage content */

.home-content h2 {
    margin: 0 0 13px;
    color: var(--text-strong);
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -.025em;
    font-weight: 700;
}
.home-overview { padding: 0 0 3px; }
.home-overview-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 13px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
}
.home-overview p { margin: 0; color: var(--text-tertiary); font-size: 12px; line-height: 1.55; }
.home-overview strong { color: var(--text-secondary); font-weight: 650; }
.home-overview a { color: var(--primary-dark); font-weight: 650; white-space: nowrap; }
.home-overview a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-overview-trust { min-width: 0; }
.home-overview-scope { text-align: right; }

.benefits-section {
    max-width: 900px;
    margin: 30px auto 0;
    padding: 0 0 30px;
}
.benefits-section > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.benefit-card { min-width: 0; padding: 17px 18px; background: transparent; }
.benefit-card + .benefit-card { border-left: 1px solid var(--line); }
.benefit-icon { display: none; }
.benefit-card h3 { margin: 0 0 4px; color: var(--text-primary); font-size: 14px; line-height: 1.35; font-weight: 650; }
.benefit-card p { margin: 0; color: var(--text-tertiary); font-size: 12px; line-height: 1.55; }

.seo-intro { max-width: var(--reading); margin: 0 auto; padding: 0 0 30px; }
.seo-intro h2 { margin-bottom: 7px; }
.seo-intro p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.75; }

.steps-section { max-width: 900px; margin: 0 auto; padding: 0 0 31px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.step-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 11px;
    align-items: start;
    padding: 16px 18px 0 0;
}
.step-item + .step-item { padding-left: 18px; border-left: 1px solid var(--line); }
.step-number {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
}
.step-item h3 { margin: 1px 0 3px; color: var(--text-primary); font-size: 14px; line-height: 1.4; }
.step-item p { margin: 0; color: var(--text-tertiary); font-size: 13px; line-height: 1.6; }

.faq-section { max-width: var(--reading); margin: 0 auto; }
.faq-section h2 { margin: 0 0 12px; }
.simple-faq {
    display: grid;
}
.faq-section .simple-faq details {
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius:var(--radius-lg);
    background: var(--surface);
    transition: border-color .14s ease, background-color .14s ease;
}
.faq-section .simple-faq details[open] { border-color: #cbd9ea; }
.faq-section summary {
    position: relative;
    min-height: 52px;
    padding: 14px 44px 14px 15px;
    cursor: pointer;
    list-style: none;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
}
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary::after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
}
.faq-section details[open] summary { background: #fbfdff; }
.faq-section details[open] summary::after { content: "−"; }
.faq-section summary:hover { background: #f8fafc; }
.faq-section summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.faq-section details p {
    margin: 0;
    padding: 0 44px 15px 15px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}
.faq-section details p a { color: var(--primary-dark); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }


/* Footer */
.site-footer {
    border-top: 1px solid var(--line);
}
.footer-inner {
    padding: 30px 0 26px;
    display: grid;
}
.brand--footer .brand-text { font-size: 17px; }
.brand--footer .brand-icon { width: 29px; height: 29px; }
.footer-brand .custom-logo { max-height: 36px; max-width: 180px; }
.footer-brand p {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
}
.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 13px;
}



.footer-contact a { overflow-wrap: anywhere; }
.footer-menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer-menu li { margin: 0; }
.footer-bottom {
    padding: 13px 0 17px;
    border-top: 1px solid #eceff3;
    font-size: 12px;
}

/* Inner pages */
.info-page,
.generic-page {
    padding-block: 28px 68px;
}
.breadcrumb {
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}



.info-header h1 {
    margin: 0;
    color: var(--text-strong);
    font-size: clamp(31px, 4.5vw, 42px);
    line-height: 1.14;
}.entry h1,
.generic-page h1 {
    margin: 0;
    color: var(--text-strong);
    font-size: clamp(31px, 4.5vw, 42px);
    line-height: 1.14;
    letter-spacing: -.035em;
    font-weight: 700;
}
.info-header p { margin: 10px 0 0; color: var(--text-secondary); font-size: 16px; }
.info-article > section { padding: 21px 0; border-top: 1px solid var(--line); }
.info-article > section:first-of-type { border-top: 0; padding-top: 0; }
.info-article section h2 { margin: 0 0 9px; color: var(--text-strong); font-size: 22px; line-height: 1.34; letter-spacing: -.018em; }
.info-article section h3 { margin: 20px 0 7px; color: var(--text-strong); font-size: 18px; line-height: 1.4; }
.info-article section p,
.entry-content { color: var(--text-secondary); }
.info-article section p { margin: 0 0 9px; }
.info-article section p:last-child { margin-bottom: 0; }
.info-article strong { color: #253044; }
.entry-content > *:first-child { margin-top: 18px; }

.shortcut-table > div {
    display: grid;
    grid-template-columns: 165px 1fr;
    gap: 18px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.shortcut-table > div:first-child { border-top: 0; }
.page-cta { margin: 23px 0 0; }
.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.primary-button:focus-visible { outline: 3px solid var(--focus-ring-strong); outline-offset: 2px; }
.faq-page { max-width: none; }

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
    margin-top: 26px;
}
.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: none;
}
.contact-form-heading {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}
.contact-form-heading h2 {
    margin: 0 0 5px;
    color: var(--text-strong);
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -.015em;
}
.contact-form-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}
.contact-field { min-width: 0; }
.contact-field:last-of-type { grid-column: 1 / -1; }
.contact-form label { display: block; color: var(--text-primary); font-size: 13px; font-weight: 600; }
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    padding: 10px 11px;
    outline: none;
}
.contact-form input { min-height: var(--control-height); }
.contact-form textarea { resize: vertical; min-height: 180px; line-height: 1.55; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.contact-form .primary-button { grid-column: 1 / -1; justify-self: start; min-height: var(--control-height); }
.contact-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
    box-shadow: none;
}
.contact-card h2 { margin: 0 0 18px; font-size: 18px; line-height: 1.3; }
.contact-card p { margin: 0 0 18px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.contact-card p:last-child { margin-bottom: 0; }
.contact-card strong { display: inline-block; margin-bottom: 3px; color: var(--text-primary); font-size: 13px; }
.contact-card a { color: var(--primary); overflow-wrap: normal; word-break: normal; }
.contact-card .contact-email { overflow-wrap: anywhere; }

.small-note {
    font-size: 13px;
}
.form-notice { margin: -6px 0 20px; padding: 10px 12px; border-left: 3px solid; background: #f8fafc; font-size: 14px; }
.form-notice--success { border-color: #32a467; color: #11683d; }
.form-notice--error { border-color: #d95d55; color: var(--error); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.post-list { display: grid; gap: 22px; margin-top: 26px; }
.post-summary { padding-top: 20px; border-top: 1px solid var(--line); }
.post-summary h2 { margin: 0 0 5px; font-size: 20px; }
.post-summary h2 a:hover { color: var(--primary); }
.post-summary p { margin: 0; color: var(--muted); }

#huong-dan { scroll-margin-top: 76px; }

@media (pointer: coarse) {
    .calc-key { min-height: 56px; }
    .screen-action, .screen-backspace { min-width: 44px; min-height: 44px; height: 44px; }
}

@media (max-width: 820px) {
    .site-shell { width: min(calc(100% - 32px), var(--shell)); }
    .main-nav, .main-nav .menu { gap: 17px; }
    .main-nav a { font-size: 13px; }
    .hero { padding-top: 31px; }
    .footer-inner { grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; }
    .footer-contact { grid-column: 2 / 4; }
    .contact-grid { grid-template-columns: 1fr; gap: 20px; }
    .contact-card { padding: 20px; }
}

@media (max-width: 640px) {
    .contact-grid { margin-top: 22px; }
    .contact-form { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
    .contact-form-heading,
    .contact-field:last-of-type,
    .contact-form .primary-button { grid-column: 1; }
    .contact-form textarea { min-height: 165px; }
    .contact-card { padding: 18px; }
    .brand-text { font-size: 18px; }
    .brand-icon { width: 31px; height: 31px; }
    .custom-logo { max-height: 38px; max-width: 180px; }

    .hero { padding: 20px 0 20px; }
    .home-hero-kicker { display: none; }
    .hero h1 { font-size: 34px; }
    .hero-subtitle { max-width: 430px; margin: 7px 0 12px; font-size: 14px; line-height: 1.55; }
    .home-hero-meta span:nth-child(2),
    .home-hero-meta > a { display: none; }
    .calculator { padding: 8px; border-radius:var(--radius-lg); box-shadow: 0 8px 24px rgba(16, 24, 40, .07); }
    .calculator-screen { min-height: 150px; margin-bottom: 7px; padding: 12px 12px 14px; }
    .calculator-screen-top { min-height: 28px; gap: 5px; }
    .calculator-expression { font-size: 14px; }
    .calculator-result { margin-top: 7px; font-size: 50px; }
    .screen-action, .screen-backspace { min-width: 44px; height: 44px; padding-inline: 6px; }
    .calculator-grid { gap: 7px; }
    .calc-key { min-height: 56px; border-radius:var(--radius-lg); font-size: 20px; }
    .calc-key--utility { font-size: 16px; }
    .calc-key--operator, .calc-key--equals { font-size: 23px; }
    .calculator-tools {
        margin: 8px -8px -8px;
        padding-inline: 3px;
        grid-template-columns: 1fr auto 1fr auto 1fr;
    }
    .calc-tool { min-height: 42px; gap: 5px; padding-inline: 5px; font-size: 11px; }
    .calc-tool--share,
    .tool-divider--share,
    .calc-tool--keyboard,
    .tool-divider--keyboard { display: none; }
    .tool-label--desktop { display: none; }
    .tool-label--mobile { display: inline; }
    .tool-icon { width: 15px; height: 15px; flex-basis: 15px; }
    .history-count { min-width: 15px; height: 15px; padding-inline: 3px; font-size: 9px; }
    .calculator-history { padding-top: 9px; }
    .history-list { max-height: 310px; }
    .history-item { min-height: 50px; padding-block: 7px; }
    .history-action { width: 40px; min-height: 50px; }
    .calculator-result.is-medium { font-size: 37px; }
    .calculator-result.is-long { font-size: 31px; }
    .calculator-result.is-xlong { font-size: 26px; }
    .calculator-result.is-scientific { font-size: 29px; }
    .calculator-result.is-overflowing { font-size: 22px; }
    .calculator-result.is-overflowing-tight { font-size: 18px; letter-spacing: 0; }
    .calculator.has-error .calculator-result { font-size: 29px; }

    .home-content { padding-bottom: 46px; }
    .home-content h2 { font-size: 20px; }
    .home-overview-inner { align-items: flex-start; flex-direction: column; gap: 5px; }
    .home-overview-scope { text-align: left; }
    .benefits-section { padding-bottom: 26px; }
    .benefit-grid { grid-template-columns: 1fr 1fr; }
    .benefit-card { padding: 14px 13px; }
    .benefit-card + .benefit-card { border-left: 0; }
    .benefit-card:nth-child(even) { border-left: 1px solid var(--line); }
    .benefit-card:nth-child(n/**/+3) { border-top: 1px solid var(--line); }
    .seo-intro { padding-bottom: 25px; }
    .seo-intro p { font-size: 14px; }
    .steps-grid { grid-template-columns: 1fr; }
    .step-item,
    .step-item + .step-item { padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
    .step-item:last-child { border-bottom: 1px solid var(--line); }

    .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px 30px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-contact { grid-column: auto; }
    .info-page, .generic-page { padding-top: 22px; }
    .info-header h1, .entry h1, .generic-page h1 { font-size: 32px; }
    .info-header p { font-size: 15px; }
    .shortcut-table > div { grid-template-columns: 115px 1fr; gap: 12px; }
}

@media (max-width: 420px) {
    .hero { padding-top: 22px; }
    .hero h1 { font-size: 32px; }
    .hero-subtitle { max-width: 350px; font-size: 14px; }
    .calculator { padding: 7px; }
    .calculator-screen { min-height: 148px; padding: 12px 11px 14px; }
    .calculator-result { font-size: 48px; }
    .calc-key { min-height: 54px; border-radius:var(--radius-lg); font-size: 19px; }
    .history-header { align-items: flex-start; }
    .history-heading { align-items: flex-start; flex-direction: column; gap: 1px; }
    .history-summary { font-size: 10px; }
    .history-row { grid-template-columns: minmax(0, 1fr) 76px; }
    .history-item {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "expression" "result" "meta";
        gap: 2px;
    }
    .history-result { text-align: right; }
    .history-action { width: 37px; }
    .calc-tool { font-size: 10px; }
    .tool-icon { width: 14px; height: 14px; flex-basis: 14px; }
    .calculator-result.is-medium { font-size: 34px; }
    .calculator-result.is-long { font-size: 28px; }
    .calculator-result.is-xlong,
    .calculator-result.is-scientific { font-size: 23px; }
    .calculator-result.is-overflowing { font-size: 21px; letter-spacing: -.01em; }
    .calculator-result.is-overflowing-tight { font-size: 17px; letter-spacing: 0; }
    .calculator-expression { font-size: 14px; }
    .benefit-grid { grid-template-columns: 1fr; }
    .benefit-card,
    .benefit-card:nth-child(even),
    .benefit-card:nth-child(n/**/+3) { border-left: 0; border-top: 1px solid var(--line); }
    .benefit-card:first-child { border-top: 0; }
    .benefit-card { padding: 12px 2px; }
    .benefit-card h3 { font-size: 13px; }
    .benefit-card p { font-size: 12px; }
    .footer-inner { grid-template-columns: 1fr; gap: 20px; }
    .footer-brand { grid-column: auto; }
    .shortcut-table > div { grid-template-columns: 96px 1fr; }
}

@media (max-width: 340px) {
    .brand-text { font-size: 17px; }
    .hero h1 { font-size: 29px; }
    .calculator-grid { gap: 5px; }
    .calc-key { min-height: 50px; border-radius:var(--radius); }
    .calculator-tools { padding-inline: 0; }
    .tool-icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

@media (forced-colors: active) {
    .calc-key--equals,
    .brand-icon { border: 1px solid ButtonText; }
    .calc-key--operator.is-active,
    .calc-key--operator[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* v1.9 SEO expansion foundation */
.breadcrumbs {
    margin-bottom: 24px;
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li {
    display: inline-flex;
    align-items: center;
}
.breadcrumbs li:not(:last-child)::after {
    content: "›";
}



.home-tools-link { max-width: var(--reading); margin: 0 auto; padding: 0 0 27px; }
.home-tools-link-inner { padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.home-tools-link strong { color: #253044; font-size: 14px; }
.home-tools-link p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.home-tools-link a { flex: 0 0 auto; color: var(--primary); font-size: 13px; font-weight: 600; }
.home-tools-link a:hover { text-decoration: underline; text-underline-offset: 3px; }

.tools-hub-main { padding: 28px 0 70px; }


.eyebrow {
    margin: 0 0 7px;
    font-size: 12px;
    text-transform: uppercase;
}
.tools-hub-header h1 {
    margin: 0;
    color: var(--text-strong);
}.content-header h1 {
    margin: 0;
    color: var(--text-strong);
    font-size: clamp(32px, 4.8vw, 44px);
    line-height: 1.12;
}
.tools-hub-header > p:last-child {
    margin: 10px 0 0;
}.content-lead {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.7;
}
.tools-hub-summary { margin-top: 26px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 7px; color: var(--muted); font-size: 13px; }
.tools-hub-summary strong { color: var(--text-strong); font-size: 21px; line-height: 1; }

.tool-category-heading { margin-bottom: 13px; }
.tool-category-heading h2 {
    margin: 0;
    color: #253044;
}
.tool-category-heading p {
    margin: 4px 0 0;
    font-size: 13px;
}
.tool-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.tool-card { min-width: 0; height: 100%; }
.tool-card-link {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    box-sizing: border-box;
    text-decoration: none;
}
.tool-card-action { margin-top: auto; }

.tool-card-kicker {
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.tool-card h3 { margin: 0; color: #202939; font-size: 16px; line-height: 1.35; letter-spacing: -.015em; }
.tool-card p { margin: 6px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.58; }
.tool-card-action {
    font-size: 12px;
}
.tools-hub-note { max-width: 760px; margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); }
.tools-hub-note h2 {
    margin: 0 0 8px;
    color: #253044;
    font-size: 20px;
}
.tools-hub-note p { margin: 0 0 10px; color: #596579; font-size: 14px; line-height: 1.7; }
.tools-hub-note a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

.content-main { padding: 28px 0 70px; }



.related-tools { margin-top: 36px; padding-top: 27px; border-top: 1px solid var(--line); }
.related-tools .section-heading-row,
.related-tools .tool-card-grid { width: 100%; }
.related-tools .tool-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
}
.related-tools .tool-card-link {
    min-height: 154px;
    padding: 15px 16px;
    border-radius: var(--radius);
}
.related-tools .tool-card-kicker { display: none; }
.related-tools .tool-card h3 {
    font-size: 15px;
    line-height: 1.38;
}
.related-tools .tool-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 7px 0 12px;
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.related-tools .tool-card-action {
    padding-top: 2px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
}
.section-heading-row { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-heading-row h2 { margin: 0; color: #253044; font-size: 20px; }
.section-heading-row > a { color: var(--primary); font-size: 13px; font-weight: 600; }

@media (max-width: 760px) {
    .related-tools .tool-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .home-tools-link-inner { align-items: flex-start; }
    .home-tools-link p { max-width: 240px; }
    .tools-hub-main, .content-main { padding-top: 22px; padding-bottom: 54px; }
    .tool-card-grid { grid-template-columns: 1fr; }
    .tool-category { padding-top: 29px; }
    .tool-card-link { padding: 15px 16px; }
}

@media (max-width: 420px) {
    .home-tools-link-inner { display: grid; gap: 7px; }
    .home-tools-link p { max-width: none; }
    .tools-hub-header h1, .content-header h1 { font-size: 31px; }
}

/* v2.0 — Percentage calculator */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.percent-tool { margin: 0 0 40px; }
.percent-tool-tabs {
    margin: 0 0 -1px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--line-strong);
    -webkit-overflow-scrolling: touch;
}
.percent-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.percent-tab:hover { color: var(--text); background: #fafbfc; }
.percent-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); }
.percent-tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

.percent-calculator-panel {
    border-bottom: 1px solid var(--line);
}
.percent-form { margin: 0; }
.percent-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.percent-field { display: grid; gap: 6px; min-width: 0; }
.percent-field > span,
.percent-direction > span {
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}
.percent-field input {
    width: 100%;
    height: 50px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    border-radius:var(--radius-lg);
    background: var(--surface);
    color: var(--text-strong);
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color .1s ease, box-shadow .1s ease;
}
.percent-field input:hover { border-color: #b8c0cc; }
.percent-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.percent-field input[aria-invalid="true"] { border-color: #f04438; box-shadow: 0 0 0 3px rgba(240, 68, 56, .08); }

.percent-direction { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.percent-direction-options { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius:var(--radius-lg); background: #f8f9fb; }
.percent-direction-btn {
    min-width: 70px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 13px;
}
.percent-direction-btn.is-active {
    box-shadow: 0 1px 2px rgba(16,24,40,.08);
}
.percent-direction-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

.percent-input-help { margin: 9px 0 0; color: var(--text-tertiary); font-size: 12px; line-height: 1.55; }
.percent-input-help strong { color: #596579; font-weight: 600; }
.percent-form-actions {
    margin-top: 14px;
}
.percent-primary-btn {
    cursor: pointer;
    font-size: 13px;
}.percent-reset-btn {
    padding: 0 16px;
    cursor: pointer;
    font-size: 13px;
}




.percent-primary-btn:focus-visible,
.percent-reset-btn:focus-visible,
.percent-copy-btn:focus-visible,
.percent-examples button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.percent-message {
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid #abefc6;
    border-radius:var(--radius);
    background: #ecfdf3;
    color: #067647;
    font-size: 13px;
}
.percent-message.is-error { border-color: #fecdca; background: #fff5f4; color: var(--error); }

.percent-result { margin-top: 18px; padding: 18px 0 19px; border-top: 1px solid var(--line); }
.percent-result.has-error .percent-result-value { color: var(--text-tertiary); }
.percent-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.percent-result-head > span { color: var(--text-tertiary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .055em; }
.percent-copy-btn {
    cursor: pointer;
}
.percent-copy-btn:disabled {
    cursor: default;
}
.percent-result-value {
    display: block;
    margin-top: 4px;
    font-size: clamp(34px, 7vw, 48px);
    line-height: 1.1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.percent-result-summary { margin: 7px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.percent-solution { margin-top: 13px; padding: 11px 12px; border-left: 2px solid var(--primary-line-soft); background: var(--surface-info); }
.percent-solution > span { display: block; margin-bottom: 3px; color: var(--text-tertiary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.percent-solution code { color: #253044; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.percent-examples { padding: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.percent-examples > span { margin-right: 2px; color: var(--text-tertiary); font-size: 12px; }
.percent-examples button {
    padding: 0 9px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: #596579;
    cursor: pointer;
    font-size: 11px;
}
.percent-examples button:hover { border-color: #c7ced8; color: var(--primary); }

.seo-section { margin-top: 35px; padding-top: 30px; border-top: 1px solid var(--line); }
.seo-section h2 { margin: 0 0 10px; color: #253044; font-size: 22px; line-height: 1.3; letter-spacing: -.022em; }
.seo-section h3 { margin: 0 0 5px; color: #344054; font-size: 16px; line-height: 1.4; }
.seo-section p { margin: 0 0 11px; color: #596579; font-size: 14px; line-height: 1.75; }
.seo-section a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.formula-list { display: grid; gap: 0; }
.formula-item { padding: 15px 0; border-top: 1px solid var(--line); }
.formula-item:first-child { border-top: 0; padding-top: 2px; }
.formula-item:last-child { padding-bottom: 0; }
.formula-item p { margin-bottom: 7px; }
.formula-item code { display: inline-block; margin: 1px 0 7px; padding: 5px 8px; border-radius:var(--radius); background: #f5f7fa; color: #253044; font-size: 13px; }
.plain-steps { margin: 0; padding-left: 22px; color: #596579; }
.plain-steps li { margin: 0 0 8px; padding-left: 3px; font-size: 14px; line-height: 1.7; }
.plain-steps strong { color: #344054; }
.example-table-wrap {
    overflow-x: auto;
}
.example-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.example-table th, .example-table td { padding: 10px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.example-table tr:last-child td { border-bottom: 0; }

.example-table td { color: #596579; }
.example-table td:last-child { color: #253044; font-weight: 600; font-variant-numeric: tabular-nums; }
.seo-section.faq-section { max-width: none; margin-inline: 0; }

@media (max-width: 640px) {
    .percent-tool { margin-bottom: 34px; }
    .percent-tab { padding-inline: 12px; }
    .percent-form-grid { grid-template-columns: 1fr; gap: 10px; }
    .percent-field input { height: 48px; font-size: 17px; }
    .percent-result-value { font-size: 36px; }
    .seo-section { margin-top: 30px; padding-top: 26px; }
    .seo-section h2 { font-size: 20px; }
}

@media (max-width: 420px) {
    .percent-calculator-panel { padding-top: 16px; }
    .percent-direction { align-items: flex-start; flex-direction: column; gap: 7px; }
    .percent-direction-options { width: 100%; }
    .percent-direction-btn { flex: 1; }
    .percent-form-actions { display: grid; grid-template-columns: 1fr auto; }
    .percent-primary-btn { width: 100%; }
    .percent-examples { gap: 5px; }
    .percent-examples button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.home-tools-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 13px; }
.home-tools-actions .home-tools-all { color: var(--text-tertiary); font-weight: 500; }
@media (max-width: 420px) {
    .home-tools-actions { width: 100%; }
}

/* v2.1 — Date & age tools */
.date-tool { max-width: 760px; margin: 4px auto 38px; }

.date-form { margin: 0; }
.date-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.date-form-grid--shift { margin-top: 12px; }
.date-field { display: grid; gap: 6px; min-width: 0; }
.date-field--full { max-width: 100%; }
.date-field > span,
.date-direction > span { color: #344054; font-size: 13px; font-weight: 600; }
.date-field input,
.date-field select {
    width: 100%;
    height: 50px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    outline: none;
}
.date-field select { appearance: auto; cursor: pointer; }



.date-input-action { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.date-input-action button {
    min-height: 50px; padding: 0 12px; border: 1px solid var(--line); border-radius:var(--radius-lg); background: var(--surface);
    color: #596579; cursor: pointer; font-size: 12px; font-weight: 600;
}
.date-input-action button:hover { border-color: #c7ced8; color: var(--primary); }
.date-input-help { margin: 9px 0 0; color: var(--text-tertiary); font-size: 12px; line-height: 1.55; }
.date-options { display: flex; flex-wrap: wrap; gap: 7px 20px; margin-top: 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.date-options .tool-check-row { margin: 0; }
.date-holiday-field { margin-top: 12px; }
.date-holiday-field small { color: var(--text-tertiary); font-size: 11px; line-height: 1.5; }
.date-holiday-field[hidden] { display: none; }
.date-form-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.date-primary-btn {
    cursor: pointer;
    font-size: 13px;
}.date-reset-btn {
    padding: 0 16px;
    cursor: pointer;
    font-size: 13px;
}




.date-direction { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.date-direction-options { display: inline-flex; padding: 2px; border: 1px solid var(--line); background: #f8f9fb; }
.date-direction-btn { min-width: 74px; padding: 0 13px; border: 0; border-radius:var(--radius); background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 13px; font-weight: 600; }
.date-direction-btn.is-active { background: var(--surface); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.date-message { margin-top: 12px; padding: 9px 11px; border: 1px solid var(--primary-border); border-radius:var(--radius); background: var(--primary-soft-subtle); color: var(--primary-dark); font-size: 13px; line-height: 1.55; }
.date-message.is-error {
    border-color: #fecdca;
}
.date-result { margin-top: 18px; padding: 18px 0 19px; border-top: 1px solid var(--line); }
.date-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.date-result-head > span { color: var(--text-tertiary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .055em; }
.date-copy-btn {
    padding: 5px 0;
    cursor: pointer;
    font-size: 12px;
}
.date-copy-btn:disabled { color: #a0a8b5; cursor: default; }
.date-result-value {
    display: block;
    margin-top: 4px;
    font-size: clamp(34px,7vw,48px);
    line-height: 1.1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.date-result-summary { margin: 7px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.date-stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 17px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.date-stat-grid > div {
    min-width: 0;
}
.date-stat-grid span { display: block; color: var(--text-tertiary); font-size: 11px; line-height: 1.4; }
.date-stat-grid strong { display: block; margin-top: 3px; color: #344054; font-size: 14px; line-height: 1.45; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.date-stat-grid--compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
.date-highlight { margin-top: 13px; padding: 12px 13px; border-left: 2px solid var(--primary-line-soft); background: var(--surface-info); }
.date-highlight span { display: block; color: var(--text-tertiary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.date-highlight strong { display: block; margin-top: 3px; color: #253044; font-size: 15px; line-height: 1.5; }
.date-highlight small { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 12px; }
.date-primary-btn:focus-visible,
.date-reset-btn:focus-visible,
.date-copy-btn:focus-visible,
.date-input-action button:focus-visible,
.date-direction-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 640px) {
    .date-tool { margin-bottom: 34px; }
    .date-form-grid { grid-template-columns: 1fr; gap: 10px; }
    .date-field input, .date-field select { height: 48px; font-size: 16px; }
    .date-input-action button { min-height: 48px; }
    .date-result-value { font-size: 36px; }
}
@media (max-width: 420px) {
    .date-calculator-panel { padding-top: 16px; }
    .date-form-actions { display: grid; grid-template-columns: 1fr auto; }
    .date-form-actions:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr; }
    .date-form-actions:has(> :nth-child(3)) .date-primary-btn { grid-column: 1 / -1; }
    .date-primary-btn { width: 100%; }
    .date-direction { flex-direction: column; align-items: flex-start; gap: 7px; }
    .date-direction-options { width: 100%; }
    .date-direction-btn { flex: 1; }
    .date-stat-grid { grid-template-columns: 1fr 1fr; }
    .date-stat-grid > div { padding: 10px; }
    .date-stat-grid strong { font-size: 13px; }
}
@media (max-width: 340px) {
    .date-stat-grid { grid-template-columns: 1fr; }
    .date-input-action { grid-template-columns: 1fr; }
    .date-input-action button { min-height: 40px; }
}
.home-tools-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .home-tools-actions { justify-content: flex-start; } }

/* v2.2 — Discount & Average calculators */
.discount-tool {
    max-width: 760px;
    margin: 4px auto 38px;
}
.discount-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 0 0 10px;
    scrollbar-width: thin;
}.average-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 0 0 10px;
}
.discount-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}.average-tab {
    flex: 0 0 auto;
    padding: 0 13px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}
.discount-tab:hover,
.average-tab:hover { border-color: #c8d0da; color: #344054; }
.discount-tab.is-active,
.average-tab.is-active { border-color: var(--primary-border); background: var(--primary-soft-subtle); color: var(--primary); }
.discount-panel,
.average-panel {
    padding-top: 16px;
}
.discount-form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.discount-field,
.average-text-field { min-width: 0; }
.discount-field > span,
.average-text-field > span,
.average-weight-row label > span { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.discount-field input {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius:var(--radius-lg);
    background: var(--surface);
    color: var(--text-strong);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color .1s ease, box-shadow .1s ease;
}.average-text-field textarea {
    width: 100%;
    border: 1px solid #d0d5dd;
    background: var(--surface);
    font: inherit;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    outline: none;
}.average-weight-row input {
    width: 100%;
    border: 1px solid #d0d5dd;
    background: var(--surface);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    outline: none;
}
.discount-field input,
.average-weight-row input { height: 50px; padding: 0 13px; }
.average-text-field textarea { min-height: 108px; padding: 11px 13px; resize: vertical; line-height: 1.55; font-weight: 500; }
.discount-field input:hover {
    border-color: #b8c0cc;
}
.discount-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.discount-field input[aria-invalid="true"] {
    border-color: #f04438;
    box-shadow: 0 0 0 3px rgba(240,68,56,.08);
}
.discount-help,
.average-help { margin: 9px 0 0; color: var(--text-tertiary); font-size: 12px; line-height: 1.55; }
.discount-actions,
.average-actions {
    margin-top: 14px;
}
.discount-primary-btn {
    cursor: pointer;
    font-size: 13px;
}.discount-reset-btn,
.average-reset-btn {
    padding: 0 16px;
    cursor: pointer;
    font-size: 13px;
}.average-weight-head button {
    border-radius:var(--radius-lg);
    cursor: pointer;
    font-weight: 600;
}


.average-weight-head button {
    border: 1px solid var(--line);
    background: var(--surface);
    color: #596579;
}
.average-weight-head button:hover {
    border-color: #c7ced8;
    background: #fafbfc;
    color: var(--text);
}
.discount-message,
.average-message { margin-top: 12px; padding: 9px 11px; border: 1px solid var(--primary-border); border-radius:var(--radius); background: var(--primary-soft-subtle); color: var(--primary-dark); font-size: 13px; line-height: 1.55; }
.discount-message.is-error {
    border-color: #fecdca;
    background: #fff5f4;
    color: var(--error);
}.average-message.is-error {
    border-color: #fecdca;
}
.discount-message.is-success,
.average-message.is-success { border-color: #b7e4c7; background: #f4fbf6; color: #267344; }
.discount-result,
.average-result { margin-top: 18px; padding: 18px 0 19px; border-top: 1px solid var(--line); }
.discount-result-head,
.average-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.discount-result-head > span,
.average-result-head > span { color: var(--text-tertiary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .055em; }
.discount-copy-btn,
.average-copy-btn {
    padding: 5px 0;
    cursor: pointer;
    font-size: 12px;
}
.discount-copy-btn:disabled,
.average-copy-btn:disabled { color: #a0a8b5; cursor: default; }
.discount-result-value,
.average-result-value { display: block; margin-top: 4px; color: var(--text-strong); font-size: clamp(34px,7vw,48px); line-height: 1.1; letter-spacing: -.04em; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.discount-result-summary,
.average-result-summary { margin: 7px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.discount-stat-grid,
.average-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 17px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.discount-stat-grid > div {
    min-width: 0;
    padding: 12px 13px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}.average-stat-grid > div {
    min-width: 0;
}
.discount-stat-grid span,
.average-stat-grid span { display: block; color: var(--text-tertiary); font-size: 11px; line-height: 1.4; }
.discount-stat-grid strong,
.average-stat-grid strong { display: block; margin-top: 3px; color: #344054; font-size: 14px; line-height: 1.45; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.discount-solution,
.average-solution { margin-top: 13px; padding: 12px 13px; border-left: 2px solid var(--primary-line-soft); background: var(--surface-info); }
.discount-solution span,
.average-solution span { display: block; color: var(--text-tertiary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.discount-solution code,
.average-solution code { display: block; margin-top: 4px; color: #344054; font-size: 13px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.discount-examples,
.average-examples { margin-top: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.discount-examples > span,
.average-examples > span { color: var(--text-tertiary); font-size: 11px; }
.discount-examples button,
.average-examples button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius:var(--radius-pill); background: var(--surface); color: #596579; cursor: pointer; font-size: 11px; }
.discount-examples button:hover,
.average-examples button:hover { border-color: var(--primary-border); color: var(--primary); }
.average-weight-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.average-weight-head > span { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.average-weight-head button { min-height: 36px; padding: 0 11px; font-size: 12px; }
.average-weight-rows { display: grid; gap: 8px; }
.average-weight-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 38px; align-items: end; gap: 8px; }
.average-remove-row {
    width: 38px;
    height: 50px;
    border: 1px solid var(--line);
    border-radius:var(--radius-lg);
    background: var(--surface);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.discount-primary-btn:focus-visible,
.discount-reset-btn:focus-visible,
.discount-copy-btn:focus-visible,
.discount-tab:focus-visible,
.discount-examples button:focus-visible,
.average-reset-btn:focus-visible,
.average-copy-btn:focus-visible,
.average-examples button:focus-visible,
.average-weight-head button:focus-visible,
.average-remove-row:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .discount-tool {
    margin-bottom: 34px;
}
    .discount-tabs,.average-tabs { margin-inline: -20px; padding-inline: 20px; }
    .discount-form-grid { grid-template-columns: 1fr; }
    .discount-field input,.average-weight-row input { height: 48px; }
    .discount-result-value,.average-result-value { font-size: 36px; }
    .discount-stat-grid,.average-stat-grid { grid-template-columns: 1fr 1fr; }
    .discount-stat-grid > div:last-child,.average-stat-grid > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
    .discount-tabs,.average-tabs { margin-inline: 0; padding-inline: 0; }
    .discount-actions { display: grid; grid-template-columns: 1fr auto; }
    .discount-primary-btn { width: 100%; }
    .average-weight-row { grid-template-columns: 1fr 1fr 34px; gap: 6px; }
    .average-remove-row { width: 34px; height: 48px; }
    .discount-stat-grid,.average-stat-grid { grid-template-columns: 1fr; }
    .discount-stat-grid > div:last-child,.average-stat-grid > div:last-child { grid-column: auto; }
}


/* v2.3 — Unit converter */
.converter-tool { max-width: 780px; margin: 4px auto 38px; }
.converter-tabs { display:flex; gap:4px; overflow-x:auto; padding:0 0 10px; scrollbar-width:thin; scroll-snap-type:x proximity; }
.converter-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    scroll-snap-align: start;
}
.converter-tab:hover { border-color:#c8d0da; color:#344054; }
.converter-tab.is-active { border-color:var(--primary-border); background:var(--primary-soft-subtle); color:var(--primary); }
.converter-panel {
    padding-top: 16px;
}
.converter-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 42px minmax(0,1fr); align-items:end; gap:9px; }
.converter-field { min-width:0; }
.converter-field > span { display:block; margin-bottom:6px; color:var(--text-secondary); font-size:12px; font-weight: 600; }
.converter-field input {
    width: 100%;
    height: 50px;
    border: 1px solid #d0d5dd;
    border-radius:var(--radius-lg);
    background: var(--surface);
    color: var(--text-strong);
    font: inherit;
    outline: none;
}.converter-field select {
    width: 100%;
    height: 50px;
    border: 1px solid #d0d5dd;
    border-radius:var(--radius-lg);
    background: var(--surface);
    color: var(--text-strong);
    font: inherit;
    font-size: 15px;
    outline: none;
}
.converter-field input { padding:0 13px; font-size:17px; font-weight: 600; font-variant-numeric:tabular-nums; }
.converter-field select { padding:0 34px 0 11px; cursor:pointer; }
.converter-field input:hover,.converter-field select:hover { border-color:#b8c0cc; }
.converter-field input:focus,.converter-field select:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--input-focus-ring); }
.converter-field input[aria-invalid="true"] { border-color:#f04438; box-shadow:0 0 0 3px rgba(240,68,56,.08); }
.converter-swap { width:42px; height:50px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); color:var(--text-tertiary); cursor:pointer; font-size:20px; line-height:1; transition:transform .12s ease,border-color .1s ease,color .1s ease; }
.converter-swap:hover { border-color:var(--primary-border); color:var(--primary); }
.converter-swap.is-swapped { transform:rotate(180deg); }
.converter-message { margin-top:12px; padding:9px 11px; border:1px solid var(--primary-border); border-radius:var(--radius); background:var(--primary-soft-subtle); color:var(--primary-dark); font-size:13px; line-height:1.55; }
.converter-message.is-error { border-color:#fecdca; background:#fff5f4; color:var(--error); }
.converter-message.is-success { border-color:#b7e4c7; background:#f4fbf6; color:#267344; }
.converter-result { margin-top:18px; padding:18px 0 19px; border-top:1px solid var(--line); }
.converter-result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.converter-result-head > span { color:var(--text-tertiary); font-size:12px; font-weight: 600; text-transform:uppercase; letter-spacing:.055em; }
.converter-copy { padding:5px 0; border:0; background:transparent; color:var(--primary); cursor:pointer; font-size:12px; font-weight: 600; }
.converter-copy:disabled { color:#a0a8b5; cursor:default; }
.converter-result-value { display:block; margin-top:4px; color:var(--text-strong); font-size:clamp(34px,7vw,48px); line-height:1.1; letter-spacing:-.035em; font-weight: 700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.converter-result-summary { margin:7px 0 0; color:var(--text-secondary); font-size:14px; line-height:1.6; }
.converter-formula { margin-top:13px; padding:12px 13px; border-left:2px solid var(--primary-line-soft); background:var(--surface-info); }
.converter-formula span { display:block; color:var(--text-tertiary); font-size:11px; font-weight: 600; text-transform:uppercase; letter-spacing:.04em; }
.converter-formula code { display:block; margin-top:4px; color:#344054; font-size:13px; line-height:1.6; white-space:normal; overflow-wrap:anywhere; }
.converter-all { padding:16px 0 2px; border-top:1px solid var(--line); }
.converter-all-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.converter-all-head span { display:block; color:#344054; font-size:13px; font-weight:700; }
.converter-all-head small { display:block; margin-top:2px; color:var(--text-tertiary); font-size:11px; line-height:1.45; }
.converter-all-head > strong { flex:0 0 auto; color:var(--text-tertiary); font-size:11px; font-weight:600; }
.converter-all-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:10px; border-top:1px solid var(--line); }
.converter-all-item { min-width:0; min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:0; border-bottom:1px solid var(--line); background:transparent; color:#596579; cursor:pointer; text-align:left; font:inherit; }
.converter-all-item:nth-child(odd) { border-right:1px solid var(--line); }
.converter-all-item:hover { background:#fafbfc; }
.converter-all-item.is-source { background:var(--surface-info); }
.converter-all-item.is-target { box-shadow:inset 2px 0 0 var(--primary); color:var(--primary); }
.converter-all-item span { min-width:0; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.converter-all-item strong { flex:0 1 auto; color:var(--text-strong); font-size:12px; line-height:1.35; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.converter-examples { margin-top:13px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.converter-examples > span { color:var(--text-tertiary); font-size:11px; }
.converter-examples button { min-height:32px; padding:0 10px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); color:#596579; cursor:pointer; font-size:11px; }
.converter-examples button:hover { border-color:var(--primary-border); color:var(--primary); }
.converter-tab:focus-visible,.converter-swap:focus-visible,.converter-copy:focus-visible,.converter-examples button:focus-visible,.converter-all-item:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
@media (max-width:720px) {
    .converter-tabs { margin-inline:-20px; padding-inline:20px; }
    .converter-grid { grid-template-columns:1fr 42px 1fr; }
    .converter-value-field { grid-column:1/-1; }
    .converter-result-value { font-size:36px; }
}
@media (max-width:480px) {
    .converter-tabs { margin-inline:0; padding-inline:0; }
    .converter-grid { grid-template-columns:1fr 38px 1fr; gap:7px; }
    .converter-field input {
    height: 48px;
}.converter-field select {
    height: 48px;
    font-size: 14px;
}
    .converter-field input { font-size:16px; }
    .converter-swap { width:38px; height:48px; }
    .converter-result-value { font-size:32px; }
    .converter-all-grid { grid-template-columns:1fr; }
    .converter-all-item:nth-child(odd) { border-right:0; }
    .converter-all-head { align-items:flex-end; }
}
@media (max-width:350px) {
    .converter-grid { grid-template-columns:1fr; }
    .converter-value-field { grid-column:auto; }
    .converter-swap { width:100%; height:38px; transform:none; }
    .converter-swap.is-swapped { transform:none; }
}


/* v2.4 — Geometry calculators */
.geometry-tool { max-width:780px; margin:4px auto 38px; }
.geometry-toolbar { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(160px,.65fr); gap:10px; align-items:end; }
.geometry-select-field { min-width:0; }
.geometry-select-field > span,.geometry-field > span { display:block; margin-bottom:6px; color:var(--text-secondary); font-size:12px; font-weight: 600; }
.geometry-select-field select,.geometry-field input { width:100%; height:50px; border:1px solid #d0d5dd; border-radius:var(--radius-lg); background:var(--surface); color:var(--text-strong); font:inherit; outline:none; }
.geometry-select-field select { padding:0 34px 0 11px; cursor:pointer; }
.geometry-field input { padding:0 13px; font-size:17px; font-weight: 600; font-variant-numeric:tabular-nums; }
.geometry-select-field select:hover,.geometry-field input:hover { border-color:#b8c0cc; }
.geometry-select-field select:focus,.geometry-field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--input-focus-ring); }
.geometry-field input[aria-invalid="true"] { border-color:#f04438; box-shadow:0 0 0 3px rgba(240,68,56,.08); }
.geometry-panel {
    margin-top: 16px;
    padding-top: 16px;
}
.geometry-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.geometry-message { margin-top:12px; padding:9px 11px; border:1px solid var(--primary-border); border-radius:var(--radius); background:var(--primary-soft-subtle); color:var(--primary-dark); font-size:13px; line-height:1.55; }
.geometry-message.is-error { border-color:#fecdca; background:#fff5f4; color:var(--error); }
.geometry-result { margin-top:18px; padding:18px 0 18px; border-top:1px solid var(--line); }
.geometry-result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.geometry-result-head > span { color:var(--text-tertiary); font-size:12px; font-weight: 600; text-transform:uppercase; letter-spacing:.055em; }
.geometry-copy {
    cursor: pointer;
}
.geometry-copy:disabled {
    cursor: default;
}
.geometry-result-value {
    display: block;
    margin-top: 4px;
    font-size: clamp(34px,7vw,48px);
    line-height: 1.1;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.geometry-result-summary { margin:7px 0 0; color:var(--text-secondary); font-size:14px; line-height:1.6; }
.geometry-formula-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:1px; margin-top:14px; border:1px solid var(--line); background:var(--line); }
.geometry-formula-grid > div { min-width:0; padding:11px 12px; background:var(--surface-info); }
.geometry-formula-grid span { display:block; color:var(--text-tertiary); font-size:11px; font-weight: 600; text-transform:uppercase; letter-spacing:.04em; }
.geometry-formula-grid code { display:block; margin-top:4px; color:#344054; font-size:13px; line-height:1.55; white-space:normal; overflow-wrap:anywhere; }
.geometry-note { margin-top:12px; color:var(--text-tertiary); font-size:12px; line-height:1.6; }
.geometry-note a { color:var(--primary); text-decoration:none; }
.geometry-note a:hover { text-decoration:underline; }
.geometry-select-field select:focus-visible,.geometry-field input:focus-visible,.geometry-copy:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
@media (max-width:640px) {
    .geometry-tool { margin-bottom:34px; }
    .geometry-toolbar { grid-template-columns:1fr 128px; gap:8px; }
    .geometry-fields { grid-template-columns:1fr 1fr; gap:8px; }
    .geometry-select-field select {
    height: 48px;
    font-size: 14px;
}.geometry-field input {
    height: 48px;
}
    .geometry-field input { font-size:16px; }
    .geometry-result-value { font-size:36px; }
    .geometry-formula-grid { grid-template-columns:1fr; }
}
@media (max-width:390px) {
    .geometry-toolbar { grid-template-columns:1fr; }
    .geometry-fields { grid-template-columns:1fr; }
    .geometry-result-value { font-size:32px; }
}

/* v2.5 — Tools hub + realtime finder */
.tools-hub-main [hidden] { display: none !important; }


.tool-finder {
    margin-top: 27px;
}
.tool-finder-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.tool-finder-heading h2 {
    margin: 0;
    color: #253044;
    letter-spacing: -.015em;
}
.tool-finder-total {
    color: var(--text-tertiary);
    font-size: 12px;
}
.tool-search-wrap { position: relative; }
.tool-search-icon { position: absolute; left: 13px; top: 50%; width: 15px; height: 15px; margin-top: -8px; border: 1.7px solid var(--text-tertiary); border-radius: 50%; pointer-events: none; }
.tool-search-icon::after { content: ""; position: absolute; width: 6px; height: 1.7px; right: -4px; bottom: -2px; background: var(--text-tertiary); transform: rotate(45deg); border-radius: 2px; }
.tool-search-input { width: 100%; height: 48px; padding: 0 66px 0 40px; border: 1px solid #cfd6df; border-radius:var(--radius-lg); background: var(--surface); color: var(--text-strong); font: inherit; font-size: 15px; outline: none; appearance: none; }
.tool-search-input::-webkit-search-cancel-button { display: none; }
.tool-search-input:hover { border-color: #b7c0cc; }
.tool-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.tool-search-clear { position: absolute; top: 7px; right: 7px; min-width: 49px; height: 34px; padding: 0 9px; border: 0; border-radius:var(--radius); background: #f3f5f7; color: #596579; cursor: pointer; font-size: 12px; font-weight: 600; }
.tool-search-clear:hover { background: #e9edf2; color: #344054; }
.tool-search-clear:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.tool-search-meta {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-top: 8px;
}
.tool-search-meta p { margin: 0; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; }
.tool-search-meta kbd, .seo-section kbd { padding: 1px 5px; border: 1px solid #d7dce3; border-bottom-width: 2px; border-radius:var(--radius-sm); background: var(--surface); color: #596579; font: inherit; font-size: 10px; white-space: nowrap; }
.tool-search-status { text-align: right; font-weight: 600; }
.tool-category-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 3px;
}
.tool-category-nav a {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
}

.tool-category-nav a span {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}
.popular-tools {
    padding-bottom: 2px;
}
.popular-tools .section-heading-row { margin-bottom: 11px; }
.section-kicker {
    margin: 0 0 2px;
}
.popular-tools h2 { margin: 0; color: #253044; font-size: 20px; letter-spacing: -.02em; }
.popular-tools-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.popular-tools-grid a {
    position: relative;
    min-width: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.popular-tools-grid strong {
    display: block;
    color: #253044;
    line-height: 1.35;
}
.popular-tools-grid span { display: block; margin-top: 5px; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; }
.popular-tools-grid b { position: absolute; top: 14px; right: 13px; color: #a2abb8; font-size: 14px; font-weight: 500; }
.popular-tools-grid a:hover b { color: var(--primary); }
.all-tools-anchor { scroll-margin-top: 78px; }
.tool-category { scroll-margin-top: 78px; }

.tool-category-heading > div { min-width: 0; }
.tool-category-heading > span { flex: 0 0 auto; color: var(--text-tertiary); font-size: 11px; font-weight: 600; }
.tool-search-empty { margin-top: 28px; padding: 27px 22px; border: 1px dashed #cbd3dd; border-radius:var(--radius-lg); background: #fbfcfd; text-align: center; }
.tool-search-empty strong { display: block; color: #344054; font-size: 16px; }
.tool-search-empty p { max-width: 550px; margin: 7px auto 14px; color: var(--text-tertiary); font-size: 13px; line-height: 1.6; }
.tool-search-empty button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius:var(--radius); background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 12px; font-weight: 600; }
.tool-search-empty button:hover { border-color: var(--primary-border); color: var(--primary); }
.tools-guide { margin-top: 44px; }
.tools-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.tools-content-grid article { padding: 14px 0; border-top: 1px solid var(--line); }
.tools-content-grid h3 { margin: 0 0 5px; color: #344054; font-size: 15px; }
.tools-content-grid p { margin: 0; color: #596579; font-size: 14px; line-height: 1.7; }
@media (max-width: 720px) {
    .popular-tools-grid { grid-template-columns: 1fr 1fr; }
    .tools-content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .tool-finder { margin-top: 22px; padding: 14px; }
    .tool-finder-heading h2 { font-size: 16px; }
    .tool-search-input { height: 46px; padding-left: 39px; font-size: 16px; }
    .tool-search-meta { display: block; }
    .tool-search-status { margin-top: 5px; text-align: left; }
    .tool-category-nav { margin-inline: 0; padding-inline: 0; max-width: 100%; }
    .popular-tools { margin-top: 28px; }
    
    
    .tool-category-heading { align-items: start; }
    .tool-category-heading > span { margin-top: 4px; }
    .tools-guide { margin-top: 38px; }
}
@media (max-width: 360px) {
    .tool-finder { padding: 12px; }
    .tool-finder-total { display: none; }
    .tool-category-nav { margin-inline: 0; padding-inline: 0; }
}



/* v2.6 — PWA install + widget embed builder */
.pwa-install-row {
    margin: 24px auto 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pwa-install-row[hidden] { display: none !important; }
.pwa-install-copy { min-width: 0; }
.pwa-install-copy strong {
    display: block;
    color: var(--text-primary);
}
.pwa-install-copy span { display: block; margin-top: 3px; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; }
.pwa-install-button {
    flex: 0 0 auto;
    padding: 0 13px;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}


.pwa-install-button[hidden] { display: none !important; }
.pwa-install-button:disabled { opacity: .55; cursor: default; }
.widget-header{max-width:760px}.widget-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,410px);gap:32px;margin-top:28px;padding:22px 0 32px;border-bottom:1px solid var(--line)}.widget-builder-controls h2{margin:0 0 16px;color:#253044;font-size:20px}.widget-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.widget-control-grid label,.widget-code-label{display:block}.widget-control-grid span,.widget-code-label>span{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:12px;font-weight: 600;}.widget-control-grid select{width:100%;height:42px;padding:0 11px;border:1px solid #cfd6df;border-radius:var(--radius);background:var(--surface);color:#344054;font:inherit;}.widget-code-label{margin-top:14px}.widget-code-label textarea{width:100%;min-height:116px;padding:11px;border:1px solid #cfd6df;border-radius:var(--radius);background:#f8fafc;color:#344054;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;}.widget-code-actions{display:flex;align-items:center;gap:12px;margin-top:10px;min-height:38px}.widget-code-actions button {
    padding: 0 13px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}.widget-code-actions span{color:var(--text-tertiary);font-size:11px;}.widget-preview-wrap{min-width:0}.widget-preview-label {
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 600;
}.widget-preview-wrap iframe{display:block;margin:0 auto;border-radius:var(--radius-lg);background:transparent;}.seo-section code{padding:2px 5px;border-radius:var(--radius-sm);background:#f2f4f7;color:#344054;font-size:.92em;}
@media(max-width:760px){.widget-builder{grid-template-columns:1fr;gap:24px}.widget-preview-wrap{order:-1}.widget-preview-wrap iframe{margin:0}.widget-control-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pwa-install-row:not([hidden]){display:block;margin-top:20px}.pwa-install-button{width:100%;margin-top:9px}.widget-builder{margin-top:22px;padding-top:16px}.widget-control-grid{grid-template-columns:1fr}.widget-code-actions{align-items:flex-start;flex-direction:column}}


/* v3.0 — Natural-language calculator */
.home-natural {
    display: grid;
    align-items: center;
}
.home-natural-copy strong { display: block; color: var(--text-primary); line-height: 1.35; }
.home-natural-copy span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
}
.home-natural-form { display: flex; gap: 8px; min-width: 0; }
.home-natural-form input {
    min-width: 0;
    flex: 1;

    padding: 0 12px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    outline: none;
}
.home-natural-form input::placeholder { color: #98a2b3; }
.home-natural-form input:focus { border-color: var(--primary-border-strong); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.home-natural-form button {
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}.natural-input-row button {
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--surface);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}
.natural-input-row button:hover {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
}
.home-natural-form button:focus-visible,
.natural-input-row button:focus-visible { outline: 3px solid var(--focus-ring-strong); outline-offset: 2px; }
.natural-tool{margin:28px 0 34px}.natural-panel {
    max-width: 760px;
    padding: 20px;
}.natural-form>label{display:block;margin-bottom:8px;color:#253044;font-size:15px;font-weight: 700}.natural-input-row{display:flex;gap:8px}.natural-input-row input{min-width:0;flex:1;height:48px;padding:0 14px;border:1px solid #cfd6df;border-radius:var(--radius);background:var(--surface);color:var(--text-primary);font:inherit;font-size:15px;}.natural-help {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.5;
}.natural-examples,.natural-suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.natural-examples button,
.natural-suggestions button {
    padding: 7px 9px;
    border: 1px solid #d8dee7;
    background: #fafbfc;
    color: var(--text-secondary);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}.natural-examples button:hover,.natural-suggestions button:hover{border-color:var(--primary-border);background:#f5f8fc;color:var(--primary-dark)}.natural-message{margin-top:16px;padding:10px 12px;border-left:3px solid #e6a23c;background:#fffaf0;color:#7a4f00;font-size:13px;line-height:1.5;}.natural-result{margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}.natural-result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-tertiary);font-size:11px;font-weight: 600;text-transform:uppercase;letter-spacing:.04em;}.natural-result-head button {
    cursor: pointer;
}.natural-result-value{display:block;margin-top:6px;color:var(--text-primary);font-size:34px;line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere;}.natural-result>p{margin:8px 0 0;color:var(--text-secondary);font-size:13px;line-height:1.6;}.natural-solution{margin-top:14px;padding:11px 12px;background:#f8fafc;border:1px solid #e5e9ef;border-radius:var(--radius);}.natural-solution span{display:block;margin-bottom:4px;color:var(--text-tertiary);font-size:10px;font-weight: 700;text-transform:uppercase;letter-spacing:.04em;}.natural-solution code{display:block;padding:0;background:transparent;color:#344054;font-size:12px;white-space:normal;overflow-wrap:anywhere}.natural-detail-link{display:inline-flex;margin-top:13px;color:var(--primary-dark);font-size:12px;font-weight: 600;text-decoration:none}.natural-support-grid{display:grid;gap:20px 28px}.natural-support-grid article{padding-top:12px;border-top:1px solid var(--line)}.natural-support-grid h3{margin:0 0 6px;font-size:15px}.natural-support-grid p{margin:0}
@media(max-width:720px){.natural-panel{padding:15px}.natural-result-value{font-size:30px}}
@media(max-width:480px){.natural-input-row{display:grid;grid-template-columns:1fr}.natural-input-row button{width:100%}.natural-examples{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.natural-examples button{white-space:nowrap}.natural-result-value{font-size:28px}}

@media(max-width:720px){.home-natural-copy span{max-width:620px}}
@media(max-width:480px){.home-natural-form{display:grid;grid-template-columns:1fr}.home-natural-form button{width:100%}}


/* v3.1 — SEO traffic architecture */
.home-popular-heading { align-items: end; }
.home-popular-heading h2 { margin: 2px 0 0; font-size: 21px; color: var(--text-primary); letter-spacing: -.02em; }
.home-popular-heading > a { font-size: 13px; font-weight: 650; color: var(--primary-dark); }
.home-popular-heading > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-popular-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-popular-grid a {
    position: relative;
    min-width: 0;

    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.home-popular-grid a:hover { border-color: #c8d0dc; background: #fbfcfd; transform: translateY(-1px); }
.home-popular-grid a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.home-popular-grid small { display: block; margin-bottom: 5px; color: var(--text-tertiary); font-size: 10px; line-height: 1.3; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.home-popular-grid strong { display: block; color: var(--text-primary); line-height: 1.35; }
.home-popular-grid span { display: block; color: var(--text-tertiary); line-height: 1.5; }
.home-popular-grid b { position: absolute; top: 14px; right: 13px; color: #98a2b3; font-size: 15px; line-height: 1; font-weight: 500; }
.home-popular-grid a:hover b { color: var(--primary); }
.tool-category-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
}
.tool-category-meta > a { font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; }

.category-hero { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.category-hero .section-kicker { margin: 0 0 6px; }
.category-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 16px; margin-top: 14px; color: #7b8797; font-size: 12px; }
.category-hero-meta a { font-weight: 600; color: var(--primary); }
.category-tool-list { margin-top: 26px; }
.category-tool-list > h2 { margin: 0 0 12px; font-size: 20px; color: #253044; }
.category-seo { margin-top: 34px; }
.category-discovery { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line); }
.category-discovery .section-heading-row { margin-bottom: 12px; }
.category-discovery .section-heading-row h2 { margin: 0; font-size: 20px; }
.category-discovery-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.category-discovery-links a {
    display: flex;
    min-width: 0;
    min-height: 132px;
    padding: 15px 16px;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.category-discovery-links strong {
    display: block;
    color: var(--text-strong);
    font-size: 14px;
    line-height: 1.4;
}
.category-discovery-links .category-discovery-desc {
    display: block;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
}
.category-discovery-links .category-discovery-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-top: auto;
    padding-top: 10px;
    color: var(--primary);
    font-size: 12px;
    line-height: 1.3;
}
.category-discovery-links .category-discovery-action > span {
    display: inline;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}
@media (max-width: 900px) {
    .category-discovery-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .home-popular-grid { grid-template-columns: 1fr 1fr; }
    .tool-category-meta { align-items: flex-start; }
    .tool-category-heading { align-items: flex-start; }
}
@media (max-width: 640px) {
    .category-discovery-links { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .home-popular-tools { margin-top: 24px; }
    .home-popular-grid { grid-template-columns: 1fr; }
    .category-hero-meta { align-items: flex-start; }
}

/* v3.2 — Scientific calculator, fractions, GPA and quadratic equation */

.scientific-topbar,.tool-result-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.scientific-angle{display:inline-flex;border-width:1px;border-style:solid;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);}
.scientific-angle button {
    height: 34px;
    padding: 0 13px;
    border: 0;
    border-right: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: pointer;
}
.scientific-angle button:last-child{border-right:0}.scientific-angle button.is-active{background:#f4f7fb;color:var(--primary)}
.scientific-copy,
.tool-result-head button {
    cursor: pointer;
}
.scientific-screen{margin-top:12px;padding:14px;border-width:1px;border-style:solid;border-radius:var(--radius-lg);}
.scientific-screen label{display:block;color:var(--text-tertiary);font-size:11px;font-weight: 600;text-transform:uppercase;letter-spacing:.04em;}
.scientific-screen input{width:100%;height:44px;margin-top:3px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text-strong);font:inherit;font-size:17px;outline:none}
.scientific-result{display:block;min-height:58px;padding-top:9px;text-align:right;color:var(--text-strong);font-size:clamp(32px,7vw,46px);font-weight: 700;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.scientific-keypad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:10px}
.scientific-keypad button{min-width:0;height:48px;border-width:1px;border-style:solid;background:#f8fafc;color:#344054;font:inherit;font-size:14px;font-weight: 600;cursor:pointer;transition:background .08s ease,border-color .08s ease,transform .05s ease}
.scientific-keypad button:hover{background:#f1f4f8;border-color:var(--line-strong);}.scientific-keypad button:active{transform:translateY(1px)}
.scientific-keypad .num{background:var(--surface);color:var(--text-primary);font-size:17px;}.scientific-keypad .op{background:var(--primary-soft-subtle);color:var(--primary)}.scientific-keypad .equals{background:var(--primary);border-color:var(--primary);color:var(--surface);font-size:19px;}
.scientific-message,.fraction-message,.gpa-message,.quadratic-message{margin-top:11px;padding:9px 11px;border:1px solid var(--primary-border);border-radius:var(--radius);background:var(--primary-soft-subtle);color:var(--primary-dark);font-size:13px;line-height:1.55;}
.scientific-message.is-error {
    border-color: #fecdca;
    background: #fff5f4;
    color: var(--error);
}.fraction-message.is-error,
.gpa-message.is-error,
.quadratic-message.is-error {
    border-color: #fecdca;
}
.tool-primary-button,
.tool-secondary-button {
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}.tool-secondary-button {
    padding: 0 13px;
}
.tool-primary-button:focus-visible,.tool-secondary-button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.tool-primary-button:disabled,.tool-secondary-button:disabled{opacity:.55;cursor:not-allowed}
.tool-result-head>span{color:var(--text-tertiary);font-size:11px;font-weight: 700;text-transform:uppercase;letter-spacing:.05em;}.tool-result-head button:disabled {
    cursor: default;
}
.tool-result-main {
    display: block;
    margin-top: 5px;
    font-size: clamp(34px,7vw,48px);
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.tool-formula{margin-top:13px;padding:12px 13px;border-left:2px solid var(--primary-line-soft);background:var(--surface-info)}.tool-formula span{display:block;color:var(--text-tertiary);font-size:11px;font-weight: 600;text-transform:uppercase;letter-spacing:.04em;}.tool-formula code{display:block;margin-top:4px;color:#344054;font-size:13px;line-height:1.6;white-space:normal;overflow-wrap:anywhere}
.tool-examples{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:13px}.tool-examples>span{color:var(--text-tertiary);font-size:11px;}.tool-examples button {
    padding: 0 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: #596579;
    font-size: 11px;
    cursor: pointer;
}.tool-examples button:hover{border-color:var(--primary-border);color:var(--primary)}

.fraction-expression{display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);gap:12px;align-items:center}.fraction-box{min-width:0;margin:0;padding:11px;border:1px solid var(--line);border-radius:var(--radius-lg);}.fraction-box legend{padding:0 5px;color:var(--text-tertiary);font-size:11px;font-weight: 600;}.fraction-box label span,.fraction-operator>span{display:block;margin-bottom:5px;color:var(--text-tertiary);font-size:11px;}.fraction-box input {
    width: 100%;
    height: 43px;
    border: 1px solid #d0d5dd;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    outline: none;
}.fraction-operator select {
    width: 100%;
    height: 43px;
    border: 1px solid #d0d5dd;
    font: inherit;
    font-weight: 600;
    text-align: center;
    outline: none;
}.fraction-line{display:block;height:1px;margin:7px 4px;background:var(--text-tertiary);}.fraction-operator select{padding:0 8px;font-size:19px;cursor:pointer}.fraction-form>.tool-primary-button{display:block;margin:13px auto 0}.fraction-result-block{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.fraction-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 14px;
}.fraction-stats>div{padding:11px 12px;background:var(--surface);}.fraction-stats span,.gpa-stats span,.quadratic-grid span{display:block;color:var(--text-tertiary);font-size:11px;}.fraction-stats strong,.gpa-stats strong,.quadratic-grid strong{display:block;margin-top:3px;color:#344054;font-size:15px;overflow-wrap:anywhere}

.tool-tabs{display:flex;gap:4px;overflow-x:auto;padding:0 0 10px}.tool-tabs button {
    flex: 0 0 auto;
    padding: 0 13px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: pointer;
}.tool-tabs button.is-active{border-color:var(--primary-border);background:var(--primary-soft-subtle);color:var(--primary)}
.gpa-table-head,.gpa-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr) 38px;gap:8px;align-items:center}.gpa-table-head{padding:0 4px 6px;color:var(--text-tertiary);font-size:11px;font-weight: 600;}.gpa-row{margin-bottom:7px}.gpa-row input,
.gpa-cumulative-grid input {
    width: 100%;
    height: 46px;
    padding: 0 11px;
    border: 1px solid #d0d5dd;
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    outline: none;
}.gpa-row button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius:var(--radius-lg);
    background: var(--surface);
    font-size: 20px;
    cursor: pointer;
}.gpa-cumulative-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gpa-cumulative-grid label span{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:12px;font-weight: 600;}.gpa-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.gpa-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
}.gpa-stats>div{padding:11px 12px;background:var(--surface);}

.quadratic-equation{padding:14px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#f8fafc;text-align:center;color:var(--text-primary);font-size:20px;font-weight: 700;}.quadratic-form{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:9px;align-items:end;margin-top:12px}.quadratic-form label span{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:12px;font-weight: 600;}.quadratic-form input {
    width: 100%;
    height: 46px;
    padding: 0 11px;
    border: 1px solid #d0d5dd;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    outline: none;
}.quadratic-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.quadratic-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 12px;
}.quadratic-grid>div{min-width:0;padding:11px 12px;background:var(--surface);}.quadratic-steps{margin:14px 0 0;padding-left:22px;color:var(--text-secondary);font-size:13px;line-height:1.7;}.quadratic-steps li+li{margin-top:3px}

.scientific-keypad button:focus-visible,.scientific-angle button:focus-visible,.scientific-copy:focus-visible,.fraction-tool button:focus-visible,.fraction-tool input:focus-visible,.fraction-tool select:focus-visible,.gpa-tool button:focus-visible,.gpa-tool input:focus-visible,.quadratic-tool button:focus-visible,.quadratic-tool input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media(max-width:640px){.scientific-tool,.fraction-tool,.gpa-tool,.quadratic-tool{margin-bottom:34px}.scientific-keypad{gap:5px}.scientific-keypad button{height:45px;font-size:12px}.scientific-keypad .num{font-size:16px}.fraction-expression{grid-template-columns:1fr 66px 1fr;gap:7px}.fraction-stats{grid-template-columns:1fr}.gpa-cumulative-grid{grid-template-columns:1fr}.quadratic-form{grid-template-columns:1fr 1fr 1fr}.quadratic-form .tool-primary-button{grid-column:1/-1}.quadratic-grid{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.scientific-keypad button{height:43px;padding:0 2px;font-size:11px}.scientific-keypad .num{font-size:15px}.fraction-expression{grid-template-columns:1fr}.fraction-operator{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px}.fraction-operator>span{margin:0}.quadratic-grid{grid-template-columns:1fr}.gpa-table-head,.gpa-row{grid-template-columns:minmax(0,1fr) 90px 34px;gap:5px}}


/* v3.3 — Linear system, GCD/LCM, prime checker and study grades */

.system-equation-label{padding:13px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#f8fafc;text-align:center;color:#344054;font-size:16px;font-weight: 700;}
.system-form{margin-top:12px}.system-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:center;margin-bottom:8px}.system-row input {
    min-width: 0;
    width: 100%;
    height: 44px;
    padding: 0 9px;
    border: 1px solid #d0d5dd;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    outline: none;
}.system-row span{color:var(--text-tertiary);font-size:13px;white-space:nowrap;}.system-form>.tool-primary-button{display:block;margin:11px auto 0}.system-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.system-main{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}.system-main strong{padding:13px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--text-primary);text-align:center;font-size:20px;}.system-determinants,
.gcd-results,
.prime-stats,
.grade-stats {
    display: grid;
    margin-top: 10px;
}.system-determinants{grid-template-columns:repeat(3,1fr)}.gcd-results{grid-template-columns:1fr 1fr}.grade-stats {
    grid-template-columns: repeat(2,1fr);
}.system-determinants>div,.gcd-results>div,.prime-stats>div,.grade-stats>div{min-width:0;padding:11px 12px;background:var(--surface);}.system-determinants span,.gcd-results span,.prime-stats span,.grade-stats span{display:block;color:var(--text-tertiary);font-size:11px;}.system-determinants strong,
.prime-stats strong,
.grade-stats strong {
    display: block;
    margin-top: 3px;
    color: #344054;
    font-size: 15px;
    overflow-wrap: anywhere;
}.gcd-results strong {
    display: block;
    margin-top: 3px;
    color: #344054;
    overflow-wrap: anywhere;
}
.number-list-field>span,.prime-input-field>span,.grade-settings label>span{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:12px;font-weight: 600;}.number-list-field textarea {
    width: 100%;
    min-height: 86px;
    padding: 11px 12px;
    border: 1px solid #d0d5dd;
    font: inherit;
    font-size: 16px;
    line-height: 1.55;
    resize: vertical;
    outline: none;
}.number-list-field small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
}.gcd-results strong{font-size:clamp(24px,5vw,34px);font-variant-numeric:tabular-nums}.gcd-tool>.tool-result-head{margin-top:14px}
.prime-input-field input {
    width: 100%;
    height: 50px;
    padding: 0 13px;
    border: 1px solid #d0d5dd;
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    outline: none;
}.prime-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.prime-result>p{margin:7px 0 0;color:var(--text-secondary);font-size:13px;line-height:1.6;}.prime-stats{grid-template-columns:minmax(130px,.45fr) minmax(0,1.55fr)}
.grade-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.grade-settings select,
.grade-settings input {
    width: 100%;
    height: 44px;
    padding: 0 11px;
    border: 1px solid #d0d5dd;
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    outline: none;
}.grade-table-head,.grade-row{display:grid;grid-template-columns:minmax(100px,1.25fr) minmax(70px,.65fr) minmax(80px,.75fr) 38px;gap:7px;align-items:center}.grade-table-head{padding:0 4px 6px;color:var(--text-tertiary);font-size:11px;font-weight: 600;}.grade-row{margin-bottom:7px}.grade-row input {
    min-width: 0;
    width: 100%;
    height: 44px;
    padding: 0 9px;
    border: 1px solid #d0d5dd;
    background: var(--surface);
    font: inherit;
    font-size: 14px;
    outline: none;
}.grade-row button{width:38px;height:38px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--text-tertiary);font-size:20px;cursor:pointer;}.grade-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}

.linear-system-tool button:focus-visible,.gcd-tool button:focus-visible,.prime-tool button:focus-visible,.grade-tool button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media(max-width:640px){.linear-system-tool,.gcd-tool,.prime-tool,.grade-tool{margin-bottom:34px}.system-main,.gcd-results,.grade-settings{grid-template-columns:1fr}.grade-stats{grid-template-columns:1fr 1fr}.grade-table-head,.grade-row{grid-template-columns:minmax(90px,1fr) 72px 76px 34px;gap:5px}.grade-row button{width:34px}}
@media(max-width:430px){.system-determinants,.prime-stats,.grade-stats{grid-template-columns:1fr}.system-row{grid-template-columns:1fr 30px 1fr 30px 1fr;gap:4px}.system-row input:nth-of-type(3){grid-column:auto}.system-row span:last-of-type{grid-column:auto}.system-row span{font-size:11px}.grade-table-head{display:none}.grade-row{grid-template-columns:minmax(60px,1fr) 58px 62px 30px}.grade-row input{padding:0 7px;font-size:13px}.grade-row button{width:30px}.tool-result-main{font-size:32px}}


/* v3.4 — trust, methodology and hardened utility states */
.trust-strip{display:flex;align-items:center;flex-wrap:wrap;margin:14px auto 4px;border:1px solid var(--line);background:#fbfcfe;color:var(--text-tertiary);font-size:12px;line-height:1.45;}.trust-strip strong{color:#344054;font-weight:700}.trust-strip a{color:var(--primary);font-weight:600;text-decoration:none}.trust-strip a:hover{text-decoration:underline}.trust-strip--tool{margin:0}
.method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin-top:18px;border:0}
.method-grid article{padding:16px 0;border-top:1px solid var(--line);border-right:0;border-bottom:0}
.method-grid h3{margin:0 0 7px;font-size:16px}
.method-grid p{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.65}
.method-grid code{padding:1px 4px;border-radius:var(--radius-sm);background:var(--surface-subtle)}
.error-page{width:min(calc(100% - 40px),720px);padding-top:64px;padding-bottom:80px;text-align:center}
.error-page h1{font-size:clamp(34px,5vw,46px);letter-spacing:-.035em}
.error-page>p{max-width:600px;margin:12px auto 0;color:var(--text-secondary);font-size:15px;line-height:1.65}
.error-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;max-width:600px;margin:28px auto 14px}
.error-search input{min-width:0;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text-primary);font:inherit;outline:none}
.error-links{display:flex;justify-content:center;gap:7px 9px;flex-wrap:wrap;margin:12px auto 24px}
.error-links a{padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text-secondary);text-decoration:none;font-size:12px;font-weight:600}
.error-links a:hover{border-color:var(--primary-border);background:var(--primary-soft-subtle);color:var(--primary)}
.secondary-link{display:inline-flex;align-items:center;min-height:40px;color:var(--text-secondary);font-weight:600;text-decoration:none}
.secondary-link:hover{color:var(--primary)}
@media(max-width:640px){.trust-strip span{flex:1 1 100%}.method-grid{grid-template-columns:1fr}.error-page{width:min(calc(100% - 28px),720px);padding-top:42px;padding-bottom:56px}.error-search{grid-template-columns:1fr}.error-search .primary-button{width:100%}}


/* v3.6 Statistics & math expansion */
.stats-input-field>span,.pythagorean-form label>span,.combinatorics-form label>span,.probability-form label>span{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:12px;font-weight: 600;}.stats-input-field textarea {
    width: 100%;
    min-height: 96px;
    padding: 11px 12px;
    border: 1px solid #d0d5dd;
    background: var(--surface);
    font: inherit;
    font-size: 16px;
    line-height: 1.55;
    resize: vertical;
    outline: none;
}.stats-input-field small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
}.probability-help {
    display: block;
    margin-top: 5px;
    color: var(--text-tertiary);
    font-size: 11px;
}.stats-result,.pythagorean-result,.combinatorics-result,.probability-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.stats-grid,
.pythagorean-stats,
.combinatorics-grid,
.probability-grid {
    display: grid;
    margin-top: 12px;
}.stats-grid{grid-template-columns:repeat(4,1fr)}.pythagorean-stats{grid-template-columns:repeat(3,1fr)}.combinatorics-grid{grid-template-columns:repeat(3,1fr)}.probability-grid{grid-template-columns:repeat(4,1fr)}.stats-grid>div,.pythagorean-stats>div,.combinatorics-grid>div,.probability-grid>div{min-width:0;padding:11px 12px;background:var(--surface);}.stats-grid span,
.pythagorean-stats span,
.combinatorics-grid span,
.probability-grid span {
    display: block;
    font-size: 11px;
}.stats-grid strong,
.pythagorean-stats strong {
    display: block;
    margin-top: 3px;
    color: #344054;
    font-size: 15px;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}.combinatorics-grid strong,
.probability-grid strong {
    display: block;
    margin-top: 3px;
    color: #344054;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}.stats-sorted{margin-top:12px;padding:11px 12px;color:var(--text-secondary);font-size:12px;line-height:1.65;overflow-wrap:anywhere;}.pythagorean-form,.combinatorics-form,.probability-form{display:grid;gap:10px;align-items:end}.pythagorean-form{grid-template-columns:repeat(4,minmax(0,1fr))}.combinatorics-form,.probability-form{grid-template-columns:repeat(2,minmax(0,1fr))}.pythagorean-form input,
.pythagorean-form select,
.combinatorics-form input {
    width: 100%;
    height: 46px;
    padding: 0 11px;
    border: 1px solid #d0d5dd;
    font: inherit;
    font-size: 15px;
    outline: none;
}.probability-form input {
    width: 100%;
    height: 46px;
    padding: 0 11px;
    border: 1px solid #d0d5dd;
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    outline: none;
}.probability-form select {
    width: 100%;
    height: 46px;
    padding: 0 11px;
    border: 1px solid #d0d5dd;
    border-radius:var(--radius-lg);
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    outline: none;
}.pythagorean-form>.tool-primary-button,.combinatorics-form>.tool-primary-button,.probability-form>.tool-primary-button{height:46px}.combinatorics-grid strong{font-size:clamp(16px,3.4vw,24px);max-height:122px;overflow:auto;word-break:break-all}.combinatorics-note {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.55;
}.probability-tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line);overflow-x:auto}.probability-tabs button {
    flex: 0 0 auto;
    padding: 9px 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}.probability-tabs button.is-active{border-bottom-color:var(--primary);color:var(--primary)}.probability-panel[hidden]{display:none}.probability-grid strong{font-size:14px}.stats-mode-note{margin:7px 0 0;color:var(--text-tertiary);font-size:12px;line-height:1.6;}.tool-result-main.is-textual{font-size:clamp(24px,5vw,34px);line-height:1.25}.stats-tool button:focus-visible,.pythagorean-tool button:focus-visible,.combinatorics-tool button:focus-visible,.probability-tool button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media(max-width:720px){.stats-grid,.probability-grid{grid-template-columns:1fr 1fr}.pythagorean-form,.combinatorics-form,.probability-form{grid-template-columns:1fr 1fr}.combinatorics-grid{grid-template-columns:1fr}}
@media(max-width:430px){.stats-grid,.pythagorean-stats,.probability-grid{grid-template-columns:1fr}.pythagorean-form,.combinatorics-form,.probability-form{grid-template-columns:1fr}.pythagorean-form>.tool-primary-button,.combinatorics-form>.tool-primary-button,.probability-form>.tool-primary-button{grid-column:auto}}


/* v3.7 — time & everyday utilities */
.utility-tool{max-width:780px;margin:4px auto 38px}.utility-form{display:grid;gap:10px;align-items:end}.utility-form--2{grid-template-columns:1fr 1fr}.utility-form--3{grid-template-columns:repeat(3,minmax(0,1fr))}.utility-form--4{grid-template-columns:repeat(4,minmax(0,1fr))}.utility-form label>span,.utility-field>span{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:12px;font-weight: 600;}.utility-form input,.utility-form select,.utility-field input{width:100%;height:46px;padding:0 11px;border:1px solid #d0d5dd;border-radius:var(--radius-lg);background:var(--surface);color:var(--text-primary);font:inherit;font-size:15px;outline:none;}.utility-field small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
}.utility-form .utility-check{display:flex;align-items:center;gap:8px;height:46px;padding:0 11px;border:1px solid #d0d5dd;border-radius:var(--radius-lg);background:var(--surface);}.utility-check input{width:16px;height:16px;margin:0}.utility-form .utility-check > span{margin:0;font-size:13px}.utility-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.utility-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:12px;border:1px solid var(--line);background:var(--line)}.utility-stats>div{padding:11px 12px;background:var(--surface);}.utility-stats span {
    display: block;
    font-size: 11px;
}.utility-stats strong{display:block;margin-top:3px;color:#344054;font-size:15px;overflow-wrap:anywhere}.utility-secondary{margin-top:10px;padding:10px 12px;border-left:2px solid var(--primary-line-soft);background:var(--surface-info);color:var(--text-secondary);font-size:13px;line-height:1.6;overflow-wrap:anywhere;}.utility-generate{margin-top:12px;min-height:44px}.utility-random-output{font-size:clamp(22px,4.5vw,34px);line-height:1.45;overflow-wrap:anywhere}.utility-form input:focus,.utility-form select:focus,.utility-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus-ring)}.utility-tool button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media(max-width:720px){.utility-form--3,.utility-form--4{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.utility-form--2,.utility-form--3,.utility-form--4,.utility-stats{grid-template-columns:1fr}.utility-check{height:42px}.utility-random-output{font-size:22px}}

/* v4.0 — finance & Vietnam utility expansion */
.finance-tool {
    margin: 4px auto 38px;
}.finance-panel {
    padding: 18px;
}.finance-form{display:grid;gap:10px;align-items:end}.finance-form label>span{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:12px;font-weight: 600;}.finance-form input,
.finance-form select {
    width: 100%;
    height: 46px;
    padding: 0 11px;
    border: 1px solid #d0d5dd;
    border-radius:var(--radius-lg);
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    outline: none;
}.finance-form input:focus,.finance-form select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus-ring)}.finance-form>.tool-primary-button{height:46px}.finance-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.finance-summary{margin:8px 0 0;color:var(--text-tertiary);font-size:13px;line-height:1.6;}.finance-stats {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-top: 13px;
}.finance-stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}.finance-stats>div{min-width:0;padding:11px 12px;background:var(--surface);}.finance-stats span {
    display: block;
    font-size: 11px;
}.finance-stats strong{display:block;margin-top:4px;color:#344054;font-size:15px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.finance-tool .finance-formula{font-size:12px;line-height:1.55}.finance-alert{max-width:820px;margin:-18px auto 34px;padding:12px 14px;border-left:3px solid #e8b34a;background:#fffaf0;color:#5f4b20;font-size:12px;line-height:1.65;}.finance-alert a{color:inherit;font-weight: 700}.finance-tool button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media(max-width:820px){.finance-form--5{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-form--4{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-form--3{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-form>.tool-primary-button{grid-column:1/-1}.finance-stats--4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.finance-panel{padding:14px}.finance-form--3,.finance-form--4,.finance-form--5,.finance-stats,.finance-stats--4{grid-template-columns:1fr}.finance-form>.tool-primary-button{grid-column:auto}.finance-alert{margin-top:-20px}}


/* v4.1 finance expansion */
.finance-form--6>.tool-primary-button{grid-column:1/-1}.finance-mode-row{margin-bottom:11px}.finance-mode-row label>span{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:12px;font-weight: 600;}.finance-mode-row select{width:100%;height:46px;padding:0 11px;border:1px solid #d0d5dd;border-radius:var(--radius-lg);background:var(--surface);color:var(--text-primary);font:inherit;font-size:15px;}.finance-inline-title{margin:0;color:var(--text-primary);font-size:17px;line-height:1.35;}.finance-tool--secondary{margin-top:-10px}.vat-line-head,.vat-line-row{display:grid;grid-template-columns:minmax(0,1fr) 86px 92px 38px;gap:8px;align-items:center}.vat-line-head{padding:12px 3px 6px;color:var(--text-tertiary);font-size:11px;font-weight: 600;}.vat-line-row{margin-bottom:7px}.vat-line-row input,
.vat-line-row select {
    min-width: 0;
    width: 100%;
    height: 43px;
    padding: 0 9px;
    border: 1px solid #d0d5dd;
    border-radius:var(--radius-lg);
    background: var(--surface);
    font: inherit;
    font-size: 14px;
    outline: none;
}.vat-line-row [data-vat-remove]{width:38px;height:38px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--text-tertiary);font-size:20px;cursor:pointer;}.vat-add-row{margin-top:4px}.finance-tool--secondary .finance-stats{margin-top:14px}
@media(max-width:820px){.finance-form--6{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-form--6>.tool-primary-button{grid-column:1/-1}}
@media(max-width:520px){.finance-form--6{grid-template-columns:1fr}.finance-form--6>.tool-primary-button{grid-column:auto}.vat-line-head{display:none}.vat-line-row{grid-template-columns:minmax(0,1fr) 58px 72px 32px;gap:5px}.vat-line-row input,.vat-line-row select{height:42px;padding:0 6px;font-size:13px}.vat-line-row [data-vat-remove]{width:32px;height:36px}.finance-inline-title{font-size:16px}}

/* v4.2 income tax / gross-net */
.finance-source-note{max-width:820px;margin:-18px auto 34px;padding:12px 14px;border:1px solid var(--primary-line-soft);background:var(--surface-info);color:#344054;font-size:12px;line-height:1.65}.finance-source-note a{font-weight: 700;color:var(--primary)}.tax-rate-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:14px 0;border:1px solid var(--line);background:var(--line)}.tax-rate-grid>div{padding:12px;background:var(--surface);}.tax-rate-grid strong,.tax-rate-grid span{display:block}.tax-rate-grid strong{font-size:12px;color:var(--text-tertiary);}.tax-rate-grid span{margin-top:5px;font-size:18px;font-weight: 700;color:var(--text-primary);}.tax-breakdown{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#f9fafb;color:var(--text-secondary);font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;}.finance-form label[hidden]{display:none!important}
@media(max-width:720px){.tax-rate-grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.tax-rate-grid{grid-template-columns:1fr}.finance-source-note{margin-top:-20px}}


/* v4.3 — labor, employer insurance, overtime & bonus */
.finance-stats--6{grid-template-columns:repeat(3,minmax(0,1fr))}.finance-form .labor-check{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 11px;border:1px solid #d0d5dd;border-radius:var(--radius-lg);background:var(--surface);}.finance-form .labor-check input{width:16px;height:16px;margin:0;flex:0 0 auto}.finance-form .labor-check > span{margin:0;font-size:12px;line-height:1.4}.labor-check[hidden]{display:none!important}
@media(max-width:720px){.finance-stats--6{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.finance-stats--6{grid-template-columns:1fr}.labor-check{min-height:42px}}


/* v4.4 — everyday living utilities */
.living-breakdown{margin-top:16px}.living-breakdown table{min-width:520px}.finance-form-note{margin:10px 0 0;color:var(--text-tertiary);font-size:13px;line-height:1.6;}.finance-form [hidden]{display:none!important}
@media(max-width:520px){.living-breakdown{overflow-x:auto}.finance-form-note{font-size:12px}}

/* v4.5 — UI/UX consistency & mobile fix */
/* Shared calculator shell: keep every generation of tool visually related. */
.discount-panel,
.converter-panel,
.finance-panel {
    border: 1px solid var(--line);
}.natural-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}.fraction-form {
    background: var(--surface);
}
.discount-panel,
.converter-panel {
    padding: 18px;
}
.date-calculator-panel,
.discount-panel,
.converter-panel,
.geometry-panel {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}.average-panel {
    border-bottom: 1px solid var(--line);
}


/* Generic feedback for v4.x calculators. These messages are only exposed on invalid input. */
.tool-message {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line-error);
    border-radius: var(--radius);
    background: var(--surface-error);
    color: var(--error);
    font-size: 13px;
    line-height: 1.55;
}

/* Shared result rhythm and controls. */
.tool-result-head,
.percent-result-head,
.date-result-head,
.discount-result-head,
.average-result-head,
.converter-result-head,
.geometry-result-head,
.natural-result-head {
    min-height: 32px;
}


/* Finance forms: no more orphaned submit button on desktop. */
.finance-form--3,
.finance-form--4,
.finance-form--5,
.finance-form--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finance-form > .tool-primary-button { grid-column: 1 / -1; justify-self: start; min-width: 160px; }
.finance-mode-row { max-width: 360px; }

/* Slightly stronger readability for supporting text. */
.tool-category-nav a span,
.small-note,
.widget-preview-label,
.home-natural-copy span,
.natural-help,
.stats-input-field small,
.number-list-field small,
.utility-field small,
.combinatorics-note,
.finance-stats span,
.utility-stats span,
.stats-grid span,
.pythagorean-stats span,
.combinatorics-grid span,
.probability-grid span {
    color: var(--text-tertiary);
}

/* Compact trust row: trust should support the task, not push the calculator down. */
.trust-strip {
    justify-content: flex-start;
    gap: 8px 14px;
    padding: 9px 12px;
    border-radius: var(--radius);
}
.trust-strip--tool { margin-bottom: 18px; }
.trust-strip--compact span { min-width: 0; }


/* Tools hub: finder stays useful on long desktop lists. */
@media (min-width: 761px) {
    .tool-finder {
        position: sticky;
        top: 74px;
        z-index: 12;
        box-shadow: 0 8px 20px rgba(16, 24, 40, .045);
    }
}

/* Scroll affordance is inserted only when JS detects real horizontal overflow. */
.table-scroll-hint {
    display: none;
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.4;
}
.example-table-wrap.is-scrollable > .table-scroll-hint { display: block; }
.example-table-wrap.is-scrollable { border: 0; border-radius: 0; }
.example-table-wrap.is-scrollable > table { border: 1px solid var(--line); border-radius: var(--radius); }

/* Header switches before the long Vietnamese menu becomes cramped. */
@media (max-width: 760px) {
    
    
    
    
    .mobile-nav-panel { top: calc(100% + 7px); }

    /* Prevent iOS Safari zooming form controls on focus. */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea { font-size: 16px !important; }
    .discount-tab, .average-tab, .converter-tab, .tool-tabs button, .probability-tabs button { min-height: 44px; }

    .calculator-landing .content-header { margin-bottom: 18px; }
    .trust-strip--tool { margin-bottom: 16px; }
    .trust-strip--tool span { flex: 0 1 auto; }

    .finance-form--3,
    .finance-form--4,
    .finance-form--5,
    .finance-form--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .finance-form > .tool-primary-button { grid-column: 1 / -1; width: auto; }

    .percent-calculator-panel,
    .date-calculator-panel,
    .discount-panel,
    .average-panel,
    .converter-panel,
    .geometry-panel { padding: 15px; }
}

@media (max-width: 520px) {
    
    .finance-form--3,
    .finance-form--4,
    .finance-form--5,
    .finance-form--6,
    .finance-stats,
    .finance-stats--3,
    .finance-stats--4,
    .finance-stats--6 { grid-template-columns: 1fr; }
    .finance-form > .tool-primary-button { grid-column: 1; width: 100%; justify-self: stretch; }

    /* VAT invoice rows become a two-line mobile form instead of four squeezed columns. */
    .vat-line-head { display: none; }
    .vat-line-row {
        grid-template-columns: minmax(0, 1fr) 92px 40px;
        gap: 8px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fbfcfd;
    }
    .vat-line-row > label:first-child { grid-column: 1 / -1; }
    .vat-line-row > label:nth-child(2) { grid-column: 1; }
    .vat-line-row > label:nth-child(3) { grid-column: 2; }
    .vat-line-row [data-vat-remove] { grid-column: 3; align-self: end; width: 40px; height: 44px; }
    .vat-line-row label::before {
        display: block;
        margin-bottom: 4px;
        color: var(--text-tertiary);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
    }
    .vat-line-row > label:first-child::before { content: "Giá chưa VAT"; }
    .vat-line-row > label:nth-child(2)::before { content: "Số lượng"; }
    .vat-line-row > label:nth-child(3)::before { content: "VAT"; }
    .vat-line-row input,
    .vat-line-row select { height: 44px; padding-inline: 10px; }

    .living-breakdown { margin-inline: 0; }
    .table-scroll-hint { display: block; }
}

@media (max-width: 420px) {
    /* Keep a professional reading gutter instead of shrinking to 6–9 px. */
    .site-shell { width: min(calc(100% - 32px), var(--shell)); }
    .tool-message { font-size: 13px; }
    .trust-strip { gap: 5px 10px; }
    .trust-strip span { flex: 1 1 100%; }
}

@media (max-width: 340px) {
    .site-shell { width: min(calc(100% - 24px), var(--shell)); }
}



/* v4.6 — centralized source & policy lifecycle */
.policy-status-strip{max-width:820px;margin:-6px auto 24px;padding:9px 12px;border:1px solid #d0d5dd;border-radius:var(--radius);background:#f9fafb;color:var(--text-secondary);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;line-height:1.5;}.policy-status-strip strong{color:#344054;font-weight:600}.policy-status-strip a{color:var(--primary);font-weight:600;white-space:nowrap}.policy-status-strip--warning{border-color:#fedf89;background:#fffaeb;color:#7a2e0e;}.policy-status-strip--danger{border-color:#fecdca;background:#fef3f2;color:#912018}.policy-status-strip--info{border-color:#b2ddff;background:#eff8ff;color:#175cd3}.policy-status-strip--success{border-color:#abefc6;background:#ecfdf3;color:#067647}
.policy-public-page{max-width:940px}.policy-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 28px}.policy-summary-grid>div{padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}.policy-summary-grid strong,.policy-summary-grid span{display:block}.policy-summary-grid strong{font-size:24px;color:var(--text-primary);font-weight:700}.policy-summary-grid span{margin-top:4px;color:var(--text-secondary);font-size:12px;line-height:1.45}.policy-list{display:grid;gap:14px;margin:28px 0}.policy-card {
    padding: 18px;
    border-left: 3px solid var(--text-tertiary);
}.policy-card--success{border-left-color:#17b26a}.policy-card--info{border-left-color:#2e90fa}.policy-card--warning{border-left-color:#f79009}.policy-card--danger{border-left-color:#f04438}.policy-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.policy-card h2{margin:0 0 5px;font-size:18px;line-height:1.35}.policy-card-head p{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.6}.policy-status-badge{flex:0 0 auto;padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius-pill);background:#f9fafb;color:var(--text-secondary);font-size:11px;font-weight:600;white-space:nowrap;}.policy-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:14px 0;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.policy-meta>div{padding:10px;background:var(--surface);}.policy-meta dt{color:var(--text-tertiary);font-size:11px}.policy-meta dd{margin:3px 0 0;color:var(--text-primary);font-size:12px;font-weight:600}.policy-note{margin:10px 0;padding:9px 11px;border-radius:var(--radius);background:#fffaeb;color:#7a2e0e;font-size:12px;line-height:1.6;}.policy-sources{display:grid;gap:5px;margin-top:12px}.policy-sources strong,.policy-tools strong{color:#344054;font-size:12px}.policy-sources a,.policy-tools a{color:var(--primary);font-size:12px;font-weight:600}.policy-tools{margin-top:12px;color:var(--text-secondary);font-size:12px;line-height:1.65}
@media(max-width:760px){.policy-status-strip{align-items:flex-start;flex-direction:column;margin-top:-4px}.policy-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.policy-card-head{flex-direction:column;gap:8px}.policy-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.policy-summary-grid,.policy-meta{grid-template-columns:1fr}.policy-card{padding:14px}}


/* v4.7 — site-wide content, navigation and dense-hub repair */
.tools-category-overview{margin:34px 0}.tools-category-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.tools-category-overview-grid>a{position:relative;display:block;min-width:0;padding:15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:inherit;text-decoration:none;}.tools-category-overview-grid>a:hover{border-color:var(--primary-border);background:var(--primary-soft-subtle)}.tools-category-overview-grid strong{display:block;margin:5px 0 6px;color:var(--text-primary);font-size:15px}.tools-category-overview-grid p{margin:0;color:var(--text-secondary);font-size:12px;line-height:1.55}.tools-category-overview-grid b{display:inline-block;margin-top:9px;color:var(--primary);font-size:12px;font-weight:600}.tools-category-count{color:var(--text-tertiary);font-size:11px;font-weight:600}.tools-usecase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.tools-usecase-grid article{padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}.tools-usecase-grid h3{margin:0 0 5px;font-size:14px}.tools-usecase-grid p{margin:0;color:var(--text-secondary);font-size:12px;line-height:1.6}
.category-subclusters{display:grid;gap:24px}.category-subcluster{padding-top:2px}.category-subcluster+.category-subcluster{padding-top:22px;border-top:1px solid var(--line)}.category-subcluster-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:start;margin-bottom:12px}.category-subcluster-head h3{margin:0;color:var(--text-primary);font-size:17px}.category-subcluster-head p{grid-column:1;margin:0;color:var(--text-secondary);font-size:12px;line-height:1.55}.category-subcluster-head>span{grid-column:2;grid-row:1/3;color:var(--text-tertiary);font-size:11px;white-space:nowrap}.info-toc{display:flex;flex-wrap:wrap;align-items:center;gap:7px 16px;margin:0 0 28px;padding:12px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-size:12px;line-height:1.45}.info-toc strong{color:var(--text-primary);font-weight:650}.info-toc a{color:var(--primary);font-weight:600}
/* Consistent secondary actions without forcing every calculator to use the same behavior. */
.percent-form-actions,.date-actions,.discount-actions,.average-actions,.geometry-actions,.tool-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.date-secondary-button,
.discount-reset,
.average-reset,
.geometry-reset {
    min-height: 42px;
}
[role="tab"]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media(max-width:900px){.tools-category-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.tools-category-overview-grid,.tools-usecase-grid{grid-template-columns:1fr}.category-subcluster-head{grid-template-columns:1fr}.category-subcluster-head>span{grid-column:1;grid-row:auto}}

/* v4.8 — core tool enhancement */
.tool-check-row{display:flex;align-items:flex-start;gap:8px;margin:10px 0;color:var(--text-secondary);font-size:12px;line-height:1.5}.tool-check-row input{margin-top:2px;flex:0 0 auto}.geometry-workspace{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:center}.geometry-visual{display:grid;place-items:center;min-height:160px;border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfe}.geometry-visual svg{width:100%;max-width:180px;height:auto;overflow:visible}.geometry-visual svg *{fill:none;stroke:var(--text-secondary);stroke-width:2;vector-effect:non-scaling-stroke;}.geometry-visual svg text{fill:#344054;stroke:none;font-size:12px;font-weight:600}.loan-schedule{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}.loan-schedule summary{cursor:pointer;color:var(--primary);font-weight:600;font-size:13px}.loan-schedule .example-table-wrap{margin-top:10px;max-height:420px;overflow:auto}.split-mode-tabs{margin-bottom:14px}.split-shares{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfe}.split-shares h3{margin:0 0 8px;font-size:13px}.split-share-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid #eaecf0;font-size:13px}.split-share-row:first-child{border-top:0}.split-share-row strong{font-weight:600}.finance-form textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    resize: vertical;
    background: var(--surface);
}.fraction-box input[name$="_whole"]{margin-bottom:4px}.natural-support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:760px){.geometry-workspace{grid-template-columns:1fr}.geometry-visual{min-height:130px}.geometry-visual svg{max-width:160px}.natural-support-grid{grid-template-columns:1fr}}


/* v4.8.3 — Part 3: Basic + Math calculator consistency repair */
/* Keep the calculators visually related without flattening their task-specific layouts. */
.scientific-tool {
    margin: 4px auto 40px;
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--surface);
}.fraction-tool,
.quadratic-tool {
    margin: 4px auto 40px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}.linear-system-tool,
.gcd-tool,
.prime-tool,
.pythagorean-tool,
.combinatorics-tool,
.utility-tool[data-random-number],
.utility-tool[data-rounding],
.utility-tool[data-scientific-notation],
.utility-tool[data-nth-root] {
    max-width: 820px;
    margin: 4px auto 40px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

/* Fraction already had an inner card. Once the whole calculator is the card, avoid double framing. */
.fraction-form {
    padding: 0;
    border: 0;
    border-radius: 0;
}

/* Shared field behavior for the math generation. */
.fraction-box input,
.fraction-operator select,
.quadratic-form input,
.system-row input,
.number-list-field textarea,
.prime-input-field input,
.pythagorean-form input,
.pythagorean-form select,
.combinatorics-form input,
.utility-tool[data-random-number] .utility-form input,
.utility-tool[data-rounding] .utility-form input,
.utility-tool[data-rounding] .utility-form select,
.utility-tool[data-scientific-notation] .utility-field input,
.utility-tool[data-nth-root] .utility-form input {
    border-color: var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.fraction-box input:hover,
.fraction-operator select:hover,
.quadratic-form input:hover,
.system-row input:hover,
.number-list-field textarea:hover,
.prime-input-field input:hover,
.pythagorean-form input:hover,
.pythagorean-form select:hover,
.combinatorics-form input:hover,
.utility-tool[data-random-number] .utility-form input:hover,
.utility-tool[data-rounding] .utility-form input:hover,
.utility-tool[data-rounding] .utility-form select:hover,
.utility-tool[data-scientific-notation] .utility-field input:hover,
.utility-tool[data-nth-root] .utility-form input:hover {
    border-color: #b8c0cc;
}

.fraction-box input:focus,
.fraction-operator select:focus,
.quadratic-form input:focus,
.system-row input:focus,
.number-list-field textarea:focus,
.prime-input-field input:focus,
.pythagorean-form input:focus,
.pythagorean-form select:focus,
.combinatorics-form input:focus,
.utility-tool[data-random-number] .utility-form input:focus,
.utility-tool[data-rounding] .utility-form input:focus,
.utility-tool[data-rounding] .utility-form select:focus,
.utility-tool[data-scientific-notation] .utility-field input:focus,
.utility-tool[data-nth-root] .utility-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    outline: none;
}

.fraction-box input[aria-invalid="true"],
.quadratic-form input[aria-invalid="true"],
.pythagorean-form input[aria-invalid="true"],
.combinatorics-form input[aria-invalid="true"],
.scientific-screen input[aria-invalid="true"],
.system-row input[aria-invalid="true"],
.number-list-field textarea[aria-invalid="true"],
.prime-input-field input[aria-invalid="true"],
.utility-tool[data-random-number] input[aria-invalid="true"],
.utility-tool[data-rounding] input[aria-invalid="true"],
.utility-tool[data-scientific-notation] input[aria-invalid="true"],
.utility-tool[data-nth-root] input[aria-invalid="true"] {
    border-color: var(--line-error);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .08);
}

/* A valid calculation status is supporting information, not an alert card. */
.scientific-tool .scientific-message:not(.is-error),
.fraction-message:not(.is-error),
.quadratic-message:not(.is-error),
.linear-system-tool .scientific-message:not(.is-error),
.gcd-tool .scientific-message:not(.is-error),
.prime-tool .scientific-message:not(.is-error),
.pythagorean-tool .scientific-message:not(.is-error),
.combinatorics-tool .scientific-message:not(.is-error),
.utility-tool[data-random-number] .scientific-message:not(.is-error),
.utility-tool[data-rounding] .scientific-message:not(.is-error),
.utility-tool[data-scientific-notation] .scientific-message:not(.is-error),
.utility-tool[data-nth-root] .scientific-message:not(.is-error) {
    min-height: 0;
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.55;
}

/* Validation still needs strong contrast and a clear relationship to the fields. */
.scientific-tool .scientific-message.is-error,
.fraction-message.is-error,
.quadratic-message.is-error,
.linear-system-tool .scientific-message.is-error,
.gcd-tool .scientific-message.is-error,
.prime-tool .scientific-message.is-error,
.pythagorean-tool .scientific-message.is-error,
.combinatorics-tool .scientific-message.is-error,
.utility-tool[data-random-number] .scientific-message.is-error,
.utility-tool[data-rounding] .scientific-message.is-error,
.utility-tool[data-scientific-notation] .scientific-message.is-error,
.utility-tool[data-nth-root] .scientific-message.is-error {
    margin-top: 11px;
    padding: 9px 11px;
    border: 1px solid var(--line-error);
    border-radius: var(--radius);
    background: var(--surface-error);
    color: var(--error);
}

/* Softer, separated result groups instead of spreadsheet-like 1px grids. */
.fraction-stats,
.quadratic-grid,
.system-determinants,
.gcd-results,
.prime-stats,
.pythagorean-stats,
.combinatorics-grid,
.utility-tool[data-rounding] .utility-stats {
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.fraction-stats > div,
.system-determinants > div,
.gcd-results > div,
.prime-stats > div,
.pythagorean-stats > div,
.combinatorics-grid > div {
    padding: 11px 12px;
}.quadratic-grid > div,
.utility-tool[data-rounding] .utility-stats > div {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-subtle);
}

/* Result headings and copy actions use the same hierarchy across math tools. */
.scientific-copy,
.geometry-copy,
.natural-result-head button {
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
}.tool-result-head button,
.percent-copy-btn {
    padding: 0 9px;
    font: inherit;
    font-size: 12px;
}
.scientific-copy:hover,
.tool-result-head button:hover:not(:disabled),
.geometry-copy:hover:not(:disabled),
.percent-copy-btn:hover:not(:disabled),
.natural-result-head button:hover:not(:disabled) {
    border-color: var(--primary-border);
    background: var(--primary-soft-subtle);
}
.tool-result-head button:disabled,
.geometry-copy:disabled,
.percent-copy-btn:disabled,
.natural-result-head button:disabled {
    border-color: transparent;
    background: transparent;
    color: #98a2b3;
}

/* Examples are controls, so keep a useful touch target without making them look like primary CTAs. */
.tool-examples button,
.percent-examples button,
.natural-examples button,
.natural-suggestions button {
    min-height: 36px;
    padding-inline: 11px;
    border-radius: var(--radius-pill);
}

/* Scientific calculator: the screen and keypad now sit inside the same clean surface as other tools. */
.scientific-screen {
    border-color: var(--line);
    background: var(--surface-subtle);
}
.scientific-keypad button {
    border-color: var(--line);
    border-radius: var(--radius);
}
.scientific-angle {
    border-color: var(--line-strong);
}

/* Percentage tabs remain horizontal but have a visible scroll cue on narrow screens. */
.percent-tool-tabs {
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}
.percent-tool-tabs::after,
.probability-tabs::after {
    content: "";
    flex: 0 0 1px;
}

/* The main action should not look detached from compact forms. */
.quadratic-form .tool-primary-button,
.system-form > .tool-primary-button,
.fraction-form > .tool-primary-button {
    min-height: 46px;
}

@media (max-width: 640px) {
    .scientific-tool,
    .fraction-tool,
    .quadratic-tool,
    .linear-system-tool,
    .gcd-tool,
    .prime-tool,
    .pythagorean-tool,
    .combinatorics-tool,
    .utility-tool[data-random-number],
    .utility-tool[data-rounding],
    .utility-tool[data-scientific-notation],
    .utility-tool[data-nth-root] {
        padding: 15px;
        margin-bottom: 34px;
    }
    .quadratic-form .tool-primary-button,
    .system-form > .tool-primary-button,
    .fraction-form > .tool-primary-button,
    .utility-generate {
        width: 100%;
    }
    .tool-examples { gap: 7px; }
    .tool-examples button { min-height: 38px; }
}

@media (max-width: 520px) {
    /* Two full fraction cards plus a tiny operator column was too dense on phones. */
    .fraction-expression {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .fraction-operator {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 92px;
        align-items: center;
        gap: 10px;
    }
    .fraction-operator > span { margin: 0; }
    .fraction-operator select { height: 44px; }

    .quadratic-form { grid-template-columns: 1fr; }
    .quadratic-form .tool-primary-button { grid-column: auto; }
    .quadratic-grid,
    .system-main,
    .system-determinants,
    .gcd-results,
    .prime-stats,
    .pythagorean-stats,
    .utility-tool[data-rounding] .utility-stats {
        grid-template-columns: 1fr;
    }

    .system-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 5px;
    }
    .system-row input { padding-inline: 6px; font-size: 16px; }
    .system-row span { font-size: 12px; }

    .scientific-topbar {
        flex-wrap: wrap;
    }
    .scientific-copy { margin-left: auto; }
    .scientific-keypad { gap: 5px; }
    .scientific-keypad button { height: 46px; }

    .percent-tool-tabs,
    .probability-tabs {
        margin-inline: -2px;
        padding-inline: 2px;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 380px) {
    .scientific-tool,
    .fraction-tool,
    .quadratic-tool,
    .linear-system-tool,
    .gcd-tool,
    .prime-tool,
    .pythagorean-tool,
    .combinatorics-tool,
    .utility-tool[data-random-number],
    .utility-tool[data-rounding],
    .utility-tool[data-scientific-notation],
    .utility-tool[data-nth-root] { padding: 13px; }

    .system-row { gap: 3px; }
    .system-row input { min-width: 0; padding-inline: 4px; }
    .system-row span { font-size: 11px; }
    .scientific-angle button { padding-inline: 10px; }
}


/* v4.8.3 — Basic natural-language calculator input states */
.natural-input-row input {
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.natural-input-row input:hover { border-color: var(--line-strong); }
.natural-input-row input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.natural-input-row input[aria-invalid="true"] {
    border-color: var(--line-error);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .08);
}


/* v4.8.4 — Part 4: Date/Time + Education + Statistics consistency repair */
/* Education/statistics/time tools now use the same calm calculator surface as the math generation. */
.average-tool,
.grade-tool,
.stats-tool,
.probability-tool,
.utility-tool[data-time-duration] {
    max-width: 820px;
    margin: 4px auto 40px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}.gpa-tool {
    margin: 4px auto 40px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.average-panel {
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
}

/* Shared field states. */
.date-field input,
.date-field select,
.average-text-field textarea,
.average-weight-row input,
.gpa-row input,
.gpa-cumulative-grid input,
.grade-settings input,
.grade-settings select,
.grade-row input,
.stats-input-field textarea,
.probability-form input,
.utility-tool[data-time-duration] .utility-form input {
    border-color: var(--line-strong);
    border-radius: var(--radius);
    color: var(--text-primary);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.date-field input:hover,
.date-field select:hover,
.average-text-field textarea:hover,
.average-weight-row input:hover,
.gpa-row input:hover,
.gpa-cumulative-grid input:hover,
.grade-settings input:hover,
.grade-settings select:hover,
.grade-row input:hover,
.stats-input-field textarea:hover,
.probability-form input:hover,
.utility-tool[data-time-duration] .utility-form input:hover,
.utility-tool[data-time-duration] .utility-check:hover {
    border-color: #b8c0cc;
}
.date-field input:focus,
.date-field select:focus,
.average-text-field textarea:focus,
.average-weight-row input:focus,
.gpa-row input:focus,
.gpa-cumulative-grid input:focus,
.grade-settings input:focus,
.grade-settings select:focus,
.grade-row input:focus,
.stats-input-field textarea:focus,
.probability-form input:focus,
.utility-tool[data-time-duration] .utility-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    outline: none;
}
.date-field input[aria-invalid="true"],
.average-text-field textarea[aria-invalid="true"],
.average-weight-row input[aria-invalid="true"],
.gpa-row input[aria-invalid="true"],
.gpa-cumulative-grid input[aria-invalid="true"],
.grade-settings input[aria-invalid="true"],
.grade-row input[aria-invalid="true"],
.stats-input-field textarea[aria-invalid="true"],
.probability-form input[aria-invalid="true"],
.utility-tool[data-time-duration] .utility-form input[aria-invalid="true"] {
    border-color: var(--line-error);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .08);
}

/* Informational status should not compete with the result; errors remain clearly boxed. */
.date-message:not(.is-error),
.average-message:not(.is-error):not(.is-success),
.gpa-message:not(.is-error),
.grade-tool .scientific-message:not(.is-error),
.stats-tool .scientific-message:not(.is-error),
.probability-tool .scientific-message:not(.is-error),
.utility-tool[data-time-duration] .scientific-message:not(.is-error) {
    min-height: 0;
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.55;
}
.date-message.is-error,
.average-message.is-error,
.gpa-message.is-error,
.grade-tool .scientific-message.is-error,
.stats-tool .scientific-message.is-error,
.probability-tool .scientific-message.is-error,
.utility-tool[data-time-duration] .scientific-message.is-error {
    margin-top: 11px;
    padding: 9px 11px;
    border: 1px solid var(--line-error);
    border-radius: var(--radius);
    background: var(--surface-error);
    color: var(--error);
}

/* Replace spreadsheet-like result borders with independent, scannable stat cards. */
.date-stat-grid,
.average-stat-grid,
.gpa-stats,
.grade-stats,
.stats-grid,
.probability-grid,
.utility-tool[data-time-duration] .utility-stats {
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.date-stat-grid > div,
.average-stat-grid > div,
.grade-stats > div,
.stats-grid > div,
.probability-grid > div {
    padding: 11px 12px;
}.gpa-stats > div,
.utility-tool[data-time-duration] .utility-stats > div {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-subtle);
}
.date-stat-grid > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.average-stat-grid > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Tabs share one interaction model and stay usable by keyboard and touch. */
.average-tabs,
.tool-tabs,
.probability-tabs {
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
.average-tab,
.tool-tabs button,
.probability-tabs button {
    min-height: 42px;
}
.average-tab:focus-visible,
.tool-tabs button:focus-visible,
.probability-tabs button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* GPA/grade rows: calmer delete controls and clearer dynamic rows. */
.gpa-row button,
.grade-row > button,
.average-remove-row {
    border-color: var(--line);
    color: var(--text-tertiary);
}
.gpa-row button:hover,
.grade-row > button:hover,
.average-remove-row:hover {
    border-color: #f0b4b0;
    background: #fffafa;
    color: var(--error);
}
.grade-row-field { min-width: 0; }
.grade-row-field > span { display: none; }
.grade-row-field input { width: 100%; }
.tool-form-note {
    margin: 9px 0 0;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.55;
}

/* Date actions no longer depend on :has() for a usable mobile layout. */
.date-form-actions { align-items: stretch; }

.date-copy-btn,
.average-copy-btn {
    padding-inline: 9px;
}
.date-copy-btn:hover:not(:disabled),
.average-copy-btn:hover:not(:disabled) { background: var(--primary-soft-subtle); }
.date-direction-options { border-radius: var(--radius); }
.date-direction-btn { min-height: 40px; }
.date-direction-btn.is-active { color: var(--primary); }

/* Statistics previews are supporting content rather than highlighted alerts. */
.stats-sorted {
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-border);
    border-radius: var(--radius);
    background: var(--surface-subtle);
}

@media (max-width: 720px) {
    .stats-grid,
    .probability-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .average-tool,
    .gpa-tool,
    .grade-tool,
    .stats-tool,
    .probability-tool,
    .utility-tool[data-time-duration] {
        padding: 15px;
        margin-bottom: 34px;
    }
    .gpa-cumulative-grid,
    .grade-settings { grid-template-columns: 1fr 1fr; }
    .date-form-actions { display: flex; }
    .date-primary-btn { flex: 1 1 150px; }
    .date-reset-btn { flex: 0 1 auto; }
}

@media (max-width: 520px) {
    .date-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .date-form-actions .date-primary-btn { grid-column: 1 / -1; }
    .date-form-actions .date-reset-btn { width: 100%; }
    .date-input-action { grid-template-columns: minmax(0, 1fr) auto; }
    .date-stat-grid,
    .date-stat-grid--compact,
    .average-stat-grid,
    .gpa-stats,
    .grade-stats,
    .stats-grid,
    .probability-grid,
    .utility-tool[data-time-duration] .utility-stats { grid-template-columns: 1fr; }
    .average-stat-grid > div:last-child { grid-column: auto; }
    .gpa-cumulative-grid,
    .grade-settings,
    .probability-form,
    .utility-tool[data-time-duration] .utility-form--3 { grid-template-columns: 1fr; }

    /* Grade rows become labelled mobile cards instead of four squeezed columns. */
    .grade-table-head { display: none; }
    .grade-row {
        position: relative;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        margin-bottom: 10px;
        padding: 11px 48px 11px 11px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface-subtle);
    }
    .grade-row-field--name { grid-column: 1 / -1; }
    .grade-row-field > span {
        display: block;
        margin-bottom: 5px;
        color: var(--text-tertiary);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
    }
    .grade-row input { height: 44px; padding-inline: 10px; font-size: 16px; background: var(--surface); }
    .grade-row > button {
        position: absolute;
        top: 11px;
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .gpa-table-head,
    .gpa-row { grid-template-columns: minmax(0, 1fr) 92px 38px; gap: 7px; }
    .gpa-row input { font-size: 16px; }
}

@media (max-width: 380px) {
    .average-tool,
    .gpa-tool,
    .grade-tool,
    .stats-tool,
    .probability-tool,
    .utility-tool[data-time-duration] { padding: 13px; }
    .date-input-action { grid-template-columns: 1fr; }
    .date-input-action button { min-height: 42px; }
    .date-form-actions { grid-template-columns: 1fr; }
    .date-form-actions .date-primary-btn { grid-column: auto; }
    .grade-row { grid-template-columns: 1fr; }
    .grade-row-field--name { grid-column: auto; }
    .gpa-table-head { display: none; }
    .gpa-row {
        position: relative;
        grid-template-columns: 1fr;
        padding: 10px 48px 10px 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface-subtle);
    }
    .gpa-row button { position: absolute; top: 10px; right: 9px; }
}


/* v4.8.5 — Part 5: Finance + Living calculator repair */
.finance-form input,
.finance-form select,
.finance-form textarea,
.vat-line-row input,
.vat-line-row select {
    border-color: var(--line-strong);
    color: var(--text-primary);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.finance-form textarea { min-height: 72px; line-height: 1.45; }
.finance-form small { display: block; margin-top: 5px; color: var(--text-tertiary); font-size: 11px; line-height: 1.45; }
.finance-form input:hover,
.finance-form select:hover,
.finance-form textarea:hover,
.vat-line-row input:hover,
.vat-line-row select:hover { border-color: #b8c0cc; }
.finance-form textarea:focus,
.vat-line-row input:focus,
.vat-line-row select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--input-focus-ring); outline: 0; }
.finance-form input[aria-invalid="true"],
.finance-form select[aria-invalid="true"],
.finance-form textarea[aria-invalid="true"],
.vat-line-row input[aria-invalid="true"],
.vat-line-row select[aria-invalid="true"] {
    border-color: var(--line-error);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .08);
}
.finance-form input:disabled,
.finance-form select:disabled,
.finance-form textarea:disabled { background: var(--surface-subtle); color: var(--text-tertiary); cursor: not-allowed; }

/* Finance results should scan like cards, not a spreadsheet. */
.finance-stats,
.finance-stats--3,
.finance-stats--4,
.finance-stats--6 {
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.finance-result .tool-result-main { overflow-wrap: anywhere; }
.finance-summary:empty { display: none; }

/* VAT rows: make remove state explicit and prevent accidental dead-end deletion. */
.vat-line-row [data-vat-remove]:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-subtle); color: var(--text-primary); }
.vat-line-row [data-vat-remove]:disabled { opacity: .38; cursor: not-allowed; }
.vat-line-row [data-vat-remove]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Loan schedule is generated only while expanded, avoiding hundreds of DOM rows during typing. */
.loan-schedule[open] summary { margin-bottom: 2px; }
.loan-schedule summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Split bill mode is a pressed-button group, not fake tabs sharing one panel. */
.split-mode-tabs button[aria-pressed="true"] { border-bottom-color: var(--primary); color: var(--primary); }
.split-mode-tabs button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -2px; }
.split-share-row strong { font-variant-numeric: tabular-nums; }

/* Living bill breakdowns use the same scroll affordance on narrow screens. */
.living-breakdown .example-table { margin-bottom: 0; }

@media (max-width: 760px) {
    .finance-tool { margin-bottom: 32px; }
    .finance-result { margin-top: 15px; padding-top: 15px; }
    .finance-stats,
    .finance-stats--3,
    .finance-stats--4,
    .finance-stats--6 { gap: 7px; }
}
@media (max-width: 520px) {
    .finance-mode-row { max-width: none; }
    .finance-inline-title { line-height: 1.4; }
    .split-mode-tabs { gap: 2px; }
    .split-mode-tabs button { flex: 1 0 auto; min-height: 44px; }
    .split-share-row { padding: 9px 0; }
}

/* v4.8.6 — Part 6: tools hub, category hubs and static-page consistency */

/* Hub finder is sticky on desktop, so anchors need to clear both the site header and finder. */
@media (min-width: 761px) {
    body.admin-bar .tool-finder { top: 106px; }
    .all-tools-heading,
    .tool-category { scroll-margin-top: 220px; }
    body.admin-bar .all-tools-heading,
    body.admin-bar .tool-category { scroll-margin-top: 252px; }
}
@media (min-width: 761px) and (max-width: 782px) {
    body.admin-bar .tool-finder { top: 120px; }
    body.admin-bar .all-tools-heading,
    body.admin-bar .tool-category { scroll-margin-top: 266px; }
}

.tool-category-nav a:focus-visible,
.footer-column a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}


.all-tools-heading h2 {
    color: var(--text-primary);
    letter-spacing: -.02em;
}
.all-tools-heading > p:last-child {
    line-height: 1.6;
}
.tool-category-meta [data-tool-category-count] {
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Category pages: useful jump navigation without adding another tall card. */
.category-jump-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: -7px 0 26px;
    padding: 11px 0 13px;
    border-bottom: 1px solid var(--line);
    color: var(--text-secondary);
    font-size: 12px;
}
.category-jump-nav strong { color: var(--text-primary); }

.category-jump-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.category-jump-nav a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.category-subcluster { scroll-margin-top: 88px; }
.category-hero-meta a { white-space: nowrap; }

/* Static content pages share the same reading rhythm. */
.info-article { min-width: 0; }
.info-header {
    margin-bottom: 22px;
    padding-bottom: 0;
    border-bottom: 0;
}
.info-header p {
    max-width: 700px;
    line-height: 1.65;
}
.info-article > .info-toc + section {
    border-top: 0;
    padding-top: 0;
}
.info-article > section[id] { scroll-margin-top: 84px; }
body.admin-bar .info-article > section[id] { scroll-margin-top: 116px; }
.legal-updated {
    color: var(--text-tertiary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.info-article code {
    padding: 1px 4px;
    border-radius:var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text-primary);
    font-size: .92em;
}

/* Real table semantics for keyboard shortcuts. */
.shortcut-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 14px;
}
.shortcut-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.shortcut-table th,
.shortcut-table td {
    padding: 10px 0;
    border-top: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.shortcut-table tr:first-child th,
.shortcut-table tr:first-child td { border-top: 0; }
.shortcut-table th {
    width: 165px;
    padding-right: 18px;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
}
.shortcut-table td { color: var(--text-secondary); }

.contact-field { display: grid; gap: 6px; }
.contact-help {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.55;
}
.contact-form input:hover,
.contact-form textarea:hover { border-color: #b8c1ce; }
.contact-form input:user-invalid,
.contact-form textarea:user-invalid { border-color: var(--line-error); }

/* Policy cards stay readable on narrow screens and source links expose focus clearly. */
.policy-sources a:focus-visible,
.policy-tools a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.policy-card-head h2 { color: var(--text-primary); }

/* Footer: consistent keyboard behavior and less visual noise on small screens. */


.footer-bottom { line-height: 1.5; }

/* Widget builder controls should behave like the rest of the site. */
.widget-control-grid select:hover,
.widget-code-label textarea:hover { border-color: #b8c1ce; }
.widget-control-grid select:focus-visible,
.widget-code-label textarea:focus-visible,
.widget-code-actions button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-color: var(--primary-border-strong);
}

@media (max-width: 760px) {
    .all-tools-heading,
    .tool-category { scroll-margin-top: 78px; }
    .category-subcluster { scroll-margin-top: 76px; }
    .category-jump-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .category-jump-nav strong,
    .category-jump-nav a { flex: 0 0 auto; white-space: nowrap; }
    .info-toc { overflow: visible; }
    .info-toc strong { flex: 1 0 100%; }
    .info-toc a { flex: 0 1 auto; white-space: normal; }
    .info-article > section[id] { scroll-margin-top: 72px; }
    body.admin-bar .info-article > section[id] { scroll-margin-top: 118px; }
}

@media (max-width: 640px) {
    .info-toc {
        align-items: flex-start;
        gap: 8px 14px;
        margin-bottom: 24px;
        padding-block: 11px;
    }
    .shortcut-table th { width: 118px; padding-right: 12px; }
}

@media (max-width: 420px) {
    .all-tools-heading { margin-top: 28px; padding-top: 22px; }
    .all-tools-heading h2 { font-size: 19px; }
    .category-jump-nav { margin-bottom: 22px; }
    .shortcut-table { font-size: 13px; }
    .shortcut-table th { width: 104px; white-space: normal; }
    .policy-summary-grid > div { padding: 12px; }
    .footer-inner { padding-top: 25px; }
}


/* v4.8.7 — Part 7: production SEO/regression cleanup */
.error-search input:hover { border-color: var(--line-strong); }
.error-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.error-links a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* WordPress pagination: supports both the_posts_pagination() (.nav-links)
   and paginate_links( type => list ) (<ul class="page-numbers">). */
.navigation.pagination {
    margin: 30px 0 8px;
    display: flex;
    justify-content: center;
}
.navigation.pagination .nav-links,
.navigation.pagination > ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.navigation.pagination > ul.page-numbers > li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.navigation.pagination .page-numbers:not(ul) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius:var(--radius-lg);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1;
    font-weight: 650;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.navigation.pagination a.page-numbers:hover {
    border-color: var(--primary-border);
    color: var(--primary);
    background: var(--primary-soft);
}
.navigation.pagination .page-numbers.current {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--surface);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), .14);
}
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
    width: auto;
    min-width: 0;
    padding-inline: 14px;
}
.navigation.pagination .page-numbers.dots {
    min-width: 28px;
    padding-inline: 4px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.navigation.pagination a.page-numbers:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}
@media (max-width: 520px) {
    .navigation.pagination { margin-top: 24px; }
    .navigation.pagination .nav-links,
    .navigation.pagination > ul.page-numbers { gap: 6px; }
    .navigation.pagination .page-numbers:not(ul) {
        min-width: 40px;
        min-height: 40px;
        padding: 7px 10px;
        font-size: 13px;
    }
    .navigation.pagination .page-numbers.prev,
    .navigation.pagination .page-numbers.next {
        flex: 1 1 auto;
        max-width: 168px;
        white-space: nowrap;
    }
}



/* v4.8.8 — Part 8: real-device UX regression fixes */
@media (max-width: 420px) {
    /* Long Vietnamese unit names should remain readable instead of being clipped in two narrow selects. */
    .converter-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .converter-value-field { grid-column: auto; }
    .converter-swap {
        width: 44px;
        height: 40px;
        justify-self: center;
        transform: rotate(90deg);
    }
    .converter-swap.is-swapped { transform: rotate(270deg); }

    /* All three GPA modes stay visible on common phone widths; no hidden third tab. */
    .gpa-tool > .tool-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
    }
    .gpa-tool > .tool-tabs button {
        min-width: 0;
        min-height: 48px;
        padding: 6px 5px;
        white-space: normal;
        line-height: 1.25;
        text-align: center;
    }
}

/* v4.35.3 — Homepage information architecture cleanup */
.brand--logo { gap: 0; }
.brand-logo {
    display: block;
    width: auto;
    height: 42px;
    max-width: 205px;
    object-fit: contain;
}
.brand-logo--footer { height: 36px; max-width: 176px; }

/* Keep the first screen focused on the calculator. */
.home-hero {
    padding: 22px 0 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.home-hero .hero-inner { max-width: 860px; }
.home-hero-heading { width: 100%; display: flex; flex-direction: column; align-items: center; }
.home-hero-kicker {
    margin: 0 0 5px;
    color: var(--primary-dark);
    font-size: 10px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.home-hero h1 { font-size: clamp(34px, 3.7vw, 40px); }
.home-hero .hero-subtitle {
    max-width: 610px;
    margin: 6px 0 8px;
    font-size: 14px;
    line-height: 1.55;
}
.home-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px 16px;
    margin: 0 0 14px;
    font-size: 10.5px;
    line-height: 1.45;
}


.home-hero-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-hero-meta a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.home-hero .calculator {
    width: min(100%, 590px);
    border-color: #dfe4eb;
    border-radius:var(--radius-lg);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .07);
}
.home-hero .calculator-screen {
    min-height: 148px;
    border-color: #dce2ea;
    border-radius:var(--radius-lg);
    background: #f8fafc;
}
.home-hero .calc-key { min-height: 56px; border-radius:var(--radius-lg); box-shadow: none; }
.home-hero .calculator-tools { margin-top: 8px; }

.home-content { padding: 34px 0 64px; }

.home-content .section-heading-row { align-items: flex-end; gap: 20px; }
.home-content .section-heading-row h2 { margin-top: 4px; font-size: 23px; line-height: 1.25; letter-spacing: -.018em; }
.section-description {
    max-width: 640px;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.58;
}
.home-section-link {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 650;
}
.home-section-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-section-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* One discovery section replaces overlapping shortcut/popular/category sections. */
.home-tool-discovery { margin: 0; }


.home-discovery-block--categories { margin-top: 22px; }
.home-discovery-subhead {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 10px;
}
.home-discovery-subhead strong {
    color: var(--text-primary);
    line-height: 1.4;
}
.home-discovery-subhead span {
    color: var(--text-tertiary);
    line-height: 1.4;
}
.home-popular-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.home-popular-grid--compact a {
    border-color: var(--line);
}



.home-popular-grid--compact > a > span { display: none; }


.home-category-grid--compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.home-category-grid--compact .home-category-card {
    display: grid;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
}

.home-category-grid--compact .home-category-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.home-category-mark {
    display: inline-grid;
    place-items: center;
    min-width: 31px;
    height: 29px;
    padding: 0 6px;
    font-size: 10px;
    line-height: 1;
}
.home-category-name {
    min-width: 0;
    overflow: hidden;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-category-count {
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.home-natural--inline {
    margin: 24px 0 0;
    padding: 16px 17px;
    grid-template-columns: minmax(220px, .8fr) minmax(340px, 1.2fr);
    gap: 22px;
    border: 1px solid #dbe5f1;
    border-radius:var(--radius-lg);
    background: var(--primary-soft-subtle);
}
.home-natural--inline .home-natural-copy .section-kicker { margin-bottom: 4px; }
.home-natural--inline .home-natural-copy strong { font-size: 15px; }
.home-natural--inline .home-natural-copy span { max-width: 390px; font-size: 11px; }
.home-natural--inline .home-natural-form input { height: 44px; border-radius:var(--radius-lg); }
.home-natural--inline .home-natural-form button { min-height: 44px; border-radius:var(--radius-lg); padding-inline: 16px; }
.home-content .pwa-install-row { max-width: none; margin-top: 24px; }

/* One concise trust/SEO block replaces benefits + intro + how-to repetition. */
.home-about-simple {
    margin-top: 38px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
}
.home-about-simple-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.95fr);
    gap: 22px;
    align-items: start;
}
.home-about-simple-copy { max-width: 780px; }
.home-about-simple h2 {
    margin: 4px 0 12px;
    color: var(--text-primary);
    font-size: 29px;
    line-height: 1.18;
}
.home-about-simple-copy p {
    max-width: 72ch;
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
}
.home-about-simple-copy p + p { margin-top: 10px; }
.home-about-simple-copy a,
.home-about-links a { color: var(--primary-dark); font-weight: 650; }
.home-about-simple-copy a:hover,
.home-about-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-about-support {
    display: grid;
    gap: 14px;
}
.home-trust-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-trust-list li {
    min-width: 0;
    padding: 16px 16px 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.home-trust-list li::before {
    content: "";
    position: absolute;
    inset: 14px auto 14px 0;
    width: 4px;
    border-radius: 999px;
    background: var(--primary);
}
.home-trust-list strong {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
}
.home-trust-list span {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
}
.home-about-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding-top: 2px;
    font-size: 12px;
}
.home-about-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.home-about-links a::after {
    content: "→";
    font-size: 12px;
}
.home-about-links a:focus-visible,
.home-about-simple-copy a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

.home-faq { max-width: none; margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line); }
.home-faq-heading { margin-bottom: 8px; }

@media (max-width: 760px) {
    .brand-logo { height: 38px; max-width: 176px; }
    .home-hero { padding-top: 19px; }
    .home-hero .hero-subtitle { max-width: 520px; }
    .home-popular-grid--compact,
    .home-category-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-natural--inline { grid-template-columns: 1fr; gap: 11px; padding: 15px; }
    .home-about-simple {
        padding: 22px;
    }
    .home-about-simple-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .home-trust-list li {
        padding: 14px 14px 14px 18px;
    }
}

@media (max-width: 640px) {
    .home-content { padding-top: 26px; }
    .home-content .section-heading-row { align-items: flex-start; }
    .home-hero-meta { display: none; }
    .home-tool-discovery-heading,
    .home-faq-heading { align-items: flex-start; }
    .home-natural-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 520px) {
    .brand-logo { height: 35px; max-width: 158px; }
    .brand-logo--footer { height: 34px; max-width: 154px; }
    .home-hero { padding: 15px 0 14px; }
    .home-hero-kicker { display: none; }
    .home-hero h1 { font-size: 29px; }
    .home-hero .hero-subtitle { max-width: 360px; margin: 5px 0 11px; font-size: 13px; line-height: 1.5; }
    .home-hero .calculator { padding: 7px; border-radius:var(--radius-lg); box-shadow: 0 4px 14px rgba(16, 24, 40, .055); }
    .home-hero .calculator-screen { min-height: 150px; margin-bottom: 7px; padding: 12px 12px 14px; border-radius:var(--radius-lg); }
    .home-hero .calculator-screen-top { min-height: 28px; }
    .home-hero .calculator-result { margin-top: 7px; font-size: 50px; }
    .home-hero .calculator-grid { gap: 6px; }
    .home-hero .calc-key { min-height: 52px; border-radius:var(--radius-lg); font-size: 19px; }
    .home-hero .calc-key--utility { font-size: 15px; }
    .home-hero .calc-key--operator,
    .home-hero .calc-key--equals { font-size: 22px; }
    .home-hero .calculator-tools { min-height: 42px; margin: 7px -7px -7px; }
    .home-hero .calc-tool { min-height: 39px; }
    .home-content .section-heading-row h2,
    .home-about-simple h2 { font-size: 24px; }
    .section-description { font-size: 12px; }
    .home-tool-discovery-heading,
    .home-faq-heading { display: grid; gap: 7px; }
    .home-discovery-block { padding-top: 14px; }
    .home-discovery-block--categories { margin-top: 18px; }
    .home-discovery-subhead { margin-bottom: 8px; }
    .home-discovery-subhead span { display: none; }
    .home-popular-grid--compact { grid-template-columns: 1fr 1fr; gap: 7px; }
    
    .home-popular-grid--compact small { font-size: 8.5px; }
    
    .home-category-grid--compact { grid-template-columns: 1fr 1fr; gap: 7px; }
    .home-category-grid--compact .home-category-card {
    gap: 7px;
    padding: 8px 9px;
}
    .home-category-mark { min-width: 27px; height: 26px; padding-inline: 5px; font-size: 9px; }
    .home-category-name { font-size: 11.5px; }
    
    .home-natural--inline { margin-top: 20px; padding: 13px; }
    .home-natural-form { grid-template-columns: 1fr; }
    .home-natural-form button { width: 100%; }
    .home-about-simple,
    .home-faq { margin-top: 30px; padding-top: 26px; }
    .home-about-simple-copy p { font-size: 12.5px; }
}

@media (max-width: 380px) {
    .home-hero h1 { font-size: 27px; }
    .home-hero .hero-subtitle { max-width: 320px; font-size: 12.5px; }
    .home-hero .calc-key { min-height: 50px; }
    .home-popular-grid--compact,
    .home-category-grid--compact { grid-template-columns: 1fr; }
    
}


/* v4.9.5 — Blog */
.blog-page { padding-block: 28px 72px; }
.blog-page .breadcrumbs,
.blog-single .breadcrumbs { margin-bottom: 22px; }
.blog-hero {
    padding: 9px 0 31px;
}
.blog-eyebrow {
    color: var(--primary);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}.blog-topic {
    line-height: 1.3;
    letter-spacing: .025em;
    text-transform: uppercase;
}.section-kicker {
    font-size: 12px;
    line-height: 1.3;
    text-transform: uppercase;
}
.blog-hero h1 {
    margin: 7px 0 10px;
    color: var(--text-strong);
}
.blog-hero > p {
    margin: 0;
}
.blog-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}
.blog-search input { min-width: 0; min-height: 46px; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius:var(--radius-lg); background: var(--surface); color: var(--text); font-size: 15px; outline: none; }
.blog-search input:focus { border-color: var(--primary-border-strong); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.blog-search button {
    cursor: pointer;
}

.blog-search button:focus-visible { outline: 3px solid var(--focus-ring-strong); outline-offset: 2px; }
.blog-topics {
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
}
.blog-topics > span { flex: 0 0 auto; margin-right: 3px; color: var(--text-tertiary); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.blog-topics a {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 13px;
}
.blog-topics a:hover { border-color: var(--primary-border); color: var(--primary); background: var(--primary-soft-subtle); }
.blog-feed { min-width: 0; }
.blog-section-head { margin-bottom: 17px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.blog-section-head h2 { margin: 4px 0 0; color: var(--text-strong); font-size: 25px; line-height: 1.2; letter-spacing: -.025em; }
.blog-section-head > a { flex: 0 0 auto; color: var(--primary); font-size: 13px; font-weight: 700; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blog-card {
    min-width: 0;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.blog-card-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #f2f4f7; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.015); }
.blog-card-body {
    display: flex;
    flex-direction: column;
}
.blog-card-topline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.blog-topic {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    color: var(--primary);
    font-size: 11px;
}
.blog-card-title {
    margin: 0 0 10px;
    color: var(--text-strong);
    letter-spacing: -.02em;
}


.blog-card-excerpt {
    margin: 0;
    color: var(--text-secondary);
}
.blog-card-meta { display: inline-flex; flex-wrap: wrap; gap: 6px; color: var(--text-tertiary); font-size: 12px; }
.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}
.blog-card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-card-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 900px) {
    .blog-grid, .blog-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-grid--related .blog-card:last-child:nth-child(odd) { display: none; }
}
.blog-article { max-width: 790px; margin-inline: auto; }
.blog-article-header { padding: 8px 0 24px; }
.blog-article-header h1 {
    margin: 8px 0 12px;
    color: var(--text-strong);
}
.blog-article-lead {
    margin: 0 0 15px;
    color: var(--text-secondary);
}
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 7px; color: var(--text-tertiary); font-size: 13px; }
.blog-article-image {
    margin: 5px 0 31px;
    overflow: hidden;
    background: #f2f4f7;
}
.blog-article-image img { display: block; width: 100%; height: auto; }
.blog-article-content {
    color: #3f4d61;
}
.blog-article-content > * { max-width: 100%; }
.blog-article-content h2 {
    margin: 34px 0 10px;
    color: var(--text-strong);
    line-height: 1.25;
    letter-spacing: -.025em;
}
.blog-article-content h3 {
    margin: 27px 0 8px;
    color: var(--text-strong);
    line-height: 1.3;
}
.blog-article-content p { margin: 0 0 18px; }
.blog-article-content ul,
.blog-article-content ol { margin: 0 0 20px; padding-left: 23px; }
.blog-article-content li { margin-bottom: 7px; }
.blog-article-content blockquote { margin: 24px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--primary-border-strong); color: var(--text-secondary); }
.blog-article-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.blog-article-content th,
.blog-article-content td { padding: 10px 11px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog-article-content th { background: #f8fafc; color: var(--text-strong); }
.blog-tool-cta {
    margin: 38px 0 0;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid var(--primary-line-soft);
    background: var(--primary-soft-subtle);
}
.blog-tool-cta h2 { margin: 4px 0 5px; font-size: 21px; }
.blog-tool-cta p { max-width: 570px; margin: 0; color: var(--text-secondary); font-size: 14px; }
.blog-tool-cta .primary-button { flex: 0 0 auto; }
.blog-related { max-width: 1040px; margin: 50px auto 0; padding-top: 27px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
    .blog-page, .blog-single { padding-top: 21px; padding-bottom: 56px; }
    .blog-hero { padding-top: 3px; padding-bottom: 24px; }
    .blog-hero h1 { font-size: 36px; }
    .blog-hero > p { font-size: 15px; line-height: 1.65; }
    .blog-search { grid-template-columns: 1fr; }
    .blog-search button { width: 100%; }
    .blog-topics { margin-bottom: 27px; }
    .blog-section-head { align-items: flex-end; }
    .blog-section-head h2 { font-size: 22px; }
    .blog-card-title { font-size: 20px; }
    .blog-grid, .blog-grid--related { grid-template-columns: 1fr; gap: 15px; }
    .blog-grid--related .blog-card:last-child:nth-child(odd) { display: block; }
    .blog-card-body { padding: 15px 16px 16px; min-height: 0; }
    .blog-article-header h1 { font-size: 36px; }
    .blog-article-lead { font-size: 16px; }
    .blog-article-image { margin-bottom: 24px; border-radius:var(--radius-lg); }
    .blog-article-content { font-size: 16px; line-height: 1.74; }
    .blog-article-content h2 { font-size: 24px; }
    .blog-tool-cta { padding: 19px; display: grid; gap: 16px; }
    .blog-tool-cta .primary-button { width: 100%; }
    .blog-related { margin-top: 39px; padding-top: 24px; }
}

/* Blog discovery on homepage */
.home-blog {
    margin-top: 44px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}
.home-blog-heading {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}
.home-blog-heading > a {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 650;
}
.home-blog-heading > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-blog-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-blog-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .16s ease, background .16s ease;
}
.home-blog-card:hover {
    background: #fbfdff;
}
.home-blog-card-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #f2f4f7;
}
.home-blog-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease;
}
.home-blog-card:hover .home-blog-card-media img { transform: scale(1.01); }
.home-blog-card-body {
    padding: 15px 15px 16px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.home-blog-card-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 9px;
    margin-bottom: 8px;
}
.home-blog-card-topline > span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border-radius:var(--radius-pill);
    background: var(--primary-soft-subtle);
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 700;
}
.home-blog-card-topline > small { color: var(--text-tertiary); font-size: 10px; }
.home-blog-card h3 {
    margin: 0 0 7px;
    color: var(--text-strong);
    font-size: 18px;
    line-height: 1.38;
    letter-spacing: -.015em;
}


.home-blog-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.62;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.home-blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 13px;
    font-size: 12px;
}
.home-blog-card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-blog-card-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 760px) {
    .home-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .home-blog { margin-top: 30px; padding-top: 26px; }
    .home-blog-heading { display: grid; align-items: flex-start; gap: 7px; }
    .home-blog-grid { grid-template-columns: 1fr; gap: 10px; }
    .home-blog-card-body { padding: 14px; }
    .home-blog-card h3 { font-size: 18px; }
}

/* Casio calculator UI moved to assets/css/calculator-core.css in v4.56.1. */

/* v4.10.2: contextual Blog guides on calculator pages */
.tool-guide-section .section-heading-row { align-items: end; }
.tool-guide-grid { margin-top: 8px; }
.tool-guide-card h3 a { color: inherit; text-decoration: none; }
.tool-guide-card h3 a:hover { color: var(--primary); }
.tool-guide-card__meta { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.tool-guide-card__link { display: inline-flex; margin-top: 9px; color: var(--primary); font-size: 13px; font-weight: 700; text-decoration: none; }
.tool-guide-card__link:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .tool-guide-section .section-heading-row { align-items: flex-start; gap: 8px; }
}

/* v4.11.0 — adult BMI calculator */
.health-tool{max-width:820px;margin:4px auto 38px}.health-panel {
    padding: 18px;
    border: 1px solid var(--line);
}.health-form{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px 12px;align-items:start}.health-form>label,.health-fields label{display:flex;flex-direction:column;align-self:start;min-width:0}.health-form>label>span,.health-fields label>span{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:12px;font-weight:600}.health-form input,.health-form select,.health-fields input{width:100%;height:46px;padding:0 11px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text-primary);font:inherit;font-size:15px;outline:none;}.health-form input:hover,.health-form select:hover,.health-fields input:hover{border-color:#b8c0cc}.health-form input:focus,.health-form select:focus,.health-fields input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus-ring)}.health-form input[aria-invalid="true"],.health-form select[aria-invalid="true"],.health-fields input[aria-invalid="true"]{border-color:#f04438;box-shadow:0 0 0 3px rgba(240,68,56,.10)}.health-form small{display:block;margin-top:6px;color:var(--text-tertiary);font-size:11px;line-height:1.45}.health-fields{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.health-fields--imperial{grid-template-columns:repeat(3,minmax(0,1fr))}.health-form>[hidden],.health-fields[hidden]{display:none!important}.health-form>.tool-primary-button{grid-column:1/-1;justify-self:start;min-width:160px}.health-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.health-summary{margin:8px 0 0;color:var(--text-secondary);font-size:13px;line-height:1.6}.health-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:13px;border:1px solid var(--line);background:var(--line)}.health-stats>div{min-width:0;padding:11px 12px;background:var(--surface);}.health-stats span{display:block;color:var(--text-tertiary);font-size:11px;line-height:1.45}.health-stats strong{display:block;margin-top:4px;color:var(--text-primary);font-size:15px;font-variant-numeric:tabular-nums}.bmi-scale{margin-top:18px}.bmi-scale-track{position:relative;height:10px;border:1px solid var(--line);border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--surface-subtle) 0 19.7%,var(--surface) 19.7% 39.4%,var(--surface-info) 39.4% 54.5%,var(--surface-subtle) 54.5% 100%);}.bmi-scale-marker{position:absolute;top:50%;left:0;width:16px;height:16px;border:3px solid var(--surface);border-radius:50%;background:var(--primary);box-shadow:0 0 0 1px var(--primary),0 2px 5px rgba(16,24,40,.15);transform:translate(-50%,-50%);transition:left .18s ease;}.bmi-scale-labels{display:grid;grid-template-columns:19.7fr 19.7fr 15.1fr 45.5fr;gap:6px;margin-top:7px;color:var(--text-tertiary);font-size:10px;line-height:1.3;text-align:center}.health-disclaimer{max-width:820px;margin:-18px auto 34px;padding:13px 14px;border:1px solid #fedf89;border-radius:var(--radius);background:#fffaeb;color:#5f4b20;font-size:12px;line-height:1.65;}.health-disclaimer strong{display:block;color:#7a2e0e}.health-disclaimer p{margin:4px 0 0}.source-line{color:var(--text-secondary);font-size:12px}.source-line a{font-weight:600}
@media(max-width:640px){.health-panel{padding:14px}.health-form{grid-template-columns:1fr}.health-fields,.health-fields--imperial{grid-column:1;grid-template-columns:1fr 1fr}.health-fields--imperial label:last-child{grid-column:1/-1}.health-form>.tool-primary-button{grid-column:1;width:100%;justify-self:stretch}.health-stats{grid-template-columns:1fr}.health-disclaimer{margin-top:-20px}.bmi-scale-labels{font-size:9px}}
@media(max-width:420px){.health-fields,.health-fields--imperial{grid-template-columns:1fr}.health-fields--imperial label:last-child{grid-column:auto}.bmi-scale-labels{grid-template-columns:1fr 1fr;text-align:left;gap:4px 10px}}


/* v4.13.0 — Speed / distance / time */
.motion-tool{max-width:820px;margin:4px auto 38px}.motion-panel {
    padding: 18px;
    border: 1px solid var(--line);
}.motion-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}.motion-form>label>span{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:12px;font-weight:600}.motion-form input,.motion-form select{width:100%;height:46px;padding:0 11px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text-primary);font:inherit;font-size:15px;outline:none;}.motion-form input:hover,.motion-form select:hover{border-color:#b8c0cc}.motion-form input:focus,.motion-form select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus-ring)}.motion-form input[aria-invalid="true"]{border-color:#f04438;box-shadow:0 0 0 3px rgba(240,68,56,.10)}.motion-form>[hidden]{display:none!important}.motion-value-row{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:7px}.motion-value-row select{padding-right:7px}.motion-form>.tool-primary-button{grid-column:1/-1;justify-self:start;min-width:160px;height:46px}.motion-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.motion-summary{margin:8px 0 0;color:var(--text-secondary);font-size:13px;line-height:1.6}.motion-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:13px;border:1px solid var(--line);background:var(--line)}.motion-stats>div{min-width:0;padding:11px 12px;background:var(--surface);}.motion-stats span{display:block;color:var(--text-tertiary);font-size:11px;line-height:1.45}.motion-stats strong{display:block;margin-top:4px;color:var(--text-primary);font-size:15px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.motion-formula{margin-top:13px}.motion-calculation{margin-top:8px;padding:10px 12px;border-left:2px solid var(--primary-line-soft);background:var(--surface-info);color:var(--text-secondary);font-size:12px;line-height:1.55}.motion-calculation span{display:block;margin-bottom:4px;font-size:11px;font-weight:700}.motion-calculation code{white-space:normal;overflow-wrap:anywhere}.motion-tool button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media(max-width:640px){.motion-panel{padding:14px}.motion-form{grid-template-columns:1fr}.motion-form>.tool-primary-button{grid-column:1;width:100%;justify-self:stretch}.motion-stats{grid-template-columns:1fr}.motion-value-row{grid-template-columns:minmax(0,1fr) 96px}}

/* v4.15.9 — privacy-first return visit helpers */
.calculator-heading-row {
    display: flex;
    justify-content: space-between;
}
.calculator-heading-copy { min-width: 0; }
.calculator-heading-copy .content-lead { margin-bottom: 0; }
.tool-pin-button {
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 8px 12px;
    border: 1px solid var(--line-strong, #d7dde5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.tool-pin-button[hidden] { display: none !important; }
.tool-pin-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}.home-personal-unpin svg {
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tool-pin-button.is-pinned { border-color: var(--primary-border); background: var(--primary-soft-subtle); color: var(--primary-dark); }
.tool-pin-button.is-pinned svg { fill: currentColor; stroke: currentColor; }
.tool-pin-button:focus-visible,
.home-personal-unpin:focus-visible,
.home-personal-tool-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.home-personal-tools {
    margin: 0 0 18px;
    padding: 17px 18px;
    border: 1px solid #dfe6ee;
    background: #f8fafc;
}
.home-personal-tools[hidden] { display: none !important; }
.home-personal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 13px;
}
.home-personal-head h2 { margin: 0; color: var(--text-strong); font-size: 18px; line-height: 1.3; }
.home-personal-head .section-description { margin-top: 3px; }
.home-personal-local {
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 4px 7px;
    border: 1px solid #dfe6ee;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-tertiary);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
}
.home-personal-groups { display: grid; gap: 13px; }
.home-personal-group[hidden] { display: none !important; }
.home-personal-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: var(--text-tertiary);
    font-size: 10px;
    line-height: 1.3;
}
.home-personal-group-head strong { color: var(--text-secondary); font-size: 11px; }
.home-personal-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.home-personal-tool {
    position: relative;
    min-width: 0;
    border: 1px solid #dfe6ee;
    border-radius:var(--radius-lg);
    background: var(--surface);
}
.home-personal-tool:hover { border-color: var(--primary-border); }
.home-personal-tool-link {
    min-width: 0;
    min-height: 58px;
    padding: 10px 34px 9px 11px;
    color: inherit;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
}
.home-personal-tool:not(.is-pinned) .home-personal-tool-link { padding-right: 11px; }
.home-personal-tool-link strong {
    min-width: 0;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-personal-tool-link span { grid-column: 1; color: var(--text-tertiary); font-size: 10px; line-height: 1.2; }
.home-personal-tool-link b {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
}
.home-personal-unpin {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 28px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius:var(--radius);
    background: transparent;
    color: var(--text-tertiary);
    display: inline-grid;
    place-items: center;
    transform: translateY(-50%);
    cursor: pointer;
}
.home-personal-unpin:hover { background: #f1f5f9; color: var(--primary-dark); }
.home-personal-unpin svg { width: 14px; height: 14px; fill: currentColor; }

@media (max-width: 760px) {
    .calculator-heading-row { display: grid; gap: 11px; }
    .tool-pin-button { justify-self: start; min-height: 42px; margin-top: 0; }
    .home-personal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .home-personal-tools { margin-bottom: 14px; padding: 14px; }
    .home-personal-head { display: grid; gap: 8px; margin-bottom: 12px; }
    .home-personal-local { justify-self: start; margin-top: 0; }
    .home-personal-list { grid-template-columns: 1fr; gap: 7px; }
    .home-personal-tool-link { min-height: 55px; }
    .home-personal-group-head span { display: none; }
    
}

/* v4.16.1 — one-tap return to the last meaningfully used tool */
.home-resume-card {
    min-width: 0;
    margin: 0 0 13px;
    padding: 13px 14px;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.home-resume-card[hidden] { display: none !important; }

.home-resume-card:active { transform: translateY(1px); }

.home-resume-copy { min-width: 0; display: grid; gap: 2px; }
.home-resume-eyebrow { color: var(--primary-dark); font-size: 10px; line-height: 1.25; font-weight:650; text-transform: uppercase; letter-spacing: .045em; }
.home-resume-copy strong { min-width: 0; color: var(--text-primary); font-size: 14px; line-height: 1.35; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-resume-copy > span:last-child { color: var(--text-tertiary); font-size: 10.5px; line-height: 1.35; }
.home-resume-action { flex: 0 0 auto; min-height: 36px; padding: 0 10px; border-radius:var(--radius-lg); background: var(--primary); color: var(--surface); display: inline-flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1; font-weight: 700; }
.home-resume-action b { font-size: 13px; line-height: 1; }
@media (max-width: 520px) {
    .home-resume-card { align-items: stretch; padding: 12px; gap: 11px; }
    .home-resume-copy strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .home-resume-action { align-self: center; min-height: 40px; padding: 0 11px; }
}

/* v4.16.0 — Return-visit PWA prompt, shown only after real engagement */
.pwa-install-row {
    position: relative;
    max-width: none;
    margin-top: 22px;
    padding: 15px 16px;
    border-color: var(--primary-line-soft);
    background: var(--primary-soft-subtle);
}
.pwa-install-copy { flex: 1 1 auto; }
.pwa-install-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--primary-dark);
    font-size: 10px;
    font-weight:650;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pwa-install-copy strong { font-size: 14px; line-height: 1.35; }
.pwa-install-copy > span:not(.pwa-install-eyebrow):not(.pwa-ios-help) { max-width: 680px; }
.pwa-install-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pwa-install-button {
    min-height: 40px;
    padding-inline: 14px;
    border-color: var(--primary);
    background: var(--primary);
    color: var(--surface);
}
.pwa-install-button:hover { border-color: var(--primary-dark); background: var(--primary-dark); color: var(--surface); }
.pwa-later-button {
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.pwa-later-button:hover { background: rgba(16, 24, 40, .05); color: var(--text-secondary); }
.pwa-install-button:focus-visible,
.pwa-later-button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.pwa-later-button[hidden] { display: none !important; }
.pwa-ios-help {
    display: block;
    max-width: 680px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid #e2e8f0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.55;
}
.pwa-ios-help[hidden] { display: none !important; }
.calculator-landing .pwa-install-row { margin: 24px 0 0; }
@media (max-width: 620px) {
    .pwa-install-row:not([hidden]) { display: block; padding: 14px; }
    .pwa-install-actions { margin-top: 11px; }
    .pwa-install-button { flex: 1 1 auto; width: auto; margin-top: 0; }
    .pwa-later-button { flex: 0 0 auto; }
}
@media (max-width: 360px) {
    .pwa-install-actions { align-items: stretch; flex-direction: column; }
    .pwa-install-button, .pwa-later-button { width: 100%; }
}

/* v4.20 — Scientific cluster polish: quick examples are real controls. */
.scientific-quick-examples {
    margin-top: 10px;
    margin-bottom: 2px;
}
.tool-examples button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* v4.26.0 — traffic-gap calculators: matrix, profit, workday salary, depreciation */
.matrix-tool{max-width:900px;margin:4px auto 38px}.matrix-panel {
    padding: 18px;
    border: 1px solid var(--line);
}.matrix-editors{display:grid;grid-template-columns:1fr 1fr;gap:14px}.matrix-editor{min-width:0;padding:13px;border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfe}.matrix-editor-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}.matrix-editor-head h3{margin:0;color:var(--text-primary);font-size:15px}.matrix-size{display:flex;align-items:flex-end;gap:6px}.matrix-size label span{display:block;margin-bottom:4px;color:var(--text-tertiary);font-size:10px;font-weight:600}.matrix-size select{height:36px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text-primary);font:inherit;font-size:12px;}.matrix-grid{display:grid;grid-template-columns:repeat(var(--matrix-cols,2),minmax(0,1fr));gap:6px}.matrix-grid input{min-width:0;width:100%;height:44px;padding:0 5px;border:1px solid #d0d5dd;border-radius:var(--radius);background:var(--surface);color:var(--text-primary);font:inherit;font-size:15px;font-weight:600;text-align:center;outline:none;font-variant-numeric:tabular-nums;}.matrix-grid input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus-ring)}.matrix-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.matrix-actions button{min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:#344054;font:inherit;font-size:12px;font-weight:700;cursor:pointer;}.matrix-actions button:hover{border-color:var(--primary-line-soft);background:var(--surface-info);color:var(--primary-dark)}.matrix-actions button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.matrix-actions .matrix-example-button{margin-left:auto;color:var(--primary)}.matrix-result{margin-top:17px;padding-top:17px;border-top:1px solid var(--line);overflow:auto}.matrix-result-table{border-collapse:separate;border-spacing:5px;margin:6px 0 0}.matrix-result-table td{min-width:72px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfe;color:var(--text-primary);text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;}.matrix-scalar-result{display:block;margin-top:8px;color:var(--text-primary);font-size:clamp(28px,5vw,40px);line-height:1.15;}.matrix-empty{display:block;margin-top:8px;color:#98a2b3;font-size:28px}.depreciation-schedule {
    margin-top: 16px;
    overflow: auto;
}.depreciation-schedule table{width:100%;min-width:650px;border-collapse:collapse}.depreciation-schedule th,.depreciation-schedule td{padding:9px 11px;border-bottom:1px solid var(--line);text-align:right;font-size:12px;font-variant-numeric:tabular-nums}.depreciation-schedule th:first-child,.depreciation-schedule td:first-child{text-align:left}.depreciation-schedule tr:last-child td{border-bottom:0}
@media(max-width:720px){.matrix-editors{grid-template-columns:1fr}.matrix-editor-head{align-items:center}.matrix-actions .matrix-example-button{margin-left:0}.matrix-result-table td{min-width:64px;padding:9px 8px}}
@media(max-width:420px){.matrix-panel{padding:13px}.matrix-editor{padding:10px}.matrix-grid{gap:4px}.matrix-grid input{height:42px;font-size:14px}.matrix-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.matrix-actions button{width:100%;padding:0 8px}.matrix-actions .matrix-example-button{grid-column:1/-1}.matrix-size select{height:34px}}

/* v4.27.0 — editorial link concentration for homepage and category hubs */
.category-featured-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 18px 0 14px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f8fafc;
    color: var(--text-secondary);
    font-size: 12px;
}
.category-featured-nav strong { margin-right: 2px; color: var(--text-primary); }
.category-featured-nav a {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    line-height: 1.2;
}

.category-featured-nav a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.category-featured-nav + .category-jump-nav { margin-top: 0; }
@media (max-width: 640px) {
    .category-featured-nav { align-items: flex-start; padding: 10px; }
    .category-featured-nav strong { flex: 0 0 100%; margin-bottom: 1px; }
}



/* Homepage discovery navigation — compact, flat, and consistent with the current UI system. */
.home-tool-discovery-heading { margin-bottom: 16px; }
.home-discovery-block { padding-top: 16px; border-top: 1px solid var(--line); }
.home-discovery-subhead strong { font-size: 14px; }
.home-discovery-subhead span { font-size: 12px; }
.home-popular-grid--compact a {
    display: flex;
    min-height: 72px;
    padding: 12px 36px 12px 14px;
    flex-direction: column;
    justify-content: center;
}
.home-popular-grid--compact a:hover,
.home-popular-grid--compact a:focus-visible { transform: none; box-shadow: none; }
.home-popular-grid--compact small { margin-bottom: 3px; font-size: 9px; }
.home-popular-grid--compact strong { font-size: 14px; line-height: 1.35; }
.home-popular-grid--compact b {
    position: absolute;
    top: 50%;
    right: 13px;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    border-radius: 0;
    background: transparent;
    color: var(--primary);
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}
.home-card-action { display: none; }
.home-category-grid--compact .home-category-card {
    grid-template-columns: 32px minmax(0, 1fr) auto auto;
    min-height: 58px;
    padding: 9px 11px;
}
.home-category-grid--compact .home-category-card:focus-visible { transform: none; box-shadow: none; }
.home-category-name { font-size: 13px; color: var(--text-primary); }
.home-category-count {
    display: inline;
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
}
.home-category-action {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--primary);
    font-size: 11px;
    white-space: nowrap;
}
@media (max-width: 760px) {
    .home-category-grid--compact .home-category-card { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .home-category-action { display: none; }
}
@media (max-width: 520px) {
    .home-popular-grid--compact a { min-height: 68px; padding: 10px 34px 10px 11px; }
    .home-popular-grid--compact strong { font-size: 13px; }
    .home-category-grid--compact .home-category-card { grid-template-columns: 28px minmax(0, 1fr); min-height: 52px; }
    .home-category-count, .home-category-action { display: none; }
}
@media (max-width: 380px) {
    .home-popular-grid--compact a { min-height: 64px; }
}

/* v4.50.0 — Unified UI/UX system, repaired and consistency-audited
 * Replaces the former v4.36.0–v4.36.5 patch stack with one deliberate layer.
 * Visual principles: flat surfaces, restrained radius, obvious interactions,
 * consistent page frame, one brand color, and mobile-first control sizing.
 */
:root {
    --page-frame: 1120px;
    --page-reading: 820px;
    --control-height: 44px;
    --section-gap: 48px;
    --card-padding: 18px;
}

body {
    color: var(--text-primary);
    font-weight: 400;
}

/* Layout contract: chrome may use 1200px; body content uses one 1120px frame. */
.site-shell { width: min(calc(100% - 40px), var(--shell)); }
.home-content-inner,
.tools-hub-shell,
.content-shell,
.info-page,
.generic-page,
.blog-page,
.blog-single { max-width: var(--page-frame); }
.widget-page .content-shell,
.tool-category-page .content-page,
.calculator-landing { max-width: none; }
.info-page > .info-article,
.generic-page > .entry,
.blog-single > .blog-article {
    width: 100%;
    max-width: var(--page-reading);
}
/* Contact is a task page, not a long-form reading page. */
.info-page > .info-article.contact-layout { max-width: 1040px; }

.content-main,
.tools-hub-main,
.info-page,
.generic-page,
.blog-page,
.blog-single {
    padding-top: 28px;
    padding-bottom: 72px;
}

/* Typography hierarchy: strong where it guides scanning, not everywhere. */
h1, h2, h3, h4 { color: var(--text-strong); }
.content-header h1,
.tools-hub-header h1,
.info-header h1,
.category-hero h1 {
    font-weight: 700;
    letter-spacing: -.025em;
}.blog-hero h1 {
    font-weight: 700;
}
.section-heading-row h2,
.home-about-simple h2,
.tools-hub-note h2 {
    font-weight: 650;
    letter-spacing: -.018em;
}.tool-category-heading h2 {
    letter-spacing: -.018em;
}
.section-kicker,
.eyebrow,
.tool-card-kicker {
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: .045em;
}
.content-lead,
.tools-hub-header > p:last-child,
.blog-hero > p,
.tool-category-heading p,
.section-description,
.footer-brand p { color: var(--text-secondary); }

/* Header: clean navigation bar, no glassy/AI-looking treatment. */
.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.header-inner { min-height: 66px; gap: 30px; }
.custom-logo { max-width: 200px; max-height: 40px; }
.main-nav,
.main-nav .menu { gap: 26px; }
.main-nav a {
    min-height: 66px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}
.main-nav a:hover { color: var(--primary); }
.main-nav a.is-current,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--primary); }
.main-nav a.is-current::after,
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after { height: 3px; border-radius: 0; }
.mobile-nav summary {
    border-color: var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
}
.mobile-nav-panel {
    padding: 6px;
    border-color: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px rgba(16,24,40,.12);
}
.mobile-nav-panel a { border-radius: var(--radius); font-weight: 600; }

/* Breadcrumb is lightweight navigation, with one rhythm on every template. */
.breadcrumbs,
.breadcrumb {
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.45;
}
.breadcrumbs ol { column-gap: 7px; row-gap: 4px; }
.breadcrumbs li { gap: 7px; min-width: 0; }
.breadcrumbs li:not(:last-child)::after { color: #98a2b3; }
.breadcrumbs a,
.breadcrumb a { color: var(--text-secondary); font-weight: 500; }
.breadcrumbs a:hover,
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs [aria-current="page"] { color: var(--text-tertiary); overflow-wrap: anywhere; }
.blog-page > .breadcrumbs + .blog-hero { padding-top: 0; }
.blog-single > .breadcrumbs + .blog-article .blog-article-header { padding-top: 0; }
.content-shell > .breadcrumbs + .content-page,
.tools-hub-shell > .breadcrumbs + .tools-hub-header,
.info-page > .breadcrumbs + .info-article,
.generic-page > .breadcrumbs + .entry { margin-top: 0; }

/* Editorial links look like links; nav/cards remain visually separate. */
.entry-content a,
.seo-section p a,
.info-article p a,
.blog-article-body p a,
.home-about-simple-copy p a,
.tools-hub-note p a,
.tools-guide p a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.entry-content a:hover,
.seo-section p a:hover,
.info-article p a:hover,
.blog-article-body p a:hover,
.home-about-simple-copy p a:hover { color: var(--primary-dark); }

/* Long-form/static pages: one reading rhythm for WordPress pages, legal copy and help content. */
.generic-page .entry-content,
.info-article { font-size: 16px; line-height: 1.72; }
.generic-page .entry-content > h2 { margin: 34px 0 10px; color: var(--text-strong); font-size: 24px; line-height: 1.32; letter-spacing: -.02em; }
.generic-page .entry-content > h3 { margin: 26px 0 8px; color: var(--text-strong); font-size: 19px; line-height: 1.4; }
.generic-page .entry-content p,
.generic-page .entry-content li { color: var(--text-secondary); }
.generic-page .entry-content ul,
.generic-page .entry-content ol { padding-left: 1.35em; }
.generic-page .entry-content li + li { margin-top: 5px; }
.generic-page .entry-content blockquote { margin: 24px 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--primary-border-strong); color: var(--text-secondary); }
.generic-page .entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.generic-page .entry-content th,
.generic-page .entry-content td { padding: 10px 11px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.generic-page .entry-content th { background: var(--surface-subtle); color: var(--text-primary); font-weight: 650; }
.generic-page .wp-block-table { max-width: 100%; overflow-x: auto; }

/* Shared interactive surfaces: clear clickable affordance without floating cards. */
.tool-card-link,
.home-popular-grid--compact a,
.home-category-grid--compact .home-category-card,
.category-discovery-links a,
.tools-category-overview-grid > a,
.home-resume-card,
.home-personal-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: none;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}.popular-tools-grid a {
    background: var(--surface);
    box-shadow: none;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.tool-card-link:hover,
.popular-tools-grid a:hover,
.home-popular-grid--compact a:hover,
.home-category-grid--compact .home-category-card:hover,
.category-discovery-links a:hover,
.tools-category-overview-grid > a:hover,
.home-resume-card:hover,
.home-personal-item:hover {
    border-color: var(--primary-border-strong);
    background: var(--primary-soft-subtle);
    box-shadow: none;
    transform: none;
}
.tool-card-link:focus-visible,
.popular-tools-grid a:focus-visible,
.home-popular-grid--compact a:focus-visible,
.home-category-card:focus-visible,
.category-discovery-links a:focus-visible,
.tools-category-overview-grid > a:focus-visible,
.home-resume-card:focus-visible {
    outline: 3px solid var(--focus-ring-strong);
    outline-offset: 2px;
}
.tool-card h3,
.home-popular-grid strong,
.home-category-name,
.category-discovery-links strong {
    font-weight: 650;
}
.tool-card-kicker { font-size: 10px; }
.tool-card-action,
.popular-tool-action,
.home-card-action,
.home-category-action,
.category-discovery-action {
    color: var(--primary);
    font-weight: 600;
}
.tool-card-action::after { content: none; }

/* Blog cards are containers; only actual links behave as links. */
.blog-card,
.home-blog-card {
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: none;
    cursor: default;
    transform: none;
}
.blog-card:hover,
.home-blog-card:hover { border-color: var(--line-strong); box-shadow: none; transform: none; }
.blog-card:focus-within,
.home-blog-card:focus-within { border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--focus-ring); }
.blog-card-title a,
.home-blog-card h3 a {
    color: var(--text-strong);
    cursor: pointer;
}.blog-card-link,
.home-blog-card-link {
    cursor: pointer;
}
.blog-card-title a:hover,
.home-blog-card h3 a:hover,
.blog-card-link:hover,
.home-blog-card-link:hover { color: var(--primary); }
.blog-card-link,
.home-blog-card-link { color: var(--primary); font-weight: 600; }
.blog-card,
.home-blog-card,
.blog-article-image {
    border-radius: var(--radius-lg);
}

/* Buttons: primary is unmistakable, secondary remains quiet. */
.tool-primary-button,
.percent-primary-btn,
.date-primary-btn,
.discount-primary-btn,
.average-primary-btn,
.converter-primary-btn,
.geometry-primary-btn,
.primary-button,
.blog-search button,
.home-natural-form button {
    min-height: var(--control-height);
    padding: 9px 16px;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--surface);
    box-shadow: none;
    font-weight: 650;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.tool-primary-button:hover,
.percent-primary-btn:hover,
.date-primary-btn:hover,
.discount-primary-btn:hover,
.average-primary-btn:hover,
.converter-primary-btn:hover,
.geometry-primary-btn:hover,
.primary-button:hover,
.blog-search button:hover,
.home-natural-form button:hover {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
}
.tool-secondary-button,
.percent-reset-btn,
.date-reset-btn,
.discount-reset-btn,
.average-reset-btn,
.geometry-reset-btn,
.converter-swap-btn,
.widget-code-actions button,
.date-copy-btn,
.average-copy-btn,
.discount-copy-btn,
.percent-copy-btn,
.tool-result-head button {
    min-height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-secondary);
    box-shadow: none;
    font-weight: 600;
}
.tool-secondary-button:hover,
.percent-reset-btn:hover,
.date-reset-btn:hover,
.discount-reset-btn:hover,
.average-reset-btn:hover,
.geometry-reset-btn:hover,
.converter-swap-btn:hover,
.widget-code-actions button:hover,
.date-copy-btn:hover,
.average-copy-btn:hover,
.discount-copy-btn:hover,
.percent-copy-btn:hover,
.tool-result-head button:hover {
    border-color: var(--primary-border-strong);
    background: var(--primary-soft-subtle);
    color: var(--primary);
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus-ring-strong);
    outline-offset: 2px;
}

/* Form controls: one height, one radius and strong active/error states. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border-color: var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
}
input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: #9eabbc; }
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--error); background: var(--surface-error); }

/* Task panels are distinct from content but not nested-card-heavy. */
.tool-finder,
.policy-card,
.policy-summary-grid > div {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: none;
}.widget-builder {
    border: 1px solid var(--line);
}
.tool-finder { padding: 18px; position: static; }
.tool-search-wrap { border-radius: var(--radius); }
.tool-search-input { min-height: 46px; }
.tool-category-nav {
    gap: 6px;
    scrollbar-width: thin;
}
.tool-category-nav a {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 600;
}.category-featured-nav a,
.category-jump-nav a {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 600;
}
.tool-category-nav a:hover,
.category-featured-nav a:hover,
.category-jump-nav a:hover {
    border-color: var(--primary-border-strong);
    background: var(--primary-soft-subtle);
    color: var(--primary);
}
.tool-category-nav a.is-active,
.tool-category-nav a[aria-current="true"] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--surface);
}

/* Tabs: selected state must be obvious without pill overload. */
.discount-tab,
.average-tab,
.converter-tab,
.tool-tabs button,
.probability-tabs button,
.scientific-angle button,
.percent-direction-btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.discount-tab[aria-selected="true"],
.average-tab[aria-selected="true"],
.converter-tab[aria-selected="true"],
.tool-tabs button[aria-selected="true"],
.probability-tabs button[aria-selected="true"],
.scientific-angle button[aria-pressed="true"],
.percent-direction-btn.is-active,
.percent-direction-btn[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

/* Calculator and data panels: flatter, squarer and easier to scan. */
.finance-panel,
.health-panel,
.motion-panel,
.percent-calculator-panel,
.date-calculator-panel,
.geometry-panel,
.converter-panel,
.discount-panel,
.average-panel,
.matrix-panel,
.widget-builder {
    border-color: var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: none;
}
.percent-calculator-panel,
.date-calculator-panel,
.geometry-panel { border: 1px solid var(--line); padding: 18px; }

.finance-result,
.health-result,
.motion-result,
.percent-result,
.date-result,
.geometry-result,
.discount-result,
.average-result,
.utility-result,
.matrix-result,
.fraction-result,
.quadratic-result,
.system-result,
.combinatorics-result {
    border-radius: var(--radius-lg);
    border-color: var(--primary-line-soft);
    background: var(--surface-info);
    box-shadow: none;
}
.tool-result-main,
.percent-result-value,
.date-result-value,
.geometry-result-value { color: var(--text-strong); font-weight: 700; }

.finance-stats > div,
.discount-stat-grid > div,
.average-stat-grid > div,
.date-stat-grid > div,
.health-stats > div,
.motion-stats > div,
.fraction-stats > div,
.system-determinants > div,
.gcd-results > div,
.prime-stats > div,
.grade-stats > div,
.stats-grid > div,
.pythagorean-stats > div,
.combinatorics-grid > div,
.probability-grid > div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
}

/* Tables stay tables, not cards. */
.example-table-wrap,
.depreciation-schedule,
.loan-schedule .example-table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
}
.example-table th,
.depreciation-schedule th { background: var(--surface-subtle); color: var(--text-secondary); font-weight: 600; }
.example-table td,
.depreciation-schedule td { background: var(--surface); }
.table-scroll-hint { color: var(--text-tertiary); }

/* Homepage: calculator first, discovery second, less visual nesting. */
.hero { padding: 34px 0 28px; }
.hero h1 { font-size: clamp(34px, 4.2vw, 46px); font-weight: 700; }
.hero-subtitle { margin-bottom: 20px; }
.home-hero-meta { color: var(--text-secondary); }
.home-hero-meta strong { color: var(--text-primary); font-weight: 650; }
.home-hero-meta a { color: var(--primary); font-weight: 600; }
.calculator {
    border-color: var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-tool);
}
.calculator-screen { border-radius: var(--radius); }
.calc-key { border-radius: var(--radius-sm); }
.scientific-tool,
.home-personal-tools,
.blog-tool-cta {
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.home-content { border-top-color: var(--line); }
/* Homepage discovery/about stay flat to avoid cards inside cards. */
.home-discovery-block { border-top-color: var(--line); }
.home-category-mark {
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
}
.home-natural {
    border: 1px solid var(--primary-line-soft);
    border-radius: var(--radius-lg);
    background: var(--primary-soft-subtle);
}
.home-natural-form input { min-height: 44px; }
.tool-card-grid { gap: 12px; }
.tool-card-link { padding: 17px; }

/* Calculator landing: header and trust information should not compete with the tool. */

.calculator-heading-row { align-items: flex-start; }
.calculator-heading-copy { max-width: 800px; }
.calculator-heading-copy h1 { margin-bottom: 8px; }
.tool-pin-button {
    min-height: 40px;
    border-color: var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 600;
}
.tool-pin-button:hover,
.tool-pin-button[aria-pressed="true"] {
    border-color: var(--primary-border-strong);
    background: var(--primary-soft-subtle);
    color: var(--primary);
}
.calculator-landing > .trust-strip--tool {
    clear: both;
    min-height: 42px;
    margin: 26px 0 24px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    box-shadow: none;
}
.calculator-landing > .trust-strip--tool strong { color: var(--text-primary); font-weight: 600; }

/* FAQ: one quiet disclosure pattern. */
.simple-faq { gap: 8px; }
.faq-section details {
    border-color: var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: clip;
}
.faq-section summary { font-weight: 600; }
.faq-section details[open] { border-color: var(--line-strong); }
.faq-index-page .faq-section {
    max-width: none;
    margin: 30px 0 0;
    padding: 0;
    border-top: 0;
}
.faq-index-page .faq-section + .faq-section { margin-top: 32px; }
.calculator-landing .faq-section + .trust-strip--tool,
.calculator-landing .seo-section.faq-section + .trust-strip--tool { margin-top: 26px; }

/* Footer: simple information architecture, no oversized decoration. */
.site-footer { border-top-color: var(--line); background: var(--surface-subtle); }

.footer-column strong { color: var(--text-primary); font-weight: 650; }
.footer-column a { min-height: 26px; display: inline-flex; align-items: center; color: var(--text-secondary); }
.footer-column a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { color: var(--text-tertiary); }

/* Switch navigation before the Vietnamese desktop menu becomes cramped on tablets. */
@media (max-width: 860px) {
    .main-nav { display: none; }
    .mobile-nav { display: block; }
    .header-inner { min-height: 62px; }
    .mobile-nav-panel { width: min(320px, calc(100vw - 32px)); }
}

/* Mobile: no cramped multi-column forms, comfortable taps, reduced decoration. */
@media (max-width: 760px) {
    :root { --section-gap: 38px; --card-padding: 16px; }
    .site-shell { width: min(calc(100% - 28px), var(--shell)); }
    .header-inner { min-height: 60px; }
    .custom-logo { max-width: 180px; max-height: 36px; }
    .mobile-nav-panel { width: min(320px, calc(100vw - 28px)); }
    .content-main,
    .tools-hub-main,
    .info-page,
    .generic-page,
    .blog-page,
    .blog-single { padding-top: 20px; padding-bottom: 54px; }
    .breadcrumbs,
    .breadcrumb { margin-bottom: 15px; font-size: 11.5px; }
    .popular-tools-grid,
    .category-discovery-links { gap: 9px; }
    .tool-finder { padding: 15px; }
}

@media (max-width: 520px) {
    .site-shell { width: min(calc(100% - 24px), var(--shell)); }
    .content-main,
    .tools-hub-main,
    .info-page,
    .generic-page,
    .blog-page,
    .blog-single { padding-top: 17px; padding-bottom: 46px; }
    .breadcrumbs,
    .breadcrumb { margin-bottom: 13px; }
    .hero { padding-top: 25px; }
    .hero h1 { font-size: 34px; }
    .hero-subtitle { font-size: 15px; }
    .home-hero-meta { gap: 7px 12px; }
    .popular-tools-grid,
    .category-discovery-links { grid-template-columns: 1fr; }
    .popular-tools-grid a { padding: 14px; }
    .category-discovery-links a { min-height: 0; padding: 14px; }
    .tool-card-grid { gap: 9px; }
    
    
    .calculator-heading-row {
    display: grid;
}
    .tool-pin-button { width: auto; justify-self: start; }
    .percent-calculator-panel,
    .date-calculator-panel,
    .discount-panel,
    .converter-panel,
    .geometry-panel,
    .finance-panel,
    .health-panel,
    .motion-panel,
    .matrix-panel { padding: 14px; }
    .finance-stats > div,
    .discount-stat-grid > div,
    .average-stat-grid > div,
    .date-stat-grid > div,
    .health-stats > div,
    .motion-stats > div,
    .fraction-stats > div,
    .system-determinants > div,
    .gcd-results > div,
    .prime-stats > div,
    .grade-stats > div,
    .stats-grid > div,
    .pythagorean-stats > div,
    .combinatorics-grid > div,
    .probability-grid > div { padding: 10px 11px; }
    .calculator-landing > .trust-strip--tool { margin-top: 20px; margin-bottom: 20px; padding: 10px 12px; }
    .faq-section summary { min-height: 50px; padding: 12px 40px 12px 13px; font-size: 13px; }
    .faq-section details p { padding: 0 40px 13px 13px; font-size: 13px; }
}

@media (pointer: coarse) {
    .tool-category-nav a,
    .category-featured-nav a,
    .discount-tab,
    .average-tab,
    .converter-tab,
    .tool-tabs button,
    .probability-tabs button,
    .scientific-angle button,
    .percent-direction-btn,
    .percent-examples button,
    .discount-examples button,
    .average-examples button,
    .converter-examples button,
    .tool-examples button,
    .pwa-install-button,
    .date-copy-btn,
    .average-copy-btn,
    .discount-copy-btn,
    .percent-copy-btn,
    .tool-result-head button { min-height: 44px; }
}


/* Page-level polish inside the unified UI system.
   Width + flow rules are centralized in the calculator page contract near the
   end of this stylesheet so templates do not accumulate competing margins. */
.calculator-heading-row { gap: 24px; }
.calculator-heading-copy h1 {
    font-size: clamp(30px, 3.6vw, 40px);
    line-height: 1.14;
    letter-spacing: -.025em;
}
.calculator-heading-copy .content-lead { max-width: 720px; font-size: 15px; line-height: 1.62; }
.calculator-workspace-shell { min-width: 0; }
.finance-tool,
.scientific-tool,
.fraction-tool,
.gpa-tool,
.quadratic-tool { max-width: 860px; }

/* Tools hub: task-first search, compact shortcuts and a navigable catalog. */
.tools-hub-header {
    max-width: 820px;
    margin-bottom: 28px;
}
.tools-hub-header h1 {
    font-size: clamp(34px, 4vw, 42px);
    line-height: 1.12;
}
.tools-hub-header > p:last-of-type {
    max-width: 780px;
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.65;
}
.tools-hub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 14px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.45;
}
.tools-hub-meta span {
    position: relative;
}
.tools-hub-meta span + span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    width: 3px;
    height: 3px;
    margin-top: -1px;
    border-radius: 50%;
    background: var(--line-strong);
}
.tools-hub-meta strong {
    color: var(--text-primary);
    font-weight: 650;
}

.tools-hub-main .tool-finder {
    display: grid;
    grid-template-columns: minmax(210px, .38fr) minmax(0, 1fr);
    gap: 30px;
    max-width: none;
    margin: 0 0 34px;
    padding: 22px 24px;
    border-color: var(--primary-line-soft);
    border-radius: var(--radius-lg);
    background: var(--primary-soft-subtle);
}
.tool-finder-copy {
    align-self: center;
    min-width: 0;
}
.tool-finder-copy .section-kicker {
    margin-bottom: 4px;
}
.tool-finder-copy h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -.018em;
    font-weight: 650;
}
.tool-finder-copy > p:last-child {
    max-width: 280px;
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.58;
}
.tool-finder-control {
    align-self: center;
    min-width: 0;
}
.tools-hub-main .tool-search-wrap {
    border-radius: var(--radius);
}
.tools-hub-main .tool-search-input {
    min-height: 50px;
    padding-left: 42px;
    border-color: var(--line-strong);
    background: var(--surface);
    font-size: 15px;
}
.tools-hub-main .tool-search-clear {
    top: 8px;
    height: 34px;
    background: var(--surface-subtle);
}
.tools-hub-main .tool-search-meta {
    gap: 16px;
    margin-top: 8px;
}
.tools-hub-main .tool-search-meta p {
    font-size: 11px;
}
.tools-hub-main .tool-search-status {
    flex: 0 0 auto;
    max-width: 48%;
}

.tools-hub-main .popular-tools {
    margin: 0 0 34px;
    padding: 0 0 32px;
    border-bottom: 1px solid var(--line);
}
.tools-section-heading {
    align-items: flex-end;
    margin-bottom: 13px;
}
.tools-section-heading h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -.018em;
}
.tools-section-heading > p {
    margin: 0 0 2px;
    color: var(--text-tertiary);
    font-size: 12px;
}
.tools-hub-main .popular-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    border: 0;
}
.tools-hub-main .popular-tools-grid a {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 104px;
    flex-direction: column;
    padding: 14px 36px 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.tools-hub-main .popular-tools-grid a:hover {
    border-color: var(--primary-border-strong);
    background: var(--primary-soft-subtle);
}
.tools-hub-main .popular-tools-grid strong {
    color: var(--text-strong);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 650;
}
.tools-hub-main .popular-tool-desc {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.tools-hub-main .popular-tool-action {
    margin-top: auto;
    padding-top: 8px;
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 600;
}
.tools-hub-main .popular-tools-grid b {
    top: 13px;
    right: 14px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.tools-catalog-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}
.tools-catalog-layout.is-searching {
    grid-template-columns: minmax(0, 1fr);
}
.tools-catalog-sidebar {
    position: sticky;
    top: 86px;
    min-width: 0;
}
.admin-bar .tools-catalog-sidebar {
    top: 118px;
}
.tools-category-index-head {
    margin-bottom: 10px;
}
.tools-category-index-head h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 650;
}
.tools-catalog-sidebar .tool-category-nav {
    display: grid;
    overflow: hidden;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    scrollbar-width: auto;
}
.tools-catalog-sidebar .tool-category-nav a {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 550;
    text-decoration: none;
}
.tools-catalog-sidebar .tool-category-nav a:last-child {
    border-bottom: 0;
}
.tools-catalog-sidebar .tool-category-nav a:hover {
    border-color: var(--line);
    background: var(--surface-subtle);
    color: var(--primary);
}
.tools-catalog-sidebar .tool-category-nav a[aria-current="true"],
.tools-catalog-sidebar .tool-category-nav a.is-active {
    padding-left: 8px;
    border-left: 3px solid var(--primary);
    background: var(--primary-soft-subtle);
    color: var(--primary);
}
.tools-catalog-sidebar .tool-category-nav a span {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.tools-catalog-sidebar .tool-category-nav a[aria-current="true"] span,
.tools-catalog-sidebar .tool-category-nav a.is-active span {
    color: var(--primary);
}

.tools-catalog-content {
    min-width: 0;
}
.tools-hub-main .all-tools-heading {
    margin: 0 0 24px;
    padding: 0 0 18px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
}
.tools-hub-main .all-tools-heading h2 {
    margin: 3px 0 5px;
    color: var(--text-strong);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -.02em;
}
.tools-hub-main .all-tools-heading > p:last-child {
    max-width: 680px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.55;
}
.tools-hub-main .tool-search-empty {
    margin: 0;
    padding: 30px 22px;
}
.tools-hub-main .tool-category {
    padding: 0 0 32px;
    scroll-margin-top: 90px;
}
.tools-hub-main .tool-category + .tool-category {
    margin-top: 0;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}
.tools-hub-main .tool-category-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 20px;
    align-items: start;
    margin-bottom: 14px;
}
.tools-hub-main .tool-category-heading h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 650;
}
.tools-hub-main .tool-category-heading p {
    max-width: 680px;
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.55;
}
.tools-hub-main .tool-category-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px 13px;
    padding-top: 2px;
    white-space: nowrap;
}
.tools-hub-main .tool-category-meta > span {
    color: var(--text-tertiary);
    font-size: 11.5px;
    font-weight: 500;
}
.tools-hub-main .tool-category-meta a {
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
}
.tools-hub-main .tool-category-meta a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tools-catalog-content .tool-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}
.tools-catalog-content .tool-card-link {
    position: relative;
    display: flex;
    min-height: 118px;
    flex-direction: column;
    padding: 14px 15px;
    border-radius: var(--radius);
}
.tools-catalog-content .tool-card-kicker {
    display: none;
}
.tools-catalog-content .tool-card h3 {
    padding-right: 18px;
    color: var(--text-strong);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 650;
}
.tools-catalog-content .tool-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 6px 0 10px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.52;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.tools-catalog-content .tool-card-action {
    margin-top: auto;
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 600;
}
.tools-catalog-content .tool-card-link:hover h3 {
    color: var(--primary);
}

.tools-hub-support {
    width: min(100%, 860px);
    margin: 46px auto 0;
}
.tools-hub-support .tools-guide {
    margin-top: 0;
}
.tools-hub-support .tools-usecase-grid article {
    border-radius: var(--radius);
}

/* Blog/editorial: match the calculator theme instead of looking like a second design system. */
.blog-hero { max-width: 760px; padding-bottom: 27px; }
.blog-hero h1 { font-size: clamp(32px, 4vw, 42px); line-height: 1.12; letter-spacing: -.028em; }
.blog-hero > p { max-width: 680px; font-size: 15px; line-height: 1.65; }
.blog-search { max-width: 620px; margin-top: 18px; }
.blog-topics { margin-bottom: 28px; }
.blog-topics a,
.blog-topic {
    border-radius: var(--radius);
    font-weight: 600;
}
.blog-topic { border: 1px solid var(--primary-line-soft); background: var(--primary-soft-subtle); }
.blog-grid { gap: 14px; }
.blog-card-body { min-height: 196px; padding: 15px 16px 16px; }
.blog-card-title { margin-bottom: 8px; font-size: 18px; line-height: 1.38; font-weight: 650; }
.blog-card-excerpt { font-size: 13px; line-height: 1.62; }
.blog-card-link { padding-top: 13px; font-size: 12px; }
.blog-article-header h1 { font-size: clamp(32px, 4.6vw, 44px); line-height: 1.12; letter-spacing: -.03em; }
.blog-article-lead { font-size: 16px; line-height: 1.65; }
.blog-article-content { font-size: 16px; line-height: 1.76; }
.blog-article-content h2 { font-size: 24px; }
.blog-article-content h3 { font-size: 20px; }
.blog-empty {
    max-width: 680px;
    margin-top: 18px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--text-secondary);
}
.blog-empty h2, .blog-empty h3 { margin: 0 0 7px; font-size: 19px; }
.blog-empty p { margin: 0 0 14px; }

/* Casio calculator presentation is scoped to calculator-core.css. */

/* Footer follows the same readable frame and avoids dense four-column compression. */
.footer-inner { grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(150px, .8fr)); gap: 28px; padding-top: 28px; }
.footer-brand p { max-width: 330px; }
.footer-column { gap: 5px; }
.footer-column strong { margin-bottom: 3px; font-size: 13px; }
.footer-column a { font-size: 12.5px; line-height: 1.4; }
.footer-bottom { text-align: left; }

@media (max-width: 900px) {
    .tools-catalog-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; }
    .tools-catalog-content .tool-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-inner { grid-template-columns: 1.25fr 1fr 1fr; }
    .footer-contact { grid-column: 2 / -1; }
}

@media (max-width: 760px) {
    .calculator-content-header,
    .calculator-workspace-shell,
    .calculator-landing > .policy-status-strip,
    .calculator-landing > .trust-strip--tool,
    .calculator-landing > .pwa-install-row,
    .calculator-landing > .entry-content,
    .calculator-landing > .related-tools,
    .calculator-landing > .tool-guide-section,
    .calculator-landing > .faq-section,
    .calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section) { width: 100%; max-width: none; }
    .tool-category-heading { align-items: flex-start; }

    .tools-hub-header { margin-bottom: 22px; }
    .tools-hub-main .tool-finder { grid-template-columns: 1fr; gap: 13px; margin-bottom: 28px; padding: 17px; }
    .tool-finder-copy > p:last-child { max-width: none; }
    .tools-hub-main .popular-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tools-section-heading { align-items: flex-start; }
    .tools-section-heading > p { display: none; }
    .tools-catalog-layout,
    .tools-catalog-layout.is-searching { display: block; }
    .tools-catalog-sidebar { position: static; margin-bottom: 27px; }
    .tools-category-index-head { margin-bottom: 8px; }
    .tools-catalog-sidebar .tool-category-nav {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        margin: 0;
        padding: 0 0 10px;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        scrollbar-width: thin;
    }
    .tools-catalog-sidebar .tool-category-nav a {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 7px 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        white-space: nowrap;
    }
    .tools-catalog-sidebar .tool-category-nav a:last-child { border-bottom: 1px solid var(--line); }
    .tools-catalog-sidebar .tool-category-nav a[aria-current="true"],
    .tools-catalog-sidebar .tool-category-nav a.is-active {
        padding-left: 10px;
        border: 1px solid var(--primary-border-strong);
        background: var(--primary-soft-subtle);
        color: var(--primary);
    }
    .tools-hub-main .all-tools-heading { margin-bottom: 20px; }
    .tools-hub-main .tool-category { scroll-margin-top: 76px; }
    .tools-hub-main .tool-category-heading { grid-template-columns: 1fr; gap: 7px; }
    .tools-hub-main .tool-category-meta { justify-content: space-between; padding-top: 0; }
    .tools-catalog-content .tool-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tools-hub-support { margin-top: 38px; }

    .blog-grid { gap: 12px; }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-contact { grid-column: auto; }
}

@media (max-width: 520px) {
    .related-tools .tool-card-grid { grid-template-columns: 1fr; gap: 8px; }
    .related-tools .tool-card-link { min-height: 0; padding: 14px; }
    .calculator-heading-row { gap: 10px; }
    .calculator-heading-copy h1 { font-size: 30px; }
    .calculator-heading-copy .content-lead { font-size: 14px; line-height: 1.58; }
    .tool-pin-button { min-height: 38px; font-size: 12px; }
    .tool-category-nav { margin-bottom: 22px; padding-bottom: 11px; }
    .popular-tools-grid a { min-height: 0; }
    .all-tools-heading { margin-top: 28px; padding-top: 22px; }
    .tool-category { padding-top: 24px; }
    .tool-category-heading { display: grid; gap: 7px; }
    .tool-category-meta { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .tool-card-link { min-height: 0; padding: 14px; }

    .tools-hub-header h1 { font-size: 32px; }
    .tools-hub-header > p:last-of-type { font-size: 14px; line-height: 1.58; }
    .tools-hub-meta { gap: 5px 14px; margin-top: 11px; }
    .tools-hub-meta span + span::before { left: -8px; }
    .tools-hub-main .tool-finder { padding: 14px; }
    .tool-finder-copy h2 { font-size: 19px; }
    .tools-hub-main .tool-search-input { min-height: 48px; font-size: 14px; }
    .tools-hub-main .tool-search-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
    .tools-hub-main .tool-search-status { max-width: none; text-align: left; }
    .tools-hub-main .popular-tools { margin-bottom: 28px; padding-bottom: 26px; }
    .tools-hub-main .popular-tools-grid { gap: 7px; }
    .tools-hub-main .popular-tools-grid a { min-height: 98px; padding: 12px 30px 11px 12px; }
    .tools-hub-main .popular-tool-desc { -webkit-line-clamp: 1; }
    .tools-category-index-head h2 { font-size: 15px; }
    .tools-hub-main .all-tools-heading { margin-top: 0; padding-top: 0; }
    .tools-hub-main .all-tools-heading h2 { font-size: 21px; }
    .tools-hub-main .tool-category { padding-top: 0; padding-bottom: 27px; }
    .tools-hub-main .tool-category + .tool-category { padding-top: 25px; }
    .tools-catalog-content .tool-card-grid { grid-template-columns: 1fr; gap: 7px; }
    .tools-catalog-content .tool-card-link { min-height: 0; padding: 13px 14px; }
    .tools-catalog-content .tool-card p { margin-bottom: 8px; -webkit-line-clamp: 2; }
    .tools-hub-support { width: 100%; margin-top: 32px; }

    .blog-hero h1 { font-size: 32px; }
    .blog-card-body { min-height: 0; }
    .blog-card-title { font-size: 17px; }
    .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
    .footer-brand,
    .footer-contact { grid-column: 1 / -1; }
    .footer-brand p { max-width: 420px; }
    .footer-bottom { text-align: center; }
}

@media (max-width: 360px) {
    .footer-inner { grid-template-columns: 1fr; }
    .footer-brand,
    .footer-contact { grid-column: auto; }
}


/* v4.56.7 — calculator page alignment + vertical rhythm contract.
   One 860px axis and one spacing system for the interactive tool, editorial
   sections, FAQ, notices, trust/PWA rows and related tools. */
.calculator-landing {
    --calculator-page-frame: 860px;
    --calculator-reading-measure: 100%;
    --mto-flow-xs: 8px;
    --mto-flow-sm: 12px;
    --mto-flow-md: 18px;
    --mto-flow-lg: 24px;
    --mto-flow-xl: 30px;
    --mto-section-gap: 26px;
    --mto-section-inset: 22px;
}

/* One horizontal frame. */
.calculator-landing :is(
    .calculator-content-header,
    .calculator-workspace-shell,
    .policy-status-strip,
    .trust-strip--tool,
    .pwa-install-row,
    .entry-content,
    .related-tools
) {
    width: min(100%, var(--calculator-page-frame));
    max-width: var(--calculator-page-frame);
    margin-inline: auto;
    box-sizing: border-box;
}
.calculator-workspace-shell > :is(
    .seo-section,
    .faq-section,
    .tool-guide-section,
    .casio-trademark-note,
    .calculator-source-note,
    .finance-alert,
    .finance-source-note,
    .health-disclaimer,
    .tool-disclaimer
) {
    width: 100%;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
}
.calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section) > * {
    box-sizing: border-box;
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) > :is(p, ul, ol, blockquote),
.calculator-workspace-shell > .faq-section > :is(p, ul, ol),
.calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section) > :is(
    .tools-content-grid,
    .simple-faq,
    .example-table-wrap,
    .formula-list,
    .plain-steps,
    .method-grid,
    .tool-guide-grid
) {
    width: 100%;
    max-width: none !important;
    margin-inline: 0;
}
.calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section) > :is(h2, h3, h4) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* Remove legacy stacked margins. The flow below owns vertical separation. */
.calculator-content-header { margin-bottom: var(--mto-flow-md); }
.calculator-landing > .policy-status-strip {
    margin-top: 0;
    margin-bottom: var(--mto-flow-md);
}
.calculator-workspace-shell.mto-calculator-ui {
    margin-bottom: 0;
}
.calculator-workspace-shell > :first-child {
    margin-bottom: 0;
}

/* Editorial sections share one divider rhythm rather than page-specific gaps. */
.calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section) {
    margin-top: var(--mto-section-gap) !important;
    margin-bottom: 0 !important;
    padding-top: var(--mto-section-inset);
    padding-bottom: 0;
    border-top: 1px solid var(--line);
}
.calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section) > h2 {
    margin-top: 0;
    margin-bottom: var(--mto-flow-sm);
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) > h3 {
    margin-top: var(--mto-flow-lg);
    margin-bottom: var(--mto-flow-xs);
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) > p {
    margin-top: 0;
    margin-bottom: var(--mto-flow-sm);
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) > p:last-child {
    margin-bottom: 0;
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) > :is(ul, ol, blockquote),
.calculator-workspace-shell > .faq-section > :is(p, ul, ol),
.calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section) > :is(
    .tools-content-grid,
    .simple-faq,
    .example-table-wrap,
    .formula-list,
    .plain-steps,
    .method-grid,
    .tool-guide-grid
) {
    margin-top: 0;
    margin-bottom: 0;
}
.calculator-workspace-shell > .seo-section > .calculator-source-note {
    margin-top: var(--mto-flow-md);
    margin-bottom: 0;
}

/* Notices are supporting content, so they sit closer to the section they qualify. */
.calculator-workspace-shell > :is(
    .finance-alert,
    .finance-source-note,
    .health-disclaimer,
    .tool-disclaimer,
    .casio-trademark-note
) {
    margin-top: var(--mto-flow-md) !important;
    margin-bottom: 0 !important;
}
.calculator-workspace-shell > :is(
    .finance-alert,
    .finance-source-note,
    .health-disclaimer,
    .tool-disclaimer,
    .casio-trademark-note
) + :is(.seo-section, .faq-section, .tool-guide-section) {
    margin-top: var(--mto-flow-lg) !important;
    padding-top: 20px;
}

/* The post-tool flow has one owner: workspace → trust → optional PWA/content → related. */
.calculator-landing > .trust-strip--tool {
    margin-top: var(--mto-flow-lg);
    margin-bottom: 0;
}
.calculator-landing > .pwa-install-row:not([hidden]) {
    margin-top: var(--mto-flow-md);
    margin-bottom: 0;
}
.calculator-landing > .entry-content {
    margin-top: var(--mto-flow-xl);
    margin-bottom: 0;
}
.calculator-landing > .entry-content > *:first-child {
    margin-top: 0;
}
.calculator-landing > .related-tools {
    margin-top: var(--mto-flow-xl);
    padding-top: var(--mto-flow-lg);
    border-top: 1px solid var(--line);
}
.calculator-landing > .related-tools .section-heading-row {
    margin-bottom: var(--mto-flow-sm);
}

/* Compact mobile rhythm: preserve hierarchy without wasting vertical space. */
@media (max-width: 760px) {
    .calculator-landing {
        --calculator-page-frame: 100%;
        --mto-flow-md: 16px;
        --mto-flow-lg: 20px;
        --mto-flow-xl: 26px;
        --mto-section-gap: 22px;
        --mto-section-inset: 18px;
    }
    .calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section),
    .calculator-landing > :is(.trust-strip--tool, .entry-content, .related-tools) {
        width: 100%;
        max-width: none;
    }
    .calculator-workspace-shell > :is(
        .finance-alert,
        .finance-source-note,
        .health-disclaimer,
        .tool-disclaimer,
        .casio-trademark-note
    ) + :is(.seo-section, .faq-section, .tool-guide-section) {
        margin-top: 20px !important;
        padding-top: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* v4.56.8 — calculator editorial typography + component density contract.
   Keeps every tool page on one readable hierarchy: section titles, body copy,
   disclosure FAQ, supporting notes, tables/guides and related-tool cards. */
.calculator-landing {
    --mto-content-font: 15px;
    --mto-content-line: 1.72;
    --mto-content-muted: var(--text-secondary);
    --mto-section-title-size: 22px;
    --mto-subtitle-size: 16px;
    --mto-support-font: 13px;
}

/* Editorial hierarchy: one title/body scale across every calculator template. */
.calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section) > h2,
.calculator-workspace-shell > .tool-guide-section .section-heading-row h2,
.calculator-landing > .related-tools .section-heading-row h2 {
    margin-top: 0;
    color: var(--text-strong);
    font-size: var(--mto-section-title-size);
    line-height: 1.32;
    font-weight: 700;
    letter-spacing: -.018em;
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) > h3,
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) .tools-content-grid h3,
.calculator-workspace-shell > .tool-guide-section .tool-guide-card h3 {
    color: var(--text-primary);
    font-size: var(--mto-subtitle-size);
    line-height: 1.42;
    font-weight: 650;
    letter-spacing: -.008em;
}
.calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section) > :is(p, ul, ol),
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) .tools-content-grid p,
.calculator-workspace-shell > .tool-guide-section .tool-guide-card p,
.calculator-landing > .entry-content {
    color: var(--mto-content-muted);
    font-size: var(--mto-content-font);
    line-height: var(--mto-content-line);
}
.calculator-workspace-shell > :is(.seo-section, .faq-section, .tool-guide-section) :is(strong, b) {
    color: var(--text-primary);
    font-weight: 650;
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) > :is(ul, ol) {
    padding-left: 1.35em;
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) > :is(ul, ol) li + li {
    margin-top: 6px;
}

/* Content grids stay lightweight: hierarchy by type and dividers, not card chrome. */
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) .tools-content-grid {
    column-gap: 26px;
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) .tools-content-grid article {
    padding: 13px 0;
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) .tools-content-grid h3 {
    margin: 0 0 5px;
}
.calculator-workspace-shell > :is(.seo-section, .tool-guide-section) .tools-content-grid p {
    margin: 0;
    font-size: 14px;
    line-height: 1.68;
}
.calculator-workspace-shell > .tool-guide-section .section-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--text-tertiary);
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: .055em;
}
.calculator-workspace-shell > .tool-guide-section .tool-guide-card__meta {
    margin-bottom: 5px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}
.calculator-workspace-shell > .tool-guide-section .tool-guide-card__link {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
}

/* FAQ: same density and text scale on Casio, finance, health and math tools. */
.calculator-workspace-shell > .faq-section .simple-faq {
    gap: 8px;
}
.calculator-workspace-shell > .faq-section .simple-faq details {
    border-color: var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}
.calculator-workspace-shell > .faq-section summary {
    min-height: 50px;
    padding: 13px 44px 13px 14px;
    color: var(--text-primary);
    font-size: 14.5px;
    line-height: 1.48;
    font-weight: 650;
}
.calculator-workspace-shell > .faq-section summary::after {
    right: 14px;
    color: var(--text-tertiary);
    font-size: 17px;
}
.calculator-workspace-shell > .faq-section details p {
    padding: 0 44px 14px 14px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.68;
}
.calculator-workspace-shell > .faq-section details[open] summary {
    background: var(--surface-subtle);
}

/* Tables/formula helpers use a readable secondary scale, never tiny utility text. */
.calculator-workspace-shell .plain-steps,
.calculator-workspace-shell .plain-steps li {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.68;
}
.calculator-workspace-shell .plain-steps li { margin-bottom: 7px; }
.calculator-workspace-shell .formula-item { padding: 13px 0; }
.calculator-workspace-shell .formula-item code {
    padding: 5px 8px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
}
.calculator-workspace-shell .example-table {
    font-size: 13.5px;
    line-height: 1.5;
}
.calculator-workspace-shell .example-table :is(th, td) {
    padding: 10px 12px;
}
.calculator-workspace-shell .example-table th {
    color: var(--text-primary);
    font-weight: 650;
}
.calculator-workspace-shell .example-table td {
    color: var(--text-secondary);
}

/* Supporting notes are secondary, but still comfortably readable. */
.calculator-workspace-shell > :is(
    .finance-alert,
    .finance-source-note,
    .health-disclaimer,
    .tool-disclaimer,
    .casio-trademark-note
),
.calculator-workspace-shell > .seo-section > .calculator-source-note {
    padding: 11px 13px;
    color: var(--text-secondary);
    font-size: var(--mto-support-font);
    line-height: 1.62;
}
.calculator-workspace-shell > :is(
    .finance-alert,
    .finance-source-note,
    .health-disclaimer,
    .tool-disclaimer,
    .casio-trademark-note
) :is(strong, b),
.calculator-workspace-shell > .seo-section > .calculator-source-note :is(strong, b) {
    color: var(--text-primary);
    font-weight: 650;
}

/* Trust/policy strips are utility rows, not miniature body copy. */
.calculator-landing > :is(.policy-status-strip, .trust-strip--tool) {
    font-size: 12.5px;
    line-height: 1.5;
}
.calculator-landing > .trust-strip--tool {
    min-height: 42px;
    padding: 9px 12px;
}
.calculator-landing > .trust-strip--tool strong,
.calculator-landing > .policy-status-strip strong {
    font-weight: 650;
}

/* Related tools: compact discovery cards with readable descriptions. */
.calculator-landing > .related-tools .section-heading-row {
    align-items: baseline;
    gap: 16px;
}
.calculator-landing > .related-tools .section-heading-row > a {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: 650;
}
.calculator-landing > .related-tools .tool-card-grid {
    gap: 9px;
}
.calculator-landing > .related-tools .tool-card-link {
    min-height: 140px;
    padding: 14px 15px;
    border-radius: var(--radius);
}
.calculator-landing > .related-tools .tool-card h3 {
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 650;
    letter-spacing: -.008em;
}
.calculator-landing > .related-tools .tool-card p {
    margin: 6px 0 10px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
}
.calculator-landing > .related-tools .tool-card-action {
    padding-top: 0;
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: 650;
}

@media (max-width: 760px) {
    .calculator-landing {
        --mto-content-font: 14.5px;
        --mto-section-title-size: 20px;
        --mto-subtitle-size: 15.5px;
        --mto-support-font: 12.5px;
    }
    .calculator-workspace-shell > :is(.seo-section, .tool-guide-section) .tools-content-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .calculator-workspace-shell > :is(.seo-section, .tool-guide-section) .tools-content-grid article {
        padding: 11px 0;
    }
    .calculator-workspace-shell > .faq-section summary {
        min-height: 48px;
        padding: 12px 40px 12px 13px;
        font-size: 14px;
    }
    .calculator-workspace-shell > .faq-section summary::after { right: 13px; }
    .calculator-workspace-shell > .faq-section details p {
        padding: 0 40px 13px 13px;
        font-size: 14px;
    }
    .calculator-workspace-shell .example-table { font-size: 13px; }
    .calculator-workspace-shell .example-table :is(th, td) { padding: 9px 10px; }
    .calculator-landing > .related-tools .section-heading-row {
        align-items: flex-start;
    }
    .calculator-landing > .related-tools .tool-card-link {
        min-height: 0;
        padding: 13px 14px;
    }
    .calculator-landing > .related-tools .tool-card p {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 420px) {
    .calculator-landing > .related-tools .section-heading-row {
        display: grid;
        gap: 6px;
    }
    .calculator-landing > .related-tools .section-heading-row > a {
        justify-self: start;
    }
    .calculator-landing > :is(.policy-status-strip, .trust-strip--tool) {
        font-size: 12px;
    }
}