:root {
    --navy-900: #0e2350;
    --navy-800: #14306a;
    --navy-700: #1b3e86;
    --blue-600: #2050a4;
    --blue-500: #2a63c4;
    --gold-500: #fdb314;
    --gold-600: #f5a623;
    --gold-700: #d98f0a;
    --orange-500: #f06e20;
    --blue-100: #e8effa;
    --blue-50: #f4f7fb;
    --ink: #14306a;
    --muted: #5b6b89;
    --line: #dce5f2;
    --white: #ffffff;
    --shadow-sm: 0 1px 2px rgba(20, 48, 106, 0.06), 0 4px 14px rgba(20, 48, 106, 0.06);
    --shadow-md: 0 10px 40px rgba(14, 35, 80, 0.12);
    --shadow-lg: 0 24px 70px rgba(14, 35, 80, 0.22);
    --radius: 18px;
    --radius-sm: 12px;
    /* --maxw: 1180px; */
    --maxw: 1280px;
    --display: "Nunito-ExtraBold", "Nunito", system-ui, sans-serif;
    --body: "Nunito-Regular", "Nunito", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

h1,
h2,
h3,
h4 {
    font-family: var(--display);
    margin: 0;
    line-height: 1.06;
    letter-spacing: -0.01em;
    font-weight: 800;
}

p {
    margin: 0;
}

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

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: var(--body);
    cursor: pointer;
    border: none;
    background: none;
}

input,
select {
    font-family: var(--body);
    font-size: 16px;
}

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 22px;
}

.eyebrow {
    font-family: var(--body);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--gold-600);
}

.tabnum {
    font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.85rem 1.5rem;
    font-size: 0.98rem;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

    .btn:focus-visible {
        outline: 3px solid var(--gold-500);
        outline-offset: 2px;
    }

    .btn:disabled {
        background: var(--line);
        color: var(--muted);
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.7;
    }

        .btn:disabled:hover {
            transform: none;
            box-shadow: none;
        }

.btn-gold {
    background: linear-gradient(180deg, #ffc83d, var(--gold-500));
    color: var(--navy-900);
    box-shadow: 0 8px 22px rgba(253, 179, 20, 0.4);
}

    .btn-gold:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(253, 179, 20, 0.5);
    }

.btn-navy {
    background: var(--blue-600);
    color: #fff;
}

    .btn-navy:hover {
        background: var(--navy-700);
        transform: translateY(-2px);
    }

.btn-ghost {
    background: transparent;
    border: 1.5px solid var(--line);
    color: var(--ink);
}

    .btn-ghost:hover {
        border-color: var(--blue-600);
        color: var(--blue-600);
    }

.btn-block {
    width: 100%;
}

/* ---------- Seal logo ---------- */
.seal {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
}

.brand-seal {
    width: 120px;
    height: 58px;
    flex: 0 0 auto;
    display: block;
}

.seal-lg {
    width: 128px;
    height: 128px;
}

/* ---------- Top bar ---------- */
.topbar {
    background: var(--navy-900);
    color: #cdd9ef;
    font-size: 0.82rem;
}

    .topbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        height: 40px;
    }

    .topbar a {
        color: #dbe6fb;
        font-weight: 600;
    }

    .topbar .tb-left {
        display: flex;
        gap: 1.4rem;
        align-items: center;
    }

    .topbar .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #46d07f;
        box-shadow: 0 0 0 3px rgba(70, 208, 127, 0.2);
        display: inline-block;
        margin-right: 0.4rem;
    }

/* ---------- Nav ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
}

    .nav .container {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        height: 74px;
    }

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

    .brand .wm {
        display: flex;
        flex-direction: column;
        line-height: 1;
    }

        .brand .wm .corp {
            font-family: var(--display);
            font-weight: 800;
            font-size: 1.18rem;
            color: var(--navy-800);
        }

        .brand .wm .sub {
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--gold-600);
            margin-top: 3px;
        }

.nav-links {
    display: flex;
    gap: 0.2rem;
    margin-left: auto;
    align-items: center;
}

    .nav-links a {
        padding: 0.55rem 0.7rem;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--ink);
        border-radius: 8px;
    }

        .nav-links a.active {
            color: var(--blue-600);
        }

            .nav-links a.active::after {
                content: "";
                display: block;
                height: 3px;
                border-radius: 3px;
                background: var(--gold-500);
                margin-top: 5px;
            }

        .nav-links a.disabled {
            color: #9aa8c2;
            cursor: not-allowed;
            position: relative;
        }

            .nav-links a.disabled:hover::before {
                content: "Coming soon";
                position: absolute;
                left: 50%;
                top: 100%;
                transform: translateX(-50%);
                background: var(--navy-800);
                color: #fff;
                font-size: 0.68rem;
                padding: 3px 8px;
                border-radius: 6px;
                white-space: nowrap;
                font-weight: 600;
                margin-top: 6px;
            }

.nav-cta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-left: 0.6rem;
}

.nav-small {
    display: none;
}

.nav-phone {
    font-weight: 700;
    color: var(--navy-800);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hamburger {
    display: none;
    margin-left: auto;
    font-size: 1.6rem;
    color: var(--navy-800);
    background: none;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    background: radial-gradient( 1100px 500px at 12% -10%, rgba(253, 179, 20, 0.18), transparent 60% ), radial-gradient( 900px 600px at 100% 0%, rgba(42, 99, 196, 0.5), transparent 55% ), linear-gradient(165deg, var(--navy-800), var(--navy-900) 70%);
    color: #fff;
    overflow: hidden;
}

    .hero::after {
        content: "";
        position: absolute;
        right: -120px;
        bottom: -160px;
        width: 560px;
        height: 560px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='86' fill='none' stroke='%23ffffff' stroke-width='2'/><circle cx='100' cy='100' r='70' fill='none' stroke='%23ffffff' stroke-width='1'/></svg>") center/contain no-repeat;
        opacity: 0.05;
        pointer-events: none;
    }

.common-hero-layout .container {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    padding: 62px 22px 78px;
    align-items: center;
}

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

.hero-pill-wrap {
    position: relative;
    display: inline-flex;
    margin-bottom: 24px;
}

.banner-stamp {
    display: block;
    width: 120px;
    height: 120px;
    margin-bottom: 24px;
    transform: rotate(-8deg);
    transition: all 400ms ease-in-out;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
}

    .banner-stamp:hover {
        transform: rotate(-5deg) scale(1.06);
    }

.hero-badge-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

    .hero-badge-row .banner-stamp {
        margin-bottom: 0;
    }

.hero-corner-stamp {
    width: 170px;
    height: 170px;
}
/* .hero-pill-wrap {
  position: relative;
  display: grid;
  gap: 20px;
  margin-top: 40px;
 
}

.hero-stamp {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
} */

/* .hero-copy .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e8eefb;
  width: fit-content;
} */

