/* ============================================================
   SOLUX — v2 additions (capacity-led rewrite)
   Link AFTER assets/styles.css, or paste this block at the end of it.
   No new colours, no new fonts, no new radii. Same hairline register.
   New in v2:
     - tighter hero, two-column above the fold  (.hero--split)
     - the seam collapse diagram                (.collapse)
     - the coordinator-hours counter            (.hours)
     - the cycle-capacity calculator            (.calc)
     - the "ask the database" demo              (.askdemo)
     - page sub-nav                             (.subnav)
   ============================================================ */

/* ---------- nav: room for two more links ---------- */

.nav__links { gap: 20px; }
@media (max-width: 980px) { .nav__links a.hide-md { display: none; } }

/* ---------- hero: kill the whitespace, two columns ---------- */

.hero--split { padding-top: clamp(26px, 3vw, 44px); padding-bottom: clamp(22px, 3vw, 36px); }
.hero--split .hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero--split h1 { max-width: 17ch; font-size: clamp(2.3rem, 5vw, 3.9rem); }
.hero--split .deck { margin-top: 1.15rem; max-width: 46ch; }
.hero--split .btn-row { margin-top: 1.5rem; }
.hero--split .hero__micro { margin-top: 1.1rem; }
.hero--split .eyebrow { margin-bottom: 0.85rem; }
.hero--split .track { margin-top: 0; }

