/* Proposal system: a bold introduction, a quiet operational story.
   Canonical rules: docs/frontend-guidelines/FRONTEND_GUIDELINES.md */
:root {
  --blue: #0067bd;
  --action-hover: #00569e;
  --action-active: #004781;
  --surface-raised: #18212b;
  --content-width: 1240px;
  --page-gutter: clamp(20px, 5.5vw, 80px);
  --section-space: clamp(64px, 7vw, 104px);
  --radius-control: 4px;
  --radius-panel: 8px;
}
@media screen {
  html {scroll-behavior:auto}
  .journey-board {max-height:calc(100dvh - 48px);overflow-y:auto;scrollbar-width:thin}
  .journey-activity summary {min-height:44px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--silver)}
  .journey-activity[open] summary span {transform:rotate(45deg)}
  .header, .hero, .section, .closing, footer {
    padding-inline: max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
  }
  .header {height:88px}
  .header nav {gap:32px}
  .header nav a {padding-block:12px}
  .hero {background:var(--ink);padding-top:0;padding-bottom:24px}
  .hero-core {min-height:640px;padding:72px 0;grid-template-columns:1fr 1fr}
  .hero h1 {font-family:var(--font);font-weight:650;font-size:clamp(52px,6.1vw,88px);line-height:1.04;letter-spacing:-.055em}
  .hero-art {right:-2%;top:24px;width:51%;height:auto;aspect-ratio:1}
  .hero-art img {width:100%;left:0;top:0}
  .orbit, .art-cross, .scroll-ball {display:none}
  .hero-bottom {flex-direction:column;align-items:flex-start;gap:24px;margin-top:32px}
  .hero-bottom p {font-size:16px;line-height:1.65}
  .button {min-height:48px;border-radius:var(--radius-control);padding:12px 20px;gap:24px;transition:background 160ms,border-color 160ms}
  .button:hover {transform:none}
  .primary:hover {background:var(--action-hover)}
  .primary:active {background:var(--action-active)}
  .section {padding-block:var(--section-space)}
  .section h2, .solution-section>h2, .faq-grid h2, .research h2 {
    font-family:var(--font);font-size:clamp(30px,3.5vw,46px);font-weight:600;
    line-height:1.15;letter-spacing:-.035em;
  }
  .section h2 .blue, .section h2 .muted {color:var(--silver)}
  .split-heading {gap:48px;margin-bottom:40px;align-items:start}
  .split-heading>p {font-size:16px;width:310px;padding-top:4px}
  .challenge {border-top:1px solid var(--line)}
  .challenge-stats {margin-top:40px}
  .stat-big {font-size:48px;color:var(--white)}
  .challenge-stats h3 {font-size:18px;font-weight:600}
  .challenge-stats p {font-size:15px;line-height:1.7}
  .journey-section {background:var(--ink);border-color:var(--line)}
  .journey-intro {gap:32px;margin:0 0 48px;padding-bottom:24px;border-bottom:1px solid var(--line);font-size:14px}
  .journey-intro strong {font-family:var(--font);font-size:18px;font-weight:600}
  .journey-layout {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%}
  .journey-steps {padding-left:28px}
  .journey-step {opacity:1;min-height:640px;padding:32px 0 80px}
  .journey-step:before {left:-35px;top:39px;box-shadow:none!important}
  .journey-date {font-family:var(--font);font-size:16px;font-weight:600;line-height:1.4;color:var(--bright)}
  .journey-date>span {font-size:12px;letter-spacing:.04em;margin-top:8px;color:var(--silver)}
  .journey-step h3 {font-family:var(--font);text-transform:none;font-weight:600;font-size:30px;line-height:1.2;letter-spacing:-.025em;margin:24px 0 20px;max-width:460px}
  .stage-owners {gap:16px;margin-block:32px}
  .stage-owners dt {font-size:11px;letter-spacing:.04em;color:var(--silver)}
  .stage-owners dd {font-size:15px}
  .journey-step .stage-guard {font-size:13px}
  .journey-board {background:var(--panel);box-shadow:none;border-color:#34404f;top:24px;padding:20px}
  .board-top {background:transparent;margin:-20px -20px 0;padding:20px;border-bottom:1px solid #34404f;align-items:center;border-top:0}
  .board-clock strong {font-size:64px;line-height:1;font-variant-numeric:tabular-nums;color:var(--white)}
  .board-clock>span {font-size:12px;letter-spacing:.06em;color:var(--silver);margin-top:8px}
  .board-event {font-size:12px;max-width:130px}
  .board-event strong {font-size:13px}
  .board-event #journey-stage {color:var(--silver)}
  .journey-rail {gap:4px;margin:16px 0}
  .journey-rail a {min-height:36px;height:auto;border-top:0;border-radius:3px;font-size:12px;color:var(--silver)}
  .journey-rail a:hover {background:var(--surface-raised);color:var(--white)}
  .journey-rail a[aria-current] {background:var(--blue);color:#fff}
  .board-counts {margin-bottom:16px;padding-bottom:16px}
  .board-counts strong {font-family:var(--font);font-size:26px;font-weight:600;letter-spacing:-.04em}
  .board-counts span, .post-group-heading, .post-group-heading>span {font-size:12px}
  .board-legend {font-size:11px;gap:8px 12px;margin:16px 0}
  .board-legend>span:before {width:8px;height:8px}
  .journey-activity li {font-size:12px}
  .journey-activity .detail-kicker, .board-disclaimer {font-size:11px}
  .journey-pager {font-size:12px;padding-top:4px;margin-top:12px}
  .journey-pager button {min-height:44px;padding:8px}
  .journey-handoff {padding-top:32px}
  .journey-handoff h3 {font-size:22px}
  .demo-section {background:var(--panel)}
  .demo-app {border-radius:var(--radius-panel);box-shadow:none;border:1px solid #d3dbe4}
  .scenario {border-radius:var(--radius-control);min-height:44px;padding:10px 16px}
  .scenario span {display:none}
  .scenario.selected {background:var(--surface-raised);border-color:var(--bright)}
  .app-top {padding:20px 24px}
  .app-title .mini-star, .review-icon {display:none}
  .reset {min-height:44px;min-width:44px}
  .demo-body {grid-template-columns:minmax(0,1fr) 300px}
  .backup {padding:12px}
  .backup span, .backup-reliability, .demo-boundary {color:#53657b}
  .backup-reliability {font-size:12px}
  .review-label {letter-spacing:.06em}
  .solution-section {background:var(--ink);background-image:none;border-bottom:1px solid var(--line)}
  .pillars {gap:32px;margin:40px 0 64px}
  .pillars article {border-color:var(--line);padding-top:20px}
  .pillar-number {font-family:var(--font);font-size:13px;color:var(--bright)}
  .pillars h3 {font-size:20px;margin:20px 0 16px}
  .pillars p {color:var(--silver);font-size:15px}
  .pillar-foot {font-size:13px;color:var(--white)}
  .diagram-heading p, .flow-feedback {color:var(--silver)}
  .flow-map button, .flow-engines button, .flow-map .flow-outputs button {background:var(--panel);border:1px solid #445163;border-radius:var(--radius-control);color:var(--white)}
  .flow-map button small, .flow-inputs button span {color:var(--silver)}
  .flow-map button:hover, .flow-map button.active {background:var(--surface-raised);border-color:var(--bright)}
  .flow-map .flow-approval {background:var(--blue);color:#fff;border:1px solid var(--blue)}
  .flow-map .flow-approval small {color:#fff}
  .flow-map .flow-approval:hover, .flow-map .flow-approval.active {background:var(--action-hover)}
  .flow-arrow, .plus-sign {color:var(--silver)}
  .flow-feedback {border-color:#445163}
  .node-detail {background:var(--panel);border-left-color:var(--bright);border-radius:0 4px 4px 0}
  .node-detail p {color:var(--silver)}
  .rules-layout {gap:48px}
  .ai-note {background:transparent;border:0;border-left:1px solid var(--line);padding:0 0 0 32px}
  .ai-note h3 {font-size:24px;font-weight:600}
  .ai-note .mini-star {display:none}
  .integrations {background:var(--panel)}
  .abi-plan {background:transparent;border:0;border-top:1px solid #34404f;padding:32px 0 0}
  .abi-plan>h3 {font-size:24px}
  .phase-tag {background:transparent;border-color:#445163;border-radius:3px}
  .pilot .section-label, .questions .section-label, .research .section-label {display:none}
  .pilot-timeline {margin-block:40px}
  .pilot-timeline h3 {font-size:22px}
  .research {padding-top:0}
  .closing {padding-block:64px;border-top:1px solid var(--line);background:var(--ink)}
  .closing h2 {font-size:clamp(48px,7vw,88px);line-height:.98;margin:24px 0 32px}
  .closing>p {letter-spacing:.06em;font-size:12px}
  @media(max-width:1000px) {
    .demo-body {grid-template-columns:1fr}
    .review-panel {border-left:0;border-top:1px solid #d3dbe4}
    .hero-core {min-height:560px}
    .hero-art {top:64px}
  }
  @media(max-width:900px) {
    .header nav {display:flex;gap:20px}
    .hero h1 {font-size:6.3vw}
    .hero-core {min-height:520px}
    .hero-art {width:52%;right:-4%;top:80px}
    .journey-layout {display:flex}
    .journey-board {top:8px;padding:16px;grid-template-columns:100px 1fr;gap:12px 20px}
    .board-top {margin:-16px -16px 0;padding:12px 16px;grid-column:1/-1;grid-row:1}
    .board-clock strong {font-size:44px}
    .board-clock>span {margin:0}
    .journey-rail {grid-template-columns:repeat(5,1fr);margin:0}
    .journey-rail a {min-height:36px;font-size:12px}
    .journey-step {scroll-margin-top:430px;min-height:600px}
    .journey-step h3 {font-size:30px}
    .post-cell {max-height:12px}
    .board-counts strong {font-size:24px}
    .board-counts span {font-size:11px}
    .board-legend {margin:0}
    .journey-pager {margin:0;padding:0}
  }
  @media(max-width:620px) {
    .header {height:auto;min-height:80px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:12px}
    .header nav {width:100%;justify-content:space-between;margin:0;border-top:1px solid var(--line);gap:16px;font-size:13px;padding-top:4px}
    .header nav a {padding:8px 0}
    .header .magic-logo {width:40px;height:40px}
    .hero-core {display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:40px 0 16px}
    .hero h1 {font-size:10.7vw;line-height:1.08;white-space:normal;letter-spacing:-.045em}
    .hero-art {position:relative;inset:auto;order:2;width:85%;max-width:380px;margin:16px auto 0;opacity:1}
    .hero-bottom {margin-top:24px;gap:20px}
    .hero-bottom p {font-size:16px}
    .hero-bottom .button {font-size:14px;min-height:48px}
    .split-heading {margin-bottom:32px}
    .split-heading>p {width:auto;font-size:16px}
    .challenge-stats article {display:block;padding:24px 0}
    .challenge-stats h3 {margin:12px 0}
    .challenge-stats p {font-size:16px}
    .stat-big {font-size:40px}
    .journey-intro {gap:20px;font-size:12px;margin-bottom:32px;flex-wrap:wrap}
    .journey-intro strong {font-size:16px;display:block}
    .journey-board {position:relative;top:auto;max-height:none;display:block;padding:16px;margin-bottom:32px}
    .board-top {margin:-16px -16px 16px}
    .board-clock {display:flex;flex-direction:row}
    .board-clock strong {font-size:48px}
    .board-clock>span {font-size:11px;max-width:120px}
    .board-counts {display:flex;margin:16px 0;padding-bottom:16px;border-bottom:1px solid var(--line)}
    .board-counts>div:last-child {display:flex}
    .post-board {gap:12px}
    .post-grid {gap:3px}
    .post-group-heading, .post-group-heading>span {font-size:12px}
    .journey-rail {grid-template-columns:repeat(3,1fr)}
    .journey-rail a {min-height:44px}
    .board-legend {margin:16px 0;font-size:11px}
    .journey-pager {margin-top:12px}
    .journey-pager button {min-height:44px}
    .board-disclaimer {display:block;margin-top:16px}
    .journey-steps {padding-left:20px;margin-left:5px;width:calc(100% - 5px)}
    .journey-step {min-height:0;padding:24px 0 64px;scroll-margin-top:24px}
    .journey-step:before {left:-27px;top:30px}
    .journey-date {position:sticky;top:0;background:var(--ink);z-index:2;padding:12px 0;font-size:16px}
    .journey-step h3 {font-size:26px;margin-top:16px}
    .journey-date>span {font-size:11px}
    .stage-owners>div {grid-template-columns:1fr;gap:4px}
    .stage-owners dd {font-size:15px}
    .journey-step>p {font-size:16px}
    .scenario-controls {grid-template-columns:1fr 1fr}
    .scenario {font-size:13px;padding:10px 12px}
    .app-top {padding:16px}
    .app-title div>span {font-size:12px}
    .app-title strong {font-size:16px}
    .demo-metrics {flex-wrap:wrap;gap:16px 24px;padding:16px}
    .pillars {grid-template-columns:1fr;gap:28px;margin-bottom:48px}
    .pillars p {font-size:16px}
    .pillars h3 {margin:12px 0}
    .rules-layout {grid-template-columns:1fr;gap:32px}
    .ai-note {border-left:0;border-top:1px solid var(--line);padding:24px 0 0}
    .closing h2 {font-size:18vw}
  }
}

/* Delivery is a sequence of milestones, without decorative accent bars. */
@media screen {
  .delivery-timeline {list-style:none;padding:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-bottom:28px}
  .delivery-timeline li {display:flex;flex-direction:column;border-top:1px solid #bac5cf;padding-top:20px}
  .delivery-timeline .phase-index {color:#53657b;letter-spacing:.04em}
  .delivery-timeline li>div {margin-top:auto;border-top:1px solid #c6cfd7;padding-top:16px;font-size:12px;color:#53657b}
  .delivery-timeline li>div strong {display:block;font-size:14px;color:#202630;margin-top:8px;line-height:1.5}
  .delivery-note {font-size:14px;max-width:850px;margin-bottom:40px;line-height:1.7}
  .node-detail {border-left:1px solid #445163}
  @media(max-width:1000px) {.delivery-timeline {grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
  @media(max-width:620px) {.delivery-timeline {grid-template-columns:1fr}.delivery-timeline li {padding-top:24px}}
}
@media print {.delivery-timeline {list-style:none;padding:0;grid-template-columns:1fr 1fr}.delivery-timeline li {break-inside:avoid}.delivery-timeline li>div strong {display:block}.delivery-note {font-size:12px;margin-bottom:20px}}

/* Annotation refinement: compact, unambiguous hero and timeline. */
@media screen {
 .header .brand-divider {background:#a7b1bf;width:1px;height:32px;opacity:1;margin-inline:24px 10px}
 .hero-bottom p {color:#ffffff;max-width:460px;font-size:16px;line-height:1.7}
 .hero-art {transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 260ms ease-out}
 .hero-art img {clip-path:circle(41.3% at 49% 48.2%);rotate:-18deg;transform-origin:49% 48.2%;animation:ball-arrive 1800ms linear both,ball-spin-in 1800ms cubic-bezier(.16,1,.3,1) both}
 .board-clock {flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}
 .board-clock>span {margin:0;font-size:12px;max-width:150px;line-height:1.5;text-align:left}
 .board-top {gap:16px;flex-wrap:wrap}
 .board-event {text-align:left;max-width:none}
 .board-event strong {display:none}
 .board-event #journey-stage {margin:0;color:var(--silver);font-size:13px}
 .board-event #journey-stage:empty {display:none}
 .board-legend {justify-content:center;text-align:center;width:100%}
 .reliability-details {border-top:1px solid var(--line);margin-top:24px}
 .reliability-details summary {display:flex;justify-content:space-between;align-items:center;min-height:48px;font-size:14px;color:var(--white)}
 .reliability-details p {font-size:14px;line-height:1.7;margin-top:16px}
 @media(max-width:900px) {.board-event {display:block}.board-top {display:flex}.board-clock {justify-content:flex-start}}
 @media(max-width:620px) {.header .brand-divider {margin-inline:20px 6px}.hero-bottom p {font-size:15px}.board-clock strong {font-size:44px}.board-clock>span {max-width:130px}.board-event {flex-basis:100%}}
}
@keyframes ball-arrive {
 0% {opacity:0;translate:60px -95%;scale:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}
 10% {opacity:1}
 38% {translate:16px 0;scale:1.035 .965;animation-timing-function:cubic-bezier(0,.55,.45,1)}
 59% {translate:6px -19%;scale:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}
 76% {translate:0 0;scale:1.018 .982;animation-timing-function:cubic-bezier(0,.55,.45,1)}
 87% {translate:0 -5%;scale:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}
 96% {translate:0 0;scale:1.006 .994}
 100% {opacity:1;translate:0 0;scale:1}
}
@keyframes ball-spin-in {from {rotate:-300deg}to {rotate:-18deg}}
@media(prefers-reduced-motion:reduce) {.hero-art {transform:none!important;transition:none}.hero-art img {animation:none!important;transform:none!important}}
@media screen {.hero-art {mix-blend-mode:screen}}

@media screen {.hero h1 {font-size:clamp(36px,4.5vw,64px);line-height:1.1;letter-spacing:-.045em}@media(max-width:900px) {.hero h1 {font-size:4.6vw}}@media(max-width:620px) {.hero h1 {font-size:9.6vw;line-height:1.12}}}

/* The hero artwork becomes the small corner companion as the hero leaves view. */
@media screen {
 .scroll-ball {display:block;position:fixed;inset:0 auto auto 0;z-index:9;pointer-events:none;opacity:0;transition:none;will-change:transform,width;height:54px;mix-blend-mode:screen}
 .scroll-ball.visible {opacity:1}
 .scroll-ball img {display:block;width:100%;height:100%;object-fit:contain;transform-origin:center;will-change:transform}
}
@media(prefers-reduced-motion:reduce) {.scroll-ball {display:none!important}.hero-art img {visibility:visible!important}}

/* The ball arcs above the rim, then drops behind its front edge. */
.corner-hoop,.hoop-front {position:fixed;right:12px;bottom:12px;width:110px;height:140px;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:8}
.hoop-front {z-index:10}
.corner-hoop.visible,.hoop-front.visible {opacity:1}
.corner-hoop svg,.hoop-front svg {display:block;width:100%;height:100%}
.hoop-net {transform:scaleY(var(--net-stretch,1));transform-origin:55px 68px}
@media(max-width:620px) {.corner-hoop,.hoop-front {width:88px;height:112px}}
@media print,(prefers-reduced-motion:reduce) {.corner-hoop,.hoop-front {display:none!important}}

/* A single Magic-inspired transition keeps team branding out of data panels. */
.magic-divider{position:relative;height:13px;margin:0;background:transparent;isolation:isolate}
.magic-pinstripes{position:absolute;inset:auto 0 0;height:13px;border-block:4px solid #f5f6f7;background:#080b0e}
.magic-divider-star{position:absolute;width:108px;height:108px;right:max(5.5%,24px);bottom:-43px;z-index:1;filter:drop-shadow(0 3px 2px #0004)}
@media(max-width:620px){.magic-divider{height:11px}.magic-divider-star{width:78px;height:78px;bottom:-31px;right:24px}.magic-pinstripes{height:11px;border-block-width:3px}}
@media print{.magic-divider{display:none}}

/* Blue sampled from the supplied official Magic logo. */
:root{--magic-blue:#0050b5}
@media screen{.hero h1>span{color:var(--magic-blue)}.hero .button.primary{background:var(--magic-blue);border-color:var(--magic-blue);color:#fff}.hero .button.primary:hover{background:#06469a;border-color:#06469a}.hero .button.primary:active{background:#003c88}}

/* Mercury-inspired field: a quiet top with broad, diffuse color rising from below. */
@media screen {
 .intro-atmosphere{background:radial-gradient(ellipse 85% 40% at 12% 62%,rgba(39,102,194,.32),transparent 85%),radial-gradient(ellipse 85% 42% at 96% 64%,rgba(122,145,184,.22),transparent 85%),linear-gradient(180deg,#08090b 8%,#101c30 58%,#08090b 100%)}
 .intro-atmosphere .hero,.intro-atmosphere .challenge{background:transparent;border-top:0;border-bottom:0}
 .hero-art{top:64px}
 @media(min-width:621px) and (max-width:1000px){.hero-art{top:104px}}
 @media(max-width:620px){.hero-art{top:auto;margin-top:32px}}
 #pilot{background:radial-gradient(ellipse 100% 65% at 50% 120%,rgba(0,80,181,.16),transparent 85%),#0c1015}
 .magic-divider{background:transparent}
}

@media screen {
 .header{border-bottom:0}
 .ball-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
 .hero-art.is-traveling .ball-stars{visibility:hidden}
 .scroll-ball .ball-stars{transform:rotate(var(--ball-rotation,0deg));transform-origin:center}
}

/* Reference: KH Teka Medium. System fallback until a licensed webfont is supplied. */
:root{--proposal-heading:'KH Teka','Helvetica Neue',Helvetica,Arial,sans-serif}
@media screen {
 .hero h1,.section h2,.closing h2,.research h2,.journey-step h3{font-family:var(--proposal-heading);font-weight:500;letter-spacing:-.045em;line-height:1.02}
 .hero h1{letter-spacing:-.05em;line-height:1.04}
}

/* One type family across the proposal, controls, and interactive examples. */
:root{--font:'KH Teka','Helvetica Neue',Helvetica,Arial,sans-serif;--display:var(--font);--proposal-heading:var(--font)}
body,button,input,select,textarea{font-family:var(--font)}
.stat-big,.board-clock strong,.board-counts strong,.journey-intro strong{font-family:var(--font);font-weight:500;letter-spacing:-.04em}

/* Silver details support Magic blue; delivery uses the same dark section system. */
:root{--accent-silver:#b9bec5}
@media screen {
 #pilot{background:var(--ink);color:var(--white)}
 #pilot h2,#pilot h3,#pilot .delivery-timeline li>div strong{color:var(--white)}
 #pilot p,#pilot li,#pilot .source-note{color:var(--silver)}
 #pilot .phase-index,#pilot .detail-kicker,#pilot .delivery-timeline li>div{color:var(--accent-silver)}
 #pilot .delivery-timeline li{border-color:#59616c}
 #pilot .delivery-timeline li>div{border-color:var(--line);padding-top:16px}
 #pilot .pilot-scope{background:var(--surface-raised);border:1px solid #454e59;border-radius:var(--radius-panel);padding:28px}
 #pilot .pilot-bottom{border-color:var(--line)}
 #pilot .button.light{background:var(--accent-silver);color:#101318;border-color:var(--accent-silver)}
 #pilot .button.light:hover{background:#d1d5db}
 .journey-date,.stage-owners dt,.integration-steps h3,.detail-kicker{color:var(--accent-silver)}
 .coverage-views button[aria-pressed=true]{border-color:var(--accent-silver)}
 .header .brand-divider{background:var(--accent-silver)}
 .roi-bar>span{border-radius:var(--radius-control) var(--radius-control) 0 0}
}

@media screen {
 .hero .button.primary,#pilot .button.light{justify-content:center;text-align:center}
 .hero .button.primary{min-width:160px}
 .staff-preview{background:var(--ink)}
 .rule-list summary{gap:0}
 .rule-list details p{padding-left:0;margin-left:0}
 #pilot .pilot-scope{background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;padding:0 0 0 32px}
 #pilot .pilot-scope .detail-kicker{display:block;margin-bottom:20px}
 #pilot .pilot-scope .button{width:100%;margin-top:24px}
 @media(max-width:620px){#pilot .pilot-scope{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}}
}

/* Compact navigation and coverage layout, informed by Mercury's dashboard. */
@media screen {
 .header{display:flex;flex-wrap:nowrap;gap:28px;height:88px}
 .header .brand{flex-shrink:0}
 .header .brightdesk-logo{width:164px;height:auto}
 .header .magic-logo{width:48px;height:48px}
 .header .brand-divider{height:28px;margin-inline:18px 12px}
 .header nav{margin-left:auto;gap:24px;white-space:nowrap;font-size:14px}
 .header nav a{color:var(--silver)}
 .header nav a:hover{color:var(--white)}
 .header .contact-cta{background:#ffffff;color:var(--ink);min-height:42px;padding:10px 18px;white-space:nowrap;justify-content:center;font-size:14px}
 .journey-board{display:block;background:#0e1217;border-color:#30363e;border-radius:6px;padding:24px}
 .board-top{margin:0;padding:0 0 20px;display:flex;justify-content:space-between;align-items:center}
 .board-clock{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
 .board-clock strong{font-size:32px;letter-spacing:-.04em}
 .board-clock>span{font-size:10px;letter-spacing:.03em;margin:0;max-width:none}
 .board-event{display:none}
 .stage-selector{display:flex;align-items:center;gap:16px;margin:20px 0;font-size:12px;color:var(--silver)}
 .stage-selector select{min-width:0;width:100%;font:inherit;font-size:12px;color:var(--white);background:#171c22;border:1px solid #3b424b;border-radius:4px;padding:10px;min-height:40px}
 .board-counts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0;padding:0 0 20px;border-bottom:1px solid #30363e}
 .board-counts>div:last-child{text-align:left;border-left:1px solid #30363e;padding-left:24px}
 .board-counts strong{font-size:28px}
 .board-counts span{font-size:11px;margin-top:6px}
 .journey-board .coverage-views{margin:0;padding:12px 0 0;gap:24px;border-bottom:1px solid #30363e}
 .journey-board .coverage-views button{padding:12px 0;border:0;border-bottom:2px solid transparent;background:transparent;border-radius:0;font-size:12px;color:var(--silver)}
 .journey-board .coverage-views button[aria-pressed=true]{background:transparent;border-color:var(--accent-silver);color:var(--white)}
 .journey-board .post-board{display:block;padding-top:4px}
 .journey-board .post-group{display:block;padding:16px 0;border-bottom:1px solid #252b32}
 .journey-board .post-group-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;gap:16px}
 .journey-board .post-group-heading strong{font-size:12px;font-weight:500}
 .journey-board .post-group-heading>span{position:static;font-size:12px;font-variant-numeric:tabular-nums;color:var(--silver)}
 .journey-board .post-grid{display:flex;flex-wrap:nowrap;gap:4px;width:100%}
 .journey-board .post-cell{flex:1 1 0;min-width:0;max-width:none;width:auto;height:6px;border-radius:2px}
 .board-legend{display:flex;justify-content:flex-start;gap:8px 14px;margin:16px 0;font-size:10px}
 .journey-pager{border-top:1px solid #30363e;margin-top:16px;padding-top:10px}
 @media(max-width:1000px){.header{gap:20px}.header nav{gap:18px}.header .brightdesk-logo{width:140px}.header .magic-logo{width:40px;height:40px}}
 @media(max-width:760px){.header{height:auto;flex-wrap:wrap;min-height:80px}.header nav{order:3;width:100%;border:0;justify-content:space-between;gap:12px;padding:0}.header .contact-cta{margin-left:auto}.journey-board{padding:18px}.board-top{padding-bottom:16px}}
}

@media screen{.manager-grid .staff-preview{background:var(--ink)}}
@media screen and (max-width:620px){
 .header{gap:12px}
 .header .brand{gap:0}
 .header .brightdesk-logo{width:112px}
 .header .magic-logo{width:32px;height:32px}
 .header .brand-divider{height:24px;margin-inline:10px}
 .header .contact-cta{padding:10px 12px;font-size:12px;min-height:40px}
 .header nav{justify-content:space-between;gap:8px;font-size:12px}
}
@media screen{
 .closing{display:grid;grid-template-columns:1fr .85fr;align-items:center;gap:64px}
 .closing .closing-copy>p{font-size:12px;letter-spacing:.08em;color:var(--silver)}
 .closing .closing-copy>div{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
 .closing-mascot{margin:0;min-width:0}
 .closing-mascot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:53% center;border-radius:4px}
 .closing-mascot figcaption{display:flex;flex-direction:column;gap:8px;text-align:left;padding-top:16px;color:var(--silver);font-size:10px;line-height:1.5}
 .closing-mascot figcaption>span{letter-spacing:.1em;font-size:11px}
 .closing-mascot figcaption a{color:var(--silver);text-decoration:none}
 @media(max-width:760px){.closing{grid-template-columns:1fr;gap:40px}.closing-mascot{max-width:440px;width:100%}.closing-mascot img{aspect-ratio:4/3;object-position:center 35%}}
}
@media print{.closing-mascot{display:none}}
@media screen{
 .closing>.closing-copy{display:block;min-width:0;text-align:left}
 .closing .closing-copy h2{font-size:clamp(44px,5.5vw,80px);line-height:1.02;margin:24px 0 32px}
 .closing .closing-copy>p{max-width:none}
 .closing>.closing-mascot{justify-self:end;max-width:440px}
}
/* Stuff has a reserved strip, so he never covers copy or controls. */
@media screen{
 .closing{display:block}
 .closing>.closing-copy{text-align:center}
 .closing .closing-copy>div{justify-content:center}
 .mascot-stage{position:relative;isolation:isolate;height:170px;margin:0 5.5%;overflow:hidden;border-bottom:1px solid var(--line)}
 .mascot-walker{position:absolute;bottom:0;left:0;width:144px;height:144px;pointer-events:none;will-change:transform}
 .mascot-sprite{width:100%;height:100%;background-image:url('assets/stuff-sprites.png');background-size:400% 200%;background-repeat:no-repeat;background-position:0 100%}
 .mascot-toggle{position:absolute;top:0;right:0;z-index:1;background:transparent;color:var(--silver);border:1px solid var(--line);border-radius:4px;font:inherit;font-size:11px;padding:8px 12px;cursor:pointer}
 .mascot-toggle:hover{color:var(--white)}
 .mascot-toggle:focus-visible{outline:2px solid var(--bright);outline-offset:3px}
 @media(max-width:620px){.mascot-stage{height:150px}.mascot-walker{width:120px;height:120px}}
}
@media print{.mascot-stage{display:none}}
@media screen{.mascot-stage{height:190px}.mascot-walker{transform:translate3d(-160px,0,0)}}
@media screen and (max-width:620px){.mascot-stage{height:174px}}
@media screen{.mascot-sprite.is-walking{background-image:url('assets/stuff-walk-v2.png');background-size:400% 100%}}
@media screen{.mascot-sprite.is-walking{width:75%;margin-inline:auto}}
@media screen{.mascot-sprite.is-walking{position:relative;top:8%}}

/* Stars arrive from different directions after the ball settles, then twinkle once. */
.hero-art > .ball-stars use {
 transform-box:fill-box;transform-origin:center;
 animation:star-arrive 1400ms ease-out var(--star-delay,1850ms) both;
}
.hero-art > .ball-stars use:nth-of-type(1) {--star-x:-240px;--star-y:-100px;--star-turn:-65deg}
.hero-art > .ball-stars use:nth-of-type(2) {--star-x:40px;--star-y:-240px;--star-turn:45deg;--star-delay:1930ms}
.hero-art > .ball-stars use:nth-of-type(3) {--star-x:-220px;--star-y:160px;--star-turn:-40deg;--star-delay:2010ms}
.hero-art > .ball-stars use:nth-of-type(4) {--star-x:240px;--star-y:-160px;--star-turn:70deg;--star-delay:1890ms}
.hero-art > .ball-stars use:nth-of-type(5) {--star-x:220px;--star-y:180px;--star-turn:50deg;--star-delay:1970ms}
.hero-art > .ball-stars use:nth-of-type(6) {--star-x:-80px;--star-y:240px;--star-turn:-55deg;--star-delay:2050ms}
.scroll-ball img {clip-path:circle(41.3% at 49% 48.2%);transform-origin:49% 48.2%}
@keyframes star-arrive {
 0% {opacity:0;translate:var(--star-x) var(--star-y);rotate:var(--star-turn);scale:.65}
 25% {opacity:1}
 58% {opacity:1;translate:0 0;rotate:0deg;scale:1}
 74% {opacity:.65;translate:0 0;rotate:0deg;scale:.94}
 84% {opacity:1;translate:0 0;rotate:0deg;scale:1.06}
 100% {opacity:1;translate:0 0;rotate:0deg;scale:1}
}
@media(prefers-reduced-motion:reduce) {.hero-art > .ball-stars use {animation:none}}