/* ============================================================================
   HomAI marketing + auth (Phase: landing redesign). Light theme, navy/blue.
   Self-contained — only this file + Inter load on these pages.
   ========================================================================== */
:root{
  --mk-navy:#1b2b6b; --mk-navy-2:#16245c;
  --mk-blue:#2563eb; --mk-blue-2:#3b82f6; --mk-blue-soft:#eef3ff;
  --mk-ink:#0b1530; --mk-ink-2:#26324b; --mk-slate:#5b6b86; --mk-slate-2:#90a0bb;
  --mk-line:#e7ebf4; --mk-line-2:#eef1f8;
  --mk-bg:#ffffff; --mk-tint:#f5f7fd;
  --mk-sidebar:#0e1838; --mk-sidebar-2:#172554;
  --mk-green:#15a34a; --mk-green-bg:#dcfce7; --mk-amber:#e08a17; --mk-amber-bg:#fef0d6; --mk-red:#ef4444;
  --mk-radius:18px; --mk-radius-lg:24px; --mk-radius-sm:12px;
  --mk-shadow:0 24px 60px -18px rgba(17,26,72,.20);
  --mk-shadow-sm:0 8px 24px -10px rgba(17,26,72,.12);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body.mk-body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--mk-ink); background:var(--mk-bg);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
.mk-body a{ color:inherit; text-decoration:none; }
.mk-container{ max-width:1240px; margin:0 auto; padding:0 32px; }
.mk-blue{ color:var(--mk-blue); }
img{ max-width:100%; display:block; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.mk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:52px; padding:0 24px;
  border-radius:13px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease; white-space:nowrap; }
