:root {
  color-scheme: light;
  --blue-950: #073158;
  --blue-900: #064476;
  --blue-800: #0563aa;
  --blue-100: #dcefff;
  --surface: #fff;
  --surface-muted: #f7f9fb;
  --ink: #173042;
  --muted: #5f7280;
  --line: #dfe5ea;
  --accent: #ff8300;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-brand: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--surface-muted); font: 1rem/1.55 var(--font); }
a { color: var(--blue-800); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue-800); outline-offset: 4px; border-radius: 3px; }
.skip-link { position: fixed; z-index: 10; inset: .5rem auto auto .5rem; padding: .5rem .8rem; background: var(--surface); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.wordmark { display: inline-flex; gap: .65rem; align-items: center; font: 800 clamp(1.15rem, 2vw, 1.6rem)/1 var(--font-brand); letter-spacing: -.04em; white-space: nowrap; }
.wordmark img { flex: none; }
.env { border: 1px solid currentColor; padding: .28rem .6rem; border-radius: 50px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.access-layout { display: grid; grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr); min-height: 100svh; }
.mobile-brand { display: none; }
.brand-panel {
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 3rem;
  overflow: hidden;
  min-height: 43rem;
  padding: clamp(2rem, 4.3vw, 5rem);
  color: var(--surface);
  background: radial-gradient(ellipse at 90% 55%, #087fdc 0, transparent 61%), linear-gradient(145deg, #073158, #0b5090 64%, #073158);
}
.brand-panel::after { position: absolute; inset: 0; z-index: -1; content: ""; background: radial-gradient(#b3e4ff55 1px, transparent 1px) 0 0 / 1.32rem 1.32rem; mask-image: linear-gradient(137deg, transparent 20%, #000 75%); }
.brand-header, .shell-header, .shell-header-end { display: flex; align-items: center; justify-content: space-between; gap: .9rem; }
.brand-header .env { color: #cde8f7; border-color: #5c829f; }
.brand-intro { position: relative; z-index: 1; align-self: start; margin-top: clamp(2rem, 6vh, 6rem); margin-bottom: 12rem; max-width: 33rem; }
.eyebrow { margin: 0 0 .65rem; color: var(--blue-800); font-size: .78rem; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }
.brand-intro .eyebrow { color: #cde8f7; display: flex; align-items: center; gap: .6rem; }
.brand-intro .eyebrow span { width: .65rem; height: .65rem; border-radius: 50%; background: var(--accent); }
.brand-heading { margin: 0; color: var(--surface); font-size: clamp(2.3rem, 4.4vw, 4.45rem); line-height: 1.04; font-weight: 760; letter-spacing: -.055em; }
.brand-heading em { font-style: normal; color: #ffbc70; }
.brand-heading + p { color: #d6eafb; max-width: 25rem; margin: 1.1rem 0 0; font-size: 1.05rem; }
.brand-footer { position: relative; z-index: 1; margin: 0; color: #d6eafb; font-size: .83rem; }
.architecture { position: absolute; z-index: 0; width: min(97%, 52rem); inset: auto 0 3rem auto; height: auto; }
.access-panel { display: grid; place-items: center; padding: clamp(2rem, 6vw, 6rem); background: radial-gradient(ellipse at 90% 0, #e9f5ff, transparent 70%), var(--surface); }
.access-copy { width: min(100%, 26rem); }
.access-icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; color: var(--blue-800); background: var(--blue-100); border: 1px solid #c1e1fa; border-radius: 1rem; margin-bottom: 1.4rem; box-shadow: 0 8px 26px #0972c624; }
h1, h2 { color: var(--blue-950); line-height: 1.12; letter-spacing: -.035em; }
h1 { margin: 0; font-size: clamp(2rem, 3.2vw, 3.15rem); }
.intro { color: var(--muted); margin: .9rem 0 1.6rem; }
.access-button { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.25rem; padding: .8rem 1rem; border-radius: .65rem; color: #211509; background: var(--accent); text-decoration: none; font-weight: 800; }
.access-button:hover { background: #ff9b32; }
.handoff { margin: .8rem 0 1.45rem; color: var(--muted); font-size: .87rem; }
.access-help { border-top: 1px solid var(--line); padding-top: .9rem; color: var(--muted); font-size: .94rem; }
.access-help summary { color: var(--blue-800); cursor: pointer; min-height: 2rem; font-weight: 700; }
.access-help p { margin: .25rem 0 0; }
.access-environment { margin: 1.4rem 0 0; color: var(--muted); font-size: .8rem; display: flex; align-items: center; gap: .45rem; }
.access-environment span { display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--blue-800); }

.shell-header { min-height: 4.5rem; padding: 1rem 1.6rem; color: var(--surface); background: var(--blue-950); }
.shell-header a, .shell-nav a, .shell-menu { color: var(--surface); }
.shell-header a:focus-visible, .shell-nav a:focus-visible, .shell-menu summary:focus-visible { outline-color: var(--accent); }
.shell-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); min-height: calc(100svh - 4.5rem); }
.shell-menu { background: var(--blue-950); }
.shell-menu > summary { display: none; }
.shell-nav { display: grid; align-content: start; gap: .35rem; padding: 1.3rem 1rem; color: var(--surface); background: var(--blue-950); }
.shell-nav .eyebrow { color: #cde8f7; margin: 0 .55rem .55rem; }
.shell-nav details > summary { padding: .5rem .65rem; color: #cde8f7; cursor: pointer; font-size: .78rem; font-weight: 700; }
.shell-nav details a { margin-inline-start: .45rem; }
.shell-nav a { display: flex; align-items: center; gap: .6rem; padding: .65rem .65rem; border-radius: .55rem; text-decoration: none; font-size: .96rem; }
.shell-nav a:hover, .shell-nav a[aria-current] { background: var(--blue-900); }
.shell-nav a[aria-current] { box-shadow: inset 3px 0 var(--accent); }
.shell-nav a span { flex: none; width: 1.05rem; text-align: center; }
.shell-content { max-width: 85rem; width: 100%; padding: clamp(1.3rem, 4vw, 3.3rem); margin-inline: auto; }
.shell-content > p:not(.eyebrow) { color: var(--muted); }
.shell-note { padding: .7rem .85rem; margin: 1.3rem 0; border: 1px solid #f3c693; border-inline-start: 4px solid var(--accent); background: #fff7ec; border-radius: .45rem; }
.shell-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, .43fr); align-items: start; gap: 1rem; }
.shell-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.shell-cards section, .shell-context { padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: .85rem; }
.shell-cards h2, .shell-context h2 { margin: 0; font-size: 1.3rem; }
.shell-cards ul { margin: .85rem 0 0; padding-left: 1.05rem; color: var(--muted); }
.shell-context > p:not(.eyebrow), .shell-context dd { color: var(--muted); }
.shell-context dt { font-weight: 700; }
.shell-context dd { margin: 0 0 .6rem; }

@media (max-width: 72rem) {
  .shell-workspace { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 57rem) {
  .mobile-brand { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: 1.1rem clamp(.85rem, 5vw, 2rem); background: var(--blue-950); color: var(--surface); }
  .mobile-brand .env { color: #cde8f7; border-color: #5c829f; }
  .access-layout { display: flex; flex-direction: column; min-height: calc(100svh - 4.65rem); background: var(--surface); }
  .brand-panel { display: none; }
  .access-panel { place-items: start center; padding: clamp(1.4rem, 7vw, 3rem) clamp(1rem, 6vw, 2.5rem) 2.3rem; }
  .access-copy { width: min(100%, 31rem); }
  .shell-layout { grid-template-columns: 1fr; }
  .shell-menu > summary { display: list-item; cursor: pointer; padding: .75rem 1rem; font-weight: 700; }
  .shell-nav { padding: .35rem 1rem .9rem; }
  .shell-nav .eyebrow { display: none; }
  .shell-header { padding: .85rem 1rem; }
  .shell-header-end { flex-wrap: wrap; justify-content: flex-end; gap: .3rem .7rem; font-size: .82rem; }
  .shell-cards { grid-template-columns: 1fr; }
}

@media (max-width: 24rem) {
  .mobile-brand .wordmark { font-size: 1.08rem; gap: .45rem; }
  .mobile-brand .wordmark img { width: 30px; height: 30px; }
  .mobile-brand .env { font-size: .68rem; }
}