/* Local brand study: Stillness recipe from Kairos_Brand/system/tokens.json.
   Soft animated color only; see brand-color-notes.md. */
:root {
  --jade-depth: #233832;
  --jade-body: #5C8B7E;
  --jade-glow: #A4C2B9;
  --lilac-depth: #35303F;
  --lilac-body: #85799D;
  --lilac-glow: #BEB6CE;
  --silver-glow: #D2DAD3;
}
@font-face {
  font-family: 'Kairos Fraunces';
  src: url('./flow-iterations/brand-assets/Fraunces.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
html body, body #dc-root {
  font-family: 'Kairos Inter', Inter, system-ui, sans-serif !important;
}
#top .kairos-wordmark {
  font-family: Georgia, serif;
}
#top .kairos-display {
  font-family: 'Kairos Fraunces', Georgia, serif !important;
  font-weight: 450 !important;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 48, 'SOFT' 65, 'WONK' 0;
  font-synthesis: none;
  font-size: clamp(1.75rem, calc(.625rem + 5.625vw), 3rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
  color: #FAFAF7 !important;
  width: min(42rem, calc(100vw - 32px));
}
/* Coordinated expressive families: jade, lilac, rose and a trace of amber. */
#top {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 12% 32%, rgba(92,139,126,.46), transparent 64%),
    radial-gradient(ellipse at 85% 16%, rgba(133,121,157,.42), transparent 62%),
    radial-gradient(ellipse at 62% 86%, rgba(154,115,133,.32), transparent 58%),
    radial-gradient(ellipse at 4% 95%, rgba(150,123,92,.16), transparent 48%),
    #090A0A;
}
a[aria-label="Kairos home"] img,
a[aria-label="Kairos home"] svg {
  filter: brightness(0) invert(1);
}
#top > .hero-depth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .92;
}
#top::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, rgba(9,10,10,.48), transparent 60%);
}
#why { background: #090A0A; }
#why > div {
  background:
    radial-gradient(ellipse at var(--why-jade-x, 43%) var(--why-jade-y, 48%), rgba(92,139,126,.22), transparent 48%),
    radial-gradient(ellipse at var(--why-lilac-x, 57%) var(--why-lilac-y, 54%), rgba(133,121,157,.18), transparent 46%);
}
#how {
  background: #090A0A;
}
#how::before {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  background: linear-gradient(90deg, var(--jade-glow), var(--lilac-glow), transparent);
  margin-bottom: 4px;
}
nav:has(form) {
  background: rgba(35,56,50,.94) !important;
  box-shadow: 0 0 0 1px rgba(164,194,185,.3) !important;
}
form input {
  background: #090A0A !important;
}
form button {
  background: var(--jade-glow) !important;
  border-color: var(--jade-glow) !important;
}
form button:hover {
  background: var(--silver-glow) !important;
}
footer {
  background: linear-gradient(110deg, #233832, #090A0A 48%, #35303F);
  border-color: rgba(210,218,211,.16) !important;
}

/* One email field with an inset action, rather than nested pills. */
nav:has(form) {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  overflow: visible;
}
nav form {
  position: relative;
  display: block !important;
  width: min(440px, calc(100vw - 40px));
}
nav form input {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px;
  padding: 0 164px 0 22px !important;
  border: 1px solid rgba(210,218,211,.28) !important;
  border-radius: 999px !important;
  background: rgba(20,22,21,.94) !important;
  font-size: 15px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  transition: border-color .18s ease, box-shadow .18s ease;
}
nav form input:focus-visible {
  outline: none !important;
  border-color: #A4C2B9 !important;
  box-shadow: 0 0 0 3px rgba(164,194,185,.14);
}
nav form button {
  position: absolute;
  right: 4px;
  top: 4px;
  height: 40px !important;
  min-height: 40px;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
@media (max-width: 380px) {
  nav form input { padding-left: 16px !important; padding-right: 148px !important; font-size: 14px !important; }
  nav form button { padding: 0 12px !important; font-size: 13px !important; }
}

/* Production social assets and destinations, with brand typography. */
nav.landing-social-links {
  position: fixed;
  top: clamp(20px, 2.8vw, 36px);
  left: clamp(20px, 2.8vw, 36px);
  display: flex;
  align-items: center;
  gap: 11px;
  z-index: 120;
  background: transparent !important;
  box-shadow: none !important;
}
.landing-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px;
  transition: opacity .2s ease;
}
.landing-social-links a:hover { opacity: .76; }
.landing-social-links .social-logo {
  display: block;
  height: 15px;
  width: 100%;
  object-fit: contain;
}
.social-logo-x, .social-logo-substack { filter: brightness(0) invert(1); }
.landing-contact-link {
  position: fixed;
  top: clamp(20px, 2.8vw, 36px);
  right: clamp(20px, 2.8vw, 36px);
  margin-block: -10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  z-index: 120;
  font: 500 12px/1.4 'Kairos Inter', Inter, sans-serif;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72) !important;
  text-decoration: none;
}
.landing-contact-link:hover { color: #FAFAF7 !important; text-decoration: underline; text-underline-offset: .22em; }

footer.production-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(100% - 32px);
  margin: 0 auto 16px;
  gap: 24px;
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(133,121,157,.09), rgba(92,139,126,.06) 50%, rgba(154,115,133,.07)), rgba(10,10,10,.92);
  border: 1px solid rgba(255,255,255,.06) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
