/* BBC Asesores: buyer-focused visual layer. No third-party UI dependencies. */
.coverage-preview-link { display: block; margin: 0 0 18px; font-size: 13px; color: #1d6088; text-decoration: underline; text-underline-offset: 4px; }

.hero-tide {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.tide-emblem {
    position: absolute;
    width: clamp(400px, 49vw, 680px);
    aspect-ratio: 200 / 191;
    left: max(-100px, calc((100% - 1350px) / 2));
    top: 75px;
    opacity: .12;
}

/* Filter the parent so the moving contour is not clipped by the logo mask. */
.tide-emblem-ink {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #28648c 12%, #579fc0 48%, #204e74 82%);
    -webkit-mask: url('../img/logo-header.png') center / contain no-repeat;
    mask: url('../img/logo-header.png') center / contain no-repeat;
}

#logo-water-effects { position: absolute; }

.tide-waves {
    position: absolute;
    left: -5%;
    bottom: -3px;
    width: 110%;
    height: 185px;
    overflow: visible;
}

.tide-wave-back { fill: #9cbfd2; stroke: #ffffff; stroke-width: 1; opacity: .13; }
.tide-wave-front { fill: #76a9c3; stroke: #aecedd; stroke-width: .8; opacity: .08; }
.tide-ready .tide-emblem { filter: url('#logo-water-ripple'); }
.tide-ready .tide-wave-back { animation: water-tide 22s ease-in-out infinite alternate; }
.tide-ready .tide-wave-front { animation: water-tide 17s ease-in-out -8s infinite alternate-reverse; }
.tide-paused .tide-wave { animation-play-state: paused; }

.tide-toggle {
    position: absolute;
    z-index: 1;
    left: max(40px, calc((100% - 1200px) / 2));
    bottom: 12px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #bacfdf;
    border-radius: 20px;
    background: #f6fbffcc;
    color: #476c87;
    font-size: 10px;
}
.tide-toggle:hover { background: #fff; border-color: #729ebc; }

@keyframes water-tide {
    from { transform: translate3d(-20px, 5px, 0); }
    to { transform: translate3d(20px, -7px, 0); }
}

@media (max-width: 700px) {
    .tide-emblem { width: 370px; left: auto; right: -105px; top: 15px; opacity: .09; }
    .tide-waves { height: 125px; }
    .buyer-hero.tide-ready .buyer-hero-grid { padding-bottom: 65px; }
    .tide-toggle { left: 20px; bottom: 10px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .buyer-hero .tide-emblem { filter: none; }
    .hero-tide .tide-wave { animation: none; }
    .tide-toggle { display: none; }
}
@media print { .hero-tide, .tide-toggle { display: none; } }

.insurance-site {
    --paper: #f7f9fc;
    --white: #fff;
    --muted: #52677b;
    --line: #dce5ee;
    background: #fff;
    font-size: 16px
}

.insurance-site .container {
    width: min(1200px, calc(100% - 80px))
}

.insurance-site h1,
.insurance-site h2 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.12
}

.insurance-site h1 em,
.insurance-site h2 em {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -.035em
}

.insurance-site h2 {
    font-size: clamp(32px, 3.4vw, 46px)
}

.insurance-site .eyebrow {
    font-size: 10px;
    letter-spacing: .14em;
    margin-bottom: 18px;
    color: #456783
}

.insurance-site .section {
    padding: 82px 0
}

.insurance-site .section-heading {
    margin-bottom: 36px;
    gap: 35px
}

.insurance-site .section-heading>p {
    font-size: 15px;
    line-height: 1.7
}

.insurance-site .btn {
    border-radius: 9px;
    min-height: 50px;
    font-size: 13px;
    letter-spacing: 0;
    padding: 14px 23px
}

.insurance-site .btn-primary,
.insurance-site .btn-nav {
    background: #123e65;
    box-shadow: 0 4px 9px #102f5010
}

.insurance-site .btn-primary:hover,
.insurance-site .btn-nav:hover {
    background: #19567f
}

.insurance-site .btn-lime {
    background: #b7e7f8;
    color: #102f50
}

.insurance-site .site-header {
    background: #fffffff2;
    border-bottom: 1px solid #e8eef4
}

.insurance-site .nav-inner {
    min-height: 82px
}

.insurance-site .brand img {
    width: 48px;
    height: 47px
}

.insurance-site .brand small {
    font-size: 8px;
    letter-spacing: .16em
}

.insurance-site .main-menu {
    gap: 25px;
    font-size: 13px
}

.insurance-site .btn-nav {
    min-height: 43px;
    font-size: 12px;
    color: white;
    padding: 12px 19px
}

.line-icon {
    height: 32px;
    width: 32px;
    flex: none;
    display: block
}

/* A calm, high-contrast first screen and an immediately usable quote entry. */
.buyer-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(118deg, #f0f7fc 3%, #e8f4fc 56%, #dcecf8);
    isolation: isolate
}

.buyer-hero:before {
    content: '';
    position: absolute;
    width: 540px;
    height: 540px;
    border: 1px solid #abcde566;
    border-radius: 50%;
    right: -260px;
    top: -270px;
    box-shadow: 0 0 0 60px #b9d7e71f, 0 0 0 120px #b9d7e71a;
    z-index: -1
}

.hero-grid-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#9ebed71a 1px, transparent 1px), linear-gradient(90deg, #9ebed71a 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(90deg, transparent 40%, black);
    z-index: -1
}

.buyer-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 70px;
    align-items: center;
    padding-block: 64px 72px
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff9;
    border: 1px solid #cadeed;
    padding: 7px 13px;
    border-radius: 30px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .11em;
    color: #2a597b
}

.hero-pill .line-icon {
    width: 17px;
    height: 17px
}

.buyer-copy h1 {
    font-size: clamp(46px, 4.5vw, 65px);
    line-height: 1.06;
    margin-top: 27px;
    letter-spacing: -.06em;
    color: #102f50
}

.buyer-copy h1 em {
    font-size: 1.14em;
    line-height: 1.01;
    color: #24668f
}

.buyer-lead {
    font-size: 16px;
    line-height: 1.8;
    max-width: 44ch;
    color: #496579;
    margin-top: 27px
}

.hero-explore {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 25px;
    padding-bottom: 7px;
    border-bottom: 1px solid #7698b0
}

.hero-explore span {
    font-size: 18px
}

.hero-reassurance {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 38px;
    padding-top: 21px;
    border-top: 1px solid #ccdeec;
    max-width: 450px
}

.hero-reassurance>span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #466278
}

.hero-reassurance .line-icon {
    height: 18px;
    width: 18px
}

.quote-card {
    background: #fff;
    padding: 29px;
    border: 1px solid #e3ebf1;
    border-radius: 20px;
    box-shadow: 0 18px 65px #17436815;
    position: relative;
    min-width: 0
}

.quote-card-top {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 24px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e3ebf1
}

.quote-shield {
    display: grid;
    place-items: center;
    background: #e8f4fa;
    border: 1px solid #d5e7f2;
    border-radius: 13px;
    width: 44px;
    height: 44px;
    color: #236b96;
    flex: none
}

.quote-shield .line-icon {
    height: 25px;
    width: 25px
}

.quote-card-top>span:nth-child(2) {
    font-size: 9px;
    letter-spacing: .13em;
    color: #61768a
}

.quote-card-top small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: #183c5c;
    margin-top: 3px
}

.quote-step {
    margin-left: auto;
    font-size: 10px;
    color: #61768a;
    white-space: nowrap
}

#quick-quote fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0
}

