/* MyColivingPM — Front page component styles */

/* ── HERO ── */
.mc-hero { background: var(--mc-navy); min-height: 88vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; overflow: hidden; }
.mc-hero__glow-1 { position: absolute; top: -80px; right: -40px; width: 500px; height: 500px; border-radius: 50%; background: rgba(30,96,145,.2); pointer-events: none; }
.mc-hero__glow-2 { position: absolute; bottom: -80px; left: 25%; width: 300px; height: 300px; border-radius: 50%; background: rgba(249,115,22,.05); pointer-events: none; }
.mc-hero__left { padding: 80px 48px 80px 80px; position: relative; z-index: 1; }
.mc-hero__h1 { font-size: clamp(30px, 4vw, 52px); color: var(--mc-white); line-height: 1.08; font-weight: 800; margin-bottom: 16px; letter-spacing: -.025em; }
.mc-hero__h1 .accent { color: var(--mc-orange); }
.mc-hero__sub { font-size: 17px; color: rgba(255,255,255,.6); line-height: 1.7; max-width: 460px; margin-bottom: 36px; font-weight: 300; }
.mc-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.mc-hero__stats { display: flex; gap: 36px; flex-wrap: wrap; }
.mc-hero__stat { }
.mc-hero__stat-n { font-size: 28px; font-weight: 800; color: var(--mc-white); line-height: 1; letter-spacing: -.02em; display: block; }
.mc-hero__stat-n .accent { color: var(--mc-orange); }
.mc-hero__stat-l { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 4px; display: block; }
.mc-hero__right { padding: 80px 80px 80px 40px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }

/* ── INCOME CARD ── */
.mc-income-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--mc-radius-xl); padding: 28px; width: 100%; max-width: 380px; backdrop-filter: blur(10px); }
.mc-income-card__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.mc-income-card__title { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.mc-income-card__prop { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 18px; }
.mc-income-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.mc-income-card__lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; display: inline-block; margin-bottom: 8px; }
.mc-income-card__lbl--trad { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
.mc-income-card__lbl--platform { background: rgba(249,115,22,.15); color: var(--mc-orange-lt); }
.mc-income-card__amt { font-size: 26px; font-weight: 800; color: var(--mc-white); line-height: 1; letter-spacing: -.025em; }
.mc-income-card__amt--orange { color: var(--mc-orange); }
.mc-income-card__period { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 3px; }
.mc-income-card__bars { display: flex; gap: 6px; align-items: flex-end; height: 44px; margin-bottom: 18px; }
.mc-income-card__bar--trad { height: 38%; width: 40px; background: rgba(255,255,255,.12); border-radius: 3px 3px 0 0; }
.mc-income-card__bar--platform { height: 100%; width: 40px; background: var(--mc-orange); border-radius: 3px 3px 0 0; }
.mc-income-card__uplift { background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.25); border-radius: var(--mc-radius-md); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mc-income-card__uplift-lbl { font-size: 12px; color: rgba(255,255,255,.5); font-weight: 500; }
.mc-income-card__uplift-val { font-size: 18px; font-weight: 800; color: var(--mc-orange); letter-spacing: -.01em; }

/* ── HOW IT WORKS ── */
.mc-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.mc-steps::before { content: ''; position: absolute; top: 27px; left: calc(12.5% + 20px); right: calc(12.5% + 20px); height: 1px; background: var(--mc-border); z-index: 0; }
.mc-step { padding: 0 20px; text-align: center; position: relative; z-index: 1; }
.mc-step__num { width: 54px; height: 54px; border-radius: 50%; background: var(--mc-white); border: 2px solid var(--mc-blue-lt); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 16px; font-weight: 800; color: var(--mc-blue); }
.mc-step__title { font-size: 14px; font-weight: 700; color: var(--mc-navy); margin-bottom: 8px; letter-spacing: -.01em; }
.mc-step__body  { font-size: 13px; color: var(--mc-steel); line-height: 1.65; }
.mc-auto-badge  { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-orange-dk); background: var(--mc-orange-pale); border: 1px solid var(--mc-orange-bdr); padding: 2px 8px; border-radius: 20px; margin-top: 10px; }

