.app-footer {
    position: relative;
    z-index: 0;
    overflow-wrap: anywhere;
}

.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.68rem;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
}

.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 {
    text-decoration: none !important;
}

.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.82rem;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 600;
    font-family: var(--font-sans, "Inter", "Avenir Next", "Helvetica Neue", sans-serif);
}

.app-footer__link {
    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: 1px solid var(--app-footer-version-border, #d0d0d0) !important;
    border-radius: 999px !important;
    background: var(--app-footer-version-bg, rgba(255, 255, 255, 0.68)) !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;
    border-color: var(--app-footer-version-border-hover, #b6b6b6) !important;
    background: var(--app-footer-version-bg-hover, rgba(255, 255, 255, 0.9)) !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: 1px solid var(--app-footer-version-border, #d0d0d0) !important;
    color: var(--app-footer-link-color, var(--text)) !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    background: var(--app-footer-version-bg, rgba(255, 255, 255, 0.68)) !important;
    padding-right: 1.55rem !important;
}

.app-footer__localeSelect:hover,
.app-footer__localeSelect:focus {
    border-color: var(--app-footer-version-border-hover, #b6b6b6) !important;
}

@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 example week: blue is you, pink is them, yellow is where your weeks touch. */
.shm-nm { position: absolute; inset: 0; border-radius: inherit; }
.shm-nm-stage { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.shm-nm-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shm-nm-land { fill: var(--shm-land); }
.shm-nm-blocks rect { fill: var(--shm-block); }
.shm-nm-water { fill: none; stroke: var(--shm-water); stroke-width: 74; stroke-linecap: round; }
.shm-nm-towpath { fill: none; stroke: #ffffffb3; stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.shm-nm-park { fill: var(--shm-park); }
.shm-nm-trees circle { fill: var(--shm-tree); }
.shm-nm-streets path { fill: none; stroke: #fff; 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 .4s; }
.shm-nm-route.is-compact .shm-nm-trail { stroke-width: 14; }
.shm-nm-trail-you { stroke: var(--shm-you); }
.shm-nm-trail-other { stroke: var(--shm-other-line); }
.shm-nm-route.is-future .shm-nm-trail { opacity: 0; }
.shm-nm-route.is-past .shm-nm-trail { opacity: .3; }
.shm-nm-pin { fill: #fff; stroke: var(--shm-ink); stroke-width: 3; }
.shm-nm-place svg { color: var(--shm-ink); }
.shm-nm-spark { fill: var(--shm-overlap); opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .35s, transform .5s cubic-bezier(.2, 1.6, .4, 1); }
.shm-nm-place.is-sparked .shm-nm-spark { opacity: 1; transform: scale(1); }
.shm-nm-dot { transition: opacity .3s; }
.shm-nm-dot-you circle { fill: var(--shm-you); stroke: #fff; stroke-width: 5; }
.shm-nm-dot-ring { fill: var(--shm-other); stroke: #fff; 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 5px; border-radius: 999px; background: #fff; font-family: var(--shm-display); font-size: .9375rem; font-weight: 700; font-stretch: 88%; line-height: 1.2; white-space: nowrap; box-shadow: 0 6px 14px -10px #17153b80; }

.shm-nm-panel { position: absolute; right: 36px; top: 36px; width: min(340px, calc(100% - 72px)); }
.shm-nm-moment, .shm-nm-intro { padding: 18px 20px; border-radius: 22px; background: #fff; box-shadow: 0 24px 48px -28px #17153b99; }
.shm-nm-moment { display: grid; gap: 6px; font-size: .9375rem; line-height: 1.4; }
.shm-nm-moment strong { font-family: var(--shm-display); font-size: 1.5rem; font-weight: 800; font-stretch: 82%; line-height: 1.05; }
.shm-nm-moment-place { margin-bottom: 6px; color: var(--shm-muted); 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(--shm-muted); }
.shm-nm-moment i { flex: none; width: 10px; height: 10px; border-radius: 50%; translate: 0 -1px; }
.shm-nm-key-you { background: var(--shm-you); }
.shm-nm-key-other { background: var(--shm-other); }
.shm-nm-moment em { justify-self: start; margin-top: 6px; padding: 5px 12px; border-radius: 999px; background: var(--shm-overlap); font-style: normal; font-weight: 700; font-size: .875rem; }
.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-position: center 22%; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--shm-other); }
.shm-nm-intro-head span { display: flex; align-items: center; gap: 6px; color: var(--shm-muted); font-size: .8125rem; font-weight: 600; }
.shm-nm-intro-head strong { display: block; font-family: var(--shm-display); font-size: 1.75rem; font-weight: 800; font-stretch: 82%; line-height: 1.05; }
.shm-nm-intro > p { margin-top: 14px !important; font-size: .9375rem; line-height: 1.55; }
.shm-nm-intro-plan { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--shm-overlap); font-weight: 700; }
.shm-nm-intro-plan b { font-size: .75rem; font-weight: 600; }

.shm-nm-controls { position: absolute; left: 36px; right: 36px; bottom: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; pointer-events: none; }
.shm-nm-controls > * { pointer-events: auto; }
.shm-nm-steps { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -16px #17153b80; }
.shm-nm-steps button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 0; border-radius: 999px; background: none; color: var(--shm-ink); font-size: .875rem; font-weight: 600; line-height: 1.2; }
.shm-nm-steps button.is-past { color: var(--shm-muted); }
.shm-nm-steps button[aria-pressed='true'] { background: var(--shm-ink); color: #fff; }
.shm-nm-steps .shm-nm-step-intro[aria-pressed='true'] { background: var(--shm-other); color: var(--shm-ink); }
.shm-nm-replay { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--shm-ink); box-shadow: 0 10px 24px -16px #17153b80; }
.shm-nm-replay:disabled { opacity: .5; cursor: default; }
.shm-nm-count { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; padding: 10px 18px; border-radius: 999px; background: var(--shm-overlap); font-weight: 700; font-size: .9375rem; }
.shm-nm-count b { font-family: var(--shm-display); font-size: 1.6rem; font-weight: 800; font-stretch: 80%; line-height: 1; }

@media (prefers-reduced-motion: no-preference) {
    .shm-nm-moment, .shm-nm-intro { animation: shm-nm-pop .35s cubic-bezier(.2, 1.3, .4, 1) both; }
    @keyframes shm-nm-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
}
@media (max-width: 860px) {
    .shm-nm { position: relative; inset: auto; }
    .shm-nm-stage { position: relative; inset: auto; aspect-ratio: 1 / 1; border-radius: 24px; }
    .shm-nm-label { font-size: .8125rem; padding: 3px 8px 4px; }
    .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: 14px; }
    .shm-nm-count { margin-left: 0; }
}
@media (max-width: 420px) {
    .shm-nm-steps button { padding: 8px 10px; font-size: .8125rem; }
    .shm-nm-step-intro svg { display: none; }
}

/* "How this score was made" on an introduction: one quiet row, opening to the score's lines.
   Tokens come from the signed-in theme (styles/dash.css); fallbacks keep it readable elsewhere. */
.shm-sb {
    border-top: 1px solid var(--app-line, #e4e2f4);
}

.shm-sb-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--app-ink, #17153b);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.shm-sb-toggle:focus-visible {
    outline: 2px solid var(--app-you, #2b44ff);
    outline-offset: 2px;
    border-radius: 8px;
}

.shm-sb-toggle > svg {
    flex: none;
    margin-left: auto;
    color: var(--app-subtle, #807e9f);
    transition: transform 0.18s ease;
}

.shm-sb.is-open .shm-sb-toggle > svg {
    transform: rotate(180deg);
}

.shm-sb-panel {
    display: grid;
    gap: 14px;
    padding: 2px 0 6px;
}

.shm-sb-group h4 {
    margin: 0 0 6px;
    color: var(--app-subtle, #807e9f);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shm-sb-lines {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shm-sb-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 3.4em;
    align-items: center;
    gap: 10px;
    color: var(--app-ink, #17153b);
    font-size: 0.88rem;
    line-height: 1.35;
}

.shm-sb-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.shm-sb-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--app-surface-2, #f0effb);
}

.shm-sb-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--app-you, #2b44ff);
}

.shm-sb-chip {
    justify-self: end;
    min-width: 2.8em;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--app-you-soft, #eceeff);
    color: var(--app-you-deep, #1d33d9);
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.shm-sb-line.is-negative .shm-sb-bar > span {
    background: var(--app-subtle, #807e9f);
}

.shm-sb-line.is-negative .shm-sb-chip {
    background: var(--app-surface-2, #f0effb);
    color: var(--app-muted, #57557a);
}

.shm-sb-ai {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px dashed var(--app-line-strong, #cbc8e6);
    border-radius: var(--app-radius-sm, 14px);
}

.shm-sb-ai .shm-sb-label {
    font-weight: 650;
}

.shm-sb-ai .shm-sb-label > svg {
    flex: none;
    color: var(--app-you, #2b44ff);
}

.shm-sb-ai-reason,
.shm-sb-ai-bound,
.shm-sb-foot p {
    margin: 0;
}

.shm-sb-ai-reason {
    color: var(--app-muted, #57557a);
    font-size: 0.86rem;
    line-height: 1.45;
}

.shm-sb-ai-bound,
.shm-sb-same {
    color: var(--app-subtle, #807e9f);
    font-size: 0.76rem;
    line-height: 1.4;
}

.shm-sb-foot {
    display: grid;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--app-line, #e4e2f4);
}

.shm-sb-total {
    color: var(--app-ink, #17153b);
    font-size: 0.84rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.shm-sb-link {
    justify-self: start;
    margin-top: 2px;
    color: var(--app-you, #2b44ff);
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
}

.shm-sb-link:hover {
    text-decoration: underline;
}

/* Small marker after text the AI wrote. */
.shm-ai-written {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--app-surface-2, #f0effb);
    color: var(--app-muted, #57557a);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: 0.1em;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .shm-sb-line {
        grid-template-columns: minmax(0, 1fr) 44px 3.4em;
        gap: 8px;
    }
}

.shm-open-tour { padding-block: 120px 40px; }
.shm-tour-heading { margin-bottom: 48px; }
.shm-tour-heading > p { max-width: 340px; }
.shm-tour-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 45px; align-items: start; }
.shm-tour-guide { padding-top: 24px; }
.shm-tour-mobile-description { display: none; }
.shm-tour-tabs { display: flex; flex-direction: column; }
.shm-tour-tabs > button { display: grid; grid-template-columns: 28px minmax(0,1fr) 18px; gap: 12px; padding: 24px 0; text-align: left; background: transparent; color: var(--shm-muted); border: 0; border-bottom: 1px solid var(--shm-line); transition: color .2s; }
.shm-tour-tabs > button:first-child { border-top: 1px solid var(--shm-line); }
.shm-tour-tabs > button[aria-selected="true"] { color: var(--shm-ink); }
.shm-tour-step-number { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--shm-lilac); font-size: .6875rem; font-weight: 700; }
.shm-tour-tabs > button[aria-selected="true"] .shm-tour-step-number { background: var(--shm-cobalt); color: #fff; }
.shm-tour-step-copy > strong { display: block; font-family: var(--shm-display); font-size: 1.375rem; font-weight: 800; font-stretch: 85%; line-height: 1.15; }
.shm-tour-step-copy > span { display: block; margin-top: 8px; font-size: .875rem; color: var(--shm-muted); line-height: 1.6; }
.shm-tour-tabs > button:not([aria-selected="true"]) .shm-tour-step-copy > span { display: none; }
.shm-tour-step-icon { margin-top: 5px; opacity: .5; }
.shm-tour-tabs > button[aria-selected="true"] .shm-tour-step-icon { opacity: 1; }
.shm-tour-guide-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; color: var(--shm-muted); }
.shm-tour-guide-note svg { margin-top: 3px; }
.shm-tour-guide-note p { font-size: .8125rem; line-height: 1.6; max-width: 250px; }
.shm-tour-preview {
    --ui-text-primary: var(--shm-ink); --ui-text-secondary: var(--shm-muted); --ui-text-tertiary: var(--shm-muted);
    --ui-surface-inverse: var(--shm-ink); --ui-text-inverse: #fff;
    --shm-match-card-bg: #fff; --shm-match-card-bg-soft: var(--shm-mist); --shm-match-border: var(--shm-line);
    --shm-match-accent: var(--shm-cobalt); --shm-match-accent-soft: var(--shm-lilac); --shm-match-sage: var(--shm-cobalt); --shm-match-sage-soft: var(--shm-lilac); --shm-match-shadow: none;
    min-width: 0; background: var(--shm-lilac); border: 0; border-radius: 28px;
}
.shm-tour-window-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1.5px solid var(--shm-line); border-radius: 28px 28px 0 0; background: transparent; }
.shm-tour-window-bar > span:first-child { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 600; letter-spacing: -.04em; }
.shm-tour-window-bar > span:first-child > span { width: 22px; height: 22px; display: flex; color: var(--shm-cobalt); }
.shm-tour-window-bar svg { width: 100%; height: 100%; }
.shm-tour-sample-badge { padding: 5px 10px; border-radius: 999px; background: var(--shm-sun); color: var(--shm-ink); font-size: .6875rem; font-weight: 600; line-height: 1.5; }
.shm-tour-panel { min-height: 530px; padding: 24px; border-radius: 3px; }
.shm-tour-app-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.shm-tour-app-heading > div > span, .shm-tour-small-label { display: block; color: var(--shm-muted); font-size: .625rem; font-weight: 450; line-height: 1.5; }
.shm-tour-app-heading h3 { font-family: var(--shm-display); font-size: 1.5rem; line-height: 1.1; font-weight: 800; font-stretch: 85%; margin-top: 6px; }
.shm-tour-count { font-size: .625rem; color: var(--shm-muted); white-space: nowrap; }
.shm-tour-intro-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 22px; align-items: stretch; }
.shm-tour-intro-layout.is-expanded { display: block; }
.shm-tour-preview .shm-intro-reveal-card { border: 0; border-radius: 18px; margin: 0; padding: 0; box-shadow: none; }
.shm-tour-preview .shm-intro-reveal-stage { min-height: 407px; height: 100%; padding: 20px; gap: 20px; background-position: center 35%; color: #fff; border-radius: 18px; --ring: var(--shm-sun); }
.shm-tour-preview .shm-intro-reveal-top { width: 100%; font-size: .5625rem; font-weight: 450; }
.shm-tour-preview .shm-intro-reveal-top > span { font-size: .5625rem; }
.shm-tour-preview .shm-intro-reveal-top svg { width: 28px; height: 28px; padding: 6px; }
.shm-tour-preview .shm-intro-reveal-name { font-family: var(--shm-display); font-size: 2.25rem; font-weight: 800; font-stretch: 85%; letter-spacing: 0; color: #fff; }
.shm-tour-preview .shm-intro-score-block strong { font-family: var(--shm-display); font-size: 2.75rem; font-weight: 800; font-stretch: 85%; letter-spacing: 0; color: var(--shm-sun); }
.shm-tour-preview .shm-intro-score-block > span { font-size: .75rem; font-weight: 450; color: #eee; }
.shm-tour-preview .shm-intro-score-block em { max-width: none; font-size: .75rem; line-height: 1.7; font-weight: 400; color: #e0e0e0; }
.shm-tour-preview .shm-intro-reveal-foot { font-size: .625rem; font-weight: 450; line-height: 1.5; }
.shm-tour-context { align-self: center; padding-right: 3px; }
.shm-tour-context h4 { color: var(--shm-ink); font-family: var(--shm-display); font-size: 1.375rem; font-stretch: 85%; line-height: 1.1; font-weight: 800; margin: 8px 0 10px; }
.shm-tour-context > p { color: var(--shm-muted); font-size: .6875rem; line-height: 1.7; }
.shm-tour-plan-options { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.shm-tour-plan-options button { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid transparent; border-radius: 999px; background: #fff; color: var(--shm-ink); font-size: .75rem; font-weight: 600; line-height: 1.5; text-align: left; transition: background .15s, color .15s; }
.shm-tour-plan-options button:hover { border-color: var(--shm-ink); }
.shm-tour-plan-options button[aria-pressed="true"] { color: #fff; background: var(--shm-cobalt); border-color: var(--shm-cobalt); }
.shm-tour-shared-context { margin-top: 22px; padding-top: 17px; border-top: 1.5px dashed var(--shm-line); }
.shm-tour-shared-context > p { margin-top: 10px; font-size: .625rem; color: var(--shm-muted); }
.shm-tour-preview .shm-flow-cues { gap: 6px; margin-top: 9px; }
.shm-tour-preview .shm-flow-cues span { font-size: .5625rem; font-weight: 450; line-height: 1.5; padding: 4px 8px; min-height: 0; }
.shm-tour-inline-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 0; border: 0; background: none; color: var(--shm-cobalt); font-size: .8125rem; font-weight: 600; line-height: 1.6; text-align: left; }
.shm-tour-preview .shm-intro-reveal-card.is-expanded { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); background: #fff; }
.shm-tour-preview .is-expanded .shm-intro-reveal-stage { border-radius: 12px 0 0 12px; }
.shm-tour-preview .shm-intro-detail-panel { padding: 18px; background: #fff; }
.shm-tour-preview .shm-flow-person-head { gap: 10px; align-items: center; }
.shm-tour-preview .shm-flow-avatar { width: 42px; height: 42px; border-radius: 50%; box-shadow: none; }
.shm-tour-preview .shm-flow-person-copy > strong { font-size: .9375rem; font-weight: 550; line-height: 1.4; }
.shm-tour-preview .shm-flow-person-meta { margin-top: 4px; font-size: .625rem; font-weight: 400; line-height: 1.5; }
.shm-tour-preview .shm-flow-person-meta svg { width: 11px; }
.shm-tour-preview .shm-intro-score-chip { padding: 7px; border-radius: 7px; background: var(--shm-mist); border: 0; min-width: 0; box-shadow: none; }
.shm-tour-preview .shm-intro-score-chip > span { font-size: .5rem; font-weight: 450; }
.shm-tour-preview .shm-intro-score-chip > strong { font-size: 1rem; font-weight: 550; }
.shm-tour-preview .shm-flow-context-card { padding: 12px; border-radius: 8px; margin-top: 15px; }
.shm-tour-preview .shm-flow-context-head { flex-wrap: wrap; gap: 10px; }
.shm-tour-preview .shm-flow-kicker { font-size: .5625rem; font-weight: 500; text-transform: none; line-height: 1.5; margin-bottom: 0; }
.shm-tour-preview .shm-flow-context-card p { font-size: .6875rem; line-height: 1.75; font-weight: 450; margin-top: 8px; }
.shm-tour-preview .shm-intro-why { padding: 13px 0 0; margin-top: 14px; border: 0; border-top: 1px solid var(--shm-line); border-radius: 0; background: none; }
.shm-tour-preview .shm-intro-why > span { font-size: .625rem; font-weight: 550; }
.shm-tour-preview .shm-intro-why ul { margin-top: 8px; padding-left: 14px; }
.shm-tour-preview .shm-intro-why li { font-size: .75rem; line-height: 1.7; font-weight: 400; color: var(--shm-muted); }
.shm-tour-preview .shm-flow-signals { grid-template-columns: minmax(0,1fr); gap: 10px; margin-top: 12px; padding-top: 12px; }
.shm-tour-preview .shm-flow-signal { display: flex; align-items: center; gap: 9px; }
.shm-tour-preview .shm-flow-signal-icon { width: 26px; height: 26px; margin: 0; border-radius: 50%; flex: 0 0 auto; }
.shm-tour-preview .shm-flow-signal-icon svg { width: 13px; }
.shm-tour-preview .shm-flow-signal-copy > span { font-size: .5625rem; font-weight: 500; line-height: 1.5; }
.shm-tour-preview .shm-flow-signal-copy > strong { font-size: .6875rem; font-weight: 400; line-height: 1.5; }
.shm-tour-preview .shm-flow-actions { margin-top: 16px; }
.shm-tour-preview .shm-flow-actions button { min-height: 37px; height: auto; padding: 10px 12px; width: 100%; border-radius: 50px; font-size: .625rem; font-weight: 500; line-height: 1.5; white-space: normal; }
.shm-tour-conversation { padding: 0 8px; }
.shm-tour-chat-indicator { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--shm-sun); }
.shm-tour-preview .shm-chat-starter { margin-top: 22px; }
.shm-tour-preview .shm-chat-starter button { font-size: .625rem; font-weight: 450; white-space: normal; padding: 8px 11px; min-height: 32px; height: auto; border-radius: 40px; background: #fff; line-height: 1.5; }
.shm-tour-preview .shm-chat-messages { justify-content: flex-start; min-height: 175px; max-height: 310px; padding: 20px 2px 5px; overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; scrollbar-width: thin; }
.shm-tour-preview .shm-chat-messages::-webkit-scrollbar { display: block; width: 3px; }
.shm-tour-preview .shm-chat-bubble { box-shadow: none; border-radius: 13px 13px 13px 3px; max-width: 82%; }
.shm-tour-preview .shm-chat-bubble.is-mine { border-radius: 13px 13px 3px 13px; }
.shm-tour-preview .shm-chat-bubble p { font-size: .8125rem; font-weight: 400; line-height: 1.7; }
.shm-tour-preview .shm-chat-bubble > span:empty { display: none; }
.shm-tour-preview .shm-chat-composer { margin-top: 14px; }
.shm-tour-preview .shm-chat-composer textarea { border-radius: 12px; padding: 12px; min-height: 68px; font-size: .75rem; line-height: 1.7; box-shadow: none; color: var(--shm-ink); }
.shm-tour-preview .shm-chat-composer textarea:-ms-input-placeholder { color: var(--shm-muted); }
.shm-tour-preview .shm-chat-composer textarea::placeholder { color: var(--shm-muted); }
.shm-tour-preview .shm-chat-composer button { border-radius: 100px; font-size: .6875rem; font-weight: 500; min-height: 43px; gap: 7px; }
.shm-tour-chat-note { font-size: .625rem; line-height: 1.7; color: var(--shm-muted) !important; margin-top: 13px !important; }
.shm-tour-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; border-top: 1.5px solid var(--shm-line); padding: 17px 22px; }
.shm-tour-controls > div { display: flex; align-items: center; gap: 10px; }
.shm-tour-reset, .shm-tour-back { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--shm-ink); padding: 5px 0; font-size: .8125rem; font-weight: 500; line-height: 1.6; }
.shm-tour-back { padding: 9px; }
.shm-tour-back:disabled { opacity: .3; cursor: default; }
.shm-tour-next { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--shm-cobalt); color: #fff !important; padding: 12px 20px; border: 0; border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: 1.4; text-align: center; }
.shm-tour-next:hover { background: var(--shm-cobalt-deep); }
.shm-tour-example-note { margin: 18px 0 0 auto !important; width: 69%; font-size: .75rem; line-height: 1.6; color: var(--shm-muted) !important; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
    .shm-tour-introduction, .shm-tour-conversation { animation: shm-tour-enter .3s ease both; }
    @keyframes shm-tour-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 1100px) {
    .shm-tour-layout { grid-template-columns: minmax(0,.75fr) minmax(0,2fr); gap: 28px; }
    .shm-tour-tabs > button { grid-template-columns: 20px minmax(0,1fr); gap: 8px; }
    .shm-tour-step-icon { display: none; }
    .shm-tour-step-copy > strong { font-size: 1rem; }
    .shm-tour-panel { padding: 18px; }
    .shm-tour-intro-layout { gap: 16px; }
    .shm-tour-preview .shm-intro-detail-panel { padding: 14px; }
    .shm-tour-preview .shm-intro-reveal-stage { padding: 16px; }
}
@media (max-width: 850px) {
    .shm-tour-layout { grid-template-columns: minmax(0,1fr); gap: 22px; }
    .shm-tour-guide { padding: 0; }
    .shm-tour-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
    .shm-tour-tabs > button { grid-template-columns: minmax(0,1fr); align-content: start; padding: 15px 0; border-top: 1px solid var(--shm-line); border-bottom: 0; }
    .shm-tour-tabs > button[aria-selected="true"] { border-top: 3px solid var(--shm-cobalt); }
    .shm-tour-step-number { width: 24px; height: 24px; }
    .shm-tour-step-copy > strong { font-size: .9375rem; }
    .shm-tour-step-copy > span { font-size: .75rem; }
    .shm-tour-guide-note { display: none; }
    .shm-tour-example-note { width: 100%; }
    .shm-tour-heading { margin-bottom: 25px; }
    .shm-tour-panel { padding: 24px; }
    .shm-tour-preview .shm-intro-detail-panel { padding: 20px; }
}
@media (max-width: 600px) {
    .shm-open-tour { padding-block: 72px 24px; }
    .shm-tour-tabs { gap: 12px; }
    .shm-tour-tabs > button { padding-block: 12px; }
    .shm-tour-step-copy > strong { font-size: 1rem; line-height: 1.15; }
    .shm-tour-step-copy > span { display: none; }
    .shm-tour-mobile-description { display: block; font-size: .75rem; color: var(--shm-muted) !important; line-height: 1.8; margin-top: 7px !important; }
    .shm-tour-preview { border-radius: 22px; }
    .shm-tour-window-bar { padding: 14px; border-radius: 22px 22px 0 0; }
    .shm-tour-panel { padding: 17px; min-height: 0; }
    .shm-tour-app-heading { margin-bottom: 16px; }
    .shm-tour-app-heading h3 { font-size: 1.125rem; }
    .shm-tour-intro-layout { grid-template-columns: minmax(0,1fr); gap: 22px; }
    .shm-tour-preview .shm-intro-reveal-stage { min-height: 360px; background-position: center 35%; }
    .shm-tour-context { padding: 0 2px; }
    .shm-tour-context h4 { font-size: 1rem; }
    .shm-tour-plan-options { flex-direction: row; flex-wrap: wrap; margin-top: 13px; gap: 6px; }
    .shm-tour-plan-options button { flex: 1 1 100px; padding: 9px 10px; font-size: .625rem; }
    .shm-tour-shared-context { margin-top: 17px; padding-top: 13px; }
    .shm-tour-inline-link { margin-top: 14px; }
    .shm-tour-preview .shm-intro-reveal-card.is-expanded { grid-template-columns: minmax(0,1fr); }
    .shm-tour-preview .is-expanded .shm-intro-reveal-stage { min-height: 220px; border-radius: 12px 12px 0 0; gap: 10px; }
    .shm-tour-preview .is-expanded .shm-intro-reveal-name { font-size: 1.5rem; }
    .shm-tour-preview .is-expanded .shm-intro-score-block { display: none; }
    .shm-tour-preview .shm-intro-detail-panel { padding: 17px; }
    .shm-tour-preview .shm-intro-why li, .shm-tour-preview .shm-flow-signal-copy > strong { font-size: .6875rem; }
    .shm-tour-preview .shm-flow-signal-copy > span { font-size: .625rem; }
    .shm-tour-preview .shm-flow-actions button { font-size: .6875rem; }
    .shm-tour-conversation { padding: 0; }
    .shm-tour-preview .shm-chat-composer { grid-template-columns: minmax(0,1fr); }
    .shm-tour-preview .shm-chat-composer button { justify-self: end; padding-inline: 18px; }
    .shm-tour-controls { padding: 13px; gap: 12px; }
    .shm-tour-controls > div { margin-left: auto; gap: 3px; }
    .shm-tour-next { padding: 10px 14px; font-size: .75rem; gap: 8px; }
    .shm-tour-reset { font-size: .75rem; }
    .shm-tour-example-note { padding-inline: 7px; font-size: .6875rem; margin-top: 15px !important; }
}

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

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

@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;
    /* 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; 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; }
.shm-open .shm-open-nav-actions .shm-open-button { padding: 11px 20px; font-size: .875rem; }

/* 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 { 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 transparent; 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; }
.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; }
.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: 12px; padding-block: 12px; flex-wrap: nowrap; }
    .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; }
}
@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%; }
}

/* 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 { align-self: flex-start; margin-top: auto; padding-top: 16px; 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 { 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: 11px; 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: 30px; margin: 0; background: transparent; appearance: none; cursor: pointer; }
.shm-hmw-distance-track input::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.shm-hmw-distance-track input::-moz-range-track { height: 30px; background: transparent; }
.shm-hmw-distance-track input::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: 3px; 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: 6px; }
.shm-hmw-chip { min-height: 34px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--shm-mist); 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: 42px; 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; }
}

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

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

@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 (max-width: 600px) {
    .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; }
}

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