/*!
 * Duty Calculator BD — home page styles
 * Extracted from index.html in PR 7. Cached on the home pageload only.
 */

    /* Crystal Clear Text Colors */
    :root,
    [data-theme="light"] {
        --text-primary: #0f172a;
        --text-secondary: #334155;
        --text-muted: #64748b;
        --border-light: #e2e8f0;
        --bg-light: #f8fafc;
        --shadow-slim: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    }

    [data-theme="dark"] {
        --text-primary: #e2e8f0;
        --text-secondary: #94a3b8;
        --text-muted: #64748b;
        --border-light: #334155;
        --bg-light: #1e293b;
        --shadow-slim: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.2);
    }

    /* Dark Hero Section */
    .hero-dark {
        background-color: var(--bd-primary);
        background-image: linear-gradient(180deg, var(--bd-primary-active) 0%, var(--bd-primary) 100%);
        color: #ffffff;
        padding: 1.75rem 1rem 2rem;
        text-align: center;
        border-bottom: 2px solid var(--bd-orange);
    }

    
    .hero-dark h1,
    header.hero-dark h1 {
        color: #ffffff;
        font-size: clamp(1.65rem, 3.4vw, 2.35rem);
        font-weight: 800;
        margin-bottom: .35rem;
        letter-spacing: -0.025em;
        line-height: 1.15;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    }

    .hero-dark .hero-sub {
        color: #ffffff;
        font-size: clamp(1rem, 1.6vw, 1.125rem);
        font-weight: 600;
        margin: 0 auto .35rem;
        max-width: 64ch;
        opacity: .98;
        letter-spacing: -.01em;
    }

    .hero-dark p {
        font-size: .95rem;
        color: rgba(255, 255, 255, 0.88);
        margin: 0 auto 1.25rem;
        max-width: 64ch;
        line-height: 1.5;
    }

    /* Top Search Bar (Slim Fit) */
    .hero-search-wrapper {
        max-width: 600px;
        margin: 0 auto;
        position: relative;
    }

    .hero-search-input {
        width: 100%;
        padding: 0.85rem 2.5rem;
        font-size: 1rem;
        border-radius: var(--r-md);
        border: 2px solid transparent;
        background: #ffffff;
        color: #0f172a;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        outline: none;
        transition: all var(--t-fast);
    }

    .hero-search-input:focus {
        border-color: var(--bd-orange);
        box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
    }

    .hero-search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 1rem;
        pointer-events: none;
    }

    .hero-search-clear {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 1.1rem;
        display: none;
    }

    /* Autocomplete Dropdown */
    .autocomplete-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 0.25rem;
        background: var(--bd-surface);
        border: 1px solid var(--bd-border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
        z-index: 1000;
        max-height: 280px;
        display: none;
        text-align: left;
    }

    .ac-item {
        display: flex;
        align-items: center;
        padding: 0.6rem 0.85rem;
        border-bottom: 1px solid var(--border-light);
        cursor: pointer;
        color: var(--text-primary);
        transition: background var(--t-fast);
    }

    .ac-item:hover,
    .ac-item:focus {
        background: var(--bg-light);
        outline: none;
    }

    .ac-code {
        font-family: monospace;
        font-weight: 700;
        background: var(--bg-light);
        color: var(--text-primary);
        padding: 0.15rem 0.3rem;
        border-radius: var(--r-sm);
        margin-right: 0.5rem;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .ac-desc {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

    /* Application Layout */
    .fp-app-container {
        max-width: 1080px;
        margin: 1rem auto 2.5rem;
        padding: 0 1rem;
    }

    
    .fp-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: .85rem;
        align-items: stretch;
    }
    @media (max-width: 800px) {
        .fp-grid { grid-template-columns: 1fr; gap: .65rem; }
    }

    /* Pane cards (calculator + results). Both share surface treatment. */
    .fp-pane-left,
    .fp-pane-right {
        background: var(--bd-surface);
        border: 1px solid var(--bd-border);
        border-radius: var(--r-md, 10px);
        padding: .75rem .85rem .65rem;
        box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    @media (max-width: 600px) {
        .fp-pane-left, .fp-pane-right { padding: .7rem .75rem .6rem; }
    }

    .fp-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 0 .55rem;
        gap: .5rem;
        padding-bottom: .4rem;
        border-bottom: 1px solid var(--bd-divider, var(--bd-border));
    }
    .fp-header h2 {
        font-size: .95rem;
        font-weight: 700;
        color: var(--bd-text);
        margin: 0;
        letter-spacing: -.005em;
    }
    
    .fp-est-badge {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        font-size: .68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--bd-text-muted);
        background: var(--bd-surface-2, var(--bd-bg));
        border: 1px solid var(--bd-border);
        border-radius: 999px;
        padding: 2px 8px;
    }

    /* Calculator Form rows (slim) */
    .fp-field-row {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        align-items: center;
        column-gap: .55rem;
        row-gap: .1rem;
        margin-bottom: .4rem;
    }
    @media (max-width: 600px) {
        .fp-field-row {
            grid-template-columns: 1fr;
            row-gap: .2rem;
            margin-bottom: .5rem;
        }
    }

    .fp-label {
        font-size: .78rem;
        font-weight: 600;
        color: var(--bd-text-muted);
        margin: 0;
        line-height: 1.3;
    }
    .fp-input-wrap {
        position: relative;
        min-width: 0;
    }

    .fp-input {
        width: 100%;
        padding: .35rem .55rem;
        font-size: .84rem;
        border: 1px solid var(--bd-border);
        border-radius: var(--r-sm, 6px);
        background: var(--bd-surface);
        color: var(--bd-text);
        transition: border-color var(--t-fast), box-shadow var(--t-fast);
        outline: none;
        line-height: 1.3;
        min-height: 34px;
    }
    .fp-input:focus,
    .fp-input:focus-visible {
        border-color: var(--bd-primary);
        box-shadow: 0 0 0 3px var(--bd-primary-light, rgba(15,118,110,.15));
    }
    .fp-input.error {
        border-color: var(--bd-error, #dc2626);
    }
    .fp-input.is-valid {
        border-color: var(--bd-primary-mid, var(--bd-primary));
    }
    .fp-error-msg {
        color: var(--bd-error, #dc2626);
        font-size: .72rem;
        margin-top: .2rem;
        display: none;
        font-weight: 500;
        grid-column: 2;
    }
    @media (max-width: 600px) {
        .fp-error-msg { grid-column: 1; }
    }

    
    .fp-hierarchy-box {
        background: transparent;
        border: 0;
        padding: .15rem 0 .45rem;
        font-size: .76rem;
        color: var(--bd-text-muted);
        margin: 0 0 .35rem;
        min-height: auto;
        line-height: 1.45;
    }
    .fp-hint-text {
        color: var(--bd-text-faint);
        font-style: italic;
    }

    .fp-link {
        font-size: .78rem;
        color: var(--bd-primary);
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .fp-link:hover {
        text-decoration: underline;
    }

    /* Results Boxes (Slim) */
    .fp-results-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    @media (max-width: 500px) {
        .fp-results-grid {
            grid-template-columns: 1fr;
        }
    }

    .fp-card {
        background: var(--bd-surface);
        border: 1px solid var(--border-light);
        border-radius: var(--r-sm);
        padding: 1rem;
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-slim);
    }

    .fp-card-title {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 0.75rem;
    }

    .fp-huge-rate {
        font-size: 1.85rem;
        font-weight: 300;
        color: var(--bd-primary);
        line-height: 1;
        margin-bottom: .75rem;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .fp-card-footer {
        border-top: 1px solid var(--border-light);
        padding-top: 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
        font-weight: 600;
        margin-top: auto;
    }

    .fp-card-footer.primary {
        color: var(--bd-primary);
    }

    .fp-card-footer-landed {
        margin-top: 0.75rem;
    }

    .fp-label-muted {
        color: var(--text-secondary);
    }

    .fp-value-primary {
        font-size: 1rem;
        color: var(--bd-primary);
    }

    .fp-cost-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        margin-bottom: 0.4rem;
        color: var(--text-secondary);
    }

    .fp-cost-row strong {
        font-family: monospace;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

    /* Accordion Details (Slim) */
    .fp-accordion {
        border: 1px solid var(--border-light);
        border-radius: var(--r-sm);
        background: var(--bd-surface);
        overflow: hidden;
        box-shadow: var(--shadow-slim);
    }

    .fp-accordion summary {
        padding: 0.75rem;
        background: var(--bg-light);
        color: var(--bd-primary);
        font-weight: 600;
        font-size: 0.85rem;
        text-align: center;
        cursor: pointer;
        list-style: none;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .fp-accordion summary::-webkit-details-marker {
        display: none;
    }

    .fp-accordion[open] summary {
        border-bottom: 1px solid var(--border-light);
    }

    .fp-accordion[open] .show-txt {
        display: none;
    }

    .fp-accordion:not([open]) .hide-txt {
        display: none;
    }

    .fp-accordion[open] .bi-chevron-down {
        transform: rotate(180deg);
    }

    .fp-result-note {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.5rem;
        border-top: 1px dashed var(--border-light);
        padding-top: 0.75rem;
    }

    .fp-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.8rem;
    }

    .fp-table th,
    .fp-table td {
        padding: 0.6rem 0.85rem;
        border-bottom: 1px solid var(--border-light);
        text-align: left;
        color: var(--text-primary);
    }

    .fp-table th {
        color: var(--text-muted);
        font-weight: 600;
        background: var(--bd-surface-2);
    }

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

    .fp-table td.rate-badge {
        color: var(--bd-primary);
        background: var(--bd-primary-light);
        padding: 0.15rem 0.4rem;
        border-radius: var(--r-sm);
        display: inline-block;
        font-weight: 600;
        font-size: 0.75rem;
    }

    .fp-table td.money {
        text-align: right;
        font-family: monospace;
        font-size: 0.85rem;
        font-weight: 600;
    }

    /* Print specific — consolidated into base.css and bottom of this file.
       Removed legacy block that hid .fp-pane-left entirely. */

    /* Catalog Modal */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.75);
        z-index: 2000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal-content {
        background: var(--bd-surface);
        border-radius: var(--r-lg);
        width: 100%;
        max-width: 600px;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .modal-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-light);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-header h3 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .modal-close {
        background: none;
        border: none;
        font-size: 1.1rem;
        cursor: pointer;
        color: var(--text-muted);
    }

    .modal-body {
        padding: 0.75rem;
        overflow-y: auto;
    }

    .tree-btn {
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        padding: 0.6rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        color: var(--text-primary);
        border-radius: var(--r-sm);
    }

    .tree-btn:hover {
        background: var(--bg-light);
    }

    .tree-badge {
        background: var(--bd-primary-light);
        color: var(--bd-primary);
        padding: 0.15rem 0.35rem;
        border-radius: var(--r-sm);
        font-size: 0.7rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .tree-title {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.85rem;
    }

    .tree-children {
        display: none;
        padding-left: 0.75rem;
        margin-left: 0.75rem;
        border-left: 1px solid var(--border-light);
    }

    .tree-node.open>.tree-children {
        display: block;
    }

    .tree-node.open>.tree-btn .bi-chevron-right {
        transform: rotate(90deg);
    }

    /* Button Utils */
    .btn-outline {
        background: transparent;
        border: 1px solid var(--border-light);
        color: var(--text-secondary);
        padding: 0.35rem 0.75rem;
        border-radius: var(--r-sm);
        font-weight: 600;
        cursor: pointer;
        transition: all var(--t-fast);
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.8rem;
    }

    .btn-outline:hover {
        background: var(--bg-light);
        color: var(--text-primary);
        border-color: var(--text-muted);
    }

    .btn-solid {
        background: var(--bd-primary);
        border: 1px solid var(--bd-primary);
        color: white;
        padding: 0.35rem 0.75rem;
        border-radius: var(--r-sm);
        font-weight: 600;
        cursor: pointer;
        transition: all var(--t-fast);
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.8rem;
    }

    .btn-solid:hover {
        background: var(--bd-primary-hover);
    }

    
    .btn-outline[disabled],
    .btn-outline:disabled,
    .btn-solid[disabled],
    .btn-solid:disabled {
        opacity: .55;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* ── Calculate button — dominant full-width CTA ─────────────── */
    .calc-primary-action {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .6rem 1rem;
        font-size: .92rem;
        font-weight: 700;
        letter-spacing: -.005em;
        background: linear-gradient(180deg, var(--bd-primary) 0%, var(--bd-primary-active, #005740) 100%);
        color: #fff;
        border: 1.5px solid var(--bd-primary);
        border-radius: 10px;
        cursor: pointer;
        box-shadow: 0 2px 8px -2px rgba(0, 106, 78, .35);
        transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease, opacity 160ms ease;
    }
    .calc-primary-action:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px -3px rgba(0, 106, 78, .45);
        background: linear-gradient(180deg, var(--bd-primary-hover, #007f5f) 0%, var(--bd-primary) 100%);
    }
    .calc-primary-action:active {
        transform: translateY(0);
        box-shadow: 0 1px 4px rgba(0, 106, 78, .2);
    }
    .calc-primary-action:focus-visible {
        outline: 3px solid rgba(0, 106, 78, .4);
        outline-offset: 2px;
    }
    .calc-primary-action[disabled],
    .calc-primary-action:disabled {
        opacity: .55;
        cursor: not-allowed;
        pointer-events: none;
    }
    .calc-primary-action.is-busy {
        pointer-events: none;
        opacity: .75;
    }
    .calc-primary-action .bi-arrow-repeat {
        animation: spin .7s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    /* Reset / ghost button — minimal, secondary emphasis */
    .fp-link-btn {
        background: transparent;
        border: 0;
        color: var(--bd-text-muted);
        font-size: .78rem;
        font-weight: 600;
        cursor: pointer;
        padding: .3rem .5rem;
        border-radius: 6px;
        transition: color 140ms ease, background 140ms ease;
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }
    .fp-link-btn:hover {
        color: var(--bd-error, #dc2626);
        background: rgba(220, 38, 38, .06);
    }

    /* Pane footer — tighter spacing with full-width button */
    .fp-pane-footer {
        display: flex;
        flex-direction: column;
        gap: .4rem;
        margin-top: .4rem;
        padding-top: .5rem;
        border-top: 1px solid var(--bd-divider, var(--bd-border));
    }
    .fp-pane-footer .fp-result-note {
        font-size: .72rem;
        color: var(--bd-text-faint, var(--bd-text-muted));
        margin: 0;
        border-top: 0;
        padding-top: 0;
    }

    /* ── Advanced tab: readable compact fields ─────────────────── */
    .fp-advanced-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: .35rem .65rem;
    }
    .fp-advanced-grid .fp-field-row {
        margin-bottom: .3rem;
    }
    .fp-advanced-grid .fp-input {
        min-height: 32px;
        font-size: .82rem;
        padding: .3rem .5rem;
    }
    .fp-advanced-grid select.fp-input {
        min-height: 32px;
        padding: .25rem .4rem;
    }
    .fp-field-row--compact {
        grid-template-columns: 110px minmax(0, 1fr);
    }
    .fp-field-row--compact .fp-label {
        font-size: .76rem;
    }
    .fp-advanced-note {
        font-size: .74rem;
        color: var(--bd-text-muted);
        margin: .4rem 0 .2rem;
        padding: .3rem 0;
    }

    /* ────────────────────────────────────────────────────────────
       PR 3: Calculator UX
       Stepper · empty-state CTA · summary card · help popovers
       Uses tokens introduced in PR 2 (--space-*, --r-*, --c-*).
       No color additions; only existing brand variables.
       ──────────────────────────────────────────────────────────── */

    /* --- Stepper -------------------------------------------------- */
    .dc-stepper {
        max-width: 960px;
        margin: .85rem auto 0;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        gap: .4rem;
        list-style: none;
    }
    .dc-step {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .28rem .6rem .28rem .3rem;
        border-radius: var(--r-md);
        background: var(--bd-surface);
        border: 1px solid var(--bd-border);
        cursor: pointer;
        font-size: var(--fs-small, .8rem);
        color: var(--bd-text-muted);
        font-weight: 600;
        transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
        white-space: nowrap;
    }
    .dc-step:hover { border-color: var(--bd-primary-mid); }
    .dc-step:focus-visible { outline: none; box-shadow: var(--ring-focus); }
    .dc-step-num {
        display: inline-grid;
        place-items: center;
        width: 20px; height: 20px;
        border-radius: 999px;
        background: var(--bd-surface-2);
        color: var(--bd-text-muted);
        font-size: .7rem; font-weight: 700;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
    }
    .dc-step-label { letter-spacing: -.005em; }
    .dc-step-line {
        flex: 1;
        height: 1px;
        background: var(--bd-border);
        min-width: 8px;
    }
    
    .dc-step[data-state="active"] {
        color: var(--bd-primary);
        border-color: var(--bd-primary-mid, var(--bd-primary));
        background: var(--bd-primary-light, rgba(15,118,110,.06));
        box-shadow: var(--ring-focus, 0 0 0 3px rgba(15,118,110,.18));
    }
    .dc-step[data-state="active"] .dc-step-num {
        background: var(--bd-orange);
        color: #fff;
    }
    .dc-step[data-state="done"] {
        color: var(--bd-primary);
        border-color: var(--bd-primary-mid);
        background: var(--bd-primary-light);
    }
    .dc-step[data-state="done"] .dc-step-num {
        background: var(--bd-primary);
        color: #fff;
    }
    .dc-step[data-state="done"] .dc-step-num::before {
        content: "\F26A"; /* bi-check2 */
        font-family: "bootstrap-icons";
        font-size: .85rem;
        font-weight: 700;
    }
    .dc-step[data-state="done"] .dc-step-num > * { display: none; }

    @media (max-width: 600px) {
        .dc-stepper { padding: 0 .65rem; gap: .35rem; }
        .dc-step-label { display: none; }
        .dc-step { padding: .35rem; }
    }

    /* --- Inline help button + popover ----------------------------- */
    .dc-help {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px; height: 18px;
        margin-left: .35rem;
        padding: 0;
        background: transparent;
        border: 0;
        color: var(--bd-text-faint);
        cursor: pointer;
        border-radius: 999px;
        transition: color var(--t-fast), background var(--t-fast);
        vertical-align: middle;
    }
    .dc-help:hover { color: var(--bd-primary); background: var(--bd-primary-light); }
    .dc-help:focus-visible { outline: none; box-shadow: var(--ring-focus); }
    .dc-help i { font-size: .85rem; line-height: 1; }
    .dc-help-pop {
        position: absolute;
        z-index: 1200;
        max-width: 280px;
        padding: .55rem .7rem;
        background: var(--bd-surface);
        color: var(--bd-text);
        font-size: .78rem;
        line-height: 1.45;
        border: 1px solid var(--bd-border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-4px);
        transition: opacity var(--t-fast), transform var(--t-fast);
    }
    .dc-help-pop[data-visible="true"] {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* --- Empty-state CTA ------------------------------------------ */
    .dc-empty {
        display: grid;
        place-items: center;
        text-align: center;
        padding: 2rem 1rem;
        border: 1px dashed var(--bd-border);
        border-radius: var(--r-2xl);
        background: var(--bd-surface-2, var(--bd-surface));
        color: var(--bd-text-muted);
    }
    .dc-empty .dc-empty-icon {
        width: 44px; height: 44px;
        display: grid; place-items: center;
        border-radius: 999px;
        background: var(--bd-primary-light);
        color: var(--bd-primary);
        margin-bottom: .55rem;
        font-size: 1.2rem;
    }
    .dc-empty h3 {
        font-size: 1rem;
        color: var(--bd-text);
        margin: .15rem 0 .25rem;
    }
    .dc-empty p {
        font-size: .85rem;
        margin: 0 0 .9rem;
        max-width: 38ch;
    }
    .dc-empty-cta {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* --- Summary card (TTI / Total Duty / Landed) ----------------- */
    .dc-summary {
        background: var(--bd-surface);
        border: 1px solid var(--bd-border);
        border-radius: var(--r-2xl);
        padding: .9rem 1rem;
        margin-bottom: .85rem;
    }
    .dc-summary[hidden] { display: none; }
    .dc-summary-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .75rem;
        margin-bottom: .65rem;
    }
    .dc-summary-cell {
        display: flex; flex-direction: column;
        align-items: flex-start; gap: .15rem;
        min-width: 0;
    }
    .dc-summary-cell + .dc-summary-cell {
        border-left: 1px solid var(--bd-divider);
        padding-left: .75rem;
    }
    .dc-summary-label {
        font-size: var(--fs-label, .72rem);
        font-weight: 700;
        letter-spacing: var(--tracking-label, .08em);
        text-transform: uppercase;
        color: var(--bd-text-muted);
    }
    .dc-summary-value {
        font-family: var(--font-display);
        font-size: 1.32rem;
        font-weight: 700;
        color: var(--bd-text);
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
        letter-spacing: -.01em;
        line-height: 1.15;
        word-break: break-all;
    }
    .dc-summary-cell:first-child .dc-summary-value { color: var(--bd-primary); }

    /* Stacked horizontal duty bar */
    .dc-bar {
        display: flex;
        height: 10px;
        border-radius: 999px;
        overflow: hidden;
        background: var(--bd-surface-2);
        border: 1px solid var(--bd-border);
        margin: .35rem 0 .5rem;
    }
    .dc-bar-seg {
        height: 100%;
        flex-grow: 0; flex-shrink: 0;
        flex-basis: 0%;
        transition: flex-basis var(--t-base);
    }
    .dc-bar-seg[data-seg="cif"] { background: var(--bd-text-muted); }
    .dc-bar-seg[data-seg="cd"]  { background: var(--c-cd); }
    .dc-bar-seg[data-seg="rd"]  { background: var(--c-rd); }
    .dc-bar-seg[data-seg="sd"]  { background: var(--c-sd); }
    .dc-bar-seg[data-seg="vat"] { background: var(--c-vat); }
    .dc-bar-seg[data-seg="ait"] { background: var(--c-ait); }
    .dc-bar-seg[data-seg="at"]  { background: var(--c-at); }

    .dc-bar-legend {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem .75rem;
        font-size: var(--fs-small, .8rem);
        color: var(--bd-text-muted);
    }
    .dc-bar-legend > span {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }
    .dc-bar-legend .dot {
        display: inline-block;
        width: 8px; height: 8px;
        border-radius: 999px;
        background: currentColor;
    }

    /* ────────────────────────────────────────────────────────────
       PR 4: First-run product tour
       3 popovers anchored to data-tour="search|calc|results".
       Pure CSS + ~120 lines of JS in the IIFE below. No deps.
       ──────────────────────────────────────────────────────────── */
    .tour-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .55);
        z-index: 1280;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-base);
    }
    .tour-overlay[data-active="true"] {
        opacity: 1;
        pointer-events: auto;
    }
    .tour-spotlight {
        position: absolute;
        border-radius: var(--r-lg, .75rem);
        box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55);
        pointer-events: none;
        transition: top var(--t-base), left var(--t-base), width var(--t-base), height var(--t-base);
    }
    .tour-pop {
        position: absolute;
        z-index: 1290;
        max-width: 320px;
        padding: .85rem 1rem .8rem;
        background: var(--bd-surface);
        color: var(--bd-text);
        border: 1px solid var(--bd-border);
        border-radius: var(--r-xl, .875rem);
        box-shadow: var(--shadow-lg);
        font-size: var(--fs-body, .92rem);
        line-height: var(--lh-snug, 1.35);
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
        transition: opacity var(--t-base), transform var(--t-base);
    }
    .tour-overlay[data-active="true"] .tour-pop {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .tour-pop::before {
        content: "";
        position: absolute;
        width: 12px; height: 12px;
        background: var(--bd-surface);
        border-left: 1px solid var(--bd-border);
        border-top: 1px solid var(--bd-border);
        transform: rotate(45deg);
    }
    .tour-pop[data-arrow="top"]::before    { top: -7px;    left: 24px; }
    .tour-pop[data-arrow="bottom"]::before { bottom: -7px; left: 24px; transform: rotate(225deg); }
    .tour-pop[data-arrow="left"]::before   { left: -7px;   top: 24px; transform: rotate(-45deg); }
    .tour-pop[data-arrow="right"]::before  { right: -7px;  top: 24px; transform: rotate(135deg); }

    .tour-pop-eyebrow {
        display: inline-flex; align-items: center; gap: .35rem;
        font-size: var(--fs-label, .72rem);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 700;
        color: var(--bd-orange);
        margin-bottom: .25rem;
    }
    .tour-pop h4 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0 0 .35rem;
        color: var(--bd-text);
        letter-spacing: -.005em;
    }
    .tour-pop p {
        margin: 0 0 .65rem;
        font-size: var(--fs-small, .85rem);
        color: var(--bd-text-muted);
    }
    .tour-pop-controls {
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    .tour-pop-progress {
        font-size: var(--fs-label, .72rem);
        color: var(--bd-text-faint);
        font-variant-numeric: tabular-nums;
        margin-right: auto;
    }
    .tour-btn {
        height: 30px;
        padding: 0 .75rem;
        border-radius: var(--r-sm, .375rem);
        font-size: .8rem;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid var(--bd-border);
        background: var(--bd-surface);
        color: var(--bd-text);
        transition: all var(--t-fast);
    }
    .tour-btn:hover { border-color: var(--bd-primary-mid); }
    .tour-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
    .tour-btn--primary {
        background: var(--bd-primary);
        border-color: var(--bd-primary);
        color: #fff;
    }
    .tour-btn--primary:hover { background: var(--bd-primary-hover, var(--bd-primary)); border-color: var(--bd-primary-hover, var(--bd-primary)); }
    .tour-btn--ghost {
        background: transparent;
        border-color: transparent;
        color: var(--bd-text-muted);
        padding: 0 .35rem;
    }
    .tour-btn--ghost:hover { color: var(--bd-text); }

    @media (max-width: 600px) {
        .tour-pop { max-width: calc(100vw - 32px); }
        .tour-pop::before { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        .tour-overlay,
        .tour-pop,
        .tour-spotlight { transition: none !important; }
    }

    /* ========================================================
       PR 10: SEO / FAQ content sections
       ======================================================== */
    .seo-block {
        background: var(--bd-bg);
        padding: 2rem 1rem 2.25rem;
        border-top: 1px solid var(--bd-border);
    }
    .seo-block.alt {
        background: var(--bd-surface);
    }
    .seo-inner {
        max-width: 1080px;
        margin: 0 auto;
    }
    .seo-section-head {
        text-align: left;
        margin-bottom: 1.25rem;
        max-width: 72ch;
    }
    .seo-section-head h2 {
        color: var(--bd-text);
        font-size: clamp(1.25rem, 2.4vw, 1.6rem);
        font-weight: 800;
        letter-spacing: -0.015em;
        margin: 0 0 .35rem;
        line-height: 1.2;
    }
    .seo-lede {
        color: var(--bd-text-muted);
        font-size: .95rem;
        line-height: 1.55;
        margin: 0;
    }

    /* How-to steps */
    .seo-steps {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: .85rem;
    }
    .seo-steps li {
        background: var(--bd-surface);
        border: 1px solid var(--bd-border);
        border-radius: var(--r-md, 8px);
        padding: 1rem 1.1rem;
        position: relative;
    }
    .seo-block.alt .seo-steps li { background: var(--bd-bg); }
    .seo-step-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: var(--bd-primary);
        color: #fff;
        font-weight: 700;
        font-size: .875rem;
        margin-bottom: .5rem;
    }
    .seo-steps h3 {
        color: var(--bd-text);
        font-size: 1rem;
        font-weight: 700;
        margin: 0 0 .35rem;
        line-height: 1.25;
    }
    .seo-steps p {
        color: var(--bd-text-muted);
        font-size: .875rem;
        line-height: 1.55;
        margin: 0;
    }
    .seo-steps a, .seo-faq a, .seo-glossary a {
        color: var(--bd-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* Glossary cards */
    .seo-glossary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: .75rem;
    }
    .seo-term {
        background: var(--bd-bg);
        border: 1px solid var(--bd-border);
        border-radius: var(--r-md, 8px);
        padding: .85rem 1rem;
    }
    .seo-block:not(.alt) .seo-term { background: var(--bd-surface); }
    .seo-term h3 {
        color: var(--bd-primary);
        font-size: .95rem;
        font-weight: 700;
        margin: 0 0 .25rem;
        letter-spacing: -.01em;
    }
    .seo-term p {
        color: var(--bd-text-muted);
        font-size: .85rem;
        line-height: 1.5;
        margin: 0;
    }

    /* FAQ */
    .seo-faq {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }
    .faq-q {
        background: var(--bd-surface);
        border: 1px solid var(--bd-border);
        border-radius: var(--r-md, 8px);
        overflow: hidden;
        transition: border-color var(--t-fast, .15s);
    }
    .faq-q[open] {
        border-color: var(--bd-primary);
    }
    .faq-q > summary {
        cursor: pointer;
        list-style: none;
        padding: .75rem 1rem;
        font-weight: 600;
        font-size: .95rem;
        color: var(--bd-text);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        line-height: 1.35;
    }
    .faq-q > summary::-webkit-details-marker { display: none; }
    .faq-q > summary::after {
        content: "+";
        font-size: 1.25rem;
        font-weight: 400;
        color: var(--bd-primary);
        flex-shrink: 0;
        transition: transform var(--t-fast, .15s);
    }
    .faq-q[open] > summary::after {
        content: "−";
    }
    .faq-q > summary:hover {
        background: var(--bd-surface-2, var(--bd-bg));
    }
    .faq-a {
        padding: 0 1rem 1rem;
        color: var(--bd-text-muted);
        font-size: .9rem;
        line-height: 1.6;
    }
    .faq-a p { margin: 0; }
    .faq-a code {
        background: var(--bd-surface-2, var(--bd-bg));
        border: 1px solid var(--bd-border);
        border-radius: 4px;
        padding: 1px 6px;
        font-size: .85em;
        font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
        color: var(--bd-text);
    }

    @media (max-width: 600px) {
        .seo-block { padding: 1.5rem .85rem 1.75rem; }
        .seo-section-head h2 { font-size: 1.2rem; }
        .seo-steps, .seo-glossary { grid-template-columns: 1fr; }
        .faq-q > summary { font-size: .9rem; padding: .65rem .85rem; }
        .faq-a { font-size: .85rem; padding: 0 .85rem .85rem; }
    }

    @media (prefers-reduced-motion: reduce) {
        .faq-q,
        .faq-q > summary::after { transition: none !important; }
    }

    /* ========================================================
       PR 11: calculator UX - slim-fit calculator + hero result
       ======================================================== */

    /* HS-meta strip: hierarchy on the left, "Open Catalog" inline-right. */
    .fp-hs-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .65rem;
        margin: -.15rem 0 .55rem;
        padding-left: calc(130px + .65rem);
        flex-wrap: wrap;
    }
    .fp-hs-meta > .fp-hierarchy-box { flex: 1; min-width: 0; padding: 0; margin: 0; }
    @media (max-width: 600px) {
        .fp-hs-meta { padding-left: 0; }
    }

    /* Compact sub-row inside the Advanced section. */
    .fp-field-row--compact {
        margin-bottom: .35rem;
        grid-template-columns: 90px minmax(0, 1fr);
    }
    .fp-field-row--compact .fp-input { padding: .35rem .55rem; min-height: 32px; font-size: .82rem; }

    /* Advanced (progressive disclosure). */
    .fp-advanced {
        margin: .35rem 0 .55rem;
        border-top: 1px dashed var(--bd-border);
        padding-top: .55rem;
    }
    .fp-advanced > summary {
        cursor: pointer;
        font-size: .78rem;
        font-weight: 600;
        color: var(--bd-text-muted);
        list-style: none;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .25rem 0;
        user-select: none;
    }
    .fp-advanced > summary::-webkit-details-marker { display: none; }
    .fp-advanced > summary::after {
        content: "\F285"; /* bi-chevron-down */
        font-family: "bootstrap-icons";
        margin-left: .25rem;
        transition: transform var(--t-fast);
        font-size: .8rem;
    }
    .fp-advanced[open] > summary::after { transform: rotate(180deg); }
    .fp-advanced > summary:hover { color: var(--bd-primary); }
    .fp-advanced-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: .35rem .85rem;
        margin: .55rem 0 .35rem;
    }
    .fp-advanced-note {
        font-size: .72rem;
        color: var(--bd-text-faint);
        line-height: 1.5;
        margin: .35rem 0 0;
    }

    /* Pane footer with reset link + result note. */
    .fp-pane-footer {
        margin-top: auto;
        padding-top: .5rem;
        border-top: 1px dashed var(--bd-border);
        display: flex;
        flex-direction: column;
        gap: .4rem;
        font-size: .72rem;
        color: var(--bd-text-muted);
    }
    .fp-pane-footer .fp-result-note { border: 0; padding: 0; margin: 0; }
    .fp-link-btn {
        background: transparent;
        border: 0;
        color: var(--bd-text-muted);
        font-size: .76rem;
        font-weight: 600;
        padding: .25rem .5rem;
        margin: -.25rem -.5rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        border-radius: var(--r-sm, 4px);
        transition: color var(--t-fast), background var(--t-fast);
    }
    .fp-link-btn:hover { color: var(--bd-primary); background: var(--bd-primary-light, transparent); }

    /* Override: .fp-result-note legacy style overridden inside footer. */
    .fp-pane-footer > .fp-result-note,
    article > .fp-result-note {
        font-size: .72rem;
        color: var(--bd-text-muted);
        margin-top: 0;
        border: 0;
        padding: 0;
    }

    /* TOTAL LANDED COST hero block inside summary. */
    .dc-hero {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
        padding: .5rem .15rem .75rem;
        border-bottom: 1px solid var(--bd-divider, var(--bd-border));
        margin-bottom: .65rem;
    }
    .dc-hero-label {
        font-size: var(--fs-label, .68rem);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--bd-text-muted);
    }
    .dc-hero-value {
        font-family: var(--font-display, inherit);
        font-size: clamp(1.5rem, 3.6vw, 2.05rem);
        font-weight: 800;
        color: var(--bd-primary);
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
        letter-spacing: -.02em;
    }
    .dc-hero-sub {
        font-size: .74rem;
        color: var(--bd-text-faint);
    }

    /* Action row at bottom of summary card. */
    .dc-summary-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .35rem;
        margin-top: .65rem;
        padding-top: .55rem;
        border-top: 1px dashed var(--bd-border);
    }

    /* Calculating pill (set on dc-summary while a fetch is in-flight). */
    .dc-summary[data-loading]::before {
        content: 'Calculating…';
        position: absolute;
        top: .5rem; right: .65rem;
        font-size: .65rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: .08em;
        color: var(--bd-primary);
        background: var(--bd-primary-light, rgba(15,118,110,.1));
        border-radius: 999px;
        padding: 2px 8px;
        z-index: 2;
    }
    .dc-summary { position: relative; }

    /* Tighten empty-state card. */
    .dc-empty {
        padding: 1.1rem .85rem 1rem !important;
    }
    .dc-empty .dc-empty-icon {
        width: 36px !important; height: 36px !important;
        font-size: 1rem !important;
        margin-bottom: .5rem !important;
    }
    .dc-empty h3 {
        font-size: 1rem !important;
        margin-bottom: .3rem !important;
    }
    .dc-empty p {
        font-size: .82rem !important;
        line-height: 1.45 !important;
        margin-bottom: .85rem !important;
    }

    /* Tighten the summary card padding overall. */
    .dc-summary {
        padding: .75rem .85rem !important;
        margin-bottom: .6rem !important;
    }
    .dc-summary-row {
        gap: .5rem !important;
        margin-bottom: .5rem !important;
    }
    .dc-summary-cell + .dc-summary-cell {
        padding-left: .55rem !important;
    }
    .dc-summary-value {
        font-size: 1.15rem !important;
    }

    /* Mobile: stick a condensed summary to the bottom of the viewport. */
    .dc-mobile-stickysum {
        display: none;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background: var(--bd-surface);
        border-top: 1px solid var(--bd-border);
        box-shadow: 0 -2px 10px rgba(0,0,0,.06);
        padding: .55rem .85rem;
        z-index: 30;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        font-size: .8rem;
    }
    .dc-mobile-stickysum-l { display: flex; flex-direction: column; line-height: 1.15; }
    .dc-mobile-stickysum-l .l1 { font-weight: 700; color: var(--bd-primary); font-size: .95rem; }
    .dc-mobile-stickysum-l .l2 { color: var(--bd-text-muted); font-size: .7rem; }
    .dc-mobile-stickysum-r {
        background: var(--bd-primary);
        color: #fff;
        border: 0;
        border-radius: var(--r-sm, 6px);
        padding: .45rem .7rem;
        font-size: .8rem;
        font-weight: 600;
        cursor: pointer;
    }
    @media (max-width: 600px) {
        body.has-results .dc-mobile-stickysum { display: flex; }
        body.has-results { padding-bottom: 60px; }
    }


.dc-recent {
    max-width: 1180px;
    margin: 1rem auto 1.25rem;
    padding: 0 1rem;
}
.dc-recent-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .5rem;
}
.dc-recent-head h2 {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--bd-text-muted); margin: 0; font-weight: 600;
    display: inline-flex; align-items: center; gap: .35rem;
}
.dc-recent-head h2 i { color: var(--bd-primary); }
.dc-recent-list {
    display: flex; flex-wrap: wrap; gap: .5rem;
    list-style: none; padding: 0; margin: 0;
}
.dc-recent-chip {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .4rem .7rem; border: 1px solid var(--bd-border);
    border-radius: 999px; background: var(--bd-surface);
    font-size: .8rem; cursor: pointer; transition: border-color .15s, transform .15s;
}
.dc-recent-chip:hover { border-color: var(--bd-primary); transform: translateY(-1px); }
.dc-recent-chip:focus-visible { outline: 2px solid var(--bd-primary); outline-offset: 2px; }
.dc-recent-hs { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-weight: 600; color: var(--bd-primary); }
.dc-recent-cif { font-variant-numeric: tabular-nums; }
.dc-recent-tti { color: var(--bd-text-muted); font-size: .75rem; }
.dc-recent-ts { color: var(--bd-text-faint); font-size: .7rem; }

@keyframes dc-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.dc-summary-actions .shake { animation: dc-shake .25s ease-in-out 0s 2; }

/* ═══════════════════════════════════════════════════════════════════
   PR 16: Trade Terms / Mode of Transport / FX rate / Valuation chain
   ═══════════════════════════════════════════════════════════════════ */

/* HS descriptor under hero number */
.dc-hs-descriptor {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
    padding: .45rem .65rem; margin-top: .55rem;
    background: var(--bd-surface-2, color-mix(in srgb, var(--bd-surface) 96%, transparent));
    border: 1px solid var(--bd-border); border-radius: 8px;
    font-size: .85rem;
}
.dc-hs-descriptor__code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-weight: 700; color: var(--bd-primary);
}
.dc-hs-descriptor__desc { color: var(--bd-text); }

