/* Mobile layout: native scrolling, solid navigation surfaces, RPT red accents.
   Loaded after site.css so the established desktop layout stays independent. */
.nav-mobile-toggle { display: none; }

/* Offscreen transforms still paint under Safari's translucent browser chrome. */
.skip-link:not(:focus-visible) {
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    transform: none;
}
.skip-link:focus-visible {
    top: env(safe-area-inset-top, 0px);
    transform: translate(-50%, 0);
}

.nav-sheet {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: transparent;
    overflow: hidden;
    color-scheme: dark;
}
.nav-sheet:not([open]), .sheet-view[hidden] { display: none; }
.nav-sheet::backdrop { background: rgba(7, 11, 17, 0.75); }

@media screen and (max-width: 992px) {
    :root {
        --gutter: clamp(1.25rem, 5.3vw, 2rem);
        --nav-h: 4.25rem;
        --mobile-dock-clearance: calc(5.75rem + env(safe-area-inset-bottom, 0px));
        --step-0: 1rem;
    }
    html { background: #10151e; scroll-padding-top: calc(var(--nav-h) + 1rem); }
    body { padding-bottom: 0; }
    body::after { display: none; }
    body.nav-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
    main { min-width: 0; }
    main:focus { outline: none; }
    button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
    button, a { touch-action: manipulation; }
    input, select, textarea { font-size: 1rem; }
    .tag { font-size: 0.75rem; letter-spacing: 0.055em; }

    /* One consistent header, including when Safari expands its address bar. */
    .site-nav,
    .site-nav.is-condensed,
    .site-nav.is-condensed.is-over-media {
        --brand-dark: none;
        --brand-light: block;
        background: #10151e;
        color: #f5f7fa;
        border-bottom: 1px solid rgba(255,255,255,0.09);
        padding-top: env(safe-area-inset-top, 0px);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        transform: none;
    }
    .site-nav::after { display: none; }
    .nav-container { height: var(--nav-h); gap: 0.75rem; }
    .nav-brand { min-width: 0; align-items: center; }
    .site-nav .brand-logo--dark { display: none; }
    .site-nav .brand-logo--light { display: block; }
    .site-nav .brand-logo { width: clamp(9rem, 43vw, 12rem); height: auto; }
    .nav-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        flex: none;
        min-height: 44px;
        padding: 0.65rem 0.85rem;
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 12px;
        color: #fff;
        background: #1c222d;
        font-size: 0.875rem;
        font-weight: 550;
    }
    .nav-mobile-toggle .ico { width: 1.15rem; height: 1.15rem; }
    .nav-mobile-toggle:active { background: #343b48; }

    /* Three thumb targets in a compact floating dock. */
    .tab-bar {
        --text-hi: #fff;
        inset-inline: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px));
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: 29rem;
        margin-inline: auto;
        grid-template-columns: 1fr 1fr 1.35fr;
        align-items: stretch;
        gap: 0.2rem;
        padding: 0.375rem;
        border: 1px solid #3a404a;
        border-radius: 20px;
        background: #141a24;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 8px 30px rgba(0,0,0,0.28);
    }
    .tab-item {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
        min-height: 48px;
        padding: 0.65rem 0.3rem;
        gap: 0.4rem;
        color: #dce1e8;
        border-radius: 14px;
    }
    .tab-item span {
        font-family: var(--display);
        font-size: 0.875rem;
        font-weight: 550;
        letter-spacing: -0.015em;
        text-transform: none;
        line-height: 1.2;
    }
    .tab-item .ico { font-size: 1rem; }
    .tab-item[aria-current='page'] { color: #fff; background: #2a3443; }
    .tab-item--cta, .tab-item--cta[aria-current='page'] { background: #d92e25; color: #fff; }
    .tab-item--cta[aria-current='page'] .ico { color: #fff; }
    .tab-item:active { background: #394352; color: #fff; }
    .tab-item--cta:active { background: #b8241c; }
    .js .home-page:not(.mobile-dock-visible) .tab-bar { visibility: hidden; }
    body.nav-open .tab-bar, body.dock-settling .tab-bar, body.nav-open .cookie-note, body.nav-open .to-top { visibility: hidden; }
    body:has(input:focus, textarea:focus, select:focus) .tab-bar { visibility: hidden; }

    /* The dialog owns the viewport. Every view owns just one scroll container. */
    .nav-sheet-panel {
        inset: 0;
        border-radius: 0;
        background: #10151e;
        box-shadow: none;
        transform: none;
        transition: none;
    }
    .sheet-view { min-height: 0; transition: none; }
    .nav-sheet img.img-fade { opacity: 1; transition: none; }
    .sheet-bar, .sheet-view--sub .sheet-bar {
        flex: none;
        min-height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
        padding: calc(0.7rem + env(safe-area-inset-top, 0px)) var(--gutter) 0.7rem;
        border-bottom: 1px solid #2a3039;
        background: #10151e;
    }
    .sheet-brand { width: clamp(9rem, 43vw, 12rem); height: auto; }
    .sheet-close { width: 44px; height: 44px; background: #232a35; border: 1px solid #3b424e; border-radius: 14px; }
    .sheet-close .ico { font-size: 1.2rem; }
    .sheet-back { min-height: 44px; border: 0; padding-left: 0; background: none; font-size: 1rem; }
    .sheet-scroll {
        flex: 1 1 0%;
        min-height: 0;
        min-width: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        padding: 1.6rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
    }
    .sheet-eyebrow { color: #ff746b; font: 0.75rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.8rem; }
    .sheet-root-title { font-size: clamp(2rem, 8.5vw, 3.25rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.05em; text-transform: none; margin: 0 0 1.5rem; color: #fff; }
    .sheet-tiles { gap: 0.7rem; }
    .sheet-tile { height: auto; min-height: 10.25rem; border: 1px solid #444b57; border-radius: 16px; box-shadow: none; }
    .sheet-tile::after { background: linear-gradient(180deg, rgba(8,13,21,0.1), rgba(8,13,21,0.8) 45%, #080d15); }
    .sheet-tile-copy { position: relative; inset: auto; min-height: 10.25rem; padding: 2.6rem 0.9rem 1rem; display: flex; justify-content: flex-end; }
    .sheet-tile-copy .tag { font: 0.625rem var(--mono); letter-spacing: 0; color: #ff928b; line-height: 1.5; }
    .sheet-tile-copy .tag::before, .sheet-tile-copy .tag::after { display: none; }
    .sheet-tile-copy strong { font-size: clamp(1.3rem, 5.4vw, 1.9rem); letter-spacing: -0.045em; line-height: 1.15; }
    .sheet-tile-copy > span:last-child { font-size: 0.875rem; line-height: 1.4; color: #c2c9d3; }
    .sheet-groups { margin-top: 1.5rem; border-top: 1px solid #303641; }
    .sheet-group { min-height: 78px; padding: 1rem 0; gap: 1rem; }
    .sheet-group-text strong { font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.025em; }
    .sheet-group-text span { font: 0.875rem/1.4 var(--display); text-transform: none; letter-spacing: 0; color: #aeb8c6; white-space: normal; overflow: visible; text-overflow: clip; }
    .sheet-group .ico--chev { color: #ff746b; }
    .sheet-foot { margin-top: 1.5rem; }
    .sheet-foot .btn { min-height: 54px; justify-content: space-between; border-radius: 12px; }
    .sheet-foot-links { gap: 1.5rem; flex-wrap: wrap; }
    .sheet-foot-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.875rem; }
    .sheet-title { margin-bottom: 1.5rem; font-size: 2.5rem; letter-spacing: -0.045em; text-transform: none; }
    .sheet-card { border: 1px solid #343d4c; background: #191f2b; border-radius: 16px; box-shadow: none; }
    .sheet-colhead { color: #ff928b; font-size: 0.75rem; }
    .sheet-link { padding-block: 1rem; }
    .sheet-link-text strong { font-size: 1rem; }
    .sheet-link-text > span { font-size: 0.875rem; line-height: 1.45; color: #b8c2d0; white-space: normal; overflow: visible; text-overflow: clip; }

    /* Keep the opening copy readable without consuming two phone screens. */
    .hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 2.5rem); padding-bottom: 2.75rem; }
    .hero-inner { gap: 2rem; }
    .hero-eyebrow { margin-bottom: 1.5rem; }
    .hero-eyebrow, .hero-sub, .hero-actions, .hero-runsheet { animation: none; }
    .hero h1 { font-size: clamp(2.25rem, 7.8vw, 4rem); line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; }
    .hero--landing h1 { font-size: clamp(2.2rem, 8.8vw, 4.5rem); font-weight: 650; text-transform: none; }
    .hero--landing .hero-line { display: inline; overflow: visible; }
    .hero--landing .hero-line > span { display: inline; animation: none; }
    .hero--landing .hero-line + .hero-line::before { content: ' '; }
    .hero--landing .hero-line:last-child { display: block; margin-top: 0.1em; }
    .hero h1 em { animation: none; color: #ff5d51; text-shadow: none; }
    .hero-sub { font-size: 1rem; line-height: 1.65; color: #ccd3dc; margin-bottom: 1.6rem; }
    .hero-scrim { background: linear-gradient(180deg, rgba(9,15,25,0.48), rgba(9,15,25,0.68) 48%, #10151e 100%), linear-gradient(90deg, rgba(9,15,25,0.65), transparent); }
    .hero-media { animation: none; }
    .hero-media--video, .log-media--video { opacity: 0; transition: opacity 0.3s ease; }
    .hero-media--video.is-playing, .log-media--video.is-playing { opacity: 1; }
    .hero-beam { display: none; }
    .hero-actions { gap: 0.65rem; }
    .hero-actions .btn { min-height: 54px; padding: 0.9rem 1.1rem; border-radius: 12px; justify-content: space-between; font-size: 1rem; }
    .hero-actions .btn--ghost { background: rgba(255,255,255,0.055); border-color: #58616f; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .hero-runsheet {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.15rem;
        padding: 1.4rem 0 0;
        border: 0;
        border-top: 1px solid #4b535f;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }
    .hero-runsheet > div:last-child { grid-column: 1 / -1; }
    .hero-runsheet dt { font: 0.75rem/1.4 var(--display); letter-spacing: 0; text-transform: none; color: #aeb8c6; }
    .hero-runsheet dt::before, .hero-runsheet dt::after { display: none; }
    .hero-runsheet dd { font-size: 1.75rem; line-height: 1.2; }
    .hero-runsheet > div:last-child dd { font-size: 1rem; }
    .log-header { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 2.5rem); }
    .band, .duo { padding-block: 3.5rem; }
    .btn { min-height: 48px; }
    .js .intro { display: none; }

    /* Footer contact details get the full width; store badges sit on their own row. */
    .site-footer { background: #10151e; padding-bottom: var(--mobile-dock-clearance); }
    .footer-main { padding: 2.75rem var(--gutter) 1rem; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p { display: none; }
    .footer-logo-img { width: 12rem; height: auto; margin-bottom: 0; }
    .footer-heading { font: 0.75rem var(--mono); color: #f2f4f7; margin-bottom: 0.75rem; }
    .footer-heading::before, .footer-heading::after { display: none; }
    .footer-links { gap: 0; }
    .footer-links a { display: flex; align-items: center; min-height: 44px; font-size: 0.875rem; line-height: 1.45; color: #bac3cf; padding-block: 0.4rem; margin-block: 0; }
    .footer-col:last-child { grid-column: 1 / -1; display: block; border-top: 1px solid #333b47; padding-top: 1.75rem; }
    .footer-contact { gap: 0.4rem; }
    .footer-contact li { min-height: 44px; }
    .footer-contact a { min-width: 0; min-height: 44px; display: flex; align-items: center; margin-block: 0; font-size: 1rem; overflow-wrap: anywhere; color: #eef2f5; }
    .footer-col:last-child > .footer-heading--spaced { margin-top: 1.75rem; }
    .footer-apps { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
    .footer-apps .app-badge { min-height: 44px; display: inline-flex; align-items: center; }
    .footer-apps .app-badge img { height: 40px; width: auto; }
    .footer-col:last-child > .social-link { margin-top: 1.25rem; }
    .footer-word { padding: 1.75rem var(--gutter) 0; }
    .footer-word-line { font-size: clamp(2.5rem, 10.7vw, 5rem); letter-spacing: -0.06em; line-height: 0.98; }
    .footer-word-cap { gap: 0.5rem 1rem; padding-top: 1rem; margin-top: 1.25rem; font-size: 0.75rem; }
    .footer-bottom { padding: 1.5rem var(--gutter) 0; font: 0.75rem/1.6 var(--display); letter-spacing: 0; text-transform: none; color: #aeb8c6; }
    .footer-bottom p { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
    .to-top { right: 1rem; bottom: var(--mobile-dock-clearance); width: 44px; height: 44px; box-shadow: none; background: #202a38; }
    .cookie-note { bottom: var(--mobile-dock-clearance); background: #f3f5f8; border-radius: 14px; color: #263348; font-size: 0.875rem; box-shadow: 0 6px 24px #0003; }

    /* Chat: an icon button sitting above the dock, back to top stacked over it. The
       notice spans the width here, so the button waits until it is dismissed. */
    .chat-launch { right: 1rem; bottom: var(--mobile-dock-clearance); width: 48px; height: 48px; padding: 0; justify-content: center; }
    .chat-launch .chat-launch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .chat-launch.is-loading .chat-launch-label { position: static; width: auto; height: auto; clip-path: none; }
    .chat-launch.is-loading { width: auto; padding: 0 1rem 0 0.85rem; }
    .cookie-note:not([hidden]) ~ .chat-launch { visibility: hidden; }
    body.nav-open .chat-launch { visibility: hidden; }
    .has-chat .to-top { bottom: calc(var(--mobile-dock-clearance) + 56px); }
    .chat-live .to-top { bottom: calc(var(--mobile-dock-clearance) + 72px); }

    /* HubSpot's own launcher, once it has taken over: lift it clear of the dock. When
       the conversation is open HubSpot goes full screen and this steps aside. */
    html:not(.hs-messages-widget-open) #hubspot-messages-iframe-container { bottom: calc(var(--mobile-dock-clearance) - 1rem) !important; }
    .cookie-note .btn { min-width: 44px; min-height: 44px; }
}

@media screen and (max-width: 359px) {
    .tab-item { flex-direction: column; gap: 0.2rem; }
    .tab-item span { font-size: 0.8125rem; }
    .tab-item--cta { flex-direction: row; }
    .sheet-tiles { grid-template-columns: 1fr; }
    .sheet-tile, .sheet-tile-copy { min-height: 9rem; }
}

@media screen and (max-width: 992px) and (orientation: landscape) {
    :root { --gutter: max(1.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
    .sheet-root-title br { display: none; }
}

@media print {
    .nav-mobile-toggle, .nav-sheet, .tab-bar { display: none !important; }
}