/* Draft 5. The Capacity Room. Layout on top of tokens.css. Spacing values from the scale only. */

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--c360-paper); border-bottom: 1px solid transparent; transition: border-color 160ms ease; }
.nav.is-scrolled { border-bottom-color: var(--c360-line); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: var(--s-8); }
.nav-logo { display: block; flex: none; }
.nav-logo img { width: 140px; height: auto; }
.nav-links { display: flex; gap: var(--s-8); margin-left: auto; }
.nav-links a { font-weight: 500; font-size: 15px; line-height: 1; color: var(--c360-ink); text-decoration: none; padding: var(--s-2) 0; }
.nav-links a:hover { text-decoration: underline; text-decoration-color: var(--c360-teal-ink); text-underline-offset: 4px; }
.nav-cta { flex: none; }
.nav-menu { display: none; margin-left: auto; background: none; border: 0; padding: var(--s-3) 0; font-weight: 600; font-size: 16px; line-height: 1; color: var(--c360-ink); cursor: pointer; }

.menu-panel { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; background: var(--c360-paper); overflow-y: auto; }
.menu-inner { display: flex; flex-direction: column; padding-top: var(--s-6); padding-bottom: var(--s-12); }
.menu-inner a:not(.btn) { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; color: var(--c360-ink); text-decoration: none; padding: var(--s-4) 0; border-bottom: 1px solid var(--c360-line); }
.menu-inner .btn { margin-top: var(--s-8); }
body.menu-open { overflow: hidden; }

@media (max-width: 1100px) {
  .nav-links { gap: var(--s-6); }
}
@media (max-width: 1023px) {
  .nav-links, .nav-cta { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 639px) {
  .nav-logo img { width: 132px; }
}

/* ---------- The room ---------- */
.room { min-height: min(calc(88vh - var(--nav-h)), 828px); display: flex; align-items: center; padding: var(--s-16) 0 var(--s-24); }
.room-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Isotype 48px. Clear space is half its height (24px); the gap below is 32px. */
.room-mark { width: 48px; height: 48px; margin: var(--s-6) 0 var(--s-8); }
.room-title { max-width: 1080px; }

.ask { width: 100%; max-width: 720px; margin-top: var(--s-12); display: flex; flex-direction: column; align-items: center; }
.ask > * { align-self: stretch; }
.ask > .chips { align-self: center; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); }
.ask-field { display: flex; align-items: center; height: 64px; background: var(--c360-white); border: 1px solid var(--c360-line); border-radius: var(--radius); padding: 0 var(--s-2) 0 var(--s-6); transition: border-color 160ms ease; }
.ask-field:hover { border-color: var(--c360-steel); }
.ask-field:focus-within { outline: 2px solid var(--c360-teal); outline-offset: 3px; border-color: var(--c360-line); }
.ask-field textarea { flex: 1; min-width: 0; height: 100%; padding: 9px var(--s-4) 9px 0; border: 0; background: transparent; resize: none; font-size: 18px; line-height: 22px; color: var(--c360-ink); text-align: left; }
.ask-field textarea::placeholder { color: var(--c360-muted); opacity: 1; }
.ask-field textarea:focus { outline: none; }
.ask-submit { flex: none; }

