.app-footer {
    position: relative;
    z-index: 0;
    overflow-wrap: anywhere;
    /* Small grey text (eyebrow, tagline, the meta lines): 4.5:1 or more on the footer. */
    --app-footer-muted: #5f5f69;
    /* V15 filled pills (theme switch, language, version): grey by day, a raised grey at night. */
    --app-footer-fill: #eef0f3;
    --app-footer-fill-hover: #e3e6ea;
}

html.dark .app-footer {
    --app-footer-muted: #a1a1aa;
    --app-footer-fill: #262a31;
    --app-footer-fill-hover: #343944;
}

/* The signed-out pages (.shm-open: /, /login, /how-matching-works, /promise, /why, /safety) stay light in
   dark mode, so their footer does too: the light theme's values, set here because the footer sits outside
   the page's .shm-open box. */
html.dark body:has(.shm-open) .app-footer {
    color-scheme: light;
    color: #18181b;
    --app-footer-muted: #5f5f69;
    --app-footer-version-bg: rgba(255, 255, 255, 0.68) !important;
    --app-footer-version-bg-hover: rgba(255, 255, 255, 0.9) !important;
    --app-footer-fill: #eef0f3;
    --app-footer-fill-hover: #e3e6ea;
    --ui-page-background-solid: #f6f6f6;
    --background: #fafafa;
    --foreground: #18181b;
    --text-emphasis: #111827;
    --text: #414552;
    --text-subtle: #5f5f69;
    --border: rgba(17, 17, 17, 0.1);
    --input: #86868f;
    --ring: #2b44ff;
    --muted: #eeeeee;
    --muted-foreground: #5f5f69;
    --secondary-hover: #e6e6e6;
}

.app-footer__row > * {
    min-width: 0;
    max-width: 100%;
}

.app-footer--landing {
    --app-footer-shell-gutter: 112px;
}

.app-footer--landing .app-footer__container {
    width: min(1240px, calc(100% - var(--app-footer-shell-gutter))) !important;
    max-width: none !important;
    margin-inline: auto;
    padding-inline: 0 !important;
}

.app-footer__section {
    animation: none;
}

.app-footer__brandColumn {
    padding-right: 0.25rem;
}

.app-footer__eyebrow {
    color: var(--app-footer-eyebrow-color, #5e5e5e);
    font-size: 0.8125rem;
    font-weight: 600;
}

.app-footer__brand {
    color: var(--app-footer-brand-color, #1a1a1a);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    font-family: var(--font-sans, "Inter", "Avenir Next", "Helvetica Neue", sans-serif);
}

.app-footer__brandLink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
}

.app-footer__mark,
.app-footer__mark svg {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
}

.app-footer__brandLink:hover .app-footer__brand,
.app-footer__brandLink:focus .app-footer__brand {
    color: var(--app-footer-link-hover-color, #111111);
}

.app-footer__sectionTitle {
    color: var(--app-footer-title-color, #2a2a2a);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-sans, "Inter", "Avenir Next", "Helvetica Neue", sans-serif);
}

.app-footer__link {
    /* A 44px tap target around the words; the text itself looks as before. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--app-footer-link-color, var(--text)) !important;
    font-size: 0.94rem;
    line-height: 1.45;
    text-decoration: none !important;
    transition: color 150ms ease, transform 150ms ease;
}

.app-footer__linkButton {
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
}

.app-footer__link:hover,
.app-footer__link:focus {
    color: var(--app-footer-link-hover-color, #111111) !important;
    transform: translateX(2px);
}

.app-footer__meta {
    line-height: 1.5;
}

.app-footer__versionButton {
    color: var(--app-footer-version-color, #5a5a5a) !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--app-footer-fill) !important;
    min-height: 1.7rem !important;
    padding: 0 0.6rem !important;
    transition: all 150ms ease;
}

.app-footer__versionButton:hover,
.app-footer__versionButton:focus {
    color: var(--app-footer-link-hover-color, #111111) !important;
    background: var(--app-footer-fill-hover) !important;
}

.app-footer__localeSelect {
    width: auto !important;
    min-width: 5.75rem !important;
    max-width: 7rem !important;
    height: 1.75rem !important;
    border-radius: 999px !important;
    border: 0 !important;
    color: var(--app-footer-link-color, var(--text)) !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    background: var(--app-footer-fill) !important;
    padding-right: 1.55rem !important;
}

.app-footer__localeSelect:hover,
.app-footer__localeSelect:focus {
    background: var(--app-footer-fill-hover) !important;
}

/* Light / dark / system: a small pill, each button a 44px tap target that reaches past it. */
.app-footer__theme {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    margin-block: 0.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--app-footer-fill);
}

.app-footer__themeButton {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-block: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-foreground);
    cursor: pointer;
}

.app-footer__themeButton > span {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    transition: background-color 150ms ease;
}

.app-footer__themeButton:hover > span {
    background: var(--secondary-hover);
}

.app-footer__themeButton[aria-pressed="true"] {
    color: var(--foreground);
}

.app-footer__themeButton[aria-pressed="true"] > span {
    background: var(--muted);
}

@media screen and (max-width: 1100px) {
    .app-footer--landing {
        --app-footer-shell-gutter: 72px;
    }
}

@media screen and (max-width: 800px) {
    .app-footer--landing {
        --app-footer-shell-gutter: 48px;
    }
}

@media screen and (max-width: 600px) {
    .app-footer--landing {
        --app-footer-shell-gutter: 40px;
    }
}

@media screen and (max-width: 30em) {
    .app-footer__brand {
        font-size: 1.15rem;
    }

    .app-footer__link {
        font-size: 0.9rem;
    }

    .app-footer__meta {
        font-size: 0.73rem;
    }
}

/* The language picker is a 44px target like the footer's other controls (ux, 2026-10-24); the pill keeps its look. */
.app-footer .app-footer__localeSelect,
.app-footer select.app-footer__localeSelect {
    min-height: 44px;
    height: 44px;
}

/* Activity icons (docs/design/profile-phase3.md, B; more-to-share.md §2B): a round badge. Used in the dash
   and in onboarding, so it isn't scoped to the dash shell. */
.shm-av-badge {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--app-surface-2);
    color: var(--app-ink);
}

.shm-av-badge[data-size="sm"] {
    width: 28px;
    height: 28px;
}

.shm-av-badge[data-size="lg"] {
    width: 44px;
    height: 44px;
}

/* V15: colour comes from what you do. The circle is the activity's own colour (data-scene from
   activity_visuals.mjs activityScene, the --app-act-* tokens), the same in both themes, with ink on it (white
   on the violet). Outside the signed-in app's tokens it stays neutral. Picked (solid) is ink; data-tone
   "shared" is one you both have (yellow, a crossing), "proof" one shown by an app. */
.shm-av-badge[data-scene] {
    background: var(--shm-av-scene, var(--app-surface-2));
    color: #14161c;
}

.shm-av-badge[data-scene="land"] { --shm-av-scene: var(--app-act-land); }
.shm-av-badge[data-scene="sea"] { --shm-av-scene: var(--app-act-sea); }
.shm-av-badge[data-scene="court"] { --shm-av-scene: var(--app-act-court); }
.shm-av-badge[data-scene="mountain"] { --shm-av-scene: var(--app-act-mountain); }
.shm-av-badge[data-scene="snow"] { --shm-av-scene: var(--app-act-snow); }
.shm-av-badge[data-scene="city"] { --shm-av-scene: var(--app-act-city); }
.shm-av-badge[data-scene="plain"] { --shm-av-scene: var(--app-act-plain); }

.shm-av-badge[data-scene="hall"] {
    --shm-av-scene: var(--app-act-hall);
    color: #ffffff;
}

.shm-av-badge[data-solid="true"] {
    background: var(--app-you);
    color: var(--app-on-you);
}

.shm-av-badge[data-tone="you"] {
    background: var(--app-you-soft);
    color: var(--app-you);
}

.shm-av-badge[data-tone="shared"] {
    background: var(--app-overlap);
    color: var(--app-on-overlap);
}

.shm-av-badge[data-tone="proof"] {
    background: var(--app-mint);
    color: var(--app-mint-ink);
}


/* One quiet line under the landing page's closing text. */
.shm-open-start > p.shm-open-start-area { margin-top: 12px !important; font-size: .9375rem; font-weight: 700; letter-spacing: .01em; }

/* The one number under the hero's button. */
.shm-open-hero-card > p.shm-open-hero-area { margin-top: 14px !important; color: var(--shm-ink); font-size: .9375rem; font-weight: 700; letter-spacing: .01em; }

/* QR codes people show (ClientQrCode) and scan (BarcodeScannerDialog). Colours come from the app
   tokens (app-tokens.css) inside the signed-in app; on the public pages (landing, /j/{code}), which are
   light only, the fallbacks are the light values. The QR code itself is always dark on white: scanners
   need that contrast, in dark mode too. */

/* ── Showing a code: a white tile with a quiet border ── */
.shm-qr {
    display: inline-grid;
    place-items: center;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm, 14px);
    background: #ffffff;
    line-height: 0;
}

.shm-qr-code {
    display: block;
    max-width: 100%;
    height: auto;
}

.shm-qr-error {
    margin: 0;
    color: var(--app-danger, #c4183c);
    font-size: 14px;
    font-weight: 600;
}

/* ── Scanning: the dialog follows the dash sheets (styles/chats.css .shm-chats-sheet) ── */
.shm-scan-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(10, 11, 14, 0.45);
}

