/*
 * A copy of the development site's development/css/site.css - keep the two in
 * step. The waitlist home page uses its hero, glass panel, nav and footer.
 */

/*
 * site.css - the public site's shared chrome: the hero's glass panel and nav
 * (which slides back down when the reader scrolls up, js/site-nav.js), and
 * the footer. Used by the home page and every inner page (features,
 * pricing, faq and the legal pages), so they look and behave the same.
 * Page-specific sections stay in their own pages.
 */

/* ── Hero, glass panel and nav ── */
:root {
    --kh-edge: clamp(48px, 9vw, 150px); /* blue under the panel, behind the dashboard */
    --kh-tail: clamp(
        36px,
        6vw,
        96px
    ); /* how far the panel runs on under the top of the dashboard */

    --kh-pad-x: max(clamp(20px, 3vw, 44px), env(safe-area-inset-left, 0px));
}

.kh-hero,
.kh-bar {
    --kh-blue: #1433d2;
    --kh-blue-deep: #0e2399;
    --kh-blue-lift: #3b57f0;
    --kh-blue-wash: rgb(20 51 210 / 8%);
    --kh-ink: #16205a;
    --kh-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.kh-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: var(--kh-edge); /* the blue runs on under the panel */
    background: var(--kh-blue);
    color: var(--kh-ink);
    font-family: var(--kh-display);
}

.kh-hero a,
.kh-bar a {
    color: inherit;
    text-decoration: none;
}

/* The blue, with soft light drifting behind the glass so the frosting has something to blur */
.kh-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(70% 60% at 0% 0%, var(--kh-blue-lift) 0%, rgb(59 87 240 / 0%) 70%),
        radial-gradient(70% 70% at 100% 100%, var(--kh-blue-deep) 0%, rgb(14 35 153 / 0%) 70%),
        var(--kh-blue);
}

.kh-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    animation: khDrift 22s ease-in-out infinite alternate;
}

@keyframes khDrift {
    to {
        transform: translate(60px, -40px) scale(1.1);
    }
}

/* The panel: flush with the top and both sides of the page, the nav,
   then the headline, then its tail under the dashboard */
.kh-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 11vh, 150px);
    padding: clamp(16px, 3.2vh, 28px) var(--kh-pad-x) calc(var(--kh-tail) + clamp(28px, 5vh, 56px));
    border-radius: 0 0 40px 40px;
    background: linear-gradient(
        160deg,
        rgb(255 255 255 / 82%),
        rgb(255 255 255 / 74%) 55%,
        rgb(255 255 255 / 66%)
    );
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border-bottom: 1px solid rgb(255 255 255 / 90%);
    box-shadow: 0 40px 120px rgb(8 18 90 / 35%);
    animation: khFade 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Nav. While the page is scrolled past it, js/site-nav.js lifts it out
   to the top of the page (.kh-floating) and slides it down whenever the
   reader scrolls up (.kh-shown), so its rules can't lean on .kh-hero. */
.kh-bar {
    color: var(--kh-ink);
    font-family: var(--kh-display);
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 44px;
}

/* The face and the wordmark, as a pair */
.kh-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.kh-logo img {
    display: block;
    height: 28px;
    width: auto;
}

.kh-logo .kh-logo-face {
    height: 38px;
}

.kh-bar nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 32px;
}

.kh-bar .kh-nl {
    font: 400 15px var(--kh-display);
    color: var(--kh-ink);
}

.kh-bar .kh-nl:hover {
    color: var(--kh-blue);
}

.kh-bar .kh-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    height: 42px;
    padding: 0 21px;
    border-radius: 999px;
    font: 500 15px var(--kh-display);
}

.kh-bar .kh-btn-line {
    color: var(--kh-blue);
}

.kh-bar .kh-btn-line:hover {
    background: var(--kh-blue-wash);
}

.kh-bar .kh-btn-solid {
    background: var(--kh-blue);
    color: #fff;
    box-shadow: 0 10px 26px rgb(20 51 210 / 30%);
}

