/* ============================================
   Lovely site chrome
   --------------------------------------------
   Shared tokens, liquid-glass surfaces, buttons, the simplified header,
   the footer and the cookie banner. Every class is prefixed `lv-` so this
   file can sit next to styles.css on the older pages without collisions.
   Colors are the existing brand palette from styles.css. Do not add new ones.
   ============================================ */

:root {
    --lv-black: #1c1c1f;
    --lv-graphite: #303036;
    --lv-dark-gray: #3d3d44;
    --lv-gray: #6b6b6b;
    --lv-light-gray: #a0a0a0;
    --lv-almond: #FFDDD2;
    --lv-gold: #F5B740;
    --lv-off-white: #f5f5f5;
    --lv-white: #ffffff;
    --lv-coral: #FC5130;
    --lv-coral-hover: #e8432a;
    --lv-sky: #30BCED;

    --lv-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --lv-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
    --lv-pad: clamp(20px, 5vw, 64px);
    --lv-max: 1160px;
    --lv-header-h: 72px;

    --lv-glass-fill: rgba(255, 255, 255, 0.06);
    --lv-glass-line: rgba(255, 255, 255, 0.1);
    --lv-glass-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.7);
}

/* --- Liquid glass surface ------------------------------------------------ */

.lv-glass {
    position: relative;
    background: var(--lv-glass-fill);
    border: 1px solid var(--lv-glass-line);
    box-shadow: var(--lv-glass-shadow);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* --- Icons ---------------------------------------------------------------- */

.lv-i {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lv-i--fill {
    fill: currentColor;
    stroke: none;
}

/* --- Buttons --------------------------------------------------------------
   Flat color, no glow and no sheen. Hover is a small lift and a darker tone. */

.lv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 26px;
    border: 0;
    border-radius: 999px;
    font-family: var(--lv-font);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--lv-white);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: var(--lv-coral);
    transition: transform 0.4s var(--lv-ease), background-color 0.3s var(--lv-ease);
    -webkit-tap-highlight-color: transparent;
}

.lv-btn .lv-i {
    font-size: 1.1em;
    transition: transform 0.4s var(--lv-ease);
}

@media (hover: hover) {
    .lv-btn:hover {
        transform: translateY(-2px);
        background: var(--lv-coral-hover);
    }

    .lv-btn:hover .lv-i {
        transform: translateX(3px);
    }
}

.lv-btn:active {
    transform: translateY(0) scale(0.98);
}

.lv-btn:focus-visible,
.lv-footer a:focus-visible,
.lv-logo:focus-visible {
    outline: 2px solid var(--lv-sky);
    outline-offset: 3px;
}

.lv-btn--sm {
    padding: 12px 20px;
    font-size: 15px;
}

/* No backdrop blur here on purpose: a blurred element inside a parent that is
   fading in only gets its blur once the fade ends, which shows as a pop. */
.lv-btn--glass {
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 0 0 1px var(--lv-glass-line);
}

@media (hover: hover) {
    .lv-btn--glass:hover {
        background: rgba(255, 255, 255, 0.15);
    }
}

/* --- Header: logo and a single Download button ---------------------------- */

.lv-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--lv-header-h);
    padding: 0 var(--lv-pad);
    font-family: var(--lv-font);
    /* Fades page content out underneath instead of a hard bar. */
    background: linear-gradient(to bottom, rgba(28, 28, 31, 0.9), rgba(28, 28, 31, 0.55) 55%, rgba(28, 28, 31, 0));
    pointer-events: none;
}

.lv-header > * {
    pointer-events: auto;
}

/* On phones the header steps aside once the footer is on screen: the footer
   has its own logo, and two of each reads as clutter. */
@media (max-width: 860px) {
    .lv-header {
        transition: opacity 0.4s var(--lv-ease), transform 0.5s var(--lv-ease);
    }

    .at-footer .lv-header {
        opacity: 0;
        transform: translate3d(0, -12px, 0);
    }

    .at-footer .lv-header > * {
        pointer-events: none;
    }
}

.lv-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--lv-font);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lv-white);
    text-decoration: none;
    border-radius: 8px;
}

.lv-logo img {
    width: 30px;
    height: 36px;
    object-fit: contain;
}

/* --- Footer --------------------------------------------------------------- */

.lv-footer {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 6vw, 72px) var(--lv-pad) 0;
    font-family: var(--lv-font);
    color: var(--lv-white);
    background: var(--lv-black);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lv-footer-inner {
    position: relative;
    z-index: 1;
    max-width: var(--lv-max);
    margin: 0 auto;
}

/* The brand line that opens the footer, set at the size of the header logo. */
.lv-footer-brand .lv-footer-tag {
    max-width: none;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--lv-white);
}

.lv-footer-cols {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: 32px;
}