.hero h1 {
    font-size: clamp(2.4rem, 4.6vw, 3.7rem);
    color: #fff;
    margin: 0.9rem 0 0.2rem;
}

    .hero h1 .accent {
        color: var(--gold-500);
    }

.hero-sub {
    color: #c4d2ef;
    font-size: 1.1rem;
    max-width: 30rem;
    margin-top: 1rem;
}

.trust-chips {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

    .trust-chips .chip {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        background: rgba(255, 255, 255, 0.94);
        color: var(--navy-800);
        font-weight: 700;
        font-size: 0.9rem;
        padding: 0.5rem 0.9rem;
        border-radius: 999px;
        box-shadow: var(--shadow-sm);
    }

.hero-stats {
    display: flex;
    gap: 1.8rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

    .hero-stats .s .n {
        font-family: var(--display);
        font-weight: 800;
        font-size: 1.8rem;
        background: linear-gradient( 95deg, #b07a12, #fdb314 35%, #ffe7b0 55%, #fdb314 75%, #c8920c );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .hero-stats .s .l {
        font-size: 0.82rem;
        color: #b9c8ea;
        font-weight: 500;
        margin-top: 2px;
    }

/* ---------- Calculator card ---------- */
.calc-card {
    background: #fff;
    color: var(--ink);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.calc-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 44px;
    align-items: center;
}

    .calc-split .calc-intro .lead {
        color: var(--muted);
        margin: 0.4rem 0 1.2rem;
    }

.calc-head {
    padding: 18px 22px 0;
}

/* ---------- Nearest-branch hero card (branch locator) ---------- */
.nearest-card .nb-map {
    position: relative;
    margin: 14px 22px 0;
    height: 190px;
    border-radius: 14px;
    overflow: hidden;
    background: #e9f0f9;
}

.nearest-card .nb-map-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}

.nearest-card .nb-body {
    padding: 16px 22px 22px;
}

.nearest-card .nb-badge {
    display: inline-block;
    background: var(--blue-50);
    color: var(--blue-600);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.74rem;
    font-weight: 700;
}

.nearest-card .nb-name {
    font-size: 1.06rem;
    color: var(--navy-800);
    margin: 8px 0 10px;
}

.nearest-card .nb-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.86rem;
    color: var(--muted);
    margin-bottom: 6px;
}

    .nearest-card .nb-row a {
        color: var(--blue-600);
        font-weight: 600;
    }

.nearest-card .nb-loading,
.nearest-card .nb-empty {
    font-size: 0.86rem;
    color: var(--muted);
    margin: 0;
}

.nearest-card .nb-cta {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

    .nearest-card .nb-cta .btn {
        flex: 1;
        text-align: center;
    }

@media (max-width: 520px) {
    .nearest-card .nb-cta {
        flex-direction: column;
    }
}

.calc-head h3 {
    font-size: 1.18rem;
    color: var(--navy-800);
}

.calc-head p {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 3px;
}

.calc-tabs {
    display: flex;
    gap: 6px;
    padding: 14px 22px 0;
}

    .calc-tabs button {
        flex: 1;
        padding: 0.7rem 0.4rem;
        border-radius: 10px 10px 0 0;
        font-weight: 700;
        font-size: 0.86rem;
        color: var(--muted);
        background: var(--blue-50);
        border: 1px solid transparent;
        border-bottom: none;
        transition: 0.18s;
    }

        .calc-tabs button.on {
            color: var(--navy-800);
            background: #fff;
            border-color: var(--line);
            box-shadow: 0 -3px 0 var(--gold-500) inset;
        }

.calc-body {
    border-top: 1px solid var(--line);
    padding: 20px 22px 22px;
}

.field {
    margin-bottom: 14px;
}

    .field label {
        display: block;
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--navy-800);
        margin-bottom: 6px;
    }

    .field .inp {
        display: flex;
        align-items: center;
        border: 1.5px solid var(--line);
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
        transition: border-color 0.15s;
    }

        .field .inp:focus-within {
            border-color: var(--blue-600);
        }

        .field .inp .pre {
            padding: 0 0.7rem;
            color: var(--muted);
            font-weight: 700;
            background: var(--blue-50);
            align-self: stretch;
            display: flex;
            align-items: center;
        }

        .field .inp input {
            border: none;
            outline: none;
            padding: 0.8rem 0.8rem;
            width: 100%;
            min-width: 0;
            background: transparent;
            font-weight: 600;
        }

    .field select {
        width: 100%;
        padding: 0.8rem 0.8rem;
        border: 1.5px solid var(--line);
        border-radius: 12px;
        background: #fff;
        font-weight: 600;
        color: var(--ink);
    }

        .field select:focus {
            outline: none;
            border-color: var(--blue-600);
        }

.calc-row {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 12px;
}

.result {
    margin-top: 6px;
    background: linear-gradient(180deg, #fff7e6, #fff);
    border: 1.5px dashed var(--gold-500);
    border-radius: 14px;
    padding: 16px;
}

    .result .rl {
        font-size: 0.8rem;
        color: var(--muted);
        font-weight: 600;
    }

    .result .rv {
        font-family: var(--display);
        font-weight: 800;
        font-size: 2.05rem;
        color: var(--navy-800);
        line-height: 1.05;
        margin-top: 2px;
    }

    .result .rmeta {
        font-size: 0.8rem;
        color: var(--muted);
        margin-top: 6px;
    }

.howto {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--muted);
    background: var(--blue-50);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    margin-top: 12px;
}

    .howto b {
        color: var(--navy-800);
    }

.calc-cta {
    margin-top: 14px;
    display: flex;
    gap: 10px;
}

.fineprint {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 10px;
}

/* ---------- Section scaffolding ---------- */
.section {
    padding: 88px 0;
}

    .section.tint {
        background: var(--blue-50);
    }

    .section.dark {
        background: radial-gradient( 800px 400px at 80% 0%, rgba(42, 99, 196, 0.4), transparent 60% ), linear-gradient(160deg, var(--navy-800), var(--navy-900));
        color: #fff;
    }

.sec-head {
    max-width: 42rem;
    margin-bottom: 38px;
}

    .sec-head.center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .sec-head h2 {
        font-size: clamp(1.9rem, 3.4vw, 2.7rem);
        color: var(--navy-800);
    }

.section.dark .sec-head h2 {
    color: #fff;
}

.sec-head p {
    color: var(--muted);
    font-size: 1.05rem;
    margin-top: 0.7rem;
}

.section.dark .sec-head p {
    color: #c4d2ef;
}

/* ---------- AI estimator (highlight) ---------- */
.ai-wrap {
    position: relative;
    background: radial-gradient( 700px 360px at 85% 10%, rgba(253, 179, 20, 0.22), transparent 60% ), linear-gradient(150deg, var(--navy-700), var(--navy-900));
    border-radius: 26px;
    color: #fff;
    padding: 6px;
    box-shadow: var(--shadow-lg);
}

.ai-glow {
    border-radius: 22px;
    background: linear-gradient( 150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) );
    border: 1px solid rgba(253, 179, 20, 0.35);
    padding: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 38px;
    align-items: center;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: linear-gradient(90deg, var(--gold-500), #ffd45e);
    color: var(--navy-900);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(253, 179, 20, 0.18);
}

.ai-glow h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: #fff;
    margin: 0.9rem 0 0.4rem;
}

    .ai-glow h2 .accent {
        color: var(--gold-500);
    }

