/* ============================================================================
   The landing page and the account pages.
   ----------------------------------------------------------------------------
   Deliberately a separate stylesheet from app.css. The editor is a fixed,
   non-scrolling application shell; these pages are documents that scroll, read
   at any width and follow the visitor's colour scheme. Keeping them apart means
   neither set of rules has to defend itself against the other, and the editor
   never pays for CSS only the first page uses.

   Everything here is scoped under .marketing or .authpage.
   ========================================================================== */

/* app.css locks the viewport for the canvas. These pages are documents. */
html:has(.marketing), body:has(.marketing),
html:has(.authpage), body:has(.authpage) {
    overflow: visible;
    overflow-y: auto;
    height: auto;
    min-height: 100%;
    background: var(--m-bg);
}

.marketing, .authpage {
    /* Light by default. Every colour is defined here so nothing depends on a
       media query having matched. */
    --m-bg: #ffffff;
    --m-bg-2: #f6f8fc;
    --m-ink: #0f172a;
    --m-ink-2: #475569;
    --m-ink-3: #7c8ba1;
    --m-line: #e3e8f0;
    --m-line-2: #cfd8e6;
    --m-card: #ffffff;
    --m-accent: #4f46e5;
    --m-accent-2: #7c6cf6;
    --m-accent-ink: #ffffff;
    --m-accent-soft: #eef2ff;
    --m-hero-bg: radial-gradient(1100px 520px at 18% -10%, #253063 0%, #131a35 45%, #0d1226 100%);
    --m-hero-ink: #eef2ff;
    --m-hero-ink-2: #b6c0e0;
    --m-hero-line: rgba(255, 255, 255, .14);
    --m-danger: #dc2626;
    --m-ok: #059669;
    --m-shadow: 0 18px 50px rgba(15, 23, 42, .12);
    --m-shadow-sm: 0 4px 14px rgba(15, 23, 42, .07);
    --m-radius: 14px;
    --m-radius-lg: 20px;
    --m-max: 1140px;

    color: var(--m-ink);
    background: var(--m-bg);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
    .marketing, .authpage {
        --m-bg: #0b1020;
        --m-bg-2: #10162c;
        --m-ink: #e8edf9;
        --m-ink-2: #a9b4cd;
        --m-ink-3: #7d8aa6;
        --m-line: #1f2942;
        --m-line-2: #2c3757;
        --m-card: #121a31;
        --m-accent: #8b83ff;
        --m-accent-2: #a596ff;
        --m-accent-ink: #10132a;
        --m-accent-soft: #1a2145;
        --m-shadow: 0 18px 50px rgba(0, 0, 0, .5);
        --m-shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
    }
}

.marketing *, .authpage * { box-sizing: border-box; }

.m-wrap {
    width: 100%;
    max-width: var(--m-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ------------------------------------------------------------------ nav */

.m-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--m-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--m-line);
}

.m-nav-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 62px;
}

.m-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.01em;
    color: var(--m-ink);
    text-decoration: none;
}

.m-brand svg { color: var(--m-accent); }

.m-nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: 10px;
}

/* On a phone the section links would push the calls to action off the right edge, and the calls to
   action are the point of the bar. The sections are still one scroll away. */
@media (max-width: 740px) {
    .m-nav-links { display: none; }
    .m-wrap { padding: 0 18px; }
}

.m-nav-links a {
    color: var(--m-ink-2);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
}

.m-nav-links a:hover { color: var(--m-ink); }

.m-nav-spacer { flex: 1; }

.m-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --------------------------------------------------------------- buttons */

.m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border-radius: var(--m-radius);
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}

.m-btn:active { transform: translateY(1px); }

.m-btn.primary {
    background: var(--m-accent);
    color: var(--m-accent-ink);
}

.m-btn.primary:hover { background: var(--m-accent-2); }

.m-btn.ghost {
    background: transparent;
    color: var(--m-ink);
    border-color: var(--m-line-2);
}

.m-btn.ghost:hover { background: var(--m-bg-2); }

.m-btn.on-dark {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: var(--m-hero-line);
}

.m-btn.on-dark:hover { background: rgba(255, 255, 255, .16); }

.m-btn.sm { height: 36px; padding: 0 14px; font-size: 14px; }

.m-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------------ hero */

.m-hero {
    background: var(--m-hero-bg);
    color: var(--m-hero-ink);
    padding: 76px 0 0;
}

.m-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    /* Bottom-aligned so the sample card can run off the bottom edge of the hero rather than
       floating in the middle of it with its flat bottom edge exposed. */
    align-items: end;
}

@media (min-width: 980px) {
    .m-hero-grid { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
}

.m-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    border: 1px solid var(--m-hero-line);
    background: rgba(255, 255, 255, .06);
    font-size: 13px;
    font-weight: 600;
    color: var(--m-hero-ink-2);
    margin-bottom: 22px;
}

.m-eyebrow b { color: #fff; font-weight: 700; }

.m-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(34px, 5.2vw, 54px);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 750;
    color: #fff;
}

