/* ============================================================
   Latch & Lantern :: PUBLIC LANDING + SIGNUP

   STANDALONE ON PURPOSE.

   This is the only page a stranger sees, and it is the one page in the
   product that must not wear the product's personality. Inside a family,
   Latch & Lantern is themed — twelve skins from camo to daisy to noir —
   and every member picks their own. The storefront is not a member, so
   it does not pick one.

   The register here is the family-organizer shelf (Hearth, Skylight and
   friends, without copying any of them): clean white ground, editorial
   SERIF display headlines over a plain sans body, colour coding by
   family member, big rounded cards. The single richest element is the
   hero "display" — the product drawn in CSS, since the CSP allows no
   photography and none exists yet anyway.

   Consequences, all deliberate:
     * theme.css is NOT loaded by marketing/index.html, and not a single
       theme token is referenced below. The palette is declared here.
     * html[data-theme] does nothing on this page. js/theme-boot.js still
       runs — it is what parses the config block into window.HUB — and
       the attribute it sets is simply inert here.
     * The skins appear on the page as SUBJECT MATTER (the hero
       floats, the "Made theirs" vignette, the "Twelve worlds" grid), drawn
       from the real values in css/theme.css but restated as literals so
       this file stays free-standing. If a skin's palette is ever
       retuned, the swatches here are a deliberate second edit.

   CSP: default-src 'self'. No @font-face (font-src is 'self' and we ship
   no font files — the serif is a system stack), no external url();
   every graphic below is a gradient, a border-radius or inline SVG in
   the markup. Phone-first: one column until 720px, two from 960px.

   Class prefix `mk-`, unchanged, because js/signup.js writes `mk-hint`
   (plus `ok`/`bad`) onto the availability line and nothing else in this
   file may claim that name.
   ============================================================ */

/* ---------------------------------------------------------- tokens */

:root {
    /* white base with cool neutrals — the colour lives in the accents */
    --paper: #ffffff;
    --paper-2: #f5f7f9;
    --surface: #ffffff;
    --ink: #1e242b;          /* 15.9:1 on white */
    --ink-2: #566069;        /* 6.5:1  on white */
    --ink-3: #6e7781;        /* 4.6:1 — supporting text */
    --line: #e7eaee;
    --line-2: #d3d9df;

    /* the accent family: tomato leads; the rest colour-code people.
       Every text/em colour here is ≥4.5:1 on white. */
    --coral: #d63e1f;        /* 4.6:1 with white — safe for buttons and links */
    --coral-bright: #e8502c;
    --coral-wash: #fdeae3;
    --teal: #0f766e;         /* 5.5:1 */
    --teal-wash: #dff4f0;
    --marigold: #9a6700;     /* 4.9:1 — text-safe gold */
    --marigold-wash: #fdf3d2;
    --rose: #be185d;         /* 6.0:1 */
    --rose-wash: #fce7f1;
    --sky: #3f6587;          /* 6.1:1 */
    --sky-wash: #e7f0f8;
    --plum: #6d4f8c;         /* 5.6:1 — Grandma Ro's colour, and the linked hub's */
    --plum-wash: #f0eaf7;
    --good: #1c7a4d;
    --bad: #b3241f;

    /* the privacy panel — deep teal ink, mint-white text. Its three on-dark
       colours are tokens too, so a skin can relight the panel without a
       second selector. */
    --pine: #123734;
    --pine-2: #1a4a44;
    --cream: #eef6f3;
    --panel-accent: #7fd9c0;
    --panel-dim: #b8d2ca;
    --panel-text: #d7e8e1;

    /* ---- everything below is what makes the whole look swappable ----
       These were hard-coded rgba() literals scattered through the file until
       the lantern skin needed them. Nothing outside this block may hard-code a
       colour again; a new skin is one override block and no other edit. */
    --accent-rgb: 214, 62, 31;      /* the accent, for alpha compositing */
    --shadow-rgb: 23, 32, 42;       /* what "depth" is made of */
    --hairline-rgb: 30, 36, 43;     /* swatch + mockup borders */
    --good-rgb: 28, 107, 71;
    --bad-rgb: 179, 36, 31;
    --coral-deep: #b53517;          /* the dark end of the logo gradient */
    --glass: rgba(255, 255, 255, .88);   /* the sticky nav's frosted fill */
    --grid: rgba(63, 101, 135, .08);     /* graph paper, hero */
    --grid-soft: rgba(63, 101, 135, .05);/* graph paper, tinted sections */
    --wash-a: rgba(232, 80, 44, .10);    /* the three soft washes behind the fold */
    --wash-b: rgba(15, 118, 110, .08);
    --wash-c: rgba(190, 24, 93, .05);
    /* The marker underline. A data: URI, which img-src 'self' data: allows. */
    --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C 40 2 80 13 116 7 S 180 3 196 8' fill='none' stroke='%23d63e1f' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");

    --radius: 18px;
    --radius-sm: 11px;
    --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), .05), 0 4px 12px rgba(var(--shadow-rgb), .05);
    --shadow-md: 0 2px 4px rgba(var(--shadow-rgb), .05), 0 12px 32px rgba(var(--shadow-rgb), .09);
    --shadow-lg: 0 4px 8px rgba(var(--shadow-rgb), .06), 0 28px 70px rgba(var(--shadow-rgb), .13);

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Display serif, from the system: warm and editorial, zero bytes.
       Iowan (Apple) and Palatino (Windows) are the intended landings. */
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                    "Book Antiqua", Georgia, "Times New Roman", serif;
}

/* ============================================================
   THE LANTERN SKIN  —  active

   Warm ink on lamplit paper with a brass accent, in place of the cool
   white-and-tomato above. Same type, same structure, same components;
   only the palette moves, which is the whole reason the literals above
   were tokenised.

   ┌──────────────────────────────────────────────────────────────┐
   │  TO REVERT: delete `data-skin="lantern"` from the <html> tag  │
   │  in marketing/index.html. One attribute. Nothing else.        │
   │  This block can stay — it does nothing unless the attribute   │
   │  is present.                                                  │
   └──────────────────────────────────────────────────────────────┘

   Contrast, checked against --paper (#faf7f1), all ≥4.5:1:
     --ink 15.2   --ink-2 6.7   --ink-3 4.9   --coral 5.0
     --teal 5.1   --rose 5.7    --sky 5.7     --marigold 5.5
     white on --coral 5.6   --cream on --pine 13.3
   --flame is DECORATIVE ONLY (2.4:1) — it lights the washes and must
   never carry text.
   ============================================================ */
