/* ============================================================
   site-chrome.css — Header + footer for the whole Yatra site.
   Loads on every page (not just marketing). Brand variables come
   from feature-landing.css when that's also enqueued; we redefine
   here so non-marketing pages still get the right palette.
   ============================================================ */

:root {
    --yc-bg:          #ffffff;
    --yc-border:      #e5e7eb;
    --yc-text:        #0f172a;
    --yc-text-mute:   #475569;
    --yc-text-soft:   #64748b;
    --yc-brand:       #2563eb;
    --yc-brand-dark:  #1d4ed8;
    --yc-brand-soft:  #dbeafe;
    --yc-footer-bg:   #0b1020;
    --yc-footer-text: #cbd5e1;
    --yc-footer-mute: #94a3b8;
    --yc-radius:      12px;
    --yc-shadow:      0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --yc-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Skip-link — visible only when focused, for keyboard users. */
.yc-skip {
    position: absolute;
    top: -45px; left: 12px;
    padding: 8px 14px;
    background: var(--yc-brand-dark);
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    z-index: 9999;
    transition: top .15s ease;
}
.yc-skip:focus { top: 12px; }

/* ============================================================
   HEADER
   ============================================================ */
.yc-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--yc-border);
    font-family: var(--yc-font);
}

/* Utility bar — thin dark band at the very top with Account + Support. */
.yc-header__top {
    background: #0f172a;
    color: rgba(255, 255, 255, .78);
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.yc-header__top-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 7px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.yc-header__top-msg {
    color: rgba(255, 255, 255, .55);
    letter-spacing: .01em;
}
.yc-header__top-nav {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}
.yc-header__top-nav li + li::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .15);
    margin: 0 4px;
}
.yc-header__top-nav a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 6px;
    transition: color .12s ease, background .12s ease;
}
.yc-header__top-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

/* Facebook community link in the utility bar — icon + label.
   The icon adopts Facebook's brand blue (#1877f2) so it pops
   against the dark utility-bar background without needing a
   colored badge. */
.yc-header__top-fb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.yc-header__top-fb svg {
    width: 14px;
    height: 14px;
    color: #4d8ff5;
    flex-shrink: 0;
    transition: color .12s ease;
}
.yc-header__top-fb:hover svg { color: #fff; }
.yc-header__top-fb svg path { fill: currentColor; }

.yc-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 32px;
}
.yc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--yc-text);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.yc-brand img,
.yc-brand .custom-logo {
    max-height: 32px;
    width: auto;
}
/* WordPress Customizer logo — wraps its own <a> tag, so we style that. */
.yc-brand-wrap { display: inline-flex; flex-shrink: 0; }
.yc-brand-wrap .custom-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}
.yc-brand-wrap .custom-logo {
    max-height: 38px;
    width: auto;
    height: auto;
    display: block;
}
/* Footer logo — uses a dedicated white-variant image (set via
   yatra_brand_logo_white_url filter or YATRA_BRAND_LOGO_WHITE_URL
   constant) so the artwork is genuinely white on the dark footer
   gradient. No CSS color filter applied; the source image is the
   final pixel. */
.yc-footer__logo {
    max-height: 40px;
    width: auto;
    height: auto;
    display: block;
}
.yc-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border-radius: 9px;
    font-weight: 800;
    font-size: 16px;
}

.yc-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.yc-nav__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}
.yc-nav__item { position: relative; }
.yc-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    color: var(--yc-text-mute);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .15s ease;
}

/* Underline pill — single ::after used for both hover and active.
   transparent by default, fills in on hover / current-page. */
.yc-nav__link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -2px;
    height: 2px;
    background: transparent;
    border-radius: 2px;
    transition: background .15s ease;
}

/* Hover state — brand-blue text + soft-blue underline. Visible enough
   to confirm interactivity on EVERY link (mega trigger or simple) and
   distinct from the active state (which gets a thicker underline +
   bolder weight). */
