/* =====================================================================
   CREATIVE-FINANCE-02 — creative-finance.css
   Full visual parity with Fix & Flip. All values copied verbatim
   from fix-and-flip.css where specified.
   ===================================================================== */

/* ── BASE ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: linear-gradient(to bottom right, #134160, #586C75, #134160, #586C75) no-repeat fixed;
    background-size: cover;
    color: #eaf2f7;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 20px 20px 40px;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

html,
body {
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    -ms-overflow-style: none;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

/* ── OUTER CONTAINER — exact .ff-grid values ── */
.cf-outer {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
    overflow: visible;
    overflow-x: auto;
    padding: 0 16px 16px;
    margin: 20px auto;
    max-width: 1700px;
    width: 100%;
    box-sizing: border-box;
    min-width: 1100px;
}

/* ── TITLE BLOCK (replaces .header) ── */
.cf-title-block {
    text-align: center;
    margin-bottom: 20px;
}

/* h1 — exact .ff-grid > h1 + global h1 values from fix-and-flip.css */
.cf-title-block h1 {
    font-family: 'alfarn', serif;
    font-size: clamp(20px, 2.5vw, 36px);
    color: #FDA929;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    margin: 0;
    padding: 9px 0 7px;
}

.cf-title-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,167,42,0.25);
    margin: 12px 0;
}

/* ── TAB BAR ── */
.tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0;
    margin-bottom: 20px;
}

.tab {
    background: rgba(255,167,42,0.06);
    border: 1px solid rgba(255,167,42,0.25);
    border-radius: 999px;
    color: #bfd0da;
    padding: 7px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.2s;
}

.tab:hover {
    background: rgba(255,167,42,0.12);
    color: #ffa72a;
}

.tab-locked,
.tab:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.tab.active {
    background: rgba(255,167,42,0.18);
    border-color: #ffa72a;
    color: #ffa72a;
    box-shadow: 0 0 10px rgba(255,167,42,0.2);
}

/* ── SUMMARY BAR ── */
.summary-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

/* .sum-card — exact .ff-result-card */
.sum-card {
    position: relative;
    border: 2px solid #ffa72a;
    border-radius: 12px;
    background: rgba(10,30,48,0.7);
    padding: clamp(10px, 1.2vw, 18px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* .sum-label — exact .ff-result-main-label / ff-main-chip-label */
.sum-label {
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.6);
    text-align: center;
    margin: 4px 0 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: block;
}

/* .sum-value — exact .ff-main-chip-value */
.sum-value {
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 900;
    color: #ffffff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: block;
}

.sum-sub {
    font-size: clamp(8px, 0.75vw, 10px);
    color: #7aafc6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 3px;
    display: block;
}

/* ── INPUT GRID — 20/30/30/20 proportions ── */
.input-grid {
    display: grid;
    grid-template-columns: 20fr 30fr 30fr 20fr;
    gap: 12px;
    margin-bottom: 20px;
    width: 100%;
}

/* ── SECTION PANELS — exact FF panel container ── */
/* FF FIX 3: background rgba(255,255,255,0.04), shadow ring */
.sec {
    background: rgba(255,255,255,0.04);
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,167,42,0.15);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

/* .sec-title — exact .ff-panel-header-row + .ff-panel-title values ── */
.sec-title {
    /* .ff-panel-header-row layout */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    background: rgba(0,0,0,0.18);
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-sizing: border-box;
    /* .ff-panel-title typography */
    font-family: 'alfarn', serif;
    font-size: clamp(11px, 1.3vw, 15px);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #FDA929;
    margin-bottom: 0;
}

.cf-sec-body {
    padding: 14px;
}

/* ── INTERNAL FIELD GRIDS ── */
#sec-acquisition .cf-sec-body,
#sec-market-risk .cf-sec-body {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
}

#sec-existing-debt .cf-sec-body,
#sec-buyer-seller .cf-sec-body {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
}

/* Toggle button spans full width of its panel grid */
#toggle-seller-carry {
    grid-column: 1 / -1;
}

/* ── COMPACT PILL + LABEL SIZING IN SECTIONS ── */
.sec .pill,
.sec input.pill,
.sec select.pill {
    font-size: clamp(10px, 0.9vw, 12px);
    padding: 5px 10px;
    height: auto;
    min-height: 32px;
}

.sec .ig label {
    font-size: clamp(8px, 0.78vw, 10px);
    font-weight: 700;
    color: white;
    margin-bottom: 1px;
    line-height: 1.2;
}

/* ── INPUT PAIRS ── */
.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 7px;
}

.ig {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* .ig label — exact FF field label: .ff-calc-grid .field label */
.ig label {
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 4px;
    display: block;
    line-height: 1.3;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* .pill — exact FF .lf-control values ── */
.pill,
input.pill,
select.pill {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 9px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,167,42,0.18);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        rgba(19,65,96,0.35);
    color: #eaf2f7;
    font-size: 14px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: normal;
    outline: none;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    box-sizing: border-box;
}

.pill:hover,
input.pill:hover,
select.pill:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
        rgba(19,65,96,0.42);
    border-color: rgba(255,167,42,0.35);
}