.ask-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); margin-top: var(--s-4); }
.speak { display: inline-flex; align-items: center; gap: var(--s-2); background: none; border: 0; padding: var(--s-2) 0; font-weight: 600; font-size: 15px; line-height: 1; color: var(--c360-ink); cursor: pointer; }
.speak span { text-decoration: underline; text-decoration-color: var(--c360-teal-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.speak:hover span { text-decoration-thickness: 2px; }
.speak-glyph { width: 20px; height: 20px; flex: none; }
.speak.is-listening .speak-glyph { animation: listen 1.2s ease-in-out infinite; }
@keyframes listen { 50% { opacity: 0.4; } }
.ask-privacy { text-align: right; }
.voice-msg { min-height: 0; text-align: left; }
.voice-msg:empty { display: none; }
.voice-msg:not(:empty) { margin-top: var(--s-2); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-8); }
.chip { background: transparent; border: 1px solid var(--c360-line); border-radius: 999px; padding: var(--s-2) var(--s-4); font-size: 15px; line-height: 1.5; color: var(--c360-ink); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.chip:hover { border-color: var(--c360-navy); background: var(--c360-white); }

@media (max-width: 1023px) {
  .room { min-height: 0; padding: var(--s-16) 0 var(--s-24); }
}
@media (max-width: 639px) {
  .room { padding: var(--s-12) 0 var(--s-16); }
  .room-mark { margin: 0 0 var(--s-6); }
  .room-title { text-align: left; align-self: stretch; }
  .room-inner { align-items: flex-start; }
  .ask { margin-top: var(--s-8); }
  .ask-field { flex-direction: column; align-items: stretch; height: auto; padding: 0; background: none; border: 0; gap: var(--s-3); }
  .ask-field:focus-within { outline: none; }
  .ask-field textarea { height: auto; min-height: 112px; padding: var(--s-3) var(--s-4); background: var(--c360-white); border: 1px solid var(--c360-line); border-radius: var(--radius); font-size: 17px; line-height: 24px; }
  .ask-field textarea:focus-visible { outline: 2px solid var(--c360-teal); outline-offset: 3px; }
  .ask-row { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .ask-privacy { text-align: left; }
  .ask > .chips { align-self: stretch; width: auto; max-width: none; }
  .chips { justify-content: flex-start; gap: var(--s-2); margin-top: var(--s-6); }
}

/* ---------- Composed block ---------- */
.composed { border-top: 1px solid var(--c360-line); padding: var(--s-24) 0 var(--section-pad); }
.composed[hidden] { display: none; }
.cb-col { max-width: 760px; }
.cb-echo { margin-top: var(--s-6); }
.cb-echo q { color: var(--c360-ink); }
.cb-part { margin-top: var(--s-24); }
.cb-part .section-head + * { margin-top: var(--s-8); }
.cb-label { margin-top: var(--s-3); }

/* Workflow line: six stages, today and redesigned */
.flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 0 var(--s-6); }
.flow-stage { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; }
.flow-node { position: relative; height: 14px; margin-bottom: var(--s-6); }
.flow-node::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--s-6)); top: 6px; height: 1px; background: var(--c360-line); }
.flow-stage:last-child .flow-node::before { right: 100%; }
.flow-node svg { position: relative; width: 14px; height: 14px; }
.flow-num { display: block; font-family: var(--font-display); font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: 0.04em; color: var(--c360-steel); font-variant-numeric: tabular-nums; }
.flow-name { margin-top: var(--s-2); font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--c360-ink); }
.flow-row { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--c360-line); }
.flow-row-label { display: block; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--c360-muted); margin-bottom: var(--s-1); }
.flow-row p { font-size: 15px; line-height: 1.5; }
.flow-today p { color: var(--c360-muted); }
.flow-new p { color: var(--c360-ink); }
.flow-stage.is-constraint .flow-name::after { content: "The constraint"; display: block; margin-top: var(--s-1); font-family: var(--font-text); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--c360-muted); }

/* Measures: names with blanks, never numbers */
.measures { border-top: 1px solid var(--c360-line); }
.measures li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--c360-line); }
.measure-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--c360-ink); }
.measure-blanks { display: flex; gap: var(--s-6); font-size: 15px; color: var(--c360-muted); }
.blank { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.blank i { display: inline-block; width: 64px; border-bottom: 1px solid var(--c360-steel); transform: translateY(-3px); }
.cb-measure-line { margin-top: var(--s-6); }

.cb-faq summary { font-size: 20px; }

.offer { margin-top: var(--s-24); padding: var(--s-16); background: var(--c360-white); border: 1px solid var(--c360-line); border-radius: var(--radius); }
.offer .h2 { max-width: 760px; margin-top: var(--s-4); }
.offer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-8); }
.offer-note { line-height: 1.5; }
.cb-again { margin-top: var(--s-8); }
.cb-again button { background: none; border: 0; padding: 0; cursor: pointer; font-size: 15px; }

@media (max-width: 1023px) {
  .flow { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .flow-stage { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s-4); padding-bottom: var(--s-8); }
  .flow-node { grid-row: 1 / span 4; height: auto; margin: 0; }
  .flow-node::before { left: 6px; right: auto; top: 14px; bottom: calc(-1 * var(--s-8)); width: 1px; height: auto; }
  .flow-stage:last-child .flow-node::before { display: none; }
  .flow-stage:last-child { padding-bottom: 0; }
  .flow-num, .flow-name, .flow-row { grid-column: 2; }
  .flow-node svg { margin-top: 0; }
}
@media (max-width: 639px) {
  .composed { padding: var(--s-16) 0 var(--section-pad); }
  .cb-part { margin-top: var(--s-16); }
  .measures li { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4) 0; }
  .measure-name { font-size: 19px; }
  .offer { margin-top: var(--s-16); padding: var(--s-8) var(--s-6); }
  .offer .h2 { font-size: 22px; line-height: 1.2; }
  .offer-actions { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .cb-faq summary { font-size: 18px; }
}