/* ── SERVICES ── */
.mc-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.mc-service-card { padding: 28px; }
.mc-service-card--dark { background: var(--mc-navy); border-color: transparent; }
.mc-service-card--dark:hover { border-color: rgba(249,115,22,.3); }
.mc-service-card__icon { width: 44px; height: 44px; border-radius: var(--mc-radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.mc-service-card__icon--blue   { background: var(--mc-blue-pale); }
.mc-service-card__icon--orange { background: rgba(249,115,22,.12); }
.mc-service-card__title       { font-size: 14px; font-weight: 700; color: var(--mc-navy); margin-bottom: 6px; letter-spacing: -.01em; }
.mc-service-card__title--white { color: var(--mc-white); }
.mc-service-card__body        { font-size: 13px; color: var(--mc-steel); line-height: 1.65; }
.mc-service-card__body--light  { color: rgba(255,255,255,.5); }

/* ── CALCULATOR ── */
.mc-calc { background: var(--mc-navy); border-radius: var(--mc-radius-xl); padding: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.mc-calc__field { margin-bottom: 22px; }
.mc-calc__label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.5); display: block; margin-bottom: 8px; letter-spacing: .04em; text-transform: uppercase; }
.mc-calc__select { width: 100%; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: var(--mc-radius-md); padding: 12px 16px; font-size: 14px; color: var(--mc-white); font-family: var(--mc-font); cursor: pointer; }
.mc-calc__select:focus { outline: 2px solid var(--mc-orange); outline-offset: 2px; }
.mc-calc__disclaimer { font-size: 11px; color: rgba(255,255,255,.3); line-height: 1.6; margin-top: 6px; }
.mc-calc__result-big { font-size: 52px; font-weight: 800; color: var(--mc-orange); line-height: 1; letter-spacing: -.03em; }
.mc-calc__result-label { font-size: 13px; color: rgba(255,255,255,.4); margin: 8px 0 28px; }
.mc-calc__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.mc-calc__col { padding: 16px; border-radius: var(--mc-radius-md); }
.mc-calc__col--trad { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.mc-calc__col--platform { background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.2); }
.mc-calc__col-lbl { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; color: rgba(255,255,255,.4); }
.mc-calc__col--platform .mc-calc__col-lbl { color: var(--mc-orange-lt); }
.mc-calc__col-val { font-size: 22px; font-weight: 800; color: var(--mc-white); line-height: 1; letter-spacing: -.02em; }
.mc-calc__col--platform .mc-calc__col-val { color: var(--mc-orange); }
.mc-calc__col-sub { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 3px; }
.mc-calc__col--platform .mc-calc__col-sub { color: rgba(249,115,22,.6); }
.mc-calc__uplift { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--mc-radius-md); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.mc-calc__uplift span:first-child { font-size: 13px; color: rgba(255,255,255,.5); }
.mc-calc__uplift-val { font-size: 20px; font-weight: 800; color: var(--mc-orange); letter-spacing: -.01em; }

/* ── PRICING ── */
.mc-pricing { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.mc-pricing--4col { grid-template-columns: repeat(4,1fr); gap: 16px; }
.mc-plan { background: var(--mc-white); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-lg); padding: 32px; position: relative; display: flex; flex-direction: column; }
.mc-plan--featured { border: 2px solid var(--mc-orange); }
.mc-plan--featured .mc-plan__name { color: var(--mc-orange-dk); }
.mc-plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--mc-orange); color: var(--mc-white); font-size: 10px; font-weight: 700; padding: 4px 16px; border-radius: 20px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mc-plan__name    { font-size: 17px; font-weight: 800; color: var(--mc-navy); margin-bottom: 6px; letter-spacing: -.01em; }
.mc-plan__desc    { font-size: 13px; color: var(--mc-muted); margin-bottom: 20px; line-height: 1.55; }
.mc-plan__price   { font-size: 36px; font-weight: 800; color: var(--mc-navy); line-height: 1; margin-bottom: 4px; letter-spacing: -.025em; }
.mc-plan__price-unit { font-size: 15px; font-weight: 400; color: var(--mc-muted); }
.mc-plan__tier { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-muted); margin-bottom: 4px; }
.mc-plan__period  { font-size: 12px; color: var(--mc-muted); margin-bottom: 20px; }
.mc-plan__divider { height: 1px; background: var(--mc-border); margin: 0 0 20px; border: none; }
.mc-plan__features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; }
.mc-plan__feat { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--mc-steel); }
.mc-plan__feat::before { content: ''; width: 16px; height: 16px; min-width: 16px; border-radius: 50%; background: var(--mc-orange-pale); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8.5l2.5 2.5L12 6' stroke='%23f97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; margin-top: 2px; }
.mc-plan__cta { width: 100%; text-align: center; display: block; font-size: 14px; margin-top: auto; }
.mc-pricing__note { text-align: center; margin-top: 20px; font-size: 13px; color: var(--mc-muted); }

