/* Shotink marketing pages — Capabilities, Workflows, Docs, Pricing, Legal.

   Loaded after app.css and scoped under body.mk. The tokens (--bg, --brand,
   --accent, the fonts) come from app.css so these pages and the studio read as
   one product; the top bar (.lp-bar) and .btn come from there too. Nothing in
   here reaches into the studio.

   Four page shapes share this file:
     .mk-*   the long-form sales pages (hero, sections, cards, tables)
     .pr-*   pricing (plan cards, top-ups, the what-it-buys table)
     .dc-*   docs (sidebar + article)
     .lg-*   legal (contents rail + numbered clauses)                        */

.mk{position:relative;overflow-x:clip}
.mk::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50rem 32rem at 82% -10%,rgba(var(--brand-rgb),.13),transparent 62%),
             radial-gradient(34rem 28rem at 0% 42%,rgba(var(--accent-rgb),.06),transparent 62%)}
.mk main{display:block}
.mk .wrap{max-width:1180px}
.mk p{color:var(--paper-2)}
.mk .muted{color:var(--muted)}
.mk .lp-bar nav a.on{color:var(--ink)}
.mk .kicker{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand)}
.mk .kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14)}
.mk code{font-family:var(--font-mono);font-size:.84em;background:rgba(var(--paper-rgb),.07);padding:1px 6px;border-radius:5px;color:var(--ink)}
.mk .tag{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.08);padding:3px 8px;border-radius:6px}
.mk .tag.brand{color:var(--brand);border-color:rgba(var(--brand-rgb),.35);background:rgba(var(--brand-rgb),.1)}
.mk .tag.gpu{color:var(--rust-400);border-color:rgba(255,185,200,.3);background:rgba(255,185,200,.08)}

/* ---- hero ---- */
/* .lp-actions is the landing page's row of buttons; it lives in landing.css,
   which these pages do not load, so the row is restated here. */
.mk .lp-actions{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.mk-hero{padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,64px);max-width:860px}
.mk-hero h1{font-size:clamp(2.6rem,6.4vw,4.9rem);line-height:1.02;letter-spacing:-.045em;margin:18px 0 20px;max-width:16ch}
.mk-hero h1 .grad{background:linear-gradient(105deg,#F4F0FF 15%,var(--brand) 72%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-hero p.lead{font-size:1.12rem;max-width:58ch;color:var(--paper-2)}
.mk-hero .lp-actions{margin-top:28px}
.mk-hero .lp-actions .btn.lg{padding:13px 24px;font-size:.95rem;border-radius:12px}
.mk-hero .keyline{font-size:.78rem;color:var(--muted)}

/* ---- section scaffolding ---- */
.mk-sec{padding:0 0 clamp(56px,8vw,96px)}
.mk-sec-head{max-width:60ch;margin-bottom:28px}
.mk-sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:10px 0 10px;letter-spacing:-.03em}
.mk-sec-head p{color:var(--muted)}
.mk-rule{border:0;border-top:1px solid var(--line);margin:0 0 clamp(48px,7vw,80px)}

/* ---- cards ---- */
.mk-grid{display:grid;gap:14px}
.mk-grid.c2{grid-template-columns:repeat(2,1fr)}
.mk-grid.c3{grid-template-columns:repeat(3,1fr)}
.mk-grid.c4{grid-template-columns:repeat(4,1fr)}
.mk-card{position:relative;padding:22px 22px 20px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));backdrop-filter:blur(12px);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.mk-card:hover{transform:translateY(-3px);border-color:rgba(var(--brand-rgb),.5)}
.mk-card .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:.95rem;
  background:rgba(var(--brand-rgb),.12);color:var(--brand);margin-bottom:14px}
.mk-card h3{font-size:1.12rem;margin-bottom:6px;letter-spacing:-.02em}
.mk-card p{font-size:.88rem;color:var(--muted)}
.mk-card .num{position:absolute;top:18px;right:20px;font:600 .72rem var(--font-mono);color:var(--muted);letter-spacing:.1em}
.mk-card ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:.86rem}
.mk-card li{margin:3px 0}
.mk-card li b{color:var(--ink);font-weight:600}