.lv-footer-brand p {
    margin: 14px 0 26px;
    max-width: 30ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lv-light-gray);
}

.lv-footer-col h3 {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--lv-gray);
}

.lv-footer-col a {
    display: block;
    width: fit-content;
    padding: 6px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--lv-off-white);
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.3s var(--lv-ease), transform 0.4s var(--lv-ease);
}

@media (hover: hover) {
    .lv-footer-col a:hover {
        color: var(--lv-coral);
        transform: translateX(3px);
    }
}

.lv-social {
    display: flex;
    gap: 10px;
}

.lv-social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 20px;
    color: var(--lv-white);
    text-decoration: none;
    transition: transform 0.5s var(--lv-ease), color 0.3s var(--lv-ease);
}

@media (hover: hover) {
    .lv-social a:hover {
        transform: translateY(-3px);
        color: var(--lv-coral);
    }
}

.lv-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    margin-top: clamp(32px, 5vw, 56px);
    font-size: 13px;
    color: var(--lv-gray);
}

.lv-footer-bottom p {
    margin: 0;
}

/* Oversized wordmark fading into the bottom edge. */
.lv-footer-mark {
    display: block;
    margin: clamp(8px, 2vw, 24px) auto -0.26em;
    font-size: clamp(110px, 27vw, 380px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    text-align: center;
    color: transparent;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
    pointer-events: none;
}

/* Phones: the whole footer is sized to sit on a single screen. The tagline
   and the social icons share the first row with the brand line under them,
   the three link lists sit side by side, and type and spacing grow with the
   height of the screen so a tall phone is filled rather than left empty. */
@media (max-width: 760px) {
    /* The three lists share the row in proportion to their longest links
       (Legal has the longest, Product the shortest), so no link has to wrap. */
    .lv-footer-cols {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.28fr);
        gap: clamp(16px, 3.4lvh, 36px) 10px;
    }

    .lv-footer-brand {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: clamp(8px, 1.6lvh, 16px) 16px;
    }

    .lv-footer-brand .lv-footer-tag {
        font-size: clamp(22px, 3.4lvh, 30px);
    }

    .lv-footer-brand p:not(.lv-footer-tag) {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
    }

    .lv-social {
        grid-column: 2;
        grid-row: 1;
    }

    .lv-social a {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 18px;
    }

    .lv-footer-col h3 {
        margin-bottom: clamp(4px, 1lvh, 10px);
        font-size: 12px;
    }

    /* Grows with the height of the screen, but never past what the width
       of the screen can hold on one line. */
    .lv-footer-col a {
        padding: clamp(4px, 1.5lvh, 14px) 0;
        font-size: min(clamp(13.5px, 1.9lvh, 16px), 4vw);
        line-height: 1.35;
        white-space: nowrap;
    }

    .lv-footer-bottom {
        display: grid;
        gap: 2px;
        margin-top: clamp(14px, 2.6lvh, 28px);
        font-size: 11.5px;
    }

    /* More of the wordmark shows on a phone, so it closes the screen
       instead of leaving a gap above a sliver of lettering. */
    .lv-footer-mark {
        margin-top: 0;
        margin-bottom: -0.14em;
        font-size: 28vw;
    }
}

/* --- Wave background ------------------------------------------------------
   The black ribbon from the app, on graphite. It drifts sideways all the
   time and glides to a new height and tilt for each section, so the page
   feels like one continuous surface. Flat fills only: no glow. */

.waves {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    /* Taller than the small viewport, so no strip is left bare at the bottom
       while a phone's toolbar slides away. */
    height: 100vh;
    height: 100lvh;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--lv-graphite);
}

.wave {
    position: absolute;
    top: 0;
    left: -25vw;
    width: max(300vw, 2400px);
    height: 64vh;
    /* The ribbon starts 25vw left of the screen, so 75vw along it is the
       middle of the screen: tilting pivots there instead of far off-screen. */
    transform-origin: 75vw 50%;
    transform: translate3d(0, var(--y, 60vh), 0) rotate(var(--r, -5deg));
    transition: transform 1.8s var(--lv-ease);
    will-change: transform;
}

/* While the window is being dragged to a new size the ribbons follow it
   directly; their glide would otherwise lag behind and wobble. */
.is-resizing .wave {
    transition: none;
}

.wave svg {
    display: block;
    width: 100%;
    height: 100%;
    /* The path repeats twice, so sliding by half is a seamless loop. */
    animation: wave-drift 60s linear infinite;
}

.wave--a {
    color: var(--lv-black);
}

.wave--b {
    height: 40vh;
    color: var(--lv-dark-gray);
    opacity: 0.55;
}

.wave--b svg {
    animation-duration: 85s;
    animation-direction: reverse;
}

@keyframes wave-drift {
    to { transform: translate3d(-50%, 0, 0); }
}