#quick-quote legend {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.04em;
    padding: 0
}

.field-intro {
    font-size: 13px;
    color: #62778a;
    margin-top: 6px;
    margin-bottom: 21px
}

.quote-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px
}

.quote-option {
    position: relative;
    cursor: pointer;
    min-width: 0
}

.quote-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer
}

.quote-option>span {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 19px 4px 15px;
    border: 1px solid #dce6ee;
    border-radius: 11px;
    color: #61758a;
    transition: background .18s, border-color .18s, box-shadow .18s
}

.quote-option b {
    font-size: 12px;
    font-weight: 500
}

.quote-option .line-icon {
    height: 30px;
    width: 30px
}

.quote-option i {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #cedbe6
}

.quote-option input:checked+span {
    background: #edf7ff;
    border-color: #317bab;
    color: #174f77;
    box-shadow: 0 0 0 1px #317bab
}

.quote-option input:checked+span i {
    background: #246a99;
    border-color: #246a99
}

.quote-option input:checked+span i:after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: 50%
}

.quote-option input:focus-visible+span {
    outline: 3px solid #377caa;
    outline-offset: 4px
}

.quote-option:hover>span {
    background: #f2f8fc
}

.quote-context {
    padding: 17px 0 20px;
    min-height: 111px
}

.quote-context .micro-label {
    font-size: 9px;
    letter-spacing: .09em;
    color: #426782
}