.m-hero h1 em {
    font-style: normal;
    background: linear-gradient(96deg, #a5b4fc, #f0abfc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.m-hero p.lede {
    margin: 0 0 30px;
    font-size: clamp(16px, 1.5vw, 18.5px);
    color: var(--m-hero-ink-2);
    max-width: 46ch;
}

.m-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.m-hero-note {
    font-size: 13.5px;
    color: var(--m-hero-ink-2);
    margin: 0 0 56px;
}

/* The live sample. It is the product's own SVG export, animating, not a picture. */
.m-stage {
    position: relative;
    /* Overhangs into the section below, which reserves the room for it. */
    margin-bottom: -56px;
    border-radius: var(--m-radius-lg);
    background: #fff;
    border: 1px solid var(--m-hero-line);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.m-stage-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.m-stage-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.m-stage-title {
    margin-left: 8px;
    font-size: 12.5px;
    color: #64748b;
    font-weight: 600;
}

.m-stage-body {
    padding: 14px;
    background: #fff;
    max-height: 460px;
    overflow: hidden;
}

.m-stage-body svg {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------- sections */

.m-section { padding: 86px 0; }

/* Clears the sample card that overhangs the bottom of the hero. */
.m-hero + .m-section { padding-top: 124px; }
.m-section.tint { background: var(--m-bg-2); border-block: 1px solid var(--m-line); }

.m-section-head { max-width: 62ch; margin-bottom: 46px; }

.m-section-head h2 {
    margin: 0 0 12px;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 720;
}

.m-section-head p {
    margin: 0;
    font-size: 17px;
    color: var(--m-ink-2);
}

.m-kicker {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--m-accent);
    margin-bottom: 10px;
}

/* --------------------------------------------------------------- features */

.m-features {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.m-feature {
    padding: 26px;
    border-radius: var(--m-radius);
    border: 1px solid var(--m-line);
    background: var(--m-card);
    box-shadow: var(--m-shadow-sm);
}

.m-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--m-accent-soft);
    color: var(--m-accent);
    margin-bottom: 16px;
}

.m-feature h3 {
    margin: 0 0 8px;
    font-size: 17.5px;
    font-weight: 680;
    letter-spacing: -.01em;
}

.m-feature p {
    margin: 0;
    font-size: 15px;
    color: var(--m-ink-2);
}

/* ---------------------------------------------------------------- gallery */

.m-gallery {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.m-shot {
    border-radius: var(--m-radius);
    border: 1px solid var(--m-line);
    background: var(--m-card);
    overflow: hidden;
    box-shadow: var(--m-shadow-sm);
    display: flex;
    flex-direction: column;
}

.m-shot-canvas {
    background: #fff;
    border-bottom: 1px solid var(--m-line);
    padding: 14px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.m-shot-canvas svg {
    display: block;
    max-width: 100%;
    max-height: 182px;
    width: auto;
    height: auto;
}

.m-shot-meta { padding: 16px 18px 18px; }

.m-shot-meta h3 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 660;
}

.m-shot-meta p {
    margin: 0;
    font-size: 14px;
    color: var(--m-ink-2);
}

/* ----------------------------------------------------------------- export */

.m-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.m-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--m-line-2);
    background: var(--m-card);
    font-size: 14px;
    font-weight: 600;
    color: var(--m-ink-2);
}

/* -------------------------------------------------------------------- cta */

.m-cta {
    text-align: center;
    padding: 82px 0;
    background: var(--m-hero-bg);
    color: #fff;
}

.m-cta h2 {
    margin: 0 0 14px;
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: -.02em;
    font-weight: 720;
    color: #fff;
}

.m-cta p {
    margin: 0 auto 28px;
    max-width: 54ch;
    color: var(--m-hero-ink-2);
    font-size: 17px;
}

.m-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------- footer */

.m-footer {
    padding: 42px 0;
    background: var(--m-bg);
    border-top: 1px solid var(--m-line);
    font-size: 14px;
    color: var(--m-ink-3);
}

.m-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 34px;
    align-items: center;
}

.m-footer a {
    color: var(--m-ink-2);
    text-decoration: none;
}

.m-footer a:hover { color: var(--m-ink); text-decoration: underline; }

.m-footer-spacer { flex: 1; }

.m-footer-note {
    width: 100%;
    font-size: 12.5px;
    color: var(--m-ink-3);
    line-height: 1.6;
}

/* ============================================================ account pages */

.authpage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 60px;
    background:
        radial-gradient(720px 340px at 50% -12%, var(--m-accent-soft) 0%, transparent 70%),
        var(--m-bg);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    margin-top: 28px;
    padding: 32px;
    border-radius: var(--m-radius-lg);
    border: 1px solid var(--m-line);
    background: var(--m-card);
    box-shadow: var(--m-shadow);
}

.auth-card h1 {
    margin: 0 0 6px;
    font-size: 25px;
    letter-spacing: -.02em;
    font-weight: 700;
}

