/* ============================================================
   YBTS shared shell components — loaded by BOTH properties:
     - Laravel site: every layout that links custom.css links this
       file immediately before it (see resources/views/includes/layout.blade.php)
     - WordPress blog: enqueued by the Stack child theme
       (blog/wp-content/themes/stack-child/functions.php)
   Contents were carved verbatim out of custom.css so the booking
   CTA pill, mobile header bar, header dropdown polish and the
   site footer stay identical on the main site and the blog.
   EDIT THESE STYLES HERE, not in custom.css — changes deploy to
   both properties with the normal main-site deploy.
   ============================================================ */

/* ============================================================
   Site-wide booking CTA (.nav-cta) + mobile header bar + header
   dropdown polish. Reuse via the <x-book-cta> Blade component.
   ============================================================ */

.nav-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(132deg, #a83fb1 0%, #87348f 52%, #6d2a74 100%);
    color: #fff !important;
    border: 0;
    cursor: pointer;
    border-radius: 100px;
    padding: 9px 22px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.45;
    white-space: nowrap;
    box-shadow: 0 3px 6px -2px rgba(135, 52, 143, .28), 0 10px 24px -8px rgba(135, 52, 143, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-cta:visited, .nav-cta:active, .nav-cta:focus { color: #fff !important; }

/* sheen sweep on hover */
.nav-cta:before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: left .5s ease;
    pointer-events: none;
}

.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 9px -3px rgba(135, 52, 143, .3), 0 14px 30px -8px rgba(135, 52, 143, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
    filter: saturate(1.08);
}

.nav-cta:hover:before { left: 125%; }

.nav-cta:focus-visible { outline: 3px solid rgba(135, 52, 143, .4); outline-offset: 2px; }

.nav-cta__label-short { display: none; }

/* Compact nav on narrow desktops — the booking button used to be hidden entirely at 992-1255px */
@media all and (min-width: 992px) and (max-width: 1255px) {
    #menu1 .nav-cta { padding: 8px 17px; }
    #menu1 .nav-cta .nav-cta__label-full { display: none; }
    #menu1 .nav-cta .nav-cta__label-short { display: inline; }
    #menu1 .menu-horizontal > li:not(:last-child) { margin-right: 1em; }
    #menu1 .bar__module .menu-horizontal > li > .dropdown__trigger,
    #menu1 .bar__module .menu-horizontal > li > a { font-size: .93em !important; letter-spacing: .3px; }
}

/* Inside the expanded hamburger menu: full-width block */
@media all and (max-width: 991px) {
    #menu1 .nav-cta { display: flex; width: 100%; margin: 10px 0 4px; padding: 12px 22px; font-size: 14px; }
}

/* Compact pill that sits next to the hamburger, visible before opening the menu */
.nav-cta--mobile { padding: 7px 15px; font-size: 12px; flex: none; }

/* Hero-size variant (homepage cover CTA) — sits on a photo, so the glow leans darker */
.nav-cta--hero {
    padding: 14px 34px;
    font-size: 15px;
    letter-spacing: .07em;
    box-shadow: 0 6px 14px -4px rgba(43, 12, 47, .5), 0 18px 40px -10px rgba(135, 52, 143, .65), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.nav-cta--hero:hover {
    box-shadow: 0 8px 18px -5px rgba(43, 12, 47, .55), 0 24px 50px -12px rgba(135, 52, 143, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}

@media all and (max-width: 767px) {
    .nav-cta--hero { padding: 12px 28px; font-size: 14px; }
}

/* Flex mobile bar: logo scales down instead of colliding with the CTA on narrow phones */
.mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-bar__logo { flex: 0 1 auto; min-width: 0; }
.mobile-bar__logo .logo { max-width: 100%; height: auto; margin: 0; }
.mobile-bar-actions { flex: none; display: flex; align-items: center; gap: 15px; }
.mobile-bar-actions .hamburger-toggle { display: inline-flex; align-items: center; }

/* ---------------- Mega menu: shared dropdown polish ---------------- */
#menu1 .dropdown .dropdown__container {
    transform: translateY(10px);
    transition: opacity .28s cubic-bezier(.21, .61, .35, 1), transform .28s cubic-bezier(.21, .61, .35, 1);
}

#menu1 .dropdown:hover > .dropdown__container,
#menu1 .dropdown.dropdown--active > .dropdown__container { transform: translateY(0); }

#menu1 .dropdown__trigger { transition: color .15s ease; }
#menu1 .dropdown:hover > .dropdown__trigger { color: #87348f; }

/* ============================================================
   Private Yoga mega menu (.pym-*) + retreat menu rows (.rtm-*).
   Rendered on BOTH properties: the blog fetches the main site's
   header fragment (see /partials/blog-header), which contains
   this markup.
   ============================================================ */

/* ---------------- Private Yoga mega menu ---------------- */
.pym-reset {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* The theme JS shifts dropdown content under its trigger (window-width dependent,
       so it only showed on wide screens / Firefox). Pin the content to the container
       edge — the visual panel floats right via .pym-panel's margin-left: auto. */
    left: 0 !important;
}

.pym-panel {
    display: flex;
    max-width: 1000px;
    margin-left: auto;
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(135, 52, 143, .10);
    box-shadow: 0 30px 70px -22px rgba(53, 22, 58, .38), 0 6px 20px -8px rgba(53, 22, 58, .12);
    overflow: hidden;
    text-align: left;
}

/* Promo side */
.pym-promo {
    position: relative;
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 28px 26px;
    background-color: #4a1c50;
    background-size: cover;
    background-position: center 20%;
}

.pym-promo:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(43, 12, 47, .96) 0%, rgba(43, 12, 47, .74) 48%, rgba(43, 12, 47, .12) 100%);
}

.pym-promo > * { position: relative; }

.pym-promo__eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #f8c39a;
    margin-bottom: 8px;
}