.yc-nav__link:hover,
.yc-nav__item--mega:hover > .yc-nav__link {
    color: var(--yc-brand-dark) !important;
    background: transparent;
}
.yc-nav__link:hover::after,
.yc-nav__item--mega:hover > .yc-nav__link::after {
    background: var(--yc-brand) !important;
}

/* Active page — bolder text, brand-colored underline. */
.yc-nav__link[aria-current="page"] {
    color: var(--yc-brand-dark);
    background: transparent;
    font-weight: 600;
}
.yc-nav__link[aria-current="page"]::after { background: var(--yc-brand-dark); }

/* When a mega menu trigger is open via JS hover-intent, show the
   same brand underline so the user sees which dropdown is active. */
.yc-nav__item--mega[data-mega-open="true"] > .yc-nav__link {
    color: var(--yc-brand-dark);
}
.yc-nav__item--mega[data-mega-open="true"] > .yc-nav__link::after { background: var(--yc-brand-dark); }

.yc-nav__caret {
    width: 12px; height: 12px;
    transition: transform .2s ease;
}
.yc-nav__item--has-menu:hover .yc-nav__caret,
.yc-nav__item--has-menu:focus-within .yc-nav__caret {
    transform: rotate(180deg);
}

.yc-nav__sub {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-radius);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .12), 0 6px 16px rgba(15, 23, 42, .06);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    list-style: none;
    margin: 0;
}
.yc-nav__item--has-menu:hover .yc-nav__sub,
.yc-nav__item--has-menu:focus-within .yc-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.yc-nav__sub a {
    display: block;
    padding: 10px 12px;
    color: var(--yc-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
}
.yc-nav__sub a:hover { background: var(--yc-brand-soft); color: var(--yc-brand-dark); }
.yc-nav__sub-label {
    display: block;
    font-size: 11.5px;
    color: var(--yc-text-soft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 2px;
}

/* Header brand <img> tag — when we render a logo URL directly. */
.yc-brand__img {
    max-height: 44px;
    width: auto;
    display: block;
}
.yc-brand__text { font-weight: 700; font-size: 18px; }

/* Tier badges inside mega menu titles. */
.yc-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 4px;
    background: var(--yc-brand-soft);
    color: var(--yc-brand-dark);
    vertical-align: 1px;
}
.yc-tag--agency { background: #fae8ff; color: #86198f; }
.yc-tag--growth { background: #ede9fe; color: #5b21b6; }
.yc-tag--free   { background: #dcfce7; color: #15803d; }

/* Mobile sheet divider — separates primary nav from utility (Account/Support). */
.yc-sheet__divider {
    height: 1px;
    background: var(--yc-border);
    margin: 12px 0;
    list-style: none;
}

/* ============================================================
   MEGA MENU
   Two flavors: Features (2-column grid of icon cards with tier-
   tinted icon containers) and Compare (3 cards with subtle
   competitor lettermarks). Positioned absolute relative to the
   sticky .yc-header so the menu spans wider than its trigger.
   The padding-top buffer keeps :hover alive while the cursor
   travels from trigger to menu.
   ============================================================ */
.yc-nav__item--mega { position: static; }

.yc-nav__mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: 1000px;
    max-width: calc(100vw - 32px);
    /* The padding-top is the transparent "bridge" between the trigger
       button and the visible card. It is part of the menu's bounding
       box, so hovering the bridge counts as hovering the menu. */
    padding-top: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 999;
    /* Asymmetric transitions: show is immediate, hide is delayed by
       250 ms so the menu stays pointer-active long enough for the
       cursor to travel from the button down to the menu without the
       menu turning non-interactive mid-flight. Without this delay,
       crossing the header's bottom-padding gap kills :hover and
       the menu vanishes before the cursor can catch it. */
    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility 0s linear .25s,
        pointer-events 0s linear .25s;
}
.yc-nav__mega--narrow { width: 760px; }

.yc-nav__mega-inner {
    background: #fff;
    border: 1px solid var(--yc-border);
    border-radius: 14px;
    box-shadow:
        0 28px 70px rgba(15, 23, 42, .14),
        0 10px 24px rgba(15, 23, 42, .06),
        0 0 0 1px rgba(15, 23, 42, .02);
    padding: 22px;
}

/* Three triggers keep the menu open:
   1. Hovering / focusing the trigger LI (initial open)
   2. Focus-within the LI (keyboard nav into the menu)
   3. Hovering the menu itself (the bridge that prevents the gap
      problem — once the menu is visible, moving into it keeps it
      open even after the trigger loses :hover). */
/* Four triggers keep the menu open:
   1. :hover on the trigger LI (fast cursors — pure CSS still works)
   2. :focus-within (keyboard nav into the trigger or menu)
   3. :hover on the menu itself (cursor caught the menu)
   4. data-mega-open="true" set by the JS hover-intent layer (slow
      cursors that take longer than 250 ms to cross the header gap) */
.yc-nav__item--mega:hover .yc-nav__mega,
.yc-nav__item--mega:focus-within .yc-nav__mega,
.yc-nav__item--mega[data-mega-open="true"] .yc-nav__mega,
.yc-nav__mega:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility 0s,
        pointer-events 0s;
}
.yc-nav__item--mega:hover .yc-nav__caret,
.yc-nav__item--mega:focus-within .yc-nav__caret,
.yc-nav__item--mega[data-mega-open="true"] .yc-nav__caret { transform: rotate(180deg); }

/* Grid containers */
.yc-nav__mega-grid { display: grid; gap: 4px; }
.yc-nav__mega-grid--two   { grid-template-columns: repeat(2, 1fr); }
.yc-nav__mega-grid--three { grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ─── Feature card (icon + title + description) ─── */
.yc-nav__mega-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    border-radius: 11px;
    text-decoration: none;
    background: transparent;
    transition: background .15s ease;
}
.yc-nav__mega-item:hover { background: #f8fafc; }
.yc-nav__mega-item:focus-visible {
    outline: 2px solid var(--yc-brand);
    outline-offset: -2px;
}

.yc-nav__mega-item__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--yc-brand-dark);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.yc-nav__mega-item__icon svg { width: 22px; height: 22px; }
.yc-nav__mega-item:hover .yc-nav__mega-item__icon {
    transform: scale(1.04);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .16);
}

/* Tier-tinted icon backgrounds. The `data-tier` attribute drives
   the color so the mega menu visually clusters items by tier even
   inside a single grid. */
.yc-nav__mega-item[data-tier="agency"] .yc-nav__mega-item__icon {
    background: linear-gradient(135deg, #fae8ff, #f0abfc);
    color: #86198f;
}
.yc-nav__mega-item[data-tier="agency"]:hover .yc-nav__mega-item__icon {
    box-shadow: 0 6px 16px rgba(134, 25, 143, .18);
}
.yc-nav__mega-item[data-tier="growth"] .yc-nav__mega-item__icon {
    background: linear-gradient(135deg, #ede9fe, #c4b5fd);
    color: #5b21b6;
}
.yc-nav__mega-item[data-tier="growth"]:hover .yc-nav__mega-item__icon {
    box-shadow: 0 6px 16px rgba(91, 33, 182, .18);
}
.yc-nav__mega-item[data-tier="pro"] .yc-nav__mega-item__icon {
    background: linear-gradient(135deg, #dbeafe, #93c5fd);
    color: #1d4ed8;
}

.yc-nav__mega-item__body { min-width: 0; flex: 1; padding-top: 1px; }
.yc-nav__mega-item__title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--yc-text);
    margin-bottom: 4px;
    letter-spacing: -.005em;
}
.yc-nav__mega-item__title .yc-tag {
    margin-left: 7px;
    padding: 2px 6px;
    font-size: 9.5px;
}
.yc-nav__mega-item__desc {
    display: block;
    font-size: 12.5px;
    color: var(--yc-text-mute);
    line-height: 1.55;
    letter-spacing: 0;
}

/* ─── Compare card (subtle lettermark + title + description) ─── */
.yc-nav__mega-card {
    display: block;
    padding: 18px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--yc-text);
    border: 1px solid var(--yc-border);
    background: #fff;
    position: relative;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.yc-nav__mega-card:hover {
    border-color: var(--yc-brand);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(29, 78, 216, .12);
}

.yc-nav__mega-card__mark {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: var(--yc-text-mute);
    border-radius: 9px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.yc-nav__mega-card:hover .yc-nav__mega-card__mark {
    background: var(--yc-brand-soft);
    color: var(--yc-brand-dark);
    transform: rotate(-4deg);
}

.yc-nav__mega-card h4 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--yc-text);
    letter-spacing: -.005em;
}
.yc-nav__mega-card p {
    margin: 0;
    font-size: 12.5px;
    color: var(--yc-text-mute);
    line-height: 1.55;
}
.yc-nav__mega-card::after {
    content: '→';
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--yc-text-soft);
    font-size: 16px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease, color .15s ease;
}
.yc-nav__mega-card:hover::after {
    opacity: 1;
    transform: translateX(0);
    color: var(--yc-brand-dark);
}