/* ── RESULTS ── */
.mc-results { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.mc-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mc-result-stat { background: var(--mc-white); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-lg); padding: 24px; }
.mc-result-stat__n { font-size: 32px; font-weight: 800; color: var(--mc-orange); line-height: 1; margin-bottom: 4px; letter-spacing: -.025em; }
.mc-result-stat__l { font-size: 13px; color: var(--mc-steel); }
.mc-testimonial { background: var(--mc-white); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-lg); padding: 28px; margin-bottom: 14px; transition: border-color .2s; }
.mc-testimonial:hover { border-color: var(--mc-blue-lt); }
.mc-testimonial__mark { font-size: 40px; font-weight: 800; color: var(--mc-orange); line-height: 1; margin-bottom: 10px; }
.mc-testimonial__text { font-size: 15px; color: var(--mc-slate); line-height: 1.7; margin-bottom: 16px; font-style: italic; font-weight: 300; }
.mc-testimonial__footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.mc-testimonial__author { font-size: 13px; font-weight: 700; color: var(--mc-navy); font-style: normal; }
.mc-testimonial__role   { font-size: 12px; color: var(--mc-muted); }
.mc-testimonial__metric { font-size: 13px; color: var(--mc-orange-dk); font-weight: 700; }

/* ── NEIGHBOURHOODS ── */
.mc-nbhd { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.mc-nbhd__pill { background: var(--mc-white); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-md); padding: 13px 16px; font-size: 13px; font-weight: 500; color: var(--mc-slate); text-align: center; transition: all .18s; }
.mc-nbhd__pill:hover { border-color: var(--mc-orange); color: var(--mc-orange-dk); background: var(--mc-orange-pale); }
.mc-nbhd__note { text-align: center; margin-top: 18px; font-size: 13px; color: var(--mc-muted); }
.mc-nbhd__note a { color: var(--mc-blue-lt); font-weight: 500; }

/* ── FAQ ── */
.mc-faq { border-top: 1px solid var(--mc-border); }
.mc-faq__item { border-bottom: 1px solid var(--mc-border); }
.mc-faq__q { width: 100%; background: none; border: none; font-size: 15px; font-weight: 600; color: var(--mc-navy); padding: 20px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; font-family: var(--mc-font); transition: color .15s; }
.mc-faq__q:hover { color: var(--mc-blue-lt); }
.mc-faq__q[aria-expanded="true"] { color: var(--mc-orange-dk); }
.mc-faq__chevron { flex-shrink: 0; transition: transform .22s; color: var(--mc-muted); }
.mc-faq__q[aria-expanded="true"] .mc-faq__chevron { transform: rotate(180deg); color: var(--mc-orange); }
.mc-faq__a { padding-bottom: 20px; font-size: 14px; color: var(--mc-steel); line-height: 1.75; }
.mc-faq__a p { margin-bottom: 0; }

/* ── CTA ── */
.mc-cta { background: var(--mc-navy); text-align: center; padding: 96px 0; }
.mc-cta h2 { color: var(--mc-white); margin-bottom: 16px; }
.mc-cta__sub { font-size: 17px; color: rgba(255,255,255,.65); max-width: 500px; margin: 0 auto 36px; font-weight: 300; line-height: 1.7; }
.mc-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── MOBILE NAV ── */
#mc-mobile-menu { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--mc-white); border-bottom: 1px solid var(--mc-border); padding: 16px 24px 24px; z-index: 99; box-shadow: 0 8px 32px rgba(13,33,55,.1); }

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .mc-hero { grid-template-columns: 1fr; }
  .mc-hero__right { display: none; }
  .mc-hero__left { padding: 60px 40px; }
  .mc-steps { grid-template-columns: 1fr 1fr; gap: 40px; }
  .mc-steps::before { display: none; }
  .mc-services { grid-template-columns: 1fr 1fr; }
  .mc-calc { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
  .mc-pricing { grid-template-columns: 1fr; }
  .mc-results { grid-template-columns: 1fr; gap: 40px; }
  .mc-stats-grid { grid-template-columns: 1fr 1fr; }
  .mc-nbhd { grid-template-columns: repeat(3,1fr); }
}
@media(max-width:640px){
  .mc-hero__left { padding: 40px 20px; }
  .mc-hero__h1 { font-size: clamp(26px,7vw,34px); }
  .mc-hero__ctas { flex-direction: column; }
  .mc-hero__ctas .btn { width: 100%; text-align: center; }
  .mc-hero__stats { gap: 20px; }
  .mc-steps { grid-template-columns: 1fr; }
  .mc-services { grid-template-columns: 1fr; }
  .mc-calc { padding: 24px 20px; }
  .mc-calc__compare { grid-template-columns: 1fr; }
  .mc-calc__result-big { font-size: 38px; }
  .mc-stats-grid { grid-template-columns: 1fr 1fr; }
  .mc-nbhd { grid-template-columns: 1fr 1fr; }
  .mc-cta__btns { flex-direction: column; align-items: center; }
  .mc-cta__btns .btn { width: 100%; max-width: 320px; text-align: center; }
  h2 { font-size: clamp(20px,6vw,28px); }
  .mc-trust__inner { gap: 14px; justify-content: flex-start; padding: 0 20px; }
}
@media(max-width:400px){
  .mc-hero__h1 { font-size: 24px; }
  .mc-nbhd { grid-template-columns: 1fr; }
  .mc-stats-grid { grid-template-columns: 1fr; }
}