footer.production-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font: 400 13px/1.4 Georgia, serif;
  color: rgba(255,255,255,.58) !important;
  text-decoration: none;
}
footer.production-footer a:hover { color: #FAFAF7 !important; }
footer.production-footer a:focus-visible { outline-color: #D2DAD3 !important; }
@media (max-width: 640px) {
  footer.production-footer { width: calc(100% - 24px); margin-bottom: 12px; gap: 16px; padding: 8px 12px; }
  footer.production-footer a { font-size: 12px; white-space: nowrap; }
}

/* Shared 42px centerline: 52px sticky wrapper centers the 48px field. */
nav.landing-social-links,
.landing-contact-link {
  top: 20px;
}
nav.landing-social-links {
  height: 44px;
}
.landing-social-links a { margin-block: 0; }
.landing-contact-link { margin-block: 0; }

/* Keep descriptions above the graph, never inside connector lanes. */
#top .hero-insight { width: clamp(180px, 23vw, 260px) !important; }
@media (max-width: 700px) {
  #top { min-height: 720px !important; height: 100svh !important; }
  #top .kairos-wordmark { left: 50% !important; top: 49% !important; }
  #top .hero-insight { width: calc(100% - 48px) !important; max-width: 420px; }
  #top .hero-insight span:last-child { font-size: 15px !important; line-height: 1.45 !important; }
  #top .hero-signal { max-width: 40%; text-align: center; }
  #top .hero-signal span { font-size: .75rem !important; letter-spacing: .06em !important; }
  #top > div:has(> .kairos-display) { top: 63% !important; width: calc(100% - 32px); gap: 22px !important; }
  #top .kairos-display { width: 100% !important; }
  body div:has(> div > nav > form) { top: 72px !important; }
  nav:has(form) form { width: calc(100vw - 32px) !important; max-width: 440px; }
}

/* Temporarily hide the voice demo entry point. */
#top button { display: none !important; }

/* Continuous hierarchy: readable Georgia identity, expressive Fraunces message. */
#top .kairos-wordmark {
  font-size: clamp(1.375rem, calc(1.125rem + 1vw), 1.875rem) !important;
  line-height: 1.2;
}
#top .hero-signal span { font-size: .75rem !important; line-height: 1.333 !important; }
@media (min-width: 768px) {
  #top .kairos-display { font-size: clamp(3rem, 4vw, 3.5rem) !important; }
}

/* Signup scales as one field; the action reserves only its actual width. */
nav:has(form) form {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .25rem !important;
  width: min(32rem, calc(100vw - 32px)) !important;
  max-width: none;
  min-height: 48px;
  padding: 3px !important;
  border: 1px solid rgba(210,218,211,.28);
  border-radius: 999px;
  background: rgba(20,22,21,.94);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
}
nav:has(form) form:focus-within {
  border-color: #A4C2B9;
  box-shadow: 0 0 0 3px rgba(164,194,185,.14);
}
nav:has(form) form input {
  min-width: 0;
  height: 40px !important;
  min-height: 40px;
  padding: 0 0 0 clamp(.75rem, 2vw, 1.125rem) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1rem !important;
}
nav:has(form) form button {
  position: static;
  height: 40px !important;
  padding: 0 clamp(.75rem, 2vw, 1.25rem) !important;
  font-size: clamp(.875rem, calc(.8rem + .3vw), 1rem) !important;
  white-space: nowrap;
}

/* Reserve a readable description column and allow balanced signal wrapping. */
#top .hero-insight { width: clamp(260px, 25vw, 320px) !important; }
#top .hero-signal { text-wrap: balance; }
@media (max-width: 700px) {
  #top .hero-insight { width: calc(100% - 48px) !important; max-width: 420px; }
  #top .hero-signal { width: 42%; max-width: 42%; }
}

/* Refined hero headline scale. */
#top .kairos-display {
  font-size: clamp(1.625rem, calc(1.2rem + 2vw), 2.5rem) !important;
  width: min(34rem, calc(100vw - 32px));
  line-height: 1.2 !important;
}

