/* ==========================================================================
   brand.css — design tokens, type system, and shared page chrome.

   Deliberately separate from the page-level stylesheet so the brand can be
   rolled out to the other public pages one at a time. Nothing in here is
   homepage-specific.

   The palette is the logo's palette. #4C1D95 is within a couple of points of
   the drop-shadow colour sampled out of the original Canva draft, so the deep
   end of this ramp is not an invention — it is what the mark was already made
   of. The draft's FACE colour was periwinkle blue (#6893ff), which is the one
   thing that stopped the logo reading as purple at all; it is replaced by the
   orchid end of the ramp.
   ========================================================================== */

@import url("brand-tokens.css");


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

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

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

img,
svg {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   The speed-line motif.
   Pure CSS rather than an image so it inherits colour, and so it can be used
   at any size without a second asset. It is the same geometry as the logo's
   rules: aligned left, stepping in on the right, cut at the italic angle.
   -------------------------------------------------------------------------- */
.motif {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 132px;
}

.motif span {
    display: block;
    height: 3px;
    transform: skewX(var(--slant));
    background: linear-gradient(90deg, var(--cyan), var(--orchid));
}

.motif span:nth-child(2) {
    width: 84%;
}

.motif span:nth-child(3) {
    width: 66%;
}

.motif--wide {
    width: 100%;
}

.motif--muted span {
    background: linear-gradient(90deg, var(--v-600), var(--orchid));
    opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Eyebrow / label type. Monospace, spaced, small.
   This is the single most load-bearing typographic decision on the page: it is
   what signals "a data product designed by someone" rather than "a heading tag".
   -------------------------------------------------------------------------- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v-700);
}

.eyebrow--on-dark {
    color: var(--cyan);
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.04;
}

h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}

h3 {
    font-size: 1.28rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 15px 28px;
    border: 1.5px solid transparent;
    border-radius: 2px; /* square-ish. Rounded pills are the default look. */
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease,
        background 0.14s ease, color 0.14s ease;
}

.btn-primary {
    background: var(--v-700);
    color: #fff;
    box-shadow: 5px 5px 0 var(--v-500);
}

.btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--orchid);
    color: #fff;
}

.btn-primary:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--v-500);
}

.btn-on-dark {
    background: var(--orchid);
    color: var(--v-950);
    box-shadow: 5px 5px 0 var(--v-700);
}

.btn-on-dark:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--v-600);
    color: var(--v-950);
}

.btn-ghost {
    background: transparent;
    color: var(--v-800);
    border-color: var(--rule-strong);
}

.btn-ghost:hover {
    border-color: var(--v-700);
    background: var(--paper-2);
}

.btn-ghost-dark {
    background: transparent;
    color: var(--orchid-pale);
    border-color: rgba(232, 121, 249, 0.42);
}

.btn-ghost-dark:hover {
    border-color: var(--orchid);
    background: rgba(232, 121, 249, 0.1);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Promo strip + navigation
   -------------------------------------------------------------------------- */
.promo-banner {
    background: var(--v-950);
    color: var(--orchid-pale);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    padding: 9px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    position: relative;
}

.promo-banner strong {
    color: var(--cyan);
    font-weight: 600;
}

.promo-cta {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--orchid);
    padding-bottom: 1px;
}

.promo-dismiss {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--on-dark-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.promo-dismiss:hover {
    color: #fff;
}

nav {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 14px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-logo {
    display: block;
    line-height: 0;
}

.nav-logo img {
    height: 26px;
    width: auto;
    display: block;
}

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

/* inline-flex + an explicit line-height, so every link resolves to the same
   box height. Left as plain inline text, the "Use cases" link sat lower than
   its neighbours: its caret was a text glyph, and a glyph with a descender
   grows the line box of that link alone. Nothing about the flex centring is
   wrong when every child is the same height. */
.nav-links a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.nav-links a:hover {
    color: var(--v-800);
    border-bottom-color: var(--orchid);
}

.nav-btn {
    background: var(--v-800);
    color: #fff !important;
    padding: 9px 18px 9px !important;
    border-bottom: 2px solid var(--v-950) !important;
}

.nav-btn:hover {
    background: var(--v-700);
    border-bottom-color: var(--orchid) !important;
}

/* dropdown */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* A bordered triangle rather than the ▾ character. A glyph carries its own
   metrics and shifted this one link off the row; a border triangle has a size
   we set. */
.nav-dropdown > a::after {
    content: '';
    display: block;
    margin-left: 7px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: currentColor;
    border-bottom-width: 0;
    opacity: 0.55;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: -14px;
    margin-top: 10px;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    box-shadow: 6px 6px 0 rgba(76, 29, 149, 0.1);
    min-width: 210px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 10px 12px;
    border-bottom: none;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 13px;
}

.dropdown-menu a:hover {
    background: var(--paper-2);
    border-bottom: none;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--rule-strong);
    padding: 8px 10px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
    background: var(--v-950);
    color: var(--on-dark-muted);
    padding: 64px var(--gutter) 40px;
}

.footer-inner {
    max-width: var(--measure);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 48px;
    align-items: start;
}

.footer-brand img {
    height: 30px;
    width: auto;
    display: block;
    margin-bottom: 18px;
}

.footer-brand p {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--on-dark-muted);
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 32px;
}

.footer-col h4 {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orchid);
    margin-bottom: 14px;
}

.footer-col a {
    display: block;
    color: var(--on-dark-muted);
    text-decoration: none;
    font-size: 14.5px;
    padding: 5px 0;
}

.footer-col a:hover {
    color: #fff;
}

.footer-base {
    max-width: var(--measure);
    margin: 44px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(232, 121, 249, 0.18);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--on-dark-faint);
}

.footer-base span {
    color: var(--on-dark-muted);
}

/* --------------------------------------------------------------------------
   Accessibility + motion
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--orchid);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
    z-index: 500;
    background: var(--v-800);
    color: #fff;
    padding: 10px 16px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 880px) {
    .nav-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--rule-strong);
        padding: 8px var(--gutter) 18px;
    }

    .nav-links.is-open {
        display: flex;
    }

    .nav-links a {
        padding: 13px 0;
        border-bottom: 1px solid var(--rule);
    }

    .nav-btn {
        margin-top: 12px;
        text-align: center;
        padding: 13px 18px !important;
    }

    .nav-dropdown .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 0 0 0 16px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }
}