/* =============================================
   Missed calls (/missed-calls)

   What happens to a call you can't get to, for the Ralphio System. The
   result first (Ralph's lock screen), four phone squares from missed call
   to lead, the first text taken apart, the three ways the replies can run,
   the number setups and one comparison. Full width: no centred column, the
   gutter is the only margin. Everything is under .mc, so none of it rides
   along on other pages.

   The phone squares are the same bubbles as How it works, drawn small.
   Archivo is declared here as well as in home.css, pricing.css and
   hiw.css, because only those pages use it. Same file, so one download.
============================================= */
@font-face{font-family:'Archivo';src:url('fonts/archivo-condensed.woff2') format('woff2');font-weight:800 900;font-stretch:62% 90%;font-display:swap}

.mc{--ink:#e8e8ea;--ink-2:#a3a4ae;--ink-3:#6c6c77;--line:#26262b;--line-2:#323238;--surface:#121214;
  --sys-ink:#06272a;--sys-dim:rgba(92,225,230,.08);--sys-line:rgba(92,225,230,.3);--bub:#2a2b31;
  --cond:'Archivo','Arial Narrow',sans-serif;--gut:clamp(16px,4.5vw,88px);color:var(--ink)}
.mc h1,.mc h2,.mc h3{text-wrap:balance}
.mc .acc{color:var(--sys)}
/* No rules between sections: the big headings already mark each one. */
.mc-sec{padding:clamp(56px,7vw,110px) var(--gut)}
.mc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.mc-h2{font:600 clamp(2.1rem,1rem + 2.8vw,3.8rem)/1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.mc-lede{color:var(--ink-2);font-size:clamp(1.0625rem,1rem + .25vw,1.2rem);line-height:1.6;max-width:54ch}
.mc-link{font:700 .9375rem/1.3 var(--font-body);color:var(--ink);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.mc-link:hover{text-decoration-thickness:2px}

/* ═══ HERO ═══ */
.mc-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,96px);align-items:center;padding:calc(72px + clamp(48px,7vw,104px)) var(--gut) clamp(40px,5vw,72px)}
.mc-hero h1{font:600 clamp(2.7rem,1rem + 4.8vw,6.2rem)/.94 var(--font-display);letter-spacing:-.028em;max-width:14ch;margin-bottom:26px}
.mc-hero .mc-lede{max-width:50ch}
.mc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:34px}
.mc-ticks{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font:500 .75rem/1.5 var(--font-mono);color:var(--ink-2);list-style:none;padding:0}
.mc-ticks li::before{content:"\2713";color:var(--sys);margin-right:8px}
.mc-result{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,2.4vw,34px);background:radial-gradient(110% 80% at 10% 0%,rgba(106,75,224,.42),transparent 60%),radial-gradient(100% 80% at 100% 100%,rgba(255,122,69,.26),transparent 60%),#140f22}
.mc-rt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.mc-rt b{font:900 clamp(4rem,2rem + 4vw,6.4rem)/.8 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums}
.mc-rt span{font:500 .6875rem/1.4 var(--font-mono);color:var(--ink-2);text-align:right;letter-spacing:.08em;text-transform:uppercase}
.mc-ntf{background:rgba(42,44,50,.85);border-radius:16px;padding:14px 16px;box-shadow:inset 3px 0 0 var(--sys)}
.mc-ntf .nh{display:flex;justify-content:space-between;font:500 .6875rem/1 var(--font-mono);color:var(--ink-2);letter-spacing:.04em;margin-bottom:8px}
.mc-ntf b{display:block;font:700 1.05rem/1.3 var(--font-body)}
.mc-ntf p{color:var(--ink-2);font-size:.9375rem;line-height:1.45;margin-top:4px}
.mc-ntf .acts{display:flex;gap:8px;margin-top:12px}
.mc-ntf .acts span{font:700 .8125rem/1 var(--font-body);background:rgba(255,255,255,.08);padding:9px 12px;border-radius:9px}
.mc-tally{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.mc-tally div{border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.mc-tally b{display:block;font:900 3rem/.85 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums}
.mc-tally .bz b{color:var(--loss)}
.mc-tally span{display:block;margin-top:8px;font:500 .6875rem/1.35 var(--font-mono);color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase}

/* ═══ PHONE SCREENS ═══
   Drawn like the phone's own messages app (dark mode), so the texts read as
   texts: the business on the left in grey, the customer's own replies on the
   right in SMS green. The system font on purpose, because that is what a
   phone shows. Ralph's side is his lock screen, or the conversation in the
   app when he approves a reply. */
.mc .ph{--ph-in:#262629;--ph-out:#30b84f;--ph-dim:#8e8e93;width:100%;aspect-ratio:4/5;border-radius:28px;background:#000;border:1px solid #2c2c30;overflow:hidden;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,var(--font-body);color:#fff;box-shadow:0 28px 50px -30px rgba(0,0,0,.95)}
.mc .ph-bar{display:flex;justify-content:space-between;align-items:center;padding:11px 20px 4px;font-size:.75rem;font-weight:600;letter-spacing:-.01em}
.mc .ph-ic{display:flex;align-items:flex-end;gap:2px;height:10px}
.mc .ph-ic i{display:block;width:3px;background:#fff;border-radius:1px}
.mc .ph-ic i:nth-child(1){height:4px}.mc .ph-ic i:nth-child(2){height:6px}.mc .ph-ic i:nth-child(3){height:8px}.mc .ph-ic i:nth-child(4){height:10px}
.mc .ph-ic b{display:block;width:20px;height:10px;border:1px solid rgba(255,255,255,.55);border-radius:3px;margin-left:5px;position:relative}
.mc .ph-ic b::after{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;background:#fff;border-radius:1px}
.mc .ph-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 12px 9px;border-bottom:1px solid #1c1c1f;background:#0b0b0c}
.mc .ph-back{position:absolute;left:12px;top:8px;font-size:1.5rem;line-height:1;color:#0a84ff;font-weight:300}
.mc .ph-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#a6a6ab,#6f6f74);display:grid;place-items:center;font-size:.8125rem;font-weight:600;color:#fff;letter-spacing:.02em}
.mc .ph-top b{font-size:.6875rem;font-weight:500;color:#fff}
.mc .ph-top b em{font-style:normal;color:var(--ph-dim)}
.mc .ph-th{flex:1;padding:10px 10px 6px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;overflow:hidden}
.mc .ph-ts{align-self:center;text-align:center;font-size:.625rem;line-height:1.3;color:var(--ph-dim);margin-bottom:4px}
.mc .ph-ts b{font-weight:600}
.mc .tx{position:relative;max-width:78%;padding:7px 11px;border-radius:17px;font-size:.78rem;line-height:1.32;letter-spacing:-.005em;margin-bottom:2px}
.mc .tx.in{align-self:flex-start;background:var(--ph-in);color:#fff;border-bottom-left-radius:5px}
.mc .tx.out{align-self:flex-end;background:var(--ph-out);color:#fff;border-bottom-right-radius:5px}
.mc .ph-del{align-self:flex-end;font-size:.5625rem;color:var(--ph-dim);margin:-1px 4px 2px 0}
.mc .ph-in{display:flex;align-items:center;gap:8px;padding:7px 10px 12px}
.mc .ph-plus{width:24px;height:24px;border-radius:50%;background:#1c1c1e;display:grid;place-items:center;color:var(--ph-dim);font-size:.9375rem;flex:none}
.mc .ph-field{flex:1;border:1px solid #2c2c2e;border-radius:999px;padding:5px 11px;font-size:.6875rem;color:#5a5a5f}
/* the call that rang out */
.mc .ph-call{background:linear-gradient(180deg,#25232b,#0d0c10 70%)}
.mc .ph-cl{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 16px 18px;text-align:center}
.mc .ph-cl .ph-av{width:62px;height:62px;font-size:1.25rem;margin-bottom:6px}
.mc .ph-cl b{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.mc .ph-cl small{font-size:.75rem;color:var(--ph-dim)}
.mc .ph-heard{margin-top:16px;font-size:.6875rem;line-height:1.4;color:#c7c7cc;background:rgba(255,255,255,.07);border-radius:12px;padding:8px 10px;max-width:90%}
.mc .ph-heard span{display:block;font-size:.5625rem;color:var(--ph-dim);margin-bottom:3px;text-transform:uppercase;letter-spacing:.06em}
/* Ralph's lock screen */
/* Lock screens wear a phone-default style wallpaper: deep violet with a
   warm glow, so the only teal on a phone is the Ralphio app icon. */
.mc .ph-lock{background:radial-gradient(120% 70% at 15% 0%,#6a4be0 0%,transparent 60%),radial-gradient(110% 70% at 100% 100%,#ff7a45 0%,transparent 58%),radial-gradient(90% 60% at 0% 100%,#c2337a 0%,transparent 60%),#1a1036}
.mc .ph-lk{flex:1;display:flex;flex-direction:column;padding:4px 10px 12px}
.mc .lk-d{text-align:center;font-size:.6875rem;font-weight:600;color:rgba(255,255,255,.85);margin-top:6px}
.mc .lk-t{text-align:center;font-size:3.2rem;font-weight:600;line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.92);margin:2px 0 auto}
.mc .nt{display:flex;gap:9px;align-items:flex-start;background:rgba(48,52,58,.82);border-radius:16px;padding:10px 11px;text-align:left}
.mc .nt-ic{flex:none;width:26px;height:26px;border-radius:7px;background:var(--sys);color:var(--sys-ink);display:grid;place-items:center;font-size:.8125rem;font-weight:800}
.mc .nt > div{min-width:0;flex:1}
.mc .nt-h{display:flex;justify-content:space-between;font-size:.625rem;color:rgba(255,255,255,.6);margin-bottom:1px}
.mc .nt b{display:block;font-size:.75rem;font-weight:600}
.mc .nt p{font-size:.6875rem;line-height:1.3;color:rgba(255,255,255,.85)}
.mc .nt-acts{display:flex;gap:6px;margin-top:6px}
.mc .nt-acts span{flex:1;text-align:center;font-size:.6875rem;font-weight:600;background:rgba(48,52,58,.82);border-radius:12px;padding:8px 6px}
/* Ralph's side in the app */
.mc .ph-app .ph-top{flex-direction:row;justify-content:flex-start;gap:9px;padding:6px 12px 9px 30px}
.mc .ph-app .ph-av{width:26px;height:26px;font-size:.625rem}
.mc .ph-app .ph-top b{font-size:.75rem;font-weight:600;display:block}
.mc .ph-app .ph-top small{display:block;font-size:.5625rem;color:var(--ph-dim)}
.mc .sug{margin:0 10px;border:1px dashed var(--sys-line);border-radius:14px;padding:8px 10px;background:rgba(92,225,230,.05)}
.mc .sug small{display:block;font-size:.5625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sys);margin-bottom:3px}
.mc .sug p{font-size:.72rem;line-height:1.35;color:#fff}
.mc .sug-a{display:flex;gap:6px;margin-top:7px}
.mc .sug-a span{font-size:.6875rem;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1)}
.mc .sug-a span.go{background:var(--sys);color:var(--sys-ink)}
/* Smaller phones inside the settings cards: a smaller clock, and the
   notification's buttons dropped, so nothing is pushed out of the screen. */
.mc-mode .lk-t{font-size:2.3rem}
.mc-mode .lk-d{font-size:.625rem}
.mc-mode .nt-acts{display:none}
.mc-mode .nt{margin-bottom:4px}
.mc-mode .sug p{font-size:.6875rem}
.mc-mode .ph-app .ph-in{display:none}
.mc-mode .ph{aspect-ratio:3/4}
.mc-mode .ph-app .sug{margin-bottom:12px}
.mc .cap{margin-top:10px;font:500 .625rem/1.3 var(--font-mono);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

/* ═══ FOUR STEPS ═══ */
.mc-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);list-style:none;padding:0;margin:0}
.mc-steps li{display:flex;flex-direction:column;gap:8px}
.mc-steps .sqw{max-width:310px;margin-bottom:14px}
.mc-steps .sn{font:900 2rem/.85 var(--cond);font-stretch:62%;color:var(--ink-3)}
.mc-steps h3{font:700 1.125rem/1.3 var(--font-body)}
.mc-steps li > p:last-child{color:var(--ink-2);font-size:.9688rem;line-height:1.5;max-width:34ch}

/* ═══ WHAT IT WAS WORTH ═══
   The payoff after the four steps: a lead is not money yet, this is. */
.mc-win{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,96px);align-items:center;margin-inline:var(--gut);padding-inline:clamp(24px,4vw,64px);border-radius:22px;background:radial-gradient(90% 120% at 0% 50%,rgba(92,225,230,.10),transparent 60%),var(--surface);border:1px solid var(--line)}
.mc-win-num .amt{font:900 clamp(5.4rem,2.5rem + 9vw,12rem)/.8 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
.mc-win-num .amt span{color:var(--sys)}
.mc-win-num .lbl{margin-top:30px;font:500 .75rem/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.mc-win-story .mc-lede{margin-top:18px}
.mc-win-line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.mc-win-line li{position:relative;padding:16px 12px 0 0}
.mc-win-line li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--ink-3)}
.mc-win-line li:last-child::before{background:var(--sys);border-color:var(--sys)}
.mc-win-line b{display:block;font:900 1.6rem/.9 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums}
.mc-win-line li:last-child b{color:var(--sys)}
.mc-win-line span{display:block;margin-top:6px;font-size:.875rem;color:var(--ink-2);line-height:1.35}
@media (max-width:900px){
  .mc-win{grid-template-columns:1fr;margin-inline:16px;padding-inline:22px}
}
/* On a phone the morning reads down a line, like the four steps above it. */
@media (max-width:700px){
  .mc-win-line{grid-template-columns:1fr;border-top:0;margin:28px 0 0 5px}
  .mc-win-line li{padding:0 0 20px 20px;border-left:2px solid var(--line-2)}
  .mc-win-line li:last-child{padding-bottom:0;border-left-color:transparent}
  .mc-win-line li::before{top:3px;left:-7px}
  .mc-win-line span{margin-top:4px}
}

/* ═══ THE FIRST TEXT ═══ */
.mc-first{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,96px);align-items:start}
.mc-quote{font:600 clamp(1.7rem,1rem + 2.2vw,3.3rem)/1.18 var(--font-display);letter-spacing:-.016em}
.mc-quote mark{background:none;color:var(--ink);box-shadow:inset 0 -.14em 0 var(--sys-line)}
.mc-quote sup{font:500 .32em/1 var(--font-mono);color:var(--sys);vertical-align:.9em;margin-left:2px}
.mc-quote .dim{color:var(--ink-3)}
.mc-from{margin-top:22px;font:500 .75rem/1.5 var(--font-mono);color:var(--ink-3)}
.mc-from sup{color:var(--sys);margin-left:3px}
.mc-notes{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.mc-notes li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.mc-notes li > span{font:500 .75rem/1.6 var(--font-mono);color:var(--sys)}
.mc-notes h3{font:700 1rem/1.35 var(--font-body)}
.mc-notes p{color:var(--ink-2);font-size:.9375rem;line-height:1.5;margin-top:3px}
.mc-notes p a{color:var(--ink);text-underline-offset:4px}

/* ═══ HOW MUCH IT SAYS ═══ */
.mc-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.mc-mode{border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2vw,30px);background:var(--surface);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,48%);gap:22px;align-items:start}
.mc-mode.rec{border-color:var(--sys-line);background:linear-gradient(180deg,var(--sys-dim),transparent 60%) var(--surface)}
.mc-mode .mk{font:500 .6875rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mc-mode.rec .mk{color:var(--sys)}
.mc-mode h3{font:600 clamp(1.4rem,1rem + .9vw,2rem)/1.05 var(--font-display);letter-spacing:-.012em;margin:12px 0 10px}
.mc-mode p{color:var(--ink-2);line-height:1.55;font-size:.9688rem}
.mc-dials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(14px,1.6vw,24px);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.mc-dial{padding:22px 22px 24px;border-left:1px solid var(--line)}
.mc-dial:first-child{border-left:0}
.mc-dial .dk{font:500 .6875rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mc-dial h3{font:700 1.05rem/1.3 var(--font-body);margin:10px 0}
.mc-opts{display:flex;flex-wrap:wrap;gap:6px}
.mc-dial .dp{color:var(--ink-2);font-size:.875rem;line-height:1.5;max-width:30ch}
.mc-opts span{font:500 .6875rem/1 var(--font-mono);padding:7px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.mc-opts span.on{border-color:var(--sys-line);color:var(--sys);background:var(--sys-dim)}
.mc-incl{margin-top:clamp(14px,1.6vw,24px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(24px,2.6vw,36px);border-radius:18px;background:var(--sys);color:var(--sys-ink)}
.mc-incl .no{font:900 clamp(3.4rem,2rem + 3vw,5.6rem)/.8 var(--cond);font-stretch:62%}
.mc-incl .q{font:500 .75rem/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.mc-incl h3{font:600 clamp(1.5rem,1rem + 1.3vw,2.4rem)/1.05 var(--font-display);letter-spacing:-.016em}
.mc-incl p{margin-top:6px;font-size:1rem;line-height:1.5;opacity:.85}
.mc-incl a{color:var(--sys-ink);font-weight:700;text-underline-offset:6px}

/* ═══ YOUR NUMBER ═══ */
.mc-setups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.mc-setup{border:1px solid var(--line);border-radius:18px;padding:clamp(22px,2vw,32px);background:var(--surface);display:flex;flex-direction:column;gap:14px}
.mc-setup.rec{border-color:var(--sys-line);background:linear-gradient(180deg,var(--sys-dim),transparent 55%) var(--surface)}
.mc-setup .mk{font:500 .6875rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mc-setup.rec .mk{color:var(--sys)}
.mc-setup h3{font:600 clamp(1.4rem,1rem + .9vw,2rem)/1.05 var(--font-display);letter-spacing:-.012em}
.mc-setup > p{color:var(--ink-2);line-height:1.55;font-size:.9688rem}
.mc-nums{margin-top:auto;border-top:1px solid var(--line);list-style:none;padding:0}
.mc-nums li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.875rem}
.mc-nums b{font:500 .8125rem/1.3 var(--font-mono);color:var(--ink)}
.mc-nums span{color:var(--ink-2)}

/* ═══ COMPARED ═══ */
.mc-cmp-w{overflow-x:auto;border:1px solid var(--line);border-radius:18px}
.mc-cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:.9375rem}
.mc-cmp th,.mc-cmp td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.mc-cmp tr:last-child th,.mc-cmp tr:last-child td{border-bottom:0}
.mc-cmp thead th{font:500 .6875rem/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:var(--surface)}
.mc-cmp thead th.us{color:var(--sys-ink);background:var(--sys)}
.mc-cmp tbody th{font-weight:700;color:var(--ink);width:24%}
.mc-cmp td{color:var(--ink-2)}
.mc-cmp td.us{color:var(--ink);background:var(--sys-dim);font-weight:700}
.mc-cmp .y::before{content:"\2713  ";color:var(--sys);white-space:pre}
.mc-cmp .n::before{content:"\2013  ";color:var(--ink-3);white-space:pre}

/* ═══ CLOSE ═══ */
.mc-close{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding-bottom:clamp(72px,9vw,140px)}
.mc-close h2{font:600 clamp(2.4rem,1rem + 4vw,5.4rem)/.95 var(--font-display);letter-spacing:-.026em;max-width:16ch}
.mc-close .mc-lede{margin-top:20px}
.mc-close .mc-cta{margin-top:0;justify-content:flex-end}
.mc-sign{margin-top:22px;font:500 .75rem/1.5 var(--font-mono);color:var(--ink-2)}
.mc-sign b{display:block;font:600 1rem/1.3 var(--font-display);color:var(--ink);letter-spacing:0}

@media (max-width:1500px){.mc-mode{grid-template-columns:1fr}.mc-mode .sqw{max-width:220px}}
/* Four phones side by side need room, or the oldest message in step 3
   slides under the contact bar. Two by two until there is. */
@media (max-width:1440px){.mc-steps{grid-template-columns:1fr 1fr;row-gap:clamp(36px,4vw,56px)}.mc-steps .sqw{max-width:330px}}
@media (max-width:1100px){
  .mc-modes,.mc-setups{grid-template-columns:1fr}
  .mc-dials{grid-template-columns:1fr 1fr}
  .mc-dial:nth-child(3){border-left:0}
  .mc-dial:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:900px){
  .mc-hero,.mc-first,.mc-head,.mc-close{grid-template-columns:1fr}
  .mc-incl{grid-template-columns:1fr}
  .mc-close .mc-cta{justify-content:flex-start}
}
@media (max-width:560px){
  .mc-steps{grid-template-columns:1fr}
  .mc-steps .sqw{max-width:260px}
  .mc-mode .sqw{max-width:190px}
  .mc-dials{grid-template-columns:1fr}
  .mc-dial{border-left:0!important;border-top:1px solid var(--line)}
  .mc-dial:first-child{border-top:0}
}

/* ═══ PHONES: WORDS INSTEAD OF PICTURES ═══
   On a phone the pictures of phones are too small to read, so the four
   steps become a timeline of words: the time, then the one line that
   matters, arriving a word at a time as it scrolls in. The settings cards
   lose their pictures too. The words are aria-hidden: the step headings
   and text under them say the same thing for a screen reader. */
.mc-say{display:none}
@media (max-width:700px){
  .mc-steps{gap:6px}
  .mc-steps .sqw,.mc-steps .sn,.mc-mode .sqw{display:none}
  .mc-mode{grid-template-columns:1fr}
  /* The fine-tuning boxes are too much on a phone: the three settings and
     the add-on answer say what matters. */
  .mc-dials{display:none}
  /* The add-on answer is a desktop band only: on a phone it read as a
     stray block opening with "No." */
  .mc-incl{display:none}
  .mc-steps li{position:relative;padding:0 0 30px 22px;border-left:2px solid var(--line-2)}
  .mc-steps li:last-child{border-left-color:transparent;padding-bottom:0}
  .mc-steps li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg,#0a0a0b);border:2px solid var(--sys)}
  .mc-say{display:block;margin-bottom:12px}
  .mc-say .t{font:900 2.1rem/.85 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums;color:var(--ink-3)}
  .mc-say .t small{font-size:.6em}
  .mc-say .w{margin-top:10px;font:600 clamp(1.5rem,1rem + 3vw,1.9rem)/1.15 var(--font-display);letter-spacing:-.016em;color:var(--ink)}
  .mc-say .w span{display:inline-block}
  .mc-say .w .em,.mc-say .w .bz{color:var(--loss)}
  .mc-say .w .biz{color:var(--sys)}
  .mc-say .qa{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;font:500 .8125rem/1.3 var(--font-mono);color:var(--ink-3)}
  .mc-say .qa b{color:var(--ink);font-weight:500}
  .js .mc-say .qa span{opacity:0;transform:translateY(.35em)}
  .js .mc-say.visible .qa span{opacity:1;transform:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.25,1);transition-delay:calc(var(--i) * 90ms + 150ms)}
  .js .mc-say .w span{opacity:0;transform:translateY(.35em)}
  .js .mc-say.visible .w span{opacity:1;transform:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.25,1);transition-delay:calc(var(--i) * 90ms + 150ms)}
  .js .mc-say.visible .w .bz{animation:mc-buzz .45s 3 .3s}
}
@keyframes mc-buzz{0%,100%{transform:none}25%{transform:translateX(-3px) rotate(-2deg)}75%{transform:translateX(3px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){
  .js .mc-say .w span,.js .mc-say .qa span{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}

/* The comparison scrolls sideways on a phone: keep the questions pinned on
   the left so every column still reads against its row. */
.mc-cmp tbody th,.mc-cmp thead td:first-child{position:sticky;left:0;z-index:1;background:#0d0d0f;box-shadow:1px 0 0 var(--line)}
@media (max-width:700px){.mc-cmp tbody th{min-width:136px;width:136px;font-size:.875rem}}