.quote-context p {
    font-size: 12px;
    line-height: 1.65;
    color: #5b7184;
    margin-top: 6px
}

.quote-continue {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px
}

.quote-continue>span {
    font-size: 19px
}

.quote-note {
    font-size: 10px;
    color: #607588;
    margin: 12px 0 0;
    text-align: center
}

.quote-assistance {
    display: block;
    font-size: 12px;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 18px;
    color: #446782
}

.insurer-ribbon {
    border-bottom: 1px solid #e5ebf1;
    background: #fff
}

.insurer-ribbon>.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-block: 28px
}

.insurer-ribbon p {
    font-size: 12px;
    color: #62788b;
    line-height: 1.5;
    border-right: 1px solid #dce5ee;
    padding-right: 55px
}

.insurer-ribbon p b {
    color: #284b66
}

.insurer-ribbon a {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.04em;
    text-align: center;
    line-height: 1.1;
    color: #365871
}

.insurer-ribbon a:first-of-type {
    font-family: var(--font-serif);
    font-size: 32px
}

.insurer-ribbon a:last-child {
    font-family: var(--font-serif);
    font-size: 33px
}

.insurer-ribbon small {
    display: block;
    font: 500 7px/1.4 var(--font-sans);
    letter-spacing: .19em;
    margin-top: 5px
}

.insurer-ribbon a>span {
    font-size: 11px;
    letter-spacing: .02em
}