/* Spacious Before / After maps, following the mobile Activity comparison. */
#how.paired-dimensions { position:relative; z-index:3; box-sizing:border-box; width:100%; max-width:1200px; margin:auto; padding:140px 32px 110px; }
#how.paired-dimensions::before { display:none; }
.map-kicker { font-size:11px; letter-spacing:.14em; color:#B8B2A8; }
#how h2 { font-family:'Kairos Fraunces',Georgia,serif; font-weight:450; font-size:clamp(25px,3vw,38px); line-height:1.25; max-width:660px; margin:28px 0 72px; }
.paired-map-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; }
.paired-map { margin:0; min-width:0; }
.paired-map h3 { font-size:16px; font-weight:500; margin:0 0 12px; color:#FAFAF7; }
.paired-map figcaption p { font-size:14px; line-height:1.5; color:#B8B2A8; margin:0; min-height:42px; max-width:250px; }
.paired-map svg { display:block; width:100%; overflow:visible; margin-top:24px; background:radial-gradient(ellipse,rgba(92,139,126,.10),transparent 68%); }
.paired-map.lilac svg { background:radial-gradient(ellipse,rgba(133,121,157,.10),transparent 68%); }
.paired-map.rose svg { background:radial-gradient(ellipse,rgba(154,115,133,.10),transparent 68%); }
.map-axis { fill:#A9AAA5; font-size:13px; }
.map-label { fill:#E4E1DB; font-size:14px; }
.map-after { font-weight:600; }
.map-note { margin:48px 0 0; font-size:12px; color:#92968F; }
@media(max-width:760px) {
 #how.paired-dimensions { padding:176px 24px 80px; }
 #how h2 { margin-bottom:56px; }
 .paired-map-grid { grid-template-columns:1fr; gap:64px; max-width:400px; margin:auto; }
 .paired-map figcaption p { min-height:0; max-width:none; }
 .paired-map svg { max-width:340px; margin:20px auto 0; }
 .map-note { text-align:center; }
}

.dimension-picker { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 40px; }
#how .dimension-picker button { font:inherit; font-size:14px; padding:12px 18px; border-radius:24px; border:1px solid #353B38!important; background:transparent!important; color:#B8B2A8!important; cursor:pointer; }
#how .dimension-picker button[aria-pressed="true"] { background:#233832!important; border-color:#7B9B90!important; color:#FAFAF7!important; }
#how .dimension-picker button:hover { border-color:#A4C2B9!important; }
.dimension-field { position:relative; width:min(100%,680px); aspect-ratio:1.5; margin:0 auto; isolation:isolate; }
.field-colors { position:absolute; inset:40px 20px; border-radius:35%; filter:blur(28px); opacity:.8; background:radial-gradient(ellipse at 28% 60%,rgba(92,139,126,.7),transparent 52%),radial-gradient(ellipse at 72% 35%,rgba(133,121,157,.6),transparent 55%); transition:opacity .3s; }
.dimension-field::before { content:''; position:absolute; inset:45px 24px; background-image:linear-gradient(rgba(210,218,211,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(210,218,211,.055) 1px,transparent 1px); background-size:25% 25%; mask-image:radial-gradient(ellipse,black 35%,transparent 75%); }
.field-y,.field-x { position:absolute; color:#B8B2A8; font-size:14px; z-index:1; }
.field-y { top:0; left:0; }.field-x { bottom:0; right:0; }
.dimension-field[data-pair="1"] .field-colors { background:radial-gradient(ellipse at 38% 35%,rgba(133,121,157,.7),transparent 55%),radial-gradient(ellipse at 70% 65%,rgba(92,139,126,.5),transparent 50%); }
.dimension-field[data-pair="2"] .field-colors { background:radial-gradient(ellipse at 65% 40%,rgba(154,115,133,.7),transparent 55%),radial-gradient(ellipse at 30% 65%,rgba(133,121,157,.6),transparent 52%); }
@media(max-width:760px) { .dimension-picker { gap:8px; } #how .dimension-picker button { font-size:13px; padding:10px 14px; } .dimension-field { aspect-ratio:1; } }

/* Quiet text tabs; the plot has no visible grid. */
.dimension-field::before { display:none; }
.dimension-picker { gap:12px 28px; }
#how .dimension-picker button,
#how .dimension-picker button[aria-pressed="true"] {
  border:0!important;
  border-bottom:1px solid transparent!important;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  padding:10px 0;
  color:#969B96!important;
}
#how .dimension-picker button[aria-pressed="true"] {
  border-bottom-color:#A4C2B9!important;
  color:#FAFAF7!important;
}
#how .dimension-picker button:hover { color:#FAFAF7!important; }
#how .dimension-picker button:focus-visible {
  outline:1px solid #A4C2B9!important;
  outline-offset:5px!important;
}

/* One localized distribution for each paired space. */
.dimension-field .field-colors {
  inset:40px 20px;
  border-radius:0;
  filter:blur(8px);
  opacity:.9;
  background:radial-gradient(ellipse 19% 24% at 46% 55%, rgba(92,139,126,.78) 0%, rgba(92,139,126,.48) 30%, rgba(92,139,126,.16) 65%, transparent 100%);
}
.dimension-field[data-pair="1"] .field-colors {
  background:radial-gradient(ellipse 21% 19% at 57% 43%, rgba(133,121,157,.78) 0%, rgba(133,121,157,.48) 30%, rgba(133,121,157,.16) 65%, transparent 100%);
}
.dimension-field[data-pair="2"] .field-colors {
  background:radial-gradient(ellipse 20% 22% at 60% 48%, rgba(154,115,133,.78) 0%, rgba(154,115,133,.48) 30%, rgba(154,115,133,.16) 65%, transparent 100%);
}

/* Phone layouts for the two explanatory sections. */
@media (max-width:600px) {
  #why > div { min-height:100svh!important; }
  #why > div > div { top:148px!important; left:24px!important; max-width:calc(100% - 48px)!important; }
  #how.paired-dimensions { padding:148px 24px 64px; }
  #how h2 { font-size:clamp(24px,6.4vw,30px); margin:24px 0 32px; }
  .dimension-picker { display:grid; grid-template-columns:1fr; justify-items:start; gap:2px; margin-bottom:28px; }
  #how .dimension-picker button { min-height:44px; font-size:14px; text-align:left; }
  .dimension-field { width:100%; max-width:380px; aspect-ratio:1.15; }
  .field-y,.field-x { font-size:13px; }
  .dimension-field .field-colors { inset:28px 8px; }
}

/* A larger soft point, with a brief fading motion trail. */
.dimension-field .field-colors,
.dimension-field[data-pair="1"] .field-colors,
.dimension-field[data-pair="2"] .field-colors {
  inset:0;
  background:none;
  filter:none;
  opacity:1;
}
.dimension-field { --field-tone:92,139,126; }
.dimension-field[data-pair="1"] { --field-tone:133,121,157; }
.dimension-field[data-pair="2"] { --field-tone:154,115,133; }
.field-orb,.field-trail {
  position:absolute; left:50%; top:50%;
  width:44%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(var(--field-tone),.8),rgba(var(--field-tone),.4) 32%,rgba(var(--field-tone),.1) 60%,transparent 74%);
  filter:blur(7px);
}
.field-trail { width:34%; opacity:0; }

/* Keep anchor navigation clear of the fixed signup bar. */
#how, #why { scroll-margin-top:132px; }
@media (max-width:600px) {
  .dimension-field .field-colors { inset:24px 8px; }
  #how .dimension-picker button { max-width:100%; white-space:normal; }
}

/* Prevent scrolling copy from visually colliding with the fixed navigation. */
body.has-scrolled::after {
 content:''; position:fixed; inset:0 0 auto; height:88px;
 background:linear-gradient(#090A0A 65%,rgba(9,10,10,0));
 pointer-events:none; z-index:40;
}
@media(max-width:700px) { body.has-scrolled::after { height:140px; } }