/* Valuation chain (CIF local → Landing → Assessable → Vatable) */
.dc-valuation-chain {
    display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem;
    margin: .75rem 0;
    padding: .65rem .8rem;
    border: 1px dashed var(--bd-border); border-radius: 8px;
    background: color-mix(in srgb, var(--bd-surface) 92%, transparent);
}
.dc-valchain-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .85rem;
}
.dc-valchain-label { color: var(--bd-text-muted); }
.dc-valchain-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.dc-valchain-row--accent .dc-valchain-label,
.dc-valchain-row--accent .dc-valchain-value { color: var(--bd-primary); font-weight: 700; }
@media (max-width: 560px) { .dc-valuation-chain { grid-template-columns: 1fr; } }

/* FX rate input meta line */
.fp-input-wrap--with-meta { display: flex; flex-direction: column; gap: .2rem; }
.fp-input-meta {
    font-size: .72rem; color: var(--bd-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Breadcrumb: ensure consistent presentation across all pages */
.breadcrumb-nav {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    font-size: .82rem; color: var(--bd-text-muted);
    margin: 0 0 .9rem 0;
}
.breadcrumb-nav a { color: var(--bd-text-muted); text-decoration: none; }
.breadcrumb-nav a:hover { color: var(--bd-primary); text-decoration: underline; }
.breadcrumb-nav .bc-sep { color: var(--bd-text-faint); font-size: .7rem; }
.breadcrumb-nav .bc-current { color: var(--bd-text); font-weight: 600; }

/* 2026 compact calculator pass */
.fp-app-container {
    margin: 1rem auto 2.25rem;
}
.fp-grid {
    gap: .7rem !important;
}
.fp-pane-left,
.fp-pane-right {
    padding: .85rem .9rem .75rem !important;
    border-radius: 8px !important;
}
.fp-header {
    margin-bottom: .55rem !important;
    padding-bottom: .45rem !important;
}
.fp-header h2 {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .95rem !important;
}
.fp-header h2 i {
    color: var(--bd-primary);
}
.fp-field-row {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    column-gap: .55rem !important;
    margin-bottom: .42rem !important;
}
.fp-label {
    font-size: .75rem !important;
}
.fp-input {
    min-height: 34px !important;
    padding: .38rem .55rem !important;
    border-radius: 6px !important;
    font-size: .83rem !important;
}
.fp-field-help {
    margin-top: .18rem;
    font-size: .7rem;
    color: var(--bd-text-faint);
    line-height: 1.35;
}
.fp-hs-meta {
    margin: -.08rem 0 .25rem !important;
    padding-left: calc(118px + .55rem) !important;
    gap: .45rem !important;
}
.fp-hierarchy-helper {
    margin: -.05rem 0 .45rem calc(118px + .55rem);
    font-size: .72rem;
    line-height: 1.35;
    color: var(--bd-text-faint);
}
.fp-hierarchy-box {
    font-size: .74rem !important;
}
.hs-meta-card {
    border-radius: 7px !important;
    padding: .5rem .6rem !important;
}
.hs-meta-desc {
    margin-bottom: .25rem !important;
}
.fp-advanced {
    margin: .2rem 0 .45rem !important;
    padding-top: .45rem !important;
}
.fp-advanced > summary {
    width: 100%;
    justify-content: space-between;
    padding: .28rem 0 !important;
    font-size: .76rem !important;
}
.fp-advanced-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
    gap: .42rem .65rem !important;
    margin: .45rem 0 .25rem !important;
}
.fp-field-row--compact {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    margin-bottom: .28rem !important;
}
.fp-field-row--compact .fp-input {
    min-height: 34px !important;
    padding: .36rem .5rem !important;
}
.fp-mot-title,
.fp-advanced-note {
    font-size: .7rem !important;
    margin-top: .28rem !important;
}
.fp-pane-footer {
    margin-top: .35rem !important;
    padding-top: .5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .4rem !important;
}
.fp-result-note {
    line-height: 1.35;
}
.calc-primary-action {
    width: 100% !important;
    min-height: 38px;
    padding: .55rem .85rem !important;
}
.calc-primary-action.is-busy {
    position: relative;
    opacity: .78;
}
.calc-primary-action.is-busy::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.55);
    border-top-color: #fff;
    animation: calcSpin .7s linear infinite;
}
@keyframes calcSpin { to { transform: rotate(360deg); } }