.ai-glow .lead {
    color: #cdd9f3;
    max-width: 26rem;
}

.ai-steps {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
    display: grid;
    gap: 0.55rem;
}

    .ai-steps li {
        display: flex;
        gap: 0.6rem;
        align-items: flex-start;
        font-size: 0.92rem;
        color: #dde7fb;
    }

    .ai-steps .num {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--gold-500);
        color: var(--navy-900);
        font-weight: 800;
        font-size: 0.78rem;
        display: grid;
        place-items: center;
        margin-top: 1px;
    }

.ai-panel {
    background: #fff;
    color: var(--ink);
    border-radius: 18px;
    padding: 22px;
}

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 2px dashed var(--line);
    border-radius: 14px;
    padding: 30px 18px;
    text-align: center;
    transition: 0.18s;
    cursor: pointer;
    background: var(--blue-50);
}

    .dropzone:hover,
    .dropzone.drag {
        border-color: var(--gold-500);
        background: #fffaf0;
    }

    .dropzone .ico {
        font-size: 2rem;
        line-height: 1;
    }

    .dropzone b {
        color: var(--navy-800);
    }

    .dropzone span {
        font-size: 0.82rem;
        color: var(--muted);
    }

/* gold accent in AI estimator heading */
.calc-head h3 .gold-accent {
    color: var(--gold-700);
}

/* AI estimator header: heading full-width, then tags on the left, image on the right */
.ai-title {
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    line-height: 1.18;
    color: var(--navy-800);
    margin: 0;
}

.ai-head-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 24px;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* AI estimator patent / loan-estimate visual */
.ai-patent {
    display: block;
    width: 100%;
    height: auto;
    margin-left: auto;
}

/* AI estimator feature tags */
.ai-tags {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 12px 0;
    margin: 20px 0 0;
}

.ai-tag {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 9px;
    padding: 0 16px;
    padding-left: 0px;
    /* border-left: 1px solid var(--line); */
}

    .ai-tag:first-child {
        padding-left: 0;
        border-left: none;
    }

/* On wide desktop the hero is two-column, so this card sits in a narrow
   right column - stack the header there so it never crowds. */
@media (min-width: 1025px) {
    .ai-head-grid {
        grid-template-columns: 1fr;
    }

    .ai-tags {
        /* flex-direction: column; */
        align-items: stretch;
        gap: 12px;
    }

    .ai-tag {
        padding: 0;
        border-left: none;
    }

    .ai-patent {
        margin: 6px auto 0;
        max-width: 340px;
    }
}

@media (max-width: 700px) {
    .ai-tag {
        padding: 0;
        border-left: none;
    }
}

@media (max-width: 580px) {
    .ai-head-grid {
        grid-template-columns: 1fr;
    }
}

/* Small phones: stack tags again so they don't cram */
@media (max-width: 480px) {
    .ai-head-grid {
        margin-bottom: 8px;
    }

    .ai-tags {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ai-tag {
        padding: 0;
        border-left: none;
    }
}

.ai-tag-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

    .ai-tag-ico svg {
        width: 18px;
        height: 18px;
    }

    .ai-tag-ico.t-img {
        background: rgba(124, 92, 255, 0.12);
        color: #7c5cff;
    }

    .ai-tag-ico.t-ai {
        background: rgba(22, 163, 74, 0.12);
        color: #16a34a;
    }

    .ai-tag-ico.t-val {
        background: rgba(253, 179, 20, 0.16);
        color: var(--gold-700);
    }

.ai-tag b {
    display: block;
    font-size: 0.78rem;
    line-height: 1.15;
    color: var(--navy-800);
}

.ai-tag > div span {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
}

.preview {
    display: none;
    margin-top: 14px;
}

    .preview.show {
        display: block;
    }

    .preview img {
        width: 100%;
        max-height: 230px;
        object-fit: cover;
        border-radius: 12px;
        border: 1px solid var(--line);
    }

.ai-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.ai-status {
    margin-top: 14px;
    display: none;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--navy-800);
    font-size: 0.92rem;
}

    .ai-status.show {
        display: flex;
    }

.ai-error {
    margin-top: 14px;
    display: none;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 600;
    color: #a13c1e;
    background: #fdecea;
    border: 1.5px solid #f3b7ab;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.92rem;
}

    .ai-error.show {
        display: flex;
    }

.ai-error-icon {
    flex: none;
    line-height: 1;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid var(--blue-100);
    border-top-color: var(--blue-600);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.ai-result {
    display: none;
    margin-top: 16px;
    border: 1.5px dashed var(--gold-500);
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(180deg, #fff7e6, #fff);
}

    .ai-result.show {
        display: block;
    }

    .ai-result .rv {
        font-family: var(--display);
        font-weight: 800;
        font-size: 2rem;
        color: var(--navy-800);
    }

    .ai-result table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        font-size: 1.45rem;
    }

    .ai-result td {
        padding: 5px 0;
        border-top: 1px solid var(--line);
        color: var(--muted);
    }

        .ai-result td:last-child {
            text-align: right;
            color: var(--navy-800);
            font-weight: 600;
        }

/* gram dropdown above the karat table */
.ai-grams {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

    .ai-grams label {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--navy-800);
        white-space: nowrap;
    }

.ai-grams-inp {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s;
    max-width: fit-content;
}

    .ai-grams-inp:focus-within {
        border-color: var(--blue-600);
    }

    .ai-grams-inp input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        padding: 0.5rem 0.6rem;
        font: inherit;
        font-size: 0.9rem;
        color: var(--ink);
    }

    .ai-grams-inp span {
        align-self: stretch;
        display: flex;
        align-items: center;
        padding: 0 0.7rem;
        background: var(--blue-50);
        color: var(--muted);
        font-weight: 700;
    }

/* per-karat comparison table */
.ai-table-wrap {
    margin-top: 12px;
    overflow-x: auto;
}

.ai-karat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.98rem;
}

    .ai-karat-table th,
    .ai-karat-table td {
        padding: 10px 12px;
        border-top: 1px solid var(--line);
        text-align: right;
        color: var(--navy-800);
        font-weight: 600;
    }

    .ai-karat-table thead th {
        border-top: none;
        color: var(--muted);
        font-weight: 700;
    }

    .ai-karat-table th:first-child,
    .ai-karat-table td:first-child {
        text-align: left;
        color: var(--muted);
        font-weight: 600;
    }

    .ai-karat-table .on {
        background: rgba(253, 179, 20, 0.14);
    }

    .ai-karat-table thead th.on {
        color: var(--gold-700);
    }

