/* ============================================================
   Medical Device CNC Machined Parts — Goldcattle
   Scoped under .medcnc-page (no global leakage)
   Deploy: https://www.xmgoldcattle.com/assets/css/medical-device-cnc-machined-parts.css
   ============================================================ */

.medcnc-page,
.medcnc-page * { box-sizing: border-box; }

.medcnc-page {
  /* brand + clinical tokens */
  --blue: #0052cc;
  --blue-d: #003d99;
  --navy: #0f2747;
  --accent: #00a3c4;
  --clinical: #0fb5a6;
  --ok: #1f9d72;
  --ink: #16202e;
  --muted: #5b6b7e;
  --line: #e2e9f1;
  --bg: #ffffff;
  --bg-soft: #f3f8fd;
  --bg-deep: #0f2747;
  --bg-card: #ffffff;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(15, 39, 71, .08);
  --shadow-sm: 0 4px 14px rgba(15, 39, 71, .07);
  --maxw: 1180px;

  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.medcnc-page h1,
.medcnc-page h2,
.medcnc-page h3,
.medcnc-page h4 {
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 800;
  letter-spacing: -.01em;
}
.medcnc-page h1 { font-size: clamp(28px, 4vw, 44px); }
.medcnc-page h2 { font-size: clamp(22px, 2.6vw, 32px); margin-top: 0; }
.medcnc-page h3 { font-size: 19px; }
.medcnc-page p { margin: 0 0 1em; color: #2b3a4d; }
.medcnc-page a { color: var(--blue); text-decoration: none; }
.medcnc-page a:hover { text-decoration: underline; }
.medcnc-page ul, .medcnc-page ol { margin: 0 0 1em; padding-left: 1.2em; }
.medcnc-page li { margin: .3em 0; }
.medcnc-page img { max-width: 100%; height: auto; display: block; }

/* ---------- layout helpers ---------- */
.medcnc-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.medcnc-section { padding: 64px 0; border-top: 1px solid var(--line); }
.medcnc-section:first-of-type { border-top: 0; }
.medcnc-section--soft { background: var(--bg-soft); }
.medcnc-section--deep { background: var(--bg-deep); color: #dce6f2; }
.medcnc-section--deep h2,
.medcnc-section--deep h3 { color: #fff; }
.medcnc-section--deep p { color: #c4d2e4; }
.medcnc-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.medcnc-lead { font-size: 18px; color: #34465c; max-width: 820px; }

/* ---------- buttons (CTA => button -> #gcqModal) ---------- */
.medcnc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700; padding: 13px 22px; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer; font-family: inherit;
  transition: .18s ease; line-height: 1.1; text-decoration: none;
}
.medcnc-btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(0,82,204,.28); }
.medcnc-btn--primary:hover { background: var(--blue-d); text-decoration: none; color: #fff; }
.medcnc-btn--ghost { background: #fff; color: var(--blue); border-color: var(--blue); }
.medcnc-btn--ghost:hover { background: #eef3fb; text-decoration: none; }
.medcnc-btn--light { background: #fff; color: var(--navy); }
.medcnc-btn--light:hover { background: #eaf1fb; text-decoration: none; }
.medcnc-btn--block { width: 100%; }
.medcnc-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- HERO (spec-sheet layout, distinct from 5-axis) ---------- */
.medcnc-hero { background:
  radial-gradient(1200px 500px at 85% -10%, rgba(0,163,196,.16), transparent 60%),
  linear-gradient(180deg, #f3f8fd 0%, #ffffff 100%); }
.medcnc-hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: 64px 0 56px; }
.medcnc-hero h1 { margin-bottom: .35em; }
.medcnc-hero .medcnc-sub { font-size: 18px; color: #34465c; max-width: 600px; }
.medcnc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; }
.medcnc-chip {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--navy); box-shadow: var(--shadow-sm);
}
.medcnc-chip svg { width: 16px; height: 16px; flex: none; }
.medcnc-chip .ck { color: var(--ok); font-weight: 800; }

/* hero "spec card" — medical label feel */
.medcnc-speccard {
  background: var(--navy); color: #eaf1fb; border-radius: 18px; padding: 26px 26px 22px;
  box-shadow: 0 24px 50px rgba(15,39,71,.30); position: relative; overflow: hidden;
}
.medcnc-speccard::before {
  content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(0,163,196,.45), transparent 70%); }
.medcnc-speccard .lbl { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.medcnc-speccard h3 { color: #fff; font-size: 17px; margin: 6px 0 16px; }
.medcnc-specline { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.medcnc-specline:first-of-type { border-top: 0; }
.medcnc-specline b { color: #fff; }
.medcnc-specline span { color: #a9c0da; text-align: right; }
.medcnc-speccard .medcnc-btn { margin-top: 16px; }

/* ---------- sticky capsule subnav ---------- */
.medcnc-subnav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.medcnc-subnav-in { max-width: var(--maxw); margin: 0 auto; padding: 9px 16px;
  display: flex; gap: 6px; overflow-x: auto; justify-content: center; }
.medcnc-subnav a {
  white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--navy);
  padding: 7px 13px; border-radius: 999px; }
.medcnc-subnav a:hover { background: var(--bg-soft); text-decoration: none; color: var(--blue); }

/* ---------- quick-answer band ---------- */
.medcnc-band { background: var(--bg-soft); border-top: 1px solid var(--line); }
.medcnc-band-in { padding: 78px 0 64px; }
.medcnc-band h2 { margin-bottom: 20px; }
.medcnc-band h3 { margin: 38px 0 18px; }
.medcnc-def { font-size: 17px; color: #2b3a4d; background: #fff; border-left: 4px solid var(--accent);
  padding: 22px 24px; border-radius: 0 12px 12px 0; box-shadow: var(--shadow-sm); margin-bottom: 10px; }

/* ---------- card grids ---------- */
.medcnc-grid { display: grid; gap: 20px; }
.medcnc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.medcnc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.medcnc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.medcnc-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); }
.medcnc-card h3 { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.medcnc-card .ic { width: 34px; height: 34px; border-radius: 9px; background: #eaf3fb; color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.medcnc-card--accent { border-top: 3px solid var(--accent); }
.medcnc-card--blue { border-top: 3px solid var(--blue); }
.medcnc-card--clinical { border-top: 3px solid var(--clinical); }

/* device-type cards with tag */
.medcnc-devtag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent);
  background: #e6f7f5; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }

/* ---------- callout (honesty / disclaimer) ---------- */
.medcnc-callout { border: 1px solid var(--line); border-left: 4px solid var(--clinical);
  background: #f5fbfa; border-radius: 10px; padding: 20px 22px; margin: 22px 0; }
.medcnc-callout--warn { border-left-color: #e0a106; background: #fffaf0; }
.medcnc-callout h3, .medcnc-callout h4 { margin-top: 0; }
.medcnc-callout p:last-child { margin-bottom: 0; }

/* ---------- tables / matrices ---------- */
.medcnc-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; background: #fff; }
.medcnc-table th, .medcnc-table td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; }
.medcnc-table thead th { background: var(--navy); color: #fff; font-weight: 700; }
.medcnc-table tbody tr:nth-child(even) { background: #f7fafd; }
.medcnc-table tbody tr:hover { background: #eef5fc; }
.medcnc-table td b { color: var(--navy); }
.medcnc-matrix { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.medcnc-matrix th, .medcnc-matrix td { border: 1px solid var(--line); padding: 11px 13px; text-align: center; }
.medcnc-matrix thead th { background: var(--accent); color: #fff; }
.medcnc-matrix tbody th { background: var(--bg-soft); color: var(--navy); text-align: left; font-weight: 700; }
.medcnc-yes { color: var(--ok); font-weight: 800; }
.medcnc-no { color: #b6c0cc; }

/* ---------- process / flow diagrams ---------- */
.medcnc-flow { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.medcnc-step { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  flex: 1 1 150px; box-shadow: var(--shadow-sm); position: relative; }
.medcnc-step b { display: block; color: var(--blue); font-size: 13px; letter-spacing: .04em; }
.medcnc-step span { font-size: 14px; color: #2b3a4d; }
.medcnc-step .ctl { display: block; margin-top: 6px; font-size: 12.5px; color: var(--clinical); font-weight: 600; }

.medcnc-flow-v { display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: 620px; margin: 22px 0; }

/* utility classes (no inline styles allowed in HTML) */
.medcnc-mt { margin-top: 32px; }
.medcnc-mt-s { margin-top: 18px; }
.medcnc-mt0 { margin-top: 0; }
.medcnc-align-c { align-items: center; }
.medcnc-jc { justify-content: center; }
.medcnc-center { text-align: center; }
.medcnc-cap { font-size: 13px; color: #9fb4cc; margin: 0; }
.medcnc-brandline { color: #9fb4cc; font-size: 14px; margin: 0; }
.medcnc-node { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 10px; padding: 12px 16px; box-shadow: var(--shadow-sm); }
.medcnc-node b { color: var(--navy); }
.medcnc-arrow { text-align: center; color: var(--accent); font-weight: 800; padding: 4px 0; }

/* CTQ pipeline */
.medcnc-ctq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0; }
.medcnc-ctq .n { background: var(--navy); color: #fff; border-radius: 8px; padding: 9px 13px; font-size: 13.5px; font-weight: 600; }
.medcnc-ctq .ar { color: var(--accent); font-weight: 800; }

/* ---------- traceability chain ---------- */
.medcnc-chain { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.medcnc-chain .c { background: var(--bg-soft); border: 1px dashed var(--accent); color: var(--navy);
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; }

/* ---------- claims matrix ---------- */
.medcnc-claims th { background: var(--navy) !important; }
.medcnc-claims .keep { color: var(--ok); font-weight: 700; }
.medcnc-claims .care { color: #c8881a; font-weight: 700; }

/* ---------- comparison (vs 3DP / molding) ---------- */
.medcnc-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
.medcnc-cmp .col { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fff; }
.medcnc-cmp .col h3 { margin-top: 0; }
.medcnc-cmp .col--a { border-top: 3px solid var(--blue); }
.medcnc-cmp .col--b { border-top: 3px solid var(--clinical); }

/* ---------- feature list with ticks ---------- */
.medcnc-ticks { list-style: none; padding: 0; margin: 14px 0; }
.medcnc-ticks li { position: relative; padding-left: 28px; margin: .5em 0; }
.medcnc-ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok);
  font-weight: 800; background: #e7f6ef; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

/* ---------- hub cluster map ---------- */
.medcnc-cluster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 22px 0; }
.medcnc-cluster a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; box-shadow: var(--shadow-sm); color: var(--navy); font-weight: 700; }
.medcnc-cluster a:hover { border-color: var(--blue); text-decoration: none; color: var(--blue); }
.medcnc-cluster a span { display: block; font-weight: 500; font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---------- FAQ accordion ---------- */
.medcnc-faq { margin: 18px 0; border-top: 1px solid var(--line); }
.medcnc-faq details { border-bottom: 1px solid var(--line); }
.medcnc-faq summary { cursor: pointer; padding: 16px 40px 16px 4px; font-weight: 700; color: var(--navy);
  position: relative; list-style: none; }
.medcnc-faq summary::-webkit-details-marker { display: none; }
.medcnc-faq summary::after { content: "+"; position: absolute; right: 8px; top: 14px; font-size: 22px;
  color: var(--blue); font-weight: 700; }
.medcnc-faq details[open] summary::after { content: "−"; }
.medcnc-faq details[open] summary { color: var(--blue); }
.medcnc-faq .ans { padding: 0 4px 18px; color: #2b3a4d; }
.medcnc-faq .ans p:last-child { margin-bottom: 0; }

/* ---------- final CTA block ---------- */
.medcnc-ctablock { background: linear-gradient(135deg, #0f2747, #103a66); color: #eaf1fb; border-radius: 18px;
  padding: 44px; text-align: center; }
.medcnc-ctablock h2 { color: #fff; }
.medcnc-ctablock p { color: #c4d2e4; max-width: 680px; margin: 0 auto 22px; }
.medcnc-rfqlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 880px;
  margin: 26px auto 26px; text-align: left; }
.medcnc-rfqlist .it { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 14px 16px; font-size: 14px; }
.medcnc-rfqlist .it b { color: #fff; display: block; margin-bottom: 4px; }

/* ---------- modal (#gcqModal) — styles external, no inline ---------- */
.medcnc-page #gcqModal { display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(10, 20, 35, .72); align-items: center; justify-content: center; padding: 20px; }
.medcnc-page #gcqModal.gcq-show { display: flex; }
.medcnc-page .gcq-modal-box { position: relative; width: min(760px, 96vw); height: min(86vh, 860px);
  background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.medcnc-page .gcq-modal-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.medcnc-page .gcq-modal-close { position: absolute; top: 10px; right: 12px; z-index: 5; width: 34px; height: 34px;
  border: none; border-radius: 50%; background: var(--navy); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .medcnc-hero-in { grid-template-columns: 1fr; gap: 28px; }
  .medcnc-grid-3, .medcnc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .medcnc-cmp { grid-template-columns: 1fr; }
  .medcnc-rfqlist { grid-template-columns: 1fr; }
  .medcnc-ctablock { padding: 30px 22px; }
}
@media (max-width: 600px) {
  .medcnc-section { padding: 44px 0; }
  .medcnc-grid-2, .medcnc-grid-3, .medcnc-grid-4 { grid-template-columns: 1fr; }
  .medcnc-subnav-in { justify-content: flex-start; }
  .medcnc-table, .medcnc-matrix { font-size: 13px; }
  .medcnc-table th, .medcnc-table td, .medcnc-matrix th, .medcnc-matrix td { padding: 8px 9px; }
}