html[data-skin="lantern"] {
    /* lamplit paper, warm ink */
    --paper: #faf7f1;
    --paper-2: #f3eee3;
    --surface: #ffffff;
    --ink: #23201c;
    --ink-2: #5f574c;
    --ink-3: #726c5e;
    --line: #e4dcd1;
    --line-2: #d5c9b6;

    /* brass leads instead of tomato */
    --coral: #8f6220;
    --coral-bright: #9c6b23;
    --coral-deep: #7a5219;
    --coral-wash: #f7ecd8;
    --flame: #d99133;        /* decorative only — the lit part of the lantern */

    /* the member colours stay distinguishable, warmed to sit on cream */
    --teal: #0f766e;
    --teal-wash: #e3f0ec;
    --marigold: #8a5a12;
    --marigold-wash: #f9efd6;
    --rose: #be185d;
    --rose-wash: #fbe7ee;
    --sky: #3f6587;
    --sky-wash: #e8eff5;
    --plum: #6d4f8c;
    --plum-wash: #efe8f2;
    --good: #1c7a4d;
    --bad: #a8443a;

    /* the privacy panel becomes a room after dark rather than a teal slab —
       lamplight on warm walls, which is the whole metaphor of the name */
    --pine: #26211a;
    --pine-2: #322a20;
    --cream: #f2e9d8;
    --panel-accent: #d9a349;   /* 7.1:1 on --pine */
    --panel-dim: #c4b8a2;
    --panel-text: #e8dcc6;

    --accent-rgb: 143, 98, 32;
    --shadow-rgb: 58, 48, 36;      /* depth is warm here, not blue-black */
    --hairline-rgb: 35, 32, 28;
    --good-rgb: 28, 122, 77;
    --bad-rgb: 168, 68, 58;

    --glass: rgba(250, 247, 241, .88);
    --grid: rgba(143, 98, 32, .07);
    --grid-soft: rgba(143, 98, 32, .05);

    /* wash-a is the lantern glow itself — the one thing carried over
       wholesale from the naming page, and the reason the fold feels lit
       rather than merely tinted. */
    --wash-a: rgba(217, 145, 51, .17);
    --wash-b: rgba(143, 98, 32, .08);
    --wash-c: rgba(190, 24, 93, .04);

    --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C 40 2 80 13 116 7 S 180 3 196 8' fill='none' stroke='%238f6220' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The eyebrow above each section is the naming page's brass label: a hair
   more tracking, and the lantern's own glow behind the hero mark. */
html[data-skin="lantern"] .mk-kicker,
html[data-skin="lantern"] .mk-story-kicker {
    letter-spacing: .14em;
}

html[data-skin="lantern"] .mk-logo-mark {
    box-shadow: 0 3px 12px rgba(var(--accent-rgb), .30),
                0 0 22px rgba(217, 145, 51, .22);
}

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

html {
    /* Fixed light. The visitor's remembered skin belongs inside their hub. */
    color-scheme: light;
    background-color: var(--paper);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Focus is never removed, only restyled — a signup form is the last place
   to hide where the keyboard is. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 2px;
    border-radius: 6px;
}

.mk-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 50;
    background: var(--surface);
    color: var(--coral);
    padding: 10px 16px;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
    box-shadow: var(--shadow-md);
}
.mk-skip:focus { left: 0; }

.mk-shell {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.mk-shell-narrow { max-width: 760px; }

.mk-centered { text-align: center; }
.mk-centered .mk-h2,
.mk-centered .mk-sub { margin-left: auto; margin-right: auto; }
.mk-centered .mk-h2 { max-width: 24ch; }

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

.mk-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.mk-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 66px;
}

.mk-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}

.mk-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 11px;
    color: var(--surface);
    background: linear-gradient(150deg, var(--coral-bright) 0%, var(--coral) 55%, var(--coral-deep) 100%);
    box-shadow: 0 3px 10px rgba(var(--accent-rgb), .28);
}

.mk-logo-mark svg { width: 20px; height: 20px; }

.mk-logo-mark-sm { width: 28px; height: 28px; border-radius: 9px; }
.mk-logo-mark-sm svg { width: 17px; height: 17px; }

.mk-logo-word {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.005em;
    white-space: nowrap;
}

/* The ampersand is set as an italic swash in the accent — the one flourish the
   wordmark gets, and the reason the name is typeset rather than an image. */
.mk-logo-word i {
    font-style: italic;
    font-weight: 400;
    color: var(--coral);
    padding: 0 .04em;
}

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

.mk-nav-links a {
    color: var(--ink-2);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 999px;
    transition: color .15s ease, background-color .15s ease;
}

.mk-nav-links a:hover { color: var(--ink); background: var(--paper-2); }

.mk-nav-cta,
.mk-nav-links a.mk-nav-cta {
    color: var(--surface);
    background: var(--coral);
    font-weight: 600;
    padding: 9px 18px;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), .25);
}

.mk-nav-links a.mk-nav-cta:hover { background: var(--coral-bright); color: var(--surface); }

@media (max-width: 760px) {
    /* Section anchors go; the two doors (sign in, start) stay on every screen. */
    .mk-nav-links a:not(.mk-nav-cta):not(.mk-nav-signin) { display: none; }
}

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

.mk-hero {
    position: relative;
    /* The bottom padding is for the recipe card that hangs 16px below the display:
       the hero clips (overflow: hidden), and with no room here the card's lower edge
       was cut off and looked as if the strip below were covering it. */
    padding: 64px 0 28px;
    overflow: hidden;
}

/* Graph paper + soft washes behind the fold. The grid is the page's texture
   move — a family hub drawn on planner paper. Pure CSS: nothing to load,
   nothing for the CSP to refuse. Layers top-to-bottom: a white fade so the
   grid dissolves before the ticker, the colour washes, then the grid. */
.mk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 55%, var(--paper) 96%),
        radial-gradient(50% 44% at 18% 6%, var(--wash-a) 0%, transparent 62%),
        radial-gradient(44% 42% at 84% 12%, var(--wash-b) 0%, transparent 62%),
        radial-gradient(38% 36% at 55% 30%, var(--wash-c) 0%, transparent 66%),
        repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 26px);
}

/* marker scribble under the headline's last two words — a data-URI SVG,
   which img-src 'self' data: explicitly allows */
.mk-scribble {
    background-image: var(--scribble);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% .16em;
    padding-bottom: .14em;
}

/* margin doodles, as if someone annotated the page. Decoration only:
   aria-hidden in the markup, hidden entirely on small screens. */
.mk-doodle {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: .85;
}

.mk-doodle svg { display: block; width: 100%; height: auto; }

.mk-doodle-star  { width: 34px; left: 9%;  top: 120px; color: var(--sky);      transform: rotate(12deg); }
.mk-doodle-heart { width: 30px; right: 10%; top: 150px; color: var(--rose);     transform: rotate(-14deg); }
.mk-doodle-spark { width: 26px; left: 14%; top: 360px; color: var(--marigold); transform: rotate(-8deg); }
.mk-doodle-squig { width: 84px; right: 12%; top: 400px; color: var(--coral);    transform: rotate(6deg); }

@media (max-width: 900px) { .mk-doodle { display: none; } }

.mk-hero-copy {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 6px 14px 6px 11px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-2);
    box-shadow: var(--shadow-sm);
}

.mk-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--good);
    box-shadow: 0 0 0 3px rgba(var(--good-rgb), .16);
}

.mk-hero h1 {
    margin-top: 24px;
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 6.6vw, 4rem);
    line-height: 1.07;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--ink);
    max-width: 21ch;
    text-wrap: balance;
}

.mk-lede {
    margin-top: 20px;
    font-size: clamp(1.04rem, 2.3vw, 1.16rem);
    color: var(--ink-2);
    max-width: 58ch;
}

