/* =============================================================================
   Routeless standalone landings — shared foundation
   -----------------------------------------------------------------------------
   /agencies, /radar, /free-website-review, and /start/website deliberately do
   not carry the sitewide nav and footer: they are conversion pages, and three
   of the four are noindex. They used to pay for that isolation by each
   redeclaring the palette, the reset, the chrome, and the form controls, which
   is how the violet, rule, and muted values drifted apart between them.

   This file holds only what all four share. Page-specific layout stays in the
   template. Requires tokens.css.
   ============================================================================= */

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

html {
    background: var(--v2-paper);
    color: var(--v2-text);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--v2-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
}

.mono {
    font-family: var(--v2-mono);
}

.display {
    font-family: var(--v2-display);
}

/* Keyboard focus has to survive on pages that restyle every control. */
:focus-visible {
    outline: 2px solid var(--v2-violet);
    outline-offset: 2px;
}

/* ---- Chrome -------------------------------------------------------------
   A wordmark and one contextual link. The logo PNGs are white-on-transparent
   for the dark site nav and disappear on these light pages, so the brand is
   set in type. */

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    padding: 22px 24px;
}

.brand {
    display: flex;
    align-items: baseline;
    font-family: var(--v2-display);
    font-size: 20px;
    font-weight: var(--v2-weight-display);
    letter-spacing: -0.02em;
    color: var(--v2-text);
    text-decoration: none;
}

/* The product tag sits apart from the wordmark; the period in "Routeless." is
   part of it and must not inherit that gap. */
.brand span {
    margin-left: 9px;
    font-family: var(--v2-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--v2-muted);
}

.brand em {
    font-style: normal;
    color: var(--v2-violet);
}

.login,
.top-note {
    font-size: 14px;
    font-weight: var(--v2-weight-heading);
    color: var(--v2-muted);
    text-decoration: none;
}

.login:hover {
    color: var(--v2-violet);
}

.top-note {
    font-family: var(--v2-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bottom {
    padding: 22px;
    border-top: 1px solid var(--v2-line);
    font-size: 12px;
    color: var(--v2-muted);
    text-align: center;
}

.bottom a {
    margin: 0 8px;
}

/* ---- Type ---------------------------------------------------------------
   Landing headlines are set one step tighter than the marketing site: these
   pages open on a single claim rather than a section stack. */

.eyebrow {
    margin: 0;
    font-family: var(--v2-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--v2-violet);
}

.sub {
    margin: 22px 0 0;
    font-size: 19px;
    line-height: 1.55;
    color: var(--v2-text);
}

.lede {
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--v2-muted);
}

.fine {
    margin: 12px 0 0;
    font-family: var(--v2-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--v2-muted);
}

.fine a {
    color: var(--v2-violet);
}

/* ---- Controls ----------------------------------------------------------- */

.btn,
.cta {
    display: inline-block;
    border: 0;
    border-radius: var(--v2-radius);
    background: var(--v2-violet);
    color: #fff;
    padding: 16px 26px;
    font: inherit;
    font-size: 16px;
    font-weight: var(--v2-weight-display);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover,
.cta:hover {
    background: var(--v2-violet-deep);
    color: #fff;
}

.btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.btn.ghost {
    background: transparent;
    color: var(--v2-violet);
    padding: 16px 8px;
}

.btn.ghost:hover {
    background: transparent;
    color: var(--v2-violet-deep);
}

.field-control,
.landing-form input,
.landing-form select,
.landing-form textarea {
    width: 100%;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-card);
    padding: 13px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--v2-text);
    outline: none;
}

.field-control:focus,
.landing-form input:focus,
.landing-form select:focus,
.landing-form textarea:focus {
    border-color: var(--v2-violet);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-violet) 12%, transparent);
}

.landing-form textarea {
    resize: vertical;
}

/* ---- Notices ------------------------------------------------------------ */

.error {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--v2-bad-line);
    border-radius: var(--v2-radius);
    background: var(--v2-bad-tint);
    color: var(--v2-bad-text);
    font-size: 14px;
}

.error-text {
    color: var(--v2-bad-text);
    font-size: 14px;
}

.sent {
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--v2-good) 30%, transparent);
    border-radius: 12px;
    background: var(--v2-good-tint);
}

/* Bots fill everything they can see; a visitor never reaches this. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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