/* /mockup landing draft: only the parts that differ from landing.css.
   Colours come from the landing tokens, so both themes follow. */

.mk-banner{background:var(--indigo-900);color:#fff;text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:7px 16px}

/* ---- hero: copy left, call-me card right ---- */
.mk-hero{text-align:left}
.mk-hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:48px;align-items:center;max-width:1100px;margin:0 auto}
.mk-hero h1{font-size:54px;margin:0;max-width:none}
.mk-hero p.sub{margin:22px 0 0;font-size:18.5px;max-width:600px}
.mk-hero .hero-cta,.mk-hero .hero-trust{justify-content:flex-start}

.mk-callme{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:28px}
.mk-callme-tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.mk-callme h2{font-size:27px;line-height:1.15;letter-spacing:-.02em;font-weight:800;margin-top:12px}
.mk-callme p{color:var(--ink-2);font-size:15.5px;margin-top:10px;line-height:1.5}
.mk-callme-form{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.mk-callme-form input,.mk-input{width:100%;height:52px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:600 17px 'JetBrains Mono',monospace;padding:0 16px}
.mk-callme-form input:focus,.mk-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-100)}
.mk-callme-note{font-size:12.5px;color:var(--ink-3);margin-top:12px}
.mk-callme-alt{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--accent)}
.mk-callme-alt:hover{text-decoration:underline}
.mk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.browser-bar{position:relative}
.mk-sample{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);border:1px dashed var(--line);border-radius:6px;padding:2px 7px}