.mk-hero-ctas {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

/* .mk-btn declares width:100% later in the file (the form button), so these
   overrides ride on the container's specificity, not on source order */
.mk-hero-ctas .mk-btn {
    width: auto;
    margin-top: 0;
    padding: 15px 30px;
    font-size: 1.04rem;
}

.mk-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 14px 22px;
    border-radius: 12px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, box-shadow .18s ease;
}

.mk-btn-ghost:hover { border-color: var(--coral); box-shadow: var(--shadow-md); }

.mk-hero-note {
    margin-top: 16px;
    font-size: .88rem;
    color: var(--ink-3);
}

.mk-hero-note [data-fc="priceLabel"] { font-weight: 700; color: var(--ink-2); }

/* ------------------------------------------------ the hero stage */

/* The stage holds the browser window (see REAL SCREENSHOTS below) and the one
   card that floats off its corner. The hand-drawn "display" that used to stand
   here — a cream rectangle with invented events, photo squares and member chips
   on it — went when the hero started showing the actual product, and its rules
   went with it. `.mk-crew-chip` / `.mk-av*` survive because the themes and
   how-it-works sections still use them. */

.mk-stage {
    position: relative;
    z-index: 1;
    margin-top: 52px;
    padding-bottom: 76px;
}

/* small caps label, shared by the float card and the story vignettes */
.mk-w-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}

.mk-crew-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-2);
}

.mk-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-style: normal;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
}

.mk-av-teal     { background: var(--teal); }
.mk-av-coral    { background: var(--coral); }
.mk-av-marigold { background: #b45309; }
.mk-av-rose     { background: var(--rose); }
.mk-av-sky      { background: var(--sky); }
.mk-av-plum     { background: var(--plum); }

/* the floats: little cards hanging off the display's corners */
.mk-float {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 11px 14px;
    box-shadow: var(--shadow-md);
}

.mk-float .mk-w-title { margin-bottom: 4px; }

.mk-float-line { font-weight: 700; font-size: .95rem; }
.mk-float-sub  { font-size: .78rem; color: var(--ink-3); }

/* floats overlap the copy on narrow screens — they are decoration, drop them */
@media (max-width: 900px) {
    .mk-float { display: none; }
    .mk-stage { padding-bottom: 56px; }
}

/* ============================================================
   REAL SCREENSHOTS

   Everything from here to the end of this block frames a genuine capture of
   the public demo hub, taken by tools/capture-marketing.mjs. Three shapes:

     .mk-window   the hero — a browser frame round a crossfade of four skins
     .mk-fan      five phones, one per member, one skin each
     .mk-crop     one card, cropped, beside the story that describes it

   The IMAGES carry the product's personality (navy stripes, stencil heads,
   ruled paper, gingham), so the frames around them are deliberately quiet:
   one hairline, one shadow, one caption. The storefront's job here is to get
   out of the way of the thing it is selling.
   ============================================================ */

/* ---- the hero window ---- */

.mk-window {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
}

.mk-window-frame {
    border: 1px solid var(--line-2);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.mk-window-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
}

.mk-window-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }

.mk-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(var(--hairline-rgb), .10);
}
.mk-window-dots i:nth-child(1) { background: var(--coral-wash); }
.mk-window-dots i:nth-child(2) { background: var(--marigold-wash); }
.mk-window-dots i:nth-child(3) { background: var(--teal-wash); }

/* the address bar. The family's own subdomain is the product, so it is the one
   thing in this chrome allowed any colour. */
.mk-window-url {
    flex: 1 1 auto;
    max-width: 340px;
    margin: 0 auto;
    padding: 3px 14px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    letter-spacing: .01em;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mk-window-url b { color: var(--coral); font-weight: 700; }

/* The glass. `aspect-ratio` holds the box before the first image decodes, so
   the fold does not jump; the number is the capture's own 1700x1063. */
.mk-window-glass {
    position: relative;
    aspect-ratio: 1700 / 1063;
    background: var(--paper-2);
}

.mk-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* Harbor is opaque and the other three are not, which is exactly the frame
       that must survive the global prefers-reduced-motion animation kill at the
       top of this file. Do not move this into the keyframes. */
    opacity: 0;
    animation: mk-shot-fade 16s linear infinite;
}
.mk-shot-1 { opacity: 1; animation-delay:   0s; }
.mk-shot-2 { animation-delay: -12s; }
.mk-shot-3 { animation-delay:  -8s; }
.mk-shot-4 { animation-delay:  -4s; }

/* Four seconds each, ~0.6s of overlap. The negative delays above put each image
   at animation-time 0 — the one moment it is opaque — four seconds apart. */
@keyframes mk-shot-fade {
      0% { opacity: 1; }
     21% { opacity: 1; }
     25% { opacity: 0; }
     96% { opacity: 0; }
    100% { opacity: 1; }
}

.mk-window-cap {
    margin: 16px auto 0;
    max-width: 52ch;
    text-align: center;
    font-size: .84rem;
    color: var(--ink-3);
}
.mk-window-cap a { color: var(--coral); text-underline-offset: 3px; }

/* The one surviving float now hangs off the window's lower-left, clear of the
   caption. (The "Leo's look" swatch card went: the crossfade behind it is the
   same point made with the real thing.) */
.mk-float-recipe { left: max(8px, calc(50% - 580px)); bottom: 8px; transform: rotate(-2deg); }

/* ---- five zip codes: the phone fan ---- */

/* Base is the narrow-screen case — a scroll row, edge to edge. The fan proper is
   in the min-width block below, which is also where the per-phone offsets live,
   so nothing has to be unset. */
.mk-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: center;
}

.mk-split-note {
    margin-top: 18px;
    font-size: .94rem;
    color: var(--ink-3);
}
.mk-split-note a { color: var(--coral); text-underline-offset: 3px; }

.mk-fan {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* out to the edge of the viewport, so the row reads as more-to-the-right */
    margin: 0 -20px;
    padding: 6px 20px 10px;
}

.mk-fan-item {
    flex: 0 0 148px;
    width: 148px;
    margin: 0;
    scroll-snap-align: center;
}

/* A dark bezel, not a hairline: three of the five skins here are pale, and a white
   phone on cream paper with a 1px edge simply vanishes. The bezel is what makes each
   one read as a separate device carried by a different person. */
.mk-fan-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 17px;
    border: 3px solid var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.mk-fan-item figcaption {
    margin-top: 9px;
    text-align: center;
    font-size: .72rem;
    line-height: 1.3;
    color: var(--ink-3);
}
.mk-fan-item figcaption b {
    display: block;
    font-size: .82rem;
    color: var(--ink);
    letter-spacing: -.005em;
}

