/* ReviewFloAI shared styles: colors, fonts, buttons, the top bar and the footer.
   Every page links this file first, then adds its own styles. Change the look here once and every page follows.
   After you edit this file, bump the ?v= number in the <link> on every page (Replace in Files, Ctrl+Shift+H),
   so browsers fetch the new version. */

:root {
    --blue: #0071E3;
    --blue-hover: #0077ED;
    --ink: #1D1D1F;
    --ink-2: #48484A;
    --soft: #6E6E73;
    --hint: #86868B;
    --line: #D2D2D7;
    --line-2: #E8E8ED;
    --gray: #F5F5F7;
    --navy: #001D3D;
    --navy-end: #0A4A8C;
    --white: #FFFFFF;
    --label: #B64400;
    --gold: #F4B400;
    --word: linear-gradient(90deg, #2997FF, #0071E3, #004FC4);
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --pill: 980px;
    --gut: 20px;
    --sec: 56px;
    --max: 1040px;
    --shadow-lg: 0 30px 60px rgba(0,0,0,0.16);
}

@media (min-width: 768px) {
    :root {
        --gut: 48px;
        --sec: 92px;
    }
}

/* Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
    }
}

body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.47;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

    body.menu-open {
        overflow: hidden;
    }

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--blue);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

button {
    font: inherit;
}

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.i {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 12px;
    background: var(--white);
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 8px;
    z-index: 300;
}

    .skip:focus {
        left: 12px;
    }

/* Layout */
.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gut);
}

.sec {
    padding: var(--sec) 0;
}

.center {
    text-align: center;
}

.gray {
    background: var(--gray);
}

/* Type */
.ey {
    font-size: 14px;
    font-weight: 600;
    color: var(--label);
    margin-bottom: 8px;
}

.h1 {
    font-size: clamp(44px, 7.2vw, 80px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
}

.h2 {
    font-size: clamp(30px, 4.6vw, 52px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-top: 12px;
}

.word {
    background: var(--word);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.soft {
    color: var(--soft);
}

.say {
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--soft);
    margin-top: 16px;
}

    .say b {
        color: var(--ink);
        font-weight: 600;
    }

/* Buttons and links */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 24px;
    border-radius: var(--pill);
    background: var(--blue);
    border: 1px solid var(--blue);
    color: var(--white);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

    .btn:hover {
        background: var(--blue-hover);
        border-color: var(--blue-hover);
        color: var(--white);
        text-decoration: none;
    }

    .btn.sm {
        min-height: 0;
        padding: 4px 13px;
        font-size: 13px;
    }

    /* Outlined button: same blue, no fill. Used for Log in so it reads as a button but stays second to the trial. */
    .btn.line {
        background: transparent;
        color: var(--blue);
    }

        .btn.line:hover {
            background: rgba(0, 113, 227, 0.08);
            border-color: var(--blue);
            color: var(--blue);
        }

.more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 17px;
}

    .more .i {
        width: 17px;
        height: 17px;
    }

/* Nav: white, pinned on desktop as white glass, menu on phones */
.nav {
    background: var(--white);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
    z-index: 50;
}

.nav-in {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gut);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Black logo on white (brand sheet: black on light). Bigger, closer to the live site. */
.nav-logo img {
    height: 32px;
    width: auto;
    display: block;
}

@media (min-width: 768px) {
    .nav-in {
        height: 64px;
    }

    .nav-logo img {
        height: 38px;
    }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

    .nav-links .nl {
        font-size: 13px;
        color: var(--ink);
    }

        .nav-links .nl:hover {
            color: var(--blue);
            text-decoration: none;
        }

    /* Log in and the trial button sit closer together than the text links */
    .nav-links .btn.line {
        margin-right: -14px;
    }

.nav-menu, .nav-close {
    display: none;
    background: none;
    border: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
}

    .nav-menu .i, .nav-close .i {
        width: 24px;
        height: 24px;
    }

.nav-menu {
    color: var(--ink);
}

/* Desktop: white glass while pinned. Phones keep solid white so the full-screen menu works. */
@media (min-width: 768px) {
    .nav {
        background: rgba(255,255,255,0.72);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
}

@media (min-width: 768px) {
    .nav {
        position: sticky;
        top: 0;
    }
}

/* Phone menu, opened like Apple's: the white panel drops down from the top,
   then the links fade in and slide down one after another. Closing runs it back, faster.
   Reduced motion: the global rule above turns the transitions off, so it just appears. */
@media (max-width: 767px) {
    .nav-menu {
        display: inline-flex;
        margin-right: -10px;
    }

    .nav-links {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 32px;
        overflow-y: auto;
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.32s cubic-bezier(0.4, 0, 0.6, 1) 0.08s, visibility 0s linear 0.4s;
    }

        .nav-links.open {
            visibility: visible;
            clip-path: inset(0 0 0 0);
            transition: clip-path 0.36s cubic-bezier(0.4, 0, 0.6, 1), visibility 0s;
        }

        .nav-links > * {
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.16s ease, transform 0.16s ease;
        }

        .nav-links.open > * {
            opacity: 1;
            transform: none;
            transition: opacity 0.3s ease, transform 0.36s cubic-bezier(0.2, 0.7, 0.2, 1);
        }

        .nav-links.open > :nth-child(1) {
            transition-delay: 0.14s;
        }

        .nav-links.open > :nth-child(2) {
            transition-delay: 0.17s;
        }

        .nav-links.open > :nth-child(3) {
            transition-delay: 0.20s;
        }

        .nav-links.open > :nth-child(4) {
            transition-delay: 0.23s;
        }

        .nav-links.open > :nth-child(5) {
            transition-delay: 0.26s;
        }

        .nav-links.open > :nth-child(6) {
            transition-delay: 0.29s;
        }

        .nav-links .nav-close {
            display: inline-flex;
            align-self: flex-end;
            margin: 0 -10px 12px 0;
        }

        .nav-links .nl {
            color: var(--ink);
            font-size: 24px;
            font-weight: 600;
            letter-spacing: -0.02em;
            padding: 14px 0;
            border-bottom: 1px solid var(--line-2);
        }

        .nav-links .btn {
            margin-top: 28px;
            min-height: 48px;
            font-size: 17px;
        }

            .nav-links .btn.line {
                margin-right: 0;
            }

            .nav-links .btn + .btn {
                margin-top: 10px;
            }
}

/* Fine print and footer: fine print on top, a thin line, then the copyright on the left and the links on the right */
.foot {
    background: var(--gray);
    padding: 24px 0 28px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--soft);
}

.foot-fine {
    max-width: 820px;
}

    .foot-fine p + p {
        margin-top: 8px;
    }

.foot-rule {
    border-top: 1px solid var(--line);
    margin: 16px 0 14px;
}

.foot-bot {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foot-links {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;
}

    .foot-links a {
        color: var(--ink);
        padding: 0 10px;
        border-left: 1px solid var(--line);
        line-height: 1;
    }

        .foot-links a:first-child {
            padding-left: 0;
            border-left: 0;
        }

@media (min-width: 768px) {
    .foot-bot {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

@media (max-width: 767px) {
    /* Footer links: a bigger tap area without changing how they look */
    .foot-links a {
        position: relative;
    }

        .foot-links a::after {
            content: "";
            position: absolute;
            inset: -12px -5px;
        }

    .foot {
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }
}