/* ============================================================
   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;
    --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;
    --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) {
    .mk-nav-links a:not(.mk-nav-cta) { display: none; }
}

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

.mk-hero {
    position: relative;
    padding: 64px 0 0;
    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 display */

/* The product, drawn in CSS. One big rounded "display" with the Harper
   family's Saturday on it, and two little cards floating off its corners.
   It is aria-hidden: decoration with lorem-family data, not content. */

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

.mk-display {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--shadow-lg);
    padding: 22px 22px 18px;
    max-width: 880px;
    margin: 0 auto;
}

.mk-display-top {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.mk-display-family {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mk-display-date { font-size: .88rem; color: var(--ink-3); }

.mk-display-weather {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--marigold);
}

.mk-display-weather svg { width: 17px; height: 17px; }

.mk-display-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 0;
}

@media (min-width: 720px) {
    .mk-display-body { grid-template-columns: 1.15fr .85fr; gap: 20px; }
}

.mk-day-title,
.mk-w-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}

/* colour-coded schedule blocks: the signature move of the genre, and ours
   maps to member theme colours honestly */
.mk-event {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-left: 4px solid var(--ev);
    background: var(--ev-wash);
    border-radius: 10px;
    padding: 9px 12px;
    margin-top: 8px;
    font-size: .92rem;
}

.mk-ev-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ev); flex: 0 0 auto; }
.mk-ev-what { font-weight: 600; color: var(--ink); min-width: 0; }
.mk-ev-who  { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--ev); flex: 0 0 auto; }

.mk-ev-coral    { --ev: var(--coral);    --ev-wash: var(--coral-wash); }
.mk-ev-teal     { --ev: var(--teal);     --ev-wash: var(--teal-wash); }
.mk-ev-marigold { --ev: var(--marigold); --ev-wash: var(--marigold-wash); }
.mk-ev-rose     { --ev: var(--rose);     --ev-wash: var(--rose-wash); }
.mk-ev-sky      { --ev: var(--sky);      --ev-wash: var(--sky-wash); }

.mk-widgets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-content: start;
}

.mk-widget {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 13px;
}

.mk-w-photos { grid-column: 1 / -1; }
@media (min-width: 460px) and (max-width: 719px) {
    .mk-w-photos { grid-column: auto; }
}

.mk-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

@media (max-width: 459px) { .mk-photo-grid { grid-template-columns: repeat(4, 1fr); } }

/* "photos" as warm gradients — no photography survives this CSP, and the
   soft-focus squares read as photos at this size anyway */
.mk-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 9px;
    font-style: normal;
}

.mk-ph-1 { background: linear-gradient(135deg, #e8b98a 0%, #c97f4f 60%, #9c5a33 100%); }
.mk-ph-2 { background: linear-gradient(160deg, #a8c2b0 0%, #6f9683 55%, #43635a 100%); }
.mk-ph-3 { background: linear-gradient(145deg, #dfc2d4 0%, #b083a4 60%, #7d5878 100%); }
.mk-ph-4 { background: linear-gradient(150deg, #bcd0e2 0%, #7fa0bd 55%, #4f6f8d 100%); }

.mk-ph-more {
    background: var(--paper-2);
    border: 1px dashed var(--line-2);
    color: var(--ink-2);
    font-size: .78rem;
    font-weight: 700;
}

.mk-msg-bubble {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    padding: 8px 11px;
    font-size: .88rem;
    color: var(--ink-2);
    box-shadow: var(--shadow-sm);
    line-height: 1.45;
}

.mk-msg-from {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: var(--teal);
}

.mk-msg-heart {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    margin-left: 2px;
    color: var(--rose);
}

.mk-radio-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mk-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 16px;
    flex: 0 0 auto;
}

.mk-eq i {
    width: 3.5px;
    border-radius: 2px;
    background: var(--coral);
    animation: mk-eq 1.1s ease-in-out infinite;
}

.mk-eq i:nth-child(1) { height: 60%; animation-delay: 0s; }
.mk-eq i:nth-child(2) { height: 100%; animation-delay: .18s; }
.mk-eq i:nth-child(3) { height: 45%; animation-delay: .34s; }
.mk-eq i:nth-child(4) { height: 80%; animation-delay: .1s; }

@keyframes mk-eq {
    0%, 100% { transform: scaleY(.55); }
    50%      { transform: scaleY(1); }
}

.mk-radio-song { font-size: .85rem; font-weight: 600; color: var(--ink-2); }

.mk-display-crew {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.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-crew-note {
    margin-left: auto;
    font-size: .8rem;
    font-style: italic;
    color: var(--ink-3);
}

/* 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); }

.mk-float-recipe { left: max(8px, calc(50% - 580px)); bottom: -16px; transform: rotate(-2deg); }
.mk-float-theme  { right: max(8px, calc(50% - 560px)); top: -14px; transform: rotate(2deg); }

.mk-float-swatches {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mk-sw {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid rgba(var(--hairline-rgb), .18);
}

.mk-float-swatches .mk-float-sub { margin-left: 4px; }

/* 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; }
}

/* ---------------------------------------------------------- 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 story vignettes: small, cheap, one idea each */
.mk-vig {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow-md);
}

/* 1: a week with colour-coded blocks */
.mk-week-head {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.mk-week-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: row dense;
    gap: 8px;
    padding-top: 12px;
    min-height: 150px;
    align-items: start;
}

.mk-blk {
    display: flex;
    align-items: flex-start;
    border-left: 3px solid var(--ev);
    background: var(--ev-wash);
    border-radius: 8px;
    padding: 6px 8px;
    font-style: normal;
    font-size: .72rem;
    font-weight: 650;
    color: var(--ink-2);
    overflow: hidden;
    line-height: 1.25;
}

/* 2: photos + two bubbles */
.mk-vig-mem { position: relative; padding-bottom: 26px; }

.mk-mem-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mk-mem-photos .mk-ph { border-radius: 12px; }

.mk-msg-a,
.mk-msg-b { max-width: 78%; }

.mk-msg-a { margin: 14px 0 0 0; }
.mk-msg-b { margin: 10px 0 0 auto; border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; }
.mk-msg-b .mk-msg-from { color: var(--coral); }

/* 3: two member dashboards, two skins */
.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 twelve 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; }

/* ---------------------------------------------------------- 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);
}

.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);
}

/* ---------------------------------------------------------- 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; }

.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);
}

/* 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;
}