/* Native SVG illustrations keep the page light and avoid stock portraits. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px
}

.product-card {
    border: 1px solid #dfe8f0;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px #133d6012;
    border-color: #94bedb
}

.product-illustration {
    height: 152px;
    position: relative;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #edf5fa, #dcecf7);
    overflow: hidden;
    color: #326a90
}

.product-illustration>.line-icon {
    width: 92px;
    height: 92px;
    stroke-width: .9;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 10px 8px #568bb12a)
}

.product-hogar .product-illustration {
    background: linear-gradient(135deg, #f3f5fa, #e4eaf3)
}

.product-empresa .product-illustration {
    background: linear-gradient(135deg, #edf7f8, #dfedf0)
}

.product-flotilla .product-illustration {
    background: linear-gradient(135deg, #edf0fa, #e1e8f4)
}

.illustration-orbit {
    position: absolute;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    background: #ffffff65;
    box-shadow: 0 0 0 22px #ffffff30
}

.mini-shield {
    position: absolute;
    right: 24px;
    bottom: 21px;
    background: white;
    z-index: 2;
    border-radius: 50%;
    padding: 7px;
    box-shadow: 0 5px 13px #264b6520
}

.mini-shield .line-icon {
    width: 21px;
    height: 21px
}

.product-body {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.product-body .micro-label {
    font-size: 8px;
    letter-spacing: .08em;
    color: #648097
}

.product-body h3 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.04em;
    margin: 9px 0 7px
}

.product-body .product-tag {
    font-size: 12px;
    font-weight: 500;
    color: #294f6c;
    margin: 0 0 14px;
    line-height: 1.55
}

.product-body>p:not(.product-tag) {
    font-size: 12px;
    color: #61778a;
    line-height: 1.7;
    margin-bottom: 24px
}

.product-link {
    font-size: 11px;
    font-weight: 600;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 17px;
    border-top: 1px solid #e1e8ee
}

.product-link>span {
    font-size: 18px
}

.help-strip {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #f4f8fb;
    border: 1px solid #e2ebf2;
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 24px
}

.help-strip>.line-icon {
    color: #4a7b9d;
    width: 25px;
    height: 25px
}

.help-strip p {
    font-size: 13px
}

.help-strip p>span {
    font-size: 12px;
    display: block;
    color: #62788b;
    margin-top: 3px
}

.help-strip>a {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap
}

.help-strip>a>span {
    margin-left: 20px
}

.decision-section {
    background: #102f50;
    color: white;
    position: relative
}

.decision-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 90px;
    align-items: center
}

.insurance-site .decision-section .eyebrow {
    color: #a5d9ee
}

.decision-section h2 em {
    color: #aeddf2
}

.decision-grid>div>p:not(.eyebrow) {
    color: #bfd0df;
    line-height: 1.8;
    font-size: 14px;
    margin: 22px 0 26px;
    max-width: 45ch
}

.decision-grid .btn-outline {
    color: #d6ebf7;
    border-color: #66879f
}

.decision-grid .btn-outline:hover {
    color: #102f50
}

.decision-list article {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid #47647d
}

.decision-list article:first-child {
    border-top: 1px solid #47647d
}

.decision-list article>span {
    font-size: 10px;
    color: #9cbfd8
}

.decision-list article>div {
    flex: 1
}

.decision-list h3 {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 5px
}

.decision-list p {
    font-size: 12px;
    line-height: 1.7;
    color: #b4cadc
}

.decision-list .line-icon {
    color: #9ecce5;
    height: 26px;
    width: 26px
}

.decision-list article>b {
    width: 26px;
    font: 400 26px var(--font-serif);
    color: #9ecce5;
    text-align: center
}

.insurance-site .insurer-grid {
    gap: 22px
}

.insurance-site .service-card {
    border: 1px solid #dfe7ef;
    border-radius: 14px;
    padding: 29px;
    background: white;
    box-shadow: 0 7px 24px #16395405
}

.insurance-site .service-card:hover {
    background: #fff;
    box-shadow: 0 12px 30px #1239560d
}

.insurance-site .service-card h3 {
    font-size: 28px
}

.insurance-site .insurer-card h3 {
    font-size: 37px
}

.insurance-site .service-card>p:not(.micro-label) {
    font-size: 14px;
    line-height: 1.75;
    max-width: none;
    margin-bottom: 24px
}

.insurance-site .service-card .text-link {
    font-size: 12px
}

.insurance-site .insurer-card .card-top {
    margin-bottom: 21px
}

.insurance-site .insurer-card .card-number {
    color: #7194ad;
    background: #eff6fa;
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 5px
}

.insurance-site .check-list li {
    font-size: 13px
}

.insurance-site .insurer-card .check-list {
    margin: 0 0 25px;
    padding-top: 15px
}

.insurance-site .disclaimer {
    font-size: 11px;
    line-height: 1.8;
    margin-top: 22px;
    max-width: 100ch
}

.insurance-site .source-link {
    font-size: 11px
}

.insurance-site .process-section {
    background: #f4f8fb
}

.insurance-site .process-grid {
    border: 0;
    padding: 0;
    gap: 24px
}

.insurance-site .process-grid article {
    background: white;
    border: 1px solid #e0e9f0;
    border-radius: 14px;
    padding: 28px
}

.insurance-site .process-grid article:before {
    display: none
}

.insurance-site .process-number {
    display: block;
    font: 600 13px var(--font-sans);
    background: #e9f3fa;
    color: #30698f;
    border-radius: 50%;
    width: 37px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    margin: 0 0 24px
}

.insurance-site .process-grid h3 {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 12px
}

.insurance-site .process-grid p {
    font-size: 13px;
    line-height: 1.8
}

.insurance-site .process-tag {
    font-size: 8px;
    letter-spacing: .07em
}

.insurance-site .cta-section {
    padding: 55px 0 75px
}

.insurance-site .cta-panel {
    border-radius: 18px;
    padding: 48px;
    background: linear-gradient(110deg, #123859, #174c72)
}

.insurance-site .cta-panel h2 {
    font-size: 37px
}

.insurance-site .cta-panel p:not(.eyebrow) {
    font-size: 14px
}

.insurance-site .cta-panel .eyebrow {
    color: #a5ddf2
}

.insurance-site .cta-actions>span {
    font-size: 11px
}

.insurance-site .page-heading {
    padding: 60px 0 44px;
    background: linear-gradient(120deg, #f5f9fc, #eaf4fb);
    border-bottom: 1px solid #e5edf4;
    margin-bottom: 30px
}

.insurance-site .page-heading h1 {
    font-size: clamp(36px, 4.2vw, 58px)
}

.insurance-site .page-heading .lead {
    font-size: 15px;
    max-width: 68ch;
    line-height: 1.75;
    margin-top: 21px
}

.insurance-site .page-heading+.product-section {
    padding-top: 35px
}

.insurance-site .about-section {
    background: #f3f7fa
}

.insurance-site .coverage-grid {
    gap: 22px
}

.insurance-site .coverage-grid article {
    border: 1px solid #dfe7ef;
    border-radius: 12px;
    padding: 24px;
    background: #f9fbfd
}

.insurance-site .coverage-grid p {
    font-size: 14px
}

.insurance-site .faq-list {
    border: 0
}

.insurance-site .faq-list details {
    border: 1px solid #dfe7ef;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 0 20px
}

.insurance-site .faq-list summary {
    font-size: 15px;
    padding: 20px 0
}

.insurance-site .faq-list details[open] {
    background: #f3f8fc;
    border-color: #b6cede
}

.insurance-site .faq-list details>p {
    font-size: 14px
}

/* Keep the actual request ahead of office/contact information, especially on mobile. */
.insurance-site.quote-page .contact-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
    gap: 65px;
    align-items: start
}