/* ---------- Or start here: the plan ---------- */
.start { border-top: 1px solid var(--c360-line); }
.start-label { margin-bottom: var(--s-12); }
.start-grid { row-gap: 0; }
.start-head { grid-column: 1 / span 8; }
.steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-16); }
.step { border-top: 1px solid var(--c360-line); padding-top: var(--s-6); }
.step-num { display: block; font-family: var(--font-display); font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: 0.04em; color: var(--c360-steel); margin-bottom: var(--s-4); font-variant-numeric: tabular-nums; }
.step .h3 + p { margin-top: var(--s-3); }
.start-close { grid-column: 1 / span 8; margin-top: var(--s-12); }
.start-close-line { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; color: var(--c360-ink); margin-bottom: var(--s-4); }
@media (max-width: 1023px) {
  .start-head, .start-close { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr; gap: var(--s-8); margin-top: var(--s-12); }
}
@media (max-width: 639px) {
  .start-label { margin-bottom: var(--s-8); }
  .start-close-line { font-size: 19px; }
}

/* ---------- Industries ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.ind-card { display: flex; flex-direction: column; }
.ind-card p { flex: 1; }
.ind-card .link { margin-top: var(--s-6); align-self: flex-start; }
@media (max-width: 1023px) { .ind-grid { grid-template-columns: 1fr; } }

/* ---------- Guide ---------- */
.guide { border-top: 1px solid var(--c360-line); }
.guide-grid { align-items: start; }
.guide-photo { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.guide-photo img { object-position: 38% 50%; }
.guide-text { grid-column: 7 / span 6; }
.guide-body { margin-top: var(--s-6); max-width: 64ch; }
.guide-quote { margin: var(--s-12) 0 0; font-size: 30px; line-height: 1.2; }
.guide-sign { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-12); }
.guide-headshot { width: 72px; flex: none; }
.guide-name { font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--c360-ink); }
.trust { text-wrap: balance; margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--c360-line); }
@media (max-width: 1023px) {
  .guide-photo { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .guide-text { grid-column: 1 / -1; margin-top: var(--s-12); }
}
@media (max-width: 639px) {
  .guide-quote { font-size: 24px; }
  .guide-text { margin-top: var(--s-8); }
}

/* ---------- What stays human ---------- */
.human-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.human-head { font-family: var(--font-text); font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--c360-muted); margin-bottom: var(--s-3); }
.human-line { margin-top: var(--s-16); max-width: 760px; }
@media (max-width: 639px) { .human-grid { grid-template-columns: 1fr; gap: var(--s-8); } .human-line { margin-top: var(--s-12); } }

.rule-list { border-top: 1px solid var(--c360-line); }
.rule-list li { text-wrap: pretty; padding: var(--s-4) 0; border-bottom: 1px solid var(--c360-line); color: var(--c360-ink); }

/* ---------- Data commitment ---------- */
.data { border-top: 1px solid var(--c360-line); }
.data-head { grid-column: 1 / span 5; }
.data-grid .section-head + * { margin-top: 0; }
.data-list { grid-column: 7 / span 6; }
@media (max-width: 1023px) {
  .data-head, .data-list { grid-column: 1 / -1; }
  .data-grid .section-head + * { margin-top: var(--s-8); }
}

/* ---------- Final CTA ---------- */
.final { border-top: 1px solid var(--c360-line); }
.final-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.final .h2 { max-width: 760px; }
.final-line { max-width: 640px; margin-top: var(--s-6); }
.final-actions { display: flex; gap: var(--s-4); margin-top: var(--s-12); }
.final-note { margin-top: var(--s-4); }
@media (max-width: 639px) {
  .final-inner { align-items: stretch; text-align: left; }
  .final-actions { flex-direction: column; gap: var(--s-3); margin-top: var(--s-8); }
}

/* ---------- Footer ---------- */
.footer { padding: var(--s-24) 0 var(--s-12); }
.footer-grid { display: grid; grid-template-columns: 5fr 2fr 2fr 3fr; gap: var(--s-6); }
.footer-brand img { width: 240px; height: auto; margin-bottom: var(--s-8); }
.footer-desc { max-width: 40ch; color: var(--c360-steel); }
.footer-head { font-family: var(--font-text); font-weight: 600; font-size: 15px; line-height: 1.5; color: #fff; margin-bottom: var(--s-3); }
.footer-col { display: flex; flex-direction: column; gap: var(--s-2); font-size: 15px; line-height: 1.5; color: var(--c360-steel); }
.footer-col a { color: var(--c360-steel); text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--s-6); margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid rgb(255 255 255 / 14%); color: var(--c360-steel); }
.footer-legal { display: flex; gap: var(--s-6); }
.footer-legal a { color: var(--c360-steel); text-decoration: none; }
.footer-legal a:hover { color: #fff; }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--s-12); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 639px) {
  .footer { padding: var(--s-16) 0 var(--s-8); }
  .footer-grid { grid-template-columns: 1fr; row-gap: var(--s-8); }
  .footer-bottom { flex-direction: column; gap: var(--s-3); }
}

/* Reduced motion: the listening pulse stops too */
@media (prefers-reduced-motion: reduce) {
  .speak.is-listening .speak-glyph { animation: none; }
}