.pym-promo__title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    color: #fff;
    margin: 0 0 16px;
}

.pym-promo__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    background: #fff;
    color: #87348f !important;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 10px 20px;
    box-shadow: 0 8px 20px -6px rgba(20, 5, 25, .45);
    transition: transform .18s ease, box-shadow .18s ease;
}

.pym-promo__cta .material-symbols-outlined { font-size: 17px; vertical-align: middle !important; transition: transform .2s ease; }
.pym-promo__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(20, 5, 25, .55); color: #6d2a74 !important; }
.pym-promo__cta:hover .material-symbols-outlined { transform: translateX(3px); }

.pym-promo__trust {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.pym-promo__trust .material-symbols-outlined {
    font-size: 15px;
    color: #f8a76f;
    vertical-align: middle !important;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Main side: the two path cards */
.pym-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 24px 26px 18px;
    min-width: 0;
}

.pym-cols { display: flex; gap: 14px; }

.pym-col {
    flex: 1 1 0;
    background: #fbf9fc;
    border: 1px solid #f1ebf4;
    border-radius: 14px;
    padding: 18px 18px 10px;
    min-width: 0;
}

.pym-col__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0e8f3;
    margin-bottom: 8px;
}

.pym-col__icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(135, 52, 143, .12), rgba(246, 144, 81, .18));
}