/* ---- stage blocks (Capabilities) ---- */
.mk-stage{display:grid;grid-template-columns:minmax(220px,.75fr) 1.6fr;gap:32px;padding:34px 0;border-top:1px solid var(--line)}
.mk-stage:last-child{border-bottom:1px solid var(--line)}
.mk-stage .side{position:sticky;top:90px;align-self:start}
.mk-stage .side .no{font:500 .8rem var(--font-mono);color:var(--muted);letter-spacing:.12em}
.mk-stage .side h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:6px 0 8px;letter-spacing:-.03em}
.mk-stage .side p{font-size:.92rem;color:var(--muted)}
.mk-stage .side .swatch{display:inline-block;width:38px;height:4px;border-radius:2px;margin-top:14px}
.mk-steps{display:grid;gap:10px}
.mk-step{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.028)}
.mk-step .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);
  color:var(--brand);font-size:.9rem;border:1px solid var(--line)}
.mk-step h4{font-size:1rem;margin:2px 0 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mk-step p{font-size:.86rem;color:var(--muted)}
.mk-step .io{margin-top:8px;font:500 .74rem var(--font-mono);color:var(--muted)}
.mk-step .io b{color:var(--paper-2);font-weight:500}
.mk-step .io .arr{color:var(--accent);margin:0 6px}
.mk-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mk-tools span{font-size:.76rem;font-weight:700;color:var(--paper-2);background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;display:inline-flex;align-items:center;gap:6px}
.mk-tools span i{color:var(--brand);font-size:.72rem}

/* ---- model line-up strip ---- */
.mk-models{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mk-models .m{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.mk-models .m b{display:block;font-size:.92rem;color:var(--ink);margin-bottom:2px}
.mk-models .m span{font-size:.8rem;color:var(--muted)}

/* ---- workflow line (Workflows) ---- */
.mk-line{display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:st;position:relative;margin:8px 0 28px}
.mk-line::before{content:"";position:absolute;left:4%;right:4%;top:23px;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 10%,var(--line-strong) 90%,transparent)}
.mk-line .st{position:relative;text-align:center;padding:0 8px}
.mk-line .st .b{width:46px;height:46px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:1rem;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink);position:relative;z-index:1;box-shadow:0 0 0 8px var(--bg)}
.mk-line .st h4{font-size:1rem;margin-bottom:3px}
.mk-line .st p{font-size:.78rem;color:var(--muted)}
.mk-line .st small{display:block;font:500 .66rem var(--font-mono);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:6px}

/* handoff table: what each stage needs and produces */
.mk-table{width:100%;border-collapse:collapse;font-size:.9rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mk-table th,.mk-table td{padding:13px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.mk-table thead th{border-top:0;background:var(--surface);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.mk-table td{color:var(--paper-2)}
.mk-table td:first-child{color:var(--ink);font-weight:700;white-space:nowrap}
.mk-table td .sub{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.mk-table-wrap{overflow-x:auto;border-radius:12px}

/* entry points */
.mk-entry{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mk-entry .e{padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.mk-entry .e .from{font:500 .7rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.mk-entry .e h3{font-size:1.15rem;margin-bottom:6px}
.mk-entry .e p{font-size:.88rem;color:var(--muted)}
.mk-entry .e .path{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.76rem;font-weight:700}
.mk-entry .e .path span{padding:4px 10px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);color:var(--paper-2)}
.mk-entry .e .path span.skip{opacity:.38;text-decoration:line-through}
.mk-entry .e .path i{color:var(--muted);font-size:.7rem}

/* ---- big closing band ---- */
.mk-cta{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);padding:clamp(40px,7vw,72px) 32px;text-align:center;
  margin-bottom:64px;background:linear-gradient(145deg,rgba(var(--brand-rgb),.14),rgba(255,255,255,.02))}
.mk-cta h2{font-size:clamp(1.8rem,4vw,2.7rem);margin-bottom:12px;letter-spacing:-.03em}
.mk-cta p{max-width:48ch;margin:0 auto 24px;color:var(--paper-2)}

/* ---- footer ---- */
.mk-foot{border-top:1px solid var(--line);padding:38px 0 60px;margin-top:20px}
.mk-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.mk-foot .brandcol p{font-size:.84rem;color:var(--muted);max-width:32ch;margin-top:10px}
.mk-foot h5{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:800}
.mk-foot ul{list-style:none}
.mk-foot li{margin:7px 0}
.mk-foot li a{font-size:.88rem;color:var(--paper-2)}
.mk-foot li a:hover{color:var(--ink)}
.mk-foot .legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted)}

/* =====================================================================
   PRICING
   ===================================================================== */
.pr-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.pr-plan{position:relative;display:flex;flex-direction:column;padding:26px 24px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.pr-plan.hot{border-color:rgba(var(--brand-rgb),.6);box-shadow:0 30px 80px -50px rgba(var(--brand-rgb),.6)}
.pr-plan .pop{position:absolute;top:-11px;left:24px;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-brand);background:linear-gradient(135deg,#D8C0FF,var(--brand));padding:4px 10px;border-radius:6px}
.pr-plan h3{font-size:1.25rem;letter-spacing:-.02em}
.pr-plan .for{font-size:.84rem;color:var(--muted);margin:4px 0 18px;min-height:2.6em}
.pr-plan .price{display:flex;align-items:baseline;gap:6px}
.pr-plan .price b{font-family:var(--font-disp);font-weight:500;font-size:2.9rem;letter-spacing:-.04em;line-height:1}
.pr-plan .price span{color:var(--muted);font-size:.9rem}
.pr-plan .credits{margin:14px 0 6px;font-size:1rem;font-weight:700}
.pr-plan .credits small{display:block;font-weight:500;color:var(--muted);font-size:.8rem;margin-top:2px}
.pr-plan ul{list-style:none;margin:16px 0 22px;display:grid;gap:9px;font-size:.88rem;color:var(--paper-2)}
.pr-plan li{display:flex;gap:10px;align-items:flex-start}
.pr-plan li i{color:var(--accent);font-size:.72rem;margin-top:5px}
.pr-plan li b{color:var(--ink);font-weight:700}
.pr-plan .btn{margin-top:auto;justify-content:center}
.pr-plan .topup{margin-top:12px;text-align:center;font-size:.76rem;color:var(--muted)}
.pr-note{margin-top:16px;font-size:.84rem;color:var(--muted);max-width:70ch}

.pr-rate{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
.pr-rate .big{padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.pr-rate .big .n{font-family:var(--font-disp);font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.pr-rate .big .n small{font-family:var(--font-body);font-size:1rem;color:var(--muted);letter-spacing:0;margin-left:8px}
.pr-rate .big p{margin-top:12px;font-size:.9rem;color:var(--muted)}
.pr-rate .list{display:grid;gap:8px}
.pr-rate .list .r{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025);font-size:.88rem}
.pr-rate .list .r b{color:var(--ink);font-weight:700}
.pr-rate .list .r .c{font:500 .84rem var(--font-mono);color:var(--accent);white-space:nowrap}
.pr-rate .list .r small{display:block;color:var(--muted);font-size:.76rem;font-weight:500;margin-top:2px}

.pr-faq{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.pr-faq details{border-top:1px solid var(--line);padding:16px 0}
.pr-faq summary{cursor:pointer;font-weight:700;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.pr-faq summary::-webkit-details-marker{display:none}
.pr-faq summary::after{content:"+";color:var(--brand);font-size:1.1rem;font-weight:500}
.pr-faq details[open] summary::after{content:"–"}
.pr-faq details p{margin-top:10px;font-size:.88rem;color:var(--muted)}

/* =====================================================================
   DOCS
   ===================================================================== */
.dc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;padding:40px 0 80px}
.dc-side{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow:auto;padding-right:8px}
.dc-side h5{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px;font-weight:800}
.dc-side h5:first-child{margin-top:0}
.dc-side ul{list-style:none}
.dc-side li a{display:block;padding:6px 10px;border-radius:8px;font-size:.88rem;color:var(--paper-2);border-left:2px solid transparent}
.dc-side li a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.dc-side li a.on{color:var(--ink);background:rgba(var(--brand-rgb),.1);border-left-color:var(--brand)}
.dc-side .back{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);margin-bottom:14px}
.dc-art{max-width:72ch;min-width:0}
.dc-art .crumb{font:500 .74rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.dc-art h1{font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.035em;margin-bottom:14px}
.dc-art .lead{font-size:1.08rem;color:var(--paper-2);margin-bottom:26px}
.dc-art h2{font-size:1.45rem;margin:38px 0 10px;letter-spacing:-.025em;padding-top:8px;scroll-margin-top:90px}
.dc-art dt[id]{scroll-margin-top:90px}
.dc-art h3{font-size:1.1rem;margin:24px 0 8px}
.dc-art p{margin:0 0 14px;font-size:.96rem;line-height:1.65}
.dc-art ul,.dc-art ol{margin:0 0 16px 22px;color:var(--paper-2);font-size:.95rem;line-height:1.6}
.dc-art li{margin:5px 0}
.dc-art li b,.dc-art p b{color:var(--ink);font-weight:700}
.dc-art .note{padding:14px 18px;border:1px solid rgba(var(--brand-rgb),.3);background:rgba(var(--brand-rgb),.07);border-radius:12px;font-size:.9rem;margin:0 0 18px}
.dc-art .note b{color:var(--brand)}
.dc-art .warn{border-color:rgba(255,185,200,.3);background:rgba(255,185,200,.06)}
.dc-art .warn b{color:var(--rust-400)}
.dc-art table{width:100%;border-collapse:collapse;font-size:.88rem;margin:0 0 20px}
.dc-art th,.dc-art td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.dc-art th{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dc-art td{color:var(--paper-2)}
.dc-art td:first-child{color:var(--ink);font-weight:600}
.dc-art dl{margin:0 0 18px}
.dc-art dt{font-weight:700;margin-top:12px}
.dc-art dd{margin:4px 0 0;color:var(--paper-2);font-size:.94rem}
.dc-art a{color:var(--brand);text-decoration:underline;text-decoration-color:rgba(var(--brand-rgb),.35);text-underline-offset:3px}
.dc-art a:hover{text-decoration-color:var(--brand)}
.dc-nav{display:flex;justify-content:space-between;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line)}
.dc-nav a{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;min-width:160px;color:var(--ink);text-decoration:none}
.dc-nav a small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dc-nav a:hover{border-color:rgba(var(--brand-rgb),.5)}
.dc-nav a.next{text-align:right;margin-left:auto}
.dc-art .stamp{margin-top:30px;font-size:.78rem;color:var(--muted)}
.dc-menu{display:none;margin:18px 0 0}

/* =====================================================================
   LEGAL
   ===================================================================== */
.lg{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;padding:40px 0 80px}
.lg-side{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow:auto}
.lg-side .switch{display:flex;flex-direction:column;gap:4px;margin-bottom:22px}
.lg-side .switch a{padding:8px 12px;border-radius:9px;font-size:.86rem;font-weight:700;color:var(--paper-2);border:1px solid transparent}
.lg-side .switch a.on{color:var(--ink);background:rgba(var(--brand-rgb),.1);border-color:rgba(var(--brand-rgb),.3)}
.lg-side h5{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:800}
.lg-side ol{list-style:none;counter-reset:c}
.lg-side ol a{display:flex;gap:10px;padding:5px 8px;font-size:.82rem;color:var(--paper-2);border-radius:7px}
.lg-side ol a::before{counter-increment:c;content:counter(c);font:500 .72rem var(--font-mono);color:var(--muted);min-width:1.4em}
.lg-side ol a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.lg-doc{max-width:74ch;min-width:0}
.lg-doc .crumb{font:500 .74rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.lg-doc h1{font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.035em;margin-bottom:10px}
.lg-doc .meta{font-size:.82rem;color:var(--muted);margin-bottom:22px}
.lg-doc .intro{font-size:1.02rem;color:var(--paper-2);padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:26px}
.lg-doc section{padding:26px 0;border-top:1px solid var(--line);scroll-margin-top:90px}
.lg-doc section h2{display:flex;gap:16px;align-items:baseline;font-size:1.35rem;letter-spacing:-.02em;margin-bottom:12px}
.lg-doc section h2 .n{font:500 .8rem var(--font-mono);color:var(--brand);min-width:1.6em}
.lg-doc h3{font-size:1rem;margin:16px 0 6px}
.lg-doc p{font-size:.94rem;line-height:1.65;margin:0 0 12px;color:var(--paper-2)}
.lg-doc ul{margin:0 0 12px 22px;font-size:.94rem;line-height:1.6;color:var(--paper-2)}
.lg-doc li{margin:5px 0}
.lg-doc dl{margin:0 0 12px}
.lg-doc dt{font-weight:700;color:var(--ink);margin-top:10px}
.lg-doc dd{margin:3px 0 0;font-size:.93rem;color:var(--paper-2)}
.lg-doc a{color:var(--brand)}

/* =====================================================================
   AUTH (login / register): one centred form
   ===================================================================== */
.au{display:grid;grid-template-columns:minmax(0,1fr);min-height:calc(100vh - 72px)}
.au-form{display:flex;align-items:center;justify-content:center;padding:48px 22px}
.au-form>div{width:100%;max-width:400px}
.au-form h1{font-size:2rem;letter-spacing:-.03em;margin-bottom:6px}
.au-form .sub{color:var(--muted);margin-bottom:22px;font-size:.92rem}
.au-form label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin:14px 0 6px;letter-spacing:.02em}
.au-form input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem}
.au-form input::placeholder{color:var(--muted)}
.au-form .err{color:var(--danger);font-size:.86rem;margin-top:12px}
.au-form .btn.block{margin-top:22px;padding:12px 16px;font-size:.92rem}
.au-form .note{margin-top:16px;font-size:.86rem;color:var(--muted)}
.au-form .note a{color:var(--brand);font-weight:700}
.au-form .fine{margin-top:26px;font-size:.74rem;color:var(--muted);line-height:1.5}
.au-form .fine a{color:var(--paper-2);text-decoration:underline;text-underline-offset:3px}
/* ---- responsive ---- */
@media (max-width:1000px){
  .mk-grid.c4{grid-template-columns:repeat(2,1fr)}
  .mk-models{grid-template-columns:repeat(2,1fr)}
  .mk-line{grid-template-columns:repeat(3,1fr);gap:22px 0}
  .mk-line::before{display:none}
  .mk-foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .mk-grid.c3,.mk-grid.c2,.mk-entry,.pr-plans,.pr-rate,.pr-faq{grid-template-columns:1fr}
  .mk-stage{grid-template-columns:1fr;gap:18px}
  .mk-stage .side{position:static}
  .dc,.lg{grid-template-columns:1fr;gap:26px}
  .dc-side,.lg-side{position:static;max-height:none;display:none}
  .dc-side.open,.lg-side.open{display:block}
  .dc-menu{display:inline-flex}
}
@media (max-width:560px){
  .mk-grid.c4,.mk-models{grid-template-columns:1fr}
  .mk-line{grid-template-columns:1fr 1fr}
  .mk-foot .cols{grid-template-columns:1fr}
  .mk-table th,.mk-table td{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){
  .mk-card,.pr-plan,.btn{transition:none}
}