/* Developer-first public experience. Loaded last so these refinements stay intentional. */

/* Keep the architecture connector behind nodes and remove the reflective seam from the API node. */
.mc-architecture { isolation: isolate; }
.mc-arch-line { position: relative; z-index: 0; }
.mc-arch-node { position: relative; z-index: 1; }
.mc-arch-node.dark {
  background: var(--foreground) !important;
  background-image: none !important;
  color: white;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}
.mc-arch-node.dark::before,
.mc-arch-node.dark::after { content: none !important; display: none !important; background: none !important; }

/* Header: make the public site read like a developer product without hiding customer access. */
.mc-header { border-bottom-color: color-mix(in oklab, var(--border) 76%, transparent); }
.mc-desktop-nav a[href="/developers"] { color: var(--foreground); font-weight: 680; }
.mc-header-dev-cta { min-width: 112px; }

/* Homepage developer hero. */
.mc-dev-hero { padding: 92px 0 30px; overflow: hidden; }
.mc-dev-hero-grid { display: grid; grid-template-columns: .93fr 1.07fr; gap: clamp(54px, 7vw, 92px); align-items: center; }
.mc-dev-hero-copy h1 { max-width: 700px; margin: 20px 0 22px; font-size: clamp(50px, 5.5vw, 74px); line-height: .98; letter-spacing: -.062em; font-weight: 710; }
.mc-dev-hero-copy > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.68; letter-spacing: -.012em; }
.mc-dev-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mc-dev-hero-meta span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in oklab, var(--surface) 74%, transparent); color: var(--muted); font: 600 11.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.mc-dev-hero-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }

