.home-refresh .clear-hero {
    background: linear-gradient(#ffcd00, transparent 70px) center bottom / cover no-repeat,
        url('/brand/home-sunshine-signs.svg?v=3') center bottom / cover no-repeat,
        #ffcd00 url('/brand/home-sunshine-06.webp') center bottom / cover no-repeat;
    color: #102d53;
    padding: clamp(32px, 6vw, 82px) 0;
}
.clear-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(28px, 5vw, 76px);
    align-items: center;
}
.clear-message .home-kicker {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
    background: #ffffff;
    color: #102d53;
}
.home-refresh .clear-hero h1 {
    color: inherit;
    font-size: clamp(34px, 4.1vw, 60px);
    line-height: 1.05;
    margin: 14px 0;
    letter-spacing: -.045em;
}
.clear-hero h1 em { color: #102d53; background: #ffffff; padding: 0 .16em .04em; border-radius: 4px 10px 6px 12px; font-style: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.clear-lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; }
.clear-conversation { margin: 22px 0 10px; }
.clear-conversation p {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 8px 0;
    padding: 8px 14px 8px 8px;
    border-radius: 18px 18px 18px 4px;
    background: #fff9e5;
    color: #102d53;
    font-size: 14px;
}
.clear-conversation p + p { margin-left: 24px; background: #fff2ad; }
.clear-conversation span {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: #102d53;
    color: #ffffff;
}
.clear-message .clear-doodle {
    display: block;
    width: 100%;
    height: auto;
    max-width: 540px;
    margin: 8px 0 0;
    border: 0;
    background: none;
    box-shadow: none;
    aspect-ratio: auto;
    color: #fff9e5;
}
.clear-panel {
    min-width: 0;
    background: #fffef9;
    color: #102d53;
    padding: clamp(20px, 3vw, 40px);
    border-radius: 26px;
    box-shadow: 0 18px 44px #102d5340;
}
.home-refresh .clear-panel h2 { color: inherit; font-size: clamp(24px, 3vw, 36px); margin: 0 0 18px; }
.clear-route { display: grid; gap: 12px; }
.clear-route > div[hidden] { display: none; }
.clear-route label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.clear-route input {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 9px 12px;
    background: #fffdf7;
    border: 1px solid #8998ad;
    border-radius: 9px;
    font-size: 16px;
    color: #102d53;
}
.home-refresh .clear-panel .button {
    justify-content: center;
    min-height: 48px;
    margin: 3px 0 0;
    border: 1px solid #102d53;
    border-radius: 999px;
    color: #ffffff;
    background: #102d53;
}
.home-refresh .clear-panel .button:hover { background: #244774; }
.home-refresh .clear-panel .home-micro { color: #425575; margin: 12px 0 0; }
.clear-plan-link {
    display: block;
    width: fit-content;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #183e6c;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.clear-panel :focus-visible { outline: 3px solid #183e6c; outline-offset: 3px; }
.home-refresh .home-product-section { padding-top: 36px; }

.clear-message .clear-doodle { height: 98px; }
.clear-benefit-band { padding: 34px 0; background: #fff9e5; color: #102d53; }
.clear-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 1.5fr); gap: 20px; }
.clear-benefit-grid > div { display: grid; align-content: start; gap: 7px; padding-right: 14px; border-right: 1px solid #dbc978; }
.clear-benefit-grid svg { width: 49px; height: 49px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; background: #ffe484; border-radius: 35% 60% 40% 55%; }
.clear-price-example { padding: 16px; border-radius: 16px; background: #ffeba0; }
.clear-price-example p { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 7px 0; }
.clear-price-example b { font-size: 27px; }
.clear-price-example mark { color: inherit; background: #ffcd00; padding: 3px 6px; font-weight: 700; }
@media (max-width: 900px) {
    .clear-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .clear-intro { grid-template-columns: minmax(0, 1fr); }
    .clear-message .clear-doodle { height: 32px; }
    .home-refresh .clear-hero { background-size: auto 68%; }
}
@media (max-width: 460px) {
    .clear-benefit-grid { grid-template-columns: minmax(0, 1fr); }
    .clear-benefit-grid > div { border-right: 0; grid-template-columns: 49px minmax(0, 1fr); align-items: center; }
    .clear-benefit-grid small { grid-column: 2; }
}
/* Illustrated details from concept 06, in the sunshine palette. */
.home-refresh .clear-hero { padding-block: clamp(38px, 4vw, 65px); background-position: left bottom; }
.clear-message .home-kicker, .clear-hero h1 em {
    background: #fffdf3;
    border-radius: 9% 5% 8% 4% / 20% 13% 15% 10%;
}
.clear-message .home-kicker {
    text-transform: none;
    font-size: clamp(17px, 2vw, 24px);
    font-style: italic;
    letter-spacing: 0;
    transform: rotate(-2deg);
}
.clear-hero h1 em { display: inline-block; margin-top: .17em; }
.clear-conversation p, .clear-conversation p + p {
    display: grid;
    grid-template-columns: clamp(38px, 5vw, 62px) minmax(0, 1fr);
    width: fit-content;
    max-width: 100%;
    margin: 10px 0;
    padding: 0;
    background: transparent;
    font-size: clamp(14px, 1.3vw, 19px);
    line-height: 1.35;
}
.clear-conversation strong {
    position: relative;
    padding: 12px 16px;
    background: #fff9e5;
    border-radius: 20px 24px 22px 7px;
}
.clear-conversation strong::before {
    content: "";
    position: absolute;
    left: -8px;
    bottom: 9px;
    width: 14px;
    height: 12px;
    background: inherit;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.clear-conversation p + p strong { background: #fff2ad; }
.clear-avatar, .clear-map, .clear-field-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.clear-avatar { width: 100%; background: #ffeb9f; border: 3px solid #fffdf3; border-radius: 50%; }
.clear-conversation p + p .clear-avatar { background: #fff9e5; }
.clear-panel { position: relative; }
.clear-map {
    position: absolute;
    width: clamp(68px, 8vw, 110px);
    height: clamp(49px, 5.8vw, 80px);
    top: -24px;
    right: -8px;
    transform: rotate(9deg);
    filter: drop-shadow(2px 3px 0 #102d5326);
    pointer-events: none;
}
.home-refresh .clear-panel h2 { padding-right: clamp(18px, 3.5vw, 56px); }
.clear-route > div:not([hidden]) {
    display: grid;
    grid-template-columns: clamp(105px, 11vw, 156px) minmax(0, 1fr);
    align-items: center;
    background: #fffdf7;
    border: 1px solid #8998ad;
    border-radius: 10px;
    overflow: hidden;
}
.clear-route label { display: flex; align-items: center; gap: 7px; margin: 0; padding-left: 10px; }
.clear-route input { min-width: 0; background: transparent; border: 0; }
.clear-route > div:focus-within { outline: 2px solid #183e6c; outline-offset: 2px; }
.sunshine-theme #main .clear-route input:focus { outline: none; box-shadow: none; }
.clear-route > div:has([aria-invalid="true"]) { border-color: #9b2d25; }
.clear-route .clear-field-error {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0 12px 8px;
    color: #86251e;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.35;
}
.clear-field-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.home-refresh .clear-panel .button { min-height: 54px; font-size: clamp(15px, 1.45vw, 21px); font-weight: 800; }
.clear-benefit-grid > div { justify-items: center; text-align: center; gap: 9px; }
.clear-benefit-grid > div strong { font-size: clamp(16px, 1.65vw, 24px); line-height: 1.2; }
.clear-benefit-grid svg {
    width: min(120px, 100%);
    height: 82px;
    background: radial-gradient(ellipse 51% 27% at 50% 68%, #ffe074 95%, transparent);
    border-radius: 0;
}
.clear-price-example > strong { font-size: clamp(17px, 1.6vw, 22px); }
.clear-price-example b { font-size: clamp(26px, 3vw, 40px); }
@media (max-width: 760px) {
    .clear-map { right: 6px; }
    .home-refresh .clear-hero { background-position: left bottom; background-size: auto 40%; }
}
@media (max-width: 460px) {
    .clear-benefit-grid > div { grid-template-columns: 82px minmax(0, 1fr); text-align: left; justify-items: start; }
    .clear-benefit-grid svg { height: 62px; }
}

.clear-message .home-kicker, .clear-price-sticker mark {
    clip-path: polygon(2% 15%, 15% 8%, 43% 6%, 71% 3%, 96% 0, 98% 13%, 96% 21%, 100% 26%, 98% 38%, 100% 50%, 97% 59%, 99% 69%, 97% 78%, 99% 86%, 95% 94%, 52% 98%, 2% 100%, 4% 88%, 0 81%, 3% 71%, 0 62%, 3% 49%, 0 38%, 4% 28%, 1% 22%);
}
.clear-message .home-kicker { background: #fff4b6; padding: 7px 16px; }
.clear-rays {
    display: inline-block;
    width: .82em;
    height: .76em;
    margin-left: .12em;
    vertical-align: top;
    fill: none;
    stroke: #fffdf3;
    stroke-width: 4.5;
    stroke-linecap: round;
}
.home-refresh .clear-panel .button { position: relative; }
.clear-route .clear-rays {
    position: absolute;
    right: -13px;
    top: -23px;
    width: 36px;
    height: 34px;
    stroke: #102d53;
    transform: rotate(6deg);
    pointer-events: none;
}
.clear-price-sticker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.clear-price-sticker mark {
    display: block;
    width: fit-content;
    padding: 8px 12px;
    background: #ffd633;
    font-size: clamp(14px, 1.45vw, 20px);
    line-height: 1.15;
    transform: rotate(-3deg);
}
.clear-price-sticker mark b { font-size: 1.28em; }
.clear-price-sticker small { display: block; font-size: .72em; }
.clear-price-example .clear-coins {
    flex: 0 0 clamp(45px, 5vw, 76px);
    width: clamp(45px, 5vw, 76px);
    height: 56px;
    background: none;
    stroke-width: 2.8;
}

.clear-price-example {
    container-type: inline-size;
    padding: clamp(14px, 1.35vw, 23px);
    background: radial-gradient(ellipse at 60% 15%, #fff5ca, #f7e7a5);
    border-radius: 22px;
}
.clear-price-trip {
    display: grid;
    grid-template-columns: minmax(39px, .85fr) minmax(82px, 1.45fr) auto;
    align-items: center;
    gap: clamp(7px, 2.7cqi, 15px);
    margin: 16px 0 8px;
    line-height: 1.2;
}
.clear-price-trip .clear-price-bus {
    display: block;
    width: 100%;
    max-width: 92px;
    height: auto;
    background: none;
}
.clear-price-trip span { font-size: clamp(13px, 5.1cqi, 20px); }
.clear-price-trip small { display: block; margin-top: 4px; font-size: .8em; }
.clear-price-trip .clear-price-total {
    position: relative;
    padding: 8px 8px 8px clamp(7px, 3cqi, 17px);
    border-left: 1px solid #9b8950;
    font-size: clamp(20px, 10cqi, 43px);
}
.clear-price-total .clear-rays {
    position: absolute;
    top: -13px;
    right: -9px;
    width: 28px;
    height: 26px;
    stroke: #102d53;
    stroke-width: 4.5;
    background: none;
}
.clear-price-sticker { justify-content: flex-end; gap: clamp(7px, 4cqi, 22px); }
.clear-price-sticker mark {
    padding: 9px clamp(12px, 4cqi, 22px);
    font-size: clamp(14px, 5.5cqi, 23px);
}
.clear-price-example .clear-coins {
    flex-basis: clamp(52px, 20cqi, 87px);
    width: clamp(52px, 20cqi, 87px);
    height: auto;
}

.clear-hero h1 em {
    background: #fff4b6;
    clip-path: polygon(3% 7%, 94% 1%, 97% 7%, 96% 17%, 100% 25%, 97% 35%, 99% 44%, 97% 54%, 100% 64%, 97% 75%, 99% 83%, 95% 94%, 2% 100%, 4% 88%, 0 79%, 3% 69%, 0 58%, 3% 47%, 0 34%, 4% 24%, 1% 16%);
    padding-inline: .24em;
}
.clear-conversation p { align-items: center; }
.clear-conversation .clear-avatar { aspect-ratio: 1; height: auto; align-self: center; }
.clear-conversation strong { padding-right: 44px; }
.clear-conversation p + p { max-width: min(72%, 470px); margin-left: clamp(8px, 2vw, 26px); }
.clear-conversation p + p strong { padding-right: 16px; }
.clear-chat-doodle {
    position: absolute;
    bottom: 10px;
    right: 8px;
    width: 32px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (max-width: 460px) {
    .clear-conversation p + p { max-width: calc(100% - 8px); }
    .clear-conversation strong { padding-right: 34px; }
    .clear-chat-doodle { width: 24px; right: 6px; }
}

@media (min-width: 761px) {
    .clear-conversation { margin-bottom: 20px; }
}

.clear-conversation p, .clear-conversation p + p {
    grid-template-columns: clamp(44px, 5.2vw, 74px) minmax(0, 1fr);
    gap: clamp(12px, 1.2vw, 18px);
}
.clear-conversation p + p { max-width: min(79%, 510px); }
.clear-conversation .clear-avatar {
    background: #ffe39a;
    border-color: #fff9e5;
    stroke-width: 1.85;
}
.clear-conversation p + p .clear-avatar { background: #ffec9f; }
.clear-conversation strong {
    padding: 12px 53px 13px 19px;
    border-radius: 26px 29px 25px 18px / 25px 28px 25px 15px;
}
.clear-conversation strong::before {
    left: -12px;
    bottom: 9px;
    width: 22px;
    height: 17px;
    border-radius: 0 0 0 85%;
    clip-path: polygon(0 75%, 37% 55%, 69% 29%, 100% 0, 100% 100%, 32% 100%);
}
.clear-conversation p + p strong { max-width: min(92%, 310px); padding-right: 35px; }
.clear-chat-doodle { width: 42px; height: 30px; bottom: 9px; right: 9px; }
.clear-chat-spark { width: 25px; height: 25px; }
@media (max-width: 760px) {
    .clear-conversation p + p { max-width: calc(100% - clamp(8px, 2vw, 26px)); }
    .clear-conversation strong { padding: 10px 37px 11px 13px; }
    .clear-conversation p + p strong { padding-right: 27px; }
    .clear-chat-doodle { width: 30px; height: 23px; right: 6px; }
    .clear-chat-spark { width: 19px; }
}

.home-refresh .clear-panel {
    background: radial-gradient(ellipse at 5% 0%, #fff3d7, #fff9eb 78%);
    border-radius: clamp(24px, 3vw, 40px);
}
.home-refresh .clear-panel h2 {
    padding-right: 0;
    font-size: clamp(23px, 2.15vw, 31px);
    font-weight: 800;
    line-height: 1.16;
    margin-bottom: 24px;
}
.clear-panel .clear-map {
    width: clamp(72px, 8.5vw, 122px);
    height: clamp(53px, 6.2vw, 88px);
    top: -26px;
    right: -9px;
}
.clear-route > div:not([hidden]) {
    grid-template-columns: clamp(112px, 12vw, 165px) minmax(0, 1fr);
    background: #fffdf7;
    border-color: #bcb29d;
    box-shadow: 0 2px 3px #102d530d;
}
.clear-route label {
    gap: 12px;
    padding-left: 13px;
    font-size: clamp(15px, 1.32vw, 20px);
}
.clear-route .clear-field-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    stroke-width: 2.6;
}
.clear-route input {
    min-height: 52px;
    font-size: clamp(16px, 1.36vw, 20px);
    font-weight: 600;
}
.clear-route input::placeholder {
    font-size: inherit;
    color: #536075;
    opacity: 1;
}
.home-refresh .clear-panel .clear-route .button {
    margin-top: 14px;
    min-height: 58px;
    gap: 12px;
    justify-self: center;
    max-width: 100%;
    padding-inline: clamp(16px, 2vw, 32px);
    background: #102d53;
    border-color: #102d53;
    color: #fff;
    font-size: clamp(16px, 1.75vw, 25px);
    box-shadow: 0 4px 0 #102d5326;
}
.home-refresh .clear-panel .clear-route .button:hover {
    background: #244774;
    border-color: #244774;
}
.clear-submit-arrow {
    width: 16px;
    height: 20px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (max-width: 460px) {
    .clear-panel .clear-map { right: 5px; }
    .clear-route label { gap: 7px; padding-left: 9px; }
    .clear-route .clear-field-icon { width: 20px; height: 20px; flex-basis: 20px; }
}

/* Keep both illustration layers aligned as the landscape moves below the chat. */
@media (min-width: 761px) {
    .home-refresh .clear-hero {
        padding-bottom: clamp(76px, 7vw, 128px);
        background-size: max(100%, 1500px) max(34vw, 510px);
    }
}
@media (max-width: 760px) {
    .home-refresh .clear-hero {
        padding-bottom: 62px;
        background-size: auto 36%;
    }
}