/* =====================================================================
   GoRealo - Blog hero + author trust layer (production component styles)
   Ported from prototype BlogHero.css. Built ON TOP of the existing
   .lp-hero (GoRealo-CMS-LoanProductPage.css). Brand tokens are global;
   prototype-only rules (.proto-*, .gr-pdf-*) are intentionally omitted.
   ===================================================================== */

/* ---------- Design tokens ----------
   Ported from the prototype :root. The --grh-* names are prototype-specific,
   so defining them here cannot collide with the global GoRealo brand tokens.
   Without this block every var(--grh-*) below resolves to an invalid value and
   the entire author-trust layer renders unstyled on all three templates. */
:root {
    --grh-blue:        #0046E5;
    --grh-blue-dark:   #002E80;
    --grh-ink:         #0f172a;
    --grh-muted:       #64748b;
    --grh-line:        #e6ebf3;
    --grh-bg:          #f6f8fb;
    --grh-green:       #00a63e;
    --grh-green-cta:   #00c853;
    --grh-fact-bg:     #e9f7ef;
    --grh-fact-fg:     #146c43;
    --grh-radius:      16px;
    --grh-radius-sm:   10px;
    --grh-shadow:      0 10px 30px rgba(2, 8, 23, .08);
    --grh-shadow-lg:   0 24px 60px rgba(2, 8, 23, .18);
    --grh-on-blue:     rgba(255, 255, 255, .92);
    --grh-on-blue-dim: rgba(255, 255, 255, .66);
}

/* ---------- Self-contained hero shell ----------
   BlogPage and SingleLoanProductPage do NOT load GoRealo-CMS-LoanProductPage.css,
   where the base .lp-hero (blue block, grid texture, H1, subtitle) lives. Redefine
   the pieces the BlogHero partial actually uses so the hero renders correctly on
   all three templates. On BlogPageLoanProduct that file also loads, but this sheet
   loads after it, so these rules win and the hero stays identical across the family. */
.gr-hero {
    position: relative;
    background: linear-gradient(145deg, var(--grh-blue) 0%, #0035B0 40%, var(--grh-blue-dark) 100%);
    padding: 40px 0 36px;
    overflow: hidden;
}
.gr-hero .lp-hero__grid-pattern {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 64px 64px;
}
.gr-hero .lp-hero__content { position: relative; z-index: 2; }
.gr-hero .lp-hero__title {
    color: #fff; font-weight: 700; margin: 0 0 10px;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.2;
}
.gr-hero .lp-hero__subtitle {
    color: rgba(255, 255, 255, .88); max-width: none; margin: 0 0 4px;
    font-size: clamp(.95rem, 1.3vw, 1.05rem); line-height: 1.6;
}
/* blogIntro is a RichText field, so it renders its own <p> tags inside the
   subtitle wrapper (a <div>, not a <p>, to keep the HTML valid). Make those
   inner paragraphs inherit the light hero color and drop their default margin. */
.gr-hero .lp-hero__subtitle p { margin: 0; color: inherit; }
.gr-hero .lp-hero__subtitle p + p { margin-top: .5em; }

/* ---------- Hero top row: breadcrumb (left) + disclosures (right) ---------- */
.gr-hero__toprow {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.1rem;
}
/* Breadcrumb: the shared GoRealoCMS/Breadcrumbs partial emits Bootstrap
   .breadcrumb markup (not .gr-breadcrumb), so style that instead and force
   left alignment + on-blue contrast inside the hero. */
.gr-hero__crumbs .breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: flex-start; gap: .15rem;
    margin: 0; padding: 0; list-style: none; font-size: .82rem;
}
.gr-hero__crumbs .breadcrumb-item { display: inline-flex; align-items: center; }
.gr-hero__crumbs .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A"; padding: 0 .45rem 0 .1rem;
    color: var(--grh-on-blue-dim); font-size: .95em;
}
.gr-hero__crumbs .breadcrumb-item a { color: var(--grh-on-blue-dim); text-decoration: none; }
.gr-hero__crumbs .breadcrumb-item a:hover { color: #fff; text-decoration: underline; }
.gr-hero__crumbs .breadcrumb-item.active,
.gr-hero__crumbs .breadcrumb-item.active span { color: var(--grh-on-blue); font-weight: 600; }

.gr-hero__disclosures { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.gr-disc-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: .82rem; color: var(--grh-on-blue); font-family: inherit;
    display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
}
.gr-disc-link i { opacity: .85; }
.gr-disc-link:hover { text-decoration: underline; }
.gr-disc-sep { color: var(--grh-on-blue-dim); }

/* ---------- Hero meta row ---------- */
.gr-hero__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.15rem;
    list-style: none; margin: 1rem 0 1.15rem; padding: 0;
    font-size: .85rem; color: var(--grh-on-blue);
}
.gr-hero__meta li { display: inline-flex; align-items: center; gap: .4rem; }
.gr-hero__meta i { color: var(--grh-on-blue-dim); }
.gr-hero__meta a { color: var(--grh-on-blue); text-decoration: none; }
.gr-hero__meta a:hover { text-decoration: underline; }

