/* Existing homepage hero styles, isolated to the introduction page. */
.tl .tl-hero-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin: 24px 0 22px; }
.tl .tl-button.tl-web-order { min-width: 0; min-height: 66px; justify-content: space-between; gap: 14px; padding: 13px 18px; font-size: 15px; border-radius: 16px; color: #fff; background: var(--tl-orange); background: linear-gradient(110deg,var(--tl-orange),color-mix(in srgb,var(--tl-orange) 86%,#fff)); box-shadow: 0 8px 20px rgba(var(--primary-color-rgb),.16); }
.tl .tl-button.tl-web-order:hover { color: #fff; background: var(--tl-orange); box-shadow: 0 10px 24px rgba(var(--primary-color-rgb),.22); }
.tl .tl-download-copy > .tl-download-web-order { display: flex; width: 100%; margin-top: 21px; }
.tl .tl-web-order-content { display: flex; align-items: center; gap: 13px; }
.tl .tl-web-order-icon { display: grid; place-items: center; width: 38px; height: 38px; background: #ffffff24; border: 1px solid #ffffff24; border-radius: 11px; }
.tl .tl-web-order-icon > .tl-icon { width: 23px; height: 23px; }
.tl .tl-web-order > .tl-icon { width: 32px; height: 32px; padding: 6px; background: #ffffff24; border-radius: 50%; }
.tl .tl-hero-actions > .tl-store-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); min-width: 0; gap: 12px; }
.tl .tl-hero-actions .tl-store { min-width: 0; min-height: 74px; justify-content: center; }
.tl .tl-store.tl-store-ios, .tl .tl-store.tl-store-android { min-width: 0; gap: 13px; padding: 14px 18px; border-radius: 15px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.tl .tl-store.tl-store-ios { color: #555e6a; border: 1px solid #d6dae0; background: linear-gradient(125deg,#fdfefe 0%,#eff1f4 43%,#ffffff 56%,#e5e8ed 100%); box-shadow: inset 0 1px 0 #fff, 0 4px 12px #6670850a; }
.tl .tl-store.tl-store-ios:hover { color: #49525f; background: linear-gradient(125deg,#fff 0%,#e8ebf0 43%,#fff 56%,#dfe3e9 100%); border-color: #b3bac4; box-shadow: inset 0 1px 0 #fff, 0 8px 18px #66708514; }
.tl .tl-store.tl-store-android { color: #555e6a; border: 1px solid #dce0e5; background: #fff; box-shadow: 0 4px 12px #66708509; }
.tl .tl-store.tl-store-android:hover { color: #49525f; background: #fff; border-color: #b8c0ca; box-shadow: 0 8px 18px #66708514; }
.tl .tl-store.tl-store-ios > .tl-icon, .tl .tl-store.tl-store-android > .tl-icon { width: 38px; height: 38px; }
.tl .tl-store.tl-store-ios > span, .tl .tl-store.tl-store-android > span { min-width: 0; gap: 5px; }
.tl .tl-store.tl-store-ios small { color: #737b86; font-size: 10px; line-height: 1.35; }
.tl .tl-store.tl-store-android small { color: #737b86; font-size: 10px; line-height: 1.35; }
.tl .tl-store.tl-store-ios strong, .tl .tl-store.tl-store-android strong { font-size: 17px; font-weight: 700; }
@media (max-width: 650px) {
    .tl .tl-hero-actions { gap: 10px; }
    .tl .tl-hero-actions > .tl-store-links { gap: 10px; }
    .tl .tl-button.tl-web-order { min-height: 64px; padding: 12px 16px; font-size: 14px; gap: 12px; }
    .tl .tl-web-order-content { gap: 10px; }
    .tl .tl-web-order-icon { width: 35px; height: 35px; }
    .tl .tl-web-order > .tl-icon { width: 30px; height: 30px; }
    .tl .tl-store.tl-store-ios, .tl .tl-store.tl-store-android { padding: 12px; gap: 10px; }
    .tl .tl-store.tl-store-ios > .tl-icon, .tl .tl-store.tl-store-android > .tl-icon { width: 32px; height: 32px; }
    .tl .tl-store.tl-store-ios small, .tl .tl-store.tl-store-android small { font-size: 9px; }
    .tl .tl-store.tl-store-ios strong, .tl .tl-store.tl-store-android strong { font-size: 16px; }
}
.tl .city-select-row {
        margin-top: 12px;
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }
.tl .city-daily-tip {
        font-family: 'Georgia', 'Palatino Linotype', serif;
        font-size: 14px;
        font-style: italic;
        font-weight: 600;
        color: #c2410c !important;
        letter-spacing: 0.02em;
        line-height: 1.4;
        text-shadow: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 340px;
        opacity: 0;
        transition: opacity 0.6s ease;
    }
.tl .city-daily-tip.visible { opacity: 1; }
.tl .live-stats-row {
        display: flex;
        gap: 12px;
        margin-top: 18px;
        flex-wrap: wrap;
    }
.tl .live-stat-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 14px;
        padding: 10px 16px 10px 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.10);
        min-width: 0;
        flex: 1 1 auto;
        max-width: 200px;
    }
.tl .live-stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
.tl .live-stat-icon.pink { background: rgba(239,68,68,0.12); }
.tl .live-stat-icon.blue { background: rgba(59,130,246,0.12); }
.tl .live-stat-icon.green { background: rgba(34,197,94,0.12); }
.tl .live-stat-body { display: flex; flex-direction: column; }
.tl .live-stat-label {
        font-size: 11px;
        color: #6b7280;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
    }
.tl .live-stat-label small {
        display: block;
        font-size: 10px;
        color: #9ca3af;
        font-weight: 400;
    }
.tl .live-stat-value {
        font-size: 22px;
        font-weight: 800;
        color: #111827;
        line-height: 1.1;
        letter-spacing: -0.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }
.tl .live-stat-value span {
        font-size: 13px;
        font-weight: 500;
        color: #6b7280;
        margin-left: 2px;
    }
@media (max-width: 576px) {
.tl .live-stat-card { max-width: 100%; padding: 9px 12px; }
.tl .live-stat-value { font-size: 19px; }
}
.tl .adv-strip {
        display: flex;
        align-items: stretch;
        gap: 0;
        margin-top: 14px;
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
        border: 1.5px solid rgba(var(--primary-color-rgb),0.22);
        border-radius: 16px;
        overflow: hidden;
    }
.tl .adv-item {
        display: flex;
        align-items: center;
        gap: 11px;
        flex: 1;
        padding: 13px 18px;
        position: relative;
    }
.tl .adv-item + .adv-item::before {
        content: '';
        position: absolute;
        left: 0; top: 16%; height: 68%;
        width: 1px;
        background: rgba(var(--primary-color-rgb),0.25);
    }
.tl .adv-icon-wrap {
        width: 44px; height: 44px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        background: rgba(var(--primary-color-rgb),0.13);
    }
.tl .adv-text { display: flex; flex-direction: column; }
.tl .adv-title {
        font-size: 13px;
        font-weight: 700;
        color: #1f2937;
        line-height: 1.25;
    }
.tl .adv-sub {
        font-size: 11px;
        color: #9a3412;
        margin-top: 2px;
        font-weight: 500;
    }
@media (max-width: 576px) {
.tl .adv-strip { flex-direction: column; }
.tl .adv-item + .adv-item::before { top: 0; left: 12%; width: 76%; height: 1px; }
}
.tl #citySelectBtn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: 2px dashed rgba(var(--primary-color-rgb),0.6);
        color: rgba(var(--primary-color-rgb),0.95);
        border-radius: 30px;
        padding: 8px 20px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background .18s, border-color .18s, color .18s;
        letter-spacing: .2px;
        line-height: 1.3;
    }
.tl #citySelectBtn:hover {
        background: rgba(var(--primary-color-rgb),.08);
        border-color: rgba(var(--primary-color-rgb),.9);
        color: #e87000;
    }
.tl .city-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.52);
        z-index: 99999;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
.tl .city-modal-overlay.open { display: flex; }
.tl .city-modal-box {
        background: #fff;
        border-radius: 20px;
        width: 100%;
        max-width: 400px;
        margin: 16px;
        box-shadow: 0 24px 64px rgba(0,0,0,.22);
        overflow: hidden;
        animation: tlCityIn .22s cubic-bezier(.34,1.56,.64,1);
    }
@keyframes tlCityIn {
        from { opacity:0; transform: translateY(28px) scale(.96); }
        to   { opacity:1; transform: translateY(0) scale(1); }
    }
.tl .city-modal-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 20px 22px 16px;
        border-bottom: 1px solid #f2f2f2;
    }
.tl .city-modal-header h3 {
        margin: 0 !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #1f1f39 !important;
        flex: 1;
    }
.tl .city-modal-close {
        background: #f4f4f4;
        border: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 18px;
        font-weight: 400;
        cursor: pointer;
        color: #777;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
        line-height: 1;
        transition: background .15s;
    }
.tl .city-modal-close:hover { background: #e8e8e8; color: #333; }
.tl .city-modal-body {
        padding: 22px 22px 26px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
.tl .city-select-group { display: flex; flex-direction: column; gap: 6px; }
.tl .city-select-group label {
        font-size: 12px;
        font-weight: 700;
        color: #888;
        letter-spacing: .5px;
        text-transform: uppercase;
    }
.tl .city-select-wrapper { position: relative; }
.tl .city-select-wrapper select {
        width: 100%;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        border: 1.5px solid #e4e4e4;
        border-radius: 10px;
        padding: 12px 40px 12px 14px;
        font-size: 15px;
        font-weight: 500;
        color: #1f1f39;
        background: #fafafa;
        cursor: pointer;
        transition: border-color .15s, box-shadow .15s;
        outline: none;
        line-height: 1.4;
    }
.tl .city-select-wrapper select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb),.12);
        background: #fff;
    }
.tl .city-select-chevron {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #bbb;
        width: 16px;
        height: 16px;
    }
.tl .city-confirm-btn {
        width: 100%;
        padding: 13px;
        border-radius: 12px;
        border: none;
        background: var(--primary-color);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: opacity .15s, transform .1s, box-shadow .15s;
        letter-spacing: .2px;
    }
.tl .city-confirm-btn:hover:not(:disabled) {
        opacity: .92;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(var(--primary-color-rgb),.35);
    }
.tl .city-confirm-btn:disabled { opacity: .35; cursor: not-allowed; }
.tl .banner-line {
    display: block;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}
.tl .banner-line--sm {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 600;
    line-height: 1.3;
}
.tl .banner-line--xl {
    font-size: clamp(24px, 4.5vw, 44px);
    font-weight: 800;
    line-height: 1.1;
}
.tl .banner-line--lg {
    font-size: clamp(18px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.15;
}
@media (max-width: 767px) {
.tl .banner-line--xl {
        font-size: clamp(22px, 7vw, 36px);
    }
.tl .banner-line--lg {
        font-size: clamp(16px, 5vw, 28px);
    }
.tl .banner-line--sm {
        font-size: clamp(13px, 3.5vw, 16px);
    }
}
@media (max-width: 400px) {
.tl .banner-line--xl {
        font-size: 22px;
    }
.tl .banner-line--lg {
        font-size: 18px;
    }
}
.tl .banner-left .banner-title::after {
    content: "";
    display: block;
    width: 68px;
    height: 6px;
    border-radius: 6px;
    margin-top: 14px;
    margin-left: 0;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
}
.tl .banner-left .banner-subtitle {
    color: #6b7585;
    font-weight: 400;
    max-width: 56ch;
    margin-top: 10px;
    margin-bottom: 22px;
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1.55;
    letter-spacing: 0.1px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Fit the original homepage controls into the white marketing layout. */
.tl .tl-hero-grid { grid-template-columns: 1.2fr 1fr; gap: 50px; min-height: 780px; padding-top: 52px; padding-bottom: 52px; }
.tl .tl-homepage-content { min-width: 0; }
.tl .tl-homepage-content .banner-title { color: #1f1f39; margin: 0; font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -1.3px; }
.tl .tl-homepage-content .banner-line--lg { margin-bottom: 3px; }
.tl .tl-homepage-content .banner-line--sm { margin-top: 5px; letter-spacing: -.3px; }
.tl .tl-homepage-content .banner-subtitle { margin-top: 14px; margin-bottom: 22px; }
.tl .main-search-input, .tl .main-search-input-item, .tl #autocomplete-container { min-width: 0; }
.tl .banner-search { gap: 15px; padding: 11px; height: 72px; border: 1px solid #f1f0ee; background: #fff; box-shadow: 0 8px 30px #1f1f3914; }
.tl .banner-search input { width: 100%; min-width: 0; padding: 0 8px; border: 0; background: transparent; color: #71718d; font-size: 16px; }
.tl .banner-search #autocomplete-container { flex: 1; }
.tl .banner-search button { background: var(--tl-orange); color: #fff; padding: 8px 20px; font-size: 19px; font-weight: 500; line-height: 32px; white-space: nowrap; }
.tl .banner-search button:hover { background: var(--tl-orange-dark); }
.tl .banner-search a { flex-shrink: 0; }
.tl .city-select-row { margin-top: 13px; }
.tl .city-daily-tip { max-width: 100%; font-size: 12px; }
.tl .live-stat-card { padding: 11px 13px; border: 1px solid #f1f0ee; box-shadow: 0 3px 13px #1f1f3910; }
.tl .live-stat-label { font-size: 10px; }
.tl .live-stat-label small { font-size: 9px; }
.tl .live-stat-value { font-size: 22px; }
.tl .adv-item { padding: 13px 12px; gap: 9px; }
.tl .adv-icon-wrap { width: 38px; height: 38px; border-radius: 11px; }
.tl .adv-title { font-size: 12px; }
.tl .adv-sub { font-size: 10px; }
.tl .tl-hero-art-column { min-width: 0; }
.tl .tl-hero-art-column > .tl-hero-apps { margin-top: 10px; }
.tl .tl-hero-art-column .tl-store-links { justify-content: center; }
.tl .tl-hero-art-column .tl-store { background: var(--tl-dark); border-color: var(--tl-dark); }
.tl .tl-hero-art-column .tl-store:hover { background: #3d3c49; }
.tl .tl-hero-web-link { display: flex; justify-content: center; margin: 12px auto 0; width: fit-content; color: var(--tl-orange-dark); font-size: 11px; }
.tl .tl-hero-handwritten { color: #846751; }
.tl .tl-hero-orbit { border-color: #e8e2d9; }
.tl .tl-hero-orbit::after { border-color: #ebe5dc; }
.tl .city-modal-overlay { padding: 10px; }
.tl .city-modal-box { max-height: calc(100dvh - 40px); overflow: auto; }

@media (max-width: 1150px) {
    .tl .tl-hero-grid { gap: 32px; }
    .tl .live-stats-row { gap: 8px; }
    .tl .live-stat-card { padding: 10px; gap: 8px; }
    .tl .live-stat-icon { width: 33px; height: 33px; }
    .tl .live-stat-label { font-size: 9px; }
    .tl .live-stat-value { font-size: 20px; }
    .tl .adv-item { padding: 12px 9px; gap: 7px; }
    .tl .adv-icon-wrap { width: 32px; height: 32px; }
    .tl .adv-title { font-size: 11px; }
    .tl .adv-sub { font-size: 9px; }
    .tl .banner-search { gap: 11px; }
    .tl .banner-search input { font-size: 13px; }
    .tl .banner-search button { padding: 7px 15px; font-size: 16px; }
}
@media (max-width: 900px) and (min-width: 651px) {
    .tl .tl-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 35px; }
    .tl .tl-homepage-content { width: min(650px,100%); margin: 0 auto; }
    .tl .tl-hero-art-column { width: min(480px,100%); margin: 0 auto; }
    .tl .tl-hero-visual { height: 490px; }
    .tl .tl-hero-sun { width: 400px; left: 30px; top: 55px; }
    .tl .tl-hero-orbit { width: 450px; left: 5px; top: 30px; }
    .tl .tl-hero-phone { left: 133px; top: 13px; transform: rotate(-9deg) scale(.9); }
    .tl .tl-floating-food-top { width: 133px; top: 65px; left: 20px; }
    .tl .tl-floating-food-top img { height: 112px; }
    .tl .tl-floating-food-bottom { width: 145px; right: 8px; bottom: 48px; }
    .tl .tl-floating-food-bottom img { height: 127px; }
    .tl .tl-hero-sticker { left: 25px; }
}
@media (max-width: 650px) {
    .tl .tl-hero-grid { min-height: 0; padding-top: 32px; padding-bottom: 30px; gap: 28px; }
    .tl .tl-homepage-content .banner-title { font-size: 36px; letter-spacing: -.9px; }
    .tl .tl-homepage-content .banner-title .banner-line--lg { font-size: 26px; }
    .tl .tl-homepage-content .banner-title .banner-line--xl { font-size: 30px; }
    .tl .tl-homepage-content .banner-title .banner-line--sm { font-size: 14px; }
    .tl .tl-homepage-content .banner-subtitle { font-size: 13px; margin-top: 13px; margin-bottom: 19px; }
    .tl .banner-search { height: 59px; padding: 7px; gap: 7px; }
    .tl .banner-search input { font-size: 12px; padding: 0 3px; }
    .tl .banner-search button { padding: 7px 13px; font-size: 13px; line-height: 28px; }
    .tl .banner-search #locationIcon svg { width: 20px; height: 20px; }
    .tl .city-select-row { gap: 10px; margin-top: 13px; }
    .tl #citySelectBtn { font-size: 12px; padding: 7px 13px; }
    .tl .city-daily-tip { font-size: 11px; white-space: normal; }
    .tl .live-stats-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 17px; }
    .tl .live-stat-card { min-width: 0; max-width: none; padding: 10px; gap: 8px; }
    .tl .live-stat-card:last-child { grid-column: 1 / -1; }
    .tl .live-stat-icon { width: 33px; height: 33px; }
    .tl .live-stat-label { font-size: 10px; }
    .tl .live-stat-label small { font-size: 9px; }
    .tl .live-stat-value { font-size: 21px; }
    .tl .live-stat-value span { font-size: 11px; }
    .tl .adv-strip { flex-direction: column; margin-top: 13px; }
    .tl .adv-item { padding: 11px 14px; gap: 12px; }
    .tl .adv-item + .adv-item::before { top: 0; left: 14px; width: calc(100% - 28px); height: 1px; }
    .tl .adv-icon-wrap { width: 36px; height: 36px; }
    .tl .adv-title { font-size: 12px; }
    .tl .adv-sub { font-size: 10px; }
    .tl .tl-hero-art-column { width: 100%; max-width: 390px; align-self: center; }
    .tl .tl-hero-art-column > .tl-hero-apps { margin-top: 16px; }
    .tl .tl-hero-web-link { font-size: 12px; margin-top: 15px; }
}
@media (max-width: 360px) {
    .tl .tl-homepage-content .banner-title .banner-line--lg { font-size: 21px; }
    .tl .tl-homepage-content .banner-title .banner-line--xl { font-size: 26px; }
    .tl .tl-homepage-content .banner-title .banner-line--sm { font-size: 13px; }
    .tl .live-stat-label { font-size: 8px; }
    .tl .live-stat-value { font-size: 19px; }
    .tl .live-stat-card { padding: 9px; gap: 6px; }
    .tl .live-stat-icon { width: 29px; height: 29px; }
    .tl .banner-search button { font-size: 12px; padding: 7px 11px; }
}