.ai-box {
    max-width: 820px;
    max-height: 92vh;
    overflow-y: auto;
}

@media (max-width: 560px) {
    .modal {
        padding: 12px;
    }

        .modal .box {
            padding: 20px 18px;
            max-height: 94vh;
        }

    .ai-box {
        padding: 20px 18px;
        max-height: 94vh;
    }

    .ai-grams {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .ai-karat-table {
        font-size: 0.76rem;
    }

        .ai-karat-table th,
        .ai-karat-table td {
            padding: 6px 6px;
        }

    .preview img {
        max-height: 180px;
    }
}

.privacy {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 10px;
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
}

/* ---------- Feature grid ---------- */
.grid {
    display: grid;
    gap: 18px;
}

.g3 {
    grid-template-columns: repeat(3, 1fr);
}

.g4 {
    grid-template-columns: repeat(4, 1fr);
}

.g2 {
    grid-template-columns: repeat(2, 1fr);
}

.feature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .feature:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .feature .fi {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: var(--blue-100);
        color: var(--blue-600);
        margin-bottom: 14px;
        font-size: 1.6rem;
    }

    .feature h3 {
        font-size: 1.12rem;
        color: var(--navy-800);
    }

    .feature p {
        color: var(--muted);
        font-size: 0.92rem;
        margin-top: 0.45rem;
    }

/* ---------- Process / safety steps ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.step {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 18px;
    position: relative;
}

    .step .sn {
        font-family: var(--display);
        font-weight: 800;
        color: var(--gold-500);
        font-size: 0.9rem;
    }

    .step h3 {
        color: #fff;
        font-size: 1rem;
        margin: 0.5rem 0 0.35rem;
    }

    .step h4 {
        color: #fff;
        font-size: 1rem;
        margin: 0.5rem 0 0.35rem;
    }

    .step p {
        color: #c4d2ef;
        font-size: 0.85rem;
    }

/* ---------- Fees table ---------- */
.table-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

table.fees {
    width: 100%;
    border-collapse: collapse;
}

    table.fees th,
    table.fees td {
        text-align: left;
        padding: 16px 20px;
        border-bottom: 1px solid var(--line);
        font-size: 0.95rem;
    }

    table.fees th {
        background: var(--navy-800);
        color: #fff;
        font-family: var(--display);
        font-weight: 700;
    }

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

    table.fees td:first-child {
        font-weight: 600;
        color: var(--navy-800);
        width: 42%;
    }

    table.fees td:last-child {
        color: var(--muted);
    }

/* ---------- Eligibility ---------- */
.elig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.elig-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-sm);
}

    .elig-card h3 {
        font-size: 1.25rem;
        color: var(--navy-800);
        margin-bottom: 14px;
    }

.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 11px;
}

    .checklist li {
        display: flex;
        gap: 0.6rem;
        align-items: flex-start;
        color: var(--muted);
        font-size: 0.95rem;
    }

    .checklist .tick {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #e6f7ee;
        color: #1f9d57;
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: 0.8rem;
        margin-top: 1px;
    }

/* ---------- FAQ ---------- */
.faq {
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
}

.faq-q {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 18px 20px;
    font-weight: 700;
    color: var(--navy-800);
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
}

    .faq-q::-webkit-details-marker {
        display: none;
    }
    .faq-q h3 {
        margin: 0;
        font-weight: 700;
        font-size: 1rem;
        color: inherit;
    }
    .faq-q .ic {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--blue-100);
        color: var(--blue-600);
        display: grid;
        place-items: center;
        font-weight: 800;
        transition: transform 0.2s;
    }

/* .open is the JS-enhanced state (buildFAQList-rendered lists); [open] is the
   native <details> state used by server-rendered FAQ markup, which expands
   without any JS at all. */
.faq-item.open .faq-q .ic,
.faq-item[open] .faq-q .ic {
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
    color: var(--muted);
}

.faq-item[open] .faq-a {
    max-height: none;
}

.faq-a div {
    padding: 0 20px 18px;
    font-size: 0.95rem;
}

/* ---------- Testimonials ---------- */
.tcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

    .tcard .stars {
        color: var(--gold-500);
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .tcard p {
        color: var(--navy-800);
        font-size: 1rem;
        margin: 0.7rem 0 1.1rem;
        font-weight: 500;
    }

    .tcard .who {
        display: flex;
        align-items: center;
        gap: 0.7rem;
    }

    .tcard .av {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--blue-600);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 800;
        font-family: var(--display);
    }

    .tcard .who b {
        display: block;
        color: var(--navy-800);
        font-size: 0.95rem;
    }

    .tcard .who span {
        font-size: 0.82rem;
        color: var(--muted);
    }

/* ---------- Blogs ---------- */
.bcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .bcard:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .bcard .thumb {
        height: 150px;
        background: linear-gradient(135deg, var(--blue-600), var(--navy-800));
        position: relative;
    }

        .bcard .thumb.g2t {
            background: linear-gradient(135deg, var(--gold-600), var(--orange-500));
        }

        .bcard .thumb.g3t {
            background: linear-gradient(135deg, var(--blue-500), #6b8fd6);
        }

        .bcard .thumb span {
            position: absolute;
            left: 14px;
            bottom: 12px;
            color: #fff;
            font-weight: 700;
            font-size: 0.75rem;
            background: rgba(0, 0, 0, 0.18);
            padding: 0.25rem 0.6rem;
            border-radius: 999px;
        }

    .bcard .bbody {
        padding: 18px;
    }

        .bcard .bbody h3 {
            font-size: 1.05rem;
            color: var(--navy-800);
        }

        .bcard .bbody p {
            color: var(--muted);
            font-size: 0.88rem;
            margin: 0.5rem 0 0.8rem;
        }

    .bcard .read {
        color: var(--blue-600);
        font-weight: 700;
        font-size: 0.85rem;
    }

/* ---------- Lead + support ---------- */
.lead-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    align-items: stretch;
}

.lead-form {
    background: #fff;
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow-md);
}

    .lead-form h3 {
        font-size: 1.5rem;
        color: var(--navy-800);
    }

    .lead-form p.s {
        color: var(--muted);
        margin: 0.4rem 0 18px;
        font-size: 0.95rem;
    }

