/* =========================================================
   MAGENTO SUPPORT CHECKER (page-magento-audit.php)

   Only the components the main stylesheet has no equivalent for:
   the advisory bar, the checker panel, the lifecycle table, the
   evidence grid, the stage list and the form. Everything else on the
   page — .btn, .eyebrow, .section-head, .container, .lead — comes
   from main.css, which is why this file is short.

   No new web fonts. The counter and the date columns need figures
   that don't change width as the number changes, and Space Grotesk
   supports tabular-nums, so that's used instead of pulling in a
   monospace family for one number.
   ========================================================= */

/* ---------- advisory bar ---------- */
.mc-advisory{background:var(--navy);color:rgba(255,255,255,.86);padding:10px 0;}
.mc-advisory-inner{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.mc-advisory-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0;}
.mc-advisory-sep{opacity:.4;}

/* ---------- hero ---------- */
.mc-hero{padding-top:56px;}
.mc-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;}
.mc-hero-content h1{margin-bottom:20px;}
.mc-hero-content .lead{margin-bottom:28px;}
.mc-reassure{font-size:14px;color:var(--muted);margin-top:16px;line-height:1.6;}
.mc-reassure a{color:var(--orange-text);font-weight:600;}

/* ---------- checker panel ---------- */
.mc-panel{
  background:var(--navy);color:#fff;border-radius:var(--radius-lg);
  padding:32px 30px;position:relative;overflow:hidden;
}
.mc-field{margin-bottom:20px;}
.mc-field-label{
  display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:9px;
}
.mc-segmented{display:flex;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-sm);overflow:hidden;}
.mc-segmented button{
  flex:1;padding:11px 8px;border:0;background:transparent;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;
  color:rgba(255,255,255,.65);transition:background 180ms var(--ease),color 180ms var(--ease);
  min-height:44px;
}
.mc-segmented button[aria-pressed="true"]{background:#fff;color:var(--navy);}
.mc-segmented button:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;}

.mc-versions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.mc-versions button{
  padding:10px 4px;min-height:44px;border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-sm);background:transparent;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;
  transition:background 180ms var(--ease),border-color 180ms var(--ease),color 180ms var(--ease);
}
.mc-versions button:hover{border-color:rgba(255,255,255,.5);}
.mc-versions button[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff;}
.mc-versions button:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}

.mc-readout{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:24px;}
.mc-chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius-sm);
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;
}
.mc-chip.is-critical{color:#FF8F76;background:rgba(255,107,74,.14);}
.mc-chip.is-limited{color:#FFC46B;background:rgba(255,196,107,.12);}
.mc-chip.is-ok{color:#6FD4A2;background:rgba(111,212,162,.12);}

.mc-count{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(3rem,9vw,4.8rem);line-height:.95;letter-spacing:-.04em;
  color:var(--orange);margin:16px 0 4px;
}
.mc-unit{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.mc-detail{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72);margin-top:16px;}
.mc-detail strong{color:#fff;font-weight:600;}

/* ---------- lifecycle table ---------- */
.mc-table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--white);}
.mc-table{border-collapse:collapse;width:100%;min-width:660px;font-size:14.5px;}
.mc-table th,.mc-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);}
.mc-table th{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:var(--navy-tint);white-space:nowrap;
}
.mc-table tbody tr:last-child td{border-bottom:0;}
.mc-table .mc-v{font-family:'Space Grotesk',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;}
.mc-table .mc-date{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted);}
.mc-table tr.mc-flagged td{background:rgba(255,107,74,.06);}
.mc-table tr.mc-flagged .mc-v{box-shadow:inset 3px 0 0 var(--orange);}

.mc-tag{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
}
.mc-tag-critical,.mc-tag-unsupported{color:var(--orange-text);}
.mc-tag-supported{color:var(--green);}
.mc-tag-unknown{color:var(--muted);}

.mc-caption{font-size:14px;color:var(--muted);margin-top:14px;max-width:70ch;line-height:1.6;}

/* ---------- evidence ---------- */
.mc-evidence{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.mc-ev{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 26px;display:flex;flex-direction:column;gap:10px;
}
.mc-ev-num{
  font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--orange-text);font-variant-numeric:tabular-nums;
}
.mc-ev-text{font-size:15px;color:var(--muted);line-height:1.6;}
.mc-ev-src{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.75;
  margin-top:auto;padding-top:14px;
}