.kh-bar .kh-btn-solid:hover {
    background: var(--kh-blue-deep);
}

.kh-bar.kh-floating {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: 12px var(--kh-pad-x);
    background: rgb(255 255 255 / 80%);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-bottom: 1px solid rgb(20 51 210 / 8%);
    box-shadow: 0 10px 30px rgb(8 18 90 / 8%);
    transform: translateY(-110%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kh-bar.kh-floating.kh-shown {
    transform: none;
}

.kh-hero :focus-visible,
.kh-bar :focus-visible {
    outline: 2px solid var(--kh-blue);
    outline-offset: 3px;
    border-radius: 8px;
}

/* The headline: two lines across the panel ("Workspace At Last." is
   about 8em wide with the italic), three on narrow screens */
.kh-hero h1 {
    margin: 0;
    color: var(--kh-blue);
    font: 500 min(calc((100vw - 2 * var(--kh-pad-x)) / 8.3), 230px) / 0.92 var(--kh-display);
    letter-spacing: -0.045em;
}

/* The payoff in the italic serif the section headings use for theirs */
.kh-hero h1 em {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Each line is masked for its rise-in. The tight tracking lets a last
   letter (the e of Workspace) and the italic's lean (the A's foot) reach
   past the line's box, so the mask gets room at both ends without the
   text moving */
.kh-ln {
    display: block;
    overflow: hidden;
    padding: 0 0.1em 0.08em;
    margin: 0 -0.1em -0.08em;
}

.kh-ln:has(em) {
    padding-inline: 0.15em;
    margin-inline: -0.15em;
}

/* Beside "Workspace", a little more space than a word gap, so the A's
   foot doesn't meet the e */
.kh-ln.kh-in:has(em) {
    margin-left: -0.03em;
}

.kh-ln.kh-in {
    display: inline-block;
    vertical-align: top;
}

.kh-ln > span {
    display: inline-block;
    animation: khRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--kh-d);
}

@keyframes khRise {
    from {
        transform: translateY(105%);
    }
}

.kh-fade {
    animation: khFade 0.9s ease both;
    animation-delay: var(--kh-d);
}

@keyframes khFade {
    from {
        opacity: 0;
    }
}

@media (width <= 760px) {
    .kh-panel {
        border-radius: 0 0 28px 28px;
    }

    .kh-bar .kh-nl {
        display: none;
    }

    .kh-logo img {
        height: 22px;
    }

    .kh-logo .kh-logo-face {
        height: 30px;
    }

    .kh-bar .kh-btn {
        height: 38px;
        padding: 0 15px;
        font-size: 14px;
    }

    .kh-bar nav {
        gap: 10px;
    }
}

/* Narrow: three lines ("A Zero Chaos" is about 5.4em wide) */
@media (width <= 560px) {
    .kh-hero h1 {
        font-size: calc((100vw - 2 * var(--kh-pad-x)) / 5.6);
    }

    .kh-ln.kh-in {
        display: block;
    }

    .kh-ln.kh-in:has(em) {
        margin-left: -0.15em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kh-hero *,
    .kh-hero *::before,
    .kh-hero *::after,
    .kh-bar.kh-floating {
        animation: none !important; /* no entrance or drift */
    }

    .kh-bar.kh-floating {
        transition: none; /* it appears without sliding */
    }
}

/* The search button, after Get started (js/site-header.js loads
   js/site-search.js on first use) */
.kh-bar .kh-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--kh-blue-wash);
    color: var(--kh-blue);
    cursor: pointer;
}

.kh-bar .kh-search:hover {
    background: rgb(20 51 210 / 14%);
}

/* The page you're on */
.kh-bar .kh-nl[aria-current='page'] {
    color: var(--kh-blue);
    font-weight: 500;
}

/* ── Inner pages ──
   The same glass from the top of the page, holding the nav and the page's
   title in the headline's type; a shorter run of blue under it. */
