/*
 * The landing page. Dark by design, like the app icon: a drafting-paper grid, heavy type, sharp
 * blocks, and one phone that everything flies into. Motion is transform and opacity only, and
 * stops for anyone who asks for less of it.
 */

:root {
    --l-bg: #0B1120;
    --l-bg-raised: #0F172A;
    --l-panel: #131C31;
    --l-line: #1E293B;
    --l-line-strong: #334155;
    --l-text: #F8FAFC;
    --l-muted: #94A3B8;
    --l-green: #22C55E;
    --l-green-ink: #052E16;
    --l-red: #F87171;
    --l-amber: #FBBF24;
    --l-blue: #60A5FA;

    --l-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --l-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --l-gutter: clamp(16px, 4vw, 48px);
    --l-max: 1240px;

    color-scheme: dark;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--l-bg);
    color: var(--l-text);
    font-family: var(--l-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--l-green);
    outline-offset: 3px;
}

code {
    font-family: var(--l-mono);
    font-size: 0.9em;
    color: var(--l-green);
}

.l-page {
    overflow-x: clip;
    /* Drafting paper: a fine grid that fades out under the content. */
    background-image:
        linear-gradient(to right, rgb(148 163 184 / 6%) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(148 163 184 / 6%) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: center top;
}

.l-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Navigation */

.l-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--l-max);
    margin: 0 auto;
    padding: 14px var(--l-gutter);
    padding-top: max(14px, env(safe-area-inset-top));
    background: rgb(11 17 32 / 80%);
    backdrop-filter: blur(10px);
}

.l-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--l-mono);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.l-brand img {
    border-radius: 8px;
}

.l-nav__links {
    display: none;
    gap: 28px;
    font-size: 0.9375rem;
    color: var(--l-muted);
}

.l-nav__links a {
    text-decoration: none;
    transition: color 150ms ease-out;
}

.l-nav__links a:hover {
    color: var(--l-text);
}

.l-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.l-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-weight: 500;
    text-decoration: none;
}

@media (min-width: 900px) {
    .l-nav__links {
        display: flex;
    }
}

/* Buttons: hard edges, an offset shadow that the button presses into. */

.l-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 2px solid var(--l-green);
    background: var(--l-green);
    color: var(--l-green-ink);
    font-family: var(--l-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--l-text);
    cursor: pointer;
    transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.l-button:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--l-text);
}

.l-button:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--l-text);
}

.l-button--small {
    min-height: 44px;
    padding: 0 14px;
    box-shadow: 3px 3px 0 var(--l-text);
}

.l-button--ghost {
    background: transparent;
    border-color: var(--l-text);
    color: var(--l-text);
    box-shadow: 4px 4px 0 var(--l-green);
}

.l-button--ghost:hover {
    box-shadow: 5px 5px 0 var(--l-green);
}

.l-button--block {
    width: 100%;
}

/* Hero */

.l-hero {
    position: relative;
    max-width: var(--l-max);
    margin: 0 auto;
    padding: 24px var(--l-gutter) 64px;
}

.l-hero__title {
    position: relative;
    z-index: 2;
    margin: 0;
    text-align: center;
    text-wrap: balance;
    font-size: clamp(2.75rem, 8vw, 5.75rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.045em;
    pointer-events: none;
}

/* Wide screens: room between the nav and the headline, now that the globe rises behind it. */
@media (min-width: 900px) {
    .l-hero__title {
        margin-top: 50px;
    }
}


.l-buzz {
    display: inline-block;
    color: var(--l-green);
    font-style: normal;
}

.l-buzz.is-buzzing {
    animation: l-letter-buzz 380ms linear;
}

/* The stage: the phone in the middle, the services around it. */

.l-stage {
    --l-phone-width: min(48vw, 270px);

    position: relative;
    height: calc(var(--l-phone-width) * 2.06 + 130px);
    margin-top: 16px;
}

@media (min-width: 900px) {
    .l-stage {
        height: 660px;
        margin-top: -10px;
    }
}

.l-globe {
    position: absolute;
    top: 0;
    pointer-events: none;
    left: calc(var(--l-gutter) * -1);
    width: calc(100% + var(--l-gutter) * 2);
    height: 100%;
}

/*
 * Wide screens: a bigger globe that rises behind the headline and sinks behind the terminal. The canvas
 * is taller than the globe needs, and the globe a smaller share of it, so its halo fades out whole.
 */
@media (min-width: 900px) {
    .l-globe {
        --l-globe-share: 0.41;

        top: -162px;
        left: 0;
        width: 100%;
        height: calc(100% + 324px);
    }
}

/* A service's name over its city, carried along as the globe turns; on phones it passes behind the phone. */
.l-source {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--l-green);
    background: var(--l-bg-raised);
    color: var(--l-text);
    font-family: var(--l-mono);
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    scale: 0.85;
    transition: opacity 220ms ease-out, scale 220ms ease-out;
    will-change: transform;
}