.quote-page .form-panel {
    grid-column: 1;
    grid-row: 1;
    background: #fff;
    border: 1px solid #dbe6ef;
    border-radius: 17px;
    padding: 35px;
    box-shadow: 0 12px 45px #13355009
}

.quote-page .contact-details {
    grid-column: 2;
    grid-row: 1;
    padding-top: 6px
}

.quote-page .form-panel h2 {
    font: 600 28px/1.25 var(--font-sans);
    letter-spacing: -.045em;
    margin: 10px 0 28px
}

.quote-page .form-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e8f0
}

.form-section-label>span {
    font-size: 10px;
    border-radius: 50%;
    background: #e9f4fc;
    color: #39749a;
    padding: 7px
}

.quote-page .form-field label {
    font-size: 13px;
    font-weight: 500
}

.quote-page .form-field input,
.quote-page .form-field select,
.quote-page .form-field textarea {
    border: 1px solid #cbdbe7;
    border-radius: 8px;
    background: #fbfdff;
    font-size: 15px;
    min-height: 48px
}

.quote-page .form-field input::placeholder,
.quote-page .form-field textarea::placeholder {
    font-size: 13px;
    color: #61788b
}

.quote-page .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 17px
}

.quote-page .message-help {
    font-size: 12px;
    line-height: 1.65;
    color: #60778a;
    margin: 0 0 8px
}

.quote-page .consent,
.quote-page .form-hint {
    font-size: 11px;
    line-height: 1.75
}

.quote-page .consent input {
    width: 18px;
    height: 18px
}

.quote-page .contact-intro>.quote-shield {
    margin-bottom: 20px
}

.quote-page .contact-intro h2 {
    font-size: 29px
}

.next-steps {
    counter-reset: steps;
    list-style: none;
    padding: 0;
    margin: 28px 0
}

.next-steps li {
    counter-increment: steps;
    position: relative;
    padding: 0 0 23px 37px
}

.next-steps li:before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: 1px;
    display: grid;
    place-items: center;
    border: 1px solid #c8dce9;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    font-size: 10px;
    color: #3b6c8c
}

.next-steps b {
    font-size: 13px;
    font-weight: 600
}