.btn-solid:focus-visible,
.btn-outline:focus-visible,
.fp-link-btn:focus-visible,
.calc-primary-action:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus, 0 0 0 3px rgba(1, 105, 111, .18)) !important;
}
.btn-solid:active,
.btn-outline:active,
.calc-primary-action:active {
    transform: translateY(0) scale(.99) !important;
}

.calc-hs-dropdown {
    top: calc(100% + 4px);
    z-index: 1100;
    max-height: 240px;
}
.calc-hs-dropdown .ac-item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border-light);
    background: var(--bd-surface);
    text-align: left;
}
.calc-hs-dropdown .ac-item.is-active,
.calc-hs-dropdown .ac-item:hover,
.calc-hs-dropdown .ac-item:focus-visible {
    background: var(--bd-primary-light);
    outline: none;
}
.ac-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.ac-context,
.ac-empty {
    font-size: .72rem;
    color: var(--bd-text-faint);
}
.ac-empty {
    padding: .7rem .85rem;
}

.dc-summary {
    border-radius: 8px !important;
    padding: .65rem .7rem !important;
}
.dc-summary-actions {
    margin-top: .45rem !important;
    padding-top: .45rem !important;
}
.dc-kpi-card {
    border-radius: 8px !important;
    padding: .7rem !important;
}
.dc-kpi-cost-row {
    padding: .28rem 0 !important;
}