.auth-card .sub {
    margin: 0 0 24px;
    color: var(--m-ink-2);
    font-size: 15px;
}

.auth-field { margin-bottom: 16px; }

.auth-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 620;
    color: var(--m-ink-2);
}

.auth-field input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border-radius: var(--m-radius);
    border: 1px solid var(--m-line-2);
    background: var(--m-bg);
    color: var(--m-ink);
    font-size: 15px;
    outline: none;
}

.auth-field input:focus {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 22%, transparent);
}

.auth-field .hint {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--m-ink-3);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 14px;
}

.auth-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--m-ink-2);
    cursor: pointer;
}

.auth-card .m-btn { width: 100%; height: 46px; }

.auth-alt {
    margin: 22px 0 0;
    text-align: center;
    font-size: 14.5px;
    color: var(--m-ink-2);
}

.auth-alt a, .auth-row a {
    color: var(--m-accent);
    font-weight: 600;
    text-decoration: none;
}

.auth-alt a:hover, .auth-row a:hover { text-decoration: underline; }

.auth-msg {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: var(--m-radius);
    font-size: 14px;
    border: 1px solid;
}

.auth-msg.bad {
    color: var(--m-danger);
    border-color: color-mix(in srgb, var(--m-danger) 35%, transparent);
    background: color-mix(in srgb, var(--m-danger) 8%, transparent);
}

.auth-msg.good {
    color: var(--m-ok);
    border-color: color-mix(in srgb, var(--m-ok) 35%, transparent);
    background: color-mix(in srgb, var(--m-ok) 8%, transparent);
}

.auth-msg.info {
    color: var(--m-ink-2);
    border-color: var(--m-line-2);
    background: var(--m-bg-2);
}

.auth-token {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--m-bg-2);
    border: 1px solid var(--m-line);
    font-family: var(--mono);
    font-size: 12px;
    word-break: break-all;
    color: var(--m-ink);
}

/* ------------------------------------------------------- account menu chip */

.acct {
    position: relative;
    display: inline-flex;
}

.acct-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    max-width: 190px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--panel-line-2, #cbd5e1);
    background: var(--panel, #f8fafc);
    color: var(--ink, #0f172a);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.acct-btn:hover { background: #eef2ff; }

.acct-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.acct-menu {
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 60;
    min-width: 232px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .18);
}

.acct-who {
    padding: 8px 10px 10px;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 6px;
}

.acct-who strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acct-who span { font-size: 11.5px; color: #94a3b8; }

.acct-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.acct-item:hover { background: #f1f5f9; }

.acct-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
}

@media (prefers-reduced-motion: reduce) {
    .marketing *, .authpage * { transition: none !important; animation: none !important; }
}

/* ============================================================ the legal page */

/* A footer control that has to look like the links beside it but is a button,
   because it changes state on this page rather than going anywhere. Making it
   an <a href="#"> instead would be a lie to a screen reader about what happens
   when it is activated. */
.m-linkbutton {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.m-linkbutton:hover { color: var(--m-ink); }

.m-linkbutton:focus-visible {
    outline: 2px solid var(--m-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.legal-body {
    padding: 46px 24px 20px;
    max-width: 780px;
}

.legal-body h1 {
    margin: 0 0 10px;
    font-size: 38px;
    letter-spacing: -.025em;
    line-height: 1.15;
}

.legal-lede {
    margin: 0 0 34px;
    font-size: 17.5px;
    color: var(--m-ink-2);
}

.legal-body h2 {
    margin: 42px 0 12px;
    padding-top: 22px;
    border-top: 1px solid var(--m-line);
    font-size: 24px;
    letter-spacing: -.02em;
}

.legal-body h3 {
    margin: 28px 0 8px;
    font-size: 17px;
    font-weight: 660;
}

.legal-body p { margin: 0 0 14px; }

.legal-body ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.legal-body li { margin-bottom: 9px; }

.legal-body code {
    padding: 1px 5px;
    border-radius: 5px;
    border: 1px solid var(--m-line);
    background: var(--m-bg-2);
    font-size: .9em;
}

/* Marked out rather than woven in. Each of these is a decision somebody still
   owes, and a reader — including the operator — should be able to find them by
   scanning rather than by reading the whole page. */
.legal-todo {
    margin: 22px 0 26px;
    padding: 16px 18px;
    border-radius: var(--m-radius);
    border: 1px dashed var(--m-accent);
    background: var(--m-accent-soft);
}

.legal-todo strong {
    display: block;
    margin-bottom: 6px;
    color: var(--m-ink);
}

.legal-todo p {
    margin: 0;
    color: var(--m-ink-2);
    font-size: 14.5px;
}

.legal-warn {
    padding: 14px 16px;
    border-radius: var(--m-radius);
    border: 1px solid var(--m-line-2);
    border-left: 3px solid var(--m-danger);
    background: var(--m-bg-2);
}

.legal-body .m-footer {
    margin-top: 46px;
}