.kh-hero.kh-page {
    --kh-edge: clamp(28px, 5vw, 64px);
}

.kh-page .kh-panel {
    gap: clamp(48px, 9vh, 110px);
    padding-bottom: clamp(36px, 6vh, 64px);
}

.kh-page h1 {
    font-size: clamp(46px, 8vw, 128px);
    line-height: 0.95;
}

.kh-page .kh-sub {
    max-width: 62ch;
    margin: clamp(-36px, -3vh, -20px) 0 0;
    font: 400 clamp(16px, 1.4vw, 19px) / 1.55 var(--kh-display);
    color: #4a5590;
}

.kh-page .kh-sub a {
    color: var(--kh-blue);
    text-decoration: underline;
}

@media (width <= 760px) {
    .kh-bar .kh-search {
        width: 38px;
        height: 38px;
    }
}

/* ── Footer ── */
.kf-footer {
    position: relative;
    z-index: 30; /* over the pricing band, whose foot shows round its curved corners */
    overflow: hidden;
    margin-top: -40px;
    border-radius: 40px 40px 0 0;
    padding: clamp(48px, 7vw, 88px) max(clamp(20px, 5vw, 72px), env(safe-area-inset-right, 0px)) 0
        max(clamp(20px, 5vw, 72px), env(safe-area-inset-left, 0px));
    background:
        radial-gradient(70% 60% at 0% 0%, #3b57f0 0%, rgb(59 87 240 / 0%) 70%),
        radial-gradient(70% 70% at 100% 100%, #0e2399 0%, rgb(14 35 153 / 0%) 70%), #1433d2;
    color: #fff;
    font-family:
        Outfit,
        system-ui,
        -apple-system,
        'Segoe UI',
        sans-serif;
}

.kf-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.kf-footer a,
.kf-footer button {
    color: rgb(255 255 255 / 78%);
    text-decoration: none;
}

.kf-footer a:hover,
.kf-footer button:hover {
    color: #fff;
}

.kf-footer :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Top: the mark and the line about Kabiri, then three columns */
.kf-top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
}

.kf-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: start;
    min-width: 0;
}

.kf-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.kf-mark img {
    display: block;
    height: 26px;
    width: auto;
}

.kf-mark .kf-mark-face {
    height: 36px;
}

.kf-tagline {
    margin: 0;
    padding-left: 20px;
    border-left: 1px solid rgb(255 255 255 / 25%);
    max-width: 26ch;
    font-size: 14px;
    line-height: 1.5;
    color: rgb(255 255 255 / 75%);
}

.kf-col h2 {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.kf-col ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.kf-col button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.kf-col address {
    font-style: normal;
    line-height: 1.5;
    color: rgb(255 255 255 / 78%);
}

/* Under a rule: copyright and company details, legal links, socials */
.kf-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 32px;
    margin-top: clamp(40px, 6vw, 72px);
    padding-top: 24px;
    border-top: 1px solid rgb(255 255 255 / 18%);
    font-size: 12.5px;
    color: rgb(255 255 255 / 70%);
}

.kf-bottom p {
    margin: 0;
}

.kf-bottom .footer-fine-print {
    margin-top: 6px;
    max-width: 62ch;
    font-size: 12px;
    line-height: 1.5;
    color: rgb(255 255 255 / 60%);
}

.kf-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
}

.kf-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.kf-socials {
    display: flex;
    gap: 14px;
}

.kf-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.kf-social svg {
    width: 18px;
    height: 18px;
}

/* The wordmark across the foot, its bottom running off the page */
.kf-giant {
    display: block;
    width: min(100%, 1280px);
    margin: clamp(40px, 6vw, 72px) auto 0;
    height: auto;
    margin-bottom: -7%;
    user-select: none;
    pointer-events: none;
}

@media (width <= 900px) {
    .kf-top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kf-brand {
        grid-column: 1 / -1;
    }
}

@media (width <= 560px) {
    .kf-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kf-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .kf-tagline {
        padding-left: 0;
        border-left: 0;
    }
}