.form-row {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.consent {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.82rem;
    color: var(--muted);
    margin: 6px 0 16px;
}

    .consent input {
        margin-top: 3px;
    }

.support {
    color: #fff;
}

    .support .card {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 14px;
        padding: 18px 20px;
        margin-bottom: 14px;
        display: flex;
        gap: 0.9rem;
        align-items: center;
    }

        .support .card .si {
            width: 42px;
            height: 42px;
            border-radius: 11px;
            background: var(--gold-500);
            color: var(--navy-900);
            display: grid;
            place-items: center;
            flex: 0 0 auto;
        }

        .support .card .sl {
            font-size: 0.78rem;
            color: #b9c8ea;
            font-weight: 600;
        }

        .support .card > div:not(.si) {
            min-width: 0;
            width: 100%;
        }

        .support .card .sv {
            font-family: var(--display);
            font-weight: 800;
            font-size: 1.15rem;
            color: #fff;
            overflow-wrap: break-word;
        }

.form-success {
    display: none;
    text-align: center;
    padding: 30px 10px;
}

    .form-success.show {
        display: block;
    }

    .form-success .big {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #e6f7ee;
        color: #1f9d57;
        display: grid;
        place-items: center;
        font-size: 2rem;
        margin: 0 auto 14px;
    }

/* ---------- Footer ---------- */
.footer {
    background: var(--navy-900);
    color: #aebbd6;
    padding: 54px 0 26px;
    font-size: 0.9rem;
}

    .footer .top {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer h4 {
        color: #fff;
        font-size: 0.95rem;
        margin-bottom: 14px;
        font-family: var(--display);
    }

    .footer a {
        display: block;
        padding: 5px 0;
        color: #aebbd6;
    }

        .footer a:hover {
            color: #fff;
        }

    .footer .brand .wm .corp {
        color: #fff;
    }

    .footer .legal {
        padding-top: 22px;
        font-size: 0.78rem;
        color: #7e8db0;
        line-height: 1.7;
    }

/* ---------- Modal ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .modal.show {
        display: flex;
    }

    .modal .ov {
        position: absolute;
        inset: 0;
        background: rgba(14, 35, 80, 0.6);
        backdrop-filter: blur(3px);
    }

    .modal .box {
        position: relative;
        background: #fff;
        border-radius: 20px;
        width: 100%;
        max-width: 800px;
        max-height: 90vh;
        overflow-y: auto;
        padding: 30px;
        box-shadow: var(--shadow-lg);
        animation: pop 0.25s ease;
    }

@keyframes pop {
    from {
        transform: translateY(14px) scale(0.98);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.modal .x {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--navy-800);
    font-size: 1.2rem;
    display: grid;
    place-items: center;
}

.modal h3 {
    font-size: 1.45rem;
    color: var(--navy-800);
}

.modal p.s {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0.4rem 0 16px;
}

/* ---------- Mobile sticky CTA ---------- */
.mobicta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 10px 14px;
    gap: 10px;
    box-shadow: 0 -6px 20px rgba(14, 35, 80, 0.1);
}

    .mobicta .btn {
        flex: 1;
    }

/* ---------- Reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .reveal.in {
        opacity: 1;
        transform: none;
        /* transform: translateY(0px); */
    }

/* ---------- Luxury layer ---------- */
.foil {
    background: linear-gradient( 95deg, #b07a12 0%, #fdb314 22%, #ffe7b0 46%, #fdb314 64%, #c8920c 100% );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gyan {
    width: 30px;
    height: 38px;
    flex: 0 0 auto;
}

.card-seal {
    position: absolute;
    top: -30px;
    left: -26px;
    width: 86px;
    height: 86px;
    transform: rotate(-9deg);
    filter: drop-shadow(0 10px 18px rgba(14, 35, 80, 0.32));
    z-index: 4;
}

/* refined eyebrow flourish */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

    .eyebrow::before {
        content: "";
        width: 26px;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--gold-500));
        border-radius: 2px;
    }

.sec-head.center .eyebrow {
    justify-content: center;
}

    .sec-head.center .eyebrow::after {
        content: "";
        width: 26px;
        height: 2px;
        background: linear-gradient(90deg, var(--gold-500), transparent);
        border-radius: 2px;
    }

/* diagonal sheen on hero */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 118deg, transparent 34%, rgba(255, 255, 255, 0.05) 47%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.05) 53%, transparent 66% );
}

/* gold hairline under nav */
.nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient( 90deg, transparent, rgba(253, 179, 20, 0.55), transparent );
}

.nav {
    position: sticky;
}

/* premium calculator card */
.calc-card {
    border-top: 3px solid var(--gold-500);
}

/* button gloss */
.btn-gold {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 22px rgba(253, 179, 20, 0.42);
}

    .btn-gold:hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 30px rgba(253, 179, 20, 0.52);
    }

/* shimmering AI badge */
.ai-badge {
    position: relative;
    overflow: hidden;
}

    .ai-badge::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient( 105deg, transparent, rgba(255, 255, 255, 0.75), transparent );
        transform: skewX(-18deg);
        animation: shimmer 3.4s ease-in-out infinite;
    }

@keyframes shimmer {
    0% {
        left: -60%;
    }

    55% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}

/* card hover warmth */
.feature:hover,
.bcard:hover {
    border-color: rgba(253, 179, 20, 0.55);
}