.mc-terminal { position: relative; overflow: hidden; border: 1px solid color-mix(in oklab, var(--foreground) 15%, var(--border)); border-radius: 16px; background: oklch(0.16 0.012 260); color: rgba(255,255,255,.86); box-shadow: 0 34px 90px rgba(15,23,42,.16), 0 4px 14px rgba(15,23,42,.08); }
.mc-terminal::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 75% 0%, rgba(255,255,255,.055), transparent 35%); }
.mc-terminal-top { min-height: 52px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.55); font-size: 11px; }
.mc-terminal-dots { display: flex; gap: 6px; }
.mc-terminal-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.24); }
.mc-terminal-tabs { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.mc-terminal-tabs span:first-child { color: rgba(255,255,255,.9); }
.mc-terminal-code { margin: 0; min-height: 328px; padding: 28px 25px 24px; overflow-x: auto; white-space: pre; color: rgba(255,255,255,.82); font: 12.5px/1.85 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.mc-terminal-code .dim { color: rgba(255,255,255,.38); }
.mc-terminal-code .key { color: rgba(255,255,255,.62); }
.mc-terminal-code .ok { color: #89d7a4; }
.mc-terminal-status { min-height: 54px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.48); font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.mc-terminal-status strong { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.78); font-weight: 600; }
.mc-terminal-status strong::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #75cf94; }

.mc-dev-primitives { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mc-dev-primitives-grid { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 52px; border: 1px solid var(--border); border-radius: 15px; overflow: hidden; background: var(--surface); box-shadow: var(--mc-card-shadow, 0 12px 36px rgba(15,23,42,.05)); }
.mc-dev-primitive { min-height: 248px; padding: 28px 24px; border-right: 1px solid var(--border); }
.mc-dev-primitive:last-child { border-right: 0; }
.mc-dev-primitive > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.mc-dev-primitive svg { width: 18px; height: 18px; stroke-width: 1.8; }
.mc-dev-primitive code { display: block; margin-top: 31px; color: var(--muted-2); font: 600 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.mc-dev-primitive h3 { margin: 8px 0 8px; font-size: 17px; letter-spacing: -.025em; }
.mc-dev-primitive p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.66; }

.mc-dev-quickstart { background: var(--foreground); color: white; }
.mc-dev-quickstart-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(55px, 8vw, 104px); align-items: center; }
.mc-dev-quickstart h2 { margin: 16px 0 17px; max-width: 560px; font-size: clamp(38px, 4.3vw, 56px); line-height: 1.03; letter-spacing: -.052em; }
.mc-dev-quickstart p { max-width: 590px; margin: 0; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.72; }
.mc-dev-quickstart .mc-eyebrow { color: rgba(255,255,255,.48); }
.mc-dev-quickstart .mc-text-link { color: white; }
.mc-dev-quickstart-steps { display: grid; gap: 1px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.12); }
.mc-dev-quickstart-steps article { display: grid; grid-template-columns: 42px 1fr auto; gap: 15px; align-items: center; padding: 20px; background: color-mix(in oklab, var(--foreground) 94%, white); }
.mc-dev-quickstart-steps article > span { color: rgba(255,255,255,.38); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.mc-dev-quickstart-steps h3 { margin: 0 0 4px; font-size: 15px; }
.mc-dev-quickstart-steps p { color: rgba(255,255,255,.5); font-size: 12.5px; line-height: 1.45; }
.mc-dev-quickstart-steps code { color: rgba(255,255,255,.65); font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* Developer resource hub. */
.devhub-hero { padding: 88px 0 82px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--background), color-mix(in oklab, var(--surface-2) 58%, white)); }
.devhub-hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 78px; align-items: center; }
.devhub-hero h1 { max-width: 760px; margin: 18px 0 20px; font-size: clamp(46px, 5.3vw, 70px); line-height: .99; letter-spacing: -.06em; }
.devhub-hero p { max-width: 680px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.68; }
.devhub-command { overflow: hidden; border: 1px solid var(--border-strong); border-radius: 15px; background: var(--surface); box-shadow: var(--mc-card-shadow-hover, 0 25px 70px rgba(15,23,42,.1)); }
.devhub-command-head { min-height: 50px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.devhub-command-head code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.devhub-command pre { margin: 0; padding: 24px 21px; overflow-x: auto; background: color-mix(in oklab, var(--surface-2) 72%, white); color: var(--foreground); font: 12px/1.85 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.devhub-command-foot { padding: 14px 17px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.devhub-command-foot strong { color: var(--green); font-weight: 650; }
.devhub-index { display: grid; grid-template-columns: 250px 1fr; gap: 54px; align-items: start; }
.devhub-index aside { position: sticky; top: 98px; display: grid; gap: 4px; }
.devhub-index aside strong { margin-bottom: 9px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.devhub-index aside a { padding: 9px 10px; border-radius: 8px; color: var(--muted); font-size: 13px; }
.devhub-index aside a:hover { background: var(--surface-2); color: var(--foreground); }
.devhub-resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.devhub-resource-card { min-height: 235px; padding: 25px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.devhub-resource-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--mc-card-shadow-hover, 0 22px 55px rgba(15,23,42,.08)); }
.devhub-resource-card > div { display: flex; align-items: center; justify-content: space-between; }
.devhub-resource-card svg { width: 19px; height: 19px; }
.devhub-resource-card code { color: var(--muted-2); font: 10.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.devhub-resource-card h3 { margin: 29px 0 8px; font-size: 19px; letter-spacing: -.026em; }
.devhub-resource-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.devhub-resource-card b { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; font-size: 12.5px; }

/* Security center. */
.sec-hero { padding: 88px 0 76px; border-bottom: 1px solid var(--border); background: var(--background); }
.sec-hero-grid { display: grid; grid-template-columns: 1fr 420px; gap: 78px; align-items: end; }
.sec-hero h1 { max-width: 800px; margin: 18px 0 20px; font-size: clamp(48px, 5.6vw, 72px); line-height: .99; letter-spacing: -.061em; }
.sec-hero p { max-width: 760px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.sec-posture { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--border); }
.sec-posture div { min-height: 73px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--surface); }
.sec-posture span { color: var(--muted); font-size: 12px; }
.sec-posture b { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 670; }
.sec-posture b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sec-controls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 48px; }
.sec-control { min-height: 255px; padding: 26px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.sec-control > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.sec-control svg { width: 18px; height: 18px; }
.sec-control h3 { margin: 30px 0 8px; font-size: 18px; letter-spacing: -.024em; }
.sec-control p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.66; }
.sec-boundary { display: grid; grid-template-columns: .86fr 1.14fr; gap: 76px; align-items: center; }
.sec-boundary-list { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.sec-boundary-list article { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; min-height: 79px; padding: 14px 17px; border-bottom: 1px solid var(--border); }
.sec-boundary-list article:last-child { border-bottom: 0; }
.sec-boundary-list article > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.sec-boundary-list h3 { margin: 0 0 4px; font-size: 14px; }
.sec-boundary-list p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.sec-boundary-list code { color: var(--muted-2); font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.sec-report { padding: 76px 0; background: var(--foreground); color: white; }
.sec-report .mc-shell { display: flex; align-items: center; justify-content: space-between; gap: 42px; }
.sec-report h2 { margin: 0 0 9px; font-size: clamp(32px, 3.5vw, 46px); letter-spacing: -.045em; }
.sec-report p { max-width: 720px; margin: 0; color: rgba(255,255,255,.58); font-size: 15px; line-height: 1.65; }
.sec-report .mc-button { flex: 0 0 auto; background: white; color: var(--foreground); border-color: white; }

/* Help Center: developer lane first, customer lane always available. */
.v3-help-hero { background: linear-gradient(180deg, var(--background), color-mix(in oklab, var(--surface-2) 60%, white)); }
.v3-help-hero .mc-eyebrow { justify-content: center; }
.help-dev-strip { padding: 30px 0 12px; background: var(--surface); }
.help-dev-strip-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 15px; }
.help-dev-strip-head h2 { margin: 0; font-size: 22px; letter-spacing: -.032em; }
.help-dev-strip-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.help-dev-strip-head a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; }
.help-dev-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.help-dev-strip-grid a { min-height: 144px; padding: 19px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.help-dev-strip-grid code { color: var(--muted-2); font: 10.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.help-dev-strip-grid h3 { margin: 22px 0 5px; font-size: 15px; }
.help-dev-strip-grid p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

@media (max-width: 1040px) {
  .mc-dev-hero-grid, .devhub-hero-grid, .sec-hero-grid { grid-template-columns: 1fr; }
  .mc-terminal { max-width: 780px; }
  .mc-dev-primitives-grid { grid-template-columns: repeat(2, 1fr); }
  .mc-dev-primitive { border-bottom: 1px solid var(--border); }
  .mc-dev-primitive:nth-child(2n) { border-right: 0; }
  .mc-dev-primitive:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .mc-dev-quickstart-grid, .sec-boundary { grid-template-columns: 1fr; gap: 44px; }
  .devhub-index { grid-template-columns: 1fr; gap: 28px; }
  .devhub-index aside { position: static; display: flex; flex-wrap: wrap; }
  .devhub-index aside strong { width: 100%; }
  .sec-hero-grid { gap: 38px; }
  .sec-posture { max-width: 700px; }
}

@media (max-width: 800px) {
  .sec-controls-grid { grid-template-columns: 1fr 1fr; }
  .devhub-resource-grid { grid-template-columns: 1fr; }
  .help-dev-strip-grid { grid-template-columns: 1fr 1fr; }
  .mc-terminal-code { min-height: 0; }
}

@media (max-width: 640px) {
  .mc-dev-hero { padding-top: 58px; }
  .mc-dev-hero-copy h1, .devhub-hero h1, .sec-hero h1 { font-size: clamp(40px, 12vw, 54px); }
  .mc-dev-hero-copy > p, .devhub-hero p, .sec-hero p { font-size: 16px; }
  .mc-dev-primitives-grid, .sec-controls-grid, .help-dev-strip-grid { grid-template-columns: 1fr; }
  .mc-dev-primitive, .mc-dev-primitive:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--border); }
  .mc-dev-primitive:last-child { grid-column: auto; }
  .mc-dev-quickstart-steps article { grid-template-columns: 34px 1fr; }
  .mc-dev-quickstart-steps code { display: none; }
  .devhub-hero { padding-top: 58px; }
  .devhub-command pre { font-size: 11px; }
  .sec-hero { padding-top: 58px; }
  .sec-posture { grid-template-columns: 1fr; }
  .sec-report .mc-shell { align-items: flex-start; flex-direction: column; }
  .help-dev-strip-head { align-items: flex-start; flex-direction: column; }
}