.pill:focus,
input.pill:focus,
select.pill:focus {
    border-color: #FDA929;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 0 3px rgba(253,169,41,0.18);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
        rgba(19,65,96,0.42);
}

select.pill {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23ffa72a' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 26px;
}

/* ── RESULTS AREA ── */
#results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}

/* .res-card — exact .ff-result-card (FIX-FLIP-RESULTS-04 + POLISH-05) */
.res-card {
    position: relative;
    box-shadow: 0 0 10px 2px #FDA929;
    background-color: #2b4a5e;
    color: white;
    padding: 10px 14px;
    border: 2px solid #FDA929;
    border-radius: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* .res-title — exact .ff-result-card-header (FIX-FLIP-POLISH-01 canonical) */
.res-title {
    font-family: 'alfarn', serif;
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 500;
    color: #FDA929;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: none;
    margin: 0 0 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ── METRIC BOX GRID ── */
.mbox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    width: 100%;
}

/* .mbox — exact .ff-main-chip (FIX-FLIP-RESULTS-08 + POLISH-05) */
.mbox {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    padding: 6px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.mbox::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(253,169,41,.35), 0 0 22px rgba(253,169,41,.15) inset;
}

/* .mbox-lbl — exact .ff-main-chip-label (POLISH-05) */
.mbox-lbl {
    font-size: clamp(8px, 0.75vw, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffa72a;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    line-height: 1.25;
    margin-bottom: 2px;
    display: block;
    text-align: center;
}

/* .mbox-val — .ff-main-chip-value (FIX-FLIP-RESULTS-08 + POLISH-05) */
.mbox-val {
    font-size: clamp(13px, 1.3vw, 17px);
    font-weight: 800;
    color: #ffffff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,.35);
}

.mbox-val.g { color: #6fd46d; }
.mbox-val.r { color: #ff7b6e; }

.mbox-sub {
    font-size: clamp(7px, 0.65vw, 9px);
    color: #7aafc6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── PAYMENT FLOW ── */
.pflow {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 12px 0 10px;
    width: 100%;
}

/* .pf-box — glass card, matches .mbox style */
.pf-box {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    padding: 8px 14px;
    text-align: center;
    flex: 1;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.pf-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(253,169,41,.35), 0 0 22px rgba(253,169,41,.15) inset;
}

/* .pf-lbl — .ff-main-chip-label */
.pf-lbl {
    font-size: clamp(8px, 0.75vw, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffa72a;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-bottom: 3px;
    line-height: 1.3;
}

.pf-val {
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 800;
    color: #ffffff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.pf-sub {
    font-size: clamp(7px, 0.65vw, 9px);
    color: #7aafc6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 3px;
}

.pf-arrow {
    color: rgba(255,167,42,0.4);
    font-size: 18px;
    flex-shrink: 0;
}

/* ── DEAL STACK ── */
.stack-title {
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffa72a;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin: 12px 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,167,42,0.15);
    width: 100%;
    text-align: left;
}

/* .srow — exact .ff-metric-row */
.srow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,167,42,0.10);
    font-size: 11px;
    width: 100%;
}

.srow:last-child { border-bottom: none; }

/* .srow .sl — exact .ff-metric-label */
.srow .sl {
    font-size: clamp(9px, 0.9vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffa72a;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* .srow .sv — exact .ff-metric-value */
.srow .sv {
    font-size: clamp(11px, 1.1vw, 13px);
    font-weight: 700;
    color: #ffffff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.srow.hi {
    margin-top: 6px;
    border-top: 1px solid rgba(255,167,42,0.3);
    border-bottom: none;
    padding-top: 6px;
}

.srow.hi .sl { color: #ffffff; font-weight: 700; }
.srow.hi .sv { color: #ffa72a; font-size: clamp(12px, 1.2vw, 15px); }

/* ── BADGE ── */
.badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    background: rgba(111,212,109,0.15);
    border: 1px solid rgba(111,212,109,0.4);
    color: #6fd46d;
}

.badge.yellow {
    background: rgba(255,214,84,0.12);
    border-color: rgba(255,214,84,0.4);
    color: #ffd654;
}

.badge.red {
    background: rgba(255,123,110,0.12);
    border-color: rgba(255,123,110,0.4);
    color: #ff7b6e;
}

/* ── COLOR HELPERS ── */
.c-green  { color: #6fd46d; }
.c-red    { color: #ff7b6e; }
.c-orange { color: #ffa72a; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .input-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .summary-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    #sec-existing-debt .cf-sec-body,
    #sec-buyer-seller .cf-sec-body {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .input-grid {
        grid-template-columns: 1fr;
    }
    .summary-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    #results {
        grid-template-columns: 1fr;
    }
    .mbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tabs .tab {
        padding: 8px 14px;
        font-size: 11px;
    }
}

/* ── OWNER FINANCE INPUT PANELS — centered, narrow, 2-col fields ── */
.of-panel-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.of-panel-row .sec {
    width: clamp(280px, 22vw, 380px);
    flex-shrink: 0;
}

#sec-of-spread .cf-sec-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}

/* ── OWNER FINANCE COMPUTED (READONLY) FIELDS ── */
.pill.pill--computed,
input.pill.pill--computed {
    opacity: 0.75;
    background: rgba(255,255,255,0.03);
    border-color: rgba(0,229,255,0.15);
    cursor: not-allowed;
}

.pill.pill--computed:hover,
input.pill.pill--computed:hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(0,229,255,0.15);
}

.pill.pill--computed:focus,
input.pill.pill--computed:focus {
    background: rgba(255,255,255,0.03);
    border-color: rgba(0,229,255,0.15);
    box-shadow: none;
}

/* ── MBOX GRID VARIANTS ── */
.mbox-grid.mbox-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ── BALLOON SPREAD HERO — glass card, stronger gold ring than regular mbox ── */
.mbox-hero {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    margin-bottom: 8px;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.mbox-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    box-shadow: 0 0 0 2px rgba(253,169,41,.50), 0 0 30px rgba(253,169,41,.20) inset;
}

.mbox-hero-lbl {
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.6);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-bottom: 4px;
}

.mbox-hero-val {
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 900;
    color: #ffffff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    line-height: 1.1;
}

.mbox-hero-val.g { color: #6fd46d; }
.mbox-hero-val.r { color: #ff7b6e; }

.mbox-hero-sub {
    font-size: clamp(8px, 0.7vw, 10px);
    color: #7aafc6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* ── OWNER FINANCE RESULTS: 3-column layout ── */
#results.of-results {
    grid-template-columns: 1fr 1.6fr 1fr;
}

/* ── FEATURE CHIP — medium hero between mbox and mbox-hero ── */
.mbox-feature {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    padding: 8px 14px;
    text-align: center;
    margin-bottom: 8px;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.06) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mbox-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(253,169,41,.35), 0 0 22px rgba(253,169,41,.15) inset;
}

.mbox-feature-lbl {
    font-size: clamp(8px, 0.75vw, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffa72a;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-bottom: 2px;
}

.mbox-feature-val {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 800;
    color: #ffffff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,.35);
}

.mbox-feature-val.g { color: #6fd46d; }
.mbox-feature-val.r { color: #ff7b6e; }

.mbox-feature-sub {
    font-size: clamp(7px, 0.65vw, 9px);
    color: #7aafc6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 3px;
}

/* ── CENTER SPLIT CARD (Monthly Payments | Cash at Close side-by-side) ── */
.res-card.of-center-card {
    padding: 0;
    overflow: hidden;
    align-items: stretch;
    flex-direction: row;
}

.of-section {
    flex: 1;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.of-divider {
    width: 1px;
    height: auto;
    align-self: stretch;
    background: rgba(255,167,42,0.25);
    flex-shrink: 0;
}

/* ── OF RESULTS: scoped size overrides to match fix-and-flip density ── */

/* Card title */
#results.of-results .res-title {
    font-size: clamp(10px, 1vw, 13px);
    letter-spacing: 0.6px;
    margin-bottom: 1px;
}

/* Feature chip: tighter padding + smaller value */
#results.of-results .mbox-feature {
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 8px;
}

#results.of-results .mbox-feature::before {
    border-radius: 8px;
}

#results.of-results .mbox-feature-lbl {
    font-size: clamp(7px, 0.68vw, 9px);
    margin-bottom: 1px;
}

#results.of-results .mbox-feature-val {
    font-size: clamp(13px, 1.3vw, 16px);
}

#results.of-results .mbox-feature-sub {
    font-size: clamp(6px, 0.6vw, 8px);
    margin-top: 1px;
}

/* Balloon spread hero: keep prominent but not oversized */
#results.of-results .mbox-hero {
    padding: 8px 10px;
    margin-bottom: 6px;
}

#results.of-results .mbox-hero-lbl {
    font-size: clamp(7px, 0.68vw, 9px);
    margin-bottom: 2px;
}

#results.of-results .mbox-hero-val {
    font-size: clamp(20px, 2.2vw, 28px);
}

#results.of-results .mbox-hero-sub {
    font-size: clamp(6px, 0.6vw, 8px);
    margin-top: 2px;
}

/* Row items: compact */
#results.of-results .srow {
    padding: 3px 0;
}

#results.of-results .srow .sl {
    font-size: clamp(8px, 0.8vw, 10px);
}

#results.of-results .srow .sv {
    font-size: clamp(9px, 0.85vw, 11px);
}