.ai-wrap {
    box-shadow: 0 30px 80px rgba(14, 35, 80, 0.3), inset 0 0 0 1px rgba(253, 179, 20, 0.12);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .common-hero-layout .container {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .ai-glow {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .calc-split {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .g4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps {
        grid-template-columns: repeat(3, 1fr);
    }

    .lead-grid {
        /* grid-template-columns: 1fr; */
        grid-template-columns: minmax(0, 1fr);
    }

    .footer .top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .nav-large,
    .nav-links,
    .nav-phone {
        display: none;
    }

    .nav-small {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 6px;
    }

    .hamburger {
        display: block;
    }

    .nav-links.open {
        display: flex;
        position: absolute;
        top: 74px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 10px 16px 16px;
        gap: 2px;
        box-shadow: var(--shadow-md);
    }

        .nav-links.open a {
            padding: 0.8rem 0.4rem;
            border-bottom: 1px solid var(--blue-50);
        }

            .nav-links.open a.active::after {
                display: none;
            }

    .g3,
    .g2,
    .g4,
    .elig-grid {
        grid-template-columns: 1fr;
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .calc-row,
    .form-row {
        /* grid-template-columns: 1fr; */
        grid-template-columns: minmax(0, 1fr);
    }

    .card-seal {
        width: 62px;
        top: -20px;
        left: -12px;
    }

    .topbar {
        font-size: 0.74rem;
    }

        .topbar .container {
            flex-direction: column;
            height: auto;
            gap: 0.3rem;
            padding-top: 6px;
            padding-bottom: 6px;
            text-align: center;
        }

        .topbar .tb-left {
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.35rem 0.9rem;
        }

        .topbar .tb-right {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.35rem 0.9rem;
        }

        .topbar .tb-left .hide-sm {
            display: none;
        }

    .footer .top {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 56px 0;
    }

    .mobicta {
        display: flex;
    }

    body {
        padding-bottom: 66px;
    }

    .lead-form {
        padding: 22px 18px;
    }

    /* ADD THIS: Ensures that if your tabs are wider than the screen, they scroll horizontally instead of breaking the layout */
    .calc-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Wide tables (interest slabs/fees, eligibility "at a glance") scroll
     sideways on small screens instead of being clipped by the card. */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 580px) {
    .steps {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---------- Gold rate page ---------- */
.crumbbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.breadcrumb {
    font-size: 0.82rem;
    color: var(--muted);
    padding: 12px 0;
}

    .breadcrumb a {
        color: var(--blue-600);
        font-weight: 600;
    }

    .breadcrumb .sep {
        margin: 0 0.45rem;
        color: #9aa8c2;
    }

.rate-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    /* padding: 38px 0 60px; */
    background: radial-gradient( 900px 460px at 12% -10%, rgba(253, 179, 20, 0.16), transparent 60% ), linear-gradient(165deg, var(--navy-800), var(--navy-900) 78%);
}

    .rate-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 118deg, transparent 34%, rgba(255, 255, 255, 0.05) 47%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 53%, transparent 66% );
    }

    .rate-hero .container {
        position: relative;
    }

    .rate-hero .eyebrow {
        color: var(--gold-600);
    }

    .rate-hero h1 {
        font-size: clamp(2rem, 3.8vw, 3rem);
        color: #fff;
        margin: 0.4rem 0 0.35rem;
    }

    .rate-hero .sub {
        color: #c4d2ef;
        max-width: 42rem;
    }

.citybar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 18px 0 2px;
}

    .citybar label {
        font-size: 0.85rem;
        color: #c4d2ef;
        font-weight: 600;
    }

    .citybar select {
        padding: 0.6rem 0.9rem;
        border-radius: 10px;
        border: 1.5px solid rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-weight: 700;
        min-width: 180px;
    }

        .citybar select option {
            color: #14306a;
        }

.answerbox {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(253, 179, 20, 0.32);
    border-left: 4px solid var(--gold-500);
    border-radius: 12px;
    padding: 15px 18px;
    margin-top: 18px;
    color: #eaf0fc;
    font-size: 1.02rem;
    max-width: 62rem;
    line-height: 1.6;
}

    .answerbox b {
        color: #fff;
    }

.rate-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 22px;
    max-width: 620px;
}

.rate-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: var(--shadow-md);
    border-top: 3px solid var(--gold-500);
}

    .rate-card .rk {
        font-weight: 700;
        color: var(--navy-800);
        font-size: 0.92rem;
    }

        .rate-card .rk span {
            color: var(--muted);
            font-weight: 500;
            font-size: 0.8rem;
        }

    .rate-card .rp {
        font-family: var(--display);
        font-weight: 800;
        font-size: 2.3rem;
        color: var(--navy-800);
        line-height: 1.05;
        margin: 5px 0 4px;
    }

    .rate-card .rc {
        font-size: 0.84rem;
        font-weight: 700;
    }

.rc.up {
    color: #1f9d57;
}

.rc.down {
    color: #d9483b;
}

.updated {
    font-size: 0.78rem;
    color: #aebbd6;
    margin-top: 12px;
}

.hero-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.chart-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.chart-legend {
    display: flex;
    gap: 18px;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 6px;
}

    .chart-legend .k {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-weight: 600;
    }

    .chart-legend .sw {
        width: 16px;
        height: 4px;
        border-radius: 2px;
        display: inline-block;
    }

.minicalc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: end;
}

.city-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

    .city-links a {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 0.7rem 0.9rem;
        font-weight: 600;
        color: var(--navy-800);
        font-size: 0.9rem;
        transition: 0.15s;
    }

        .city-links a:hover {
            border-color: var(--gold-500);
            color: var(--blue-600);
            box-shadow: var(--shadow-sm);
        }

.note {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 12px;
}

@media (max-width: 760px) {
    .minicalc {
        grid-template-columns: 1fr;
    }

    .city-links {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- shared sub-page bits ---------- */
.crumbbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.breadcrumb {
    font-size: 0.82rem;
    color: var(--muted);
    padding: 12px 0;
}

    .breadcrumb a {
        color: var(--blue-600);
        font-weight: 600;
    }

    .breadcrumb .sep {
        margin: 0 0.45rem;
        color: #9aa8c2;
    }

.loc-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient( 900px 460px at 12% -10%, rgba(253, 179, 20, 0.16), transparent 60% ), linear-gradient(165deg, var(--navy-800), var(--navy-900) 78%);
}

    .loc-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 118deg, transparent 34%, rgba(255, 255, 255, 0.05) 47%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 53%, transparent 66% );
    }

    .loc-hero .container {
        position: relative;
    }

    .loc-hero .eyebrow {
        color: var(--gold-600);
    }

    .loc-hero h1 {
        font-size: clamp(2rem, 3.8vw, 2.9rem);
        color: #fff;
        margin: 0.4rem 0 0.35rem;
    }

    .loc-hero .sub {
        color: #c4d2ef;
        max-width: 44rem;
    }

.citybar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 18px 0 2px;
}

    .citybar label {
        font-size: 0.85rem;
        color: #c4d2ef;
        font-weight: 600;
    }

    .citybar select {
        padding: 0.6rem 0.9rem;
        border-radius: 10px;
        border: 1.5px solid rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-weight: 700;
        min-width: 180px;
    }

        .citybar select option {
            color: #14306a;
        }

.answerbox {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(253, 179, 20, 0.32);
    border-left: 4px solid var(--gold-500);
    border-radius: 12px;
    padding: 15px 18px;
    margin-top: 18px;
    color: #eaf0fc;
    font-size: 1.02rem;
    max-width: 62rem;
    line-height: 1.6;
}

    .answerbox b {
        color: #fff;
    }

.city-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

    .city-links a {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 0.7rem 0.9rem;
        font-weight: 600;
        color: var(--navy-800);
        font-size: 0.9rem;
        transition: 0.15s;
    }

        .city-links a:hover {
            border-color: var(--gold-500);
            color: var(--blue-600);
            box-shadow: var(--shadow-sm);
        }

.note {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 12px;
}

/* ---------- gold story ---------- */
.goldstory {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 26px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--gold-500);
}

    .goldstory h2 {
        font-size: clamp(1.5rem, 2.6vw, 2rem);
        color: var(--navy-800);
    }

    .goldstory p {
        color: var(--muted);
        margin-top: 0.7rem;
        font-size: 1rem;
    }

    .goldstory .ratebox {
        background: var(--blue-50);
        border-radius: 14px;
        padding: 20px;
    }

        .goldstory .ratebox .l {
            font-size: 0.8rem;
            color: var(--muted);
            font-weight: 600;
        }

        .goldstory .ratebox .v {
            font-family: var(--display);
            font-weight: 800;
            font-size: 1.9rem;
            color: var(--navy-800);
            line-height: 1.1;
        }

        .goldstory .ratebox a {
            display: inline-block;
            margin-top: 10px;
            color: var(--blue-600);
            font-weight: 700;
            font-size: 0.9rem;
        }