.mk-btn-primary{ background:var(--mk-navy); color:#fff; box-shadow:0 14px 30px -12px rgba(27,43,107,.6); }
.mk-btn-primary:hover{ background:var(--mk-navy-2); transform:translateY(-1px); }
.mk-btn-outline{ background:#fff; color:var(--mk-ink); border-color:var(--mk-line); box-shadow:var(--mk-shadow-sm); }
.mk-btn-outline:hover{ border-color:#cdd6ea; transform:translateY(-1px); }
.mk-btn-sm{ height:44px; padding:0 18px; font-size:14px; border-radius:11px; }
.mk-btn-block{ width:100%; }

/* ── Badge pill ──────────────────────────────────────────────────────────── */
.mk-badge{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px; border-radius:999px;
  background:var(--mk-blue-soft); color:var(--mk-blue); font-size:13.5px; font-weight:600; border:1px solid #dde6ff; }
.mk-badge svg{ width:15px; height:15px; }

/* ── Top nav (landing) ───────────────────────────────────────────────────── */
.mk-nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mk-line-2); }
.mk-nav-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.mk-logo{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--mk-ink); }
.mk-nav-links{ display:flex; align-items:center; gap:38px; }
.mk-nav-links a{ color:var(--mk-ink-2); font-size:15px; font-weight:500; transition:color .15s; }
.mk-nav-links a:hover{ color:var(--mk-blue); }
.mk-nav-cta{ display:flex; align-items:center; gap:14px; }

/* ── Section scaffolding ─────────────────────────────────────────────────── */
.mk-section{ padding:84px 0; position:relative; overflow:hidden; }
.mk-section-tint{ background:linear-gradient(180deg,#fff 0%, var(--mk-tint) 100%); }
.mk-eyebrow{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 15px; border-radius:999px;
  background:var(--mk-blue-soft); color:var(--mk-blue); font-size:13px; font-weight:600; border:1px solid #dde6ff; margin-bottom:22px; }
.mk-eyebrow svg{ width:15px; height:15px; }
.mk-h1{ font-size:60px; line-height:1.04; font-weight:800; letter-spacing:-.025em; margin:0 0 20px; color:var(--mk-ink); }
.mk-h2{ font-size:46px; line-height:1.07; font-weight:800; letter-spacing:-.022em; margin:0 0 16px; color:var(--mk-ink); }
.mk-lead{ font-size:18px; color:var(--mk-slate); margin:0; max-width:46ch; }
.mk-center{ text-align:center; }
.mk-center .mk-lead{ margin:0 auto; }

/* soft background glows */
.mk-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; z-index:0; }
.mk-glow-a{ width:520px; height:520px; right:-120px; top:-160px; background:radial-gradient(circle,#cdd9ff,transparent 70%); }
.mk-glow-b{ width:480px; height:480px; left:-160px; bottom:-200px; background:radial-gradient(circle,#dbe4ff,transparent 70%); }
.mk-section > .mk-container{ position:relative; z-index:1; }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.mk-hero{ padding:72px 0 56px; background:linear-gradient(160deg,#fff 40%, #eaf0ff 100%); }
.mk-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:48px; align-items:center; }
.mk-hero h1{ font-size:58px; }
.mk-hero .mk-lead{ font-size:18px; margin:0 0 30px; max-width:34ch; }
.mk-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.mk-hero-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:60px; }
.mk-strip-item{ display:flex; gap:12px; align-items:flex-start; padding:18px 20px; background:#fff; border:1px solid var(--mk-line);
  border-radius:var(--mk-radius); box-shadow:var(--mk-shadow-sm); }
.mk-strip-ic{ width:42px; height:42px; flex:0 0 auto; border-radius:11px; background:var(--mk-blue-soft); color:var(--mk-navy);
  display:grid; place-items:center; }
.mk-strip-ic svg{ width:20px; height:20px; }
.mk-strip-item b{ display:block; font-size:14.5px; color:var(--mk-ink); }
.mk-strip-item span{ font-size:13px; color:var(--mk-slate); }

/* ── WHY (feature grid) ─────────────────────────────────────────────────── */
.mk-feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.mk-feature{ display:flex; gap:20px; padding:30px 30px; background:#fff; border:1px solid var(--mk-line);
  border-radius:var(--mk-radius-lg); box-shadow:var(--mk-shadow-sm); transition:transform .18s ease, box-shadow .2s ease; }
.mk-feature:hover{ transform:translateY(-3px); box-shadow:var(--mk-shadow); }
.mk-feature-ic{ width:58px; height:58px; flex:0 0 auto; border-radius:15px; background:var(--mk-blue-soft); color:var(--mk-navy);
  display:grid; place-items:center; }
.mk-feature-ic svg{ width:28px; height:28px; }
.mk-feature h3{ margin:4px 0 6px; font-size:21px; font-weight:700; color:var(--mk-ink); }
.mk-feature p{ margin:0; font-size:15px; color:var(--mk-slate); }
.mk-mini-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:24px; padding:18px 8px; background:#fff;
  border:1px solid var(--mk-line); border-radius:var(--mk-radius); box-shadow:var(--mk-shadow-sm); }
.mk-mini{ display:flex; gap:13px; align-items:center; padding:6px 22px; }
.mk-mini + .mk-mini{ border-left:1px solid var(--mk-line-2); }
.mk-mini-ic{ width:42px; height:42px; flex:0 0 auto; border-radius:11px; background:var(--mk-blue-soft); color:var(--mk-navy); display:grid; place-items:center; }
.mk-mini-ic svg{ width:20px; height:20px; }
.mk-mini b{ display:block; font-size:14.5px; color:var(--mk-ink); }
.mk-mini span{ font-size:12.5px; color:var(--mk-slate); }

/* ── HOW IT WORKS ───────────────────────────────────────────────────────── */
.mk-how-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr); gap:48px; align-items:start; }
.mk-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:40px; }
.mk-step{ position:relative; text-align:center; padding:0 6px; }
.mk-step-ic{ width:78px; height:78px; margin:0 auto 16px; border-radius:50%; border:1.5px solid #d6e0f7; background:#fff;
  display:grid; place-items:center; color:var(--mk-blue); }
.mk-step-ic svg{ width:30px; height:30px; }
.mk-step:not(:last-child)::after{ content:""; position:absolute; top:39px; left:62%; width:76%; border-top:1.5px dashed #cdd8ef; }
.mk-step-n{ font-size:13px; font-weight:700; color:var(--mk-blue); }
.mk-step h4{ margin:4px 0 5px; font-size:18px; font-weight:700; color:var(--mk-ink); }
.mk-step p{ margin:0; font-size:13.5px; color:var(--mk-slate); }

/* ── BUILT FOR REAL WORKFLOWS (use cases) ───────────────────────────────── */
.mk-work-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:48px; align-items:center; }
.mk-usecases{ display:flex; flex-direction:column; gap:16px; margin-top:40px; }
.mk-usecase{ display:flex; align-items:center; gap:18px; padding:22px 24px; background:#fff; border:1px solid var(--mk-line);
  border-radius:var(--mk-radius); box-shadow:var(--mk-shadow-sm); transition:transform .16s ease, box-shadow .2s ease; }
.mk-usecase:hover{ transform:translateX(3px); box-shadow:var(--mk-shadow); }
.mk-usecase-ic{ width:54px; height:54px; flex:0 0 auto; border-radius:14px; background:var(--mk-blue-soft); color:var(--mk-navy); display:grid; place-items:center; }
.mk-usecase-ic svg{ width:25px; height:25px; }
.mk-usecase-body{ flex:1; min-width:0; }
.mk-usecase h4{ margin:0 0 3px; font-size:19px; font-weight:700; color:var(--mk-ink); }
.mk-usecase p{ margin:0; font-size:14.5px; color:var(--mk-slate); }
.mk-usecase-arrow{ color:var(--mk-slate-2); flex:0 0 auto; }
.mk-usecase:hover .mk-usecase-arrow{ color:var(--mk-blue); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.mk-footer{ border-top:1px solid var(--mk-line-2); padding:34px 0; color:var(--mk-slate); font-size:14px; }
.mk-footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ============================================================================
   APP MOCKUP (dashboard preview used in hero / how-it-works / login)
   ========================================================================== */
.mk-mock{ display:flex; background:#fff; border:1px solid var(--mk-line); border-radius:var(--mk-radius-lg);
  box-shadow:var(--mk-shadow); overflow:hidden; }
.mk-mock-side{ width:60px; flex:0 0 auto; background:linear-gradient(180deg,var(--mk-sidebar),#0a1230); display:flex;
  flex-direction:column; align-items:center; gap:8px; padding:14px 0; }
.mk-mock-logo{ width:34px; height:34px; border-radius:9px; background:var(--mk-blue); color:#fff; display:grid; place-items:center; font-weight:800; font-size:15px; margin-bottom:6px; }
.mk-mock-nav{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#7e8db5; }
.mk-mock-nav.on{ background:rgba(255,255,255,.12); color:#fff; }
.mk-mock-nav svg{ width:18px; height:18px; }
.mk-mock-main{ flex:1; min-width:0; padding:20px 22px; }
.mk-mock-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.mk-mock-addr{ font-size:17px; font-weight:700; color:var(--mk-ink); }
.mk-mock-addr small{ display:block; font-size:12.5px; font-weight:400; color:var(--mk-slate); }
.mk-mock-meta{ display:flex; gap:26px; }
.mk-mock-meta div span{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--mk-slate-2); }
.mk-mock-meta div b{ font-size:12.5px; font-weight:600; color:var(--mk-ink-2); }
.mk-mock-row{ display:grid; grid-template-columns:1.1fr 1fr; gap:14px; }
.mk-photo{ border-radius:14px; min-height:140px; background:
   radial-gradient(120% 90% at 30% 20%, #b8d8c0, transparent 60%),
   radial-gradient(120% 120% at 80% 90%, #9fb6d8, transparent 55%),
   linear-gradient(150deg,#cfe3d6,#aec3e0); position:relative; overflow:hidden; }
.mk-photo::after{ content:""; position:absolute; inset:34% 26% 18% 26%; background:#5b6b82; opacity:.55;
  clip-path:polygon(50% 0, 100% 42%, 86% 42%, 86% 100%, 14% 100%, 14% 42%, 0 42%); }
.mk-score{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.mk-score-label{ font-size:12px; font-weight:600; color:var(--mk-ink-2); align-self:flex-start; }
.mk-gauge{ --val:82; width:118px; height:118px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--mk-blue) calc(var(--val)*3.6deg - 30deg), #e7ecf6 0); }
.mk-gauge::before{ content:""; position:absolute; inset:11px; border-radius:50%; background:#fff; }
.mk-gauge-txt{ position:relative; text-align:center; }
.mk-gauge-txt b{ font-size:30px; font-weight:800; color:var(--mk-ink); line-height:1; }
.mk-gauge-txt span{ font-size:11px; color:var(--mk-slate); }
.mk-score-tag{ font-size:13px; font-weight:700; color:var(--mk-blue); }
.mk-score-conf{ font-size:11px; color:var(--mk-green); }
.mk-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.mk-statcard{ padding:13px 14px; border:1px solid var(--mk-line); border-radius:13px; background:#fff; }
.mk-statcard .t{ font-size:11px; color:var(--mk-slate); margin-bottom:5px; }
.mk-statcard .v{ font-size:15px; font-weight:700; }
.mk-statcard .v.g{ color:var(--mk-green); } .mk-statcard .v.a{ color:var(--mk-amber); } .mk-statcard .v.b{ color:var(--mk-blue); }
.mk-bar{ height:6px; border-radius:4px; background:#eef1f8; margin-top:8px; overflow:hidden; }
.mk-bar i{ display:block; height:100%; border-radius:4px; }
.mk-bar i.g{ width:78%; background:var(--mk-green); } .mk-bar i.a{ width:52%; background:var(--mk-amber); }

/* side stat cards (hero floating look) */
.mk-mock-aside{ display:flex; flex-direction:column; gap:12px; }
.mk-asidecard{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--mk-line); border-radius:14px; background:#fff; box-shadow:var(--mk-shadow-sm); }
.mk-asidecard .ic{ width:40px; height:40px; border-radius:11px; background:var(--mk-blue-soft); color:var(--mk-navy); display:grid; place-items:center; flex:0 0 auto; }
.mk-asidecard .ic svg{ width:19px; height:19px; }
.mk-asidecard .t{ font-size:11px; color:var(--mk-slate); }
.mk-asidecard .v{ font-size:18px; font-weight:800; color:var(--mk-ink); }
.mk-asidecard .v small{ font-size:11px; font-weight:500; color:var(--mk-slate); }
.mk-asidecard .v.g{ color:var(--mk-green); font-size:16px; }
.mk-asidecard .v.a{ color:var(--mk-amber); font-size:16px; }

/* ── SAMPLE REPORT CARD (workflows section) ─────────────────────────────── */
.mk-report{ background:#fff; border:1px solid var(--mk-line); border-radius:var(--mk-radius-lg); box-shadow:var(--mk-shadow); padding:24px; }
.mk-report-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.mk-report-mark{ width:46px; height:46px; border-radius:12px; background:var(--mk-sidebar); color:#fff; display:grid; place-items:center; font-weight:800; flex:0 0 auto; }
.mk-report-title{ flex:1; min-width:0; }
.mk-report-title b{ font-size:18px; color:var(--mk-ink); }
.mk-report-title span{ display:block; font-size:13px; color:var(--mk-slate); }
.mk-report-mid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center; margin-bottom:18px; }
.mk-report-rows{ display:flex; flex-direction:column; gap:10px; border:1px solid var(--mk-line); border-radius:14px; padding:8px; }
.mk-report-rowi{ display:flex; align-items:center; gap:12px; padding:10px 12px; }
.mk-report-rowi .ic{ width:40px; height:40px; border-radius:11px; background:var(--mk-blue-soft); color:var(--mk-navy); display:grid; place-items:center; flex:0 0 auto; }
.mk-report-rowi .ic svg{ width:19px; height:19px; }
.mk-report-rowi .lab{ flex:1; min-width:0; }
.mk-report-rowi .lab b{ font-size:14.5px; color:var(--mk-ink); }
.mk-report-rowi .lab span{ display:block; font-size:12.5px; color:var(--mk-slate); }
.mk-chip{ font-size:12.5px; font-weight:700; padding:4px 12px; border-radius:999px; }
.mk-chip.g{ color:var(--mk-green); background:var(--mk-green-bg); } .mk-chip.a{ color:var(--mk-amber); background:var(--mk-amber-bg); }
.mk-report-open{ display:flex; align-items:center; justify-content:center; gap:8px; height:50px; border:1px solid var(--mk-line);
  border-radius:13px; color:var(--mk-navy); font-weight:600; font-size:15px; }

/* ============================================================================
   SIGN-IN (split layout)
   ========================================================================== */
.mk-auth{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.mk-auth-left{ position:relative; overflow:hidden; padding:42px 56px; display:flex; flex-direction:column;
  background:linear-gradient(155deg,#fff 45%, #e9eeff 100%); }
.mk-auth-left .mk-logo{ margin-bottom:auto; }
.mk-auth-welcome{ margin:26px 0; }
.mk-auth-welcome .mk-badge{ margin-bottom:24px; }
.mk-auth-welcome h1{ font-size:58px; line-height:1.02; font-weight:800; letter-spacing:-.025em; margin:0 0 16px; }
.mk-auth-welcome p{ font-size:17px; color:var(--mk-slate); margin:0; max-width:30ch; }
.mk-auth-mock{ margin-top:8px; }
.mk-auth-right{ display:flex; align-items:center; justify-content:center; padding:42px 40px;
  background:linear-gradient(200deg,#eef2ff,#dfe6ff); }
.mk-auth-card{ width:100%; max-width:420px; background:#fff; border-radius:24px; box-shadow:var(--mk-shadow); padding:38px 36px; }
.mk-auth-card h2{ text-align:center; font-size:30px; font-weight:800; margin:0 0 6px; color:var(--mk-ink); }
.mk-auth-card .sub{ text-align:center; color:var(--mk-slate); font-size:14.5px; margin:0 0 26px; }
.mk-field{ margin-bottom:18px; }
.mk-field label{ display:block; font-size:14px; font-weight:600; color:var(--mk-ink-2); margin-bottom:8px; }
.mk-inputwrap{ position:relative; display:flex; align-items:center; }
.mk-inputwrap .lead-ic{ position:absolute; left:14px; color:var(--mk-slate-2); display:grid; place-items:center; }
.mk-inputwrap .lead-ic svg{ width:18px; height:18px; }
.mk-input{ width:100%; height:52px; border:1px solid var(--mk-line); border-radius:13px; background:#fbfcff;
  padding:0 14px 0 44px; font:inherit; font-size:15px; color:var(--mk-ink); transition:border .15s, box-shadow .15s; }
.mk-input:focus{ outline:none; border-color:var(--mk-blue); box-shadow:0 0 0 3px rgba(37,99,235,.14); background:#fff; }
.mk-input::placeholder{ color:var(--mk-slate-2); }
.mk-eye{ position:absolute; right:12px; background:none; border:0; color:var(--mk-slate-2); cursor:pointer; display:grid; place-items:center; padding:6px; }
.mk-eye svg{ width:18px; height:18px; }
.mk-auth-row{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 22px; }
.mk-check{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--mk-ink-2); cursor:pointer; }
.mk-check input{ width:18px; height:18px; accent-color:var(--mk-navy); }
.mk-link{ color:var(--mk-blue); font-size:14px; font-weight:600; }
.mk-divider{ display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--mk-slate-2); font-size:13px; }
.mk-divider::before, .mk-divider::after{ content:""; flex:1; height:1px; background:var(--mk-line); }
.mk-sso{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%; height:52px; border:1px solid var(--mk-line);
  border-radius:13px; background:#fff; font:inherit; font-size:15px; font-weight:600; color:var(--mk-ink); cursor:pointer; transition:border .15s, background .15s; }
.mk-sso + .mk-sso{ margin-top:12px; }
.mk-sso:hover{ border-color:#cdd6ea; background:#fafbff; }
.mk-sso svg{ width:20px; height:20px; }
.mk-auth-foot{ text-align:center; margin:24px 0 0; font-size:14.5px; color:var(--mk-slate); }
.mk-auth-flash{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:12px; padding:11px 14px; font-size:13.5px; margin-bottom:18px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .mk-hero-grid, .mk-how-grid, .mk-work-grid{ grid-template-columns:1fr; gap:40px; }
  .mk-feature-grid{ gap:18px; }
  .mk-h1, .mk-hero h1{ font-size:46px; } .mk-h2{ font-size:38px; } .mk-auth-welcome h1{ font-size:46px; }
  .mk-auth{ grid-template-columns:1fr; } .mk-auth-left{ display:none; }
  .mk-auth-right{ min-height:100vh; }
}
@media (max-width:760px){
  .mk-container{ padding:0 20px; }
  .mk-nav-links{ display:none; }
  .mk-hero h1, .mk-h1{ font-size:36px; } .mk-h2{ font-size:30px; }
  .mk-feature-grid{ grid-template-columns:1fr; }
  .mk-hero-strip, .mk-steps, .mk-cards{ grid-template-columns:1fr; }
  .mk-mini-strip{ grid-template-columns:1fr; } .mk-mini + .mk-mini{ border-left:0; border-top:1px solid var(--mk-line-2); }
  .mk-step:not(:last-child)::after{ display:none; }
  .mk-auth-card{ padding:28px 22px; }
  .mk-section{ padding:56px 0; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* hero mock + floating aside cards side-by-side */
.mk-hero-mockwrap{ display:flex; gap:14px; align-items:flex-start; }
.mk-hero-mockwrap .mk-mock{ flex:1 1 auto; min-width:0; }
.mk-hero-mockwrap .mk-mock-aside{ width:156px; flex:0 0 auto; }
@media (max-width:1024px){ .mk-hero-mockwrap{ flex-wrap:wrap; } .mk-hero-mockwrap .mk-mock-aside{ width:100%; flex-direction:row; } .mk-hero-mockwrap .mk-mock-aside .mk-asidecard{ flex:1; } }
@media (max-width:760px){ .mk-hero-mockwrap .mk-mock-aside{ flex-direction:column; } }