/* the claim, restated as a number beside the headline */
.hero__figure {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.hero__figure b {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 106;
  font-weight: 620;
  font-size: clamp(2rem, 4vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand);
}
.hero__figure span {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 24ch;
  line-height: 1.5;
}

@media (max-width: 1020px) {
  .hero--split .hero__in { grid-template-columns: 1fr; gap: 30px; }
  .hero--split h1 { max-width: 20ch; }
}

/* ---------- page sub-nav (capacity / lab pages) ---------- */

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.subnav a { color: var(--ink-mute); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.subnav a:hover { color: var(--ink); border-color: var(--sol); }

/* ============================================================
   THE SEAM COLLAPSE — five systems becoming one record
   ============================================================ */

.collapse {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: center;
}
.collapse__col { display: grid; gap: 6px; }
.collapse__cap {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.collapse__cap b { color: var(--brand); font-weight: 500; }

.sysbox {
  border: 1px solid var(--rule-firm);
  background: var(--surface);
  padding: 11px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  transform: translateX(-10px);
  opacity: 0;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.sysbox em { font-style: normal; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.collapse.in .sysbox { opacity: 1; transform: none; }
.collapse.in .sysbox:nth-child(2) { transition-delay: .06s; }
.collapse.in .sysbox:nth-child(3) { transition-delay: .12s; }
.collapse.in .sysbox:nth-child(4) { transition-delay: .18s; }
.collapse.in .sysbox:nth-child(5) { transition-delay: .24s; }
.collapse.in .sysbox:nth-child(6) { transition-delay: .30s; }

.seam {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 14px;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0;
  transition: opacity .5s ease .34s;
}
.seam::before { content: "×"; color: var(--sol); font-size: 0.8rem; }
.collapse.in .seam { opacity: 1; }

.collapse__arrow {
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--sol);
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease .4s;
}
.collapse.in .collapse__arrow { opacity: 1; }

.onerecord {
  border: 1px solid var(--brand);
  background: var(--brand-wash);
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 2px;
  transform: scaleY(.6);
  transform-origin: center;
  opacity: 0;
  transition: opacity .5s ease .5s, transform .55s cubic-bezier(.2,.7,.3,1) .5s;
}
.collapse.in .onerecord { opacity: 1; transform: none; }
.onerecord h3 { color: var(--brand-deep); margin-bottom: 8px; }
.onerecord p { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.onerecord ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 5px; }
.onerecord li {
  font-family: var(--f-mono);
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-deep);
  display: flex;
  gap: 8px;
}
.onerecord li::before { content: "→"; color: var(--brand); }

@media (max-width: 900px) {
  .collapse { grid-template-columns: 1fr; }
  .collapse__arrow { transform: rotate(90deg); }
}

/* ============================================================
   COORDINATOR-HOURS COUNTER
   ============================================================ */

.hours {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(26px, 3.4vw, 40px);
}
.hours__n {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 106;
  font-weight: 620;
  font-size: clamp(3.2rem, 9vw, 6.2rem);
  letter-spacing: -0.035em;
  line-height: 0.92;
  color: var(--sol);
  font-variant-numeric: tabular-nums;
}
.hours__n small {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 12px;
}
.band--ink .hours { border-color: #1C2140; }
.band--ink .hours__n small { color: #7B82AE; }
.hours__body p { font-size: 1.02rem; color: var(--ink-soft); }
.band--ink .hours__body p { color: #A6ACD0; }
.hours__src { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--ink-mute); margin-top: 12px; }
.band--ink .hours__src { color: #6C7399; }
@media (max-width: 760px) { .hours { grid-template-columns: 1fr; } }

/* ============================================================
   CYCLE-CAPACITY CALCULATOR
   ============================================================ */

.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.calc > div { background: var(--surface); padding: clamp(20px, 2.8vw, 32px); }
.calc__out { background: var(--ink); }

.calc__label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.calc__out .calc__label { color: #7B82AE; }

.ctl { display: grid; gap: 7px; margin-bottom: 20px; }
.ctl__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ctl__name { font-family: var(--f-display); font-variation-settings: "wdth" 100; font-weight: 600; font-size: 0.94rem; letter-spacing: -0.008em; }
.ctl__val { font-family: var(--f-mono); font-size: 0.86rem; color: var(--brand); font-variant-numeric: tabular-nums; }
.ctl input[type="range"] { width: 100%; accent-color: var(--brand); height: 22px; }
.ctl__note { font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }

.calc__result { display: grid; gap: 1px; background: #1C2140; border: 1px solid #1C2140; }
.calc__result > div { background: var(--ink); padding: 16px 18px; }
.calc__result dt { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: #6C7399; margin-bottom: 7px; }
.calc__result dd {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 106;
  font-weight: 620;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.calc__result dd.is-sol { color: var(--sol); }
.calc__result dd small { display: block; font-family: var(--f-body); font-size: 0.82rem; font-weight: 400; letter-spacing: 0; color: #8A90B8; margin-top: 6px; line-height: 1.4; }
.calc__foot { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.05em; line-height: 1.6; color: #6C7399; margin-top: 16px; }
.calc__foot b { color: var(--sol); font-weight: 500; }

@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

/* ============================================================
   ASK-THE-DATABASE DEMO
   ============================================================ */

.askdemo { border: 1px solid #2A3059; background: #0F1430; font-family: var(--f-mono); }
.askdemo__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid #2A3059;
  font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: #7B82AE;
}
.askdemo__bar b { color: var(--sol); font-weight: 500; }
.askdemo__qs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; border-bottom: 1px solid #1A2046; }
.askdemo__q {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: #C3C8E4;
  background: #131A3C;
  border: 1px solid #2A3059;
  border-radius: 2px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.askdemo__q:hover { border-color: var(--sol); color: #fff; transform: translateY(-1px); }
.askdemo__q[aria-pressed="true"] { border-color: var(--sol); color: var(--ink); background: var(--sol); }
.askdemo__sql { padding: 15px 18px; font-size: 0.76rem; line-height: 1.7; color: #A5ABE8; border-bottom: 1px solid #1A2046; min-height: 74px; }
.askdemo__sql em { color: var(--brand-lift); font-style: normal; }
.askdemo__sql .cursor { display: inline-block; width: 7px; color: var(--sol); }
.askdemo__rows { padding: 4px 0; min-height: 96px; }
.askdemo__row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px;
  padding: 9px 18px; font-size: 0.74rem; color: #DDE0F2;
}
.askdemo__row + .askdemo__row { border-top: 1px solid #1A2046; }
.askdemo__row.is-head { font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6C7399; }
.askdemo__row span:last-child { color: var(--sol); text-align: right; }
.askdemo__row.is-head span:last-child { color: #6C7399; }
.askdemo__foot {
  border-top: 1px solid #2A3059; padding: 13px 18px;
  font-size: 0.64rem; letter-spacing: 0.06em; color: #7B82AE;
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
}
.askdemo__foot b { color: #DDE0F2; font-weight: 500; }
@media (max-width: 700px) {
  .askdemo__row { grid-template-columns: 1fr auto; }
  .askdemo__row span:nth-child(2) { display: none; }
}

/* ---------- audit trace: bigger on the page it anchors ---------- */

.audit--lead { font-size: 0.88rem; }
.audit--lead .audit__row { padding: 13px 22px; grid-template-columns: 9.4rem 1fr; }
.audit--lead .audit__bar, .audit--lead .audit__foot { padding-inline: 22px; }
.audit--lead .audit__foot { font-size: 0.74rem; }
@media (max-width: 820px) { .audit--lead .audit__row { grid-template-columns: 1fr; } }

/* ---------- role cards: capacity line ---------- */

.role .role__gain {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sol);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.band--ink .role .role__gain { border-color: #1C2140; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .sysbox, .seam, .onerecord, .collapse__arrow { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   SOFTEN — radii, depth and motion
   A deliberate departure from the 2px-radius / no-shadow rule in
   DESIGN-BRIEF.md §4. Everything here is token-driven: change the
   four --r-* values and the whole site re-hardens or softens.
   Consequence to know about: the hairline grid (painted container +
   gap:1px) cannot survive rounded children, so grid containers below
   switch to a real gap and each child carries its own hairline.
   ============================================================ */

:root {
  --r-sm: 8px;    /* chips, slots, segments, small controls */
  --r-md: 12px;   /* cards, tiles, list rows, buttons' larger siblings */
  --r-lg: 18px;   /* panels: track, audit, cryo, cohort, calculator */
  --r-btn: 10px;
  --sh-1: 0 1px 2px rgba(10,14,31,.04), 0 6px 18px -12px rgba(10,14,31,.14);
  --sh-2: 0 2px 4px rgba(10,14,31,.05), 0 18px 40px -22px rgba(10,14,31,.24);
  --sh-ink: 0 2px 6px rgba(0,0,0,.22), 0 26px 60px -30px rgba(0,0,0,.6);
  --ease: cubic-bezier(.22,.68,.24,1);
}

/* ---------- hairline grids become spaced cards ---------- */

.grid,
.tiles,
.stack,
.steps,
.guarantee,
.calc,
.riskband,
.vs,
.cap,
.trust,
.stats {
  background: transparent;
  border: 0;
  gap: clamp(12px, 1.4vw, 18px);
}
.band--ink .grid,
.band--ink .cap { background: transparent; border: 0; }

.grid > *,
.tiles > article,
.stack > li,
.steps > li,
.guarantee > div,
.calc > div,
.riskband > div,
.vs > div,
.cap > div,
.trust > div,
.stats > div {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.band--ink .grid > *,
.band--ink .cap > div,
.riskband > div,
.guarantee > div,
.calc__out { border-color: #262C52; }

.grid > *, .tiles > article { box-shadow: var(--sh-1); }
.band--ink .grid > *, .band--ink .cap > div, .riskband > div { box-shadow: none; }

/* lift on hover — 1px, as the system's state rule says, with depth added */
.grid > *:hover,
.tiles > article:hover,
.stack > li:hover,
.steps > li:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: var(--rule-firm);
}
.band--ink .grid > *:hover,
.band--ink .cap > div:hover,
.riskband > div:hover { box-shadow: none; border-color: #3B4270; }

.stack > li, .steps > li { background: var(--surface); }
.calc__result { background: transparent; border: 0; gap: 10px; }
.calc__result > div { border: 1px solid #262C52; border-radius: var(--r-md); }

/* ---------- panels ---------- */

.track, .cryo, .audit, .cohort, .askdemo, .offer, .embed, .callout, .onerecord {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.track, .cryo { box-shadow: var(--sh-1); }
.audit, .cohort, .askdemo, .offer { box-shadow: var(--sh-ink); }
.frame { border-radius: var(--r-lg); }

.trust, .stats { border-block: 0; }
.trust > div, .stats > div { background: var(--surface); box-shadow: var(--sh-1); }
.cryo__body { background: var(--rule); gap: 1px; }
.seg { border-radius: var(--r-sm); }
.cryo__slot { border-radius: var(--r-sm); }
.legend i { border-radius: 3px; }
.tick-rule i { border-radius: 2px; }

/* ---------- controls ---------- */

.btn { border-radius: var(--r-btn); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.btn--sol { box-shadow: 0 2px 10px -4px rgba(245,166,35,.6); }
.btn:hover { transform: translateY(-2px); }
.btn--sol:hover { box-shadow: 0 6px 18px -6px rgba(245,166,35,.7); }
.chips li, .lang, .askdemo__q, .cryo__crumbs .cur, .form__status { border-radius: var(--r-sm); }
.field input, .field select, .field textarea { border-radius: var(--r-sm); }
.sysbox { border-radius: var(--r-md); }
.shot { border-radius: var(--r-md); }
.subnav a { border-radius: 2px; }

/* nav links get a soft underline instead of a hard 1px edge */
.nav__links a { transition: color .3s var(--ease), border-color .3s var(--ease); }

/* ---------- motion: smoother reveals, staggered children ---------- */

.rv { transition: opacity .8s var(--ease), transform .8s var(--ease); transform: translateY(18px); }

.grid.rv > *,
.tiles.rv > article,
.stack.rv > li,
.steps.rv > li,
.riskband.rv > div,
.trust.rv > div,
.chips.rv > li,
.calc.rv > div {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.grid.rv.in > *,
.tiles.rv.in > article,
.stack.rv.in > li,
.steps.rv.in > li,
.riskband.rv.in > div,
.trust.rv.in > div,
.chips.rv.in > li,
.calc.rv.in > div { opacity: 1; transform: none; }

.rv.in > *:nth-child(1)  { transition-delay: .04s; }
.rv.in > *:nth-child(2)  { transition-delay: .10s; }
.rv.in > *:nth-child(3)  { transition-delay: .16s; }
.rv.in > *:nth-child(4)  { transition-delay: .22s; }
.rv.in > *:nth-child(5)  { transition-delay: .28s; }
.rv.in > *:nth-child(6)  { transition-delay: .34s; }
.rv.in > *:nth-child(7)  { transition-delay: .40s; }
.rv.in > *:nth-child(8)  { transition-delay: .46s; }
.rv.in > *:nth-child(9)  { transition-delay: .52s; }
.rv.in > *:nth-child(10) { transition-delay: .58s; }
.rv.in > *:nth-child(11) { transition-delay: .64s; }
.rv.in > *:nth-child(12) { transition-delay: .70s; }
/* hover must not inherit the entry delay */
.grid > *:hover, .tiles > article:hover, .stack > li:hover, .steps > li:hover { transition-delay: 0s; }

/* the cycle track assembles a little more slowly and softly */
.seg { animation-duration: .68s; animation-timing-function: var(--ease); }

/* the collapse diagram, eased to match */
.sysbox { transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .4s var(--ease); }
.sysbox:hover { box-shadow: var(--sh-1); }
.onerecord { transition: opacity .7s var(--ease) .5s, transform .8s var(--ease) .5s; }

/* the counter and the hero figure fade up with the band */
.hours__n, .hero__figure { transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* audit + ask rows land softly rather than snapping */
@keyframes auditRow {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.audit[data-execute] .audit__row.is-on,
.audit[data-execute] .audit__foot.is-on { animation: auditRow .5s var(--ease) both; }
.askdemo__row { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.askdemo__q:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .grid.rv > *, .tiles.rv > article, .stack.rv > li, .steps.rv > li,
  .riskband.rv > div, .trust.rv > div, .chips.rv > li, .calc.rv > div {
    opacity: 1 !important; transform: none !important;
  }
}