/* ---------- locator grid ---------- */
.locator-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: start;
}

.branch-list {
    display: grid;
    gap: 16px;
}

.branch-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, border-color 0.2s;
    scroll-margin-top: 90px;
}

    .branch-card.flash {
        border-color: var(--gold-500);
        box-shadow: 0 0 0 3px rgba(253, 179, 20, 0.25), var(--shadow-md);
    }

.bc-head {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    margin-bottom: 12px;
}

.pinno {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gold-500);
    color: var(--navy-900);
    font-family: var(--display);
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    margin-top: 2px;
}

.bc-head h3 {
    font-size: 1.12rem;
    color: var(--navy-800);
}

.bc-head .loc {
    font-size: 0.8rem;
    color: var(--gold-700);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.bc-row {
    display: flex;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.92rem;
    margin-bottom: 6px;
}

    .bc-row a {
        color: var(--blue-600);
        font-weight: 600;
    }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

    .chips span {
        background: var(--blue-50);
        color: var(--navy-800);
        font-weight: 600;
        font-size: 0.76rem;
        padding: 0.3rem 0.65rem;
        border-radius: 999px;
        border: 1px solid var(--line);
    }

.bc-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

    .bc-cta .btn {
        padding: 0.6rem 1.1rem;
        font-size: 0.9rem;
    }

.btn-link {
    background: none;
    color: var(--blue-600);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.4rem;
}

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

/* ---------- map panel ---------- */
.mappanel {
    position: sticky;
    top: 90px;
    height: 560px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    background: #eaf0f9;
}

    .mappanel .mapbg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .mappanel .gmap {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: none;
    }

    .mappanel.has-gmap .mapbg,
    .mappanel.has-gmap #pins {
        display: none;
    }

    .mappanel.has-gmap .gmap {
        display: block;
    }

.citytag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: var(--shadow-sm);
    z-index: 3;
}

    .citytag b {
        display: block;
        color: var(--navy-800);
        font-family: var(--display);
        font-size: 1.05rem;
    }

    .citytag span {
        font-size: 0.78rem;
        color: var(--muted);
    }

.pin {
    position: absolute;
    transform: translate(-50%, -100%);
    z-index: 2;
    cursor: pointer;
    background: none;
    filter: drop-shadow(0 4px 6px rgba(14, 35, 80, 0.35));
}

    .pin .dot {
        width: 30px;
        height: 30px;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        background: linear-gradient(180deg, #ffc83d, var(--gold-500));
        display: grid;
        place-items: center;
        border: 2px solid #fff;
    }

        .pin .dot b {
            transform: rotate(45deg);
            color: var(--navy-900);
            font-family: var(--display);
            font-weight: 800;
            font-size: 0.8rem;
        }

    .pin.active .dot,
    .pin:hover .dot {
        background: linear-gradient(180deg, #3a78e0, var(--blue-600));
    }

        .pin.active .dot b,
        .pin:hover .dot b {
            color: #fff;
        }

    .pin.bounce {
        animation: pinbounce 0.6s ease;
    }

@keyframes pinbounce {
    0%, 100% {
        transform: translate(-50%, -100%);
    }

    30% {
        transform: translate(-50%, -128%);
    }

    60% {
        transform: translate(-50%, -108%);
    }
}

@media (max-width: 980px) {
    .goldstory {
        grid-template-columns: 1fr;
    }

    .locator-grid {
        grid-template-columns: 1fr;
    }

    .mappanel {
        position: relative;
        top: 0;
        height: 340px;
        order: -1;
    }
}

@media (max-width: 760px) {
    .city-links {
        grid-template-columns: 1fr 1fr;
    }
}

.crumbbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.breadcrumb {
    font-size: 0.82rem;
    color: var(--muted);
    padding: 12px 0;
}

    .breadcrumb a {
        color: var(--blue-600);
        font-weight: 600;
    }

    .breadcrumb .sep {
        margin: 0 0.45rem;
        color: #9aa8c2;
    }

.sub-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient( 900px 460px at 12% -10%, rgba(253, 179, 20, 0.16), transparent 60% ), linear-gradient(165deg, var(--navy-800), var(--navy-900) 78%);
}

    .sub-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 118deg, transparent 34%, rgba(255, 255, 255, 0.05) 47%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 53%, transparent 66% );
    }

    .sub-hero .container {
        position: relative;
    }

    .sub-hero .eyebrow {
        color: var(--gold-600);
    }

    .sub-hero h1 {
        font-size: clamp(2rem, 3.8vw, 3rem);
        color: #fff;
        margin: 0.4rem 0 0.35rem;
    }

    .sub-hero .sub {
        color: #c4d2ef;
        max-width: 44rem;
    }

.answerbox {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(253, 179, 20, 0.32);
    border-left: 4px solid var(--gold-500);
    border-radius: 12px;
    padding: 15px 18px;
    margin-top: 20px;
    color: #eaf0fc;
    font-size: 1.02rem;
    max-width: 64rem;
    line-height: 1.6;
}

    .answerbox b {
        color: #fff;
    }

.note {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 12px;
}

/* EMI calculator */
.calc2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
}

.emi-out {
    background: linear-gradient(180deg, #fff7e6, #fff);
    border: 1.5px dashed var(--gold-500);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .emi-out .lbl {
        font-size: 0.82rem;
        color: var(--muted);
        font-weight: 600;
    }

    .emi-out .emi {
        font-family: var(--display);
        font-weight: 800;
        font-size: 2.5rem;
        color: var(--navy-800);
        line-height: 1.05;
        margin: 2px 0 14px;
    }

.emi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

    .emi-grid .b {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 12px;
    }

        .emi-grid .b .v {
            font-family: var(--display);
            font-weight: 800;
            color: var(--navy-800);
            font-size: 1.15rem;
        }

.splitbar {
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    background: var(--line);
}

    .splitbar .p {
        background: var(--blue-600);
    }

    .splitbar .i {
        background: var(--gold-500);
    }

.splitlegend {
    display: flex;
    gap: 18px;
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 8px;
    font-weight: 600;
}

    .splitlegend .sw {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        display: inline-block;
        margin-right: 5px;
        vertical-align: -1px;
    }

.rangerow {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 4px;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--blue-600);
}

@media (max-width: 880px) {
    .calc2 {
        grid-template-columns: 1fr;
    }
}

.crumbbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.breadcrumb {
    font-size: 0.82rem;
    color: var(--muted);
    padding: 12px 0;
}

    .breadcrumb a {
        color: var(--blue-600);
        font-weight: 600;
    }

    .breadcrumb .sep {
        margin: 0 0.45rem;
        color: #9aa8c2;
    }

.sub-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient( 900px 460px at 12% -10%, rgba(253, 179, 20, 0.16), transparent 60% ), linear-gradient(165deg, var(--navy-800), var(--navy-900) 78%);
}

    .sub-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 118deg, transparent 34%, rgba(255, 255, 255, 0.05) 47%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 53%, transparent 66% );
    }

    .sub-hero .container {
        position: relative;
    }

    .sub-hero .eyebrow {
        color: var(--gold-600);
    }

    .sub-hero h1 {
        font-size: clamp(2rem, 3.8vw, 3rem);
        color: #fff;
        margin: 0.4rem 0 0.35rem;
    }

    .sub-hero .sub {
        color: #c4d2ef;
        max-width: 46rem;
    }