/* ══ PHASE 1 — HOUSE SETUP ══ */
.mc-path-tabs { display:flex; gap:4px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--mc-radius-lg); padding:4px; margin-bottom:28px; }
.mc-path-tab { flex:1; padding:12px 20px; border:none; background:transparent; color:rgba(255,255,255,.5); font-family:var(--mc-font); font-size:13px; font-weight:600; cursor:pointer; border-radius:10px; transition:all .2s; text-align:center; line-height:1.4; }
.mc-path-tab--active { background:var(--mc-orange); color:#fff; }
.mc-path-tab:hover:not(.mc-path-tab--active) { color:#fff; background:rgba(255,255,255,.09); }
.mc-path-save { display:inline-block; background:rgba(249,115,22,.2); color:var(--mc-orange-lt); font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; margin-left:8px; letter-spacing:.04em; vertical-align:middle; }
.mc-path-note { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--mc-radius-md); padding:14px 18px; font-size:13px; color:rgba(255,255,255,.55); line-height:1.65; margin-bottom:22px; }

.mc-setup-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mc-setup-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--mc-radius-lg); padding:30px; position:relative; display:flex; flex-direction:column; }
.mc-setup-card--featured { border:2px solid var(--mc-orange); background:rgba(255,255,255,.09); }
.mc-setup-tier { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:4px; }
.mc-setup-name { font-size:20px; font-weight:800; color:#fff; margin-bottom:6px; letter-spacing:-.015em; }
.mc-setup-price { font-size:34px; font-weight:800; color:var(--mc-orange); line-height:1; margin-bottom:4px; letter-spacing:-.025em; }
.mc-setup-saving { font-size:12px; font-weight:600; color:var(--mc-orange-lt); margin-left:6px; vertical-align:middle; }
.mc-setup-period { font-size:12px; color:rgba(255,255,255,.38); margin-bottom:16px; }
.mc-setup-divider { height:1px; background:rgba(255,255,255,.1); border:none; margin:0 0 16px; }
.mc-setup-features { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:22px; flex:1; }
.mc-setup-card .mc-plan__feat::before { background-color:rgba(249,115,22,.25); border:1px solid rgba(249,115,22,.4); }
.btn--outline-white { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); font-weight:600; }
.btn--outline-white:hover { border-color:#fff; background:rgba(255,255,255,.07); }


/* ══ PHASE 3 — ADD-ONS ══ */
.mc-addons { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mc-addon-card { background:var(--mc-white); border:1px solid var(--mc-border); border-radius:var(--mc-radius-lg); padding:22px; transition:border-color .2s, transform .2s; }
.mc-addon-card:hover { border-color:var(--mc-orange); transform:translateY(-2px); }
.mc-addon-card__price { font-size:24px; font-weight:800; color:var(--mc-orange); line-height:1; margin-bottom:2px; letter-spacing:-.015em; }
.mc-addon-card__unit { font-size:13px; font-weight:400; color:var(--mc-muted); }
.mc-addon-card__name { font-size:14px; font-weight:700; color:var(--mc-navy); margin:6px 0 6px; letter-spacing:-.01em; }
.mc-addon-card__desc { font-size:12px; color:var(--mc-steel); line-height:1.65; }

/* ══ RESPONSIVE ADDITIONS ══ */
@media(max-width:960px) {
  .mc-setup-grid { grid-template-columns:1fr; }
  .mc-pricing--4col { grid-template-columns:1fr 1fr; }
  .mc-addons { grid-template-columns:1fr 1fr; }
  .mc-path-tabs { flex-direction:column; }
}
@media(max-width:640px) {
  .mc-setup-grid { grid-template-columns:1fr; }
  .mc-pricing--4col { grid-template-columns:1fr; }
  .mc-addons { grid-template-columns:1fr 1fr; }
  .mc-path-save { display:none; }
}
@media(max-width:400px) {
  .mc-addons { grid-template-columns:1fr; }
}