/* Inner pages: one journey from the top of the page to the bottom. Where the
   browser supports it the journey is bound straight to the scroll position
   and runs off the main thread, so it cannot stutter while the page is being
   dragged. Elsewhere pages.js drives it with a smoothed value, and the CSS
   transition steps aside so the two never fight. */
.waves--journey .wave {
    transition: none;
}

@supports (animation-timeline: scroll()) {
    .waves--journey .wave {
        animation: wave-journey-a linear both;
        animation-timeline: scroll(root block);
    }

    .waves--journey .wave--b {
        animation-name: wave-journey-b;
    }
}

@keyframes wave-journey-a {
    from { transform: translate3d(0, 58vh, 0) rotate(-6deg); }
    to { transform: translate3d(0, -14vh, 0) rotate(6deg); }
}

@keyframes wave-journey-b {
    from { transform: translate3d(0, -12vh, 0) rotate(5deg); }
    to { transform: translate3d(0, 72vh, 0) rotate(-5deg); }
}

/* Long reading pages (policies): the same wave, slower and calmer. Its travel
   is tied to how far the page has been scrolled, so it finishes its journey
   exactly as the reader reaches the end. */
.waves--slow .wave svg {
    animation-duration: 130s;
}

.waves--slow .wave--b svg {
    animation-duration: 170s;
}

body.has-waves {
    background: var(--lv-graphite);
}

body.has-waves .legal-content {
    position: relative;
    z-index: 1;
    background: transparent;
}

body.has-waves .lv-footer {
    z-index: 1;
}

/* --- Reveal on entry -------------------------------------------------------
   Hidden only when JS is running, so the page still reads without it. */

.js [data-r] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.7s var(--lv-ease), transform 0.8s var(--lv-ease);
    transition-delay: calc(var(--i, 0) * 80ms + 60ms);
}

.js .is-in [data-r],
.js [data-r].is-in {
    opacity: 1;
    transform: none;
}

/* --- Cookie banner (markup comes from cookie-consent.js) ------------------- */

.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 200;
    width: min(680px, calc(100% - 24px));
    padding: 0;
    font-family: var(--lv-font);
    color: var(--lv-white);
    background: rgba(48, 48, 54, 0.78);
    border: 1px solid var(--lv-glass-line);
    border-radius: 22px;
    box-shadow: var(--lv-glass-shadow);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    opacity: 0;
    transform: translate3d(-50%, 24px, 0);
    transition: opacity 0.6s var(--lv-ease), transform 0.7s var(--lv-ease);
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}

.cookie-banner-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: none;
    margin: 0;
    padding: 18px 20px;
}

.cookie-banner-text h2 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--lv-white);
}

.cookie-banner-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--lv-light-gray);
}

.cookie-banner-text a {
    color: var(--lv-coral);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner-text a:hover {
    color: var(--lv-almond);
}

.cookie-banner-actions {
    display: flex;
    flex: none;
    gap: 8px;
}

.cookie-banner-btn {
    padding: 11px 18px;
    font-family: var(--lv-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--lv-white);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--lv-glass-line);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.3s var(--lv-ease), transform 0.4s var(--lv-ease);
}

.cookie-banner-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.cookie-banner-btn-primary {
    background: var(--lv-coral);
    border-color: transparent;
}

.cookie-banner-btn-primary:hover {
    background: var(--lv-coral-hover);
}

.cookie-banner-btn:active {
    transform: scale(0.97);
}

.cookie-banner-btn:focus-visible {
    outline: 2px solid var(--lv-sky);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .cookie-banner {
        border-radius: 18px;
    }

    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px;
    }

    .cookie-banner-text h2 {
        font-size: 14px;
    }

    .cookie-banner-text p {
        font-size: 12px;
        line-height: 1.45;
    }

    .cookie-banner-btn {
        padding: 9px 16px;
        font-size: 13px;
    }

    .cookie-banner-actions {
        justify-content: stretch;
    }

    .cookie-banner-btn {
        flex: 1;
    }
}

/* --- Phones and tablets ---------------------------------------------------
   Live backdrop blur is the most expensive effect on the site and phones pay
   for it on every scrolled frame. The backgrounds here are flat colors, so
   the blur changes very little visually: on touch devices and small screens
   the panels keep their fill and hairline and simply skip the blur. */
@media (max-width: 860px), (hover: none) {
    .lv-glass,
    .cookie-banner {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .lv-glass {
        background: rgba(255, 255, 255, 0.07);
    }

    .cookie-banner {
        background: rgba(48, 48, 54, 0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wave,
    .wave svg,
    .waves--journey .wave {
        animation: none;
        transition: none;
    }

    .js [data-r] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .lv-btn,
    .lv-btn .lv-i,
    .lv-footer-col a,
    .lv-social a,
    .cookie-banner,
    .cookie-banner-btn {
        transition: none;
    }
}