.answerbox {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(253, 179, 20, 0.32);
    border-left: 4px solid var(--gold-500);
    border-radius: 12px;
    padding: 15px 18px;
    margin-top: 20px;
    color: #eaf0fc;
    font-size: 1.02rem;
    max-width: 64rem;
    line-height: 1.6;
}

    .answerbox b {
        color: #fff;
    }

.note {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 12px;
}

/* vertical stepper */
.stepper {
    max-width: 760px;
}

    .stepper .stp {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 18px;
        padding-bottom: 26px;
        position: relative;
    }

        .stepper .stp:not(:last-child)::before {
            content: "";
            position: absolute;
            left: 21px;
            top: 48px;
            bottom: -2px;
            width: 2px;
            background: var(--line);
        }

    .stepper .n {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--navy-800);
        color: var(--gold-500);
        font-family: var(--display);
        font-weight: 800;
        display: grid;
        place-items: center;
        font-size: 1.1rem;
        z-index: 1;
        box-shadow: 0 0 0 4px #fff;
    }

    .stepper .c h3 {
        font-size: 1.12rem;
        color: var(--navy-800);
        margin-top: 8px;
    }

    .stepper .c p {
        color: var(--muted);
        margin-top: 0.35rem;
        font-size: 0.95rem;
    }

.doc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 880px) {
    .doc-grid {
        grid-template-columns: 1fr;
    }
}

.crumbbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.breadcrumb {
    font-size: 0.82rem;
    color: var(--muted);
    padding: 12px 0;
}

    .breadcrumb a {
        color: var(--blue-600);
        font-weight: 600;
    }

    .breadcrumb .sep {
        margin: 0 0.45rem;
        color: #9aa8c2;
    }

.sub-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient( 900px 460px at 12% -10%, rgba(253, 179, 20, 0.16), transparent 60% ), linear-gradient(165deg, var(--navy-800), var(--navy-900) 78%);
}

    .sub-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 118deg, transparent 34%, rgba(255, 255, 255, 0.05) 47%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 53%, transparent 66% );
    }

    .sub-hero .container {
        position: relative;
    }

    .sub-hero .eyebrow {
        color: var(--gold-600);
    }

    .sub-hero h1 {
        font-size: clamp(2rem, 3.8vw, 3rem);
        color: #fff;
        margin: 0.4rem 0 0.35rem;
    }

    .sub-hero .sub {
        color: #c4d2ef;
        max-width: 46rem;
    }

.answerbox {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(253, 179, 20, 0.32);
    border-left: 4px solid var(--gold-500);
    border-radius: 12px;
    padding: 15px 18px;
    margin-top: 20px;
    color: #eaf0fc;
    font-size: 1.02rem;
    max-width: 64rem;
    line-height: 1.6;
}

    .answerbox b {
        color: #fff;
    }

.note {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 12px;
}

/* vertical stepper */
.stepper {
    max-width: 760px;
}

    .stepper .stp {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 18px;
        padding-bottom: 26px;
        position: relative;
    }

        .stepper .stp:not(:last-child)::before {
            content: "";
            position: absolute;
            left: 21px;
            top: 48px;
            bottom: -2px;
            width: 2px;
            background: var(--line);
        }

    .stepper .n {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--navy-800);
        color: var(--gold-500);
        font-family: var(--display);
        font-weight: 800;
        display: grid;
        place-items: center;
        font-size: 1.1rem;
        z-index: 1;
        box-shadow: 0 0 0 4px #fff;
    }

    .stepper .c h3 {
        font-size: 1.12rem;
        color: var(--navy-800);
        margin-top: 8px;
    }

    .stepper .c p {
        color: var(--muted);
        margin-top: 0.35rem;
        font-size: 0.95rem;
    }

.doc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 880px) {
    .doc-grid {
        grid-template-columns: 1fr;
    }
}

#app {
    min-height: 40vh;
}

.view-fade {
    animation: vfade 0.35s ease;
}

@keyframes vfade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .view-fade {
        animation: none;
    }
}


.chip-image {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    width: 100%
}

.chips-container {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 0;
}

.chip-image img {
    width: 120px;
    height: 120px;
    /* border-radius: 50%; */
}


.no-margin {
    margin: 0;
}

/* =====================================================================
   Indic script adjustments (hi, mr, gu, ta, te, kn)

   The type scale above is tuned for Latin. Devanagari, Gujarati, Tamil,
   Telugu and Kannada stack matras above and below the base glyph, so those
   metrics collide:

     - h1-h4 run at line-height 1.06, which makes wrapped headings overlap
       and lets a heading's top matras touch the .eyebrow sitting above it;
     - .eyebrow adds 0.16em tracking, which visually splits conjuncts, and
       text-transform: uppercase does nothing for these scripts;
     - negative letter-spacing on headings crushes the glyphs together;
     - .eyebrow is a single-line inline-flex, so a translation longer than
       its English source overflows instead of wrapping.

   Scoped to non-English pages so the English design is untouched.
   ===================================================================== */
html:not([lang="en"]) h1,
html:not([lang="en"]) h2,
html:not([lang="en"]) h3,
html:not([lang="en"]) h4 {
    line-height: 1.32;
    letter-spacing: 0;
}

html:not([lang="en"]) .eyebrow {
    letter-spacing: 0.04em;
    text-transform: none;
    line-height: 1.75;
    flex-wrap: wrap;
    max-width: 100%;
}

    /* h1-h4 are margin:0 globally, so the gap has to come from the heading. */
    html:not([lang="en"]) .eyebrow + h1,
    html:not([lang="en"]) .eyebrow + h2,
    html:not([lang="en"]) .eyebrow + h3 {
        margin-top: 0.5rem;
    }

    /* The flourish rules keep their 26px arms on one line; let them shrink so a
   wrapped eyebrow does not push its own text off the container. */
    html:not([lang="en"]) .eyebrow::before,
    html:not([lang="en"]) .sec-head.center .eyebrow::after {
        flex: 0 0 auto;
    }

/* Body copy needs the extra leading too, or matras clip at the descender. */
html:not([lang="en"]) p,
html:not([lang="en"]) .faq-q,
html:not([lang="en"]) .btn,
html:not([lang="en"]) li {
    line-height: 1.7;
}

/* Pills, chips and buttons are height-constrained for Latin x-height. */
html:not([lang="en"]) .btn {
    height: auto;
    min-height: 2.75rem;
    white-space: normal;
}