.pym-col__icon .material-symbols-outlined { font-size: 22px; color: #87348f; vertical-align: middle !important; }

.pym-col__titles { min-width: 0; flex: 1; display: flex; flex-direction: column; }

.pym-col__title {
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 700;
    color: #252525;
    line-height: 1.25;
    transition: color .15s ease;
}

.pym-col__sub { font-size: 12px; font-weight: 400; color: #8a8595; margin-top: 3px; line-height: 1.35; }

.pym-col__chev { flex: none; font-size: 18px !important; color: #c9aed1; vertical-align: middle !important; transition: transform .18s ease, color .18s ease; }

.pym-col__head:hover .pym-col__title { color: #87348f; }
.pym-col__head:hover .pym-col__chev { transform: translateX(3px); color: #87348f; }

.pym-links { list-style: none; margin: 0; padding: 0; }
.pym-links li { margin: 0; }

.pym-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 13.5px;
    color: #4a4653 !important;
    line-height: 1.4;
    transition: background .15s ease, color .15s ease;
}

.pym-links a .material-symbols-outlined { font-size: 18px; color: #a596ad; vertical-align: middle !important; transition: color .15s ease; }

.pym-links a .pym-links__chev {
    margin-left: auto;
    opacity: 0;
    transform: translateX(-4px);
    font-size: 16px;
    color: #87348f;
    transition: opacity .15s ease, transform .15s ease;
}

.pym-links a:hover { background: #f4ecf6; color: #87348f !important; }
.pym-links a:hover .material-symbols-outlined { color: #87348f; }
.pym-links a:hover .pym-links__chev { opacity: 1; transform: translateX(0); }

/* Social-proof footer */
.pym-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f1ebf4;
    font-size: 13px;
    color: #7c7787;
}

.pym-foot .material-symbols-outlined {
    font-size: 16px;
    color: #f6a222;
    vertical-align: middle !important;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.pym-foot a { color: #87348f !important; }
.pym-foot a:hover { text-decoration: underline !important; }

/* Promo-offer variant of the panel (shown while the new-client promo code is live) */
.pym-promo__badge {
    display: inline-block;
    align-self: flex-start;
    background: linear-gradient(132deg, #f6a222, #f69051);
    color: #2b0c2f;
    padding: 5px 12px;
    border-radius: 100px;
    letter-spacing: .16em;
    margin-bottom: 10px;
    box-shadow: 0 6px 16px -6px rgba(20, 5, 25, .55);
}

.pym-promo--offer .pym-promo__title {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 6px;
}

.pym-promo__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    margin: 0 0 7px;
}

.pym-promo__was {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
    text-decoration: line-through;
}

.pym-promo__meta {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 14px;
}

.pym-promo__code {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
}

/* ============================================================
   Landing-page header icon chip (headerIcon param of the
   page_title_imgbg / page_title_colorchanging includes) —
   frosted-glass version of the mega menu's .pym-col__icon,
   sized for photo/gradient hero backgrounds.
   ============================================================ */

.page-title__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px -10px rgba(20, 5, 25, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.page-title__icon .material-symbols-outlined {
    font-size: 30px;
    color: #fff;
    vertical-align: middle !important;
}

@media all and (max-width: 767px) {
    .page-title__icon { width: 48px; height: 48px; border-radius: 13px; }
    .page-title__icon .material-symbols-outlined { font-size: 25px; }
}

@media all and (max-width: 1199px) {
    .pym-promo { flex-basis: 260px; padding: 26px 24px 22px; }
}

@media all and (max-width: 991px) {
    .pym-panel { max-width: none; border-radius: 12px; border: none; box-shadow: none; }
    .pym-promo { display: none; }
    /* In the expanded hamburger menu the dropdown container inherits the menu's
       ~24px left offset while spanning the full viewport width, so its right edge
       clips. Shift the content back and keep symmetric inner gutters. */
    .pym-reset { margin-left: -24px; }
    .pym-main { padding: 6px 12px; }
    .pym-cols { flex-direction: column; gap: 10px; }
    .pym-col { padding: 14px 14px 8px; }
    /* block flow with an inline star: as a wrapping flex row, a long line
       (the Yoga Retreats foot) pushed the text onto its own flex line and
       left the star orphaned above it. One line always: the type scales
       down with the viewport instead of wrapping. */
    .pym-foot {
        display: block;
        margin-top: 12px;
        padding-top: 12px;
        text-align: center;
        white-space: nowrap;
        font-size: clamp(10.5px, 3.1vw, 12.5px);
    }
    .pym-foot .material-symbols-outlined { display: inline; font-size: 1.25em; vertical-align: -3px !important; margin-right: 4px; }
    .pym-foot span { display: inline; white-space: inherit; }
}

/* Promo variant: keep faces in frame for portrait-style photos (About menu
   team picture) instead of the default center-20% landscape crop. */
.pym-promo--top { background-position: center 30%; }

/* ---------------- Yoga Retreats mega menu (.rtm-*) ----------------
   Retreat rows inside the pym-panel shell of the Yoga Retreats dropdown. */

ul.rtm-list, ul.rtm-list:last-child {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.rtm-list li { margin: 0; }

.rtm-list a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 8px;
    border-radius: 10px;
    transition: background .15s ease;
}

.rtm-list a:hover { background: #f4ecf6; }

.rtm-item__media {
    flex: none;
    width: 54px;
    height: 42px;
    border-radius: 9px;
    overflow: hidden;
}

.rtm-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rtm-item__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(135, 52, 143, .12), rgba(246, 144, 81, .18));
}

.rtm-item__placeholder .material-symbols-outlined {
    font-size: 20px;
    color: #87348f;
    opacity: .6;
    vertical-align: middle !important;
}

.rtm-item__text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rtm-item__name {
    font-size: 13.5px;
    font-weight: 700;
    color: #252525;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s ease;
}

.rtm-list a:hover .rtm-item__name { color: #87348f; }

.rtm-item__meta {
    font-size: 11.5px;
    color: #8a8595;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtm-item__flag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #c2711d;
}

.rtm-empty { padding: 8px 8px 2px; }

.rtm-empty__lead {
    font-size: 13.5px;
    font-weight: 700;
    color: #252525;
    margin: 0 0 3px;
}

.rtm-empty__text {
    font-size: 12.5px;
    color: #8a8595;
    line-height: 1.5;
    margin: 0 0 6px;
}

/* ============================================================
   Site-wide footer (.ft-*) — dark plum brand band with an
   end-of-page booking CTA, link columns and a live review chip.
   Markup: resources/views/includes/footer.blade.php (Laravel)
           stack-child/inc/layout-footer-short-3-bg-secondary.php (blog)
   ============================================================ */

.ft {
    position: relative;
    overflow: hidden;
    background: #2b0c2f;
    color: rgba(255, 255, 255, .72);
    padding: 4.6em 0 2em;
}

/* gradient hairline along the top edge */
.ft:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #87348f, #f69051, #f6a222);
}

/* soft brand-colored glows in the corners (decoration only) */
.ft__glow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background:
        radial-gradient(560px 420px at 12% 0%, rgba(135, 52, 143, .38), transparent 68%),
        radial-gradient(520px 380px at 88% 8%, rgba(246, 144, 81, .14), transparent 70%),
        radial-gradient(640px 460px at 50% 118%, rgba(135, 52, 143, .22), transparent 72%);
}

/* big watermark lotus, breathing gently in the corner */
.ft__lotus {
    position: absolute;
    right: -46px;
    bottom: -58px;
    width: 260px;
    height: 260px;
    opacity: .07;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
    .ft__lotus { animation: ft-breathe 9s ease-in-out infinite; }
}

@keyframes ft-breathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.06) rotate(2deg); }
}

.ft .container { position: relative; }

/* ---- end-of-page CTA band ---- */
.ft-cta {
    text-align: center;
    padding-bottom: 3em;
    margin-bottom: 3em;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.ft-cta__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #f8c39a;
    margin-bottom: 12px;
}

.ft-cta__title {
    font-family: var(--font-heading);
    font-size: clamp(27px, 4.4vw, 42px);
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 26px;
    text-wrap: balance;
}

.ft-cta__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 18px auto 0;
    max-width: 620px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
}

.ft-cta__note .material-symbols-outlined {
    font-size: 16px;
    color: #7ed689;
    vertical-align: middle !important;
}

/* ---- link columns ---- */
.ft-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 44px;
    text-align: left;
}

.ft-brand__mark {
    display: inline-block;
    transition: opacity .18s ease;
}

.ft-brand__mark:hover { opacity: .85; }

/* white horizontal brand logo (500px source served at 250 CSS px for retina) */
.ft-brand__mark img {
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
}

.ft-brand__blurb {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .62);
    max-width: 320px;
    margin: 18px 0;
}

/* live review-score chip */
.ft-rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 100px;
    padding: 8px 17px;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.ft-rating:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    transform: translateY(-1px);
}