.shm-scan {
    display: grid;
    gap: 14px;
    width: min(100%, 440px);
    max-height: min(92dvh, 720px);
    overflow: auto;
    padding: 22px;
    border-radius: var(--app-radius);
    background: var(--app-surface, #ffffff);
    box-shadow: var(--app-shadow-lift);
    color: var(--app-ink, #14161c);
    font-family: var(--app-text, 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    text-align: left;
}

.shm-scan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.shm-scan h2 {
    margin: 0;
    padding-top: 8px;
    font-family: var(--app-display, 'Bricolage Grotesque', 'Inter', 'Helvetica Neue', sans-serif);
    font-size: 23px;
    font-weight: 800;
    font-stretch: 85%;
    line-height: 1.1;
}

.shm-scan-close {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -4px -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--app-muted, #3d424d);
    cursor: pointer;
}

.shm-scan-close:hover {
    background: var(--app-surface-2, #eef0f3);
    color: var(--app-ink, #14161c);
}

.shm-scan-lede {
    margin: 0;
    color: var(--app-muted, #3d424d);
    font-size: 15px;
    line-height: 1.5;
}

/* The camera picture: dark behind the video in both themes, so the frame reads on it. */
.shm-scan-view {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--app-radius-sm, 14px);
    background: #14161c;
}

.shm-scan-view video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shm-scan-frame {
    position: absolute;
    inset: 14%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 0 0 0 999px rgba(10, 11, 14, 0.28);
    pointer-events: none;
}

.shm-scan-status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--app-muted, #3d424d);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.shm-scan-status svg {
    flex: none;
    margin-top: 2px;
}

.shm-scan-status.is-alert {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--app-danger-soft, #fff1f3);
    color: var(--app-danger, #c4183c);
}

.shm-scan-status .is-starting {
    animation: shm-scan-pulse 1.2s ease-in-out infinite;
}

@keyframes shm-scan-pulse {
    50% { opacity: 0.35; }
}

.shm-scan-actions {
    display: flex;
    justify-content: flex-end;
}

.shm-scan-button {
    min-height: 44px;
    padding: 10px 20px;
    border: 1.5px solid transparent;
    border-radius: var(--app-radius-pill, 999px);
    background: var(--app-surface-2);
    color: var(--app-ink, #14161c);
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
}

.shm-scan-button:hover {
    background: var(--app-surface-2, #eef0f3);
}

.shm-scan-close:focus-visible,
.shm-scan-button:focus-visible {
    outline: 2px solid var(--app-you, #14161c);
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .shm-scan-backdrop {
        align-items: end;
        padding: 0;
    }

    .shm-scan {
        width: 100%;
        border-radius: 24px 24px 0 0;
        padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    }

    .shm-scan-button {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shm-scan-status .is-starting {
        animation: none;
    }
}

/* "Got a code from a sticker or a friend?" under the landing page's closing call to action. */
.shm-open-code { margin: 28px auto 0 !important; }
.shm-open-code-toggle { padding: 4px 0; border: 0; background: none; color: var(--shm-ink, #17153b); cursor: pointer; font-size: .9375rem; }
.shm-open-code-form { display: grid; gap: 12px; max-width: 30rem; text-align: left; }
.shm-open-code-form label { display: grid; gap: 4px; }
.shm-open-code-form label strong { font-size: 1rem; }
.shm-open-code-form label span { font-size: .9375rem; line-height: 1.5; }
.shm-open-code-row { display: flex; flex-wrap: wrap; gap: 10px; }
.shm-open-code-row input { flex: 1 1 14rem; min-width: 0; min-height: 50px; padding: 0 18px; border: 2px solid var(--shm-ink, #17153b); border-radius: 999px; background: #fff; color: var(--shm-ink, #17153b); font-size: 1rem; letter-spacing: .04em; }
.shm-open-code-row input:focus-visible { outline: 3px solid var(--shm-you, #2b44ff); outline-offset: 2px; }
.shm-open-code-row input[aria-invalid="true"] { border-color: #b3124f; }
.shm-open .shm-open-start .shm-open-code-row .shm-open-button { padding: 12px 24px; }
.shm-open-code-error { margin: 0 !important; color: #8f0e3f; font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.shm-open-code-cancel { justify-self: start; padding: 2px 0; border: 0; background: none; color: var(--shm-ink, #17153b); cursor: pointer; font-size: .875rem; }
.shm-open-code-scan { display: inline-flex; align-items: center; justify-self: start; gap: 8px; min-height: 44px; padding: 10px 18px; border: 2px solid var(--shm-ink, #17153b); border-radius: 999px; background: #fff; color: var(--shm-ink, #17153b); cursor: pointer; font-size: .9375rem; font-weight: 600; }
.shm-open-code-scan:hover { background: var(--shm-mist, #f6f5ff); }
.shm-open-code-scan:focus-visible { outline: 3px solid var(--shm-you, #2b44ff); outline-offset: 2px; }
.shm-open-code-scan[disabled] { opacity: .6; cursor: progress; }

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url(/77e681773bd82819d8e8.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url(/f45a85f45f1d846b6823.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The near-miss city: blue is you, pink is them, yellow is the overlap where you should have met. */
.shm-open {
    --shm-ink: #17153b;
    --shm-muted: #57557a;
    --shm-you: #2b44ff;
    --shm-you-deep: #1d33d9;
    --shm-other: #ff4f9a;
    --shm-other-line: #ea3384; /* the same pink, deep enough for 3:1 on the map */
    --shm-overlap: #ffc21a;
    --shm-overlap-soft: #ffd35c;
    --shm-land: #efeef8;
    --shm-block: #e3e1f2;
    --shm-park: #a6e7b4;
    --shm-tree: #7fd394;
    --shm-water: #8ed2ff;
    --shm-lilac: #eeedff;
    --shm-mist: #f6f5ff;
    --shm-line: #dcdaf5;
    --shm-field-line: #8784ad; /* the edge of a text field: 3:1 on white and on mist (WCAG 1.4.11) */
    /* Names the walkthrough and plan box already use. */
    --shm-cobalt: var(--shm-you);
    --shm-cobalt-deep: var(--shm-you-deep);
    --shm-sun: var(--shm-overlap);
    --shm-sun-soft: var(--shm-overlap-soft);
    --shm-gum: var(--shm-other);
    --shm-mint: #b6f0d2;
    --shm-display: 'Bricolage Grotesque', 'Inter', 'Helvetica Neue', sans-serif;
    --open-gutter: 112px;
    --ring: var(--shm-you);
    color: var(--shm-ink);
    background: #fff;
    font-family: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: anywhere;
}
.shm-open *, .shm-open *::before, .shm-open *::after { box-sizing: border-box; }
.shm-open :is(h1,h2,h3,p,figure,ol,ul) { margin: 0; color: inherit; }
.shm-open :is(ol,ul) { padding: 0; list-style: none; }
.shm-open a { color: inherit; text-decoration: none; }
.shm-open :is(button,textarea) { font: inherit; }
.shm-open button { cursor: pointer; }
.shm-open img { display: block; width: 100%; height: auto; object-fit: cover; }
.shm-open svg { flex-shrink: 0; }
.shm-open :is(a,button,textarea,[tabindex]):focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.shm-open ::selection { color: var(--shm-ink); background: var(--shm-overlap); }
.shm-open :is(section[id],main) { scroll-margin-top: 24px; }
.shm-open :is(h1,h2,h3) { text-wrap: balance; }
.shm-open-shell { width: min(1240px, calc(100% - var(--open-gutter))); margin-inline: auto; }
.shm-open-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shm-open-skip { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 12px 18px; border-radius: 999px; background: var(--shm-overlap); color: var(--shm-ink) !important; font-weight: 600; clip-path: inset(50%); transform: translateY(-200%); }
.shm-open-skip:focus { clip-path: none; transform: translateY(0); }

/* Shared pieces */
.shm-open .shm-open-button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; color: #fff; background: var(--shm-you); border: 0; border-radius: 999px; font-size: .9375rem; font-weight: 600; line-height: 1.4; transition: background .15s; }
.shm-open .shm-open-button:hover { background: var(--shm-you-deep); }
.shm-open-text-link { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 600; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 5px; }
.shm-open :where(h2) { font-family: var(--shm-display); font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 800; font-stretch: 80%; line-height: .95; letter-spacing: -.005em; }
.shm-open-heading, .shm-open-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.shm-open-heading > h2, .shm-open-section-heading > h2 { max-width: 760px; }
.shm-open-heading > p, .shm-open-section-heading > p { max-width: 360px; padding-bottom: 6px; color: var(--shm-muted); font-size: 1rem; line-height: 1.65; }

/* Navigation */
.shm-open-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; padding: 16px 0; }
.shm-open-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; white-space: nowrap; font-family: var(--shm-display); font-size: 1.3rem; font-weight: 800; font-stretch: 85%; }
.shm-open-brand > span:first-child { display: flex; width: 30px; height: 30px; color: var(--shm-you); }
.shm-open-brand svg { width: 100%; height: 100%; }
.shm-open-nav-links { display: flex; align-items: center; gap: 28px; }
.shm-open-nav-links a, .shm-open-login { padding-block: 8px; font-size: .875rem; font-weight: 500; }
.shm-open-nav-links a:hover, .shm-open-login:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.shm-open-nav-actions { display: flex; align-items: center; gap: 22px; }
/* Header links and buttons keep their words on one line; on very narrow screens the header wraps instead. */
.shm-open-nav-actions > * { white-space: nowrap; }
.shm-open .shm-open-nav-actions .shm-open-button { min-height: 44px; padding: 11px 20px; font-size: .875rem; }
/* "Log in" and the header text links: a 44px tap target around the words. */
.shm-open-login { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* Hero: the example week fills the block, the pitch sits on top of it. */
.shm-open-hero { --ring: var(--shm-you); position: relative; isolation: isolate; height: clamp(660px, calc(100vh - 100px), 860px); margin-inline: 16px; border-radius: 32px; background: var(--shm-land); }
.shm-open-hero-card { position: absolute; z-index: 2; left: 36px; top: 36px; width: min(560px, 41%); padding: 36px 36px 30px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px -36px #17153b80; }
.shm-open h1 { font-family: var(--shm-display); font-size: clamp(2.8rem, 4.4vw, 4.3rem); font-weight: 800; font-stretch: 78%; line-height: .92; letter-spacing: -.004em; }
.shm-open-hero-card > p:first-of-type { margin-top: 20px; font-size: 1.0625rem; line-height: 1.6; }
.shm-open-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.shm-open .shm-open-hero-actions .shm-open-button { padding: 16px 30px; font-size: 1rem; }
.shm-open-hero-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 22px !important; padding-top: 16px; border-top: 1.5px solid var(--shm-line); color: var(--shm-muted); font-size: .8125rem; line-height: 1.5; }
.shm-open-hero-note svg { margin-top: 1px; }

/* How it works */
.shm-open-how { padding-block: 120px 40px; }
.shm-open-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; counter-reset: shm-step; }
.shm-open-steps > li { counter-increment: shm-step; }
.shm-open-step-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 24px; border-radius: 26px; background: var(--shm-mist); }
.shm-open-step-visual::before { content: counter(shm-step); position: absolute; left: 18px; top: 14px; font-family: var(--shm-display); font-size: 2rem; font-weight: 800; font-stretch: 80%; line-height: 1; }
.shm-open-steps h3 { margin-top: 22px; font-family: var(--shm-display); font-size: 1.75rem; font-weight: 800; font-stretch: 82%; line-height: 1.05; }
.shm-open-steps li > p { max-width: 360px; margin-top: 10px; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-open-step-tell { flex-wrap: wrap; align-content: center; gap: 8px; padding-top: 48px; }
.shm-open-step-tell > span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--shm-line); }
.shm-open-step-tell > span.is-intent { background: var(--shm-you); color: #fff; box-shadow: none; }
.shm-open-step-tell > span.is-private { background: var(--shm-ink); color: #fff; box-shadow: none; }
.shm-open-step-tell > span.is-time { background: var(--shm-lilac); box-shadow: none; }
.shm-open-step-overlap { flex-direction: column; padding-bottom: 14px; }
.shm-open-venn { width: min(220px, 100%); height: auto; overflow: visible; }
.shm-open-venn-you { fill: var(--shm-you); }
.shm-open-venn-them { fill: var(--shm-other); }
.shm-open-venn-overlap { fill: var(--shm-overlap); }
.shm-open-venn-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 14px; font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.shm-open-venn-key > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.shm-open-venn-key i { flex: none; width: 11px; height: 11px; border-radius: 50%; }
.shm-open-venn-key .is-you { background: var(--shm-you); }
.shm-open-venn-key .is-them { background: var(--shm-other); }
.shm-open-venn-key .is-both { background: var(--shm-overlap); }
.shm-open-step-meet { flex-direction: column; gap: 12px; }
.shm-open-mutual { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--shm-other); font-size: .875rem; font-weight: 700; }
.shm-open-plan-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; width: min(250px, 100%); padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 16px 30px -22px #17153b99; }
.shm-open-plan-card svg { grid-row: span 2; margin-top: 2px; color: var(--shm-you); }
.shm-open-plan-card b { font-family: var(--shm-display); font-size: 1.15rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-open-plan-card small { color: var(--shm-muted); font-size: .8125rem; }
.shm-open-plan-card i { grid-column: 1 / -1; margin-top: 10px; padding: 9px; border-radius: 999px; background: var(--shm-overlap); font-style: normal; font-size: .8125rem; font-weight: 700; text-align: center; }

/* Try step one (IntentPrompt) */
.shm-open-try { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 48px; margin-top: 28px; padding: 40px; border-radius: 30px; background: var(--shm-you); color: #fff; scroll-margin-top: 120px; --ring: var(--shm-overlap); }
.shm-open-try-copy h3 { font-family: var(--shm-display); font-size: clamp(2.2rem, 3.6vw, 3.25rem); font-weight: 800; font-stretch: 80%; line-height: .95; }
.shm-open-try-copy p { max-width: 380px; margin-top: 16px; font-size: 1.0625rem; line-height: 1.6; color: #fffffff0; }
.shm-open .shm-intent-console { min-width: 0; padding: 22px; border-radius: 24px; background: #fff; color: var(--shm-ink); box-shadow: 0 30px 60px -30px #0a0a5a; --ring: var(--shm-you); }
.shm-open .shm-intent-console-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.shm-open .shm-intent-console-top > span:first-child { font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-open .shm-intent-console-top > span:last-child { color: var(--shm-muted); font-size: .75rem; }
.shm-open .shm-intent-seeds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.shm-open .shm-intent-seeds button { min-height: 44px; padding: 8px 13px; border: 0; border-radius: 999px; background: var(--shm-lilac); color: var(--shm-ink); font-size: .8125rem; font-weight: 600; line-height: 1.4; text-align: left; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s; }
.shm-open .shm-intent-seeds button:hover { box-shadow: inset 0 0 0 1.5px var(--shm-ink); }
.shm-open textarea.shm-intent-input { display: block; width: 100%; height: 96px; min-height: 64px; padding: 14px 16px; border: 1.5px solid var(--shm-field-line); border-radius: 16px; box-shadow: none; background: var(--shm-mist); color: var(--shm-ink); font-size: 1rem; line-height: 1.6; resize: vertical; }
.shm-open textarea.shm-intent-input:focus { border-color: var(--shm-you); outline: none; box-shadow: 0 0 0 3px rgba(43, 68, 255, .22); }
.shm-open textarea.shm-intent-input:-ms-input-placeholder { color: var(--shm-muted); opacity: 1; }
.shm-open textarea.shm-intent-input::placeholder { color: var(--shm-muted); opacity: 1; }
.shm-open .shm-intent-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.shm-open .shm-intent-actions button, .shm-open .shm-intent-commit { height: auto; min-height: 46px; padding: 11px 20px; border-radius: 999px; font-size: .875rem; font-weight: 600; line-height: 1.4; white-space: normal; }
.shm-open .shm-intent-photo { border: 1.5px solid var(--shm-line); color: var(--shm-ink); background: #fff; }
.shm-open .shm-intent-photo:hover { border-color: var(--shm-ink); background: #fff; }
.shm-open .shm-hero-button, .shm-open .shm-intent-commit { border: 0; color: #fff; background: var(--shm-you); }
.shm-open .shm-hero-button:hover, .shm-open .shm-intent-commit:hover { background: var(--shm-you-deep); }
.shm-open .shm-hero-button:disabled { opacity: .45; cursor: not-allowed; }
.shm-open .shm-intent-images { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.shm-open .shm-intent-image { display: block; position: relative; }
.shm-open .shm-intent-image img { width: 64px; height: 64px; border-radius: 12px; }
.shm-open .shm-intent-image button { display: grid; place-items: center; position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; padding: 0; border: 1.5px solid var(--shm-line); border-radius: 50%; color: var(--shm-ink); background: #fff; }
.shm-open .shm-intent-error { padding: 12px 14px; margin-top: 14px; border-radius: 14px; color: var(--shm-ink); background: #ffe1ee; font-size: .8125rem; line-height: 1.6; }
.shm-open .shm-intent-continue { display: block; width: fit-content; margin-top: 6px; color: var(--shm-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.shm-open .shm-intent-preview, .shm-open .shm-intent-progress { padding-top: 16px; margin-top: 16px; border-top: 1.5px dashed var(--shm-line); font-size: .9375rem; line-height: 1.6; }
.shm-open .shm-intent-preview strong { font-weight: 600; overflow-wrap: anywhere; }
.shm-open .shm-intent-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.shm-open .shm-intent-pills > span { padding: 5px 11px; border-radius: 999px; background: var(--shm-overlap); font-size: .75rem; font-weight: 600; }
.shm-open .shm-intent-commit { display: flex; align-items: center; width: fit-content; margin-top: 14px; }
.shm-open .shm-intent-saved, .shm-open .shm-intent-progress > span { display: block; margin-top: 6px; color: var(--shm-muted); font-size: .8125rem; }
.shm-open .shm-intent-progress-track { height: 4px; overflow: hidden; border-radius: 4px; background: var(--shm-lilac); margin-bottom: 12px; }
.shm-open .shm-intent-progress-track > span { display: block; width: 40%; height: 100%; border-radius: 4px; background: var(--shm-you); animation: shm-open-progress 1.2s ease-in-out infinite alternate; }

/* What it's for */
.shm-open-uses { margin-top: 80px; padding-block: 100px; background: var(--shm-lilac); }
.shm-open-uses-layout { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: 24px; margin-top: 44px; }
.shm-open-uses-tabs { display: flex; flex-direction: column; gap: 8px; }
.shm-open-uses-tabs button { padding: 18px 22px; border: 0; border-radius: 20px; background: #ffffffa6; color: var(--shm-ink); font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; text-align: left; transition: background .15s; }
.shm-open-uses-tabs button:hover { background: #fff; }
.shm-open-uses-tabs button[aria-selected='true'] { background: var(--shm-ink); color: #fff; }
.shm-open-use { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 420px; overflow: hidden; border-radius: 28px; background: #fff; }
.shm-open-use > img { height: 100% !important; min-height: 280px; }
.shm-open-use-flow { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.shm-open-use-flow > div > span { display: block; color: var(--shm-muted); font-size: .8125rem; font-weight: 600; }
.shm-open-use-wrote p { margin-top: 6px; padding: 12px 16px; border-radius: 18px 18px 18px 5px; background: var(--shm-you); color: #fff; font-size: 1rem; line-height: 1.5; }
.shm-open-use-intro { padding-top: 14px; border-top: 1.5px dashed var(--shm-line); }
.shm-open-use-intro strong { display: block; margin-top: 4px; font-family: var(--shm-display); font-size: 1.75rem; font-weight: 800; font-stretch: 82%; line-height: 1.05; }
.shm-open-use-intro p { margin-top: 8px; font-size: .9375rem; line-height: 1.55; }
.shm-open-use-plan { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 10px 16px; border-radius: 999px; background: var(--shm-overlap); font-size: .9375rem; font-weight: 700; }
/* The small label on the yellow: a shade darker than --shm-muted for 4.5:1. */
.shm-open-use-flow > .shm-open-use-plan > span { color: #4a4870; }
.shm-open-uses-note { margin-top: 16px !important; color: var(--shm-muted); font-size: .8125rem; text-align: right; }

/* Promises */
.shm-open-promises { padding-block: 120px 40px; }
.shm-open-promise-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px !important; }
.shm-open-promise-list li { display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 26px; background: var(--shm-mist); }
.shm-open-promise-list li:first-child { background: var(--shm-overlap); }
.shm-open-promise-list strong { font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.08; }
.shm-open-promise-list p { flex: 1; margin-top: 12px; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-open-promise-list li:first-child p { color: var(--shm-ink); }
.shm-open-promise-list .shm-open-text-link { align-self: flex-start; margin-top: 18px; font-size: .875rem; }

/* Privacy */
.shm-open-privacy { margin-top: 80px; padding-block: 100px; background: var(--shm-ink); color: #fff; --ring: var(--shm-overlap); }
.shm-open-privacy .shm-open-heading { align-items: center; }
.shm-open-privacy-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px !important; }
.shm-open-privacy-points li { padding-top: 20px; border-top: 2px solid #ffffff2e; }
.shm-open-privacy-points svg { color: var(--shm-overlap); }
.shm-open-privacy-points strong { display: block; margin-top: 16px; font-family: var(--shm-display); font-size: 1.4rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-open-privacy-points p { margin-top: 10px; color: #ffffffc7; font-size: .9375rem; line-height: 1.6; }

/* Closing invitation */
.shm-open-start { margin-block: 24px; padding: 96px 64px; border-radius: 32px; background: var(--shm-overlap); text-align: center; --ring: var(--shm-ink); }
.shm-open-start h2 { max-width: 900px; margin-inline: auto; font-size: clamp(2.8rem, 6.5vw, 5.75rem); font-stretch: 76%; line-height: .9; }
.shm-open-start > p { max-width: 30rem; margin: 20px auto 0 !important; font-size: 1.125rem; line-height: 1.6; }
.shm-open-start-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: 32px; }
.shm-open .shm-open-start .shm-open-button { padding: 16px 32px; background: var(--shm-ink); font-size: 1rem; }
.shm-open .shm-open-start .shm-open-button:hover { background: #2b2860; }

@keyframes shm-open-progress { from { transform: translateX(-20%); } to { transform: translateX(180%); } }
@media (prefers-reduced-motion: no-preference) {
    .shm-open-use { animation: shm-open-swap .3s ease both; }
    @keyframes shm-open-swap { from { opacity: 0; } to { opacity: 1; } }
}

/* Until the landing nav has room for everything, it keeps its page links and drops the jumps to sections lower down. */
@media (max-width: 1280px) {
    .shm-open-nav-links a:is([href="#uses"], [href="#promises"], [href="#privacy"]) { display: none; }
}
@media (max-width: 1180px) {
    .shm-open { --open-gutter: 64px; }
    .shm-open-nav-links { gap: 20px; }
    .shm-open-hero-card { width: min(470px, 44%); padding: 30px; }
    .shm-open-privacy-points, .shm-open-promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .shm-open-nav-links { display: none; }
    .shm-open-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .shm-open-steps > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0 28px; }
    .shm-open-step-visual { grid-row: span 2; }
    .shm-open-steps h3 { margin-top: 0; align-self: end; }
    .shm-open-steps li > p { align-self: start; }
    .shm-open-try { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px; }
    .shm-open-uses-layout { grid-template-columns: minmax(0, 1fr); }
    .shm-open-uses-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--open-gutter) / -2); padding-inline: calc(var(--open-gutter) / 2); }
    .shm-open-uses-tabs button { flex: none; padding: 12px 18px; border-radius: 999px; font-size: 1.125rem; }
}
@media (max-width: 860px) {
    .shm-open { --open-gutter: 40px; }
    .shm-open-hero { height: auto; margin-inline: 0; padding: 0 20px 8px; border-radius: 0; background: none; }
    .shm-open-hero-card { position: relative; left: auto; top: auto; width: auto; padding: 8px 0 28px; box-shadow: none; background: none; }
    .shm-open-heading, .shm-open-section-heading { display: block; }
    .shm-open-heading > p, .shm-open-section-heading > p { margin-top: 18px; padding: 0; }
    .shm-open-privacy .shm-open-heading > a { margin-top: 18px; }
    .shm-open-use { grid-template-columns: minmax(0, 1fr); }
    .shm-open-use > img { height: 220px !important; min-height: 0; }
    .shm-open-uses-note { text-align: left; }
    .shm-open-start { padding: 72px 28px; }
}
@media (max-width: 600px) {
    .shm-open { --open-gutter: 32px; }
    .shm-open-nav { min-height: 68px; gap: 8px 12px; padding-block: 12px; }
    .shm-open-brand { font-size: 1.125rem; gap: 7px; }
    .shm-open-brand > span:first-child { width: 26px; height: 26px; }
    .shm-open-nav-actions { gap: 14px; }
    .shm-open-login { font-size: .8125rem; }
    .shm-open .shm-open-nav-actions .shm-open-button { padding: 9px 14px; font-size: .8125rem; }
    .shm-open-hero { padding-inline: 16px; }
    .shm-open h1 { font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
    .shm-open-hero-card > p:first-of-type { font-size: 1rem; }
    .shm-open :where(h2) { font-size: 2.6rem; }
    .shm-open-how, .shm-open-different { padding-block: 72px 24px; }
    .shm-open-steps > li { display: block; }
    .shm-open-step-visual { min-height: 190px; }
    .shm-open-steps h3 { margin-top: 18px; font-size: 1.5rem; }
    .shm-open-try { margin-inline: -8px; padding: 24px 16px 16px; border-radius: 24px; }
    .shm-open .shm-intent-console { padding: 16px; border-radius: 20px; }
    .shm-open .shm-intent-seeds { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
    .shm-open .shm-intent-seeds button { flex: none; white-space: nowrap; }
    .shm-open .shm-intent-actions .shm-hero-button { flex: 1 1 auto; }
    .shm-open-uses, .shm-open-privacy { margin-top: 56px; padding-block: 64px; }
    .shm-open-use-flow { padding: 20px; }
    .shm-open-privacy-points, .shm-open-promise-list { grid-template-columns: minmax(0, 1fr); }
    .shm-open-promises { padding-top: 72px; }
    .shm-open-start { padding: 56px 20px; border-radius: 24px; }
    .shm-open-start h2 { font-size: 2.9rem; }
}
/* Below 360px the wordmark gives way to the mark (screen readers still hear the name), so
   "Log in" and "Get started" fit beside it. */
@media (max-width: 359px) {
    .shm-open-brand > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .shm-open-nav-actions { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .shm-open *, .shm-open *::before, .shm-open *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .shm-open .shm-intent-progress-track > span { width: 100%; }
}

/* The landing page (canvas V16 "first screen", V15 system): the ground, white cards on it by colour, ink pills,
   colour only where an activity is. No outlines, no all-caps, no slabs behind text; yellow is kept for a crossing.
   The values are V15's own until the shared tokens (app-tokens.css) move to it; sizes are on the type scale,
   except the desktop headline, which grows with the window like the other public pages' heroes. */
body:has(.shm-land) { background: #f6f7f9; }
html.dark body:has(.shm-land) { background: #0f1115; }
body:has(.shm-land) .FrontEnd,
body:has(.shm-land) .app-footer--landing { background: #f6f7f9 !important; }
html.dark body:has(.shm-land) .FrontEnd,
html.dark body:has(.shm-land) .app-footer--landing { background: #0f1115 !important; }
/* The shared footer lines up with the landing's narrower column. */
body:has(.shm-land) .app-footer--landing .app-footer__container { width: min(1120px, calc(100% - 32px)) !important; }

.shm-land {
    --land-ground: #f6f7f9;
    --land-card: #ffffff;
    --land-ink: #14161c;
    --land-quiet: #5b6170;
    --land-hair: #e5e7ec;
    --land-grey: #eef0f3;
    --land-grey-hover: #e2e5ea;
    --land-ink-hover: #2a2d36;
    --land-on-ink: #ffffff;
    --land-field: #8a8f99;
    --land-other: #8a8f99;
    --land-danger: #b3124f;
    --land-display: 'Bricolage Grotesque', 'Inter', 'Helvetica Neue', sans-serif;
    --land-width: min(1120px, calc(100% - 32px));
    background: var(--land-ground);
    color: var(--land-ink);
    font-family: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: anywhere;
}

html.dark .shm-land {
    --land-ground: #0f1115;
    --land-card: #181b21;
    --land-ink: #f2f3f5;
    --land-quiet: #a4a9b4;
    --land-hair: #2a2e36;
    --land-grey: #252932;
    --land-grey-hover: #2f343e;
    --land-ink-hover: #ffffff;
    --land-on-ink: #0f1115;
    --land-field: #6b7180;
    --land-danger: #ff8a98;
}

.shm-land *, .shm-land *::before, .shm-land *::after { box-sizing: border-box; }
/* Resets at one class's weight, so each piece's own class (later in the file) sets its colour. */
.shm-land :where(h1, h2, h3, p, ul) { margin: 0; color: inherit; }
.shm-land :where(ul) { padding: 0; list-style: none; }
.shm-land :where(a) { color: inherit; text-decoration: none; }
.shm-land :is(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--land-ink); outline-offset: 3px; }
.shm-land ::selection { background: #ffc21a; color: #14161c; }

.shm-land-skip {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    padding: 12px 18px;
    border-radius: 22px;
    background: var(--land-ink);
    color: var(--land-on-ink) !important;
    font-size: 15px;
    font-weight: 600;
    clip-path: inset(50%);
    transform: translateY(-200%);
}

.shm-land-skip:focus { clip-path: none; transform: none; }

/* The top: the mark, the way to the long explanations, and "Log in". */
.shm-land-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: var(--land-width);
    min-height: 68px;
    margin-inline: auto;
}

.shm-land-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: var(--land-display); font-stretch: 85%;
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}

.shm-land-brand > span:first-child { display: flex; width: 30px; height: 30px; }
.shm-land-brand svg { width: 100%; height: 100%; }

.shm-land-nav-links { display: flex; align-items: center; gap: 8px; }

.shm-land-nav-quiet {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 10px;
    color: var(--land-quiet);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.shm-land-nav-quiet:hover { color: var(--land-ink); }

.shm-land-login {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 22px;
    background: var(--land-grey);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s;
}

.shm-land-login:hover { background: var(--land-grey-hover); }

.shm-land-main { width: var(--land-width); margin-inline: auto; padding-bottom: 56px; }

/* The first screen: one column on a phone, in the board's order; on a wide window the headline and the way in
   on the left, the city's week on the right. */
.shm-land-first {
    display: grid;
    gap: 22px;
    max-width: 600px;
    margin-inline: auto;
    padding-top: 12px;
}

.shm-land-head { display: grid; gap: 14px; }

.shm-land-title {
    font-family: var(--land-display); font-stretch: 85%;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.shm-land-lead { max-width: 30em; color: var(--land-quiet); font-size: 18px; line-height: 26px; }

/* The city's week as lines */
.shm-land-week {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 28px;
    background: var(--land-card);
}

.shm-land-week-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shm-land-week-city { min-width: 0; font-size: 15px; font-weight: 800; line-height: 20px; }
.shm-land-week-number { flex: none; color: var(--land-quiet); font-size: 14px; font-weight: 600; line-height: 20px; }

.shm-land-week-headline {
    margin-top: -6px !important;
    font-family: var(--land-display); font-stretch: 85%;
    font-size: 23px;
    font-weight: 800;
    line-height: 26px;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.shm-land-lines { display: grid; gap: 18px; }
.shm-land-line { display: flex; align-items: center; gap: 12px; }

.shm-land-badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--land-other);
    color: #14161c;
}

.shm-land-badge[data-size='small'] { width: 28px; height: 28px; }

.shm-land-line-body { display: grid; flex: 1; gap: 8px; min-width: 0; }
.shm-land-line-text { font-size: 16px; font-weight: 600; line-height: 21px; }
.shm-land-track { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--land-grey); }

.shm-land-bar {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--land-other);
    transform-origin: left center;
    animation: shm-land-grow 1.2s cubic-bezier(0.22, 0.8, 0.24, 1) both;
}

@keyframes shm-land-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.shm-land-starters { display: grid; gap: 12px; }
.shm-land-starters-label { color: var(--land-quiet); font-size: 15px; line-height: 20px; }
.shm-land-starters ul { display: flex; flex-wrap: wrap; gap: 8px; }

.shm-land-starters li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    border-radius: 20px;
    background: var(--land-ground);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
}

.shm-land-skeleton { display: grid; gap: 18px; }

.shm-land-skeleton span {
    display: block;
    height: 36px;
    border-radius: 18px;
    background: var(--land-grey);
    animation: shm-land-pulse 1.4s ease-in-out infinite;
}

.shm-land-skeleton span:nth-child(2) { width: 82%; }
.shm-land-skeleton span:nth-child(3) { width: 64%; }

@keyframes shm-land-pulse {
    50% { opacity: 0.55; }
}

.shm-land-week-more {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 44px;
    margin-block: -8px -10px;
    color: var(--land-quiet);
    font-size: 15px;
    font-weight: 600;
}

.shm-land-week-more:hover { color: var(--land-ink); text-decoration: underline; text-underline-offset: 4px; }

/* The way in */
.shm-land-join { display: grid; gap: 14px; }
.shm-land-actions { display: grid; gap: 10px; }
.shm-land-one-tap { display: grid; gap: 10px; }

.shm-land .shm-land-primary,
.shm-land .shm-land-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 32px;
    border-radius: 28px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.15s;
}

.shm-land .shm-land-primary { background: var(--land-ink); color: var(--land-on-ink); }
.shm-land .shm-land-primary:hover { background: var(--land-ink-hover); }
.shm-land .shm-land-secondary { min-height: 52px; background: var(--land-grey); color: var(--land-ink); font-size: 15px; font-weight: 600; }
.shm-land .shm-land-secondary:hover { background: var(--land-grey-hover); }

.shm-land-promise { color: var(--land-quiet); font-size: 14px; line-height: 20px; }
.shm-land-count { color: var(--land-quiet); font-size: 14px; font-weight: 600; line-height: 20px; }

/* "Got a code from a sticker or a friend?": small, and the same pills when it opens. */
.shm-land .shm-land-code { margin: -4px 0 0 !important; }

.shm-land .shm-open-code-toggle,
.shm-land .shm-open-code-cancel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--land-quiet);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}

.shm-land .shm-open-code-toggle:hover,
.shm-land .shm-open-code-cancel:hover { color: var(--land-ink); text-decoration: underline !important; text-decoration-thickness: 1.5px !important; text-underline-offset: 4px; }

.shm-land .shm-open-code-form {
    max-width: none;
    margin-top: 0 !important;
    padding: 18px;
    border-radius: 24px;
    background: var(--land-card);
}

.shm-land .shm-open-code-form label strong { font-size: 16px; }
.shm-land .shm-open-code-form label span { color: var(--land-quiet); font-size: 14px; line-height: 20px; }

.shm-land .shm-open-code-row input {
    min-height: 52px;
    border: 0;
    border-radius: 26px;
    background: var(--land-card);
    box-shadow: inset 0 0 0 1.5px var(--land-field);
    color: var(--land-ink);
    font: inherit;
    font-size: 16px;
}

.shm-land .shm-open-code-row input:focus-visible { outline: 3px solid var(--land-ink); outline-offset: 2px; }
.shm-land .shm-open-code-row input[aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--land-danger); }

.shm-land .shm-open-code-row .shm-open-button,
.shm-land .shm-open-code-scan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 26px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.shm-land .shm-open-code-row .shm-open-button { background: var(--land-ink); color: var(--land-on-ink); }
.shm-land .shm-open-code-scan { justify-self: start; min-height: 44px; background: var(--land-grey); color: var(--land-ink); font-weight: 600; }
.shm-land .shm-open-code-scan:hover { background: var(--land-grey-hover); }
.shm-land .shm-open-code-error { color: var(--land-danger); font-size: 14px; }

/* Why it's different, and the way to the long explanations */
.shm-land-why { display: grid; gap: 20px; max-width: 600px; margin: 64px auto 0; }

.shm-land-h2 {
    font-family: var(--land-display); font-stretch: 85%;
    font-size: 30px;
    font-weight: 800;
    line-height: 34px;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.shm-land-points { display: grid; gap: 12px; }
.shm-land-point { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 24px; background: var(--land-card); }
.shm-land-point h3 { font-family: var(--land-display); font-stretch: 85%; font-size: 20px; font-weight: 800; line-height: 24px; letter-spacing: -0.01em; }
.shm-land-point p { color: var(--land-quiet); font-size: 15px; line-height: 22px; }

.shm-land-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }

.shm-land-more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
}

.shm-land-more a + a::before { content: '·'; margin-right: 8px; color: var(--land-quiet); font-weight: 400; }
.shm-land-more a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

@media (max-width: 480px) {
    .shm-land-nav-quiet { display: none; }
    .shm-land-week { padding: 18px 16px; border-radius: 24px; }
}

@media (max-width: 359px) {
    .shm-land-title { font-size: 38px; }
    .shm-land .shm-land-primary, .shm-land .shm-land-secondary { padding: 0 20px; white-space: normal; }
}

@media (min-width: 900px) {
    .shm-land-nav { min-height: 84px; }

    .shm-land-first {
        grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
        grid-template-areas: 'head week' 'join week';
        column-gap: 72px;
        row-gap: 32px;
        max-width: none;
        padding-top: 48px;
    }

    .shm-land-head { grid-area: head; align-self: end; gap: 20px; }
    .shm-land-week { grid-area: week; align-self: center; padding: 28px; border-radius: 32px; }
    .shm-land-join { grid-area: join; align-self: start; }

    .shm-land-title { font-size: clamp(44px, 5.6vw, 76px); line-height: 0.98; }
    .shm-land-lead { font-size: 20px; line-height: 28px; }

    .shm-land-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .shm-land-one-tap { display: flex; flex-wrap: wrap; gap: 10px; }
    .shm-land-promise { max-width: 30em; }
    .shm-land .shm-open-code-form { max-width: 480px; }

    .shm-land-why { max-width: none; margin-top: 112px; gap: 24px; }
    .shm-land-h2 { font-size: 34px; line-height: 38px; }
    .shm-land-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .shm-land-point { padding: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .shm-land-bar, .shm-land-skeleton span { animation: none; }
    .shm-land-login, .shm-land .shm-land-primary, .shm-land .shm-land-secondary { transition: none; }
}

/* The example week on /how-it-works (V15): a calm grey town, your line in ink, theirs in the colour of what they
   were doing there, and yellow where your weeks touch. Uses the page's --how-* values (HowItWorksPage.css). */
.shm-nm {
    --nm-land: #eef0f3;
    --nm-block: #e3e6eb;
    --nm-street: #ffffff;
    --nm-water: #cfe5ff;
    --nm-park: #d5efe3;
    --nm-tree: #b3e0cb;
    --nm-panel: var(--how-card, #ffffff);
    --nm-them: var(--how-run, #f25c1f);
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

html.dark .shm-nm {
    --nm-land: #181b21;
    --nm-block: #1e2228;
    --nm-street: #0f1115;
    --nm-water: #15304f;
    --nm-park: #15332a;
    --nm-tree: #1d4637;
    --nm-panel: var(--how-grey, #262a31);
}

/* Their line and their face take the colour of what they were doing. */
.shm-nm[data-moment='cafe'], .shm-nm-route[data-moment='cafe'] { --nm-them: var(--how-food, #e8457a); }
.shm-nm[data-moment='climb'], .shm-nm-route[data-moment='climb'] { --nm-them: var(--how-mountains, #12a877); }
.shm-nm[data-moment='gallery'], .shm-nm-route[data-moment='gallery'] { --nm-them: var(--how-culture, #7a5cf5); }
.shm-nm[data-moment='canal'], .shm-nm-route[data-moment='canal'] { --nm-them: var(--how-run, #f25c1f); }

.shm-nm-stage { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.shm-nm-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.shm-nm-land { fill: var(--nm-land); }
.shm-nm-blocks rect { fill: var(--nm-block); }
.shm-nm-water { fill: none; stroke: var(--nm-water); stroke-width: 74; stroke-linecap: round; }
.shm-nm-towpath { fill: none; stroke: var(--nm-street); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; opacity: 0.7; }
.shm-nm-park { fill: var(--nm-park); }
.shm-nm-trees circle { fill: var(--nm-tree); }
.shm-nm-streets path { fill: none; stroke: var(--nm-street); stroke-width: 18; stroke-linecap: round; }
.shm-nm-streets.is-compact path { stroke-width: 24; }
.shm-nm-trail { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.4s; }
.shm-nm-route.is-compact .shm-nm-trail { stroke-width: 14; }
.shm-nm-trail-you { stroke: var(--how-ink, #14161c); }
.shm-nm-trail-other { stroke: var(--nm-them); }
.shm-nm-route.is-future .shm-nm-trail { opacity: 0; }
.shm-nm-route.is-past .shm-nm-trail { opacity: 0.25; }
.shm-nm-pin { fill: var(--how-ink, #14161c); }
.shm-nm-place svg { color: var(--how-on-ink, #ffffff); }
.shm-nm-spark { fill: var(--how-yellow, #ffc21a); opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center; transition: opacity 0.35s, transform 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.shm-nm-place.is-sparked .shm-nm-spark { opacity: 1; transform: scale(1); }
.shm-nm-dot { transition: opacity 0.3s; }
.shm-nm-dot-you circle { fill: var(--how-ink, #14161c); stroke: var(--nm-street); stroke-width: 5; }
.shm-nm-dot-ring { fill: var(--nm-them); stroke: var(--nm-street); stroke-width: 4; }

.shm-nm-labels { position: absolute; inset: 0; pointer-events: none; }
.shm-nm-label.is-above { translate: -50% calc(-100% - 30px); }
.shm-nm-label.is-below { translate: -50% 30px; }

.shm-nm-label {
    position: absolute;
    padding: 4px 10px;
    border-radius: 14px;
    background: var(--nm-panel);
    color: var(--how-ink, #14161c);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
}

/* What happened, on a card over the map. */
.shm-nm-panel { position: absolute; right: 32px; top: 32px; width: min(340px, calc(100% - 64px)); }
.shm-nm-moment, .shm-nm-intro { padding: 18px 20px; border-radius: 24px; background: var(--nm-panel); color: var(--how-ink, #14161c); }
.shm-nm-moment { display: grid; gap: 6px; font-size: 15px; line-height: 20px; }
.shm-nm-moment strong { font-family: var(--how-display); font-size: 23px; font-weight: 800; line-height: 26px; }
.shm-nm-moment-place { margin-bottom: 6px; color: var(--how-quiet, #5b6170); font-weight: 600; }
.shm-nm-moment span { display: flex; align-items: baseline; gap: 8px; }
.shm-nm-moment span b { font-weight: 700; }
.shm-nm-moment span.is-waiting { color: var(--how-quiet, #5b6170); }
.shm-nm-moment i { flex: none; width: 10px; height: 10px; border-radius: 50%; translate: 0 -1px; }
.shm-nm-key-you { background: var(--how-ink, #14161c); }
.shm-nm-key-other { background: var(--nm-them); }

/* "Missed each other. Again.": the one place both weeks touch, so it's yellow. */
.shm-nm-moment em {
    justify-self: start;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 14px;
    background: var(--how-yellow, #ffc21a);
    color: var(--how-on-yellow, #14161c);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}

.shm-nm-intro-head { display: flex; align-items: center; gap: 12px; }
.shm-nm .shm-nm-intro-head img { flex: none; width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: center 22%; }
.shm-nm-intro-head span { display: flex; align-items: center; gap: 6px; color: var(--how-quiet, #5b6170); font-size: 13px; font-weight: 600; }
.shm-nm-intro-head strong { display: block; font-family: var(--how-display); font-size: 26px; font-weight: 800; line-height: 30px; }
.shm-nm-intro > p { margin-top: 14px !important; font-size: 15px; line-height: 22px; }
.shm-nm-intro-plan { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--how-hair, #e5e7ec); font-weight: 700; }
.shm-nm-intro-plan b { color: var(--how-quiet, #5b6170); font-size: 13px; font-weight: 600; }

/* The days, Replay and the count, along the bottom. */
.shm-nm-controls { position: absolute; left: 32px; right: 32px; bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; pointer-events: none; }
.shm-nm-controls > * { pointer-events: auto; }
.shm-nm-steps { display: flex; padding: 2px; border-radius: 24px; background: var(--nm-panel); }

/* Each day is a 44px tap target. */
.shm-nm-steps button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 22px;
    background: none;
    color: var(--how-ink, #14161c);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.shm-nm-steps button.is-past { color: var(--how-quiet, #5b6170); }
.shm-nm-steps button[aria-pressed='true'] { background-color: var(--how-ink, #14161c); color: var(--how-on-ink, #ffffff); }
.shm-nm-replay { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--nm-panel); color: var(--how-ink, #14161c); }
.shm-nm-replay:disabled { opacity: 0.5; cursor: default; }
.shm-nm-count { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; padding: 10px 18px; border-radius: 24px; background: var(--nm-panel); color: var(--how-ink, #14161c); font-size: 15px; font-weight: 700; }
.shm-nm-count b { font-family: var(--how-display); font-size: 26px; font-weight: 800; line-height: 26px; }

@media (prefers-reduced-motion: no-preference) {
    .shm-nm-moment, .shm-nm-intro { animation: shm-nm-pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
}

@keyframes shm-nm-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

/* A phone: the town as a square card, the story under it. */
@media (max-width: 860px) {
    .shm-nm { position: relative; inset: auto; }
    .shm-nm-stage { position: relative; inset: auto; aspect-ratio: 1 / 1; border-radius: 28px; }
    .shm-nm-label { padding: 2px 8px; font-size: 13px; line-height: 18px; }
    .shm-nm-label.is-above { translate: -50% calc(-100% - 20px); }
    .shm-nm-label.is-below { translate: -50% 20px; }
    .shm-nm-panel { position: relative; right: auto; top: auto; width: auto; margin-top: -40px; padding-inline: 12px; }
    .shm-nm-controls { position: relative; left: auto; right: auto; bottom: auto; margin-top: 12px; }
    .shm-nm-steps, .shm-nm-replay, .shm-nm-count { background: var(--how-card, #ffffff); }
    .shm-nm-count { margin-left: 0; }
}

@media (max-width: 420px) {
    .shm-nm-steps button { padding: 0 9px; font-size: 13px; }
    .shm-nm-step-intro svg { display: none; }
}

/*
 * The week ribbon (components/shared/WeekRibbon.js, docs/design/look-v2.md B). Cell colours are the
 * --app-* tokens; the fallbacks are the same tokens (design/tokens.json) for the route loader, which can
 * show before the signed-in shell has set them. The old "cobalt" tone (for the cobalt Week hero) is
 * retired with V15 and draws like the surface tone: grey empties, ink for yours, yellow where you both are.
 */
.shm-ribbon {
    --shm-ribbon-empty: var(--app-surface-2, #eef0f3);
    --shm-ribbon-you: var(--app-you, #14161c);
    --shm-ribbon-them: var(--app-them, #d61f6c);
    --shm-ribbon-both: var(--app-overlap, #ffc21a);
    --shm-ribbon-wait: var(--app-you, #14161c);
    display: block;
    flex: none;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

html.dark .shm-ribbon {
    --shm-ribbon-empty: var(--app-surface-2, #262a31);
    --shm-ribbon-you: var(--app-you, #f2f3f5);
    --shm-ribbon-them: var(--app-them, #ff5fa2);
    --shm-ribbon-wait: var(--app-you, #f2f3f5);
}

.shm-ribbon rect[data-state="empty"] { fill: var(--shm-ribbon-empty); }
.shm-ribbon rect[data-state="you"] { fill: var(--shm-ribbon-you); }
.shm-ribbon rect[data-state="them"] { fill: var(--shm-ribbon-them); }
.shm-ribbon rect[data-state="both"] { fill: var(--shm-ribbon-both); }

/* "Any day" (no-fixed-time.md A): moments with no fixed time, one soft band under the seven days. */
.shm-ribbon rect[data-state="band"] { fill: var(--shm-ribbon-empty); }
.shm-ribbon .shm-ribbon-band text {
    fill: var(--shm-ribbon-you);
    font-family: inherit;
    font-weight: 700;
}


.shm-ribbon rect[data-state="waiting"] {
    fill: none;
    stroke: var(--shm-ribbon-wait);
    stroke-width: 2;
    stroke-dasharray: 3 3;
}

/* Loading: each cell takes its turn (animation-delay from loadingRibbon), then fades back. */
.shm-ribbon .shm-ribbon-turn {
    opacity: 0;
    animation-name: shm-ribbon-turn;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes shm-ribbon-turn {
    0% { opacity: 1; }
    5% { opacity: 1; }
    10% { opacity: 0; }
    100% { opacity: 0; }
}

.shm-ribbon-loading {
    display: grid;
    place-items: center;
    padding: 12px 0;
}

.shm-ribbon-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.shm-ribbon-empty {
    margin: 0 auto 12px;
}

/* Reduce motion: the component already draws a still ribbon; this keeps any moving one still too. */
@media (prefers-reduced-motion: reduce) {
    .shm-ribbon .shm-ribbon-turn {
        animation: none;
    }
}

/* The dash's empty card is left-aligned; its ribbon sits where the icon square was. */
.shm-ribbon-empty.shm-flow-empty-ribbon {
    margin: 0 0 14px;
}

/* The app walkthrough on /how-it-works, in the V15 look: the app on a white card, an introduction as the app shows
   it (the person, one reason, "You both" on yellow, never a score), grey pills to choose, ink pills to go on.
   Uses the page's --how-* values (HowItWorksPage.css). */

.shm-tour-layout { display: grid; gap: 16px; align-items: start; }

/* The three steps: a row of numbered tabs on a phone, a list on the left on a wide window. */
.shm-tour-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.shm-tour-tabs > button {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    padding: 12px;
    border: 0;
    border-radius: 20px;
    background: var(--how-grey, #eef0f3);
    color: var(--how-ink, #14161c);
    text-align: left;
    transition: background 0.15s;
}

.shm-tour-tabs > button:hover { background: var(--how-grey-hover, #e2e5ea); }
.shm-tour-tabs > button[aria-selected='true'] { background: var(--how-card, #ffffff); }

.shm-tour-step-number {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--how-card, #ffffff);
    color: var(--how-ink, #14161c);
    font-size: 13px;
    font-weight: 700;
}

.shm-tour-tabs > button[aria-selected='true'] .shm-tour-step-number { background: var(--how-ink, #14161c); color: var(--how-on-ink, #ffffff); }
.shm-tour-step-copy > strong { display: block; font-size: 14px; font-weight: 700; line-height: 18px; }
.shm-tour-step-copy > span { display: none; margin-top: 6px; color: var(--how-quiet, #5b6170); font-size: 14px; line-height: 20px; }
.shm-tour-step-icon { display: none; }

.shm-tour-mobile-description { margin-top: 10px !important; color: var(--how-quiet, #5b6170); font-size: 15px; line-height: 22px; }
.shm-tour-guide-note { display: none; }

/* The app, on a card */
.shm-tour-preview {
    /* What the app's own pieces (the chat) read. */
    --ui-text-primary: var(--how-ink, #14161c);
    --ui-text-secondary: var(--how-quiet, #5b6170);
    --ui-text-tertiary: var(--how-quiet, #5b6170);
    --ui-surface-inverse: var(--how-ink, #14161c);
    --ui-text-inverse: var(--how-on-ink, #ffffff);
    --shm-match-card-bg: var(--how-grey, #eef0f3);
    --shm-match-card-bg-soft: var(--how-grey, #eef0f3);
    --shm-match-border: transparent;
    --shm-match-accent: var(--how-quiet, #5b6170);
    --shm-match-shadow: none;
    min-width: 0;
    overflow: hidden;
    border-radius: 28px;
    background: var(--how-card, #ffffff);
}

.shm-tour-window-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--how-hair, #e5e7ec); }
.shm-tour-window-bar > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-family: var(--how-display); font-size: 15px; font-weight: 800; }
.shm-tour-window-bar > span:first-child > span { display: flex; width: 24px; height: 24px; }
.shm-tour-window-bar svg { width: 100%; height: 100%; }
.shm-tour-sample-badge { padding: 4px 10px; border-radius: 14px; background: var(--how-grey, #eef0f3); color: var(--how-quiet, #5b6170); font-size: 13px; font-weight: 600; line-height: 18px; }

.shm-tour-panel { padding: 16px; }
.shm-tour-panel:focus-visible { outline-offset: -3px; }

.shm-tour-app-heading { display: grid; gap: 4px; margin-bottom: 16px; }
.shm-tour-app-heading > span, .shm-tour-small-label { display: block; color: var(--how-quiet, #5b6170); font-size: 13px; font-weight: 600; line-height: 18px; }
.shm-tour-app-heading h3 { font-family: var(--how-display); font-size: 23px; font-weight: 800; line-height: 26px; letter-spacing: -0.01em; }

.shm-tour-intro-layout { display: grid; gap: 18px; }

/* The introduction. The activity of the chosen plan colours its pill. */
.shm-tour-intro, .shm-tour-plan-options button { --tour-activity: var(--how-food, #e8457a); }
.shm-tour-intro[data-activity='culture'], .shm-tour-plan-options button[data-activity='culture'] { --tour-activity: var(--how-culture, #7a5cf5); }
.shm-tour-intro[data-activity='run'], .shm-tour-plan-options button[data-activity='run'] { --tour-activity: var(--how-run, #f25c1f); }

.shm-tour-intro { display: grid; overflow: hidden; border-radius: 24px; background: var(--how-ground, #f6f7f9); }
.shm-tour-intro-photo { position: relative; }
.shm-tour-intro-photo img { width: 100%; height: 280px; object-fit: cover; object-position: center 25%; }

.shm-tour-intro-pill {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: 18px;
    background: var(--how-card, #ffffff);
    color: var(--how-ink, #14161c);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.shm-tour-intro-pill > i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--tour-activity); }

.shm-tour-intro-copy { display: grid; align-content: start; gap: 10px; padding: 16px 16px 18px; }
.shm-tour-intro-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--how-quiet, #5b6170); font-size: 13px; font-weight: 600; }
.shm-tour-intro-name { font-family: var(--how-display); font-size: 26px; font-weight: 800; line-height: 30px; }
.shm-tour-intro-reason { font-size: 16px; font-weight: 600; line-height: 22px; }
.shm-tour-intro-detail { color: var(--how-quiet, #5b6170); font-size: 15px; line-height: 22px; }

/* "You both · Sunday mornings": the crossing, so yellow. */
.shm-tour-both {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 14px;
    background: var(--how-yellow, #ffc21a);
    color: var(--how-on-yellow, #14161c);
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
}

.shm-tour-shared { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--how-hair, #e5e7ec); }
.shm-tour-shared > div { display: grid; gap: 2px; }
.shm-tour-shared dt { color: var(--how-quiet, #5b6170); font-size: 13px; font-weight: 600; line-height: 18px; }
.shm-tour-shared dd { font-size: 15px; font-weight: 600; line-height: 20px; }

.shm-tour-preview .shm-tour-primary,
.shm-tour-preview .shm-tour-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    transition: background 0.15s;
}

.shm-tour-preview .shm-tour-primary { background: var(--how-ink, #14161c); color: var(--how-on-ink, #ffffff); }
.shm-tour-preview .shm-tour-primary:hover { background: var(--how-ink-hover, #2a2d36); }
.shm-tour-preview .shm-tour-secondary { background: var(--how-grey, #eef0f3); color: var(--how-ink, #14161c); font-weight: 600; }
.shm-tour-preview .shm-tour-secondary:hover { background: var(--how-grey-hover, #e2e5ea); }
.shm-tour-preview .shm-tour-secondary:disabled { opacity: 0.4; cursor: default; }
.shm-tour-intro .shm-tour-secondary { background: var(--how-card, #ffffff); }

/* Choose an example plan */
.shm-tour-context { display: grid; align-content: start; gap: 8px; }
.shm-tour-context h4 { font-family: var(--how-display); font-size: 20px; font-weight: 800; line-height: 24px; }
.shm-tour-context > p { color: var(--how-quiet, #5b6170); font-size: 15px; line-height: 22px; }
.shm-tour-plan-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.shm-tour-plan-options button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px 0 10px;
    border: 0;
    border-radius: 22px;
    background: var(--how-grey, #eef0f3);
    color: var(--how-ink, #14161c);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    transition: background 0.15s;
}

.shm-tour-plan-options button > i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--tour-activity); }
.shm-tour-plan-options button:hover { background: var(--how-grey-hover, #e2e5ea); }
.shm-tour-plan-options button[aria-pressed='true'] { background: var(--how-ink, #14161c); color: var(--how-on-ink, #ffffff); }

.shm-tour-shared-context { display: grid; gap: 8px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--how-hair, #e5e7ec); }
.shm-tour-cues { display: flex; flex-wrap: wrap; gap: 6px; }
.shm-tour-cues > span:not(.shm-tour-both) { padding: 4px 12px; border-radius: 14px; background: var(--how-grey, #eef0f3); font-size: 13px; font-weight: 600; line-height: 20px; }

.shm-tour-inline-link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--how-ink, #14161c);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

/* The conversation: the app's own pieces, in the V15 look. */
.shm-tour-conversation { display: grid; gap: 12px; }
.shm-tour-preview .shm-flow-person-head { align-items: center; gap: 12px; }
.shm-tour-preview .shm-flow-avatar { width: 48px !important; height: 48px !important; border-radius: 50%; box-shadow: none; }
.shm-tour-preview .shm-flow-person-copy > strong { font-family: var(--how-display); font-size: 20px; font-weight: 800; line-height: 24px; }
.shm-tour-preview .shm-flow-kicker { margin-bottom: 4px; color: var(--how-quiet, #5b6170); font-size: 13px; font-weight: 600; line-height: 18px; text-transform: none; }
.shm-tour-preview .shm-flow-person-meta { margin-top: 2px; color: var(--how-quiet, #5b6170); font-size: 13px; font-weight: 500; }
.shm-tour-chat-indicator { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--how-yellow, #ffc21a); color: var(--how-on-yellow, #14161c); }

.shm-tour-preview .shm-flow-context-card.shm-chat-starter { padding: 14px 16px; border: 0; border-radius: 20px; background: var(--how-grey, #eef0f3); box-shadow: none; }
.shm-tour-preview .shm-chat-starter .shm-flow-context-head { flex-wrap: wrap; gap: 8px; }
.shm-tour-preview .shm-chat-starter p { margin-top: 8px; color: var(--how-ink, #14161c); font-size: 15px; font-weight: 500; line-height: 22px; }

.shm-tour-preview .shm-chat-starter button {
    height: auto;
    min-height: 36px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 18px;
    background: var(--how-card, #ffffff) !important;
    color: var(--how-ink, #14161c) !important;
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
}

.shm-tour-preview .shm-chat-context-cues span { min-height: 28px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--how-card, #ffffff); color: var(--how-ink, #14161c); font-size: 13px; font-weight: 600; }
.shm-tour-preview .shm-chat-messages { justify-content: flex-start; gap: 8px; min-height: 150px; max-height: 300px; padding: 8px 2px 4px; overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; scrollbar-width: thin; }
.shm-tour-preview .shm-chat-bubble { max-width: 84%; padding: 10px 14px; border: 0; border-radius: 20px 20px 20px 6px; background: var(--how-grey, #eef0f3); color: var(--how-ink, #14161c); box-shadow: none; }
.shm-tour-preview .shm-chat-bubble.is-mine { border-radius: 20px 20px 6px 20px; background: var(--how-ink, #14161c); color: var(--how-on-ink, #ffffff); }
.shm-tour-preview .shm-chat-bubble p { font-size: 15px; font-weight: 400; line-height: 22px; }
.shm-tour-preview .shm-chat-bubble > span:empty { display: none; }
.shm-tour-preview .shm-chat-composer { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }

.shm-tour-preview .shm-chat-composer textarea {
    min-height: 72px;
    padding: 12px 14px;
    border: 0;
    border-radius: 20px;
    background: var(--how-grey, #eef0f3);
    box-shadow: none;
    color: var(--how-ink, #14161c);
    font-size: 16px;
    line-height: 22px;
}

.shm-tour-preview .shm-chat-composer textarea:focus,
.shm-tour-preview .shm-chat-composer textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--how-ink, #14161c); }
.shm-tour-preview .shm-chat-composer textarea:-ms-input-placeholder { color: var(--how-quiet, #5b6170); opacity: 1; }
.shm-tour-preview .shm-chat-composer textarea::placeholder { color: var(--how-quiet, #5b6170); opacity: 1; }

.shm-tour-preview .shm-chat-composer button {
    justify-self: end;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 22px;
    background: var(--how-ink, #14161c);
    color: var(--how-on-ink, #ffffff);
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
}

.shm-tour-preview .shm-chat-composer button:disabled { opacity: 0.4; }
.shm-tour-chat-note { color: var(--how-quiet, #5b6170); font-size: 14px; line-height: 20px; }

/* Start again, Back, and the next step */
.shm-tour-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 16px; }
.shm-tour-controls > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }

.shm-tour-reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--how-quiet, #5b6170);
    font-size: 14px;
    font-weight: 600;
}

.shm-tour-reset:hover { color: var(--how-ink, #14161c); }

@media (prefers-reduced-motion: no-preference) {
    .shm-tour-introduction, .shm-tour-conversation { animation: shm-tour-enter 0.3s ease both; }
}

@keyframes shm-tour-enter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}

@media (min-width: 600px) {
    .shm-tour-panel { padding: 20px; }
    .shm-tour-intro-layout:not(.is-expanded) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .shm-tour-intro.is-expanded { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
    .shm-tour-intro.is-expanded .shm-tour-intro-photo img { height: 100%; min-height: 360px; }
    .shm-tour-intro.is-expanded .shm-tour-intro-copy { padding: 22px; }
    .shm-tour-step-copy > strong { font-size: 15px; line-height: 20px; }
}

@media (min-width: 900px) {
    .shm-tour-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 24px; }
    .shm-tour-tabs { grid-template-columns: minmax(0, 1fr); }
    .shm-tour-tabs > button { grid-template-columns: 26px minmax(0, 1fr) 18px; gap: 12px; padding: 16px; background: transparent; color: var(--how-quiet, #5b6170); }
    .shm-tour-tabs > button:hover { background: var(--how-grey, #eef0f3); }
    .shm-tour-tabs > button[aria-selected='true'] { background: var(--how-card, #ffffff); color: var(--how-ink, #14161c); }
    .shm-tour-tabs > button:not([aria-selected='true']) .shm-tour-step-number { background: var(--how-grey, #eef0f3); }
    .shm-tour-step-copy > strong { font-family: var(--how-display); font-size: 20px; font-weight: 800; line-height: 24px; }
    .shm-tour-tabs > button[aria-selected='true'] .shm-tour-step-copy > span { display: block; }
    .shm-tour-step-icon { display: block; margin-top: 3px; }
    .shm-tour-mobile-description { display: none; }
    .shm-tour-guide-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding-inline: 16px; color: var(--how-quiet, #5b6170); }
    .shm-tour-guide-note svg { margin-top: 2px; }
    .shm-tour-guide-note p { max-width: 260px; font-size: 14px; line-height: 20px; }
    .shm-tour-window-bar { padding: 16px 22px; }
    .shm-tour-panel { min-height: 540px; padding: 22px; }
    .shm-tour-controls { padding: 14px 22px 20px; }
}

/* "How we match" on /how-it-works (docs/design/see-the-overlap.md §A) in the V15 look: you are ink, Mira is the
   colour of what she does (a run), yellow is what you both share, green is proof. Cards by colour, no outlines.
   Uses the page's --how-* values (HowItWorksPage.css). */

.shm-hwm { --hwm-them: var(--how-run, #f25c1f); display: grid; gap: 12px; align-items: start; }

.shm-hwm-steps { display: none; }

.shm-hwm-steps button {
    display: flex;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--how-ink, #14161c);
    text-align: left;
    transition: background-color 200ms ease;
}

.shm-hwm-steps button:hover { background: var(--how-grey, #eef0f3); }
.shm-hwm-steps button[aria-pressed='true'] { background: var(--how-card, #ffffff); }

.shm-hwm-step-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--how-grey, #eef0f3);
    color: var(--how-ink, #14161c);
}

.shm-hwm-steps button[aria-pressed='true'] .shm-hwm-step-icon { background: var(--how-ink, #14161c); color: var(--how-on-ink, #ffffff); }

.shm-hwm-step-copy, .shm-hwm-row-text { display: grid; gap: 2px; }
.shm-hwm-step-copy > b { font-size: 16px; line-height: 22px; }
.shm-hwm-step-copy > span { color: var(--how-quiet, #5b6170); font-size: 14px; line-height: 20px; }

.shm-hwm-stage { margin: 0; padding: 18px 18px 20px; border-radius: 28px; background: var(--how-card, #ffffff); }

.shm-hwm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 6px; font-size: 13px; font-weight: 700; }
.shm-hwm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.shm-hwm-legend i { width: 10px; height: 10px; border-radius: 50%; }
.shm-hwm-legend .is-you { background: var(--how-ink, #14161c); }
.shm-hwm-legend .is-them { background: var(--hwm-them); }
.shm-hwm-legend .is-both { background: var(--how-yellow, #ffc21a); }
.shm-hwm-legend em { display: none; color: var(--how-quiet, #5b6170); font-style: normal; font-weight: 600; }

/* A phone shows one layer at a time, with Back and Next. */
.shm-hwm-row { display: none; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; }
.shm-hwm-row[data-current='true'] { display: grid; }

.shm-hwm-row-label { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 20px; }

.shm-hwm-row-label > i {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--how-ink, #14161c);
    color: var(--how-on-ink, #ffffff);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.shm-hwm-row-text > span { color: var(--how-quiet, #5b6170); font-size: 14px; line-height: 20px; }

.shm-hwm-visual { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; }
.shm-hwm-visual small { flex-basis: 100%; color: var(--how-quiet, #5b6170); font-size: 13px; line-height: 18px; }

.shm-hwm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 12px 0 10px;
    border-radius: 15px;
    background: var(--how-grey, #eef0f3);
    color: var(--how-ink, #14161c);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.shm-hwm-chip.is-them svg { color: var(--hwm-them); }
.shm-hwm-chip.is-both { background: var(--how-yellow, #ffc21a); color: var(--how-on-yellow, #14161c); }
.shm-hwm-chip.is-proof svg { color: var(--how-mountains, #12a877); }

.shm-hwm-weeks { display: grid; gap: 6px; }
.shm-hwm-week { display: inline-grid; grid-template-rows: repeat(3, 10px); grid-auto-flow: column; grid-auto-columns: 10px; gap: 3px; }
.shm-hwm-week i { border-radius: 3px; background: var(--how-grey, #eef0f3); }
.shm-hwm-week i[data-cell='y'] { background: var(--how-ink, #14161c); }
.shm-hwm-week i[data-cell='t'] { background: var(--hwm-them); }
.shm-hwm-week i[data-cell='b'] { background: var(--how-yellow, #ffc21a); }

.shm-hwm-line { display: grid; gap: 2px; font-size: 14px; line-height: 20px; }
.shm-hwm-line > :last-child { color: var(--how-quiet, #5b6170); }

.shm-hwm-venn { width: 150px; height: 75px; }
.shm-hwm-venn .is-you { fill: var(--how-ink, #14161c); fill-opacity: 0.1; }
.shm-hwm-venn .is-them { fill: var(--hwm-them); fill-opacity: 0.22; }
.shm-hwm-venn .is-you-dot { fill: var(--how-ink, #14161c); }
.shm-hwm-venn .is-them-dot { fill: var(--hwm-them); }
.shm-hwm-venn .is-line { stroke: var(--how-ink, #14161c); stroke-width: 1.2; stroke-dasharray: 3 3; }

.shm-hwm-sure { display: inline-flex; align-items: center; gap: 8px; color: var(--how-quiet, #5b6170); font-size: 13px; }
.shm-hwm-sure i { display: inline-block; width: 120px; height: 8px; overflow: hidden; border-radius: 4px; background: var(--how-grey, #eef0f3); }
.shm-hwm-sure b { display: block; width: 78%; height: 100%; background: var(--how-mountains, #12a877); }

/* The introduction it adds up to: the reason, on yellow, because it's what you both share. */
.shm-hwm-result {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 14px;
    border-radius: 20px;
    background: var(--how-ground, #f6f7f9);
    transition: opacity 420ms ease, transform 420ms ease;
}

.shm-hwm[data-step='4'] .shm-hwm-result { display: flex; }
.shm-hwm-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(160deg, #e7b98f, #8a5a43); }
.shm-hwm-result-copy { display: grid; flex: 1; gap: 6px; min-width: 0; }
.shm-hwm-result-copy b { font-family: var(--how-display); font-size: 20px; font-weight: 800; line-height: 24px; }
.shm-hwm-reason { justify-self: start; padding: 4px 10px; border-radius: 14px; background: var(--how-yellow, #ffc21a); color: var(--how-on-yellow, #14161c); font-size: 13px; font-weight: 700; }
.shm-hwm-both { color: var(--how-quiet, #5b6170); font-size: 13px; line-height: 18px; }

.shm-hwm-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }

.shm-hwm-nav {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 22px;
    background: var(--how-grey, #eef0f3);
    color: var(--how-ink, #14161c);
    font-size: 15px;
    font-weight: 700;
}

.shm-hwm-nav.is-next { background: var(--how-ink, #14161c); color: var(--how-on-ink, #ffffff); }
.shm-hwm-nav:disabled { opacity: 0.4; cursor: default; }
.shm-hwm-dots { display: flex; gap: 6px; }
.shm-hwm-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--how-hair, #e5e7ec); transition: width 200ms ease; }
.shm-hwm-dots i[data-on='true'] { width: 18px; background: var(--how-ink, #14161c); }

.shm-hwm-never {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: 20px;
    background: var(--how-card, #ffffff);
    color: var(--how-quiet, #5b6170);
    font-size: 14px;
    line-height: 20px;
}

.shm-hwm-never b { color: var(--how-ink, #14161c); }

.shm-hwm-never a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -12px;
    color: var(--how-ink, #14161c);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

/* A wide window: the five layers on the left, all of them on the card, lit one at a time. */
@media (min-width: 861px) {
    .shm-hwm { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; }
    .shm-hwm-steps { display: grid; gap: 4px; }
    .shm-hwm-stage { padding: 20px 24px 22px; }
    .shm-hwm-legend em { display: inline; margin-left: auto; }
    .shm-hwm-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; border-bottom: 1px solid var(--how-hair, #e5e7ec); opacity: 0.3; filter: saturate(0.2); transition: opacity 360ms ease, filter 360ms ease; }
    .shm-hwm-row[data-lit='true'] { opacity: 1; filter: none; }
    .shm-hwm-row-label { align-items: center; font-size: 14px; }
    /* The card's rows carry the short title only; the list on the left says why. */
    .shm-hwm-row-text > span { display: none; }
    .shm-hwm-result { display: flex; flex-wrap: nowrap; margin-top: 16px; opacity: 0.3; transform: translateY(6px); }
    .shm-hwm-result[data-lit='true'] { opacity: 1; transform: none; }
    .shm-hwm-both { max-width: 140px; text-align: right; }
    .shm-hwm-pager { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .shm-hwm-row, .shm-hwm-result, .shm-hwm-steps button, .shm-hwm-dots i { transition: none; }
}

/* /how-it-works in the V15 system, so it reads as one site with the landing (ShouldHaveMetFirstScreen.css): the
   ground, white cards on it by colour, ink pills for the way in and grey pills beside them, colour only where an
   activity is, and yellow only where two weeks cross ("you both"). No outlines, no all-caps, no slabs behind text;
   one display title. The values are V15's own until the shared tokens (app-tokens.css) move to it; sizes are on
   the type scale, except the desktop title, which grows with the window like the landing's. Its pieces (the
   example week, how we match, the walkthrough) read the --how-* values from here. */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url(/77e681773bd82819d8e8.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url(/f45a85f45f1d846b6823.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body:has(.shm-how) { background: #f6f7f9; }
html.dark body:has(.shm-how) { background: #0f1115; }
body:has(.shm-how) .FrontEnd,
body:has(.shm-how) .app-footer--landing { background: #f6f7f9 !important; }
html.dark body:has(.shm-how) .FrontEnd,
html.dark body:has(.shm-how) .app-footer--landing { background: #0f1115 !important; }
body:has(.shm-how) .app-footer--landing .app-footer__container { width: min(1120px, calc(100% - 32px)) !important; }

.shm-how {
    --how-ground: #f6f7f9;
    --how-card: #ffffff;
    --how-ink: #14161c;
    --how-quiet: #5b6170;
    --how-grey: #eef0f3;
    --how-grey-hover: #e2e5ea;
    --how-hair: #e5e7ec;
    --how-ink-hover: #2a2d36;
    --how-on-ink: #ffffff;
    --how-yellow: #ffc21a;
    --how-on-yellow: #14161c;
    --how-danger: #b3124f;
    /* Activity colours: the only strong colour on the page. */
    --how-run: #f25c1f;
    --how-water: #1a8cff;
    --how-courts: #7cb800;
    --how-mountains: #12a877;
    --how-culture: #7a5cf5;
    --how-food: #e8457a;
    --how-display: 'Bricolage Grotesque', 'Inter', 'Helvetica Neue', sans-serif;
    --how-width: min(1120px, calc(100% - 32px));
    background: var(--how-ground);
    color: var(--how-ink);
    font-family: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: anywhere;
}

html.dark .shm-how {
    --how-ground: #0f1115;
    --how-card: #181b21;
    --how-ink: #f2f3f5;
    --how-quiet: #9aa0ac;
    --how-grey: #262a31;
    --how-grey-hover: #2f343e;
    --how-hair: #262a31;
    --how-ink-hover: #ffffff;
    --how-on-ink: #0f1115;
    --how-danger: #ff8a98;
}

.shm-how *, .shm-how *::before, .shm-how *::after { box-sizing: border-box; }
/* Resets at one class's weight, so each piece's own class (later in the file) sets its look. */
.shm-how :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; color: inherit; }
.shm-how :where(ul, ol) { padding: 0; list-style: none; }
.shm-how :where(a) { color: inherit; text-decoration: none; }
.shm-how :where(button, textarea, input) { font: inherit; }
.shm-how :where(button) { cursor: pointer; }
.shm-how :where(img) { display: block; max-width: 100%; height: auto; }
.shm-how svg { flex-shrink: 0; }
.shm-how :is(a, button, [tabindex]):focus-visible { outline: 3px solid var(--how-ink); outline-offset: 3px; }
.shm-how ::selection { background: #ffc21a; color: #14161c; }
.shm-how :is(section[id], main) { scroll-margin-top: 24px; }
.shm-how :is(h1, h2, h3) { text-wrap: balance; }
/* Titles break between words; only a word longer than the line breaks inside. */
.shm-how :is(h1, h2, h3, h4) { overflow-wrap: break-word; }

.shm-how-sr, .shm-how .shm-open-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.shm-how-skip {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    padding: 12px 18px;
    border-radius: 22px;
    background: var(--how-ink);
    color: var(--how-on-ink) !important;
    font-size: 15px;
    font-weight: 600;
    clip-path: inset(50%);
    transform: translateY(-200%);
}

.shm-how-skip:focus { clip-path: none; transform: none; }

.shm-how-shell { width: var(--how-width); margin-inline: auto; }
.shm-how-main { padding-bottom: 56px; }

/* Pills: ink for the way in, grey beside it. No arrows. */
.shm-how .shm-how-primary,
.shm-how .shm-how-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 26px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    transition: background 0.15s;
}

.shm-how .shm-how-primary { background: var(--how-ink); color: var(--how-on-ink); }
.shm-how .shm-how-primary:hover { background: var(--how-ink-hover); }
.shm-how .shm-how-secondary { background: var(--how-grey); color: var(--how-ink); font-size: 15px; font-weight: 600; }
.shm-how .shm-how-secondary:hover { background: var(--how-grey-hover); }
.shm-how .shm-how-primary.is-small { min-height: 44px; padding: 0 18px; border-radius: 22px; font-size: 15px; }

.shm-how-text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.shm-how-text-link:hover { text-decoration-thickness: 2px; }

.shm-how-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Section headings: the title, a quiet line beside or under it. */
.shm-how-section { padding-top: 72px; }

.shm-how-heading { display: grid; gap: 12px; margin-bottom: 24px; }

.shm-how-heading > h2 {
    max-width: 720px;
    font-family: var(--how-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 34px;
    letter-spacing: -0.01em;
}

.shm-how-heading > p { max-width: 34em; color: var(--how-quiet); font-size: 16px; line-height: 24px; }
.shm-how-heading > .shm-how-text-link { justify-self: start; }

.shm-how-note { margin-top: 14px !important; color: var(--how-quiet); font-size: 13px; line-height: 18px; }

/* The top */
.shm-how-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: var(--how-width);
    min-height: 68px;
    margin-inline: auto;
}

.shm-how-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: var(--how-display);
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}

.shm-how-brand > span:first-child { display: flex; width: 30px; height: 30px; }
.shm-how-brand svg { width: 100%; height: 100%; }

.shm-how-nav-links { display: none; align-items: center; gap: 4px; }

.shm-how-nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 10px;
    color: var(--how-quiet);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

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

.shm-how-nav-actions { display: flex; align-items: center; gap: 8px; }

.shm-how-login {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 22px;
    background: var(--how-grey);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s;
}

.shm-how-login:hover { background: var(--how-grey-hover); }

/* The first screen: the title and the way in, then the example week (ShouldHaveMetNearMiss.css). On a wide
   window the week fills a card and the words sit on it, on the left, where the map leaves room. */
.shm-how-hero { display: grid; gap: 24px; width: var(--how-width); margin-inline: auto; padding-top: 12px; }
.shm-how-hero-card { display: grid; gap: 16px; }

.shm-how-title {
    font-family: var(--how-display);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.shm-how-lead { max-width: 32em; color: var(--how-quiet); font-size: 18px; line-height: 26px; }
.shm-how-hero-card .shm-how-actions { margin-top: 4px; }

.shm-how-hero-note { display: flex; align-items: flex-start; gap: 8px; color: var(--how-quiet); font-size: 13px; line-height: 18px; }
.shm-how-hero-note svg { margin-top: 1px; }

/* How it works: three cards, then "Try step one right now". */
.shm-how-steps { display: grid; gap: 12px; counter-reset: shm-how-step; }

.shm-how-steps > li {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px 12px 22px;
    border-radius: 28px;
    background: var(--how-card);
    counter-increment: shm-how-step;
}

.shm-how-steps h3 { margin: 10px 10px 0; font-family: var(--how-display); font-size: 20px; font-weight: 800; line-height: 24px; letter-spacing: -0.01em; }
.shm-how-steps li > p { margin-inline: 10px; color: var(--how-quiet); font-size: 15px; line-height: 22px; }

.shm-how-step-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 44px 18px 18px;
    border-radius: 20px;
    background: var(--how-ground);
}

.shm-how-step-visual::before {
    content: counter(shm-how-step);
    position: absolute;
    left: 16px;
    top: 12px;
    color: var(--how-quiet);
    font-family: var(--how-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
}

.shm-how-step-tell { flex-wrap: wrap; align-content: center; gap: 8px; }

.shm-how-step-tell > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    background: var(--how-card);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.shm-how-step-tell > span.is-intent { background: var(--how-ink); color: var(--how-on-ink); }
.shm-how-step-tell > span.is-private { background: var(--how-grey); }
.shm-how-step-tell > span.is-time { background: var(--how-grey); color: var(--how-quiet); }
.shm-how-step-tell > span > i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.shm-how-step-tell .is-run > i { background: var(--how-run); }
.shm-how-step-tell .is-culture > i { background: var(--how-culture); }
.shm-how-step-tell .is-mountains > i { background: var(--how-mountains); }

.shm-how-step-overlap { flex-direction: column; }
.shm-how-venn { width: min(200px, 100%); height: auto; overflow: visible; }
.shm-how-venn-you { fill: var(--how-ink); opacity: 0.14; }
.shm-how-venn-them { fill: var(--how-run); opacity: 0.32; }
.shm-how-venn-overlap { fill: var(--how-yellow); }

.shm-how-venn-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 12px; font-size: 13px; font-weight: 600; line-height: 18px; }
.shm-how-venn-key > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.shm-how-venn-key i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.shm-how-venn-key .is-you { background: var(--how-ink); }
.shm-how-venn-key .is-them { background: var(--how-run); }
.shm-how-venn-key .is-both { background: var(--how-yellow); }

.shm-how-step-meet { flex-direction: column; gap: 12px; }

.shm-how-mutual {
    padding: 6px 14px;
    border-radius: 16px;
    background: var(--how-yellow);
    color: var(--how-on-yellow);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.shm-how-plan-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    width: min(250px, 100%);
    padding: 16px;
    border-radius: 20px;
    background: var(--how-card);
}

.shm-how-plan-card svg { grid-row: span 2; margin-top: 2px; color: var(--how-run); }
.shm-how-plan-card b { font-family: var(--how-display); font-size: 18px; font-weight: 800; line-height: 22px; }
.shm-how-plan-card small { color: var(--how-quiet); font-size: 13px; }

.shm-how-plan-card i {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 9px;
    border-radius: 18px;
    background: var(--how-ink);
    color: var(--how-on-ink);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}

.shm-how-try {
    display: grid;
    gap: 18px;
    margin-top: 12px;
    padding: 22px 16px 16px;
    border-radius: 28px;
    background: var(--how-card);
    scroll-margin-top: 120px;
}

.shm-how-try-copy { display: grid; gap: 10px; padding-inline: 6px; }
.shm-how-try-copy h3 { font-family: var(--how-display); font-size: 26px; font-weight: 800; line-height: 30px; letter-spacing: -0.01em; }
.shm-how-try-copy p { max-width: 26em; color: var(--how-quiet); font-size: 16px; line-height: 24px; }

/* The plan box (ShouldHaveMetIntentPrompt): a filled field, grey seed pills, an ink "Continue". */
.shm-how .shm-intent-console { min-width: 0; }
.shm-how .shm-intent-console-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.shm-how .shm-intent-console-top > span:first-child { font-size: 16px; font-weight: 700; line-height: 20px; }
.shm-how .shm-intent-console-top > span:last-child { color: var(--how-quiet); font-size: 13px; }
.shm-how .shm-intent-seeds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.shm-how .shm-intent-seeds button {
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    border-radius: 22px;
    background: var(--how-grey);
    color: var(--how-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    transition: background 0.15s;
}

.shm-how .shm-intent-seeds button:hover { background: var(--how-grey-hover); }

.shm-how .shm-intent-console textarea.shm-intent-input {
    display: block;
    width: 100%;
    height: 112px;
    min-height: 72px;
    padding: 14px 16px;
    border: 0;
    border-radius: 20px;
    background: var(--how-grey);
    box-shadow: none;
    color: var(--how-ink);
    font-size: 16px;
    line-height: 24px;
    resize: vertical;
}

.shm-how .shm-intent-console textarea.shm-intent-input:focus,
.shm-how .shm-intent-console textarea.shm-intent-input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--how-ink); }
.shm-how .shm-intent-console textarea.shm-intent-input:-ms-input-placeholder { color: var(--how-quiet); opacity: 1; }
.shm-how .shm-intent-console textarea.shm-intent-input::placeholder { color: var(--how-quiet); opacity: 1; }
.shm-how .shm-intent-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }

.shm-how .shm-intent-console .shm-intent-actions button,
.shm-how .shm-intent-console .shm-intent-commit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 24px;
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    white-space: normal;
}

.shm-how .shm-intent-console .shm-intent-photo { background: var(--how-grey); color: var(--how-ink); font-weight: 600; }
.shm-how .shm-intent-console .shm-intent-photo:hover { background: var(--how-grey-hover); }
.shm-how .shm-intent-console .shm-hero-button,
.shm-how .shm-intent-console .shm-intent-commit { background: var(--how-ink); color: var(--how-on-ink); }
.shm-how .shm-intent-console .shm-hero-button:hover,
.shm-how .shm-intent-console .shm-intent-commit:hover { background: var(--how-ink-hover); }
.shm-how .shm-intent-console .shm-hero-button:disabled { opacity: 0.4; cursor: not-allowed; }
.shm-how .shm-intent-images { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.shm-how .shm-intent-image { display: block; position: relative; }
.shm-how .shm-intent-image img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }

.shm-how .shm-intent-image button {
    display: grid;
    place-items: center;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--how-ink);
    color: var(--how-on-ink);
}

.shm-how .shm-intent-error { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--how-grey); color: var(--how-ink); font-size: 14px; line-height: 20px; }
.shm-how .shm-intent-continue { display: block; width: fit-content; margin-top: 6px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.shm-how .shm-intent-preview, .shm-how .shm-intent-progress { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--how-hair); font-size: 15px; line-height: 22px; }
.shm-how .shm-intent-preview strong { font-weight: 600; }
.shm-how .shm-intent-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.shm-how .shm-intent-pills > span { padding: 4px 12px; border-radius: 14px; background: var(--how-grey); font-size: 13px; font-weight: 600; }
.shm-how .shm-intent-console .shm-intent-commit { width: fit-content; margin-top: 14px; }
.shm-how .shm-intent-saved, .shm-how .shm-intent-progress > span { display: block; margin-top: 6px; color: var(--how-quiet); font-size: 13px; }
.shm-how .shm-intent-progress-track { height: 4px; margin-bottom: 12px; overflow: hidden; border-radius: 2px; background: var(--how-grey); }
.shm-how .shm-intent-progress-track > span { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--how-ink); animation: shm-how-progress 1.2s ease-in-out infinite alternate; }

@keyframes shm-how-progress {
    from { transform: translateX(-20%); }
    to { transform: translateX(180%); }
}

/* What it's for: grey tabs, the example as one card. */
.shm-how-uses-layout { display: grid; gap: 12px; }

.shm-how-uses-tabs {
    display: flex;
    gap: 8px;
    margin-inline: -16px;
    padding-inline: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.shm-how-uses-tabs button {
    flex: none;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 22px;
    background: var(--how-grey);
    color: var(--how-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s;
}

.shm-how-uses-tabs button:hover { background: var(--how-grey-hover); }
.shm-how-uses-tabs button[aria-selected='true'] { background: var(--how-ink); color: var(--how-on-ink); }

.shm-how-use { display: grid; overflow: hidden; border-radius: 28px; background: var(--how-card); }
.shm-how-use > img { width: 100%; height: 220px; object-fit: cover; }
.shm-how-use-flow { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.shm-how-use-wrote > span, .shm-how-use-intro > span { display: block; color: var(--how-quiet); font-size: 13px; font-weight: 600; line-height: 18px; }
.shm-how-use-wrote p { margin-top: 6px; padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: var(--how-grey); font-size: 16px; line-height: 22px; }
.shm-how-use-intro { padding-top: 14px; border-top: 1px solid var(--how-hair); }
.shm-how-use-intro strong { display: block; margin-top: 4px; font-family: var(--how-display); font-size: 23px; font-weight: 800; line-height: 26px; }
.shm-how-use-intro p { margin-top: 8px; color: var(--how-quiet); font-size: 15px; line-height: 22px; }

.shm-how-use-plan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 16px;
    border-radius: 20px;
    background: var(--how-ink);
    color: var(--how-on-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

/* Promises and privacy: white cards on the ground. */
.shm-how-cards { display: grid; gap: 12px; }
.shm-how-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 24px; background: var(--how-card); }
.shm-how-card > strong { font-family: var(--how-display); font-size: 20px; font-weight: 800; line-height: 24px; letter-spacing: -0.01em; }
.shm-how-card > p { flex: 1; color: var(--how-quiet); font-size: 15px; line-height: 22px; }
.shm-how-card > .shm-how-text-link { align-self: flex-start; margin-bottom: -10px; font-size: 14px; }
.shm-how-card > svg { color: var(--how-ink); }

/* The close: the question, the way in, the code entry. */
.shm-how-start { display: grid; justify-items: center; gap: 14px; padding-top: 88px; text-align: center; }
.shm-how-start > h2 { max-width: 18em; font-family: var(--how-display); font-size: 30px; font-weight: 800; line-height: 34px; letter-spacing: -0.01em; }
.shm-how-start > p { max-width: 30em; color: var(--how-quiet); font-size: 16px; line-height: 24px; }
.shm-how-start > p.shm-how-start-area { color: var(--how-quiet); font-size: 14px; font-weight: 600; line-height: 20px; }
.shm-how-start .shm-how-actions { justify-content: center; margin-top: 6px; }

/* "Got a code from a sticker or a friend?": small, and the same pills when it opens. */
.shm-how .shm-open-code { margin: 0 !important; }

.shm-how .shm-open-code-toggle,
.shm-how .shm-open-code-cancel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--how-quiet);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    /* Beats the old landing sheet's `.shm-open-text-link` (still loaded once another public page was open). */
    text-decoration: none !important;
    cursor: pointer;
}

.shm-how .shm-open-code-toggle:hover,
.shm-how .shm-open-code-cancel:hover { color: var(--how-ink); text-decoration: underline !important; text-decoration-thickness: 1.5px !important; text-underline-offset: 4px; }

.shm-how .shm-open-code-form {
    width: min(480px, 100%);
    max-width: none;
    padding: 18px;
    border-radius: 24px;
    background: var(--how-card);
    text-align: left;
}

.shm-how .shm-open-code-form label strong { font-size: 16px; }
.shm-how .shm-open-code-form label span { color: var(--how-quiet); font-size: 14px; line-height: 20px; }

.shm-how .shm-open-code-row input {
    min-height: 52px;
    border: 0;
    border-radius: 26px;
    background: var(--how-grey);
    box-shadow: none;
    color: var(--how-ink);
    font: inherit;
    font-size: 16px;
}

.shm-how .shm-open-code-row input:-ms-input-placeholder { color: var(--how-quiet); opacity: 1; }

.shm-how .shm-open-code-row input::placeholder { color: var(--how-quiet); opacity: 1; }
.shm-how .shm-open-code-row input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--how-ink); }
.shm-how .shm-open-code-row input[aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--how-danger); }

.shm-how .shm-open-code-row .shm-open-button,
.shm-how .shm-open-code-scan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 26px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.shm-how .shm-open-code-row .shm-open-button { background: var(--how-ink); color: var(--how-on-ink); }
.shm-how .shm-open-code-scan { justify-self: start; min-height: 44px; background: var(--how-grey); color: var(--how-ink); font-weight: 600; }
.shm-how .shm-open-code-scan:hover { background: var(--how-grey-hover); }
.shm-how .shm-open-code-scan:focus-visible { outline: 3px solid var(--how-ink); outline-offset: 3px; }
.shm-how .shm-open-code-error { color: var(--how-danger); font-size: 14px; }

/* A phone's header has room for the mark and "Log in", like the landing's; "Join free" is right under it. */
@media (max-width: 479px) {
    .shm-how-nav-actions .shm-how-primary { display: none; }
}

@media (max-width: 359px) {
    .shm-how-brand > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .shm-how-title { font-size: 38px; }
    .shm-how .shm-how-primary, .shm-how .shm-how-secondary { padding: 0 20px; white-space: normal; }
}

@media (min-width: 600px) {
    .shm-how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shm-how-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shm-how-try { padding: 28px; }
    .shm-how-use { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 400px; }
    .shm-how-use > img { height: 100%; min-height: 280px; }
    .shm-how-use-flow { padding: 26px; }
}

@media (min-width: 900px) {
    .shm-how-nav { min-height: 84px; }
    .shm-how-section { padding-top: 112px; }
    .shm-how-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: end; gap: 48px; margin-bottom: 32px; }
    .shm-how-heading > h2 { font-size: 34px; line-height: 38px; }
    .shm-how-heading > p, .shm-how-heading > .shm-how-text-link { justify-self: end; }

    .shm-how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .shm-how-try { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 40px; padding: 36px; border-radius: 32px; }
    .shm-how-try-copy h3 { font-size: 30px; line-height: 34px; }

    .shm-how-uses-layout { grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr); gap: 16px; }
    .shm-how-uses-tabs { flex-direction: column; margin: 0; padding: 0; overflow: visible; }
    .shm-how-uses-tabs button { min-height: 64px; padding: 0 22px; border-radius: 24px; background: var(--how-card); font-family: var(--how-display); font-size: 20px; font-weight: 800; line-height: 24px; white-space: normal; }
    .shm-how-uses-tabs button:hover { background: var(--how-grey); }

    .shm-how-cards.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .shm-how-cards.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .shm-how-card { padding: 26px; }

    .shm-how-start { padding-top: 120px; }
    .shm-how-start > h2 { font-size: 34px; line-height: 38px; }
}

/* From where the example week leaves its phone layout (ShouldHaveMetNearMiss.css, 860 px): the week fills a card
   and the words sit on it, on the left, where the map leaves room. */
@media (min-width: 861px) {
    .shm-how-hero { position: relative; height: clamp(680px, calc(100vh - 120px), 800px); padding-top: 0; overflow: hidden; border-radius: 32px; background: var(--how-card); }
    .shm-how-hero-card { position: absolute; z-index: 2; left: 32px; top: 32px; width: min(460px, 42%); gap: 16px; padding: 28px; border-radius: 28px; background: var(--how-card); }
    .shm-how-title { font-size: clamp(38px, 3.6vw, 52px); line-height: 1; }
    .shm-how-lead { font-size: 16px; line-height: 24px; }
    /* At night the town is the card colour, so the words sit on the raised surface, like the map's own cards. */
    html.dark .shm-how-hero-card { background: var(--how-grey); }
    html.dark .shm-how-hero-card .shm-how-secondary { background: #343944; }
    html.dark .shm-how-hero-card .shm-how-secondary:hover { background: #3d424d; }
}

@media (min-width: 1100px) {
    .shm-how-lead { font-size: 18px; line-height: 26px; }
}

/* The header's links to the other pages. The jumps down this page don't fit beside them in the 1120 px column
   (the old page showed them only from 1280 px), so the header leaves them out; the page reads top to bottom. */
@media (min-width: 1000px) {
    .shm-how-nav-links { display: flex; }
    .shm-how-nav-links a:is([href='#how'], [href='#uses'], [href='#promises'], [href='#privacy']) { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .shm-how-use { animation: shm-how-swap 0.3s ease both; }
}

@keyframes shm-how-swap {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .shm-how *, .shm-how *::before, .shm-how *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .shm-how .shm-intent-progress-track > span { width: 100%; }
}

/* How matching works. Builds on the landing page's tokens (.shm-open): blue is a person or points added,
   pink is the other person, yellow is overlap. Here yellow also marks every number that comes from the live model. */
.shm-hmw {
    --hmw-hatch: repeating-linear-gradient(135deg, var(--shm-muted) 0 2px, #d6d4ec 2px 5px);
    --hmw-radius: 26px;
}
.shm-hmw :is(input, select):focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.shm-hmw :is(h3, h4) { margin: 0; }
.shm-hmw fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.shm-hmw-muted { color: var(--shm-muted); font-size: .875rem; line-height: 1.55; }
.shm-hmw > main > section { scroll-margin-top: 16px; }

/* Live numbers: a marker stroke in the overlap yellow. */
.shm-hmw-live-value { padding: 0 .14em; background: linear-gradient(transparent 56%, var(--shm-overlap) 56%, var(--shm-overlap) 92%, transparent 92%); font-weight: 700; font-variant-numeric: tabular-nums; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Loading and error notices for anything that depends on the live model. */
.shm-hmw-notice { display: flex; align-items: center; gap: 12px; margin-top: 36px !important; padding: 20px 22px; border-radius: 20px; background: var(--shm-mist); font-size: .9375rem; line-height: 1.55; }
.shm-hmw-notice.is-error { align-items: flex-start; flex-wrap: wrap; }
.shm-hmw-notice.is-error > svg { margin-top: 2px; color: var(--shm-other-line); }
.shm-hmw-notice.is-error p { flex: 1 1 260px; max-width: 62ch; }
.shm-hmw-retry { padding: 8px 16px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.shm-hmw-retry:hover { background: var(--shm-ink); border-color: var(--shm-ink); color: #fff; }
.shm-hmw-dots { display: inline-flex; gap: 5px; }
.shm-hmw-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--shm-you); opacity: .3; animation: shm-hmw-pulse 1.2s ease-in-out infinite; }
.shm-hmw-dots i:nth-child(2) { animation-delay: .2s; }
.shm-hmw-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes shm-hmw-pulse { 50% { opacity: 1; } }

/* Hero */
.shm-hmw-hero { padding-block: 48px 104px; }
.shm-hmw-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: end; gap: 40px; }
.shm-hmw-hero-venn { margin: 0; padding-bottom: 10px; }
.shm-hmw-hero-venn .shm-open-venn { width: 100%; }
.shm-hmw-hero-venn .shm-open-venn-key { margin-top: 16px; }
.shm-hmw .shm-hmw-hero h1 { max-width: 12.5ch; font-size: clamp(3.4rem, 9vw, 8.5rem); font-stretch: 75%; line-height: .86; letter-spacing: -.01em; }
.shm-hmw-hero-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; margin-top: 44px; }
.shm-hmw-hero-lead { max-width: 30ch; font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 500; line-height: 1.4; }
.shm-hmw-hero-side > p:first-child { max-width: 46ch; color: var(--shm-muted); font-size: 1rem; line-height: 1.65; }
.shm-hmw-hero-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }
.shm-hmw-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-top: 20px !important; padding: 9px 16px; border-radius: 999px; background: var(--shm-mist); font-size: .875rem; line-height: 1.4; }
.shm-hmw-status > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--shm-muted); }
.shm-hmw-status.is-ready > i { background: var(--shm-you); box-shadow: 0 0 0 4px #2b44ff2e; }
.shm-hmw-status.is-error > i { background: var(--shm-other-line); }
.shm-hmw-status b { font-weight: 700; }
.shm-hmw-status button { padding: 0; border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Research */
.shm-hmw-research { padding-block: 104px; background: var(--shm-lilac); }
.shm-hmw-research-group { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 20px 40px; margin-top: 56px; }
.shm-hmw-research-group > h3 { padding-top: 6px; font-family: var(--shm-display); font-size: clamp(1.6rem, 2.4vw, 2.125rem); font-weight: 800; font-stretch: 80%; line-height: 1; }
.shm-hmw-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.shm-hmw-findings.is-3 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.shm-hmw-findings.is-1 { grid-template-columns: minmax(0, 1fr); }
.shm-hmw-findings > li { display: flex; flex-direction: column; padding: 24px; border-radius: 22px; background: #fff; }
.shm-hmw-findings strong { font-family: var(--shm-display); font-size: 1.375rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-hmw-findings p { max-width: 62ch; margin-top: 10px; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-hmw-cite { display: inline-flex; align-items: flex-end; min-height: 44px; align-self: flex-start; margin-top: auto; padding-top: 16px; padding-bottom: 8px; margin-bottom: -8px; color: var(--shm-ink); font-size: .8125rem; font-weight: 600; text-decoration: underline !important; text-decoration-color: var(--shm-line) !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }
.shm-hmw-cite:hover { text-decoration-color: var(--shm-ink) !important; }
.shm-hmw-hours { display: grid; gap: 10px; margin-top: 18px !important; }
.shm-hmw-hours li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 10.5rem; align-items: center; gap: 14px; font-size: .875rem; }
.shm-hmw-hours-label { font-weight: 600; }
.shm-hmw-hours-bar { height: 10px; border-radius: 5px; background: var(--shm-mist); }
.shm-hmw-hours-bar i { display: block; height: 100%; border-radius: 5px; background: var(--shm-you); }
.shm-hmw-hours-value { color: var(--shm-muted); font-variant-numeric: tabular-nums; }
.shm-hmw-conclusion { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr); gap: 32px 56px; margin-top: 64px; padding: 44px; border-radius: 30px; background: var(--shm-ink); color: #fff; }
.shm-hmw-conclusion h3 { font-family: var(--shm-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; font-stretch: 78%; line-height: .95; }
.shm-hmw-conclusion > div > p { max-width: 38ch; margin-top: 16px; color: #ffffffc7; font-size: 1rem; line-height: 1.6; }
.shm-hmw-conclusion ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.shm-hmw-conclusion li { padding-top: 18px; border-top: 2px solid #ffffff2e; }
.shm-hmw-conclusion li svg { color: var(--shm-overlap); }
.shm-hmw-conclusion li strong { display: block; margin-top: 12px; font-family: var(--shm-display); font-size: 1.375rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-hmw-conclusion li p { margin-top: 8px; color: #ffffffc7; font-size: .9375rem; line-height: 1.55; }

/* Score scale, shared by the formula and the explainer */
.shm-hmw-scale { display: block; margin-top: 18px; }
.shm-hmw-scale-track { position: relative; display: block; height: 14px; border-radius: 7px; background: var(--shm-lilac); }
.shm-hmw-scale-fill { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: var(--shm-you); transition: width .25s ease; }
.shm-hmw-scale-track > i { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--shm-ink); }
.shm-hmw-scale-track > i.is-strong { background: repeating-linear-gradient(var(--shm-ink) 0 4px, transparent 4px 7px); }
.shm-hmw-scale-labels { position: relative; display: block; height: 44px; margin-top: 8px; font-size: .75rem; font-weight: 600; color: var(--shm-muted); font-variant-numeric: tabular-nums; }
.shm-hmw-scale-labels > span { position: absolute; top: 0; white-space: nowrap; }
.shm-hmw-scale-labels > span:last-child { transform: translateX(-100%); }
.shm-hmw-scale-labels > span.is-threshold, .shm-hmw-scale-labels > span.is-strong { padding-left: 6px; border-left: 1.5px solid var(--shm-ink); color: var(--shm-ink); }
.shm-hmw-scale-labels > span.is-strong { top: 22px; border-left-style: dashed; }

/* What we look at */
.shm-hmw-inputs { padding-block: 112px 40px; }
.shm-hmw-formula { margin-top: 44px; padding: 32px; border-radius: 28px; background: var(--shm-mist); }
.shm-hmw-formula h3 { font-family: var(--shm-display); font-size: 1.625rem; font-weight: 800; font-stretch: 82%; line-height: 1.05; }
.shm-hmw-formula ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px !important; }
.shm-hmw-formula li { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: #fff; font-size: .9375rem; line-height: 1.5; }
.shm-hmw-formula li > b { font-family: var(--shm-display); font-size: 2rem; font-weight: 800; font-stretch: 80%; line-height: 1; color: var(--shm-you); }
.shm-hmw-formula li > b.is-op { font-family: 'Inter', sans-serif; font-weight: 700; }
.shm-hmw-formula .shm-hmw-scale { margin-top: 26px; }
.shm-hmw-formula .shm-hmw-scale-track { background: #fff; }
.shm-hmw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 40px; color: var(--shm-muted); font-size: .875rem; line-height: 1.5; }
.shm-hmw-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.shm-hmw-legend i { width: 22px; height: 10px; border-radius: 5px; }
.shm-hmw-legend i.is-pos { background: var(--shm-you); }
.shm-hmw-legend i.is-neg { background: var(--hmw-hatch); }
.shm-hmw-group { margin-top: 44px; }
.shm-hmw-group > h3 { font-family: var(--shm-display); font-size: 1.75rem; font-weight: 800; font-stretch: 82%; line-height: 1.05; }
.shm-hmw-group > ul { margin-top: 12px !important; }
.shm-hmw-group > ul > li { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 7.5rem; align-items: center; gap: 12px 28px; padding-block: 18px; border-top: 1.5px solid var(--shm-line); }
.shm-hmw-component-text strong { font-size: 1rem; font-weight: 700; }
.shm-hmw-component-text p { max-width: 58ch; margin-top: 4px; color: var(--shm-muted); font-size: .875rem; line-height: 1.55; }
.shm-hmw-tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--shm-lilac); font-size: .75rem; font-weight: 600; vertical-align: 2px; }
.shm-hmw-tag.is-ai { background: var(--shm-ink); color: #fff; }
.shm-hmw-tag.is-off { background: transparent; border: 1px dashed currentColor; opacity: .7; }
.shm-hmw-range-text { justify-self: end; font-size: .9375rem; white-space: nowrap; }

/* Range and points bars: one shared axis, zero marked in ink. */
.shm-hmw-bar { position: relative; display: block; height: 12px; border-radius: 6px; background: var(--shm-mist); }
.shm-hmw-bar > span { position: absolute; top: 0; bottom: 0; }
.shm-hmw-bar-pos { border-radius: 0 6px 6px 0; background: var(--shm-you); }
.shm-hmw-bar-neg { border-radius: 6px 0 0 6px; background: var(--hmw-hatch); }
.shm-hmw-bar-range { border-radius: 6px; background: var(--shm-lilac); box-shadow: inset 0 0 0 1px var(--shm-line); }
.shm-hmw-bar-zero { top: -4px !important; bottom: -4px !important; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--shm-ink); }

/* What we never look at */
.shm-hmw-never { margin-top: 72px; padding-block: 104px; background: var(--shm-ink); color: #fff; --ring: var(--shm-overlap); }
.shm-hmw-never .shm-open-heading > p { color: #ffffffc7; }
.shm-hmw-never .shm-hmw-notice { background: #ffffff14; }
.shm-hmw-never .shm-hmw-notice.is-error > svg { color: var(--shm-overlap); }
.shm-hmw-never .shm-hmw-retry:hover { background: #fff; border-color: #fff; color: var(--shm-ink); }
.shm-hmw-never .shm-hmw-dots i { background: var(--shm-overlap); }
.shm-hmw-never-list { columns: 2; column-gap: 56px; margin-top: 48px !important; }
.shm-hmw-never-list li { break-inside: avoid; padding-block: 10px; border-bottom: 1.5px solid #ffffff1f; font-family: var(--shm-display); font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; font-stretch: 80%; line-height: 1.1; }
.shm-hmw-never-list span { text-decoration: line-through; text-decoration-color: var(--shm-overlap); text-decoration-thickness: .1em; }
.shm-hmw-never-photos { display: flex; align-items: flex-start; gap: 14px; max-width: 760px; margin-top: 40px !important; padding: 20px 22px; border-radius: 20px; background: #ffffff14; font-size: 1rem; line-height: 1.6; }
.shm-hmw-never-photos svg { margin-top: 2px; color: var(--shm-overlap); }

/* How an introduction is made: a real sequence, so it's numbered. */
.shm-hmw-steps { padding-block: 112px 40px; }
.shm-hmw-step-list { margin-top: 48px !important; counter-reset: hmw-step; }
.shm-hmw-step-list > li { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 20px; padding-bottom: 40px; counter-increment: hmw-step; }
.shm-hmw-step-list > li::before { content: counter(hmw-step); grid-row: 1 / span 4; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--shm-you); color: #fff; font-family: var(--shm-display); font-size: 1.75rem; font-weight: 800; font-stretch: 80%; line-height: 1; }
.shm-hmw-step-list > li:not(:last-child)::after { content: ''; position: absolute; left: 27px; top: 64px; bottom: 8px; width: 2px; background: var(--shm-line); }
.shm-hmw-step-list h3 { padding-top: 12px; font-family: var(--shm-display); font-size: 1.75rem; font-weight: 800; font-stretch: 82%; line-height: 1.05; }
.shm-hmw-step-list li > p { max-width: 64ch; margin-top: 10px; color: var(--shm-muted); font-size: 1rem; line-height: 1.65; }
.shm-hmw-step-list li > p.shm-hmw-step-fact { color: var(--shm-ink); font-weight: 500; }
.shm-hmw-step-list .shm-hmw-notice { position: relative; z-index: 1; grid-column: 2; }

.shm-hmw-radius { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: 28px 48px; margin-top: 28px; padding: 28px; border-radius: 28px; background: var(--shm-mist); }
.shm-hmw-radius-svg { display: block; width: 100%; height: auto; }
.shm-hmw-radius-svg .ring { stroke: #fff; stroke-width: 3; }
.shm-hmw-radius-svg .ring.is-extended { fill: var(--shm-lilac); }
.shm-hmw-radius-svg .ring.is-core { fill: var(--shm-overlap); }
.shm-hmw-radius-svg .ring.is-nearby { fill: var(--shm-block); }
.shm-hmw-radius-svg .ring.is-immediate { fill: url(#hmw-hatch); }
.shm-hmw-radius-svg .hatch-bg { fill: var(--shm-block); }
.shm-hmw-radius-svg .hatch-line { stroke: #8d8ab2; stroke-width: 2.5; }
.shm-hmw-radius-svg .them { fill: var(--shm-other); stroke: #fff; stroke-width: 2.5; }
.shm-hmw-radius-svg .you { fill: var(--shm-you); stroke: #fff; stroke-width: 3; }
.shm-hmw-radius-svg .tick rect { fill: #fff; stroke: var(--shm-line); stroke-width: 1; }
.shm-hmw-radius-svg .tick text { fill: var(--shm-ink); font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700; }
.shm-hmw-radius-key ul { display: grid; gap: 2px; }
.shm-hmw-radius-key li { display: grid; grid-template-columns: 20px minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: 2px 12px; padding-block: 10px; border-bottom: 1.5px solid var(--shm-line); font-size: .9375rem; line-height: 1.45; }
.shm-hmw-radius-key li > i { align-self: center; width: 16px; height: 16px; border-radius: 50%; }
.shm-hmw-radius-key li > .shm-hmw-live-value { justify-self: start; }
.shm-hmw-radius-key li > span:last-child { grid-column: 2 / -1; color: var(--shm-muted); font-size: .875rem; }
.shm-hmw-radius-key li.is-immediate > i { background: var(--hmw-hatch); }
.shm-hmw-radius-key li.is-nearby > i { background: var(--shm-block); box-shadow: inset 0 0 0 1px #c9c6e4; }
.shm-hmw-radius-key li.is-core > i { background: var(--shm-overlap); }
.shm-hmw-radius-key li.is-extended > i { background: var(--shm-lilac); box-shadow: inset 0 0 0 1px #c9c6e4; }
.shm-hmw-radius-key li.is-beyond > i { background: #fff; box-shadow: inset 0 0 0 1.5px var(--shm-line); }
.shm-hmw-radius-key li.is-circle > i { background: none; border: 2px dashed var(--shm-other-line); }
.shm-hmw-radius-key li.is-circle { border-bottom: 0; }
.shm-hmw-radius-any { color: var(--shm-muted); font-size: .875rem; }
.shm-hmw-radius-key > p { margin-top: 14px; font-size: .9375rem; line-height: 1.6; }

/* Try it */
.shm-hmw-try { margin-top: 72px; padding-block: 104px; background: var(--shm-you); color: #fff; --ring: var(--shm-overlap); }
.shm-hmw-try .shm-open-heading > p { color: #ffffffe6; }
.shm-hmw-try > .shm-open-shell > .shm-hmw-notice { background: #ffffff1f; }
.shm-hmw-try > .shm-open-shell > .shm-hmw-notice .shm-hmw-dots i { background: #fff; }
.shm-hmw-try > .shm-open-shell > .shm-hmw-notice.is-error > svg { color: var(--shm-overlap); }
.shm-hmw-try .shm-hmw-retry:hover { background: #fff; border-color: #fff; color: var(--shm-ink); }
.shm-hmw-explainer { margin-top: 40px; }
.shm-hmw-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.shm-hmw-presets > span { margin-right: 6px; font-size: .875rem; font-weight: 600; }
.shm-hmw-presets button { min-height: 44px; padding: 9px 16px; border: 0; border-radius: 999px; background: #ffffff26; color: #fff; font-size: .875rem; font-weight: 600; line-height: 1.35; text-align: left; transition: background .15s; }
.shm-hmw-presets button:hover { background: #ffffff40; }
.shm-hmw-presets button[aria-pressed='true'] { background: var(--shm-overlap); color: var(--shm-ink); }
.shm-hmw-explainer-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; gap: 18px; color: var(--shm-ink); --ring: var(--shm-you); }
.shm-hmw-builders, .shm-hmw-result { min-width: 0; padding: 24px; border-radius: var(--hmw-radius); background: #fff; }
.shm-hmw-pair-controls { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 18px 28px; padding-bottom: 22px; border-bottom: 1.5px dashed var(--shm-line); }
.shm-hmw-distance-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.shm-hmw-distance-top label { font-size: .875rem; font-weight: 700; }
.shm-hmw-distance-top output { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.shm-hmw-distance-top output span { font-family: 'Inter', sans-serif; font-size: .8125rem; font-weight: 600; color: var(--shm-muted); }
.shm-hmw-distance-track { position: relative; height: 30px; margin-top: 6px; }
.shm-hmw-distance-bands { position: absolute; left: 0; right: 0; top: 18px; height: 8px; border-radius: 4px; background: var(--shm-mist); overflow: hidden; }
.shm-hmw-distance-bands i { position: absolute; top: 0; bottom: 0; }
.shm-hmw-distance-bands i.is-immediate { background: var(--hmw-hatch); }
.shm-hmw-distance-bands i.is-nearby { background: var(--shm-block); }
.shm-hmw-distance-bands i.is-core { background: var(--shm-overlap); }
.shm-hmw-distance-bands i.is-extended { background: var(--shm-lilac); }
.shm-hmw-distance-track input { position: relative; width: 100%; height: 44px; margin: 0; background: transparent; appearance: none; cursor: pointer; }
.shm-hmw-distance-track input::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.shm-hmw-distance-track input::-moz-range-track { height: 44px; background: transparent; }
.shm-hmw-distance-track input::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: 10px; border: 3px solid #fff; border-radius: 50%; background: var(--shm-ink); box-shadow: 0 2px 8px -2px #17153b99; appearance: none; }
.shm-hmw-distance-track input::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--shm-ink); box-shadow: 0 2px 8px -2px #17153b99; }
.shm-hmw-distance-track input:focus-visible { outline-offset: 2px; border-radius: 8px; }
.shm-hmw-distance-ticks { position: relative; height: 18px; color: var(--shm-muted); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.shm-hmw-distance-ticks span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.shm-hmw-distance-ticks span.is-end { transform: translateX(-100%); }
.shm-hmw-switch { position: relative; display: flex; align-items: flex-start; gap: 12px; padding-top: 4px; cursor: pointer; }
.shm-hmw-switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.shm-hmw-switch-ui { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--shm-block); transition: background .15s; }
.shm-hmw-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #17153b55; transition: transform .15s; }
.shm-hmw-switch input:checked + .shm-hmw-switch-ui { background: var(--shm-you); }
.shm-hmw-switch input:checked + .shm-hmw-switch-ui::after { transform: translateX(18px); }
.shm-hmw-switch input:focus-visible + .shm-hmw-switch-ui { outline: 3px solid var(--ring); outline-offset: 3px; }
.shm-hmw-switch b { display: block; font-size: .875rem; font-weight: 700; line-height: 1.4; }
.shm-hmw-switch small { display: block; margin-top: 2px; color: var(--shm-muted); font-size: .8125rem; line-height: 1.45; }
.shm-hmw-person-switch { display: none; }
.shm-hmw-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.shm-hmw-person > h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-hmw-person > h3 > i, .shm-hmw-person-switch i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--shm-you); }
.shm-hmw-person.is-b > h3 > i, .shm-hmw-person-switch i.is-b { background: var(--shm-other); }
.shm-hmw-chips { margin-bottom: 16px !important; }
.shm-hmw-chips legend { display: flex; justify-content: space-between; gap: 8px; width: 100%; margin-bottom: 8px; padding: 0; font-size: .8125rem; font-weight: 700; }
.shm-hmw-chips-count { color: var(--shm-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.shm-hmw-chips-list { display: flex; flex-wrap: wrap; gap: 0; margin: -5px; }
/* A 44px tap target: the chip you see is 34px, inside a transparent 5px edge (background-clip). */
.shm-hmw-chip { min-height: 44px; padding: 6px 12px; border: 5px solid transparent; border-radius: 999px; background: var(--shm-mist); background-clip: padding-box; color: var(--shm-ink); font-size: .8125rem; font-weight: 600; line-height: 1.35; text-align: left; box-shadow: inset 0 0 0 1.5px var(--shm-line); transition: background .12s, box-shadow .12s; }
.shm-hmw-chip:hover { box-shadow: inset 0 0 0 1.5px var(--shm-ink); }
.shm-hmw-person.is-a .shm-hmw-chip[aria-pressed='true'] { background: var(--shm-you); color: #fff; box-shadow: none; }
.shm-hmw-person.is-b .shm-hmw-chip[aria-pressed='true'] { background: var(--shm-other); color: var(--shm-ink); box-shadow: none; }
.shm-hmw-chip[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
.shm-hmw-chip[aria-disabled='true']:hover { box-shadow: inset 0 0 0 1.5px var(--shm-line); }
.shm-hmw-chips-hint { margin-top: 8px !important; color: var(--shm-muted); font-size: .8125rem; line-height: 1.45; }
.shm-hmw-sticky { display: none; }

.shm-hmw-result { position: sticky; top: 16px; }
.shm-hmw-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shm-hmw-result-head h3 { font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-hmw-result-state { color: var(--shm-muted); font-size: .8125rem; font-weight: 600; }
.shm-hmw-result > :not(.shm-hmw-result-head):not(.shm-hmw-error) { transition: opacity .2s; }
.shm-hmw-result.is-pending > :not(.shm-hmw-result-head):not(.shm-hmw-error) { opacity: .55; }
.shm-hmw-result > p.shm-hmw-muted { margin-top: 12px; }
.shm-hmw-result h4 { margin-top: 24px; padding-top: 16px; border-top: 1.5px dashed var(--shm-line); font-size: .8125rem; font-weight: 700; }
.shm-hmw-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; }
.shm-hmw-score-number { font-family: var(--shm-display); font-size: 4.5rem; font-weight: 800; font-stretch: 78%; line-height: .9; font-variant-numeric: tabular-nums; }
.shm-hmw-score-of { color: var(--shm-muted); font-size: .875rem; font-weight: 600; }
.shm-hmw-verdict { flex-basis: 100%; align-self: flex-start; width: fit-content; max-width: 100%; margin-top: 10px; padding: 7px 14px; border-radius: 999px; background: var(--shm-lilac); font-size: .875rem; font-weight: 700; line-height: 1.35; }
.shm-hmw-score.is-introduced .shm-hmw-verdict, .shm-hmw-score.is-strong .shm-hmw-verdict { background: var(--shm-overlap); }
.shm-hmw-score.is-ineligible .shm-hmw-verdict { background: #ffe1ee; }
.shm-hmw-reason { margin-top: 10px !important; font-size: .9375rem; line-height: 1.55; }
.shm-hmw-formula-line { margin-top: 0 !important; }
.shm-hmw-result .shm-hmw-muted + .shm-hmw-muted { margin-top: 6px; }
.shm-hmw-breakdown { display: grid; gap: 10px; margin-top: 10px !important; }
.shm-hmw-breakdown li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; font-size: .875rem; line-height: 1.35; }
.shm-hmw-breakdown .shm-hmw-bar { grid-column: 1 / -1; height: 10px; }
.shm-hmw-breakdown-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.shm-hmw-shared { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.shm-hmw-shared li { padding: 5px 11px; border-radius: 999px; background: var(--shm-overlap); font-size: .8125rem; font-weight: 600; }
.shm-hmw-explanation { margin-top: 10px !important; padding: 14px 16px; border-radius: 16px 16px 16px 5px; background: var(--shm-mist); font-size: .9375rem; line-height: 1.55; }
.shm-hmw-notes { display: grid; gap: 6px; margin-top: 16px !important; }
.shm-hmw-notes li { padding-left: 14px; border-left: 3px solid var(--shm-line); color: var(--shm-muted); font-size: .8125rem; line-height: 1.5; }
.shm-hmw-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #ffe1ee; font-size: .875rem; line-height: 1.5; }
.shm-hmw-error p { flex: 1 1 200px; }

/* Where we use AI */
.shm-hmw-ai { padding-block: 112px 40px; }
.shm-hmw-ai-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 40px !important; }
.shm-hmw-ai-list li { padding-block: 22px; border-top: 1.5px solid var(--shm-line); }
.shm-hmw-ai-mark { display: inline-flex; padding: 4px 11px; border-radius: 999px; background: var(--shm-mist); box-shadow: inset 0 0 0 1.5px var(--shm-line); font-size: .8125rem; font-weight: 700; }
.shm-hmw-ai-list li.is-scoring .shm-hmw-ai-mark { background: var(--shm-ink); color: #fff; box-shadow: none; }
.shm-hmw-ai-list h3 { margin-top: 12px; font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-hmw-ai-list p { max-width: 58ch; margin-top: 8px; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-hmw-ai-list p.shm-hmw-ai-max { color: var(--shm-ink); font-weight: 500; }

/* Fairness promises */
.shm-hmw-fairness { margin-top: 72px; padding-block: 104px; background: var(--shm-lilac); }
.shm-hmw-promises { margin-top: 40px !important; }
.shm-hmw-promises li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 48px; padding-block: 26px; border-top: 2px solid #17153b1a; }
.shm-hmw-promises h3 { grid-row: span 2; font-family: var(--shm-display); font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 800; font-stretch: 80%; line-height: 1; }
.shm-hmw-promises p { max-width: 52ch; font-size: 1rem; line-height: 1.6; }
.shm-hmw-promise-state { display: inline-flex; align-items: center; gap: 7px; align-self: start; width: fit-content; color: var(--shm-muted); font-size: .8125rem; font-weight: 600; }
.shm-hmw-promise-state.is-holds { color: var(--shm-you-deep); }
.shm-hmw-promise-state.is-broken { color: #b3155c; }
.shm-hmw-promises li.is-broken h3 { text-decoration: line-through; text-decoration-color: var(--shm-other-line); }

/* How we'll know it works */
.shm-hmw-outcomes { padding-block: 112px 40px; }
.shm-hmw-outcomes-meta { max-width: 70ch; margin-top: 28px !important; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-hmw-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 28px !important; }
.shm-hmw-metrics li { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background: var(--shm-mist); }
.shm-hmw-metrics h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.shm-hmw-metric-value { font-family: var(--shm-display); font-size: 3rem; font-weight: 800; font-stretch: 80%; line-height: 1; }
.shm-hmw-metric-value .shm-hmw-live-value { font-weight: 800; }
.shm-hmw-metric-wait { font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.shm-hmw-metric-sample { color: var(--shm-muted); font-size: .8125rem; }
.shm-hmw-meter { display: block; height: 8px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--shm-line); overflow: hidden; }
.shm-hmw-meter i { display: block; height: 100%; border-radius: 4px; background: var(--shm-you); }
.shm-hmw-meter.is-progress i { background: var(--hmw-hatch); }
.shm-hmw-metrics p { margin-top: auto; padding-top: 6px; color: var(--shm-muted); font-size: .875rem; line-height: 1.55; }

/* Changelog */
.shm-hmw-changelog { padding-block: 112px 40px; }
.shm-hmw-versions { margin-top: 40px !important; border-left: 2px solid var(--shm-line); }
.shm-hmw-versions > li { position: relative; padding: 0 0 32px 28px; }
.shm-hmw-versions > li::before { content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--shm-you); box-shadow: 0 0 0 4px #fff; }
.shm-hmw-version-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.shm-hmw-version-head h3 { font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-hmw-version-head time { color: var(--shm-muted); font-size: .875rem; }
.shm-hmw-version-now { padding: 3px 10px; border-radius: 999px; background: var(--shm-overlap); font-size: .75rem; font-weight: 700; }
.shm-hmw-versions ul { display: grid; gap: 6px; max-width: 72ch; margin-top: 12px !important; }
.shm-hmw-versions ul li { position: relative; padding-left: 16px; color: var(--shm-muted); font-size: .9375rem; line-height: 1.55; }
.shm-hmw-versions ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--shm-line); }

/* Closing and sources */
.shm-hmw .shm-hmw-closing { margin-top: 72px; }
.shm-hmw-sources { padding-block: 72px 56px; }
.shm-hmw .shm-hmw-sources h2 { font-size: 2rem; }
.shm-hmw-sources ol { display: grid; gap: 10px; max-width: 88ch; margin-top: 20px !important; padding-left: 1.4em !important; list-style: decimal !important; color: var(--shm-muted); font-size: .875rem; line-height: 1.6; }
.shm-hmw-sources li { padding-left: 4px; scroll-margin-top: 24px; }
.shm-hmw-sources li:target { color: var(--shm-ink); background: var(--shm-mist); outline: 2px solid var(--shm-overlap); outline-offset: 4px; border-radius: 4px; }
.shm-hmw-sources a { color: var(--shm-ink); text-decoration: underline !important; text-underline-offset: 3px; overflow-wrap: anywhere; }

@media (max-width: 1180px) {
    .shm-hmw-explainer-grid { grid-template-columns: minmax(0, 1fr); }
    .shm-hmw-result { position: static; }
    .shm-hmw-sticky { position: sticky; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 18px 10px 12px; border-radius: 999px; background: var(--shm-ink); color: #fff !important; box-shadow: 0 16px 30px -18px #17153bcc; font-size: .875rem; line-height: 1.3; --ring: var(--shm-overlap); }
    .shm-hmw-sticky b { display: grid; place-items: center; flex: none; min-width: 44px; height: 44px; padding-inline: 6px; border-radius: 22px; background: var(--shm-lilac); color: var(--shm-ink); font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; }
    .shm-hmw-sticky.is-introduced b, .shm-hmw-sticky.is-strong b { background: var(--shm-overlap); }
    .shm-hmw-sticky span { flex: 1 1 auto; font-weight: 600; }
    .shm-hmw-sticky em { flex: none; font-style: normal; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 960px) {
    .shm-hmw-research-group { grid-template-columns: minmax(0, 1fr); }
    .shm-hmw-conclusion { grid-template-columns: minmax(0, 1fr); padding: 32px; }
    .shm-hmw-formula ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shm-hmw-radius { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .shm-hmw-radius-svg { max-width: 380px; }
    .shm-hmw-radius-key { width: 100%; }
}
@media (max-width: 860px) {
    .shm-hmw-hero { padding-block: 24px 72px; }
    .shm-hmw-hero-body { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
    .shm-hmw-hero-top { grid-template-columns: minmax(0, 1fr); }
    .shm-hmw-hero-venn { display: none; }
    .shm-hmw-group > ul > li { grid-template-columns: minmax(0, 1fr) auto; }
    .shm-hmw-component-text { grid-column: 1 / -1; }
    .shm-hmw-never-list { columns: 1; }
    .shm-hmw-ai-list { grid-template-columns: minmax(0, 1fr); }
    .shm-hmw-promises li { grid-template-columns: minmax(0, 1fr); }
    .shm-hmw-promises h3 { grid-row: auto; }
    .shm-hmw-conclusion ul { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .shm-hmw-pair-controls { grid-template-columns: minmax(0, 1fr); }
    .shm-hmw-person-switch { display: flex; gap: 6px; margin-top: 18px; padding: 4px; border-radius: 999px; background: var(--shm-mist); }
    .shm-hmw-person-switch button { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--shm-ink); font-size: .9375rem; font-weight: 700; }
    .shm-hmw-person-switch button[aria-pressed='true'] { background: #fff; box-shadow: 0 2px 8px -3px #17153b66; }
    .shm-hmw-people { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
    .shm-hmw-person.is-hidden-small { display: none; }
    .shm-hmw-person > h3 { display: none; }
}
@media (max-width: 600px) {
    .shm-hmw .shm-hmw-hero h1 { font-size: clamp(3rem, 15vw, 4.2rem); }
    .shm-hmw-research, .shm-hmw-never, .shm-hmw-try, .shm-hmw-fairness { margin-top: 56px; padding-block: 64px; }
    .shm-hmw-inputs, .shm-hmw-steps, .shm-hmw-ai, .shm-hmw-outcomes, .shm-hmw-changelog { padding-block: 72px 24px; }
    .shm-hmw-research { margin-top: 0; }
    .shm-hmw-research-group { margin-top: 40px; }
    .shm-hmw-findings { grid-template-columns: minmax(0, 1fr); }
    .shm-hmw-findings > li { padding: 20px; }
    .shm-hmw-hours li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
    .shm-hmw-hours-bar { grid-column: 1 / -1; grid-row: 2; }
    .shm-hmw-conclusion { margin-top: 48px; padding: 26px 20px; border-radius: 24px; }
    .shm-hmw-formula { padding: 20px 16px; border-radius: 22px; }
    .shm-hmw-formula ol { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .shm-hmw-formula li { flex-direction: row; align-items: center; gap: 14px; padding: 14px; }
    .shm-hmw-formula li > b { flex: none; min-width: 2.6rem; font-size: 1.6rem; }
    .shm-hmw-step-list > li { grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; }
    .shm-hmw-step-list > li::before { width: 40px; height: 40px; font-size: 1.35rem; }
    .shm-hmw-step-list > li:not(:last-child)::after { left: 19px; top: 48px; }
    .shm-hmw-step-list h3 { padding-top: 6px; font-size: 1.5rem; }
    .shm-hmw-step-list > li.is-wide > .shm-hmw-radius, .shm-hmw-step-list > li.is-wide > .shm-hmw-notice { grid-column: 1 / -1; }
    .shm-hmw-radius { padding: 18px 14px; border-radius: 22px; }
    .shm-hmw-presets { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
    .shm-hmw-presets > span { display: none; }
    .shm-hmw-presets button { flex: none; white-space: nowrap; }
    .shm-hmw-builders, .shm-hmw-result { padding: 18px 14px; border-radius: 22px; }
    .shm-hmw-score-number { font-size: 3.75rem; }
    .shm-hmw-never-photos { padding: 16px; }
    .shm-hmw-metric-value { font-size: 2.5rem; }
}

/* Evidence on introductions (newcomers-and-evidence.md §2). */
.shm-hmw-evidence { padding-block: 112px 40px; }
.shm-hmw-evidence-rank { max-width: 760px; margin-top: 40px !important; padding: 22px 24px; border-radius: 20px; background: var(--shm-mist); box-shadow: inset 0 0 0 1.5px var(--shm-line); }
.shm-hmw-evidence-rank h3 { font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-hmw-evidence-rank p { max-width: 64ch; margin-top: 8px; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-hmw-evidence-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 40px !important; }
.shm-hmw-evidence-list { padding-top: 22px; border-top: 1.5px solid var(--shm-line); }
.shm-hmw-evidence-list h3 { font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-hmw-evidence-list ul { display: grid; gap: 12px; margin-top: 14px !important; }
.shm-hmw-evidence-list li { color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-hmw-evidence-list.is-never_shown li { text-decoration: line-through; text-decoration-color: var(--shm-overlap); text-decoration-thickness: .12em; color: var(--shm-ink); }

@media (max-width: 860px) {
    .shm-hmw-evidence-lists { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* Would we have met? Builds on the landing page's tokens (.shm-open): blue and pink are people,
   yellow is overlap, and here also the pairs that would have been introduced. */
.shm-wwm { --wwm-radius: 28px; --wwm-promising: #ffe39a; --wwm-yes: #157a52; }
.shm-wwm :is(input, select):focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.shm-wwm :is(h2, h3, h4) { margin: 0; }
.shm-wwm fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.shm-wwm-main { width: min(860px, calc(100% - var(--open-gutter))); margin-inline: auto; padding-bottom: 72px; outline: none; }
.shm-wwm-main > * + * { margin-top: 20px; }
.shm-wwm-muted { color: var(--shm-muted); font-size: .875rem; line-height: 1.55; }
.shm-wwm-eyebrow { color: var(--shm-muted); font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.shm-wwm h1:focus, .shm-wwm h2:focus { outline: none; }
/* Headings take focus only so screen readers follow a new screen; the global focus ring is for controls. */
.shm-wwm :is(h1, h2)[tabindex="-1"]:focus-visible { outline: none !important; }
.shm-wwm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.shm-wwm .shm-open-button { gap: 8px; }
.shm-wwm .shm-open-button[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
.shm-wwm-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 18px; border: 0; border-radius: 999px; background: #fff; color: var(--shm-ink) !important; font-size: .9375rem; font-weight: 600; line-height: 1.3; box-shadow: inset 0 0 0 1.5px var(--shm-line); transition: box-shadow .15s; }
.shm-wwm-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--shm-ink); }
.shm-wwm-ghost { min-height: 48px; padding: 11px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--shm-ink); font-size: .9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.shm-wwm-inline { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Hero */
.shm-wwm-hero { padding-block: 32px 12px; }
.shm-wwm-hero h1 { max-width: 11ch; margin-top: 10px; font-size: clamp(3.2rem, 10vw, 6.5rem); font-stretch: 75%; line-height: .88; letter-spacing: -.01em; }
.shm-wwm-hero.is-invite h1, .shm-wwm-hero.is-ready h1 { max-width: 18ch; margin-top: 18px; font-size: clamp(2.4rem, 6.5vw, 4.25rem); line-height: .95; }
.shm-wwm-lead { max-width: 40ch; margin-top: 20px !important; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.55; }
.shm-wwm-hero > .shm-wwm-avatar { width: 64px; height: 64px; font-size: 2rem; }

/* Cards */
.shm-wwm-card { padding: 28px; border-radius: var(--wwm-radius); background: var(--shm-mist); }
.shm-wwm-card > h2 { font-family: var(--shm-display); font-size: clamp(1.75rem, 3.4vw, 2.25rem); font-weight: 800; font-stretch: 82%; line-height: 1.02; }
.shm-wwm-go { margin-top: 20px; }

/* Start: who's it for, and your name */
.shm-wwm-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shm-wwm-modes legend { margin-bottom: 12px; padding: 0; font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-wwm-mode { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 18px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--shm-line); cursor: pointer; transition: box-shadow .15s; }
.shm-wwm-mode:hover { box-shadow: inset 0 0 0 1.5px var(--shm-ink); }
.shm-wwm-mode.is-on { box-shadow: inset 0 0 0 2.5px var(--shm-you); }
.shm-wwm-mode input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.shm-wwm-mode:focus-within { outline: 3px solid var(--ring); outline-offset: 3px; }
.shm-wwm-mode input:focus-visible { outline: none; }
.shm-wwm-mode svg { margin-top: 2px; color: var(--shm-you); }
.shm-wwm-mode b { display: block; font-family: var(--shm-display); font-size: 1.375rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-wwm-mode small { display: block; margin-top: 4px; color: var(--shm-muted); font-size: .875rem; line-height: 1.45; }
.shm-wwm-name { margin-top: 22px; }
.shm-wwm-name label { display: block; font-size: .9375rem; font-weight: 700; }
.shm-wwm-name input { display: block; width: 100%; max-width: 420px; height: 52px; margin-top: 8px; padding: 0 16px; border: 1.5px solid var(--shm-line); border-radius: 14px; background: #fff; color: var(--shm-ink); font: inherit; font-size: 1.0625rem; }
.shm-wwm-name input:focus { border-color: var(--shm-you); }
.shm-wwm-name input[aria-invalid='true'] { border-color: #b3155c; }
.shm-wwm-name .shm-wwm-muted { margin-top: 6px; }
.shm-wwm-error-text { margin-top: 6px !important; color: #b3155c; font-size: .875rem; font-weight: 600; line-height: 1.45; }
.shm-wwm-mine { margin-top: 16px !important; font-size: .9375rem; line-height: 1.5; }

/* How it works */
.shm-wwm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: wwm-step; }
.shm-wwm-steps li { counter-increment: wwm-step; padding-top: 16px; border-top: 2px solid var(--shm-line); }
.shm-wwm-steps li::before { content: counter(wwm-step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--shm-you); color: #fff; font-family: var(--shm-display); font-size: 1.25rem; font-weight: 800; }
.shm-wwm-steps strong { display: block; margin-top: 12px; font-family: var(--shm-display); font-size: 1.375rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-wwm-steps p { margin-top: 6px; color: var(--shm-muted); font-size: .9375rem; line-height: 1.55; }

/* Privacy */
.shm-wwm-privacy { padding: 28px; border-radius: var(--wwm-radius); background: var(--shm-ink); color: #fff; --ring: var(--shm-overlap); }
.shm-wwm-privacy > svg { color: var(--shm-overlap); }
.shm-wwm-privacy h2 { margin-top: 12px; font-family: var(--shm-display); font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 800; font-stretch: 80%; line-height: 1; }
.shm-wwm-privacy ul { display: grid; gap: 10px; margin-top: 16px !important; }
.shm-wwm-privacy li { position: relative; padding-left: 18px; color: #ffffffd9; font-size: .9375rem; line-height: 1.55; }
.shm-wwm-privacy li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--shm-overlap); }

/* Quiz */
.shm-wwm-quiz { margin-top: 24px; }
.shm-wwm-progress { display: grid; gap: 8px; color: var(--shm-muted); font-size: .8125rem; font-weight: 700; }
.shm-wwm-progress-track { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px var(--shm-line); }
.shm-wwm-progress-track i { display: block; height: 100%; border-radius: 3px; background: var(--shm-you); transition: width .25s ease; }
.shm-wwm-quiz > h2 { margin-top: 20px; font-size: clamp(2rem, 5vw, 3rem); font-stretch: 78%; line-height: .98; }
.shm-wwm-quiz-hint { max-width: 52ch; margin-top: 10px !important; color: var(--shm-muted); font-size: .9375rem; line-height: 1.55; }
.shm-wwm-choices { margin-top: 22px !important; }
.shm-wwm-choices legend { display: flex; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 10px; padding: 0; font-size: .9375rem; font-weight: 700; }
.shm-wwm-choices-count { color: var(--shm-muted); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.shm-wwm-choices-hint { margin: -2px 0 10px !important; color: var(--shm-muted); font-size: .8125rem; line-height: 1.45; }
.shm-wwm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shm-wwm-chip { min-height: 44px; padding: 9px 16px; border: 0; border-radius: 999px; background: #fff; color: var(--shm-ink); font-size: .9375rem; font-weight: 600; line-height: 1.3; text-align: left; box-shadow: inset 0 0 0 1.5px var(--shm-line); transition: background .12s, box-shadow .12s; }
.shm-wwm-chip:hover { box-shadow: inset 0 0 0 1.5px var(--shm-ink); }
.shm-wwm-chip[aria-pressed='true'] { background: var(--shm-you); color: #fff; box-shadow: none; }
.shm-wwm-chip[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
.shm-wwm-chip[aria-disabled='true']:hover { box-shadow: inset 0 0 0 1.5px var(--shm-line); }
.shm-wwm-choices > .shm-wwm-choices-hint:last-child { margin: 8px 0 0 !important; }
.shm-wwm-quiz-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1.5px dashed var(--shm-line); }
.shm-wwm-quiz-actions .shm-open-button { min-width: 9rem; }

/* People in a check */
.shm-wwm-avatar { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; font-family: var(--shm-display); font-size: 1.375rem; font-weight: 800; line-height: 1; }
.shm-wwm-avatar.is-small { width: 30px; height: 30px; font-size: 1rem; }
.shm-wwm-avatar.is-open { background: #fff; color: var(--shm-muted); border: 1.5px dashed var(--shm-muted); }
.shm-wwm-people { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px !important; }
.shm-wwm-people li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.shm-wwm-people li.is-open { color: var(--shm-muted); }

/* Result */
.shm-wwm-result { background: var(--shm-land); }
.shm-wwm-result > .shm-wwm-eyebrow { margin-bottom: 14px !important; }
.shm-wwm-pair-people { display: flex; align-items: center; gap: 0; font-weight: 700; }
.shm-wwm-pair-people > .shm-wwm-avatar + .shm-wwm-avatar { margin-left: -10px; box-shadow: 0 0 0 3px var(--shm-land); }
.shm-wwm-pair-people > span:last-child { margin-left: 12px; font-size: 1.0625rem; }
.shm-wwm-score-label { margin-top: 18px !important; color: var(--shm-muted); font-size: .875rem; font-weight: 700; }
.shm-wwm-score-label + .shm-wwm-score { margin-top: 4px; }
.shm-wwm-chemistry { color: var(--shm-ink) !important; font-weight: 600; }
.shm-wwm-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 14px; }
.shm-wwm-score-number { font-family: var(--shm-display); font-size: clamp(5rem, 16vw, 7.5rem); font-weight: 800; font-stretch: 78%; line-height: .85; font-variant-numeric: tabular-nums; }
.shm-wwm-score-of { color: var(--shm-muted); font-size: 1rem; font-weight: 600; }
.shm-wwm-scale { position: relative; display: block; height: 14px; margin-top: 18px; border-radius: 7px; background: #fff; }
.shm-wwm-scale-fill { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: var(--shm-you); }
.shm-wwm-scale > i { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--shm-ink); }
.shm-wwm-threshold { margin-top: 8px !important; color: var(--shm-muted); font-size: .8125rem; font-weight: 600; }
.shm-wwm-verdict { margin-top: 22px !important; font-family: var(--shm-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; font-stretch: 80%; line-height: 1; }
.shm-wwm-pair.is-strong .shm-wwm-verdict, .shm-wwm-pair.is-promising .shm-wwm-verdict, .shm-wwm-pair.is-possible .shm-wwm-verdict { padding: 0 .12em; background: linear-gradient(transparent 58%, var(--shm-overlap) 58%, var(--shm-overlap) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; width: fit-content; }
.shm-wwm-comfort { max-width: 46ch; margin-top: 10px !important; font-size: 1.0625rem; line-height: 1.5; }
.shm-wwm-pair h4 { margin-top: 22px; padding-top: 16px; border-top: 1.5px dashed #17153b26; font-size: .875rem; font-weight: 700; }
.shm-wwm-shared { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px !important; }
.shm-wwm-shared li { padding: 7px 14px; border-radius: 999px; background: var(--shm-overlap); font-size: .9375rem; font-weight: 600; }
.shm-wwm-pair:not(.is-strong):not(.is-promising):not(.is-possible) .shm-wwm-shared li { background: #fff; }
.shm-wwm-pair .shm-wwm-muted { margin-top: 10px; }
.shm-wwm-explanation { margin-top: 10px !important; padding: 14px 16px; border-radius: 16px 16px 16px 5px; background: #fff; font-size: .9375rem; line-height: 1.55; }
.shm-wwm-how { display: grid; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1.5px solid #17153b1f; }
.shm-wwm-how p { max-width: 62ch; color: var(--shm-muted); font-size: .875rem; line-height: 1.55; }
.shm-wwm-how a { justify-self: start; }

/* Pair result: reasons first (word-of-mouth.md §C). The five layers of "See the overlap", yellow where the two
   share it, then the score in small type, then the bridge into the product. */
.shm-wwm-pair-result > .shm-wwm-eyebrow { margin-bottom: 14px !important; }
.shm-wwm-headline { margin-top: 16px; font-family: var(--shm-display); font-size: 2.125rem; font-weight: 800; font-stretch: 80%; line-height: 1; letter-spacing: -.01em; }
.shm-wwm-pair-result .shm-wwm-comfort { font-size: 1rem; }
.shm-wwm-layers { margin-top: 20px !important; padding: 2px 18px !important; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 #17153b0f, 0 10px 30px -18px #17153b40; }
.shm-wwm-layer { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 72px; padding: 12px 0; }
.shm-wwm-layer + .shm-wwm-layer { border-top: 1px solid var(--shm-line); }
.shm-wwm-layer-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--shm-lilac); color: var(--shm-muted); }
.shm-wwm-layer.is-shared .shm-wwm-layer-icon { background: var(--shm-overlap); color: var(--shm-ink); }
.shm-wwm-layer-text { display: grid; gap: 2px; min-width: 0; }
.shm-wwm-layer-title { color: var(--shm-muted); font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.shm-wwm-layer-value { color: var(--shm-muted); font-size: 1rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.shm-wwm-layer.is-shared .shm-wwm-layer-value { color: var(--shm-ink); font-weight: 700; }
.shm-wwm-layer-mark { display: grid; place-items: center; color: var(--wwm-yes); }
.shm-wwm-layer-tag { color: var(--shm-muted); font-size: .8125rem; font-weight: 600; }
.shm-wwm-score-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; margin-top: 10px !important; color: var(--shm-muted); font-size: .875rem; line-height: 1.4; }
.shm-wwm-score-line b { color: var(--shm-ink); font-variant-numeric: tabular-nums; }
.shm-wwm .shm-wwm-score-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--shm-you); font-weight: 700; text-decoration: none; border-radius: 6px; }
.shm-wwm .shm-wwm-score-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.shm-wwm-pair-result .shm-wwm-explanation { margin-top: 4px !important; }
.shm-wwm-bridge { margin-top: 18px; padding: 20px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--shm-line); }
.shm-wwm-bridge h2 { font-family: var(--shm-display); font-size: 1.25rem; font-weight: 800; font-stretch: 85%; line-height: 1.15; }
.shm-wwm-bridge > p { max-width: 52ch; margin-top: 6px !important; color: var(--shm-muted); font-size: .9375rem; line-height: 1.5; }
.shm-wwm-bridge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.shm-wwm-bridge-ask { flex-basis: 100%; font-size: .875rem; font-weight: 700; }
.shm-wwm-bridge .shm-open-button { min-height: 48px; }
.shm-wwm-result.is-group .shm-wwm-bridge { margin-top: 22px; }

/* Group */
.shm-wwm-group-head h1 { margin-top: 6px; font-size: clamp(2.2rem, 5.5vw, 3.75rem); font-stretch: 78%; line-height: .95; }
.shm-wwm-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 22px !important; }
.shm-wwm-highlights li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 20px; background: #fff; }
.shm-wwm-highlight-label { color: var(--shm-muted); font-size: .8125rem; font-weight: 700; }
.shm-wwm-highlights strong { font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-wwm-highlights li > span:last-child { font-size: .875rem; line-height: 1.45; }
.shm-wwm-group-grid { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: start; gap: 18px; margin-top: 18px; }
.shm-wwm-group-grid > div:last-child { min-width: 0; padding: 20px; border-radius: 22px; background: #fff; }
.shm-wwm-group-grid .shm-wwm-pair-people > .shm-wwm-avatar + .shm-wwm-avatar { box-shadow: 0 0 0 3px #fff; }
.shm-wwm-group-grid .shm-wwm-scale, .shm-wwm-group-grid .shm-wwm-explanation { background: var(--shm-mist); }
.shm-wwm-group-grid .shm-wwm-score-number { font-size: clamp(3.5rem, 10vw, 5rem); }
.shm-wwm-group-grid .shm-wwm-verdict { font-size: clamp(1.4rem, 3vw, 1.75rem); }
.shm-wwm-matrix-wrap { max-width: 100%; overflow-x: auto; padding: 4px; }
.shm-wwm-matrix { border-collapse: separate; border-spacing: 4px; }
.shm-wwm-matrix :is(th, td) { padding: 0; text-align: center; vertical-align: middle; }
.shm-wwm-matrix th { width: 40px; height: 40px; }
.shm-wwm-matrix td.is-empty { width: 40px; }
.shm-wwm-cell { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; color: var(--shm-ink); font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: transform .12s; }
.shm-wwm-cell.is-strong { background: var(--shm-overlap); }
.shm-wwm-cell.is-promising { background: var(--wwm-promising); }
.shm-wwm-cell.is-possible { background: #fff; box-shadow: inset 0 0 0 2px var(--shm-overlap); }
.shm-wwm-cell.is-not_introduced { background: #fff; color: var(--shm-muted); box-shadow: inset 0 0 0 1.5px var(--shm-line); }
.shm-wwm-cell[aria-pressed='true'] { outline: 3px solid var(--shm-ink); outline-offset: 1px; }
.shm-wwm-cell:focus-visible { outline: 3px solid var(--shm-you); outline-offset: 2px; }
.shm-wwm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: 360px; margin-top: 10px !important; padding-left: 4px; color: var(--shm-muted); font-size: .8125rem; font-weight: 600; }
.shm-wwm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.shm-wwm-legend i { width: 14px; height: 14px; border-radius: 4px; }
.shm-wwm-legend i.is-strong { background: var(--shm-overlap); }
.shm-wwm-legend i.is-promising { background: var(--wwm-promising); }
.shm-wwm-legend i.is-possible { background: #fff; box-shadow: inset 0 0 0 2px var(--shm-overlap); }
.shm-wwm-legend i.is-not_introduced { background: #fff; box-shadow: inset 0 0 0 1.5px var(--shm-line); }

/* Loading and errors */
.shm-wwm-loading h1, .shm-wwm-broken h1 { font-size: clamp(2rem, 5vw, 3rem); font-stretch: 78%; line-height: .98; }
.shm-wwm-broken > svg { color: var(--shm-other-line); }
.shm-wwm-broken h1 { margin-top: 10px; }
.shm-wwm-broken p { max-width: 50ch; margin-top: 10px !important; font-size: 1rem; line-height: 1.55; }
.shm-wwm-broken .shm-wwm-row { margin-top: 20px; }

/* Joining and sharing */
.shm-wwm-join { background: #fff; box-shadow: inset 0 0 0 1.5px var(--shm-line); }
.shm-wwm-join > .shm-wwm-muted { margin-top: 8px; max-width: 56ch; font-size: .9375rem; }
.shm-wwm-share-intro { max-width: 56ch; margin-top: 10px !important; color: var(--shm-muted); font-size: .9375rem; line-height: 1.55; }
.shm-wwm-share-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.shm-wwm-share-status { min-height: 1.5em; margin-top: 10px !important; font-size: .875rem; font-weight: 600; line-height: 1.5; }
.shm-wwm-link { display: grid; gap: 6px; margin-top: 4px; font-size: .8125rem; font-weight: 700; }
.shm-wwm-link input { width: 100%; min-width: 0; height: 44px; padding: 0 14px; border: 1.5px solid var(--shm-line); border-radius: 12px; background: #fff; color: var(--shm-muted); font: inherit; font-size: .8125rem; font-weight: 500; text-overflow: ellipsis; }
.shm-wwm-share > .shm-wwm-muted { margin-top: 10px; }

/* Closing invitation: quiet, after the result */
.shm-wwm-cta { margin-top: 44px !important; padding: 40px 32px; border-radius: var(--wwm-radius); background: var(--shm-overlap); --ring: var(--shm-ink); }
.shm-wwm-cta h2 { max-width: 16ch; font-size: clamp(2.2rem, 5vw, 3.4rem); font-stretch: 78%; line-height: .92; }
.shm-wwm-cta p { max-width: 48ch; margin-top: 14px !important; font-size: 1.0625rem; line-height: 1.55; }
.shm-wwm-cta .shm-wwm-row { margin-top: 24px; }
.shm-wwm .shm-wwm-cta .shm-open-button { background: var(--shm-ink); }
.shm-wwm .shm-wwm-cta .shm-open-button:hover { background: #2b2860; }
.shm-wwm-foot { display: grid; justify-items: center; gap: 14px; margin-top: 32px !important; padding-top: 22px; border-top: 1.5px solid var(--shm-line); color: var(--shm-muted); font-size: .9375rem; text-align: center; }
.shm-wwm-foot > button { color: var(--shm-ink); }
.shm-wwm-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.shm-wwm-foot nav a { font-weight: 600; text-decoration: underline !important; text-decoration-thickness: 1.5px !important; text-underline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
    .shm-wwm-result, .shm-wwm-quiz { animation: shm-wwm-in .35s ease both; }
    .shm-wwm-scale-fill { animation: shm-wwm-grow .7s .1s ease-out both; transform-origin: left; }
    .shm-wwm-cell:hover { transform: scale(1.06); }
    @keyframes shm-wwm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @keyframes shm-wwm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    /* The layers one at a time, 350 ms apart: the row rises in, then a shared one's circle fills with yellow and
       gets its tick. Then the score and the bridge. Without motion (or before CSS), everything is simply there. */
    .shm-wwm-layer { --wwm-at: calc(var(--wwm-row, 0) * 350ms + 200ms); animation: shm-wwm-in .4s var(--wwm-at) ease-out both; }
    .shm-wwm-layer.is-shared .shm-wwm-layer-icon { animation: shm-wwm-fill .45s calc(var(--wwm-at) + 120ms) ease-out both; }
    .shm-wwm-layer-mark { animation: shm-wwm-pop .3s calc(var(--wwm-at) + 300ms) ease-out both; }
    .shm-wwm-pair-result > .shm-wwm-score-line, .shm-wwm-pair-result > .shm-wwm-explanation, .shm-wwm-pair-result > .shm-wwm-bridge { animation: shm-wwm-in .4s 2s ease-out both; }
    @keyframes shm-wwm-fill {
        from { background: var(--shm-lilac); color: var(--shm-muted); transform: scale(.85); }
        60% { background: var(--shm-overlap); transform: scale(1.08); }
        to { background: var(--shm-overlap); color: var(--shm-ink); transform: none; }
    }
    @keyframes shm-wwm-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
}

@media (max-width: 760px) {
    .shm-wwm-group-grid { grid-template-columns: minmax(0, 1fr); }
    .shm-wwm-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .shm-wwm-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 14px; }
    .shm-wwm-steps li::before { grid-row: span 2; }
    .shm-wwm-steps strong { margin-top: 4px; }
}
@media (min-width: 761px) {
    .shm-wwm-headline { font-size: 2.75rem; }
    .shm-wwm-pair-result { max-width: 640px; }
}
@media (max-width: 600px) {
    .shm-wwm-layers { padding: 2px 14px !important; }
    .shm-wwm-layer { gap: 12px; }
    .shm-wwm-bridge { padding: 18px 16px; }
    .shm-wwm-bridge-actions > * { flex: 1 1 auto; }
    .shm-wwm-hero { padding-top: 16px; }
    .shm-wwm-modes { grid-template-columns: minmax(0, 1fr); }
    .shm-wwm-card, .shm-wwm-privacy { padding: 22px 16px; border-radius: 22px; }
    .shm-wwm-group-grid > div:last-child { padding: 16px 14px; }
    .shm-wwm-chip { padding: 8px 14px; font-size: .875rem; }
    .shm-wwm-quiz-actions .shm-open-button { flex: 1 1 auto; }
    .shm-wwm-share-actions > * { flex: 1 1 calc(50% - 10px); }
    .shm-wwm-share-actions > .shm-open-button { flex-basis: 100%; }
    .shm-wwm-matrix { border-spacing: 3px; }
    .shm-wwm-matrix th, .shm-wwm-matrix td.is-empty { width: 34px; height: 34px; }
    .shm-wwm-cell { width: 34px; height: 34px; border-radius: 9px; font-size: .875rem; }
    .shm-wwm-avatar.is-small { width: 28px; height: 28px; font-size: .9375rem; }
    .shm-wwm-cta { padding: 32px 20px; border-radius: 22px; }
}

/* A shared short result (word-of-mouth.md §C): the reasons someone chose to keep, then "Try it". */
.shm-wwm-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.shm-wwm-saved h1 {
    margin: 4px 0 16px;
}

.shm-wwm-saved-reasons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.shm-wwm-saved-reasons li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shm-wwm-saved-layer {
    color: #57557a;
    font-size: 0.75rem;
    font-weight: 700;
}

.shm-wwm-saved-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: #ffc21a;
    color: #17153b;
    font-size: 1rem;
    font-weight: 700;
}

.shm-wwm-saved .shm-wwm-saved-reasons {
    margin: 0 0 20px;
}

.shm-wwm-saved > p {
    margin: 0 0 20px;
}

.shm-wwm-saved > .shm-wwm-inline {
    display: inline-block;
    min-height: 44px;
    margin-top: 12px;
}

/* Why we're building ShouldHaveMet. Builds on the landing page's tokens (.shm-open): blue is you,
   pink is the people you meet, yellow is what you share. Numbers here are static and sourced, so
   they stay in ink; the yellow marker is kept for live numbers on /how-matching-works. */
.shm-why :is(h3, h4) { margin: 0; }
.shm-why > main > section { scroll-margin-top: 16px; }
.shm-why-plain-link { color: var(--shm-ink); font-weight: 600; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }

/* Hero */
.shm-why-hero { padding-block: 48px 104px; }
.shm-why-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 336px); align-items: end; gap: 48px; }
.shm-why .shm-why-hero h1 { max-width: 13ch; font-size: clamp(3.2rem, 7.2vw, 7rem); font-stretch: 75%; line-height: .88; letter-spacing: -.01em; }
.shm-why-art { margin: 0; padding-bottom: 8px; }
.shm-why-art svg { display: block; width: 100%; height: auto; }
.shm-why-art-panel { fill: var(--shm-mist); }
.shm-why-art-link { stroke: var(--shm-overlap); stroke-width: 4; stroke-linecap: round; }
.shm-why-art-you { fill: var(--shm-you); }
.shm-why-art-them { fill: var(--shm-other); }
.shm-why-art-number { fill: var(--shm-muted); font-family: var(--shm-display); font-size: 22px; font-weight: 800; font-stretch: 85%; }
.shm-why-art figcaption { margin-top: 14px; color: var(--shm-muted); font-size: .8125rem; font-weight: 600; line-height: 1.4; text-align: center; }
.shm-why-hero-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; margin-top: 44px; }
.shm-why-hero-lead { max-width: 34ch; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.45; }
.shm-why-hero-side > p:first-child { max-width: 46ch; color: var(--shm-muted); font-size: 1rem; line-height: 1.65; }
.shm-why-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }

/* Citations: the source's number, then its short name, linking to the list at the bottom. */
.shm-why-cites { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto !important; padding-top: 18px; }
.shm-why-cites-label { color: var(--shm-muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.shm-why-cite { display: inline-flex; align-items: center; gap: 7px; color: var(--shm-ink); font-size: .8125rem; font-weight: 600; line-height: 1.35; text-decoration: underline !important; text-decoration-color: var(--shm-line) !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }
.shm-why-cite:hover { text-decoration-color: var(--shm-ink) !important; }
.shm-why-cite-n { display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 10px; background: var(--shm-ink); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1; }

/* The numbers */
.shm-why-numbers { padding-block: 104px; background: var(--shm-lilac); }
.shm-why-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px !important; }
.shm-why-figure { display: flex; flex-direction: column; padding: 30px 30px 26px; border-radius: 26px; background: #fff; }
.shm-why-figure h3 { font-weight: inherit; }
.shm-why-figure-value { display: block; font-family: var(--shm-display); font-size: clamp(3.4rem, 6vw, 5rem); font-weight: 800; font-stretch: 78%; line-height: .9; letter-spacing: -.01em; }
.shm-why-figure-label { display: block; max-width: 28ch; margin-top: 12px; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; }
.shm-why-figure-definition { max-width: 62ch; margin-top: 14px !important; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-why-units { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.shm-why-units i { width: 22px; height: 22px; border-radius: 50%; background: #d6d3f2; }
.shm-why-units i.is-on { background: var(--shm-you); }
.shm-why-meter { display: block; width: min(100%, 360px); height: 12px; margin-top: 25px; overflow: hidden; border-radius: 6px; background: #d6d3f2; }
.shm-why-meter i { display: block; height: 100%; border-radius: 6px 0 0 6px; background: var(--shm-you); }
.shm-why-trend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 360px; margin-top: 20px !important; }
.shm-why-trend li { display: flex; flex-direction: column; gap: 4px; }
.shm-why-trend-track { display: flex; align-items: flex-end; height: 64px; margin-bottom: 6px; border-bottom: 2px solid var(--shm-line); }
.shm-why-trend-track i { display: block; width: 100%; max-width: 52px; border-radius: 4px 4px 0 0; background: #b9b5e6; }
.shm-why-trend li.is-now .shm-why-trend-track i { background: var(--shm-you); }
.shm-why-trend b { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.shm-why-trend span:last-child { color: var(--shm-muted); font-size: .8125rem; line-height: 1.35; }
.shm-why-numbers-note { display: flex; align-items: flex-start; gap: 12px; max-width: 88ch; margin-top: 20px !important; padding: 18px 22px; border-radius: 20px; background: #ffffffb3; font-size: .9375rem; line-height: 1.6; }
.shm-why-numbers-note svg { margin-top: 2px; color: var(--shm-you); }

/* Research → design */
.shm-why-research { padding-block: 112px 40px; }
.shm-why-pairs { display: grid; gap: 16px; margin-top: 48px !important; }
.shm-why-pair { display: grid; grid-template-columns: minmax(0, 1.15fr) 44px minmax(0, 1fr); align-items: stretch; gap: 12px; }
.shm-why-pair-found, .shm-why-pair-design { display: flex; flex-direction: column; padding: 26px; border-radius: 24px; }
.shm-why-pair-found { background: #fff; box-shadow: inset 0 0 0 1.5px var(--shm-line); }
.shm-why-pair-design { background: var(--shm-lilac); }
.shm-why-pair-arrow { display: grid; place-items: center; align-self: center; width: 44px; height: 44px; border-radius: 50%; background: var(--shm-overlap); color: var(--shm-ink); }
.shm-why-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--shm-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
.shm-why-pair-n { color: var(--shm-you); font-family: var(--shm-display); font-size: 1.125rem; font-weight: 800; font-stretch: 85%; letter-spacing: 0; }
.shm-why-pair :is(h3, h4) { margin-top: 12px; font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.08; }
.shm-why-pair-found > p:not(.shm-why-eyebrow):not(.shm-why-cites) { max-width: 62ch; margin-top: 10px; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-why-pair-design > p:not(.shm-why-eyebrow) { max-width: 52ch; margin-top: 10px; font-size: .9375rem; line-height: 1.6; }
.shm-why-expect { display: flex; align-items: flex-start; gap: 16px; margin-top: 32px; padding: 28px; border-radius: 26px; background: var(--shm-mist); }
.shm-why-expect > svg { margin-top: 3px; color: var(--shm-you); }
.shm-why-expect h3 { font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-why-expect p:not(.shm-why-cites) { max-width: 72ch; margin-top: 10px; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }

/* Success */
.shm-why-success { margin-top: 80px; padding-block: 100px; background: var(--shm-ink); color: #fff; --ring: var(--shm-overlap); }
.shm-why-success-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 40px 64px; }
.shm-why-success-lead { max-width: 30ch; margin-top: 24px !important; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.45; }
.shm-why-success-layout > div > p:not(.shm-why-success-lead) { max-width: 52ch; margin-top: 14px; color: #ffffffc7; font-size: 1rem; line-height: 1.65; }
.shm-why-success .shm-open-text-link { margin-top: 24px; color: var(--shm-overlap); }
.shm-why-success-metrics h3 { color: #ffffffc7; }
.shm-why-success-metrics ul { display: grid; gap: 10px; margin-top: 14px !important; }
.shm-why-success-metrics li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; background: #ffffff14; }
.shm-why-success-metrics svg { color: var(--shm-overlap); }
.shm-why-success-metrics li span { font-family: var(--shm-display); font-size: 1.375rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }

/* What it isn't, and where to find help */
.shm-why-support { padding-block: 112px 24px; }
.shm-why-support-box { display: flex; align-items: flex-start; gap: 18px; max-width: 820px; margin-top: 40px; padding: 30px; border-radius: 26px; background: var(--shm-mist); }
.shm-why-support-box > svg { margin-top: 4px; color: var(--shm-you); }
.shm-why-support-box h3 { font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-why-support-box p { max-width: 60ch; margin-top: 10px; font-size: 1rem; line-height: 1.6; }
.shm-why-helplines { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px !important; }
.shm-why-helplines a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--shm-line); font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.shm-why-helplines a:hover { box-shadow: inset 0 0 0 1.5px var(--shm-ink); }
.shm-why-support-box .shm-why-support-emergency { margin-top: 16px; font-weight: 600; }
.shm-why-support-emergency a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }

/* Closing and sources */
.shm-why .shm-why-closing { margin-top: 72px; }
.shm-why-sources { padding-block: 72px 56px; }
.shm-why .shm-why-sources h2 { font-size: 2rem; }
.shm-why-source-group h3 { margin-top: 28px; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.shm-why-sources ol { display: grid; gap: 10px; max-width: 88ch; margin-top: 12px !important; padding-left: 1.8em !important; list-style: decimal !important; color: var(--shm-muted); font-size: .875rem; line-height: 1.6; }
.shm-why-sources li { padding-left: 4px; scroll-margin-top: 24px; }
.shm-why-sources li:target { color: var(--shm-ink); background: var(--shm-mist); outline: 2px solid var(--shm-overlap); outline-offset: 4px; border-radius: 4px; }
.shm-why-sources a { color: var(--shm-ink); text-decoration: underline !important; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* The links between the same five people fade in, one week at a time. */
@media (prefers-reduced-motion: no-preference) {
    .shm-why-art-link { animation: shm-why-link .5s ease-out both; }
    .shm-why-art-week.is-2 .shm-why-art-link { animation-delay: .2s; }
    .shm-why-art-week.is-3 .shm-why-art-link { animation-delay: .45s; }
    .shm-why-art-week.is-4 .shm-why-art-link { animation-delay: .7s; }
    @keyframes shm-why-link { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 960px) {
    .shm-why-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .shm-why-pair-arrow { justify-self: center; width: 36px; height: 36px; transform: rotate(90deg); }
    .shm-why-success-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .shm-why-hero { padding-block: 24px 72px; }
    .shm-why-hero-top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .shm-why-art { max-width: 336px; }
    .shm-why-hero-body { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
    .shm-why-figures { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .shm-why .shm-why-hero h1 { font-size: clamp(2.75rem, 12.5vw, 3.75rem); }
    .shm-why-art { max-width: 280px; }
    .shm-why-numbers { padding-block: 64px; }
    .shm-why-figure { padding: 22px 20px 20px; border-radius: 22px; }
    .shm-why-figure-value { font-size: 3.5rem; }
    .shm-why-figure-label { font-size: 1.0625rem; }
    .shm-why-research, .shm-why-support { padding-block: 72px 24px; }
    .shm-why-pairs { margin-top: 36px !important; }
    .shm-why-pair-found, .shm-why-pair-design { padding: 20px; border-radius: 22px; }
    .shm-why-pair :is(h3, h4) { font-size: 1.3125rem; }
    .shm-why-expect { flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: 22px; }
    .shm-why-success { margin-top: 56px; padding-block: 64px; }
    .shm-why-success-metrics li span { font-size: 1.1875rem; }
    .shm-why-support-box { flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: 22px; }
    .shm-why .shm-why-closing { margin-top: 48px; }
    .shm-why-sources { padding-block: 56px 40px; }
}

/* /safety. Builds on the landing page's tokens (.shm-open) and the figure cards of /why:
   value, label, definition, source. Numbers here are live, so a withheld one says why. */
.shm-safety :is(h3, h4) { margin: 0; }
.shm-safety > main > section { scroll-margin-top: 16px; }

/* Hero */
.shm-safety-hero { padding-block: 48px 96px; }
.shm-safety .shm-safety-hero h1 { max-width: 14ch; font-size: clamp(3.2rem, 7.2vw, 7rem); font-stretch: 75%; line-height: .88; letter-spacing: -.01em; }
.shm-safety-hero-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; margin-top: 44px; }
.shm-safety-hero-lead { max-width: 34ch; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.45; }
.shm-safety-hero-side > p:first-child { max-width: 46ch; color: var(--shm-muted); font-size: 1rem; line-height: 1.65; }
.shm-safety-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }

/* How we keep meetups safe */
.shm-safety-how { padding-block: 24px 104px; }
.shm-safety-measures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px !important; }
.shm-safety-measure, .shm-safety-step { display: flex; flex-direction: column; padding: 26px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--shm-line); }
.shm-safety-measure-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--shm-mist); color: var(--shm-you); }
.shm-safety-measure h3, .shm-safety-step h3 { margin-top: 18px; font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.08; }
.shm-safety-measure p { max-width: 52ch; margin-top: 10px; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-safety-soon { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--shm-overlap); color: var(--shm-ink); font-family: inherit; font-size: .75rem; font-weight: 700; font-stretch: 100%; letter-spacing: .02em; vertical-align: middle; }

/* The numbers */
.shm-safety-numbers { padding-block: 104px; background: var(--shm-lilac); }
.shm-safety-numbers-meta { max-width: 88ch; margin-top: 20px !important; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-safety-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px !important; }
.shm-safety-figure { display: flex; flex-direction: column; padding: 30px 30px 26px; border-radius: 26px; background: #fff; }
.shm-safety-figure h3 { margin-top: 10px; font-weight: inherit; }
.shm-safety-eyebrow { color: var(--shm-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
.shm-safety-figure-value { display: block; font-family: var(--shm-display); font-size: clamp(3.4rem, 6vw, 5rem); font-weight: 800; font-stretch: 78%; line-height: .9; letter-spacing: -.01em; }
.shm-safety-figure-withheld { display: block; font-family: var(--shm-display); font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 800; font-stretch: 85%; line-height: 1; color: var(--shm-muted); }
.shm-safety-figure-label { display: block; max-width: 30ch; margin-top: 12px; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; }
.shm-safety-figure-why { margin-top: 10px !important; font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.shm-safety-figure-definition { max-width: 62ch; margin-top: 14px !important; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-safety-figure-source { margin-top: auto !important; padding-top: 18px; font-size: .8125rem; font-weight: 600; line-height: 1.4; }
.shm-safety-figure-source span { margin-right: 6px; color: var(--shm-muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.shm-safety-meter { display: block; width: min(100%, 360px); height: 12px; margin-top: 22px; overflow: hidden; border-radius: 6px; background: #d6d3f2; }
.shm-safety-meter i { display: block; height: 100%; border-radius: 6px 0 0 6px; background: var(--shm-you); }
.shm-safety-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; max-width: 88ch; margin-top: 24px !important; padding: 18px 22px; border-radius: 20px; background: #fff; font-size: .9375rem; line-height: 1.6; }
.shm-safety-notice.is-error svg { color: var(--shm-other); }
.shm-safety-notice p { flex: 1 1 30ch; }
.shm-safety-retry { min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px; background: var(--shm-ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.shm-safety-numbers-note { display: flex; align-items: flex-start; gap: 12px; max-width: 88ch; margin-top: 20px !important; padding: 18px 22px; border-radius: 20px; background: #ffffffb3; font-size: .9375rem; line-height: 1.6; }
.shm-safety-numbers-note svg { flex: none; margin-top: 2px; color: var(--shm-you); }

/* If something happens */
.shm-safety-help { padding-block: 112px 40px; }
.shm-safety-emergency { display: flex; align-items: flex-start; gap: 18px; margin-top: 40px; padding: 30px; border-radius: 26px; background: var(--shm-ink); color: #fff; }
.shm-safety-emergency > svg { flex: none; margin-top: 4px; color: var(--shm-overlap); }
.shm-safety-emergency h3 { font-family: var(--shm-display); font-size: 1.75rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-safety-emergency p { max-width: 60ch; margin-top: 10px; color: #ffffffc7; font-size: 1rem; line-height: 1.6; }
.shm-safety-dial { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 16px !important; }
.shm-safety-dial li { display: flex; align-items: center; gap: 14px; }
.shm-safety-dial a { display: inline-grid; place-items: center; min-width: 88px; min-height: 56px; padding: 6px 18px; border-radius: 18px; background: var(--shm-overlap); color: var(--shm-ink); font-family: var(--shm-display); font-size: 2rem; font-stretch: 85%; line-height: 1; }
.shm-safety-dial span, .shm-safety-helplines span { max-width: 22ch; font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.shm-safety-emergency .shm-safety-helplines-title { margin-top: 22px; }
.shm-safety-helplines { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 12px !important; }
.shm-safety-helplines li { display: flex; align-items: center; gap: 12px; }
.shm-safety-helplines a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: #ffffff1f; color: #fff; font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.shm-safety-helplines a:hover { background: #ffffff33; }
.shm-safety-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.shm-safety-step :is(ul, ol) { display: grid; gap: 10px; margin-top: 14px !important; padding-left: 1.3em !important; color: var(--shm-muted); font-size: .9375rem; line-height: 1.6; }
.shm-safety-step ul { list-style: disc !important; }
.shm-safety-step ol { list-style: decimal !important; }
.shm-safety-step .shm-open-text-link { margin-top: 18px; align-self: flex-start; }

/* What we never do */
.shm-safety-never { margin-top: 72px; padding-block: 100px; background: var(--shm-ink); color: #fff; --ring: var(--shm-overlap); }
.shm-safety-never h2 { color: #fff; }
.shm-safety-never-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px !important; }
.shm-safety-never-list li { padding: 26px; border-radius: 24px; background: #ffffff14; }
.shm-safety-never-list svg { color: var(--shm-overlap); }
.shm-safety-never-list h3 { margin-top: 16px; font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.shm-safety-never-list p { margin-top: 10px; color: #ffffffc7; font-size: .9375rem; line-height: 1.6; }
.shm-safety-never .shm-open-text-link { margin-top: 28px; color: var(--shm-overlap); }
.shm-safety .shm-safety-closing { margin-top: 72px; }

@media (max-width: 960px) {
    .shm-safety-measures, .shm-safety-never-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .shm-safety-hero { padding-block: 24px 64px; }
    .shm-safety-hero-body { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
    .shm-safety-figures, .shm-safety-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .shm-safety .shm-safety-hero h1 { font-size: clamp(2.75rem, 12.5vw, 3.75rem); }
    .shm-safety-measures, .shm-safety-never-list { grid-template-columns: minmax(0, 1fr); }
    .shm-safety-how { padding-block: 16px 72px; }
    .shm-safety-measure, .shm-safety-step, .shm-safety-never-list li { padding: 20px; border-radius: 22px; }
    .shm-safety-numbers { padding-block: 64px; }
    .shm-safety-figure { padding: 22px 20px 20px; border-radius: 22px; }
    .shm-safety-figure-value { font-size: 3.5rem; }
    .shm-safety-figure-label { font-size: 1.0625rem; }
    .shm-safety-help { padding-block: 72px 24px; }
    .shm-safety-emergency { flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: 22px; }
    .shm-safety-never { margin-top: 56px; padding-block: 64px; }
    .shm-safety .shm-safety-closing { margin-top: 48px; }
}

/* /promise (sixty-seconds.md §D, board 63). Built on the landing's open-page shell, like /safety. */
.shm-promise-hero { padding-block: 48px 56px; }
.shm-promise .shm-promise-hero h1 { max-width: 13ch; margin: 0; font-size: clamp(3.2rem, 7.2vw, 7rem); font-stretch: 75%; line-height: .88; letter-spacing: -.01em; }
.shm-promise-hero p { max-width: 40ch; margin: 28px 0 0; color: var(--shm-muted); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.45; }

.shm-promise-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.shm-promise-list li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 26px 76px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--shm-line); scroll-margin-top: 24px; }
.shm-promise-list li:target { box-shadow: inset 0 0 0 2px var(--shm-you); }
.shm-promise-number { position: absolute; top: 22px; left: 26px; color: var(--shm-you); font-family: var(--shm-display, 'Bricolage Grotesque', sans-serif); font-size: 2rem; font-stretch: 85%; font-weight: 800; line-height: 1; }
.shm-promise-icon { display: none; }
.shm-promise-list h3 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.shm-promise-list p { margin: 0; color: var(--shm-muted); font-size: 1rem; line-height: 1.6; }

.shm-promise-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 32px 0 96px; }
.shm-promise-share .shm-open-button { display: inline-flex; align-items: center; gap: 8px; }
.shm-promise-share p { margin: 0; color: var(--shm-muted); font-size: .9375rem; }

@media (max-width: 860px) {
    .shm-promise-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .shm-promise .shm-promise-hero h1 { font-size: clamp(2.75rem, 12.5vw, 3.75rem); }
    .shm-promise-hero { padding-block: 24px 40px; }
    .shm-promise-list li { padding: 20px 20px 20px 64px; border-radius: 22px; }
    .shm-promise-number { top: 18px; left: 20px; }
}