/**
 * Marty on the website.
 *
 * Marty's eyes, colours and cards are copied from the console's own code
 * (admin: src/components/marty/marty.css, MartyPanel, MartyDraftCard,
 * MartyBillingCard, pages/MartyApp.tsx), so the site shows him as he is.
 *   Marty blue on dark  #67B5FF   on light  #1273DE
 *   Amber ("needs you") #F3C155   on light  #E39A0B
 * Every screen here is HTML, not an image: crisp at any size, and made-up data only.
 */

/* ---------- eyes ----------
 * Marty's eyes are the 3D renders from the "Meet Marty" deck (three.js, physical glass shell, bloom),
 * cut into one sprite per eye with its glow kept as transparency:
 *   /assets/marty/eye-dark.webp   white glass, blue underlight, navy glow   (dark surfaces)
 *   /assets/marty/eye-amber.webp  the same eye in amber: "needs you"        (dark surfaces)
 *   /assets/marty/eye-light.webp  blue glass                                (light surfaces)
 *   /assets/marty/eye-light-amber.webp  the light glass in amber
 * Each eye is a box --d wide and 1.12 x --d tall (the render's proportions). The sprite sits centred
 * on it at 2.2 x --d (1.6 x on light), so the glow spills past the box without moving the layout.
 * Moods only move the box, so every mood keeps the rendered look.
 */
.mty-eyes { --d: 9px; display: inline-flex; align-items: center; gap: calc(var(--d) * .56); flex: none; vertical-align: middle; }
.mty-eyes[data-size="sm"] { --d: 7px; }
.mty-eyes[data-size="lg"] { --d: 14px; }
.mty-eyes[data-size="xl"] { --d: 26px; }
.mty-eyes[data-size="hero"] { --d: clamp(44px, 7vw, 84px); }
.mty-eyes i { position: relative; width: var(--d); height: calc(var(--d) * 1.12); flex: none; }
.mty-eyes i::before, .mty-eyes i::after { content: ""; position: absolute; left: 50%; top: 50%; pointer-events: none;
  width: calc(var(--d) * var(--k, 1.6)); height: calc(var(--d) * var(--k, 1.6)); transform: translate(-50%, -50%);
  background: url("/assets/marty/eye-light.webp") center / 100% 100% no-repeat; transition: opacity .35s ease; }
.mty-eyes i::after { opacity: 0; background-image: url("/assets/marty/eye-light-amber.webp"); }
/* dark surfaces: the rendered glass */
.mty-dark .mty-eyes, .con .mty-eyes, .mp .mty-eyes, .mphone .mty-eyes, .mchip .mty-eyes, .prose .cta-box .mty-eyes, .post-cta-tile .mty-eyes, .mty-eyes.on-dark { --k: 2.2; }
.mty-dark .mty-eyes i::before, .con .mty-eyes i::before, .mp .mty-eyes i::before, .mphone .mty-eyes i::before, .mchip .mty-eyes i::before, .prose .cta-box .mty-eyes i::before, .post-cta-tile .mty-eyes i::before, .mty-eyes.on-dark i::before { background-image: url("/assets/marty/eye-dark.webp"); }
.mty-dark .mty-eyes i::after, .con .mty-eyes i::after, .mp .mty-eyes i::after, .mphone .mty-eyes i::after, .mchip .mty-eyes i::after, .prose .cta-box .mty-eyes i::after, .post-cta-tile .mty-eyes i::after, .mty-eyes.on-dark i::after { background-image: url("/assets/marty/eye-amber.webp"); filter: none; }
.mty-eyes[data-mood="needs-you"] i::before { opacity: 0; }
.mty-eyes[data-mood="needs-you"] i::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mty-eyes[data-mood="calm"] { animation: mty-breathe 4.8s ease-in-out infinite; }
  .mty-eyes[data-mood="calm"] i { animation: mty-blink 6.4s ease-in-out infinite; }
  .mty-eyes[data-mood="thinking"] i { animation: mty-bob 1s ease-in-out infinite; }
  .mty-eyes[data-mood="thinking"] i + i { animation-delay: .16s; }
  .mty-eyes[data-mood="working"] { animation: mty-orbit 1.3s linear infinite; }
  .mty-eyes[data-mood="done"] i { animation: mty-done .62s cubic-bezier(.3,1.6,.5,1) 1; }
  .mty-eyes[data-mood="needs-you"] i { animation: mty-pulse 1.8s ease-in-out infinite; }
}
@keyframes mty-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes mty-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes mty-bob { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(calc(var(--d) * -.45)); } }
@keyframes mty-orbit { to { transform: rotate(360deg); } }
@keyframes mty-done { 0% { transform: scale(1,1); } 35% { transform: scale(1.25,.7); } 70% { transform: translateY(calc(var(--d) * -.35)) scale(.95,1.08); } 100% { transform: none; } }
@keyframes mty-pulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.08); filter: brightness(1.18); } }