/* ---------- stages ---------- */
.mc-stages{display:flex;flex-direction:column;}
.mc-stage{display:grid;grid-template-columns:56px 1fr;gap:26px;padding:24px 0;border-bottom:1px solid var(--border);}
.mc-stage:last-child{border-bottom:0;}
.mc-stage-n{
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;
  color:var(--orange-text);letter-spacing:.06em;padding-top:3px;font-variant-numeric:tabular-nums;
}
.mc-stage h3{font-size:17px;margin-bottom:6px;}
.mc-stage p{color:var(--muted);font-size:15px;line-height:1.6;}

/* ---------- two-column layouts ---------- */
.mc-duo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.mc-narrow{max-width:760px;}

.mc-claims{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px;}
.mc-claims li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;}
.mc-claim-mark{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;color:var(--orange-text);
  border:1px solid var(--orange);border-radius:var(--radius-sm);
  width:26px;height:26px;display:grid;place-items:center;flex-shrink:0;margin-top:2px;
}
.mc-claims strong{display:block;font-weight:700;margin-bottom:4px;}
.mc-claims span{color:var(--muted);font-size:15px;line-height:1.6;}

/* ---------- price ---------- */
.mc-price-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:36px 32px;box-shadow:0 20px 44px rgba(11,31,59,.08);
}
.mc-price-amount{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(2.6rem,6vw,3.4rem);letter-spacing:-.04em;line-height:1;margin:8px 0 14px;
}
.mc-price-note{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:22px;}
.mc-includes{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:11px;font-size:15px;}
.mc-includes li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline;}
.mc-includes li::before{content:"—";color:var(--orange);}
.mc-price-body p{color:var(--muted);font-size:16.5px;line-height:1.65;margin-bottom:16px;}

/* ---------- form ---------- */
.mc-form-panel{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px 30px;box-shadow:0 20px 44px rgba(11,31,59,.08);
}
.mc-form-row{margin-bottom:18px;}
.mc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.mc-form-panel .mc-field-label{color:var(--muted);}
.mc-form-panel input,.mc-form-panel textarea,.mc-form-panel select{
  width:100%;padding:12px 13px;font-family:'Inter',sans-serif;font-size:15.5px;
  background:var(--white);color:var(--ink);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
}
.mc-form-panel input:focus,.mc-form-panel textarea:focus,.mc-form-panel select:focus{
  outline:3px solid var(--orange);outline-offset:1px;border-color:var(--orange);
}
.mc-form-panel textarea{min-height:96px;resize:vertical;}
.mc-form-panel .btn{width:100%;margin-bottom:14px;}

.mc-error{display:none;font-size:13.5px;color:var(--orange-text);margin-top:6px;}
.mc-form-row.has-error .mc-error{display:block;}
.mc-form-row.has-error input,.mc-form-row.has-error textarea{border-color:var(--orange-text);}

/* Honeypot: off-screen rather than display:none, because some bots
   skip fields they can tell are hidden. */
.mc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.mc-form-status{display:none;font-size:15px;line-height:1.6;padding:16px 18px;border-radius:var(--radius-sm);}
.mc-form-status.is-ok{display:block;border:1px solid var(--green);background:rgba(30,142,90,.08);color:var(--green);}
.mc-form-status.is-error{display:block;border:1px solid var(--orange-text);background:rgba(255,107,74,.08);color:var(--orange-text);}

/* ---------- faq ---------- */
.mc-faq-list details{border-bottom:1px solid var(--border);padding:18px 0;}
.mc-faq-list details:first-of-type{border-top:1px solid var(--border);}
.mc-faq-list summary{
  cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16.5px;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.mc-faq-list summary::-webkit-details-marker{display:none;}
.mc-faq-list summary::after{content:"+";color:var(--orange-text);font-size:20px;flex-shrink:0;line-height:1;}
.mc-faq-list details[open] summary::after{content:"–";}
.mc-faq-list summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
.mc-faq-list details p{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:66ch;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .mc-hero-grid{grid-template-columns:1fr;gap:36px;}
  .mc-duo{grid-template-columns:1fr;gap:36px;}
  .mc-evidence{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .mc-versions{grid-template-columns:repeat(3,1fr);}
  .mc-form-grid{grid-template-columns:1fr;}
  .mc-stage{grid-template-columns:40px 1fr;gap:16px;}
  .mc-panel{padding:26px 22px;}
}