/* Page layout around the Design System components. Every value is a Design System token from tokens.css or bundle.css.
   Controls, panels, labels and status come from the components themselves (assets/ds/bundle.js). */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: var(--kelex-space-0);
  min-height: 100vh;
  background-color: var(--surface-page);
  background-image: var(--dc-wash-page);
  background-repeat: no-repeat;
  color: var(--text-body);
  font: var(--dc-type-body);
}
#root { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

.skip { position: absolute; left: var(--kelex-space-16); top: calc(var(--kelex-space-neg-4) * 20); background: var(--surface-page); padding: var(--kelex-space-8) var(--kelex-space-12); border-radius: var(--dc-radius-md); z-index: 2; }
.skip:focus { top: var(--kelex-space-16); }

.wrap { width: 100%; max-width: calc(var(--fib-233) + var(--fib-89)); margin: var(--kelex-space-0) auto; padding: var(--kelex-space-0) var(--kelex-space-24); }

/* Top bar and footer */
.site-top { background: var(--surface-topbar); border-bottom: var(--kelex-space-1) solid var(--border-subtle); }
.site-top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--kelex-space-16); min-height: var(--dc-topbar-height); }
.brand { display: inline-flex; align-items: center; gap: var(--kelex-space-12); text-decoration: none; }
.wordmark { font: var(--kelex-weight-regular) var(--kelex-text-header-3)/var(--kelex-leading-tight) var(--dc-font-mono); color: var(--dc-text-100); }
.wordmark span { color: var(--dc-current-400); }
.site-nav { display: flex; align-items: center; gap: var(--kelex-space-8); }
.nav-anchors { display: inline-flex; align-items: center; gap: var(--kelex-space-8); }
.site-foot { background: var(--surface-footer); border-top: var(--kelex-space-1) solid var(--border-subtle); padding: var(--kelex-space-16) var(--kelex-space-0); }
.site-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--kelex-space-12); font: var(--dc-type-label); color: var(--text-subtle); }
.site-foot-lockup { display: inline-flex; align-items: center; gap: var(--kelex-space-8); }
.site-foot a { color: var(--text-muted); }

/* Type set on the Kelex ramp */
.display { margin: var(--kelex-space-16) var(--kelex-space-0) var(--kelex-space-0); font: var(--kelex-weight-regular) var(--kelex-text-subtitle-1)/var(--kelex-leading-tight) var(--dc-font-mono); color: var(--text-heading); max-width: var(--fib-233); }
.section-title { margin: var(--kelex-space-20) var(--kelex-space-0) var(--kelex-space-32); max-width: var(--fib-233); font: var(--kelex-weight-regular) var(--kelex-text-header-1)/var(--kelex-leading-default) var(--dc-font-mono); color: var(--text-heading); }
.lede { margin: var(--kelex-space-24) var(--kelex-space-0) var(--kelex-space-0); max-width: var(--fib-144); font: var(--dc-type-body); color: var(--text-body); }
.lede-tight { margin-top: var(--kelex-space-0); }
.statement { margin: calc(var(--kelex-space-neg-4) * 2) var(--kelex-space-0) var(--kelex-space-24); max-width: var(--fib-233); font: var(--kelex-weight-regular) var(--kelex-text-header-3)/var(--kelex-leading-default) var(--dc-font-mono); color: var(--text-body); }
.card-copy { margin: var(--kelex-space-0); font: var(--dc-type-body); color: var(--text-muted); }
.card-copy-strong { color: var(--text-heading); }
.fine { margin: var(--kelex-space-16) var(--kelex-space-0) var(--kelex-space-0); font: var(--dc-type-label); color: var(--text-subtle); max-width: var(--fib-144); }
.field-error { margin: var(--kelex-space-8) var(--kelex-space-0) var(--kelex-space-0); font: var(--dc-type-body-sm); color: var(--status-blocked-text); }

/* Sections */
.hero { padding: var(--fib-34) var(--kelex-space-0) var(--kelex-space-90); }
.hero-home { padding-bottom: var(--fib-34); }
.section { padding: var(--fib-34) var(--kelex-space-0); border-top: var(--kelex-space-1) solid var(--border-subtle); }
.section-tight { padding: var(--kelex-space-80) var(--kelex-space-0); }
.actions { display: flex; flex-direction: column; gap: var(--kelex-space-16) var(--kelex-space-24); align-items: flex-start; margin-top: var(--kelex-space-32); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fib-55)), 1fr)); gap: var(--kelex-space-16); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fib-55) + var(--kelex-space-48))), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fib-144)), 1fr)); }
.stack { display: grid; gap: var(--kelex-space-16); max-width: var(--fib-233); }

/* Product screens from the Redesign 1440 canvas */
.screen { display: block; width: 100%; height: auto; border-radius: var(--dc-radius-md); border: var(--kelex-space-1) solid var(--border-subtle); }

/* Application form */
.apply-form { display: grid; gap: var(--kelex-space-16); max-width: var(--fib-233); }
.fields { display: grid; gap: var(--kelex-space-20); }
.fields + .fields { margin-top: var(--kelex-space-20); }
.fields.pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fib-89) - var(--kelex-space-20))), 1fr)); }
.fields.two, .fields.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fib-55)), 1fr)); }
.grid-3 { display: grid; gap: var(--kelex-space-24); grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fib-89) - var(--kelex-space-36))), 1fr)); }
.hp { position: absolute; left: calc(var(--kelex-space-neg-4) * 2500); width: var(--kelex-space-1); height: var(--kelex-space-1); overflow: hidden; }

