/* =====================================================================
   MultiBizz landing page · page-only styles (shared lp.css untouched)
   ===================================================================== */

/* ---------- signature: live phone simulator ---------- */
.mb-chips{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.875rem}
.mb-chips button{display:inline-flex;align-items:center;gap:.4375rem;min-height:2.5rem;padding:.375rem .8125rem;border-radius:999px;border:1px solid #34343a;font-size:.8125rem;color:#cfc8b6;transition:background-color .25s,border-color .25s,color .25s}
.mb-chips button i{width:.5rem;height:.5rem;border-radius:50%;background:var(--c)}
.mb-chips button:hover{border-color:var(--gold)}
.mb-chips button[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink);font-weight:500}
.mbs{display:grid;grid-template-columns:15.5rem 1fr;gap:1.25rem;align-items:center;padding:1rem;border-radius:var(--r-md);background:#0d0d0e;border:1px solid #1f1f22}
.mbs-phone{position:relative;width:100%;aspect-ratio:9/18.5;border-radius:2.125rem;padding:.5rem;background:linear-gradient(145deg,#2a2a2e,#0d0d0e);box-shadow:0 0 0 1px #34343a,0 30px 60px -20px rgba(0,0,0,.9),0 0 70px -20px rgba(212,178,106,.3)}
.mbs-phone::before{content:"";position:absolute;top:.875rem;left:50%;width:4rem;height:1rem;margin-left:-2rem;border-radius:999px;background:#000;z-index:3}
.mbs-screen{position:relative;height:100%;border-radius:1.625rem;overflow:hidden;background:#fbfaf7;color:#1c1b19;display:flex;flex-direction:column}
.mbs-head{padding:2.125rem .875rem .75rem;background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));color:#fff;transition:background .5s}
.mbs-brand{display:flex;align-items:center;gap:.5rem}
.mbs-logo{width:2rem;height:2rem;border-radius:.625rem;background:rgba(255,255,255,.18);display:grid;place-items:center;font-weight:800;font-size:.875rem}
.mbs-brand b{display:block;font-size:.9375rem;line-height:1.1}
.mbs-brand small{font-size:.625rem;opacity:.85}
.mbs-demo{margin-inline-start:auto;font-size:.5625rem;font-weight:800;letter-spacing:.06em;padding:.125rem .375rem;border-radius:.25rem;background:rgba(0,0,0,.28)}
.mbs-cats{display:flex;gap:.3125rem;padding:.625rem .75rem .25rem;overflow:hidden}
.mbs-cats span{flex:none;font-size:.625rem;padding:.25rem .5625rem;border-radius:999px;background:#ecebe6;color:#55524b}
.mbs-cats span:first-child{background:#1c1b19;color:#fff}
.mbs-items{flex:1;display:grid;gap:.4375rem;padding:.5rem .75rem;align-content:start}
.mbs-item{display:grid;grid-template-columns:2.75rem 1fr;gap:.5rem;align-items:center;padding:.4375rem;border-radius:.75rem;background:#fff;box-shadow:0 1px 0 #ecebe6,0 6px 16px -10px rgba(0,0,0,.25);animation:mbin .45s var(--spring) both}
.mbs-item:nth-child(2){animation-delay:.06s}.mbs-item:nth-child(3){animation-delay:.12s}
@keyframes mbin{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
.mbs-item img{width:2.75rem;height:2.75rem;border-radius:.5rem;object-fit:cover}
.mbs-item b{display:block;font-size:.6875rem;line-height:1.25}
.mbs-item small{display:block;font-size:.5625rem;color:#7b776e}
.mbs-row{display:flex;align-items:center;justify-content:space-between;gap:.375rem;margin-top:.1875rem}
.mbs-row em{font-style:normal;font-weight:800;font-size:.75rem}
.mbs-add{font-size:.5625rem;font-weight:700;padding:.25rem .5rem;border-radius:999px;background:var(--c);color:#fff;min-height:1.5rem;transition:background-color .25s,color .25s}
.mbs-add[aria-pressed="true"]{background:#1c1b19}
.mbs-sum{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:.375rem .625rem .75rem;padding:.5rem .75rem;border-radius:.875rem;background:#1c1b19;color:#fff;font-size:.625rem}
.mbs-sum b{font-size:.6875rem}
.mbs-sum span:last-child{padding:.25rem .5rem;border-radius:999px;background:var(--c);font-weight:700;white-space:nowrap}
.mbs-info h3{font-family:var(--display);font-size:2.5rem;line-height:.95;color:var(--paper);margin-bottom:.375rem}
.mbs-info .tag{font-size:.8125rem;color:var(--gold)}
.mbs-info p{font-size:.9375rem;color:#cfc8b6;margin:.5rem 0 1rem}
.mbs-info ul{display:grid;gap:.4375rem;margin-bottom:1.125rem}
.mbs-info li{display:flex;gap:.5rem;font-size:.875rem;color:var(--champagne)}
.mbs-info li::before{content:"✓";color:var(--gold);font-weight:800}
.mbs-info .btn{min-height:2.75rem;padding:.625rem 1.125rem;font-size:.9375rem}

/* ---------- demo cards ---------- */
.mb-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.mb-card{display:flex;flex-direction:column;border-radius:var(--r-md);overflow:hidden;background:#111113;border:1px solid var(--line2);color:inherit;transition:border-color .3s,transform .4s var(--ease)}
.mb-card:hover{border-color:var(--gold);transform:translateY(-.375rem)}
.mb-card figure{position:relative;aspect-ratio:3/2;overflow:hidden;background:#1a1a1d}
.mb-card img{width:100%;height:100%;object-fit:cover}
.mb-card figure span{position:absolute;top:.75rem;right:.75rem;font-size:.6875rem;font-weight:800;padding:.1875rem .5rem;border-radius:.375rem;background:rgba(0,0,0,.7);color:var(--champagne)}
.mb-card div{display:flex;flex-direction:column;gap:.375rem;padding:1.125rem 1.25rem 1.25rem;flex:1}
.mb-card small{font-size:.8125rem;color:var(--gold)}
.mb-card h3{font-size:1.1875rem;font-weight:700;color:var(--paper)}
.mb-card p{font-size:.9375rem;color:var(--mist);flex:1}
.mb-card .go{display:inline-flex;align-items:center;gap:.375rem;margin-top:.375rem;font-size:.9375rem;font-weight:700;color:var(--gold)}
.mb-card:hover .go{color:var(--champagne)}
.mb-card.ask{border-style:dashed;justify-content:center}
.mb-card.ask div{justify-content:center;text-align:center;align-items:center}

/* ---------- customers vs owner ---------- */
.mb-two{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.mb-side{position:relative;padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-lg);background:linear-gradient(150deg,#1a1a1d,#111113);border:1px solid var(--line2);overflow:hidden}
.mb-side.own{border-color:rgba(212,178,106,.45);background:linear-gradient(150deg,#1b1810,#111113)}
.mb-side .ft-ic{margin-bottom:1rem}
.mb-side h3{font-size:1.375rem;font-weight:700;color:var(--paper);margin-bottom:.25rem}
.mb-side > p{color:var(--mist);margin-bottom:1.125rem}
.mb-side .ticks{margin-bottom:0}

/* ---------- small notes ---------- */
.mb-note{margin-top:1.25rem;font-size:.875rem;color:var(--mist);text-align:center}

@media (max-width:1100px){
  .mb-cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .mb-cards{grid-template-columns:1fr 1fr}
  .mb-two{grid-template-columns:1fr}
}
@media (max-width:760px){
  .mbs{grid-template-columns:1fr}
  .mbs-phone{width:13.5rem;margin-inline:auto}
  .mb-cards{grid-template-columns:1fr}
  .mb-chips{justify-content:center}
}


/* =====================================================================
   v3 · hover upgrades & designed sections (page-only)
   ===================================================================== */
/* who tiles */
.mb-who li{transition:transform .4s var(--ease),border-color .3s,background-color .3s,color .3s}
.mb-who li .ft-ic{transition:transform .45s var(--spring),background-color .3s,border-color .3s}
.mb-who li .ft-ic svg{transition:stroke .3s}
.mb-who li:hover{transform:translateY(-6px);border-color:var(--gold);background:linear-gradient(135deg,#221d10,#111113 70%);color:var(--paper)}
.mb-who li:hover .ft-ic{transform:rotate(-10deg) scale(1.08);background:var(--gold);border-color:var(--gold)}
.mb-who li:hover .ft-ic svg{stroke:var(--ink)}

/* feature tiles: flip to paper on hover */
.mb-feat .ft{transition:transform .45s var(--ease),background-color .35s,border-color .35s,box-shadow .35s}
.mb-feat .ft h3,.mb-feat .ft p{transition:color .35s}
.mb-feat .ft .ft-ic{transition:background-color .35s,border-color .35s,transform .45s var(--spring)}
.mb-feat .ft:hover{background:var(--paper);border-color:var(--paper);transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(212,178,106,.55)}
.mb-feat .ft:hover h3{color:#0c0b09}
.mb-feat .ft:hover p{color:var(--slate)}
.mb-feat .ft:hover .ft-ic{background:#0c0b09;border-color:#0c0b09;transform:scale(1.1)}

/* process: step cards */
.mb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:clamp(2rem,4vw,3rem);counter-reset:none}
.mb-steps li{position:relative;padding:1.75rem 1.5rem 1.625rem;border-radius:var(--r-lg);background:var(--bone);border:1px solid #e7e2d6;transition:transform .45s var(--ease),background-color .35s,border-color .35s,box-shadow .35s;cursor:default}
.mb-steps li:not(:last-child)::after{content:"←";position:absolute;top:50%;left:-1.25rem;z-index:2;width:2.25rem;height:2.25rem;margin-top:-1.125rem;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid #e7e2d6;color:var(--gold-ink);font-weight:800;transition:background-color .3s,color .3s,transform .4s var(--spring)}
.mb-steps .mbn{display:block;font-family:var(--display);font-size:5.5rem;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--gold-deep);margin-bottom:1rem;transition:color .35s,transform .45s var(--spring)}
.mb-steps h3{font-size:1.25rem;font-weight:800;color:#0c0b09;margin-bottom:.375rem;transition:color .35s}
.mb-steps p{font-size:1rem;color:var(--slate);transition:color .35s}
.mb-steps li:hover{transform:translateY(-10px) rotate(-.6deg);background:#0c0b09;border-color:#0c0b09;box-shadow:0 30px 60px -25px rgba(0,0,0,.45)}
.mb-steps li:hover .mbn{color:var(--gold);-webkit-text-stroke-color:var(--gold);transform:scale(1.06)}
.mb-steps li:hover h3{color:var(--paper)}
.mb-steps li:hover p{color:var(--mist)}
.mb-steps li:hover::after{background:var(--gold);color:var(--ink);transform:translateX(-4px)}

/* customers / owner: illustrations */
.mb-two{position:relative}
.mb-link{position:absolute;z-index:3;top:5.5rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.375rem;padding:.5rem .875rem;border-radius:999px;background:var(--gold);color:var(--ink);font-size:.8125rem;font-weight:800;box-shadow:0 0 0 6px var(--night),0 0 40px rgba(212,178,106,.45);white-space:nowrap}
.mb-link svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;animation:spin 6s linear infinite}
.mb-side{transition:transform .45s var(--ease),border-color .3s}
.mb-side:hover{transform:translateY(-6px);border-color:var(--gold)}
.mb-vis{margin:-.25rem 0 1.5rem;padding:1rem;border-radius:var(--r-md);min-height:13rem}
.vis-cust{background:#fbfaf7;color:#1c1b19;display:grid;gap:.5rem;align-content:start}
.vc-row{display:grid;grid-template-columns:2.75rem 1fr auto;gap:.625rem;align-items:center;padding:.4375rem;border-radius:.75rem;background:#fff;box-shadow:0 1px 0 #ecebe6,0 8px 18px -12px rgba(0,0,0,.3)}
.vc-row img{width:2.75rem;height:2.75rem;border-radius:.5rem;object-fit:cover}
.vc-row b{display:block;font-size:.875rem}
.vc-row em{font-style:normal;font-weight:800;font-size:.8125rem;color:#55524b}
.vc-row u{text-decoration:none;width:1.875rem;height:1.875rem;border-radius:50%;display:grid;place-items:center;background:#d9483b;color:#fff;font-weight:800}
.vc-row:first-child u{background:#1c1b19}
.vc-row u.pulse{animation:vcpulse 2.4s ease-in-out infinite}
@keyframes vcpulse{0%,100%{box-shadow:0 0 0 0 rgba(217,72,59,.5)}50%{box-shadow:0 0 0 .5rem rgba(217,72,59,0)}}
.vc-sum{display:flex;justify-content:space-between;align-items:center;margin-top:.25rem;padding:.5rem .75rem;border-radius:.875rem;background:#1c1b19;color:#fff;font-size:.8125rem}
.vc-sum b{padding:.25rem .625rem;border-radius:999px;background:#d9483b;font-size:.75rem}
.vis-own{position:relative;background:#0b0b0c;border:1px solid #232327;overflow:hidden}
.vo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.625rem;font-size:.875rem;color:var(--paper)}
.vo-head span{font-size:.75rem;padding:.25rem .625rem;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:700}
.vo-row{display:grid;grid-template-columns:1fr auto 1.75rem;gap:.625rem;align-items:center;padding:.5625rem .75rem;border-radius:.625rem;background:#141416;border:1px solid #1f1f22;margin-bottom:.375rem;font-size:.875rem;color:var(--champagne)}
.vo-row i{font-style:normal;color:var(--mist);text-align:center}
.vo-price{display:flex;gap:.375rem;align-items:baseline}
.vo-price b{color:var(--paper)}
.vo-price s{color:var(--mist);font-size:.75rem}
.vo-row.edit{animation:voedit 5s ease-in-out infinite}
.vo-row.edit s,.vo-row.edit b{animation:vonew 5s ease-in-out infinite}
.vo-row.edit s{animation-name:voold}
@keyframes voedit{0%,30%,85%,100%{border-color:#1f1f22;background:#141416}40%,75%{border-color:var(--gold);background:#1a170f}}
@keyframes vonew{0%,35%{opacity:0}45%,85%{opacity:1}100%{opacity:0}}
@keyframes voold{0%,35%{text-decoration:none;color:var(--paper);font-size:.875rem}45%,85%{text-decoration:line-through;color:var(--mist);font-size:.75rem}100%{text-decoration:none}}
.vo-toast{position:absolute;bottom:.75rem;left:50%;transform:translate(-50%,1rem);padding:.375rem .875rem;border-radius:999px;background:#103b22;border:1px solid rgba(37,211,102,.5);color:var(--paper);font-size:.75rem;opacity:0;animation:votoast 5s ease-in-out infinite}
@keyframes votoast{0%,45%{opacity:0;transform:translate(-50%,1rem)}55%,80%{opacity:1;transform:translate(-50%,0)}90%,100%{opacity:0;transform:translate(-50%,0)}}

@media (max-width:1024px){
  .mb-steps{grid-template-columns:1fr 1fr}
  .mb-steps li::after{display:none}
  .mb-link{position:relative;top:auto;left:auto;transform:none;justify-self:center;margin:-.5rem auto;box-shadow:0 0 30px rgba(212,178,106,.35)}
  .mb-two{justify-items:stretch}
}
@media (max-width:760px){
  .mb-steps{grid-template-columns:1fr;gap:1.25rem}
  .mb-steps li::after{display:none}
  .mb-steps li:nth-child(2)::after{display:none}
  .mb-steps .mbn{font-size:4rem}
}