.ft-rating__stars { display: inline-flex; gap: 1px; }

.ft-rating__stars .material-symbols-outlined {
    font-size: 15px;
    color: #f6a222;
    vertical-align: middle !important;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.ft-rating__text {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
}

/* social circles */
ul.ft-social,
ul.ft-social:last-child {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.ft-social li { margin: 0; }

.ft-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff !important;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ft-social a .socicon { font-size: 15px; }

.ft-social a:hover {
    transform: translateY(-2px);
    background: linear-gradient(132deg, #a83fb1, #87348f);
    border-color: transparent;
    box-shadow: 0 10px 22px -8px rgba(135, 52, 143, .8);
}

.ft-col__title {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f8c39a;
    margin: 6px 0 14px;
}

ul.ft-links,
ul.ft-links:last-child {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ft-links li { margin: 0; }

.ft-links a {
    display: flex;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .72) !important;
    transition: color .15s ease;
}

/* leading chevron slides in on hover */
.ft-links a .material-symbols-outlined {
    flex: none;
    width: 19px;
    margin-left: -19px;
    font-size: 16px;
    color: #f69051;
    opacity: 0;
    transform: translateX(-6px);
    vertical-align: middle !important;
    transition: opacity .18s ease, transform .18s ease, margin-left .18s ease;
}

.ft-links a:hover { color: #fff !important; }

.ft-links a:hover .material-symbols-outlined {
    opacity: 1;
    transform: translateX(0);
    margin-left: 0;
}

/* ---- bottom bar ---- */
.ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, .09);
    margin-top: 3.2em;
    padding-top: 1.7em;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .45);
}

.ft-bottom__legal {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ft-bottom__legal a {
    color: rgba(255, 255, 255, .45) !important;
    transition: color .15s ease;
}

.ft-bottom__legal a:hover { color: #fff !important; }

.ft-version { opacity: .65; }

.ft-bottom__love {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 12.5px;
}

.ft-bottom__love .material-symbols-outlined {
    font-size: 13px;
    color: #f0813f;
    vertical-align: middle !important;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@media all and (max-width: 991px) {
    .ft-grid { grid-template-columns: repeat(3, 1fr); gap: 34px; }
    .ft-brand { grid-column: 1 / -1; }
}

@media all and (max-width: 767px) {
    .ft { padding: 3.4em 0 1.6em; }
    .ft-cta { padding-bottom: 2.4em; margin-bottom: 2.4em; }
    /* the note flows as centered text so wrapped lines stay centered */
    .ft-cta__note { display: block; text-align: center; padding: 0 24px; }
    .ft-cta__note .material-symbols-outlined { vertical-align: -3px !important; margin-right: 5px; }

    .ft-grid { grid-template-columns: 1fr; gap: 6px; }
    .ft-brand { margin-bottom: 20px; }
    .ft-col { border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 18px; }
    .ft-col__title { margin-top: 0; }

    /* keep tap targets obvious on touch: chevrons always visible */
    .ft-links a { padding: 8px 0; }
    .ft-links a .material-symbols-outlined { opacity: 1; transform: none; margin-left: 0; }

    .ft__lotus { width: 190px; height: 190px; right: -60px; bottom: -70px; opacity: .05; }

    .ft-bottom { flex-direction: column; align-items: center; text-align: center; margin-top: 2.4em; }
    .ft-bottom__legal { justify-content: center; }
}