/* ─── Mega menu footer ─── */
.yc-nav__mega-footer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--yc-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.yc-nav__mega-footer__primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-left: -10px;
    border-radius: 8px;
    color: var(--yc-brand-dark);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    transition: background .12s ease;
}
.yc-nav__mega-footer__primary:hover { background: var(--yc-brand-soft); }
.yc-nav__mega-footer__primary svg { width: 15px; height: 15px; }

.yc-nav__mega-footer__secondary {
    color: var(--yc-text-mute);
    font-weight: 500;
    font-size: 13.5px;
    text-decoration: none;
    transition: color .12s ease;
}
.yc-nav__mega-footer__secondary:hover { color: var(--yc-text); }

/* Mega menus collapse to the existing mobile sheet at the 900px
   breakpoint — no special mobile mega-menu treatment needed because
   the sheet has its own stacked layout. */
@media (max-width: 900px) {
    .yc-nav__mega { display: none; }
}

.yc-cta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.yc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font-family: var(--yc-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    border-radius: 10px;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
    border: 1px solid transparent;
    cursor: pointer;
}
.yc-btn--ghost  { color: var(--yc-text); background: transparent; border-color: var(--yc-border); }
.yc-btn--ghost:hover { background: #f1f5f9; border-color: var(--yc-text-soft); color: var(--yc-text); }
.yc-btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    box-shadow: 0 1px 2px rgba(29, 78, 216, .25), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.yc-btn--primary:hover {
    /* Deeper, richer blue on hover — the previous transparent-shadow-only
       hover left the same-colored gradient looking inert. Going one full
       shade darker gives the button a "pressed" feel that reads on a
       white header background. */
    background: linear-gradient(180deg, #1d4ed8, #1e3a8a);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(29, 78, 216, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.yc-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(29, 78, 216, .25);
}

/* Mobile hamburger — hidden on desktop. */
.yc-hamburger {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--yc-border);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.yc-hamburger svg { width: 20px; height: 20px; }

/* ============================================================
   MOBILE SHEET — slide-in panel with dimmed backdrop.
   The JS portals this element to <body> on load so the CSS
   `position: fixed; inset: 0` is guaranteed to be relative to
   the viewport, not to some ancestor's containing block. The
   `!important` on the positioning props is paranoia — if a
   plugin or parent theme tries to override position/top/etc,
   the sheet still covers the screen. UX wins from the portal:
   no risk of being clipped by Blocksy's outer wrappers, no
   risk of Yoast injecting transforms, no risk of any plugin
   that wraps body content from breaking the overlay.
   ============================================================ */
.yc-sheet {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* dvh handles mobile browser chrome */
    z-index: 2147483000 !important; /* effectively top of stack */
    overscroll-behavior: contain;
}
.yc-sheet[data-open="true"] { display: block !important; }

.yc-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: yc-sheet-fade .22s ease forwards;
    cursor: pointer;
}

.yc-sheet__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88vw;
    max-width: 380px;
    background: #fff;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    animation: yc-sheet-slide .28s cubic-bezier(.2, .9, .25, 1) forwards;
    overflow: hidden;
}