.next-steps p {
    font-size: 12px;
    color: #61788b;
    margin-top: 4px;
    line-height: 1.7
}

.quote-page .whatsapp-card {
    background: #edf6f8;
    border: 1px solid #d9e8ed;
    border-radius: 12px;
    padding: 23px
}

.quote-page .whatsapp-card h3 {
    font-size: 20px
}

.quote-page .whatsapp-card p {
    font-size: 13px
}

.quote-page .contact-item a {
    font-size: 14px
}

.insurance-site .site-footer {
    background: #f2f6fa;
    border-top: 1px solid #e0e9f1
}

.insurance-site .footer-top>div:first-child>p {
    font-size: 25px
}

.insurance-site .footer-top>div:not(:first-child)>a {
    font-size: 13px
}

.insurance-site .footer-top h2 {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0
}

.insurance-site .footer-bottom {
    font-size: 10px
}

.insurance-site .wa-float {
    background: #fff;
    color: #123e65;
    border: 1px solid #cbdfe9;
    box-shadow: 0 7px 25px #12395617;
    font-size: 12px
}

.mobile-quote-bar {
    display: none
}

@media(min-width:701px) and (max-width:1100px) {
    .insurance-site .container {
        width: calc(100% - 64px)
    }

    .insurance-site .main-menu {
        gap: 17px;
        font-size: 12px
    }

    .insurance-site .btn-nav {
        padding: 12px;
        font-size: 11px
    }

    .buyer-hero-grid {
        gap: 35px;
        grid-template-columns: 1fr 1fr;
        padding-block: 52px
    }

    .buyer-copy h1 {
        font-size: 48px
    }

    .buyer-lead {
        font-size: 14px
    }

    .quote-card {
        padding: 24px
    }

    .quote-options {
        gap: 7px
    }

    .quote-option b {
        font-size: 11px
    }

    .hero-reassurance {
        gap: 11px
    }

    .hero-reassurance>span {
        font-size: 10px
    }

    .product-grid {
        gap: 15px
    }

    .product-body {
        padding: 20px 17px
    }

    .product-body h3 {
        font-size: 19px
    }

    .product-illustration {
        height: 135px
    }

    .product-body .micro-label {
        font-size: 7px
    }

    .product-link {
        font-size: 10px
    }

    .decision-grid {
        gap: 45px
    }

    .insurance-site.quote-page .contact-grid {
        gap: 30px
    }

    .quote-page .form-panel {
        padding: 25px
    }

    .quote-page .form-row {
        grid-template-columns: 1fr
    }
}

