it carried a ~13px UA bottom margin that
nothing asked for, on top of whatever padding the section below it already had. */
.mk-caption { text-align:center; font:500 13.5px var(--sans); color:var(--muted); margin:10px 0 0; }
/* The homepage hero alone: its caption is answered by the signup band immediately below, so it closes
tight instead of at the full section gap. Every other hero is followed by a change of subject and
keeps the standard padding. */
.mk-hero-tight { padding-bottom:16px; }
.mk-mabel { flex:none; position:relative; z-index:2; margin-right:-10px; width:118px; }
.mk-mabel img { width:100%; height:auto; display:block; animation:mabelbob 4.5s ease-in-out infinite; }
@keyframes mabelbob { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-8px) rotate(-1.6deg)} }
@media (prefers-reduced-motion:reduce){ .mk-mabel img { animation:none; } }
/* ---- iPhone hero video (spokesperson clip masked to the screen shape) ---- */
.mk-phone { flex:none; position:relative; z-index:1; width:246px; background:#0d0d0f; border-radius:34px;
padding:8px; box-shadow:var(--phone-shadow); }
/* Dark screen background so any frame the video hasn't painted yet reads as a phone, not a white flash. */
.mk-screen { position:relative; background:#0d0d0f; border-radius:27px; overflow:hidden; }
/* The source is 9:16 (404x720); width:100%/height:auto keeps its natural aspect, so no cropping. */
.mk-hero-video { display:block; width:100%; height:auto; }
.mk-hero-sound { position:absolute; right:10px; bottom:16px; width:34px; height:34px; border-radius:50%;
border:0; padding:0; background:rgba(13,13,15,.55); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mk-hero-sound .on { display:none; }
.mk-hero-sound.is-on .on { display:block; }
.mk-hero-sound.is-on .off { display:none; }
.mk-home-ind { position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
width:86px; height:4px; border-radius:2px; background:rgba(255,255,255,.65); }
/* ---- how it works ---- */
.mk-steps { display:flex; flex-direction:column; gap:22px; margin-top:18px; }
.mk-step { display:flex; gap:14px; align-items:flex-start; }
.mk-num { width:34px; height:34px; border-radius:50%; background:var(--maroon); color:var(--cream);
font:600 15px var(--sans); display:flex; align-items:center; justify-content:center; flex:none; }
.mk-step-t { font:600 17px var(--sans); color:var(--deep); }
.mk-step-d { font-size:14.5px; line-height:1.45; color:var(--body); margin-top:3px; }
.mk-kicker { text-align:center; font-size:14px; color:var(--muted); line-height:1.5; max-width:42ch; margin:22px auto 0; }
/* ---- what people text (cards) ---- */
.mk-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.mk-card { background:var(--white); border-radius:16px; padding:16px; }
.mk-card-t { font:600 15px var(--sans); color:var(--deep); }
.mk-card-d { font-size:13px; color:var(--body2); margin-top:5px; line-height:1.4; }
/* ---- private by design ---- */
.mk-private .mk-eyebrow { text-align:center; } /* section rhythm: eyebrows center like mk-calls/mk-persist */
.mk-checks { display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.mk-check { display:flex; gap:11px; align-items:flex-start; }
.mk-check svg { flex:none; margin-top:1px; }
.mk-check div { font-size:14.5px; color:var(--deep); line-height:1.4; }
.mk-check b { font-weight:600; }
/* ---- pricing: one card, with a billing-period switch above it ----
The switch is a native radio group (.mk-pp-r), visually hidden but still focusable — display:none
would drop it out of the tab order and take the keyboard with it. Its :checked state does all the
work, so the whole control needs no JavaScript and no inline script under our CSP.
The pairs below are POSITIONAL: radio N lights tab N and reveals panel N. One pair per plan in
PLANS (stripePrices.ts) — a fourth plan needs a fourth pair added here. */
.mk-plan-picker { position:relative; max-width:430px; margin:0 auto; }
.mk-pp-r { position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none; }
.mk-pp-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin-bottom:18px;
background:var(--cream); border:1px solid var(--line); border-radius:999px; }
.mk-pp-tab { padding:10px 6px; border-radius:999px; text-align:center; cursor:pointer; user-select:none;
font:600 14.5px var(--sans); color:var(--muted); transition:background .15s ease, color .15s ease; }
.mk-pp-tab:hover { color:var(--maroon); }
.mk-pp-panel { display:none; }
/* checked: the tab reads as pressed and its panel is the one on screen */
.mk-pp-r:nth-of-type(1):checked ~ .mk-pp-tabs .mk-pp-tab:nth-child(1),
.mk-pp-r:nth-of-type(2):checked ~ .mk-pp-tabs .mk-pp-tab:nth-child(2),
.mk-pp-r:nth-of-type(3):checked ~ .mk-pp-tabs .mk-pp-tab:nth-child(3) {
background:var(--white); color:var(--maroon); box-shadow:0 1px 3px rgba(60,35,30,.14); }
.mk-pp-r:nth-of-type(1):checked ~ .mk-pp-panels .mk-pp-panel:nth-child(1),
.mk-pp-r:nth-of-type(2):checked ~ .mk-pp-panels .mk-pp-panel:nth-child(2),
.mk-pp-r:nth-of-type(3):checked ~ .mk-pp-panels .mk-pp-panel:nth-child(3) { display:block; }
/* keyboard focus lands on the invisible radio, so the ring has to be drawn on its tab */
.mk-pp-r:nth-of-type(1):focus-visible ~ .mk-pp-tabs .mk-pp-tab:nth-child(1),
.mk-pp-r:nth-of-type(2):focus-visible ~ .mk-pp-tabs .mk-pp-tab:nth-child(2),
.mk-pp-r:nth-of-type(3):focus-visible ~ .mk-pp-tabs .mk-pp-tab:nth-child(3) {
outline:2px solid var(--maroon); outline-offset:2px; }
.mk-price { position:relative; background:var(--white); border-radius:20px; padding:24px; text-align:center; box-shadow:var(--card-shadow); }
.mk-price-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--salmon);
color:var(--on-salmon); font:700 11px var(--sans); letter-spacing:.04em; padding:4px 12px; border-radius:999px; text-transform:uppercase; }
.mk-price-name { font-family:var(--serif); font-size:18px; color:var(--maroon); }
.mk-price-amt { display:flex; align-items:baseline; justify-content:center; gap:4px; margin-top:8px; }
.mk-price-amt .n { font-family:var(--serif); font-size:34px; font-weight:600; color:var(--deep); }
.mk-price-amt .per { font-size:15px; color:var(--muted); }
/* What you get, under the price. Left-aligned inside a centred card on purpose: ten centred lines of
ragged text is a poem, not a list you can scan. The bold lead is the claim, the rest is the proof. */
.mk-feats { list-style:none; margin:18px 0 4px; padding:0 2px; display:grid; gap:10px; text-align:left; }
.mk-feat { display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start;
font-size:13.5px; line-height:1.45; color:var(--body2); }
/* the check only — the platform glyphs live inside the text and align themselves */
.mk-feat > svg { margin-top:1px; }
/* is the claim, is emphasis inside a detail ("Messages", "CarPlay") — two elements rather
than two classes, so neither rule can out-specify the other by accident. */
.mk-feat strong { font-weight:600; color:var(--maroon); }
.mk-feat b { font-weight:600; color:var(--body); }
/* A platform glyph and its name travel together: inline-flex so the pair wraps as one unit and the icon
sits on the text's centre line rather than its baseline. */
.mk-brand { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.mk-brand + .mk-brand { margin-left:2px; }
.mk-brand svg { flex:none; }
.mk-price .mk-btn { margin-top:16px; padding:14px; font-size:16px; border-radius:13px; }
.mk-cta-note { display:block; font-size:12px; font-weight:500; opacity:.82; margin-top:2px; }
.mk-price-fine { text-align:center; font-size:12.5px; color:var(--muted2); margin-top:12px; }
/* prominent trial line at the top of the pricing section */
.mk-trial-lead { font-family:var(--serif); color:var(--maroon); font-size:clamp(22px, 6vw, 28px);
font-weight:500; line-height:1.3; margin:12px 0 6px; max-width:560px; }
.mk-trial-lead strong { font-weight:600; }
/* Pricing header: the centred eyebrow + serif heading pair every other section opens with. It gets its
own centring parent (like .mk-signup-head) rather than centring the section, because the cards below
need the full inner width and mk-calls-h is capped at 18ch. */
.mk-price-head { display:flex; flex-direction:column; align-items:center; text-align:center;
margin:0 auto 26px; }
.mk-price-head .mk-calls-h { margin-bottom:0; }
/* ---- faq ---- */
.mk-faq { display:flex; flex-direction:column; margin-top:14px; }
.mk-q { border-top:1px solid var(--hair); padding:15px 0; }
.mk-q:last-child { border-bottom:1px solid var(--hair); }
.mk-q-t { font:600 15px var(--sans); color:var(--deep); }
.mk-q-d { font-size:13.5px; color:var(--body2); margin-top:5px; line-height:1.45; }
/* ---- final cta ---- */
.mk-final-h { font-family:var(--serif); font-size:30px; font-weight:600; color:#F6E9DF; line-height:1.1; margin:0; }
.mk-final-sub { font-family:var(--serif); font-size:17px; font-weight:500; color:#D8A79A; margin:10px 0 0; }
.mk-deep .mk-btn { margin-top:22px; max-width:420px; margin-left:auto; margin-right:auto; }
/* ============ DESKTOP ============ */
@media (min-width:900px) {
.mk-header { padding:20px 48px; border-bottom:1px solid #e0d2c2; max-width:1320px; margin:0 auto; }
.mk-wordmark { font-size:23px; }
.mk-brand .mk-ava { width:32px; height:32px; }
.mk-navlink { display:none; }
.mk-nav-desktop { display:flex; }
.mk-section { padding:56px 48px; }
.mk-hero { padding:56px 48px 50px; }
.mk-hero-tight { padding-bottom:22px; }
.mk-hero-grid { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1fr 540px; gap:30px; align-items:center; }
.mk-h1 { font-size:clamp(42px, 4.6vw, 62px); line-height:1.04; }
.mk-h1 span { white-space:normal; } /* wide desktop column fits each line; avoid overflow if it narrows */
.mk-sub { font-size:19px; margin-top:22px; }
.mk-hero-cta-row { display:flex; align-items:center; gap:16px; margin-top:30px; }
.mk-hero-cta-row .mk-btn { width:auto; padding:16px 28px; }
.mk-hero-cta-row .mk-trust { margin:0; text-align:left; font-size:14px; }
.mk-hero-media { margin-top:0; }
.mk-mabel { width:210px; margin-right:-12px; }
.mk-mabel img { animation-duration:5s; }
.mk-phone { width:300px; border-radius:40px; padding:9px; box-shadow:0 28px 60px rgba(50,28,24,.30); }
.mk-screen { border-radius:32px; }
.mk-steps { flex-direction:row; gap:26px; }
.mk-step { flex-direction:column; }
.mk-cards { grid-template-columns:repeat(4,1fr); }
/* The grid lives on .mk-checks (the items' direct parent) — on .mk-checks-inner it had a single
child, so every check stacked in the left 1fr track and the right column sat empty. */
.mk-checks-inner { max-width:900px; margin:0 auto; }
.mk-checks { display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; }
.mk-faq-inner { max-width:760px; margin:0 auto; }
.mk-final-h { font-size:44px; }
.mk-footer { padding:26px 48px; }
}
/* ===== App screens: signup / verify (cream, focused, mobile-canonical) ===== */
body.mk-app { background:var(--cream); }
.mk-app-header { display:flex; align-items:center; gap:10px; padding:14px 22px 4px; max-width:520px; margin:0 auto; }
.mk-app-header .mk-wordmark { font-size:18px; }
.mk-back { display:inline-flex; align-items:center; color:var(--maroon); text-decoration:none; }
.mk-app-main { max-width:520px; margin:0 auto; padding:12px 26px 44px; }
.mk-reassure { display:flex; align-items:center; gap:13px; margin:6px 0 6px; }
.mk-reassure .mk-ava { width:56px; height:56px; background:var(--nude); }
.mk-reassure-title { font-family:var(--serif); font-size:22px; color:var(--maroon); font-weight:600; line-height:1.15; }
.mk-reassure-sub { font-size:14px; color:var(--body); margin-top:2px; line-height:1.4; }
.mk-plan-note { font-size:13px; color:var(--body2); margin:0 0 16px; }
.mk-plan-note strong { color:var(--maroon); }
.mk-plan-note a { color:var(--maroon); }
.mk-form-card { background:var(--white); border-radius:20px; padding:22px; box-shadow:var(--card-shadow); }
.mk-field-label { font:600 13px var(--sans); color:var(--deep); }
.mk-input-group { display:flex; align-items:center; gap:8px; border:1.5px solid var(--line); border-radius:13px; padding:12px 15px; margin-top:8px; background:#fff; }
.mk-input-group.err { border-color:#C2544C; }
.mk-input-prefix { font:600 15px var(--sans); color:var(--muted2); flex:none; }
.mk-input { border:0; outline:0; background:transparent; font:400 17px var(--sans); color:var(--deep); flex:1; min-width:0; letter-spacing:.02em; }
.mk-input::placeholder { color:#b8a99e; }
.mk-field-err { font:500 12.5px var(--sans); color:#B3423A; margin-top:7px; }
.mk-consent { display:flex; gap:11px; align-items:flex-start; margin-top:16px; }
.mk-consent input { flex:none; width:20px; height:20px; margin-top:2px; accent-color:var(--maroon); }
.mk-consent-copy { font-size:12px; line-height:1.5; color:var(--body2); }
.mk-consent-copy a { color:var(--maroon); }
.mk-optional { color:var(--eyebrow); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; }
/* Click-wrap notice under the signup CTA. Replaces the old Terms checkbox: submitting the form IS the
acceptance, so this has to sit with the button and stay legible — conspicuousness is what makes it
enforceable. Same type size as .mk-consent-copy; do not shrink it below that. */
.mk-clickwrap { margin-top:14px; font-size:12px; line-height:1.5; color:var(--body2); text-align:center; }
.mk-clickwrap a { color:var(--maroon); text-decoration:underline; }
.mk-form-card .mk-btn { margin-top:18px; padding:15px; border-radius:13px; }
.mk-btn:disabled, .mk-btn.is-disabled { background:#EBD5CE; color:#B18C82; cursor:default; }
.mk-foot-note { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:18px; font-size:12.5px; color:var(--muted); }
/* Compliance signal under the signup foot-note. One quiet grey line — the seal read as a fake award to
consumers; this keeps the reassurance for the one carrier reviewer who looks, without the billboard. */
.mk-compliance-line { text-align:center; margin-top:16px; font-size:11px; color:var(--muted2); }
.mk-compliance-line a { color:var(--muted2); text-decoration:underline; text-underline-offset:2px; }
.mk-alt { text-align:center; font-size:13px; color:var(--body); margin-top:16px; }
.mk-alt a { color:var(--maroon); font-weight:600; }
/* Verification code: ONE wide field (see codeFieldHtml() in templates.ts for why it is not six boxes).
padding-left equals letter-spacing on purpose: centred text includes the trailing letter-space in its
width, which pushes the digits half a space left of true centre — an equal left pad cancels it exactly. */
.mk-code-field { margin-top:10px; }
.mk-code-input { box-sizing:border-box; display:block; width:100%; height:58px; padding:0 0 0 .3em;
border:1.5px solid var(--line); border-radius:12px; background:#fff; outline:0;
text-align:center; font:600 29px var(--sans); color:var(--deep);
letter-spacing:.3em; font-variant-numeric:tabular-nums; }
.mk-code-input::placeholder { color:#DDD1C6; font-weight:600; }
.mk-code-input:focus { border-color:var(--maroon); box-shadow:0 0 0 3px rgba(92,42,49,.10); }
.mk-code-field.err .mk-code-input { border-color:#C2544C; }
.mk-resend { text-align:center; font:500 13px var(--sans); color:var(--body); margin-top:14px; }
.mk-resend button { background:none; border:0; color:var(--maroon); font-weight:700; cursor:pointer; padding:0; font-size:13px; font-family:var(--sans); }
.mk-resend button:disabled { color:var(--muted2); cursor:default; }
.mk-msg { text-align:center; font:500 13px var(--sans); color:var(--maroon); margin-top:14px; min-height:1.1em; }
.mk-msg.error { color:#B3423A; }
/* ===== Account / payment-success page ===== */
.mk-acc-hero { text-align:center; padding:14px 0 8px; }
.mk-badge { width:64px; height:64px; border-radius:50%; background:var(--maroon); display:flex; align-items:center; justify-content:center; margin:6px auto 0; }
.mk-acc-h { font-family:var(--serif); font-size:34px; font-weight:600; color:var(--maroon); line-height:1.05; margin:16px 0 0; text-align:center; }
.mk-acc-h.mk-left { text-align:left; font-size:26px; margin:8px 0 6px; }
.mk-acc-sub { font-size:15.5px; color:var(--body); margin:8px 0 0; line-height:1.45; text-align:center; }
.mk-app-main .mk-form-card { margin-top:16px; }
.mk-card-h { font-family:var(--serif); font-size:18px; color:var(--maroon); font-weight:600; margin-bottom:4px; }
.mk-acc-note { font-size:14px; line-height:1.5; color:var(--body2); margin:8px 0 0; }
.mk-acc-note strong { color:var(--deep); font-weight:600; }
/* Account-page cards run tighter than the signup forms sharing .mk-form-card: the page is a utility
screen, and the goal is info line + plan + contact photo all visible without scrolling. */
.mk-tight { padding:14px 18px; }
.mk-app-main .mk-form-card.mk-tight { margin-top:12px; }
.mk-acc-line { display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; font-size:14.5px; color:var(--body2); }
.mk-acc-line b { color:var(--deep); font-weight:600; }
.mk-acc-item { display:inline-flex; align-items:center; gap:6px; }
.mk-acc-check { flex:none; }
.mk-acc-off { color:var(--muted2); font-weight:600; }
.mk-contact-hint { font-size:12.5px; color:var(--muted2); margin:2px 0 0; }
.mk-photo-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:10px; }
.mk-photo-card { position:relative; display:block; width:100%; padding:0; border:1px solid var(--hair); border-radius:12px; overflow:hidden; background:var(--white); cursor:pointer; text-align:left; font:inherit; transition:transform .12s ease; }
.mk-photo-card:active { transform:scale(.96); }
.mk-photo-card img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; transition:opacity .12s ease; }
/* Busy = the beat between tap and the share sheet (the full-res fetch). The tapped tile dims and
spins so the tap visibly landed; account.js clears it the moment the sheet is invoked. */
.mk-photo-card.is-busy img { opacity:.5; }
.mk-photo-card.is-busy::after { content:''; position:absolute; top:calc(50% - 27px); left:calc(50% - 11px); width:22px; height:22px; border:2.5px solid var(--maroon); border-top-color:transparent; border-radius:50%; animation:mk-spin .7s linear infinite; }
@keyframes mk-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mk-photo-card.is-busy::after { animation:none; border-top-color:var(--maroon); opacity:.6; } }
.mk-photo-label { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 10px; }
.mk-photo-label b { font:600 13px var(--sans); color:var(--deep); }
.mk-photo-hex { font-size:11px; color:var(--muted2); letter-spacing:.03em; }
.mk-contact-note { text-align:center; font-size:12.5px; line-height:1.5; color:var(--muted2); margin:10px 0 0; }
.mk-acc-tz { margin-top:12px; }
.mk-tz-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.mk-tz-row .mk-btn { margin-top:0; }
.mk-select { flex:1; min-width:0; border:1.5px solid var(--line); border-radius:12px; padding:11px 12px; font:400 15px var(--sans); color:var(--deep); background:#fff; }
.mk-btn-sm { width:auto; padding:11px 16px; font-size:14px; border-radius:12px; }
.mk-muted { display:block; font-size:12.5px; color:var(--muted); margin-top:8px; }
.mk-acc-link { margin-top:12px; }
.mk-acc-link a { color:var(--maroon); font-weight:600; text-decoration:none; }
.mk-acc-actions { text-align:center; margin-top:24px; }
.mk-textbtn { background:none; border:0; color:var(--maroon); font:600 14px var(--sans); cursor:pointer; text-decoration:underline; }
/* Self-serve deletion: the entry button sits under Log out, quieter than it; the confirm card it
expands is the one red thing on the page (same red as .mk-msg.error). */
.mk-danger-entry { margin-top:14px; }
.mk-textbtn-danger { color:#B3423A; font-weight:500; font-size:13px; }
.mk-app-main .mk-form-card.mk-danger { border:1px solid #E3B9B4; }
.mk-danger .mk-card-h, .mk-danger .mk-acc-note strong { color:#B3423A; }
.mk-btn-danger { background:#B3423A; color:#FBEFE9; }
.mk-danger .mk-keep { margin-top:12px; }
/* /checkout plan radios (returning-user resubscribe) */
.mk-plan-radios { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.mk-plan-radio { display:grid; grid-template-columns:auto 1fr; column-gap:11px; row-gap:3px; align-items:center;
border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer; }
.mk-plan-radio:has(input:checked) { border-color:var(--salmon); box-shadow:0 0 0 1px var(--salmon); }
.mk-plan-radio input { grid-row:1 / span 2; accent-color:var(--maroon); }
.mk-plan-radio-main { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.mk-plan-radio-name { font:600 15px var(--sans); color:var(--deep); }
.mk-plan-radio-price { font:600 15px var(--sans); color:var(--maroon); white-space:nowrap; }
.mk-plan-radio-sub { grid-column:2; color:var(--muted); font-size:12.5px; }
/* content pages (terms / privacy / sms-terms / about) rendered in the marketing chrome */
.mk-page-body h1 { font-family:var(--serif); color:var(--maroon); font-weight:600; font-size:30px; line-height:1.12; margin:0 0 6px; }
.mk-page-body address { font-style:normal; color:var(--body); line-height:1.6; margin-top:8px; }
.mk-page-body .business-info { list-style:none; padding-left:0; margin:12px 0 0; }
.mk-page-body .business-info li { margin:4px 0; }
.mk-page-body .muted { color:var(--muted); font-size:14px; }
.mk-page-body .draft { background:#FBF3EF; border:1px solid #E8C24A; padding:8px 12px; border-radius:8px; font-size:13px; }
/* Hero mockup carousel — a cream "device showcase" that crossfades phone screens (driven by carousel.js).
Each slide is centered; iframes hold the standalone mockups (scaled to fit) and the threadMock slide is
the existing class-styled phone. The cream card matches the mockups' own background so edges blend. */
.mk-carousel { position:relative; flex:none; z-index:1; width:264px; height:496px; border-radius:34px; overflow:hidden; background:#ECDCCF; box-shadow:0 20px 48px rgba(50,28,24,.22); }
.mk-cslide { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .7s ease; }
.mk-cslide.is-active { opacity:1; }
.mk-cslide iframe { flex:none; border:0; width:446px; height:904px; transform:scale(.55); transform-origin:center; pointer-events:none; background:transparent; }
.mk-cslide .mk-phone { transform:scale(.86); }
@media (prefers-reduced-motion:reduce){ .mk-cslide { transition:none; } }
@media (min-width:900px){
.mk-carousel { width:300px; height:576px; }
.mk-cslide iframe { transform:scale(.64); }
.mk-cslide .mk-phone { transform:scale(.96); }
}
/* "Really important reminders" calling-feature section */
.mk-calls { text-align:center; display:flex; flex-direction:column; align-items:center; }
.mk-calls-h { font-family:var(--serif); color:var(--maroon); font-weight:600; font-size:30px; line-height:1.14; margin:8px 0 12px; max-width:18ch; text-wrap:balance; }
.mk-calls-sub { color:var(--body); font-size:16px; line-height:1.55; max-width:46ch; margin:0 0 30px; }
@media (min-width:900px){ .mk-calls-h { font-size:40px; } .mk-calls-sub { font-size:17px; } }
/* "She doesn't mind asking twice" — persistence section on the deep band, where the bright phone
showcase pops. Mirrors mk-calls-h/sub but with light-on-deep text. */
.mk-persist { text-align:center; display:flex; flex-direction:column; align-items:center; }
.mk-persist .mk-eyebrow { color:#D8A79A; }
.mk-persist-h { font-family:var(--serif); color:#F6E9DF; font-weight:600; font-size:30px; line-height:1.14; margin:8px 0 12px; max-width:18ch; text-wrap:balance; }
.mk-persist-sub { color:#E7D3CA; font-size:16px; line-height:1.55; max-width:48ch; margin:0 0 30px; }
/* On the deep band the phone floats free — drop the nude "showcase card" bg + shadow (the tan box). */
.mk-persist .mk-carousel { background:transparent; box-shadow:none; }
@media (min-width:900px){ .mk-persist-h { font-size:40px; } .mk-persist-sub { font-size:17px; } }
/* ---- UGC testimonials ("Real people, real reminders") — swipeable vertical-video cards ----
Swiping is native CSS scroll-snap (no JS); ugc.js only handles tap-to-play. Sits on the deep berry
band (like the final CTA) so the video cards pop between the cream #calls and nude #pricing bands.
The track bleeds to the viewport edge on mobile so the next card peeks = swipe affordance. */
.mk-ugc { text-align:center; }
.mk-ugc .mk-eyebrow { color:#D8A79A; }
.mk-ugc-h { font-family:var(--serif); color:#F6E9DF; font-weight:600; font-size:30px; line-height:1.14; margin:8px 0 4px; text-wrap:balance; }
.mk-ugc-track { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:22px 26px 6px; margin:0 -26px; scrollbar-width:none; }
.mk-ugc-track::-webkit-scrollbar { display:none; }
.mk-ugc-card { flex:none; width:min(64vw, 240px); margin:0; scroll-snap-align:center; }
.mk-ugc-frame { position:relative; aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:#2A1B1F; box-shadow:0 14px 34px rgba(0,0,0,.35); }
@supports not (aspect-ratio: 9/16) { .mk-ugc-frame::before { content:''; display:block; padding-top:177.78%; } }
.mk-ugc-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.mk-ugc-poster { position:absolute; inset:0; width:100%; border:0; padding:0; background:none; cursor:pointer; display:block; }
.mk-ugc-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mk-ugc-poster:focus-visible { outline:3px solid #F6E9DF; outline-offset:2px; border-radius:18px; }
.mk-ugc-badge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:var(--salmon); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.35); }
.mk-ugc-badge svg { margin-left:3px; }
.mk-ugc-name { font:600 14.5px var(--sans); color:#EBD5CE; margin-top:10px; text-align:center; }
@media (min-width:900px){
.mk-ugc-h { font-size:40px; }
.mk-ugc-card { width:206px; }
.mk-ugc-track { padding-left:48px; padding-right:48px; margin:0 -48px; }
}
/* Center the row when it fits without justify-content:center (which clips the left edge of an
overflowing overflow-x scroller): auto margins on the end cards absorb spare space when the row
fits and resolve to 0 when it overflows, keeping every card scrollable. */
.mk-ugc-card:first-child { margin-left:auto; }
.mk-ugc-card:last-child { margin-right:auto; }
/* Desktop prev/next arrows: a mouse can't swipe and the track's scrollbar is hidden. Markup ships
[hidden]; ugc.js unhides them only while the track overflows, and :not([hidden]) keeps the UA's
display:none authoritative so they never appear on phones (or when everything fits). */
.mk-ugc-wrap { position:relative; }
.mk-ugc-arrow { display:none; position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0; background:var(--salmon); cursor:pointer; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.35); }
.mk-ugc-arrow-prev { left:-12px; }
.mk-ugc-arrow-next { right:-12px; }
.mk-ugc-arrow-prev svg { transform:scaleX(-1); }
.mk-ugc-arrow:disabled { opacity:.35; cursor:default; }
.mk-ugc-arrow:focus-visible { outline:3px solid #F6E9DF; outline-offset:2px; }
@media (min-width:640px){ .mk-ugc-arrow:not([hidden]) { display:flex; } }
/* Tiny salient pills labelling the SMS + voice consent boxes on signup */
.mk-consent-tag { display:inline-block; background:var(--salmon); color:#fff; font:700 9.5px var(--sans); letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:100px; margin-right:6px; vertical-align:1.5px; white-space:nowrap; }
/* ---------------------------------------------------------------------------
Capture landing page (LANDING_VARIANT=capture).
One screen, one job: face → headline → phone field → button, nothing else clickable. Sized so the
button is above the fold on a small phone (iPhone SE, 667px tall) without scrolling — that is the
whole point of the page, so if you add anything here, re-check that.
Reuses .mk-form-card / .mk-btn / .mk-foot-note from the app screens; only the page shell and the
proof strip are new.
--------------------------------------------------------------------------- */
.cap-body { background:var(--cream); }
.cap-main { max-width:460px; margin:0 auto; padding:26px 24px 40px; }
/* Proof strip: the creator's face, first thing on the page, for message match with the ad. */
.cap-proof { display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.cap-face {
width:76px; height:76px; flex:none; border-radius:50%; object-fit:cover;
background:var(--nude); box-shadow:0 6px 18px rgba(60,35,30,.16);
}
.cap-quote p {
margin:0 0 3px; font-family:var(--serif); font-size:16px; line-height:1.35;
color:var(--deep); font-style:italic;
}
.cap-quote span { font-size:12px; color:var(--muted); }
.cap-h1 {
font-family:var(--serif); font-size:34px; line-height:1.12; font-weight:600;
letter-spacing:-0.02em; color:var(--maroon); margin:0 0 20px;
}
/* The form card carries the page here, so let it sit tight under the headline. */
.cap-main .mk-form-card { margin-top:0; }
.cap-main .mk-msg { text-align:center; }
@media (max-width:380px) {
.cap-main { padding:18px 18px 32px; }
.cap-h1 { font-size:29px; margin-bottom:16px; }
.cap-face { width:64px; height:64px; }
.cap-quote p { font-size:15px; }
}
@media (min-width:520px) {
.cap-main { padding-top:44px; }
.cap-h1 { font-size:38px; }
}
/* ---- Capture page: example text thread -------------------------------------
A phone Messages screen, not a decorative mockup: it teaches the interaction (plain English in,
confirmation back, reminder arrives later) before anyone reads a word of copy.
Fixed height with the thread bottom-anchored, so bubbles animating in push upward like a real
conversation instead of resizing the page and shoving the CTA around mid-scroll. Nothing below this
block may move when the animation runs — that's the constraint to preserve if you edit it.
--------------------------------------------------------------------------- */
.cap-demo {
background:var(--white); border-radius:20px; overflow:hidden;
box-shadow:var(--card-shadow); margin:0 0 18px;
}
.cap-demo-bar {
display:flex; align-items:center; gap:8px; padding:9px 14px;
background:#F3EDE4; border-bottom:1px solid var(--hair);
}
.cap-demo-back { color:var(--muted2); font-size:21px; line-height:1; flex:none; }
.cap-demo-id { display:flex; align-items:center; gap:8px; flex:1; justify-content:center; }
.cap-demo-id .mk-ava { width:26px; height:26px; flex:none; }
.cap-demo-num {
display:flex; flex-direction:column; line-height:1.15;
font-size:13px; font-weight:600; color:var(--deep);
}
.cap-demo-num small { font-size:10.5px; font-weight:400; color:var(--muted2); }
.cap-demo-spacer { width:16px; flex:none; }
/* Bottom-anchored viewport: the thread grows from the bottom edge, older lines slide off the top. */
.cap-demo-view { height:248px; overflow:hidden; display:flex; }
.cap-demo-thread {
display:flex; flex-direction:column; justify-content:flex-end; gap:5px;
width:100%; padding:12px 13px 14px;
}
.cap-demo-label { text-align:center; font-size:10.5px; color:var(--muted2); margin-bottom:2px; }
.cap-demo-label b { font-weight:600; color:var(--muted); }
.md-ts { text-align:center; font-size:10.5px; color:var(--muted2); margin:6px 0 2px; }
.md-ts b { font-weight:600; color:var(--muted); }
.md-row { display:flex; animation:md-pop .22s ease-out; }
.md-row--in { justify-content:flex-start; }
.md-row--out { justify-content:flex-end; }
.md-bubble {
max-width:80%; padding:8px 12px; border-radius:17px; font-size:13.5px; line-height:1.35;
}
.md-bubble--in { background:#EFE8DE; color:var(--deep); border-bottom-left-radius:5px; }
.md-bubble--out { background:var(--maroon); color:var(--cream); border-bottom-right-radius:5px; }
.md-typing {
display:flex; gap:4px; align-items:center; padding:11px 13px;
background:#EFE8DE; border-radius:17px; border-bottom-left-radius:5px;
}
.md-dot { width:6px; height:6px; border-radius:50%; background:var(--muted2); animation:md-blink 1.3s infinite; }
.md-dot:nth-child(2) { animation-delay:.18s; }
.md-dot:nth-child(3) { animation-delay:.36s; }
@keyframes md-pop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes md-blink { 0%,60%,100% { opacity:.32; } 30% { opacity:1; } }
/* Reduced motion: mabel-demo.js renders the thread statically, so kill the entrance/typing animation
and let the viewport grow to fit instead of clipping messages the visitor can no longer watch. */
@media (prefers-reduced-motion: reduce) {
.md-row { animation:none; }
.md-dot { animation:none; }
.cap-demo-view { height:auto; }
}
@media (max-width:380px) {
.cap-demo-view { height:224px; }
.md-bubble { font-size:13px; }
}
/* ---------------------------------------------------------------------------
Friction-killer homepage (LANDING_VARIANT=friction).
The page IS the phone screen: one 412px column, no nav, no footer, nothing clickable but the field.
Everything above the signup card exists to answer "what do I even say to her?" before the visitor
has to read a word of explainer copy.
The demo thread here is deliberately NOT brand-coloured like the capture page's — it uses the system
font stack and iMessage's own green/grey so it reads as a screenshot of a real conversation rather
than a branded illustration. That's the point of it; don't "fix" it to match the palette.
--------------------------------------------------------------------------- */
.fk-body { background:var(--nude); font-family:var(--sans); }
.fk-main { max-width:412px; margin:0 auto; padding-bottom:8px; }
.fk-header { display:flex; align-items:center; justify-content:space-between; padding:10px 20px 4px; }
/* Trust chip: wordmark-height pill with the A2P seal falling inline to its right. Shared — the
friction-killer homepage header links it to #trust, the app header (/welcome) wears it as a badge. */
.mk-pill {
display:flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
background:var(--white); border:1px solid #E6D6C7; border-radius:999px; padding:4px 8px 4px 13px;
box-shadow:0 2px 9px rgba(50,28,24,.08); color:var(--maroon); font:600 12px var(--sans);
}
.mk-pill svg { display:block; flex:none; }
.fk-greet { display:flex; align-items:center; gap:13px; padding:16px 22px 0; }
.fk-greet-img { width:78px; height:78px; object-fit:contain; object-position:bottom; flex:none; }
.fk-greet-h { font-family:var(--serif); font-size:24px; font-weight:600; color:var(--maroon); line-height:1.1; margin:0; }
.fk-greet-sub { font-size:15px; color:var(--body); line-height:1.4; margin:3px 0 0; }
.fk-block { padding:16px 22px 0; }
/* ---- demo thread: iMessage chrome ---- */
.fk-thread { margin:0; font-family:-apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif; }
.fk-thread-bar {
display:flex; align-items:center; gap:6px; padding:8px 12px;
background:#F7F7F7; border-bottom:1px solid #D8D8D8;
}
.fk-thread-back { flex:none; width:26px; display:flex; justify-content:center; }
.fk-thread-id { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.fk-thread-id .mk-ava { width:38px; height:38px; background:#fff; border:1px solid #ececec; }
.fk-thread-name { display:flex; align-items:center; gap:3px; font-size:12px; font-weight:600; color:#000; }
.fk-thread-name span { color:#9b9b9f; font-weight:400; }
.fk-thread-spacer { flex:none; width:26px; }
.fk-thread .cap-demo-view { height:300px; background:#fff; }
.fk-thread .cap-demo-thread { gap:6px; padding:12px 12px 14px; }
.fk-thread .md-ts { font-size:11px; color:#8E8E93; }
.fk-thread .md-ts b { font-weight:600; color:#3a3a3c; }
.fk-thread .md-bubble {
max-width:80%; padding:8px 13px 9px; border-radius:20px; font-size:15px; line-height:1.34;
white-space:pre-line; word-wrap:break-word;
}
.fk-thread .md-bubble--out { background:#34C759; color:#fff; border-bottom-right-radius:7px; }
.fk-thread .md-bubble--in { background:#E9E9EB; color:#1c1c1e; border-bottom-left-radius:7px; }
.fk-thread .md-typing { padding:11px 14px; background:#E9E9EB; border-radius:20px; border-bottom-left-radius:7px; }
.fk-thread .md-dot { background:#8E8E93; }
/* ---- inline signup card: field and button on one row, code revealed below ---- */
.fk-card { padding:18px; }
.fk-phone-row { display:flex; gap:8px; align-items:stretch; margin-top:8px; }
.fk-phone-row .mk-input-group { flex:1; min-width:0; margin-top:0; }
/* min-width holds the slot while the label cycles "Send code" -> "Resend 29s" -> "Resend", so the
countdown never squeezes the number the visitor just typed. */
.fk-card .fk-phone-row .fk-send {
width:auto; min-width:112px; white-space:nowrap; padding:0 15px; margin-top:0;
border-radius:13px; font-size:15px;
}
/* Left-aligned here (not centred like the app screens) because it sits under a left-aligned field and
reads as part of the form. Same type size as everywhere else — see .mk-clickwrap. */
.fk-card .mk-clickwrap { text-align:left; margin-bottom:0; }
.fk-sent {
display:flex; align-items:center; gap:8px; margin-top:2px; padding-top:16px;
border-top:1px solid var(--card-border); font:500 13.5px var(--sans); color:var(--body2);
}
.fk-sent svg { flex:none; }
.fk-sent b { color:var(--deep); font-weight:600; }
.fk-card #code-step .mk-field-label { margin-top:16px; }
.fk-card #code-step .mk-btn { margin-top:16px; }
/* The status line only exists once there is something to say. Elsewhere .mk-msg reserves a line so the
layout doesn't jump; on this card that reserved line plus the two default margins left ~45px of
blank white under the click-wrap, which read as a mistake. Collapse it until it has text. */
.fk-card .mk-msg { margin:12px 0 0; }
/* Collapsed, not display:none — the element stays in the a11y tree so its aria-live announcement still
fires the moment signup.js writes into it. */
.fk-card .mk-msg:empty { min-height:0; margin:0; }
/* ---- trust ---- */
.fk-trust { padding:18px 22px 26px; }
.fk-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.fk-chip { background:rgba(92,42,49,.08); color:var(--maroon); border-radius:999px; padding:7px 13px; font:600 13px var(--sans); }
.fk-priv {
display:flex; align-items:center; justify-content:center; gap:6px; text-align:center;
font:500 12.5px var(--sans); color:var(--muted); margin:13px 0 0;
}
.fk-priv svg { flex:none; }
.fk-company { display:flex; align-items:center; justify-content:center; gap:11px; margin-top:14px; text-decoration:none; }
.fk-company svg { display:block; flex:none; }
.fk-company span { font:500 12px var(--sans); color:var(--muted2); text-align:left; line-height:1.4; }
@media (max-width:380px) {
.fk-greet, .fk-block { padding-left:16px; padding-right:16px; }
.fk-trust { padding-left:16px; padding-right:16px; }
.fk-greet-img { width:66px; height:66px; }
.fk-greet-h { font-size:22px; }
.fk-card { padding:16px; }
.fk-thread .cap-demo-view { height:262px; }
.fk-thread .md-bubble { font-size:14.5px; }
.mk-code-input { height:52px; font-size:25px; }
}
/* ---------------------------------------------------------------------------
Demo-led homepage hero + signup band (LANDING_VARIANT=homepage).
The friction page's demo thread moved into the sales hero's right column and its signup card into a
full-bleed band underneath. Nothing new is styled here — only the geometry that changes when those
pieces stop being the whole page: the thread gains a phone bezel around it, and the card gains a strip
of its own. These rules come after the .fk-* block on purpose; they share its specificity and win on
source order.
--------------------------------------------------------------------------- */
/* The screen holds a white Messages thread, not the dark spokesperson video, so the bezel colour that
.mk-screen paints to hide an unpainted video frame would show through as a black gutter here. */
.mk-screen-thread { background:#fff; }
/* Taller than the friction page's bare thread (300px): inside a bezel, a squat screen reads as a widget
rather than a phone. Still shorter on small screens than the 468px the design asks for, so the signup
band below it starts within the first scroll rather than a full screen down. */
.fk-thread .mk-hero-thread-view { height:330px; }
/* The band. Full-bleed, the same nude as the hero, and since 2026-07-28 with NO hairline and no eyebrow
above its heading: it is the hero's conclusion, not a new subject, and both were drawing a line under
the caption where the reader should just keep going. Everything else on the page still announces itself
with an eyebrow; this one section deliberately doesn't. */
/* Bottom padding back to 48px on 2026-08-01, reversing the 16px of 07-30: that tightening existed only
because the band ENDED with the registration line and fine print belongs against the edge it is
printed above. The line now prints inside the card, so the band ends with the trust bar again — the
arrangement 48px was written for — and 16px under a row of trust claims crowds them into the brown
example strip. */
.mk-signup-band { background:var(--nude); padding:18px 22px 48px; }
.mk-signup-card { max-width:620px; margin:0 auto; }
/* Centres the heading the way .mk-calls does for the other sections — mk-calls-h is capped at 18ch, so
without a centring parent it would sit left of a card that is centred. */
.mk-signup-head { display:flex; flex-direction:column; align-items:center; text-align:center;
margin:0 auto 20px; }
.mk-signup-head .mk-calls-h { margin-bottom:0; }
/* The free-entry promise, directly under the heading that asks for a phone number. Muted and smaller
than the heading on purpose: it answers the "what will this cost me" objection without competing
with the ask itself. */
.mk-signup-sub { margin:10px 0 0; font-size:1.02rem; color:var(--muted); }
/* The registration line, printed at the foot of the signup card itself (moved inside it 2026-08-01; it
closed the band under the trust bar from 07-30). Set as a stamp, not a sentence: bold, uppercase,
widely tracked — the typography of something printed on a certificate, which is the whole job of the
line. The hairline above it is .fk-sent's, the card's own way of marking off a footer band, so the
stamp reads as printed on the card rather than as a fifth line of the form.
ONE LINE AT EVERY WIDTH, phones included — which is what makes it read as fine print rather than as a
short paragraph. The size is therefore not a clamp between two guesses but a fit: the string measures
about 46em set like this, so dividing the available width by 50 sizes it to its container with ~8% in
hand for a fallback font rendering wider than Hanken Grotesk, and 10px is the ceiling it stops at once
there is room to spare.
What it divides changed with the move. The line used to span the band, so the width was the viewport
less the band's padding; inside the card it gets the CARD's inner width, which is the smaller of
620px - 36px of card padding (584px) and the viewport less that padding plus the band's 22px sides
(100vw - 80px). Below 380px the card's padding drops to 16px, which only makes the true width larger
than this figure — the arithmetic stays conservative, never optimistic, because the failure mode of
optimism is an overflowing nowrap.
The cost of the move is real and was accepted: a 620px container instead of the viewport means the
ceiling is reached later and phones set it smaller than before (~5.6px at 360px, against ~6.2px in the
band). Genuinely small — but the alternative at 77 characters is two lines, and this line's whole job
is to look like the small print on a licence. If legibility ever wins over the stamp, delete the
nowrap and the font-size fit and let it set two lines at 10px; nothing else here depends on it.
Neutral ink, NOT the gold of .mk-eyebrow, even though the two share a shape. The band deliberately
opens with no eyebrow (see .mk-signup-band), and gold is how this page announces a new section — the
last line of one is not that.
Uppercased in CSS, sentence case in the HTML: screen readers pronounce some all-caps strings letter by
letter, and the claim should be spoken as the sentence it is. */
.fk-card .mk-signup-official {
margin:14px 0 0; padding-top:13px; border-top:1px solid var(--card-border);
text-align:center; white-space:nowrap;
font-family:var(--sans); font-weight:700;
font-size:min(10px, calc(min(584px, 100vw - 80px) / 50));
letter-spacing:.03em; line-height:1.5; text-transform:uppercase; color:var(--body2); }
/* The status line sits directly above the stamp and collapses when empty (.fk-card .mk-msg:empty), so
the stamp's own top margin is the entire gap in the common case — but when signup.js writes an error
into it, .mk-msg's 12px would otherwise stack against the stamp's 14px. Nothing to fix: they are
separated by the hairline, and 26px above a rule reads as deliberate. Noted so it isn't "tidied". */
/* Trust bar: four claims under the signup card, one row on desktop, wrapping on narrow screens. Labels
don't wrap internally (a two-line "Encrypted & Secure" reads as two claims), so the row breaks
between items instead. The column gap is fluid because the four labels total ~800px and the desktop
content box is 804px at the 900px breakpoint — a fixed 40px gap fits by two pixels, i.e. it wraps the
moment a fallback font renders a hair wider. Shrinking the gap on narrower viewports keeps the single
row real rather than nominal, and gives phones tighter pairs.
Phones want two rows of two, and the two long labels ("Encrypted & Secure" + "We Never Sell Your
Information") are the pair that doesn't fit at 13px — they were taking a line each. The label size is
therefore fluid below 449px as well, which is the only way to pair them without wrapping a label or
cutting the copy. Both clamps hold their old value from 449px/550px up, so desktop is untouched.
Everything here is a best effort at a pairing, never a guarantee: flex-wrap means the failure mode on
an unusually narrow screen is the item dropping to its own line, exactly as it does today.
No rule above it: the band already opens with one, and a second a few hundred pixels down bracketed
the bar into a strip of its own rather than letting it settle under the card. The top margin carries
the separation on its own, so it is wider than the 16px this used against the hero caption. */
.mk-trustbar { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
gap:12px clamp(14px, 4vw, 40px);
max-width:1000px; margin:26px auto 0; padding:0; list-style:none; }
/* The flag is 15px tall against 20px line icons; without this the flag's row sits a pixel high. */
.mk-tb-item { display:flex; align-items:center; gap:8px; min-height:20px; }
.mk-tb-item span { font-family:var(--sans); font-weight:600; font-size:clamp(10.5px, 2.9vw, 13px);
color:var(--body2); white-space:nowrap; }
.mk-tb-icon, .mk-tb-flag { flex:none; }
.mk-tb-flag { border-radius:2px; }
/* Rotating example texts: a full-bleed white strip below the signup band. All eight are in the DOM; one
is visible at a time. They are absolutely positioned in a fixed-height box so a longer line can never
resize the strip mid-fade — it is tall enough for the two rows the longest line takes on a phone, and
that height never changes. (It was a white pill around each line until 2026-07-28; the pill resized
with every sentence, which made the box the thing you watched.)
Timing: every line runs the SAME keyframes for the WHOLE cycle and is offset by its own inline
animation-delay (one --ex-step per position), so the percentages below are fractions of the cycle, not
of a slot: within its 4.6s slot a line fades up over ~0.9s, holds ~2.8s, fades out over ~0.9s, and is
invisible for the other seven slots. That ties them to the LIST LENGTH — eight items, 12.5% each — AND
to the step: change --ex-step and the 2.45%/10.05% marks move with it, because they are a fraction of
eight slots, not of one. A test pins the length; this comment is the only record of the rest. */
.mk-ex-band { background:var(--deep); padding:18px 22px; }
.mk-examples { --ex-step:4.6s; --ex-cycle:calc(var(--ex-step) * var(--ex-count));
position:relative; min-height:46px; max-width:860px; margin:0 auto; padding:0; list-style:none;
display:flex; align-items:center; justify-content:center; }
.mk-ex-line { position:absolute; left:0; right:0; text-align:center; opacity:0;
animation:mk-ex-fade var(--ex-cycle) linear infinite; }
.mk-ex-line span { display:inline-block; max-width:94%; font:500 15px var(--sans); color:#F6E9DF;
line-height:1.45; }
/* Hovering holds the line still, the same courtesy the hero carousel extends to anyone reading it. */
.mk-examples:hover .mk-ex-line { animation-play-state:paused; }
@keyframes mk-ex-fade { 0%, 12.5%, 100% { opacity:0; } 2.45%, 10.05% { opacity:1; } }
/* Reduced motion: no rotation at all. The first example stays up — an example that never changes is
still an example, whereas a stack of eight would be a wall. */
@media (prefers-reduced-motion:reduce) {
.mk-ex-line { animation:none; }
.mk-ex-line:first-child { opacity:1; }
}
@media (min-width:900px) {
.fk-thread .mk-hero-thread-view { height:468px; }
.mk-signup-band { padding:24px 48px 18px; }
/* One line fits at this width, so the strip only has to be one line tall. */
.mk-ex-band { padding:20px 48px; }
.mk-examples { min-height:26px; }
.mk-ex-line span { font-size:16px; }
}
@media (max-width:380px) {
.fk-thread .mk-hero-thread-view { height:300px; }
.mk-signup-band { padding-left:16px; padding-right:16px; }
}
/* ---------------------------------------------------------------------------
Welcome / consent gate (/welcome).
The emptiest screen in the product on purpose: Mabel, one line of ask, the two consent strings, one
button. Anything added here competes with the single tap the whole funnel depends on.
--------------------------------------------------------------------------- */
.mk-app-pill { margin-left:auto; }
.wg-hero { padding-top:6px; }
.wg-mabel { display:block; margin:0 auto; width:104px; height:134px; object-fit:contain; object-position:bottom; }
.wg-hero .mk-acc-h { margin-top:10px; font-size:30px; }
.wg-hero .mk-acc-sub { max-width:21em; margin-left:auto; margin-right:auto; }
/* The hook gets its own line and the number gets weight — for a 55+ visitor, "who is this texting
me?" is the moment the welcome text either lands or gets reported as spam. */
.wg-hero .mk-acc-sub strong { display:block; color:var(--deep); font-weight:600; margin-bottom:2px; }
.wg-hero .mk-acc-sub b { color:var(--deep); font-weight:600; white-space:nowrap; }
@media (max-width:380px) {
.wg-mabel { width:88px; height:113px; }
.wg-hero .mk-acc-h { font-size:27px; }
}