.l-source.is-shown {
    opacity: 1;
    scale: 1;
}

.l-source__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--l-green);
    animation: l-blink 600ms ease-out;
}

.l-source__place {
    display: none;
    color: var(--l-muted);
}

@media (min-width: 900px) {
    .l-source {
        z-index: 4;
        font-size: 0.8125rem;
    }

    .l-source__place {
        display: inline;
    }
}

/* The phone */

.l-phone {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: var(--l-phone-width);
    aspect-ratio: 9 / 18.5;
    translate: -50% -50%;
}

.l-phone__frame {
    position: relative;
    height: 100%;
    padding: 10px;
    border-radius: 44px;
    background: linear-gradient(145deg, #2A3448, #121A2B 60%);
    box-shadow:
        inset 0 0 0 1.5px #3B475E,
        0 40px 80px -20px rgb(0 0 0 / 70%),
        0 0 0 1px rgb(255 255 255 / 4%);
}

.l-phone.is-shaking .l-phone__frame {
    animation: l-shake 420ms cubic-bezier(.36, .07, .19, .97);
}

.l-phone__island {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 50%;
    width: 30%;
    height: 22px;
    border-radius: 999px;
    background: #000;
    translate: -50% 0;
}

.l-phone__screen {
    height: 100%;
    overflow: hidden;
    border-radius: 34px;
    background: var(--l-bg-raised);
    padding: 12px 10px 0;
}

.l-phone__status {
    display: flex;
    justify-content: space-between;
    padding: 2px 14px 0;
    font-size: 0.6875rem;
    font-weight: 600;
}

.l-phone__signal {
    width: 22px;
    height: 10px;
    border: 1.5px solid var(--l-text);
    border-radius: 3px;
    background: linear-gradient(to right, var(--l-text) 70%, transparent 70%) content-box;
    padding: 1px;
}

.l-phone__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 6px 10px;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.l-phone__badge {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--l-green);
    color: var(--l-green-ink);
    font-family: var(--l-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.l-phone__badge.is-bumped {
    animation: l-pop 300ms ease-out;
}

.l-phone__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l-note {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: start;
    gap: 8px;
    padding: 9px;
    border-left: 3px solid var(--l-line-strong);
    border-radius: 10px;
    background: var(--l-panel);
    font-size: 0.6875rem;
    line-height: 1.35;
}

.l-note--ok { border-left-color: var(--l-green); }
.l-note--bad { border-left-color: var(--l-red); }
.l-note--warn { border-left-color: var(--l-amber); }
.l-note--you { border-left-color: var(--l-blue); }

.l-note.is-new {
    animation: l-drop-in 420ms cubic-bezier(.2, .9, .3, 1.2);
}

.l-note__app {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--l-line-strong);
    font-family: var(--l-mono);
    font-weight: 700;
}

.l-note--ok .l-note__app { background: #14532D; color: var(--l-green); }
.l-note--bad .l-note__app { background: #450A0A; color: var(--l-red); }
.l-note--warn .l-note__app { background: #451A03; color: var(--l-amber); }
.l-note--you .l-note__app { background: #172554; color: var(--l-blue); }

.l-note__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.l-note__text b {
    font-weight: 600;
}

.l-note__text span {
    overflow: hidden;
    color: var(--l-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l-note time {
    color: var(--l-muted);
    font-family: var(--l-mono);
    font-size: 0.625rem;
}

/* The ring the phone sends out when something lands. */
.l-phone__ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--l-green);
    border-radius: 44px;
    opacity: 0;
    pointer-events: none;
}

.l-phone__ring.is-ringing {
    animation: l-ring 900ms ease-out;
}

/* A notification on its way to the phone. */
.l-flyer {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    width: 220px;
    pointer-events: none;
    box-shadow: 0 18px 40px -12px rgb(0 0 0 / 80%);
    will-change: transform, opacity;
}

/* The terminal visitors can send from. */

.l-terminal {
    position: relative;
    z-index: 3;
    max-width: 720px;
    margin: 24px auto 0;
    border: 1px solid var(--l-line-strong);
    background: var(--l-bg-raised);
    box-shadow: 6px 6px 0 var(--l-line);
}

.l-terminal__label {
    display: block;
    padding: 8px 14px;
    border-bottom: 1px solid var(--l-line);
    color: var(--l-muted);
    font-family: var(--l-mono);
    font-size: 0.75rem;
}

.l-terminal__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    padding: 12px 14px;
    font-family: var(--l-mono);
    font-size: 0.875rem;
}

.l-terminal__prompt {
    color: var(--l-green);
    font-weight: 700;
}

.l-terminal__command {
    color: var(--l-muted);
}

.l-terminal__input {
    flex: 1 1 180px;
    min-width: 0;
    min-height: 36px;
    border: 0;
    border-bottom: 1px dashed var(--l-line-strong);
    background: transparent;
    color: var(--l-text);
    font: inherit;
    caret-color: var(--l-green);
}

.l-terminal__input::placeholder {
    color: #64748B;
}

.l-terminal__input:focus {
    outline: none;
    border-bottom-color: var(--l-green);
}

.l-terminal:focus-within {
    border-color: var(--l-green);
}

.l-hero__footer {
    display: grid;
    gap: 24px;
    margin-top: 48px;
}

.l-hero__lede {
    max-width: 52ch;
    margin: 0;
    color: var(--l-muted);
    font-size: 1.125rem;
}

.l-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

@media (min-width: 900px) {
    .l-hero__footer {
        grid-template-columns: 1fr auto;
        align-items: end;
    }
}

/* Sections */

.l-section {
    max-width: var(--l-max);
    margin: 0 auto;
    padding: 72px var(--l-gutter);
    border-top: 1px solid var(--l-line);
}

.l-section__title {
    max-width: 18ch;
    margin: 0 0 24px;
    font-size: clamp(2rem, 5.5vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
}

.l-section__index {
    display: block;
    margin-bottom: 16px;
    color: var(--l-green);
    font-family: var(--l-mono);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
}

.l-section__lede {
    max-width: 60ch;
    margin: 0 0 32px;
    color: var(--l-muted);
    font-size: 1.125rem;
}

.l-code {
    margin: 16px 0 0;
    padding: 14px 16px;
    overflow-x: auto;
    border: 1px solid var(--l-line-strong);
    background: #070C18;
    color: var(--l-text);
    font-family: var(--l-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.l-code__cmd { color: var(--l-green); font-weight: 700; }
.l-code__str { color: var(--l-amber); }
.l-code__key { color: #F472B6; }
.l-code__dim { color: var(--l-blue); }

/* Steps: one block each, numbers you can read from across the room. */

.l-steps__list {
    display: grid;
    gap: 0;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--l-line-strong);
}

.l-step {
    position: relative;
    padding: 28px 24px 32px;
    background: var(--l-bg);
}

.l-step + .l-step {
    border-top: 1px solid var(--l-line-strong);
}

.l-step__number {
    display: block;
    color: transparent;
    font-family: var(--l-mono);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    -webkit-text-stroke: 1.5px var(--l-green);
}

.l-step h3 {
    margin: 16px 0 8px;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.l-step p {
    margin: 0;
    color: var(--l-muted);
}

@media (min-width: 900px) {
    .l-steps__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .l-step + .l-step {
        border-top: 0;
        border-left: 1px solid var(--l-line-strong);
    }
}

/* The wall of services */

.l-wall__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--l-line-strong);
    border-left: 1px solid var(--l-line-strong);
}

.l-wall__grid > li {
    display: grid;
}

.l-wall__tile {
    display: flex;
    color: inherit;
    text-decoration: none;
    flex-direction: column;
    gap: 6px;
    min-height: 120px;
    padding: 20px;
    border-right: 1px solid var(--l-line-strong);
    border-bottom: 1px solid var(--l-line-strong);
    background: var(--l-bg);
    transition: background 200ms ease-out;
}

.l-wall__tile:hover {
    background: var(--l-panel);
}

.l-wall__tile:hover .l-wall__name {
    color: var(--l-green);
}

.l-wall__name {
    font-family: var(--l-mono);
    font-size: 1.0625rem;
    font-weight: 700;
    transition: color 200ms ease-out;
}

.l-wall__hint {
    color: var(--l-muted);
    font-size: 0.875rem;
}

.l-wall__tile--accent {
    background: var(--l-green);
    color: var(--l-green-ink);
}

.l-wall__tile--accent .l-wall__hint,
.l-wall__tile--accent:hover .l-wall__name {
    color: var(--l-green-ink);
}

.l-wall__tile--accent:hover {
    background: var(--l-green);
}

/* Heartbeats: a monitor whose line goes flat, then the alert. */

.l-pulse {
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .l-pulse {
        grid-template-columns: 1fr 1fr;
    }
}

.l-pulse__monitor {
    position: relative;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--l-line-strong);
    background:
        linear-gradient(to right, rgb(34 197 94 / 8%) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(34 197 94 / 8%) 1px, transparent 1px),
        #070C18;
    background-size: 24px 24px;
    overflow: hidden;
}

.l-pulse__line {
    position: absolute;
    inset: 15% 0 auto;
    width: 100%;
    height: 50%;
}

.l-pulse__line path {
    fill: none;
    stroke: var(--l-green);
    stroke-width: 2.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgb(34 197 94 / 60%));
    transition: stroke 300ms ease-out;
}

.l-pulse__monitor.is-flat .l-pulse__line path {
    stroke: var(--l-red);
    filter: drop-shadow(0 0 6px rgb(248 113 113 / 60%));
}

.l-pulse__alert {
    position: absolute;
    left: 50%;
    bottom: 12%;
    display: flex;
    gap: 10px;
    width: min(88%, 340px);
    padding: 12px 14px;
    border-left: 3px solid var(--l-red);
    border-radius: 10px;
    background: var(--l-panel);
    font-size: 0.8125rem;
    line-height: 1.4;
    opacity: 0;
    translate: -50% 16px;
    transition: opacity 250ms ease-out, translate 350ms cubic-bezier(.2, .9, .3, 1.2);
}

.l-pulse__alert .l-icon {
    color: var(--l-red);
}

.l-pulse__alert b {
    display: block;
}

.l-pulse__alert span {
    color: var(--l-muted);
}

.l-pulse__alert b {
    color: var(--l-text);
}

.l-pulse__monitor.is-flat .l-pulse__alert {
    opacity: 1;
    translate: -50% 0;
}

.l-pulse__label {
    position: absolute;
    top: 12px;
    left: 14px;
    color: var(--l-muted);
    font-family: var(--l-mono);
    font-size: 0.75rem;
}

/* Pricing */

.l-pricing__grid {
    display: grid;
    gap: 24px;
}

@media (min-width: 760px) {
    .l-pricing__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Below the plans: for anyone who needs more than Pro. */
.l-pricing__more {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 24px;
    padding: 24px;
    border: 1px dashed var(--l-line-strong);
}

.l-pricing__more h3 {
    margin: 0 0 4px;
    font-size: 1.25rem;
}

.l-pricing__more p {
    margin: 0;
    color: var(--l-muted);
}

@media (min-width: 760px) {
    .l-pricing__more {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }

    .l-pricing__more .l-button {
        flex-shrink: 0;
    }
}

.l-plan {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--l-line-strong);
    background: var(--l-bg);
}

.l-plan--pro {
    border: 2px solid var(--l-green);
    box-shadow: 8px 8px 0 var(--l-green);
}

.l-plan__name {
    margin: 0;
    font-family: var(--l-mono);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--l-muted);
}

.l-plan__price {
    margin: 0;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.l-plan__price span {
    margin-left: 4px;
    color: var(--l-muted);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
}

.l-plan__period {
    margin: -8px 0 0;
    color: var(--l-muted);
    font-family: var(--l-mono);
    font-size: 0.8125rem;
}

.l-plan__limits {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--l-muted);
}

.l-plan__limits li {
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--l-line);
}

.l-plan__limits b {
    color: var(--l-text);
    font-family: var(--l-mono);
}

.l-plan__note {
    margin: auto 0 0;
    color: var(--l-muted);
    font-size: 0.875rem;
}

/* A way on to the docs, under a section */

.l-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 16px;
    color: var(--l-green);
    font-family: var(--l-mono);
    font-size: 0.9375rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.l-more:hover {
    color: var(--l-text);
}

/* The last word */

.l-finale {
    display: grid;
    justify-items: center;
    gap: 24px;
    padding: 96px var(--l-gutter) 120px;
    border-top: 1px solid var(--l-line);
    text-align: center;
}

.l-finale__word {
    margin: 0;
    font-family: var(--l-mono);
    font-size: clamp(5rem, 24vw, 16rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 2px var(--l-green);
}

.l-finale__word.is-buzzing {
    animation: l-letter-buzz 420ms linear;
}

.l-finale__text {
    margin: 0;
    color: var(--l-muted);
    font-size: 1.25rem;
}

.l-footer {
    display: flex;
    justify-content: space-between;
    max-width: var(--l-max);
    margin: 0 auto;
    padding: 24px var(--l-gutter) max(24px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--l-line);
    color: var(--l-muted);
    font-family: var(--l-mono);
    font-size: 0.8125rem;
}

.l-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -12px;
}

@media (max-width: 599px) {
    .l-footer {
        flex-direction: column;
        gap: 8px;
    }
}

.l-footer__links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}

.l-footer a:hover {
    color: var(--l-text);
}

/* Terms and Privacy: one readable column, numbered like the landing sections, with the short version up front. */

.l-legal {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(40px, 8vw, 96px) var(--l-gutter) 80px;
}

.l-legal__kicker {
    margin: 0 0 12px;
    color: var(--l-green);
    font-family: var(--l-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.l-legal__title {
    margin: 0;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.l-legal__updated {
    margin: 16px 0 0;
    color: var(--l-muted);
    font-family: var(--l-mono);
    font-size: 0.8125rem;
}

.l-legal__summary {
    margin: 40px 0 56px;
    padding: 24px;
    border: 1px solid var(--l-green);
    background: var(--l-bg-raised);
    box-shadow: 6px 6px 0 var(--l-green-ink);
}

.l-legal__summary h2 {
    margin: 0 0 12px;
    font-size: 1.125rem;
}

.l-legal__summary ul {
    margin: 0;
    padding-left: 20px;
}

.l-legal__summary li + li {
    margin-top: 8px;
}

.l-legal__summary-note {
    margin: 16px 0 0;
    color: var(--l-muted);
    font-size: 0.875rem;
}

.l-legal__body {
    color: #CBD5E1;
    font-size: 1rem;
    line-height: 1.7;
}

.l-legal__body section {
    padding-top: 32px;
    border-top: 1px solid var(--l-line);
    scroll-margin-top: 24px;
}

.l-legal__body section + section {
    margin-top: 32px;
}

.l-legal__body h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 12px;
    color: var(--l-text);
    font-size: 1.375rem;
    line-height: 1.3;
}

.l-legal__body h2 span {
    color: var(--l-green);
    font-family: var(--l-mono);
    font-size: 0.875rem;
    font-weight: 400;
}

.l-legal__body p,
.l-legal__body ul {
    margin: 0 0 12px;
}

.l-legal__body ul {
    padding-left: 20px;
}

.l-legal__body li + li {
    margin-top: 6px;
}

.l-legal a {
    color: var(--l-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.l-legal strong {
    color: var(--l-text);
}

.l-legal__table {
    display: grid;
    gap: 0;
    margin: 0 0 16px;
    border: 1px solid var(--l-line);
}

.l-legal__table dt {
    padding: 14px 16px 0;
    color: var(--l-text);
    font-weight: 600;
}

.l-legal__table dd {
    margin: 0;
    padding: 4px 16px 14px;
    border-bottom: 1px solid var(--l-line);
}

.l-legal__table dd:last-child {
    border-bottom: 0;
}

@media (min-width: 700px) {
    .l-legal__table {
        grid-template-columns: 180px 1fr;
    }

    .l-legal__table dt {
        padding: 14px 16px;
        border-bottom: 1px solid var(--l-line);
        border-right: 1px solid var(--l-line);
    }

    .l-legal__table dd {
        padding: 14px 16px;
    }

    .l-legal__table dt:nth-last-of-type(1) {
        border-bottom: 0;
    }
}

/* Motion */

@keyframes l-shake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    15% { transform: translate(-7px, 1px) rotate(-2.5deg); }
    30% { transform: translate(6px, -1px) rotate(2deg); }
    45% { transform: translate(-5px, 1px) rotate(-1.5deg); }
    60% { transform: translate(4px, 0) rotate(1deg); }
    75% { transform: translate(-2px, 0) rotate(-0.5deg); }
}

@keyframes l-letter-buzz {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-3px, 1px); }
    40% { transform: translate(3px, -1px); }
    60% { transform: translate(-2px, 0); }
    80% { transform: translate(2px, 1px); }
}

@keyframes l-ring {
    from { opacity: 0.8; transform: scale(1); }
    to { opacity: 0; transform: scale(1.35); }
}

@keyframes l-drop-in {
    from { opacity: 0; transform: translateY(-14px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes l-pop {
    50% { transform: scale(1.35); }
}

@keyframes l-blink {
    from { box-shadow: 0 0 0 0 rgb(34 197 94 / 80%); }
    to { box-shadow: 0 0 0 10px rgb(34 197 94 / 0%); }
}

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

    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}