/* the "Early access" tag (.ea) lives in site.css, because the nav uses it on every page */

/* ---------- "New: Meet Marty" chip above the gym hero headline ---------- */
.mchip { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 100px; background: #121213; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px rgba(17,18,20,.14); transition: transform .15s; }
.mchip:hover { transform: translateY(-1px); }
.mchip .mty-eyes { --d: 8px; }
.mchip .ea { margin-left: 2px; }
.mchip b { font-weight: 600; color: #9ACFFF; }

/* ---------- dark blocks ---------- */
.mty-dark { --bg: #09090a; --card: #121213; --card-2: #1a1a1b; --line: #232426; --ink: #fff; --ink-2: #959597; --ink-3: #565759; --btn: #fff; --btn-ink: #09090a; --accent: #67B5FF;
  background: #09090a; color: #fff; }
.mty-dark .lede, .mty-dark .dim, .mty-dark .fine { color: #a3a4a7; }
.mty-dark .eyebrow { color: #959597; }
.mty-dark .btn-ghost { color: #fff; border-color: #2c2d30; }
.mty-dark .btn-ghost:hover { border-color: #959597; }
.mty-dark a.accent, .mty-dark .fine a { color: #9ACFFF; }

/* ---------- the console side panel, rebuilt (MartyPanel) ---------- */
.mp { --canvas:#121213; --s2:#161617; --s3:#17181a; --s4:#1a1a1b; --l1:#1a1b1d; --l2:#232426; --l3:#28282b; --i1:#fff; --i2:#e3e4e6; --i3:#959597; --i4:#565759; --brand:#67B5FF; --warn:#F2C14E;
  background: var(--canvas); color: var(--i2); font-family: var(--font); font-size: 13px; line-height: 18px; letter-spacing: -.02em; display: flex; flex-direction: column; min-width: 0; text-align: left; -webkit-font-smoothing: antialiased; }
.mp-hd { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--l1); }
.mp-hd .n { color: var(--i1); font-weight: 500; }
.mp-hd .s { color: var(--i3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-hd .ic { margin-left: auto; display: flex; gap: 10px; color: var(--i3); }
.mp-hd .ic svg, .mp-btn svg, .mp-send svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mp-body { flex: 1; min-height: 0; overflow: hidden; padding: 16px 12px; display: grid; gap: 14px; align-content: start; }
.mp-q { justify-self: end; max-width: 85%; background: var(--s3); color: var(--i1); border-radius: 8px; padding: 6px 10px; }
.mp-step { display: flex; align-items: center; gap: 8px; color: var(--i3); font-size: 12px; }
.mp-a { display: grid; gap: 6px; }
.mp-a p { color: var(--i1); }
.mp-a .w { color: var(--i3); font-size: 12px; line-height: 16px; }
.mp-a ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--i1); }
.mp-a ul li { display: flex; gap: 8px; }
.mp-a ul li span { color: var(--i3); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-src { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 2px; }
.mp-src span { border: 1px solid var(--l2); border-radius: 6px; padding: 1px 6px; font-size: 12px; line-height: 16px; color: var(--i2); }
.mp-card { border: 1px solid var(--l1); border-radius: 8px; background: var(--canvas); overflow: hidden; }
.mp-card.live { border-color: rgba(242,193,78,.25); }
.mp-card .ch { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--l1); }
.mp-card .ch b { color: var(--i1); font-weight: 500; }
.mp-card .ch .m { color: var(--i3); font-size: 12px; }
.mp-card .ch a, .mp-card .ch .lk { margin-left: auto; color: var(--brand); font-size: 12px; white-space: nowrap; }
.mp-card .cb { padding: 10px 12px; display: grid; gap: 6px; }
.mp-card .cb .to { color: var(--i3); font-size: 12px; } .mp-card .cb .to em { font-style: normal; color: var(--i2); }
.mp-card .cb p { color: var(--i1); white-space: pre-line; }
.mp-card .cb .m { color: var(--i3); font-size: 12px; line-height: 16px; }
.mp-card .cb .id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--i4); letter-spacing: 0; }
.mp-card .cf { border-top: 1px solid var(--l1); padding: 8px 12px; display: grid; gap: 8px; }
.mp-card .cf .m { color: var(--i3); font-size: 12px; line-height: 16px; }
.mp-card .row { display: flex; align-items: center; gap: 6px; }
.mp-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--i2); white-space: nowrap; }
.mp-btn.acc { background: var(--brand); color: #07111d; }
.mp-btn.end { margin-left: auto; }
.mp-note { border: 1px solid var(--l1); background: var(--s2); border-radius: 8px; padding: 8px 12px; display: grid; gap: 4px; }
.mp-note b { color: var(--i1); font-weight: 500; display: flex; } .mp-note b .lk { margin-left: auto; color: var(--brand); font-weight: 450; font-size: 12px; }
.mp-note p { color: var(--i2); font-size: 12px; line-height: 16px; }
.mp-ft { flex: none; border-top: 1px solid var(--l1); padding: 8px; }
.mp-in { display: flex; align-items: center; gap: 6px; border: 1px solid var(--l2); background: var(--s2); border-radius: 8px; padding: 6px 6px 6px 12px; color: var(--i4); }
.mp-send { margin-left: auto; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: var(--s4); color: var(--i4); }
.mp-ft small { display: block; padding: 6px 4px 0; font-size: 11px; line-height: 14px; color: var(--i4); letter-spacing: .01em; }

/* the panel open inside the hero console on /gyms/: compact, and it plays a short conversation (marty.js) */
.duo .mp.float { position: absolute; z-index: 2; left: 49%; bottom: 7%; width: min(282px, 33%); height: 64%; border-radius: 12px; box-shadow: 0 0 0 1px #2a2b2e, 0 24px 60px rgba(0,0,0,.45); overflow: hidden; font-size: 12px; line-height: 16px; }
.duo .mp.float .mp-hd { height: 40px; padding: 0 10px; }
.duo .mp.float .mp-hd .s { font-size: 11px; }
.duo .mp.float .mp-body { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 10px; }
.duo .mp.float .mp-body > * { flex: none; }
.duo .mp.float .mp-q { max-width: 90%; align-self: flex-end; }
.duo .mp.float .mp-card .ch, .duo .mp.float .mp-card .cb, .duo .mp.float .mp-card .cf { padding-left: 10px; padding-right: 10px; }
.duo .mp.float .mp-card .ch b { font-size: 12px; }
.duo .mp.float .mp-btn { height: 26px; padding: 0 9px; font-size: 12px; }
.duo .mp.float .mp-src span, .duo .mp.float .m { font-size: 11px; }
.duo .mp.float .mp-ft { padding: 6px; }
.duo .mp.float .mp-in { min-height: 34px; padding: 4px 4px 4px 10px; color: var(--i1); }
.duo .mp.float .mp-in .ph { color: var(--i4); }
.duo .mp.float .mp-in .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duo .mp.float .mp-in .caret { display: inline-block; width: 1px; height: 13px; background: var(--brand); margin-left: 1px; vertical-align: -2px; animation: mty-caret 1s steps(1) infinite; }
.duo .mp.float .mp-send.on { background: var(--brand); color: #07111d; }
@keyframes mty-caret { 50% { opacity: 0; } }
@keyframes mty-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mp .enter { animation: mty-in .32s ease-out both; }
.mp-btn.press { transform: scale(.94); filter: brightness(1.15); transition: transform .12s, filter .12s; }
.mp-card .done-line { color: var(--i2); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.mp-card .done-line svg { width: 13px; height: 13px; stroke: #30d158; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .duo .mp.float { position: relative; left: auto; bottom: auto; width: auto; height: 330px; margin: -56px 14px 0; }
}

/* ---------- the Marty app on a phone, rebuilt (MartyApp) ---------- */
.mphone { position: relative; width: 100%; max-width: 320px; aspect-ratio: 390/844; border-radius: 46px; background: #0b0b0c; padding: 10px; box-shadow: 0 0 0 1px #2a2b2e, inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 90px rgba(0,0,0,.45); }
.mphone::after { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 30%; height: 26px; background: #000; border-radius: 20px; }
.mphone .scr { --l2:#232426; --i2:#e3e4e6; position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: #121213; color: #fff; display: flex; flex-direction: column; font-family: var(--font); letter-spacing: -.02em; -webkit-font-smoothing: antialiased; }
.mphone .sb { height: 50px; flex: none; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 30px 6px; font-size: 13px; font-weight: 600; }
.mphone .sb i { display: flex; gap: 4px; align-items: center; }
.mphone .sb i b { width: 16px; height: 9px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px #fff; position: relative; }
.mphone .sb i b::after { content: ""; position: absolute; inset: 2.5px 5px 2.5px 2.5px; background: #fff; border-radius: 1px; }
.mphone .ah { height: 40px; flex: none; display: flex; align-items: center; padding: 0 12px; color: #959597; font-size: 13px; font-weight: 500; }
.mphone .ah svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.mphone .ah .r { margin-left: auto; }
.mphone .conv { flex: 1; min-height: 0; overflow: hidden; padding: 4px 16px; display: grid; gap: 14px; align-content: start; }
.mphone .q { justify-self: end; max-width: 85%; background: #17181a; border-radius: 8px; padding: 7px 11px; font-size: 15px; line-height: 21px; }
.mphone .a { font-size: 15px; line-height: 22px; color: #fff; }
.mphone .w { font-size: 12px; line-height: 16px; color: #959597; margin-top: -6px; }
.mphone .mp-src span { font-size: 11px; }
.mphone .welcome { display: grid; justify-items: center; text-align: center; gap: 10px; padding-top: 12%; }
.mphone .welcome .mty-eyes { --d: 30px; margin-bottom: 12px; }
.mphone .welcome b { font-size: 20px; font-weight: 500; letter-spacing: -.03em; }
.mphone .welcome p { font-size: 13px; color: #959597; }
.mphone .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 6px; }
.mphone .chips span { border: 1px solid #232426; border-radius: 100px; padding: 5px 10px; font-size: 12px; color: #e3e4e6; }
.mphone .ft { flex: none; border-top: 1px solid #1a1b1d; padding: 10px 16px 18px; display: grid; justify-items: center; gap: 8px; }
.mphone .ft .st { font-size: 12px; color: #959597; }
.mphone .mic { width: 62px; height: 62px; border-radius: 50%; background: #67B5FF; color: #07111d; display: grid; place-items: center; box-shadow: 0 0 24px rgba(103,181,255,.35); }
.mphone .mic svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mphone .ft small { font-size: 10.5px; color: #565759; }
.mphone .mp-card { font-size: 13px; line-height: 18px; }

/* ---------- Marty section on /gyms/ ---------- */
.mty-band { padding: clamp(64px, 9vw, 120px) 0; overflow: hidden; }
.mty-band .inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.mty-band .copy { display: grid; gap: 24px; justify-items: start; }
.mty-band h2 { font-size: clamp(36px, 5vw, 64px); }
.mty-band h2 span { display: block; color: #959597; }
.mty-band .does { display: grid; gap: 0; width: 100%; max-width: 560px; }
.mty-band .does div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid #1f2023; font-size: 15px; line-height: 1.45; color: #a3a4a7; }
.mty-band .does b { color: #fff; font-weight: 600; }
.mty-band .art { position: relative; display: flex; justify-content: center; }
.mty-band .art::before { content: ""; position: absolute; inset: 10% 0 auto; height: 70%; background: radial-gradient(closest-side, rgba(103,181,255,.16), transparent 70%); filter: blur(10px); }
@media (max-width: 900px) { .mty-band .inner { grid-template-columns: 1fr; } .mty-band .does div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- the Marty page ---------- */
.mhero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); }
.mhero .inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.mhero .copy { display: grid; gap: 26px; justify-items: start; }
.mhero h1 { font-size: clamp(52px, 8vw, 112px); }
.mhero h1 span { display: block; font-size: .5em; line-height: 1.04; color: #a3a4a7; letter-spacing: -.02em; margin-top: .25em; }
.mhero .stage { position: relative; display: grid; justify-items: center; gap: 28px; padding: 40px 0; }
.mhero .stage::before { content: ""; position: absolute; left: 50%; top: 42%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(36,66,190,.30), rgba(20,40,130,.12) 45%, transparent 72%); pointer-events: none; transition: background .6s; }
.mhero .stage[data-mood="needs-you"]::before { background: radial-gradient(closest-side, rgba(150,100,30,.24), rgba(90,60,20,.10) 45%, transparent 72%); }
.mhero .face { position: relative; height: clamp(150px, 20vw, 220px); display: grid; place-items: center; }
.mhero .say { position: relative; min-height: 76px; display: grid; justify-items: center; gap: 6px; text-align: center; }
.mhero .say b { font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; letter-spacing: -.02em; color: #fff; transition: opacity .25s; }
.mhero .say span { font-size: 14px; color: #959597; transition: opacity .25s; }
.mhero .say.fade b, .mhero .say.fade span { opacity: 0; }
.mhero .moods { position: relative; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mhero .moods button { background: none; border: 1px solid #232426; color: #959597; border-radius: 100px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.mhero .moods button[aria-pressed="true"] { color: #fff; border-color: #565759; }
@media (max-width: 900px) { .mhero .inner { grid-template-columns: 1fr; } .mhero .stage { padding: 8px 0 0; } }

.mrow { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.mrow.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.mrow.flip .mrow-copy { order: 2; }
.mrow-copy { display: grid; gap: 18px; align-content: center; }
.mrow-copy h2 { font-size: clamp(32px, 4.2vw, 52px); }
.mrow-copy p { color: var(--ink-2); font-size: 17px; line-height: 1.5; max-width: 46ch; }
.mrow-copy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); max-width: 46ch; }
.mrow-copy li { padding-left: 18px; position: relative; }
.mrow-copy li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #1273DE; }
@media (max-width: 900px) { .mrow, .mrow.flip { grid-template-columns: 1fr; } .mrow.flip .mrow-copy { order: 0; } }

/* a stage the light page sets each rebuilt screen on */
.mshot { position: relative; border-radius: 22px; background: #09090a; padding: clamp(20px, 4vw, 48px); display: grid; place-items: center; overflow: hidden; }
.mshot::before { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 80%; background: radial-gradient(closest-side, rgba(103,181,255,.14), transparent 70%); pointer-events: none; }
.mshot > * { position: relative; }
.mshot .mp { width: 100%; max-width: 420px; border-radius: 12px; box-shadow: 0 0 0 1px #232426, 0 24px 60px rgba(0,0,0,.5); overflow: hidden; }
@media (min-width: 900px) { .mshot > .mp { zoom: 1.12; } }
.mshot .mp-card.solo { width: 100%; max-width: 440px; box-shadow: 0 0 0 1px #232426, 0 24px 60px rgba(0,0,0,.5); font-size: 13.5px; line-height: 19px; }

/* the rules he keeps */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; counter-reset: none; }
.rules p { padding: 22px 0; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.45; color: var(--ink); max-width: 48ch; }
.rules p span { color: var(--ink-2); }
@media (max-width: 760px) { .rules { grid-template-columns: 1fr; } }

/* coming next */
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.next div { padding: 18px 0 26px; border-top: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
@media (max-width: 860px) { .next { grid-template-columns: 1fr; } }
.next b { font-size: 17px; }
.next span { color: var(--ink-2); font-size: 15px; line-height: 1.45; }

/* how early access works: a real sequence */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.steps3 div { counter-increment: s; background: var(--card); border-radius: 18px; padding: 26px; display: grid; gap: 10px; align-content: start; }
.steps3 div::before { content: counter(s); font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.04em; color: #1273DE; }
.steps3 b { font-size: 18px; }
.steps3 span { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
@media (max-width: 860px) { .steps3 { grid-template-columns: 1fr; } }

/* blog: one quiet line about Marty inside the existing closing ad on gym posts */
.mty-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: #a3a4a7; }
.mty-note b { color: #fff; font-weight: 600; }
.mty-note:hover span:last-child { color: #fff; }
.mty-note .mty-eyes { flex: none; }

/* in-body CTA line for gym posts */
.cta-box .mty-line { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #a3a4a7; }
.cta-box .mty-line a { color: #9ACFFF; }
@media (max-width: 900px) { .mhero .stage { order: -1; gap: 18px; } .mhero .face { height: 120px; } .mhero .mty-eyes[data-size="hero"] { --d: 52px; } }
/* inside the mid-post ad, undo the box's block-level b and span */
.prose .cta-box .mty-note { margin-top: 10px; }
.prose .cta-box .mty-note span, .prose .cta-box .mty-note b { display: inline; margin: 0; font-family: var(--font); font-size: 13.5px; letter-spacing: 0; }
.prose .cta-box .mty-note .mty-eyes { display: inline-flex; }
.prose .cta-box .mty-note b { font-weight: 600; color: #fff; }

/* blog: the "<X> alternatives with AI for the front desk" table */
.prose h2[id$="-with-ai-for-the-front-desk"] + p + table tbody tr:first-child { background: rgba(18,115,222,.06); }
@media (max-width: 600px) {
  .prose h2[id$="-with-ai-for-the-front-desk"] + p + table thead { display: none; }
  .prose h2[id$="-with-ai-for-the-front-desk"] + p + table tr { display: block; padding: 12px 10px; border-bottom: 1px solid var(--line); }
  .prose h2[id$="-with-ai-for-the-front-desk"] + p + table td { display: block; padding: 2px 0; border: 0; }
  .prose h2[id$="-with-ai-for-the-front-desk"] + p + table td:first-child { font-weight: 700; font-size: 16px; }
  .prose h2[id$="-with-ai-for-the-front-desk"] + p + table td:last-child { color: var(--ink-2); font-size: 14px; }
  .prose h2[id$="-with-ai-for-the-front-desk"] + p + table td:last-child::before { content: "Final say: "; font-weight: 600; color: var(--ink); }
}