@media (min-width: 900px) {
    .mk-split { grid-template-columns: .88fr 1.12fr; gap: 48px; }

    /* An absolutely-positioned fan rather than a flex row with negative margins:
       the tilt is per-phone and the chips ride with it.
       EVERY OFFSET IS A PERCENTAGE, including the tops, because this column is
       ~505px wide at 1024 and ~557px at 1440 — fixed pixels put the fifth phone
       off the side of the page at the narrow end. `aspect-ratio` gives the box a
       height to resolve those percentages against, and keeps the section from
       breathing as the images decode. */
    .mk-fan {
        display: block;
        position: relative;
        aspect-ratio: 532 / 400;
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .mk-fan-item {
        position: absolute;
        top: 0;
        width: 24.8%;
        transform-origin: 50% 40%;
    }

    /* The chips sit in ONE row under the whole fan, not each under its own phone:
       the phones overlap, and a chip tucked under a raised one would be covered by
       its neighbour's screen. 96px wide at a 100px pitch is what keeps them apart.
       A hairline tick rises from each chip to the phone it names. */
    .mk-fan-item figcaption {
        position: absolute;
        top: calc(100% + 14px);
        left: 50%;
        /* of the PHONE, not the fan: 76% of a 24.8% column is 18.8% of the fan,
           which is exactly the pitch between phones — so no two chips can meet. */
        width: 76%;
        margin: 0;
        transform: translateX(-50%);
        font-size: .68rem;
        letter-spacing: -.005em;
        text-wrap: balance;
    }
    .mk-fan-item figcaption::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 100%;
        width: 1px;
        height: 10px;
        background: var(--line-2);
    }

    /* Left to right, low-high-low-high-low. The raised phones' chips drop further
       to land on the same line, and their ticks grow to match — both ticks pass
       through the gap between the two phones beside them, never across a screen. */
    .mk-fan-item:nth-child(1) { left:  0;     top: 13.5%; transform: rotate(-5deg); }
    .mk-fan-item:nth-child(2) { left: 18.8%;  top:  1.5%; transform: rotate(-2.5deg); }
    .mk-fan-item:nth-child(3) { left: 37.6%;  top: 13.5%; transform: rotate(0deg); }
    .mk-fan-item:nth-child(4) { left: 56.4%;  top:  1.5%; transform: rotate(2.5deg); }
    .mk-fan-item:nth-child(5) { left: 75.2%;  top: 13.5%; transform: rotate(5deg); }

    .mk-fan-item figcaption b { font-size: .76rem; }

    .mk-fan-item:nth-child(2n) figcaption { top: calc(100% + 62px); }
    .mk-fan-item:nth-child(2n) figcaption::before { height: 58px; }
}

/* Room again on a wide desktop: the chips are 19% of a 557px column there. */
@media (min-width: 1200px) {
    .mk-fan-item figcaption { font-size: .72rem; }
    .mk-fan-item figcaption b { font-size: .81rem; }
}

/* ---- what's inside: the at-a-glance panel ---- */

.mk-glance {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-md);
    padding: 6px 26px 6px 30px;
}

/* the brass spine — the same five accents the page colour-codes people with */
.mk-glance::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(to bottom,
        var(--coral) 0%, var(--marigold) 38%, var(--plum) 72%, var(--teal) 100%);
}

.mk-glance-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 18px;
    align-items: baseline;
    padding: 17px 0;
    border-bottom: 1px dashed var(--line-2);
}
.mk-glance-row:last-child { border-bottom: none; }

.mk-glance-n {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 700;
    color: var(--coral);
    text-align: right;
    letter-spacing: -.02em;
}
.mk-glance-n-sm { font-size: 1.2rem; }

.mk-glance dd { font-size: .89rem; line-height: 1.5; color: var(--ink-3); }
.mk-glance dd b {
    display: block;
    margin-bottom: 2px;
    font-size: 1rem;
    color: var(--ink);
}

.mk-glance-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    color: var(--ink-2);
    /* a 26-character hostname in a 200px column on a phone, and it must not
       simply run off the card */
    overflow-wrap: anywhere;
}

/* On a phone the numeral column is most of the card. Narrow it and shrink the
   display figures rather than letting the copy squeeze to three words a line. */
@media (max-width: 559px) {
    .mk-glance { padding-left: 22px; padding-right: 18px; }
    .mk-glance-row { grid-template-columns: 58px 1fr; gap: 14px; }
    .mk-glance-n { font-size: 1.9rem; }
    .mk-glance-n-sm { font-size: 1rem; }
    .mk-glance-url { font-size: .76rem; }
    .mk-crop-sheet::before { inset: 12px -8px 6px 8px; }
}

@media (min-width: 900px) {
    .mk-split-glance { grid-template-columns: 1.04fr .96fr; }
}

/* ---- one card, cropped, beside the story it belongs to ---- */

/* The sheet wraps the IMAGE only. The backing card below is positioned against it
   rather than against the <figure>, which also contains the caption — anchored on
   the figure it grew downwards and printed itself behind the caption. */
.mk-crop-sheet {
    display: block;
    position: relative;
    z-index: 0;   /* a stacking context, so the backing card stays behind the image */
}

/* a second sheet behind it, slightly turned: two cards of a deck, and the reason
   a flat rectangle on a flat page does not look flat */
.mk-crop-sheet::before {
    content: "";
    position: absolute;
    inset: 18px -14px 8px 14px;
    z-index: -1;
    border-radius: 20px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    transform: rotate(2.2deg);
}

.mk-crop img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow-md);
}

.mk-crop figcaption {
    /* clear of the backing sheet, which hangs 10px below the image */
    margin-top: 26px;
    text-align: center;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ---------------------------------------------------------- promise strip */

/* the promises scroll past like a ticker; the row holds the list twice and
   slides by exactly one copy, so the loop is seamless. prefers-reduced-motion
   is handled by the global animation kill at the top of this file — the row
   then simply sits still showing the first copy. */
.mk-strip {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
    overflow: hidden;
}

.mk-strip-row {
    display: flex;
    width: max-content;
    animation: mk-ticker 36s linear infinite;
}

.mk-strip-row:hover { animation-play-state: paused; }

@keyframes mk-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.mk-strip-set {
    display: flex;
    gap: 12px;
    padding-right: 12px;
}

.mk-strip-pill {
    font-size: .84rem;
    font-weight: 650;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 6px 14px;
    white-space: nowrap;
}

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

.mk-section {
    padding: 64px 0;
    scroll-margin-top: 70px;
}

@media (min-width: 960px) { .mk-section { padding: 92px 0; } }

.mk-section-tinted {
    background:
        repeating-linear-gradient(to right, var(--grid-soft) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(to bottom, var(--grid-soft) 0 1px, transparent 1px 26px),
        var(--paper-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.mk-kicker {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--coral);
}

.mk-h2 {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4.6vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -.012em;
    font-weight: 700;
    color: var(--ink);
    max-width: 24ch;
    text-wrap: balance;
}

.mk-sub {
    margin-top: 14px;
    font-size: 1.04rem;
    color: var(--ink-2);
    max-width: 60ch;
}

/* ---------------------------------------------------------- feature stories */

.mk-story {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
    margin-top: 56px;
}

@media (min-width: 880px) {
    .mk-story { grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 72px; }
    /* alternate: art on the left for the middle story */
    .mk-story-flip .mk-story-copy { order: 2; }
    .mk-story-flip .mk-story-art  { order: 1; }
}

.mk-story-kicker {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.mk-k-teal  { color: var(--teal); }
.mk-k-coral { color: var(--coral); }
.mk-k-plum  { color: var(--plum); }

.mk-story h3 {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.4vw, 1.9rem);
    line-height: 1.18;
    letter-spacing: -.01em;
    font-weight: 700;
    max-width: 24ch;
}

.mk-story-copy > p:not(.mk-story-kicker) {
    margin-top: 12px;
    color: var(--ink-2);
    max-width: 50ch;
}

.mk-ticks {
    margin-top: 18px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mk-ticks li {
    position: relative;
    padding-left: 30px;
    font-size: .95rem;
    color: var(--ink-2);
}

/* Tick drawn with two borders and a rotate — no glyph, no icon font. */
.mk-ticks li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .42em;
    width: 6px;
    height: 11px;
    border: solid var(--coral);
    border-width: 0 2.2px 2.2px 0;
    transform: rotate(42deg);
}

/* the full widget roster — mirrors js/registry.js MANIFEST, minus the two
   always-on cards, which get a line of small print instead */
.mk-widgets-all {
    margin-top: 72px;
    text-align: center;
}

.mk-widgets-all h3 {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.4vw, 1.9rem);
    line-height: 1.18;
    font-weight: 700;
}

.mk-widgets-sub {
    margin: 12px auto 0;
    color: var(--ink-2);
    max-width: 52ch;
}

.mk-wgrid {
    margin-top: 32px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    text-align: left;
}

@media (min-width: 640px)  { .mk-wgrid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1000px) { .mk-wgrid { grid-template-columns: repeat(4, 1fr); } }

.mk-wcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 16px 15px;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mk-wcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.mk-wicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    font-size: 1.15rem;
    line-height: 1;
}

.mk-wname {
    display: block;
    margin-top: 10px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}

.mk-wdesc {
    display: block;
    margin-top: 3px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--ink-3);
}