@media(max-width:940px) {
    .insurance-site .main-menu {
        font-size: 15px
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .buyer-hero-grid {
        gap: 25px
    }

    .quote-options {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .quote-option>span {
        flex-direction: row;
        justify-content: center;
        gap: 9px;
        padding: 14px 5px
    }

    .quote-option .line-icon {
        width: 24px;
        height: 24px
    }

    .quote-context {
        min-height: 126px
    }
}

@media(max-width:700px) {
    .insurance-site .container {
        width: calc(100% - 40px)
    }

    .insurance-site .nav-inner {
        min-height: 73px
    }

    .insurance-site .brand img {
        width: 41px;
        height: 40px
    }

    .insurance-site .brand>span {
        font-size: 17px
    }

    .insurance-site .brand small {
        font-size: 7px
    }

    .insurance-site .section {
        padding: 53px 0
    }

    .insurance-site h2 {
        font-size: 34px
    }

    .insurance-site .eyebrow {
        font-size: 9px;
        margin-bottom: 16px
    }

    .insurance-site .section-heading {
        gap: 17px;
        margin-bottom: 27px
    }

    .insurance-site .section-heading>p {
        font-size: 14px
    }

    .buyer-hero-grid {
        grid-template-columns: 1fr;
        gap: 31px;
        padding-block: 33px 35px
    }

    .hero-pill {
        font-size: 8px;
        letter-spacing: .07em;
        padding: 7px 10px
    }

    .buyer-copy h1 {
        font-size: 48px;
        margin-top: 21px;
        line-height: 1.02
    }

    .buyer-copy h1 em {
        font-size: 1.08em
    }

    .buyer-lead {
        font-size: 14px;
        line-height: 1.7;
        margin-top: 21px;
        max-width: 43ch
    }

    .hero-explore {
        font-size: 12px;
        margin-top: 20px
    }

    .hero-reassurance {
        display: none
    }

    .quote-card {
        padding: 22px;
        border-radius: 16px
    }

    .quote-card-top {
        padding-bottom: 17px;
        margin-bottom: 18px
    }

    #quick-quote legend {
        font-size: 22px
    }

    .field-intro {
        font-size: 12px;
        margin-bottom: 17px
    }

    .quote-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px
    }

    .quote-option>span {
        flex-direction: column;
        gap: 9px;
        padding: 17px 2px 12px
    }

    .quote-option b {
        font-size: 10px
    }

    .quote-option .line-icon {
        width: 26px;
        height: 26px
    }

    .quote-option i {
        width: 10px;
        height: 10px;
        right: 5px;
        top: 5px
    }

    .quote-option input:checked+span i:after {
        inset: 2px
    }

    .quote-context {
        min-height: 105px;
        padding: 16px 0
    }

    .quote-context p {
        font-size: 12px
    }

    .quote-note {
        font-size: 10px;
        line-height: 1.6
    }

    .quote-card .btn {
        font-size: 12px;
        padding-inline: 17px
    }

    .quote-assistance {
        font-size: 11px
    }

    .quote-card-top small {
        font-size: 12px
    }

    .insurer-ribbon>.container {
        gap: 15px;
        padding-block: 23px;
        flex-wrap: wrap
    }

    .insurer-ribbon p {
        flex-basis: 100%;
        border: 0;
        padding: 0;
        text-align: center;
        font-size: 11px
    }

    .insurer-ribbon p br {
        display: none
    }

    .insurer-ribbon a,
    .insurer-ribbon a:first-of-type,
    .insurer-ribbon a:last-child {
        font-size: 25px
    }

    .insurer-ribbon a>span {
        font-size: 8px
    }

    .insurer-ribbon small {
        font-size: 6px
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
    }

    .product-illustration {
        height: 117px
    }

    .product-illustration>.line-icon {
        height: 68px;
        width: 68px
    }

    .illustration-orbit {
        width: 93px;
        height: 93px
    }

    .mini-shield {
        right: 12px;
        bottom: 12px;
        padding: 5px
    }

    .mini-shield .line-icon {
        width: 16px;
        height: 16px
    }

    .product-body {
        padding: 17px 13px
    }

    .product-body .micro-label {
        font-size: 8px;
        letter-spacing: .03em
    }

    .product-body h3 {
        font-size: 18px;
        line-height: 1.2
    }

    .product-body .product-tag {
        font-size: 12px;
        margin-bottom: 10px
    }

    .product-body>p:not(.product-tag) {
        font-size: 12px;
        margin-bottom: 18px
    }

    .product-link {
        font-size: 11px;
        line-height: 1.5;
        gap: 5px
    }

    .help-strip {
        padding: 18px;
        gap: 12px;
        flex-wrap: wrap
    }

    .help-strip p {
        font-size: 12px;
        flex: 1
    }

    .help-strip p>span {
        font-size: 11px
    }

    .help-strip>a {
        margin-left: 37px;
        font-size: 12px
    }

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

    .decision-grid>div>p:not(.eyebrow) {
        font-size: 14px
    }

    .decision-list article {
        padding: 22px 0;
        gap: 15px
    }

    .decision-list h3 {
        font-size: 17px
    }

    .insurance-site .service-card {
        padding: 25px
    }

    .insurance-site .service-card>p:not(.micro-label) {
        font-size: 14px
    }

    .insurance-site .insurer-card h3 {
        font-size: 35px
    }

    .insurance-site .insurer-grid {
        gap: 17px
    }

    .insurance-site .process-grid {
        gap: 15px
    }

    .insurance-site .process-grid article {
        display: block;
        padding: 25px
    }

    .insurance-site .process-number {
        margin-bottom: 18px
    }

    .insurance-site .process-grid h3 {
        font-size: 20px
    }

    .insurance-site .process-grid p {
        font-size: 14px
    }

    .insurance-site .cta-section {
        padding: 35px 0 50px
    }

    .insurance-site .cta-panel {
        padding: 30px 25px
    }

    .insurance-site .cta-panel h2 {
        font-size: 31px
    }

    .insurance-site .cta-panel p:not(.eyebrow) {
        font-size: 13px
    }

    .insurance-site .page-heading {
        padding: 35px 0 30px;
        margin-bottom: 15px
    }

    .insurance-site .page-heading h1 {
        font-size: 37px
    }

    .insurance-site .page-heading .lead {
        font-size: 14px;
        margin-top: 18px
    }

    .insurance-site .corporate-grid {
        gap: 25px
    }

    .insurance-site .corporate-statement>p {
        font-size: 50px
    }

    .insurance-site .faq-list summary {
        font-size: 14px
    }

    .insurance-site .faq-list details {
        padding: 0 16px
    }

    .insurance-site.quote-page .contact-grid {
        display: flex;
        flex-direction: column;
        gap: 38px
    }

    .quote-page .form-panel {
        order: 0;
        width: 100%;
        padding: 24px 20px
    }

    .quote-page .contact-details {
        order: 1;
        width: 100%
    }

    .quote-page .form-panel h2 {
        font-size: 26px
    }

    .quote-page .form-panel>.micro-label {
        font-size: 8px
    }

    .quote-page .form-row {
        grid-template-columns: 1fr
    }

    .quote-page .form-field input,
    .quote-page .form-field select,
    .quote-page .form-field textarea {
        font-size: 16px
    }

    .quote-page .form-field label {
        font-size: 13px
    }

    .quote-page .contact-intro h2 {
        font-size: 31px
    }

    .quote-page .contact-item a {
        font-size: 16px
    }

    .mobile-quote-bar {
        position: fixed;
        z-index: 45;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fffffff5;
        backdrop-filter: blur(12px);
        border-top: 1px solid #dae5ee;
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 10px 20px calc(10px + env(safe-area-inset-bottom))
    }

    .mobile-quote-bar>a:first-child {
        font-size: 13px;
        font-weight: 600;
        padding: 10px
    }

    .mobile-quote-bar .btn {
        flex: 1;
        min-height: 46px;
        padding: 11px;
        font-size: 12px;
        gap: 14px
    }

    .insurance-site .wa-float {
        display: none
    }

    .insurance-site .footer-bottom {
        padding-bottom: 115px
    }

    .insurance-site:has(.menu-open) .mobile-quote-bar,
    .insurance-site.menu-open .mobile-quote-bar {
        display: none
    }

    .quote-page:has(#contact-form :focus) .mobile-quote-bar {
        display: none
    }
}

@media(max-width:370px) {
    .insurance-site .container {
        width: calc(100% - 32px)
    }

    .buyer-copy h1 {
        font-size: 43px
    }

    .quote-card {
        padding: 18px
    }

    .quote-options {
        gap: 6px
    }

    .quote-option b {
        font-size: 9px
    }

    .product-grid {
        grid-template-columns: 1fr
    }

    .product-illustration {
        height: 145px
    }

    .product-body h3 {
        font-size: 22px
    }

    .product-body>p:not(.product-tag) {
        font-size: 13px
    }

    .product-link {
        font-size: 12px
    }
}

@media(prefers-reduced-motion:reduce) {

    .product-card,
    .quote-option>span {
        transition: none
    }

    .product-card:hover {
        transform: none
    }
}

@media print {

    .mobile-quote-bar,
    .quote-card,
    .hero-explore {
        display: none
    }

    .buyer-hero-grid {
        display: block
    }

    .buyer-hero {
        background: white
    }

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

    .product-card {
        break-inside: avoid
    }

    .decision-section {
        background: white;
        color: #102f50
    }

    .decision-list p,
    .decision-grid>div>p:not(.eyebrow) {
        color: #102f50
    }
}