/* ---------- Author trust strip (the signature element) ---------- */
.gr-authorstrip { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .85rem; margin-top: .35rem; }
.gr-avatars { display: inline-flex; flex: 0 0 auto; }
.gr-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .92); margin-left: -12px; background: #dbe4f5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2); position: relative;
}
.gr-avatar:first-child { margin-left: 0; }
/* First author's avatar stays on top of the overlap cascade */
.gr-avatars > :nth-child(1) { z-index: 6; }
.gr-avatars > :nth-child(2) { z-index: 5; }
.gr-avatars > :nth-child(3) { z-index: 4; }
.gr-avatars > :nth-child(4) { z-index: 3; }
.gr-avatars > :nth-child(5) { z-index: 2; }
/* Initials avatar - rendered when an author has no image */
.gr-avatar--initials {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; line-height: 1;
    background: linear-gradient(135deg, #3b6ef5, #0035b0);
}
.gr-avatar.gr-avatar--initials { font-size: .85rem; }
.gr-authcard__photo.gr-avatar--initials { font-size: 1.15rem; }

.gr-authorstrip__lines { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--grh-on-blue); }
.gr-role { color: var(--grh-on-blue-dim); }
.gr-author {
    color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, .38);
}
.gr-author:hover, .gr-author:focus-visible { color: #fff; border-bottom-color: #fff; }
.gr-comma { color: var(--grh-on-blue-dim); }
.gr-factchecked {
    display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle;
    background: var(--grh-fact-bg); color: var(--grh-fact-fg);
    font-size: .74rem; font-weight: 700; padding: .25rem .6rem; border-radius: 50rem; margin-left: .3rem;
}

.gr-author-item__av { display: none; }
.gr-authorstrip__toggle { display: none; }
/* Mobile: drop the cluster; collapse to the primary author + a "+N others" toggle (Bankrate-style) */
@media (max-width: 600px) {
    .gr-avatars { display: none; }
    .gr-authorstrip { align-items: flex-start; }
    .gr-authorstrip__lines { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; width: 100%; }
    .gr-author-item { display: flex; align-items: center; gap: 10px; }
    .gr-author-item__av { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid rgba(255, 255, 255, .9); background: #dbe4f5; color: #fff; font-weight: 700; font-size: .74rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
    .gr-comma { display: none; }
    .gr-factchecked { margin: 2px 0 0; }
    .gr-authorstrip__toggle { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 0; color: var(--grh-on-blue-dim); font: inherit; font-size: .82rem; cursor: pointer; flex: 0 0 auto; }
    .gr-authorstrip__toggle i { font-size: 1.15rem; line-height: 1; transition: transform .15s; }
    .gr-authorstrip--open .gr-authorstrip__toggle i { transform: rotate(180deg); }
    .gr-authorstrip--open .gr-authorstrip__count { display: none; }
    .gr-authorstrip--collapsible:not(.gr-authorstrip--open) .gr-author-item:not(:first-of-type),
    .gr-authorstrip--collapsible:not(.gr-authorstrip--open) .gr-factchecked { display: none; }
}

/* ---------- Rich author popover (Bootstrap popover, restyled) ---------- */
.gr-author-popover.popover {
    max-width: min(92vw, 344px); border: 0; border-radius: 14px;
    box-shadow: var(--grh-shadow-lg); background: #fff; font-family: inherit;
}
.gr-author-popover .popover-arrow::before { border-bottom-color: rgba(2, 8, 23, .06); }
.gr-author-popover .popover-arrow::after  { border-bottom-color: #fff; }
.gr-author-popover .popover-body { padding: 0; color: inherit; }

.gr-authcard { padding: 16px 16px 14px; }
.gr-authcard__head { display: flex; gap: 12px; align-items: center; }
.gr-authcard__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #dbe4f5; }
.gr-authcard__name { font-weight: 700; font-size: 1rem; color: var(--grh-ink); line-height: 1.2; }
.gr-authcard__role { font-size: .82rem; color: var(--grh-muted); margin-top: 2px; }
.gr-authcard__expertise { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grh-line); }
.gr-authcard__exlabel {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--grh-ink);
}
.gr-authcard__exlabel i { color: var(--grh-blue); font-size: .95rem; }
/* Credentials line = licenseNumber (rich text; may contain a <p>) */
.gr-authcard__cred { display: flex; align-items: center; gap: .45rem; margin-top: 10px; font-size: .82rem; font-weight: 600; color: var(--grh-ink); }
.gr-authcard__cred i { color: var(--grh-blue); font-size: 1rem; }
.gr-authcard__cred p { display: inline; margin: 0; }
/* Expertise = authorExpertise rich text (list or short paragraphs) */
.gr-authcard__extext { margin-top: 8px; font-size: .84rem; color: #475569; line-height: 1.5; }
.gr-authcard__extext ul { margin: 0; padding-left: 1.05rem; }
.gr-authcard__extext li { margin-bottom: 2px; }
.gr-authcard__extext p { margin: 0 0 .35rem; }
.gr-authcard__extext p:last-child, .gr-authcard__extext ul:last-child { margin-bottom: 0; }
.gr-authcard__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grh-line);
}
.gr-authcard__more { font-size: .82rem; font-weight: 700; color: var(--grh-blue); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.gr-authcard__more:hover { text-decoration: underline; }
.gr-authcard__social { display: inline-flex; gap: 6px; }
.gr-authcard__social a {
    width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--grh-bg); color: var(--grh-muted); text-decoration: none; transition: background .15s, color .15s;
}
.gr-authcard__social a:hover { background: var(--grh-blue); color: #fff; }

/* Extra bottom room in the hero so the floating rate card overlaps cleanly
   (and gives all three heroes more breathing space below the author strip) */
.gr-hero.lp-hero { padding-bottom: 60px; }

/* ---------- SLP white "Rate Snapshot" block (below the hero) ---------- */
.gr-rate {
    background: #fff; border: 1px solid var(--grh-line); border-radius: var(--grh-radius);
    box-shadow: var(--grh-shadow); padding: 24px 28px; margin-top: -40px; position: relative; z-index: 5;
}
.gr-rate__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gr-rate__headline { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.gr-rate__chip {
    display: inline-flex; align-items: center; gap: .35rem; background: #E6EFFF; color: var(--grh-blue-dark);
    font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 50rem;
}
.gr-rate__title { font-size: 1.15rem; font-weight: 700; color: var(--grh-ink); margin: 0; }
.gr-rate__asof { display: flex; align-items: center; gap: .65rem; font-size: .8rem; color: var(--grh-muted); }
.gr-live { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--grh-green); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.gr-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grh-green-cta); animation: gr-pulse 2s infinite; }
@keyframes gr-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 200, 83, .45); }
    70%  { box-shadow: 0 0 0 8px rgba(0, 200, 83, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0); }
}