.mk-widgets-fine {
    margin: 20px auto 0;
    font-size: .84rem;
    color: var(--ink-3);
    max-width: 52ch;
}

/* The one surviving story vignette: two member dashboards in two skins (the
   "Made theirs" story). The week grid and the photos/bubbles pair that used to
   sit beside it are real screenshots now — see REAL SCREENSHOTS above. */
.mk-vig {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow-md);
}


.mk-vig-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.mk-mini {
    border-radius: 18px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 18px 16px 14px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
}

.mk-mini-bar {
    display: block;
    height: 11px;
    width: 58%;
    border-radius: 4px;
    background: var(--m-accent);
}

.mk-mini-line {
    display: block;
    margin-top: 11px;
    height: 7px;
    width: 86%;
    border-radius: 4px;
    background: var(--m-second);
    opacity: .85;
}

.mk-mini-line-2 { width: 52%; opacity: .5; }

.mk-mini-name {
    margin-top: auto;
    padding-top: 14px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--m-label);
}

.mk-mini-camo   { background: #0c0d0b; --m-accent: #d9a441; --m-second: #6b7d4f; --m-label: #d9cba8; }
.mk-mini-hearts { background: #fdeef4; --m-accent: #cf3a6d; --m-second: #f2a9c2; --m-label: #a53a60; }

/* ---------------------------------------------------------- themes showcase */

.mk-themes {
    margin-top: 38px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 720px)  { .mk-themes { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .mk-themes { grid-template-columns: repeat(6, 1fr); } }

/* Each card carries its skin in three custom properties and nothing else;
   the values are the real --bg-void / --toxic / --hazard from css/theme.css. */
.mk-theme {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 12px 14px;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mk-theme:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.mk-theme-art {
    display: block;
    position: relative;
    height: 74px;
    border-radius: var(--radius-sm);
    background: var(--t-bg);
    border: 1px solid rgba(var(--hairline-rgb), .12);
    padding: 11px 10px;
    overflow: hidden;
}

.mk-theme-bar {
    display: block;
    height: 9px;
    width: 62%;
    border-radius: 3px;
    background: var(--t-accent);
}

.mk-theme-line {
    display: block;
    margin-top: 9px;
    height: 6px;
    width: 88%;
    border-radius: 3px;
    background: var(--t-second);
    opacity: .85;
}

.mk-theme-line-2 { width: 56%; opacity: .5; }

.mk-theme-meta { display: block; margin-top: 12px; }

.mk-theme-name {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}

.mk-theme-note {
    display: block;
    margin-top: 2px;
    font-size: .78rem;
    color: var(--ink-3);
    line-height: 1.4;
}

.mk-theme-dots {
    display: flex;
    gap: 5px;
    margin-top: 11px;
}

.mk-theme-dots i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(var(--hairline-rgb), .14);
}

.mk-theme-dots i:nth-child(1) { background: var(--t-accent); }
.mk-theme-dots i:nth-child(2) { background: var(--t-second); }
.mk-theme-dots i:nth-child(3) { background: var(--t-bg); }

/* --- the thirty skins, values lifted from css/theme.css --- */
.mk-theme-camo      { --t-bg: #0c0d0b; --t-accent: #d9a441; --t-second: #6b7d4f; }
.mk-theme-biohazard { --t-bg: #0a0c0d; --t-accent: #9dff00; --t-second: #f7d117; }
.mk-theme-tribal    { --t-bg: #060b14; --t-accent: #e8722a; --t-second: #4a7fa8; }
.mk-theme-onyx      { --t-bg: #101012; --t-accent: #e4e6ea; --t-second: #6d737b; }
.mk-theme-steel     { --t-bg: #0b0e13; --t-accent: #5b9bd5; --t-second: #3d5a7a; }
.mk-theme-hearts    { --t-bg: #fdeef4; --t-accent: #cf3a6d; --t-second: #f2a9c2; }
.mk-theme-orbit     { --t-bg: #050608; --t-accent: #9fd8ff; --t-second: #8892a0; }
.mk-theme-daisy     { --t-bg: #fbfaf3; --t-accent: #3e7d34; --t-second: #f5d76e; }
.mk-theme-harbor    { --t-bg: #f5f2e9; --t-accent: #1f4e79; --t-second: #b3402f; }
.mk-theme-voyage    { --t-bg: #06101b; --t-accent: #d0a75c; --t-second: #3f7ea6; }
.mk-theme-atelier   { --t-bg: #faf9f6; --t-accent: #8a6a2f; --t-second: #6a675f; }
.mk-theme-noir      { --t-bg: #121110; --t-accent: #d8c49a; --t-second: #7d7668; }
.mk-theme-cabin     { --t-bg: #f6efe2; --t-accent: #9a5518; --t-second: #5b7a2d; }
.mk-theme-notebook  { --t-bg: #eef1f5; --t-accent: #2450a4; --t-second: #bb2f26; }
.mk-theme-botanic   { --t-bg: #f2eee1; --t-accent: #2b6650; --t-second: #8a5a2b; }
.mk-theme-diner     { --t-bg: #eef1f4; --t-accent: #c1272d; --t-second: #0e7c68; }
.mk-theme-chalkboard { --t-bg: #1b2320; --t-accent: #e9d9a8; --t-second: #9fc3d8; }
.mk-theme-library   { --t-bg: #16100e; --t-accent: #d4a548; --t-second: #a9bd8e; }
.mk-theme-speakeasy { --t-bg: #0e1a16; --t-accent: #d9a441; --t-second: #7fc4a3; }
.mk-theme-neon      { --t-bg: #0a0614; --t-accent: #ff5cc8; --t-second: #52e0ea; }
.mk-theme-frost     { --t-bg: #f3f7fb; --t-accent: #1f5f8b; --t-second: #5b7488; }
.mk-theme-dune      { --t-bg: #f7efe3; --t-accent: #a3472a; --t-second: #a8760f; }
.mk-theme-lagoon    { --t-bg: #eef9f8; --t-accent: #0f6f6b; --t-second: #b5541c; }
.mk-theme-tearoom   { --t-bg: #f7f6f1; --t-accent: #4f6b4a; --t-second: #8d5a63; }
.mk-theme-bakery    { --t-bg: #fbf6ee; --t-accent: #8a4b1f; --t-second: #a53860; }
.mk-theme-wallstreet { --t-bg: #f5efe4; --t-accent: #1d3d63; --t-second: #8a6612; }
.mk-theme-professional { --t-bg: #f3f5f8; --t-accent: #1f4e79; --t-second: #5c6b7f; }
.mk-theme-bubbles   { --t-bg: #e9f4fd; --t-accent: #0f6d9e; --t-second: #7a4bb5; }
.mk-theme-winter    { --t-bg: #eef3f6; --t-accent: #1d5245; --t-second: #3d6d8a; }
.mk-theme-spring    { --t-bg: #f3faf0; --t-accent: #b8336a; --t-second: #4b7a1e; }

/* ---------------------------------------------------------- how it works */

.mk-steps {
    margin-top: 44px;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    counter-reset: none;
}

@media (min-width: 880px) { .mk-steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.mk-step {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px 22px;
    box-shadow: var(--shadow-sm);
}

.mk-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--coral-wash);
    border: 2px dashed var(--coral);
    color: var(--coral);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 14px;
    transform: rotate(-4deg);
}

.mk-step:nth-child(2) .mk-step-num { transform: rotate(3deg); }
.mk-step:nth-child(3) .mk-step-num { transform: rotate(-2deg); }

.mk-step h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.005em;
}

.mk-step p:not(.mk-step-art) {
    margin-top: 8px;
    font-size: .95rem;
    color: var(--ink-2);
}

.mk-step-art {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
}

.mk-addr {
    font-size: .88rem;
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}

.mk-addr b { color: var(--teal); }

/* ---------------------------------------------------------- privacy panel */

/* blueprint: the same graph grid, drawn faint over deep teal */
.mk-privacy {
    background:
        repeating-linear-gradient(to right, rgba(255, 255, 255, .05) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, .05) 0 1px, transparent 1px 26px),
        linear-gradient(170deg, var(--pine-2) 0%, var(--pine) 60%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.mk-privacy-inner { max-width: 820px; text-align: center; }

.mk-kicker-light { color: var(--panel-accent); }

.mk-h2-light {
    color: var(--cream);
    margin-left: auto;
    margin-right: auto;
}

.mk-sub-light {
    color: var(--panel-dim);
    margin-left: auto;
    margin-right: auto;
}

.mk-privacy-ticks {
    margin: 30px auto 0;
    list-style: none;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.mk-privacy-ticks li {
    position: relative;
    padding-left: 32px;
    color: var(--panel-text);
    font-size: .98rem;
}

.mk-privacy-ticks li::before {
    content: "";
    position: absolute;
    left: 7px;
    top: .42em;
    width: 6px;
    height: 11px;
    border: solid var(--panel-accent);
    border-width: 0 2.2px 2.2px 0;
    transform: rotate(42deg);
}

/* ---------------------------------------------------------- pricing */

.mk-plan {
    margin-top: 34px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 32px 24px 28px;
    box-shadow: var(--shadow-md);
    text-align: center;
}

@media (min-width: 560px) { .mk-plan { padding: 40px 44px 34px; } }

.mk-plan-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.mk-plan-amount {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.05;
}

.mk-plan-trial {
    font-size: .95rem;
    font-weight: 600;
    color: var(--coral);
}

/* ---------------------------------------------------------------- early access

   The page ships BOTH the paid wording and the free wording, and one root class picks.
   Doing it in CSS rather than from script keeps the copy in the HTML where it can be
   read and reviewed, and means the page never renders a price we are not charging and
   then corrects itself a frame later.

   Default is PAID: if `js/signup.js` never runs, or the bootstrap fails to inject, the
   visitor sees the ordinary price rather than a free offer we did not mean to make. */

.mk-free-only { display: none; }

html.mk-free .mk-paid-only { display: none; }
html.mk-free .mk-free-only { display: revert; }

/* `display: revert` puts each element back to its own default — inline for a span, list-item
   for an li, block for a p — so one rule serves every element that carries the class. */

html.mk-free .mk-plan-amount {
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    color: var(--ink-3);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--coral);
}

/* Baseline-aligned rather than stacked: "Free" is the number now, and the qualifier
   reads as the unit beside it the way "/mo" did. Written with the same specificity as the
   `display: revert` rule above and placed after it, so this is a choice rather than a
   cascade accident — `revert` would otherwise win and hand a span its inline default. */
html.mk-free .mk-plan-free {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mk-free-word {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--ink);
}

.mk-free-note {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--coral);
}

/* The inline "was $9.99" in the hero note. */
.mk-was {
    color: var(--ink-3);
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--coral);
}

.mk-now { color: var(--ink); font-weight: 700; }

.mk-plan-list {
    list-style: none;
    margin: 22px 0 26px;
    display: inline-flex;
    flex-direction: column;
    gap: 11px;
    text-align: left;
}

.mk-plan-list li {
    position: relative;
    padding-left: 30px;
    font-size: .97rem;
    color: var(--ink-2);
}

.mk-plan-list li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .4em;
    width: 6px;
    height: 11px;
    border: solid var(--teal);
    border-width: 0 2.2px 2.2px 0;
    transform: rotate(42deg);
}

.mk-plan .mk-btn {
    width: auto;
    min-width: min(320px, 100%);
    margin-top: 0;
}

.mk-plan-fine {
    margin-top: 14px;
    font-size: .82rem;
    color: var(--ink-3);
}

/* The add-ons paragraph sits between the list and the button: a little roomier than the
   fine print under the button, and left-aligned like the list it follows. */
.mk-plan-addons {
    margin: 4px 0 22px;
    font-size: .88rem;
    line-height: 1.55;
    text-align: left;
    color: var(--ink-2, var(--ink-3));
}

/* ---------------------------------------------------------- signup section */

.mk-start-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
}

@media (min-width: 960px) {
    .mk-start-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* ---------------------------------------------------------- signup card */

.mk-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 28px 22px 24px;
    box-shadow: var(--shadow-lg);
    scroll-margin-top: 88px;
    max-width: 520px;
    width: 100%;
    justify-self: center;
}

@media (min-width: 560px) { .mk-card { padding: 32px 30px 26px; } }

.mk-card-head { margin-bottom: 20px; }

.mk-card h3 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--ink);
}

.mk-card-sub {
    margin-top: 6px;
    font-size: .92rem;
    color: var(--ink-2);
}

.mk-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mk-field { display: flex; flex-direction: column; gap: 6px; }

.mk-label {
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink);
}

.mk-input {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.mk-input::placeholder { color: #a3adb8; }

.mk-input:hover { border-color: #b6bfc9; }

.mk-input:focus {
    background: var(--surface);
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
    outline: none;
}

/* the slug field: the input and its fixed domain suffix read as one control */
.mk-slug-row {
    display: flex;
    align-items: stretch;
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
    overflow: hidden;
}

.mk-slug-row:focus-within {
    background: var(--surface);
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}

.mk-slug-row .mk-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: right;
    box-shadow: none;
}

.mk-slug-row .mk-input:focus,
.mk-slug-row .mk-input:focus-visible {
    box-shadow: none;
    outline: none;
}

.mk-slug-suffix {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: .9rem;
    color: var(--ink-2);
    background: var(--paper-2);
    border-left: 1px solid var(--line-2);
    overflow-wrap: anywhere;
}

/* On a narrow phone the suffix and the field are fighting over ~270px, and the
   suffix is the long one: BASE_DOMAIN is `famcam.127-0-0-1.nip.io` in development
   and could be anything in a future deployment. Stack them instead of squeezing
   the field the visitor is actually typing into. */
@media (max-width: 460px) {
    .mk-slug-row { flex-direction: column; align-items: stretch; }
    .mk-slug-row .mk-input { text-align: left; }
    .mk-slug-suffix {
        border-left: 0;
        border-top: 1px solid var(--line-2);
        padding: 7px 12px;
        font-size: .84rem;
    }
}

/* js/signup.js rewrites this element's className to `mk-hint`, `mk-hint ok`
   or `mk-hint bad`. Nothing else may be hung on it. */
.mk-hint {
    min-height: 1.25rem;
    font-size: .82rem;
    color: var(--ink-3);
}

.mk-hint.ok  { color: var(--good); font-weight: 600; }
.mk-hint.bad { color: var(--bad);  font-weight: 600; }

/* Address suggestions under the slug field: a one-line label and a row of chips.
   js/signup.js shows it when the typed address is a plain surname or already taken. */
.mk-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.mk-suggest[hidden] { display: none; }

.mk-suggest-label {
    flex: 0 0 100%;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--ink-3);
}

.mk-chip {
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.mk-chip:hover { border-color: var(--coral); color: var(--ink); }

/* ---------------------------------------------------------- apex sign-in page */

.mk-signin {
    max-width: 480px;
    margin: 0 auto;
}

.mk-signin-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 6px 0 10px;
}

.mk-fine a { color: var(--ink-2); }

/* The remembered hub: one tap back in for a browser that has signed in before. */
.mk-remembered {
    margin: 0 0 20px;
    padding: 14px 16px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--paper-2);
}

.mk-remembered[hidden] { display: none; }

.mk-remembered-label {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.mk-remembered .mk-btn { margin-top: 10px; }

.mk-remembered-fine {
    margin: 10px 0 0;
    font-size: .8rem;
    color: var(--ink-3);
}

.mk-link-button {
    font: inherit;
    font-size: inherit;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-2);
    text-decoration: underline;
    cursor: pointer;
}

.mk-link-button:hover { color: var(--ink); }

.mk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 6px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: .005em;
    color: var(--surface);
    background: linear-gradient(180deg, var(--coral-bright) 0%, var(--coral) 100%);
    border-radius: 12px;
    padding: 14px 20px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(var(--accent-rgb), .22), 0 10px 22px rgba(var(--accent-rgb), .18);
    transition: transform .1s ease, box-shadow .18s ease, filter .18s ease;
}

.mk-btn:hover {
    filter: brightness(1.04);
    box-shadow: 0 3px 8px rgba(var(--accent-rgb), .26), 0 14px 30px rgba(var(--accent-rgb), .22);
}

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

.mk-btn[disabled] {
    opacity: .62;
    cursor: progress;
    filter: none;
    box-shadow: none;
}

.mk-error {
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid rgba(var(--bad-rgb), .35);
    background: #fdeceb;
    border-radius: var(--radius-sm);
    color: #8f1c18;
    font-size: .9rem;
    line-height: 1.5;
}

.mk-fine {
    margin-top: 16px;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--ink-3);
}

/* ---------------------------------------------------------- faq */

.mk-faq {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mk-qa {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.mk-qa summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    font-weight: 650;
    font-size: 1rem;
    color: var(--ink);
}

.mk-qa summary::-webkit-details-marker { display: none; }

/* the +/– indicator, drawn with borders */
.mk-qa summary::after {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--coral);
    border-bottom: 2px solid var(--coral);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .16s ease;
}

.mk-qa[open] summary::after { transform: rotate(225deg) translateY(-2px); }

.mk-qa p {
    padding: 0 20px 18px;
    font-size: .95rem;
    color: var(--ink-2);
    max-width: 62ch;
}

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

.mk-foot {
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 34px 0 42px;
}

.mk-foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.mk-foot-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-2);
}

.mk-foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

.mk-foot-links a {
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
}

.mk-foot-links a:hover { color: var(--coral); }

.mk-foot-note {
    font-size: .86rem;
    color: var(--ink-3);
}

.mk-foot-note a { color: var(--ink-2); }

/* the house, in ASCII, because a family hub's footer can smile a little */
.mk-ascii {
    flex-basis: 100%;
    margin-top: 10px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 11px;
    line-height: 1.3;
    color: var(--teal);
    opacity: .75;
    user-select: none;
}

/* faq 2026-09 */
/* The FAQ answers now link out to /terms, /privacy, /security and /acceptable-use.
   Nothing else in this file styles a link inside body copy, so without this they
   render browser-default blue against a palette that has none. */
.mk-qa p a {
    color: var(--coral);
    text-underline-offset: 2px;
}

.mk-qa p a:hover { color: var(--coral-bright); }

/* ============================================================
   LEGAL PAGES  —  /terms  /privacy  /security  /acceptable-use

   Four static pages under web/marketing/, served on the apex by
   server/src/routes/pages.ts. They reuse this file's nav, footer,
   shell, kicker and card components unchanged; everything below is
   the prose layout those four pages add, plus the ONE dark block in
   the public stylesheet.

   WHY DARK HERE AND NOWHERE ELSE. The storefront is fixed light on
   purpose (see the top of this file): it is a shop window, read in
   thirty seconds. A policy page is read end to end, often at night,
   and often on a phone. So `data-legal` on <html> opts these four
   pages — and only these four — into the visitor's system
   preference. Because every colour in this stylesheet became a token
   for the lantern skin, the dark look is one override block and no
   other edit, exactly as that comment promised.

   REVERT: delete `data-legal` from the four <html> tags. The pages
   then render light like the rest of the site and none of the layout
   below is affected (it is all `.mk-legal-*` classes).
   ============================================================ */

/* ---------------------------------------------------------- the title block */

.mk-legal-hero {
    padding: 44px 0 26px;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(1100px 380px at 12% -40%, var(--wash-a), transparent 70%),
        var(--paper);
}

@media (min-width: 960px) { .mk-legal-hero { padding: 64px 0 34px; } }

.mk-legal-title {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--ink);
}

.mk-legal-date {
    margin-top: 10px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.mk-legal-hero .mk-sub { margin-top: 18px; }

.mk-legal-body { padding-bottom: 72px; }

/* ---------------------------------------------------------- the short version */

.mk-legal-short {
    margin: 34px 0 6px;
    padding: 24px 22px 6px;
    background: var(--coral-wash);
    border: 1px solid var(--line-2);
    border-left: 4px solid var(--coral);
    border-radius: var(--radius-sm);
}

@media (min-width: 560px) { .mk-legal-short { padding: 28px 30px 10px; } }

.mk-legal-short h2 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}

.mk-legal-short ul {
    margin: 14px 0 0;
    padding-left: 22px;
    list-style: none;
}

.mk-legal-short li {
    position: relative;
    margin-bottom: 14px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
}

.mk-legal-short li::before {
    content: "";
    position: absolute;
    left: -18px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--coral);
}

.mk-legal-short a { color: var(--coral); text-underline-offset: 2px; }

/* ---------------------------------------------------------- the prose */

.mk-legal-prose { margin-top: 42px; }

.mk-legal-prose h2 {
    margin-top: 46px;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.4vw, 1.75rem);
    line-height: 1.2;
    font-weight: 700;
    color: var(--ink);
    scroll-margin-top: 84px;
}

.mk-legal-prose h2:first-child { margin-top: 0; }

.mk-legal-prose h3 {
    margin-top: 28px;
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--ink);
    scroll-margin-top: 84px;
}

.mk-legal-prose p {
    margin-top: 14px;
    font-size: 1rem;
    line-height: 1.68;
    color: var(--ink-2);
    max-width: 68ch;
}

.mk-legal-prose ul,
.mk-legal-prose ol {
    margin: 14px 0 0;
    padding-left: 24px;
    max-width: 68ch;
}

.mk-legal-prose li {
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.66;
    color: var(--ink-2);
}

.mk-legal-prose li::marker { color: var(--coral); }

.mk-legal-prose strong { color: var(--ink); font-weight: 650; }

.mk-legal-prose a {
    color: var(--coral);
    text-underline-offset: 2px;
}

.mk-legal-prose a:hover { color: var(--coral-bright); }

.mk-legal-prose code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .88em;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--ink);
    word-break: break-word;
}

/* The six embed hosts, and any other short list of literals. */
.mk-legal-hosts {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mk-legal-hosts li { margin-bottom: 0; }

/* The "what we do not have" list — the honest half, marked as such. */
.mk-legal-dont {
    list-style: none;
    padding-left: 20px;
}

.mk-legal-dont li { position: relative; }

.mk-legal-dont li::before {
    content: "";
    position: absolute;
    left: -18px;
    top: .78em;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: var(--bad);
}

/* ---------------------------------------------------------- the subprocessor table */

.mk-legal-table-wrap {
    margin-top: 18px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.mk-legal-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .93rem;
}

.mk-legal-table th,
.mk-legal-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
    line-height: 1.55;
    color: var(--ink-2);
}

.mk-legal-table thead th {
    background: var(--paper-2);
    color: var(--ink);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mk-legal-table tbody tr:last-child th,
.mk-legal-table tbody tr:last-child td { border-bottom: 0; }

.mk-legal-table strong { color: var(--ink); }

/* ---------------------------------------------------------- notes + placeholders */

.mk-legal-note {
    margin-top: 40px;
    padding: 18px 20px;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--paper-2);
    font-size: .95rem;
    color: var(--ink-3);
}

.mk-legal-prose p.mk-legal-note { max-width: none; }

/* Marks the entity name, postal address and contact email that are still
   placeholders. Deliberately conspicuous: it should be hard to ship one of
   these to production without noticing it on the page. */
.mk-legal-fill {
    background: var(--marigold-wash);
    border-bottom: 1px dashed var(--marigold);
    padding: 0 3px;
    border-radius: 3px 3px 0 0;
    white-space: nowrap;
}

/* ---------------------------------------------------------- the four-page nav */

.mk-legal-index {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.mk-legal-index ul {
    margin-top: 16px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

@media (min-width: 720px) {
    .mk-legal-index ul { grid-template-columns: 1fr 1fr; gap: 16px 22px; }
}

.mk-legal-index li {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.mk-legal-index a {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    text-decoration: none;
}

.mk-legal-index a:hover { color: var(--coral); }

.mk-legal-index a[aria-current="page"] { color: var(--coral); }

.mk-legal-index a[aria-current="page"]::after {
    content: " \2014 you are here";
    font-weight: 500;
    font-size: .82rem;
    color: var(--ink-3);
}

.mk-legal-index span {
    display: block;
    margin-top: 5px;
    font-size: .89rem;
    line-height: 1.5;
    color: var(--ink-3);
}

/* ============================================================
   DARK  —  legal pages only, and only when the visitor's system asks

   Nothing but tokens. Every component above and everywhere else in
   this file already reads them, so the nav, the footer, the cards,
   the table and the prose all relight together. The one non-token
   line is `color-scheme`, which the top of this file pins to `light`
   for the storefront.

   Contrast, checked against --paper (#14120f), all >= 4.5:1:
     --ink 15.6   --ink-2 9.2   --ink-3 6.6   --coral 9.3
     --teal 9.6   --rose 8.0    --sky 8.1     --bad 8.2
   ============================================================ */

@media (prefers-color-scheme: dark) {
    html[data-legal],
    html[data-legal][data-skin="lantern"] {
        color-scheme: dark;

        --paper: #14120f;
        --paper-2: #1c1914;
        --surface: #1e1a15;
        --ink: #f1eade;
        --ink-2: #c6bcaa;
        --ink-3: #a3988a;
        --line: #332d25;
        --line-2: #473e33;

        /* the lantern's own light, which is decorative on cream and
           legible on this ground */
        --coral: #dda953;
        --coral-bright: #eebd6d;
        --coral-deep: #b8862f;
        --coral-wash: #241d14;
        --flame: #d99133;

        --teal: #62cdb7;
        --teal-wash: #14241f;
        --marigold: #ddab57;
        --marigold-wash: #241d13;
        --rose: #e990b3;
        --rose-wash: #261a20;
        --sky: #95b7d7;
        --sky-wash: #19212a;
        --plum: #b295cf;
        --good: #6fd29c;
        --bad: #ef9083;

        --accent-rgb: 221, 169, 83;
        --shadow-rgb: 0, 0, 0;
        --hairline-rgb: 241, 234, 222;
        --good-rgb: 111, 210, 156;
        --bad-rgb: 239, 144, 131;

        --glass: rgba(20, 18, 15, .90);
        --grid: rgba(221, 169, 83, .06);
        --grid-soft: rgba(221, 169, 83, .04);
        --wash-a: rgba(217, 145, 51, .10);
        --wash-b: rgba(221, 169, 83, .05);
        --wash-c: rgba(233, 144, 179, .04);

        --pine: #0f0d0a;
        --pine-2: #191510;
        --cream: #f2e9d8;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 4px 12px rgba(0, 0, 0, .34);
        --shadow-md: 0 2px 4px rgba(0, 0, 0, .42), 0 12px 32px rgba(0, 0, 0, .40);
        --shadow-lg: 0 4px 8px rgba(0, 0, 0, .46), 0 28px 70px rgba(0, 0, 0, .50);

        --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C 40 2 80 13 116 7 S 180 3 196 8' fill='none' stroke='%23dda953' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    /* The CTA pill is white-on-brass in light; on this ground the brass is the
       light source, so the ink goes dark rather than the fill going pale. */
    html[data-legal] .mk-nav-cta,
    html[data-legal] .mk-nav-links a.mk-nav-cta,
    html[data-legal] .mk-nav-links a.mk-nav-cta:hover { color: #14120f; }
}