/* ---- listen ---- */
.mk-listen{display:grid;grid-template-columns:300px 1fr;gap:22px;max-width:1000px;margin:0 auto}
.mk-clips{display:flex;flex-direction:column;gap:10px}
.mk-clip{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;transition:.15s}
.mk-clip:hover{border-color:var(--ink-3)}
.mk-clip.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-100)}
.mk-clip .e{font-size:22px}
.mk-clip .t{display:block;font-weight:700;font-size:15px}
.mk-clip .s{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.mk-clip .d{font-size:12px;color:var(--ink-3)}
.mk-clip:focus-visible,.mk-play:focus-visible,.mk-track:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.mk-player{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.mk-player-bar{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.mk-play{flex:0 0 48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(79,70,229,.7)}
.mk-play svg{width:20px;height:20px}
.mk-play .i-pause,.mk-play.playing .i-play{display:none}
.mk-play.playing .i-pause{display:block}
.mk-track{position:relative;flex:1;height:34px;cursor:pointer;border-radius:8px;background:var(--panel-2)}
.mk-segs{position:absolute;inset:0}
.mk-seg{position:absolute;top:9px;bottom:9px;border-radius:4px}
.mk-seg.agent{background:var(--accent);opacity:.55}
.mk-seg.caller{background:var(--ink-3);opacity:.4;top:12px;bottom:12px}
.mk-head{position:absolute;top:3px;bottom:3px;width:2px;background:var(--ink);border-radius:2px;transform:translateX(-1px)}
.mk-time{font-size:12.5px;color:var(--ink-3);white-space:nowrap;min-width:84px;text-align:right}

.mk-lines{list-style:none;max-height:330px;overflow-y:auto;padding:10px 10px 14px;scroll-behavior:smooth}
.mk-line{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:baseline;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--ink-3);transition:color .2s,background .2s}
.mk-line:hover{background:var(--panel-2)}
.mk-line .who{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.mk-line.agent .who{color:var(--accent)}
.mk-line .txt{font-size:15.5px;line-height:1.45}
.mk-line .at{font-size:11.5px}
.mk-line.past{color:var(--ink-2)}
.mk-line.on{color:var(--ink);background:var(--accent-50)}
.mk-line.on .txt{font-weight:600}
.mk-disclosure{max-width:1000px;margin:16px auto 0;font-size:13px;color:var(--ink-3);text-align:center;text-wrap:pretty}

/* ---- proof ---- */
.mk-proof h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.mk-proof p{font-size:15px;font-weight:400;color:var(--ink-2)}
.mk-proof-ico{width:40px;height:40px;border-radius:11px;background:var(--accent-50);color:var(--accent);display:grid;place-items:center;margin-bottom:16px}
.mk-proof-ico svg{width:20px;height:20px}
.mk-proof-line{transition:.15s}
.mk-proof-line:hover{border-color:var(--accent);transform:translateY(-2px)}
.mk-proof-num{font-size:24px;font-weight:700;color:var(--accent);margin-bottom:10px}
.mk-proof-slot{position:relative;border-style:dashed;background:var(--panel-2)}
.mk-proof-slot .mk-proof-ico{background:var(--line-2);color:var(--ink-3)}
.mk-proof-badge{position:absolute;top:16px;right:16px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--amber);background:var(--amber-50);border-radius:6px;padding:3px 8px}

/* ---- call-me modal ---- */
.mk-modal{position:fixed;inset:0;z-index:100;background:rgba(10,9,20,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.mk-modal[hidden]{display:none}
/* Phone keyboards cover the bottom of the screen without shrinking 100vh (iOS
   always, Android Chrome by default), which hid the Call button. The script
   sizes the overlay to the visible area above the keyboard (--vv-top/--vv-h)
   and, while the keyboard is up, pins the box to the top of that area. */
.mk-modal.vv{bottom:auto;top:var(--vv-top);height:var(--vv-h)}
.mk-modal.kb{align-items:flex-start;padding:8px 12px}
.mk-modal.vv .mk-modal-box{max-height:calc(var(--vv-h) - 16px)}
.mk-modal-box{width:100%;max-width:480px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);padding:24px;max-height:calc(100vh - 32px);overflow-y:auto}
.mk-modal-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.mk-modal-h h2{font-size:21px;font-weight:800;letter-spacing:-.01em}
.mk-x{font-size:28px;line-height:1;color:var(--ink-3)}
#cb-form{display:flex;flex-direction:column;gap:12px}
/* display:flex above beats the hidden attribute, so the form and its "Call now"
   button stayed on screen while the phone was ringing. */
.mk-modal-box [hidden]{display:none!important}
.mk-hp{position:absolute;left:-9999px}
.mk-lbl{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.mk-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.mk-consent input{margin-top:3px;accent-color:var(--accent)}
.mk-consent a{color:var(--accent);text-decoration:underline}
.mk-err{color:var(--red);font-size:14px}
.mk-confirm{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.mk-confirm .l{font-size:13px;color:var(--ink-2)}
.mk-confirm .n{font-size:19px;font-weight:700;margin-top:4px}
.mk-confirm .m{font-size:13px;color:var(--ink-3)}
.mk-phase{display:flex;align-items:center;gap:10px;font-size:16px}
.mk-phase .mono{margin-left:auto;font-size:13px;color:var(--ink-3)}
.mk-dot{width:10px;height:10px;border-radius:50%}
.mk-dot.amber{background:var(--amber)}.mk-dot.green{background:var(--green)}.mk-dot.gray{background:var(--ink-3)}.mk-dot.red{background:var(--red)}
.mk-hint{font-size:14px;color:var(--ink-2);margin-top:8px}
.mk-tx{margin-top:14px;max-height:290px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.mk-tx:empty{display:none}
.mk-tx p{max-width:85%;padding:9px 12px;border-radius:12px;line-height:1.4}
.mk-tx .ai{background:var(--accent-50);align-self:flex-start;border-bottom-left-radius:4px}
.mk-tx .me{background:var(--panel-2);border:1px solid var(--line);align-self:flex-end;border-bottom-right-radius:4px}
.mk-after{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.mk-after .btn{flex:1}

@media (max-width:980px){
  .mk-hero-grid{grid-template-columns:1fr;gap:34px}
  .mk-hero h1{font-size:44px}
  .mk-listen{grid-template-columns:1fr}
  .mk-clips{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .mk-clip{flex:0 0 240px}
}
@media (max-width:600px){
  .mk-hero h1{font-size:32px}
  .mk-callme{padding:22px}
  .mk-line{grid-template-columns:1fr auto;gap:2px 10px}
  .mk-line .who{grid-column:1}
  .mk-line .txt{grid-column:1/-1;grid-row:2}
  .mk-line .at{grid-column:2;grid-row:1}
  .mk-time{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .mk-lines{scroll-behavior:auto}
  .mk-proof-line:hover{transform:none}
}