/* Home: room to breathe */
.lede-hero { max-width: calc(var(--fib-144) + var(--fib-89) - var(--fib-55)); margin-top: var(--kelex-space-32); color: var(--text-muted); }
.actions-row { flex-direction: row; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fib-55)), 1fr)); gap: var(--kelex-space-48); margin-top: var(--fib-21); padding-top: var(--kelex-space-48); border-top: var(--kelex-space-1) solid var(--border-subtle); }
.spaced { margin-top: var(--kelex-space-56); }
.equation { margin: var(--kelex-space-56) var(--kelex-space-0) var(--kelex-space-0); font: var(--kelex-weight-regular) var(--kelex-text-header-3)/var(--kelex-leading-default) var(--dc-font-mono); color: var(--text-accent); max-width: var(--fib-233); }
.office-head { display: flex; align-items: center; gap: var(--kelex-space-12); margin-bottom: var(--kelex-space-16); }
.office-name { margin: var(--kelex-space-0); font: var(--kelex-weight-bold) var(--kelex-text-body)/var(--kelex-leading-default) var(--dc-font-mono); color: var(--text-heading); }
.office-tile { display: inline-flex; align-items: center; justify-content: center; width: var(--kelex-space-36); height: var(--kelex-space-36); border-radius: var(--dc-radius-md); border: var(--kelex-space-1) solid transparent; }
.office-revenue { color: var(--office-revenue); background: var(--office-revenue-bg); border-color: var(--office-revenue-border); }
.office-operations { color: var(--office-operations); background: var(--office-operations-bg); border-color: var(--office-operations-border); }
.office-finance { color: var(--office-finance); background: var(--office-finance-bg); border-color: var(--office-finance-border); }
.office-talent { color: var(--office-talent); background: var(--office-talent-bg); border-color: var(--office-talent-border); }
.office-legal { color: var(--office-legal); background: var(--office-legal-bg); border-color: var(--office-legal-border); }
.requests { list-style: none; margin-left: var(--kelex-space-0); margin-right: var(--kelex-space-0); margin-bottom: var(--kelex-space-0); padding: var(--kelex-space-0); display: grid; gap: var(--kelex-space-0); max-width: var(--fib-233); }
.requests li { display: grid; grid-template-columns: var(--fib-55) 1fr; gap: var(--kelex-space-16); padding: var(--kelex-space-20) var(--kelex-space-0); border-bottom: var(--kelex-space-1) solid var(--border-subtle); }
.request-office { font: var(--kelex-weight-bold) var(--kelex-text-label)/var(--kelex-leading-default) var(--dc-font-mono); text-transform: uppercase; color: var(--text-accent); padding-top: var(--kelex-space-4); }
.request-line { font: var(--dc-type-body); color: var(--text-heading); }
.ticks { list-style: none; margin: var(--kelex-space-32) var(--kelex-space-0) var(--kelex-space-0); padding: var(--kelex-space-0); display: flex; flex-wrap: wrap; gap: var(--kelex-space-12) var(--kelex-space-32); font: var(--dc-type-label); color: var(--text-muted); }
.ticks li { display: inline-flex; align-items: center; gap: var(--kelex-space-8); }
.ticks li::before { content: ""; width: var(--kelex-space-8); height: var(--kelex-space-8); border-radius: var(--dc-radius-pill); background: var(--status-success-solid); }
.feature-title { margin: var(--kelex-space-12) var(--kelex-space-0) var(--kelex-space-16); font: var(--kelex-weight-regular) var(--kelex-text-header-1)/var(--kelex-leading-default) var(--dc-font-mono); color: var(--text-heading); }
.choices { display: grid; gap: var(--kelex-space-12); grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fib-89) - var(--kelex-space-36))), 1fr)); }
.faq { max-width: var(--fib-233); border-top: var(--kelex-space-1) solid var(--border-subtle); }
.faq-item { border-bottom: var(--kelex-space-1) solid var(--border-subtle); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--kelex-space-16); padding: var(--kelex-space-24) var(--kelex-space-0); font: var(--kelex-weight-regular) var(--kelex-text-header-3)/var(--kelex-leading-default) var(--dc-font-mono); color: var(--text-heading); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary span { transform: rotate(180deg); }
.faq-item p { padding-bottom: var(--kelex-space-24); max-width: var(--fib-144); }
.closer { text-align: left; }
.closer-title { font-size: var(--kelex-text-subtitle-2); max-width: var(--fib-233); }

@media (max-width: 768px) {
  .wrap { padding: var(--kelex-space-0) var(--kelex-space-16); }
  .display { font-size: var(--kelex-text-header-1); }
  .section-title { font-size: var(--kelex-text-header-2); }
  .hero, .hero-home { padding: var(--kelex-space-72) var(--kelex-space-0) var(--kelex-space-56); }
  .section { padding: var(--kelex-space-72) var(--kelex-space-0); }
  .nav-anchors { display: none; }
  .closer-title { font-size: var(--kelex-text-header-1); }
  .requests li { grid-template-columns: 1fr; gap: var(--kelex-space-4); }
  .facts { margin-top: var(--kelex-space-56); gap: var(--kelex-space-32); }
  .wordmark { display: none; }
  .site-nav { gap: var(--kelex-space-0); }
}