@media (max-width: 720px) {
    .fp-field-row,
    .fp-field-row--compact {
        grid-template-columns: 1fr !important;
        margin-bottom: .55rem !important;
    }
    .fp-hs-meta,
    .fp-hierarchy-helper {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .fp-advanced-grid {
        grid-template-columns: 1fr !important;
    }
    .fp-pane-footer {
        grid-template-columns: 1fr;
        align-items: stretch !important;
    }
    .calc-primary-action {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .hero-dark {
        padding: 1.55rem .85rem 1.75rem !important;
    }
    .fp-app-container {
        padding: 0 .75rem;
    }
    .dc-stepper {
        margin-top: .85rem !important;
    }
    .fp-app-container,
    .fp-grid,
    .fp-pane-left,
    .fp-pane-right,
    .fp-field-row,
    .fp-input-wrap,
    .fp-input,
    .fp-hierarchy-box,
    .fp-advanced,
    .fp-advanced-grid {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .fp-link,
    .fp-advanced > summary {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Print/PDF: clean result sheet with compact input context. */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }
    
    /* Hide layout elements & non-printables */
    #mainNav,
    #navDrawer,
    .site-footer,
    .hero-dark,
    .seo-block,
    .alibaba-section,
    #alibabaSection,
    #dcRecent,
    .ad-slot,
    .dc-empty,
    .dc-summary-actions,
    .dc-bar,
    .dc-bar-legend,
    .fp-header-actions,
    #sendResultsModal,
    .modal-overlay {
        display: none !important;
    }

    body, html {
        background: #fff !important;
        color: #0f172a !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #mainContent {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    #printableArea {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        box-shadow: none !important;
    }
    .fp-grid {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
    }
        /* Hide .fp-pane-left so only results are printed */
    .fp-pane-left {
        display: none !important;
    }
    /* Hide interactive controls inside the calc pane for print */
    .fp-pane-left .fp-pane-footer,
    .fp-pane-left .fp-advanced,
    .fp-pane-left .dc-help,
    .fp-pane-left .fp-link-btn,
    .fp-pane-left .fp-hierarchy-helper,
    .fp-pane-left #calcHsDropdown,
    .fp-pane-left .calc-primary-action,
    .fp-pane-left #resetBtn,
    .fp-pane-left #resetBtnTop,
    .fp-pane-left .hs-meta-toggle {
        display: none !important;
    }
    /* Hide things that don't belong in print at all */
    .dc-empty,
    .dc-summary-actions,
    .dc-bar,
    .dc-bar-legend,
    .fp-header-actions,
    .alibaba-section,
    #alibabaSection,
    #sendResultsModal,
    #dcRecent,
    .ad-slot,
    .seo-block {
        display: none !important;
    }
    .fp-pane-right {
        display: block !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        color: #0f172a !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .fp-header {
        border-bottom: 1pt solid #0f172a !important;
        margin-bottom: 6pt !important;
        padding-bottom: 5pt !important;
    }
    .fp-header h2 {
        color: #0f172a !important;
        font-size: 13pt !important;
    }
    .dc-summary,
    .dc-kpi-card,
    .fp-accordion,
    .fp-table {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        box-shadow: none !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .dc-kpi-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.35fr !important;
        gap: 7pt !important;
        overflow: visible !important;
    }
    .dc-kpi-card {
        border: 1pt solid #94a3b8 !important;
        padding: 7pt !important;
        background: #fff !important;
    }
    .fp-accordion summary {
        display: none !important;
    }
    .fp-table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        margin-top: 7pt !important;
        overflow: visible !important;
    }
    .fp-table th,
    .fp-table td {
        padding: 4pt 5pt !important;
        border: .5pt solid #94a3b8 !important;
        font-size: 8.5pt !important;
        color: #0f172a !important;
    }
        /* Print-only header hidden per user request */
    #printableArea::before {
        display: none !important;
    }
    /* Compact print inputs — make them look like plain text */
    .fp-input {
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        min-height: auto !important;
        font-weight: 700 !important;
        font-size: 9pt !important;
        color: #0f172a !important;
    }
    .fp-label {
        font-size: 8pt !important;
        color: #64748b !important;
    }
    .fp-field-row {
        margin-bottom: 3pt !important;
    }
    #printFooter {
        display: none !important;
    }
    .print-footer-signature {
        display: none !important;
    }
}

    /* ────────────────────────────────────────────────────────────
       Mobile UX polish (home/calculator).
       Overrides this file's own dense !important field sizing so iOS
       does not zoom on focus, and raises tap targets to 44px. Desktop
       (>768px) keeps the compact layout.
       ──────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
        .fp-input,
        .fp-advanced-grid .fp-input,
        .fp-field-row--compact .fp-input {
            font-size: 16px !important;
            min-height: 44px;
        }

        .btn-outline,
        .btn-solid,
        .calc-primary-action,
        .dc-mobile-stickysum-r {
            min-height: 44px;
        }

        .modal-close,
        .hero-search-clear {
            min-width: 44px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }

    /* ════════════════════════════════════════════════════════════
       Premium glassmorphism — calculator section + home surfaces.
       Loads last so it overrides the earlier opaque surfaces.
       Solid fallback comes from the base rules; translucency/blur is
       gated behind @supports. Palette unchanged (teal/green/orange).
       ════════════════════════════════════════════════════════════ */

    /* Calculator + results panes — the hero of the page. */
    .fp-pane-left,
    .fp-pane-right {
        border-radius: var(--r-2xl);
        box-shadow: var(--glass-shadow);
    }

    /* Summary, result cards, accordion, hs-meta, recent chips. */
    .dc-summary,
    .fp-card,
    .fp-accordion,
    .dc-recent {
        border-radius: var(--r-xl);
        box-shadow: var(--glass-shadow);
    }

    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .fp-pane-left,
        .fp-pane-right,
        .dc-summary,
        .fp-card,
        .fp-accordion {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
            /* Soft top-edge light reflection (no extra DOM node). */
            box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .45);
        }
        [data-theme="dark"] .fp-pane-left,
        [data-theme="dark"] .fp-pane-right,
        [data-theme="dark"] .dc-summary,
        [data-theme="dark"] .fp-card,
        [data-theme="dark"] .fp-accordion {
            box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
        }

        /* Dropdowns/popovers stay more opaque for legibility over content. */
        .autocomplete-dropdown,
        .calc-hs-dropdown,
        .dc-help-pop,
        .modal-content {
            background: var(--glass-bg-strong);
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        }

        /* Stepper chips as little glass pills. */
        .dc-step {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            -webkit-backdrop-filter: blur(10px) saturate(130%);
            backdrop-filter: blur(10px) saturate(130%);
        }
    }

    /* Gradient brand hairline across the top of each pane — premium accent.
       NB: no overflow:hidden here — the left pane hosts the autocomplete
       dropdown which must be free to overflow downward. */
    .fp-pane-left,
    .fp-pane-right {
        position: relative;
    }
    .fp-pane-left::after,
    .fp-pane-right::after {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 2px;
        border-radius: var(--r-2xl) var(--r-2xl) 0 0;
        background: linear-gradient(90deg, var(--bd-primary) 0%, var(--bd-accent) 55%, var(--bd-orange) 100%);
        opacity: .85;
        pointer-events: none;
    }

    /* Inputs: keep a near-solid surface so text stays crisp on glass. */
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .fp-input,
        .hero-search-input {
            background: var(--bd-surface-2, var(--bd-surface));
        }
        .fp-input:focus {
            background: var(--bd-surface);
        }
    }

    /* Slightly lift panes on hover for depth — desktop only, no layout shift. */
    @media (hover: hover) and (min-width: 801px) {
        .fp-pane-left,
        .fp-pane-right {
            transition: box-shadow var(--t-base), transform var(--t-base);
        }
        .fp-pane-right:hover {
            box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 40px rgba(1, 105, 111, .12);
        }
    }