@keyframes yc-sheet-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes yc-sheet-slide {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.yc-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--yc-border);
    flex-shrink: 0;
    background: #fff;
}
.yc-sheet__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--yc-text);
    font-weight: 700;
    font-size: 17px;
    line-height: 0;
}
.yc-sheet__brand img { max-height: 32px; width: auto; display: block; }
.yc-sheet__close {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    border: 1px solid var(--yc-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--yc-text);
    transition: background .12s ease, border-color .12s ease;
    padding: 0;
}
.yc-sheet__close:hover { background: #f1f5f9; border-color: var(--yc-text-soft); }
.yc-sheet__close svg { width: 18px; height: 18px; }

.yc-sheet__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 12px;
    -webkit-overflow-scrolling: touch;
}
.yc-sheet__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.yc-sheet__group-label {
    display: block;
    padding: 14px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--yc-text-soft);
}
.yc-sheet__primary {
    display: block;
    padding: 13px 12px;
    color: var(--yc-text);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 9px;
    transition: background .12s ease;
}
.yc-sheet__primary:hover { background: #f1f5f9; }
.yc-sheet__sub {
    list-style: none;
    margin: 0 0 6px;
    padding: 0 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.yc-sheet__sub a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    color: var(--yc-text);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: background .12s ease;
}
.yc-sheet__sub a:hover { background: #f1f5f9; }
.yc-sheet__sub-all {
    color: var(--yc-brand-dark) !important;
    font-weight: 600 !important;
}
.yc-sheet__secondary {
    display: block;
    padding: 11px 12px;
    color: var(--yc-text-mute);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: background .12s ease, color .12s ease;
}
.yc-sheet__secondary:hover { background: #f1f5f9; color: var(--yc-text); }
.yc-sheet__divider {
    height: 1px;
    background: var(--yc-border);
    margin: 10px 12px;
    list-style: none;
}

.yc-sheet__ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--yc-border);
    background: #fff;
    flex-shrink: 0;
}
.yc-sheet__ctas .yc-btn {
    justify-content: center;
    padding: 13px 16px;
    font-size: 15px;
    width: 100%;
}

/* Header responsive rules consolidated into the breakpoints block
   at the bottom of this file. */

/* ============================================================
   BREADCRUMB — visible HTML twin of the BreadcrumbList schema.
   Renders just below the header on inner pages. Schema microdata
   is also wired on the same elements so search engines see both.
   ============================================================ */
/* Full-bleed bar — same start color as the hero's linear-gradient
   so the breadcrumb row blends into the hero without a visible
   white seam at the top of the page. */
.yc-breadcrumb-bar {
    background: #fafbff;
}
.yc-breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px 14px;
    font-family: var(--yc-font);
    font-size: 13px;
}
.yc-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--yc-text-soft);
}
.yc-breadcrumb li {
    display: inline-flex;
    align-items: center;
}
.yc-breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 6px;
    color: var(--yc-text-soft);
    opacity: .5;
}
.yc-breadcrumb a {
    color: var(--yc-text-mute);
    text-decoration: none;
    transition: color .12s ease;
}
.yc-breadcrumb a:hover {
    color: var(--yc-brand-dark);
    text-decoration: underline;
}
.yc-breadcrumb [aria-current="page"] {
    color: var(--yc-text);
    font-weight: 500;
}
@media (max-width: 560px) {
    .yc-breadcrumb { padding: 10px 16px 0; font-size: 12.5px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.yc-footer {
    background: linear-gradient(180deg, var(--yc-footer-bg), #060914);
    color: var(--yc-footer-text);
    font-family: var(--yc-font);
    padding: 64px 24px 28px;
    /* margin-top removed — was painting a visible white gap whenever
       the section directly above the footer was also dark (e.g. the
       .yfl-finalcta CTA band). The final CTA sections already supply
       their own bottom padding, so a 0 margin lets the two dark bands
       merge into one continuous flush surface. */
    margin-top: 0;
}
.yc-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.yc-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.yc-footer__about .yc-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 14px;
    text-decoration: none;
    line-height: 0; /* tight wrap around the logo image */
}
.yc-footer__about p {
    color: var(--yc-footer-mute);
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 18px;
    max-width: 320px;
}
.yc-footer__socials { display: flex; gap: 10px; }
.yc-footer__socials a {
    display: inline-flex;
    width: 38px; height: 38px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    color: #f1f5f9;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.yc-footer__socials a:hover {
    background: rgba(37, 99, 235, .3);
    border-color: rgba(96, 165, 250, .5);
    color: #fff;
    transform: translateY(-1px);
}
.yc-footer__socials svg { width: 18px; height: 18px; }

.yc-footer__col h4 {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.yc-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.yc-footer__col a {
    color: var(--yc-footer-text);
    text-decoration: none;
    font-size: 14px;
    transition: color .12s ease;
}
.yc-footer__col a:hover { color: #fff; }
.yc-footer__col a .yc-footer__tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(37, 99, 235, .25);
    color: #93c5fd;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.yc-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    color: var(--yc-footer-mute);
    font-size: 13px;
}
.yc-footer__bottom a { color: var(--yc-footer-mute); text-decoration: none; transition: color .12s ease; }
.yc-footer__bottom a:hover { color: #fff; }
.yc-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   The header has six nav items + two CTAs + a logo, which crowds
   the row at typical laptop widths. Tighten progressively at 1180
   and 1024, then drop the ghost CTA at 980 to give the nav room,
   then collapse to hamburger at 900. The utility bar disappears
   below 720 to keep the mobile header lean.
   ============================================================ */

@media (max-width: 1180px) {
    .yc-header__inner { padding: 16px 22px; gap: 24px; }
    .yc-nav__list { gap: 0; }
    .yc-nav__link { padding: 8px 10px; font-size: 14px; }
    .yc-btn { padding: 9px 14px; font-size: 13.5px; }
}

@media (max-width: 1024px) {
    .yc-header__inner { padding: 15px 20px; gap: 18px; }
    .yc-nav__link { padding: 7px 8px; font-size: 13.5px; }
    .yc-brand__img { max-height: 40px; }
    .yc-cta-row { gap: 6px; }
    .yc-btn { padding: 8px 12px; font-size: 13px; }
}

@media (max-width: 980px) {
    /* Drop the ghost CTA before the nav, so the primary CTA still
       converts even on tighter laptop windows. */
    .yc-cta-row .yc-btn--ghost { display: none; }
}

@media (max-width: 900px) {
    .yc-nav, .yc-cta-row { display: none; }
    .yc-hamburger { display: inline-flex; margin-left: auto; }
    .yc-header__inner { gap: 12px; padding: 14px 18px; }
    .yc-brand__img { max-height: 36px; }
    .yc-brand-wrap .custom-logo { max-height: 32px; }
    .yc-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
    .yc-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    /* Hide the utility bar (Account / Support) on tablet-and-down;
       both items appear in the mobile sheet below. */
    .yc-header__top { display: none; }
}

@media (max-width: 560px) {
    .yc-header__inner { padding: 12px 16px; }
    .yc-brand__img { max-height: 32px; }
    .yc-brand-wrap .custom-logo { max-height: 28px; }
    .yc-footer { padding: 56px 18px 28px; }
    .yc-footer__top { grid-template-columns: 1fr; padding-bottom: 36px; gap: 28px; }
    .yc-footer__about p { max-width: 100%; }
    .yc-footer__bottom { font-size: 12.5px; }
    .yc-sheet { padding: 80px 18px 24px; }
    .yc-sheet__nav a { padding: 12px 10px; font-size: 16px; }
}

@media (max-width: 380px) {
    .yc-brand__img { max-height: 28px; }
    .yc-brand-wrap .custom-logo { max-height: 26px; }
    .yc-hamburger { width: 36px; height: 36px; }
}