.gr-rate__figures { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0; }
.gr-fig { padding: 4px 20px; }
.gr-fig:first-child { padding-left: 0; }
.gr-fig + .gr-fig { border-left: 1px solid var(--grh-line); }
.gr-fig__value { font-size: 2.1rem; font-weight: 800; color: var(--grh-ink); line-height: 1; letter-spacing: -.02em; }
.gr-fig--primary .gr-fig__value { color: var(--grh-blue); }
.gr-fig__unit { font-size: 1.05rem; font-weight: 700; margin-left: 1px; }
.gr-fig__unit--pre { margin-left: 0; margin-right: 1px; }
.gr-fig__label { font-size: .78rem; color: var(--grh-muted); margin-top: 8px; line-height: 1.3; }

.gr-rate__kpis {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0 0 20px;
    padding: 16px 0 0; border-top: 1px solid var(--grh-line); font-size: .85rem; color: #334155;
}
.gr-rate__kpis li { display: inline-flex; align-items: center; gap: .4rem; }
.gr-rate__kpis i { color: var(--grh-green); font-weight: 700; }

.gr-rate__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.gr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font-weight: 700; font-size: .95rem; padding: .7rem 1.4rem; border-radius: 12px;
    text-decoration: none; border: 1.5px solid transparent; cursor: pointer; line-height: 1;
    transition: background .15s, border-color .15s, color .15s; font-family: inherit;
}
.gr-btn--primary { background: var(--grh-green-cta); color: #06331b; }
.gr-btn--primary:hover { background: #00b34a; color: #06331b; }
.gr-btn--ghost { background: #fff; color: var(--grh-blue); border-color: #c9d6f0; }
.gr-btn--ghost:hover { background: #f2f6ff; border-color: var(--grh-blue); }

.gr-rate__trust { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--grh-muted); margin: 16px 0 0; }
.gr-rate__trust i { color: var(--grh-blue); }
.gr-rate__trust abbr { text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; }

/* ---------- Modals (Advertiser Disclosure + GoRealo Guarantee) ---------- */
.gr-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--grh-shadow-lg); }
.gr-modal .modal-header {
    background: linear-gradient(135deg, var(--grh-blue) 0%, var(--grh-blue-dark) 100%);
    color: #fff; border-bottom: 0; padding: 1.1rem 1.4rem;
}
.gr-modal__title { font-size: 1.25rem; font-weight: 700; margin: 0; display: inline-flex; align-items: center; gap: .5rem; color: #fff; }
.gr-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .9; }
.gr-modal__body { padding: 1.4rem; color: #334155; font-size: .92rem; line-height: 1.6; }
.gr-modal__body p { margin: 0 0 .9rem; }
.gr-modal__lead { font-size: 1.02rem; font-weight: 600; color: var(--grh-ink); }
.gr-modal__subhead { font-size: 1rem; font-weight: 700; color: var(--grh-ink); margin: 1.2rem 0 .5rem; }
.gr-promise { list-style: none; margin: .4rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.gr-promise li { display: flex; gap: .8rem; align-items: flex-start; }
.gr-promise > li > i {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: #E6EFFF; color: var(--grh-blue);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.gr-promise strong { color: var(--grh-ink); }
.gr-modal__footer { border-top: 1px solid var(--grh-line); padding: .85rem 1.4rem; display: flex; align-items: center; justify-content: center; text-align: center; }
.gr-modal__foot-note { font-size: .82rem; color: var(--grh-muted); display: inline-flex; align-items: center; gap: .4rem; }
.gr-modal__foot-note i { color: var(--grh-blue); }

/* ---------- "Meet the experts" / About the Author(s) section ---------- */
.gr-experts { background: var(--grh-bg); padding: 48px 0 56px; }
.gr-experts__head { margin-bottom: 22px; }
.gr-experts__title { font-size: 1.6rem; font-weight: 700; color: var(--grh-ink); margin: 0; letter-spacing: -.01em; }
.gr-experts__sub { font-size: .95rem; color: var(--grh-muted); margin: 6px 0 0; }
/* Uniform, equal-height expert cards in a responsive grid */
.gr-experts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; align-items: stretch; }
.gr-experts__side { display: contents; }   /* editor/reviewer cards join the grid directly */

.gr-expert { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--grh-line); border-radius: var(--grh-radius); box-shadow: var(--grh-shadow); padding: 22px 24px; }
/* Identity header: photo + role/name/designation, vertically centered */
.gr-expert__id { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--grh-line); }
.gr-expert__photo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #dbe4f5; }
.gr-expert__photo.gr-avatar--initials { font-size: 1.2rem; }
.gr-expert__idtext { min-width: 0; }
.gr-expert__role { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 50rem; }
.gr-expert__role--author { background: #E6EFFF; color: var(--grh-blue-dark); }
.gr-expert__role--editor { background: #e6f7f0; color: #0f766e; }
.gr-expert__role--reviewer { background: #f1eafe; color: #6d28d9; }
.gr-expert__name { font-size: 1.1rem; font-weight: 700; color: var(--grh-ink); margin: 6px 0 0; }
.gr-expert__desig { font-size: .88rem; color: var(--grh-blue); font-weight: 600; margin-top: 2px; }
/* Detail rows: full width below the header */
.gr-expert__cred { display: flex; align-items: center; gap: .4rem; margin-top: 14px; font-size: .85rem; font-weight: 600; color: var(--grh-ink); }
.gr-expert__cred i { color: var(--grh-blue); font-size: 1rem; }
.gr-expert__cred p { display: inline; margin: 0; }
.gr-expert__expertise { margin-top: 14px; font-size: .85rem; color: #475569; }
.gr-expert__exlabel { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--grh-ink); margin-bottom: 6px; }
.gr-expert__expertise ul { margin: 0; padding-left: 1.05rem; }
.gr-expert__expertise li { margin-bottom: 3px; }
/* Foot pinned to the bottom so every card's link row lines up */
.gr-expert__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--grh-line); flex-wrap: wrap; }
.gr-expert__profile { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 700; color: var(--grh-blue); text-decoration: none; }
.gr-expert__profile:hover { text-decoration: underline; }
.gr-expert__social { display: inline-flex; gap: 8px; }
.gr-expert__social a { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--grh-bg); color: var(--grh-muted); text-decoration: none; transition: background .15s, color .15s; }
.gr-expert__social a:hover { background: var(--grh-blue); color: #fff; }

/* Author-only horizontal strip: single contributor, staging-style full-width card */
.gr-expert--strip { flex-direction: row; align-items: flex-start; gap: 28px; padding: 26px 30px; }
.gr-expert--strip .gr-expert__photo { width: 104px; height: 104px; }
.gr-expert--strip .gr-expert__photo.gr-avatar--initials { font-size: 2rem; }
.gr-expert__main { flex: 1 1 auto; min-width: 0; }
.gr-expert--strip .gr-expert__name { font-size: 1.4rem; margin: 8px 0 0; }
.gr-expert--strip .gr-expert__desig { font-size: 1rem; margin-top: 3px; }
.gr-expert--strip .gr-expert__cred { margin-top: 12px; }
.gr-expert--strip .gr-expert__expertise { margin-top: 8px; }
.gr-expert--strip .gr-expert__exlabel { display: inline; margin-right: .4rem; }
.gr-expert--strip .gr-expert__expertise ul { display: inline; padding: 0; margin: 0; list-style: none; }
.gr-expert--strip .gr-expert__expertise li { display: inline; color: #475569; }
.gr-expert--strip .gr-expert__expertise li:not(:last-child)::after { content: "\2022"; margin: 0 .5rem; color: #cbd5e1; }
.gr-expert__btn { display: inline-flex; align-items: center; gap: .5rem; margin-top: 16px; background: var(--grh-blue); color: #fff; font-weight: 700; font-size: .9rem; padding: .6rem 1.15rem; border-radius: 10px; text-decoration: none; transition: background .15s; }
.gr-expert__btn:hover { background: var(--grh-blue-dark); color: #fff; }
.gr-expert__contact { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 28px; }
.gr-expert__contact-item + .gr-expert__contact-item { margin-top: 14px; }
.gr-expert__contact-label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--grh-muted); }
.gr-expert__contact-value { display: block; margin-top: 3px; font-size: .92rem; color: var(--grh-ink); }
.gr-expert__contact-value a { color: var(--grh-blue); text-decoration: none; }
@media (max-width: 780px) {
    .gr-expert--strip { flex-direction: column; align-items: stretch; }
    .gr-expert--strip .gr-expert__contact { border-top: 1px solid var(--grh-line); padding-top: 18px; margin-top: 4px; }
}
@media (max-width: 640px) { .gr-experts__grid { grid-template-columns: 1fr; } }

/* ---------- Quality floor: focus, responsive, reduced motion ---------- */
.gr-author:focus-visible, .gr-disc-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
.gr-btn:focus-visible, .gr-authcard__more:focus-visible, .gr-authcard__social a:focus-visible { outline: 2px solid var(--grh-blue); outline-offset: 2px; }

@media (max-width: 768px) {
    .gr-hero__toprow { flex-direction: column; align-items: flex-start; gap: .55rem; }
    .gr-rate { padding: 20px 18px; margin-top: -24px; }
    .gr-rate__head { flex-direction: column; }
    .gr-rate__figures { grid-template-columns: 1fr; }
    .gr-fig { padding: 14px 0; }
    .gr-fig:first-child { padding-top: 0; }
    .gr-fig + .gr-fig { border-left: 0; border-top: 1px solid var(--grh-line); }
    .gr-rate__actions .gr-btn { flex: 1 1 auto; }
}

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

/* ============================================================
   v2 REDESIGN - author trust panel + split disclosure/guarantee
   Overrides the v1 rules above via source order. Only the author
   strip and the disclosure/guarantee placement change; the rest
   of the hero is identical to v1.
   ============================================================ */

/* The author strip becomes a distinct glass "trust panel" card */
.gr-authorstrip {
    display: flex; flex-direction: column; align-items: stretch;
    flex-wrap: nowrap; gap: 14px;
    margin-top: 1.4rem; padding: 16px 18px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 14px 34px rgba(2, 8, 23, .20);
}

/* Fact-checked + GoRealo Guarantee = paired trust chips, right after the reviewer */
.gr-trust-badges { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-guarantee-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255, 255, 255, .10); color: var(--grh-on-blue);
    border: 1px solid rgba(255, 255, 255, .28); font-family: inherit;
    font-size: .74rem; font-weight: 700; padding: .25rem .6rem; border-radius: 50rem;
    cursor: pointer; text-decoration: none;
}
.gr-guarantee-chip:hover { background: rgba(255, 255, 255, .18); }
.gr-guarantee-chip i { opacity: .9; }

/* Advertiser Disclosure = quiet "fine print" link, top-right of the hero */
.gr-disc-link--top { font-size: .78rem; color: var(--grh-on-blue-dim); }
.gr-disc-link--top:hover { color: #fff; }

/* Desktop: hide the overlapping cluster; show one avatar per contributor as a
   segmented credential row (role label over name, no dividers) */
@media (min-width: 601px) {
    .gr-authorstrip .gr-avatars { display: none; }
    .gr-authorstrip__lines {
        display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
        margin: 0; font-size: .9rem; line-height: 1.25;
    }
    .gr-comma { display: none; }
    .gr-author-item { display: inline-flex; align-items: center; gap: 10px; }
    .gr-author-item__av {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
        border: 2px solid rgba(255, 255, 255, .85); background: #dbe4f5;
        color: #fff; font-weight: 700; font-size: .76rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    }
    .gr-author-item__txt { display: inline-flex; flex-direction: column; line-height: 1.2; }
    .gr-role { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--grh-on-blue-dim); }
    .gr-author { white-space: nowrap; border-bottom: 0; }
    .gr-author:hover, .gr-author:focus-visible { border-bottom: 0; text-decoration: underline; }
    .gr-authorstrip__toggle { display: none !important; }
    /* Fact-checked + Guarantee chips sit inline right after the reviewer */
    .gr-factchecked, .gr-trust-badges { align-self: center; }
}

/* Mobile: collapse the trust chips along with the extra contributors -- only when the
   strip is actually collapsible (2+ contributors, so the "+N others" toggle exists).
   Single-contributor posts have no toggle, so they must never hide these. */
@media (max-width: 600px) {
    .gr-authorstrip--collapsible:not(.gr-authorstrip--open) .gr-trust-badges { display: none; }
}

/* ===================================================================
   SingleLoanProductPage: align the .slp-container body blocks (On This
   Page, Payment Examples, etc.) to the SAME width as the Rate Snapshot,
   which sits in a Bootstrap .container. The higher-specificity selector
   (.slp-page .slp-container) beats the base .slp-container from the SLP
   stylesheet regardless of load order, and mirrors Bootstrap 5 .container
   max-widths so every block lines up at each breakpoint.
   =================================================================== */
.slp-page .slp-container { max-width: 1320px; padding-left: 12px; padding-right: 12px; }
@media (max-width: 1399.98px) { .slp-page .slp-container { max-width: 1140px; } }
@media (max-width: 1199.98px) { .slp-page .slp-container { max-width: 960px; } }
@media (max-width: 991.98px)  { .slp-page .slp-container { max-width: 720px; } }
@media (max-width: 767.98px)  { .slp-page .slp-container { max-width: 540px; } }
@media (max-width: 575.98px)  { .slp-page .slp-container { max-width: 100%; } }