/* Draft 4. Walkthrough. Layout on top of ../../assets/css/tokens.css. */

/* Without JS, reveal content stays visible */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ---------- Navigation ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; background: var(--c360-paper); border-bottom: 1px solid transparent; transition: border-color 160ms ease; }
.site-nav.is-scrolled { border-bottom-color: var(--c360-line); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: var(--s-8); }
.nav-logo { display: block; flex: none; border-radius: 4px; }
.nav-logo img { width: 140px; height: auto; }
.nav-links { margin-left: auto; }
.nav-links ul { display: flex; gap: var(--s-8); }
.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: 6px; }
.nav-cta { padding: 12px 22px; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--c360-navy); border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 15px; line-height: 1; color: var(--c360-navy); cursor: pointer; }
.menu-toggle[aria-expanded="true"] { background: var(--c360-navy); color: #fff; }
.menu-panel { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--c360-paper); overflow-y: auto; padding: var(--s-8) 0 var(--s-12); border-top: 1px solid var(--c360-line); }
.menu-panel[hidden] { display: none; }
.menu-links li { border-bottom: 1px solid var(--c360-line); }
.menu-links a { display: block; padding: var(--s-4) 0; font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.2; color: var(--c360-ink); text-decoration: none; }
.menu-panel .btn { margin-top: var(--s-8); }
.menu-note { margin-top: var(--s-3); }
body.menu-open { overflow: hidden; }

@media (max-width: 1099px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-cta { margin-left: auto; }
  .nav-cta + .menu-toggle { margin-left: 0; }
}
@media (max-width: 639px) {
  .nav-cta { display: none; }
  .nav-cta + .menu-toggle { margin-left: auto; }
  .nav-logo img { width: 132px; }
  .menu-panel .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero { padding-top: var(--s-24); }
.hero-grid { row-gap: var(--s-12); align-items: end; }
.hero-head { grid-column: 1 / span 10; }
.hero .scenario-label { margin-top: var(--s-3); }
.hero h1 { margin-top: var(--s-6); }
.hero-lead { grid-column: 1 / span 6; color: var(--c360-text); }
.hero-actions { grid-column: 8 / span 5; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta-note { margin-top: var(--s-4); }
.demo-note { display: block; }
.hero-photo { margin-top: var(--s-16); aspect-ratio: 1200 / 560; max-height: 560px; }
.hero-photo img { object-position: 60% 45%; }

@media (max-width: 1023px) {
  .hero { padding-top: var(--s-16); }
  .hero-head, .hero-lead, .hero-actions { grid-column: 1 / -1; }
  .hero-grid { row-gap: var(--s-8); }
  .hero-photo { margin-top: var(--s-12); aspect-ratio: 3 / 2; }
}
@media (max-width: 639px) {
  .hero { padding-top: var(--s-12); }
  .hero h1 { margin-top: var(--s-4); }
  .btn-row { flex-direction: column; }
  .hero-photo { aspect-ratio: 4 / 5; }
  .hero-photo img { object-position: 64% 50%; }
}

/* ---------- The path ---------- */
.path .section-head .scenario-label { margin-top: var(--s-4); }
.path-grid { align-items: start; }
.path-rail { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + var(--s-12)); }
.panels { grid-column: 6 / span 7; }

/* Rail grammar: 14px node, 3px line. Steel ring by default, navy when passed, teal when active. */
.rail { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; }
.node { position: absolute; left: 5px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--c360-paper); border: 2px solid var(--c360-steel); transition: background-color 300ms ease, border-color 300ms ease; }
.seg { position: absolute; left: 10.5px; width: 3px; top: 23px; bottom: -1px; background: var(--c360-line); border-radius: 2px; overflow: hidden; }
.seg-fill { position: absolute; inset: 0; background: var(--c360-navy); transform: scaleY(0); transform-origin: top; transition: transform 500ms ease; }
.is-passed .node { background: var(--c360-navy); border-color: var(--c360-navy); }
.is-passed .seg-fill { transform: scaleY(1); }
.is-active .node { background: var(--c360-teal); border-color: var(--c360-teal); }

.rail-list li { position: relative; }
.rail-list a { display: flex; gap: var(--s-3); position: relative; min-height: 64px; padding-left: var(--s-12); text-decoration: none; font-size: 17px; line-height: 24px; }
.rail-list a .rail { left: 0; }
.rail-num { flex: none; width: 24px; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--c360-muted); font-variant-numeric: tabular-nums; }
.rail-name { font-weight: 500; color: var(--c360-muted); transition: color 300ms ease; }
.rail-item.is-passed .rail-name, .rail-item.is-active .rail-name { color: var(--c360-ink); }
.rail-list a:hover .rail-name { color: var(--c360-ink); text-decoration: underline; text-decoration-color: var(--c360-teal-ink); text-underline-offset: 4px; }
.rail-legend { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--c360-line); }

.panel { position: relative; padding-bottom: var(--s-24); }
.panel:last-child { padding-bottom: 0; }
.panel > .rail { display: none; }
.panel-num { font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--c360-muted); font-variant-numeric: tabular-nums; }
.panel h3 { margin-top: var(--s-2); }
.panel-photo { margin-top: var(--s-6); aspect-ratio: 16 / 9; }
.panel-photo-portrait img { object-position: 50% 42%; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-6); }
.state { border: 1px solid var(--c360-line); border-radius: var(--radius); padding: var(--s-6); }
.state p { margin-top: var(--s-3); font-size: 18px; line-height: 1.5; }
.state-today { background: transparent; }
.state-today p { color: var(--c360-muted); }
.state-new { background: var(--c360-white); }
.state-new p { color: var(--c360-ink); }
.state-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.state-label { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--c360-muted); }
.state-new .state-label { color: var(--c360-ink); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--c360-line); font-size: 15px; line-height: 1.5; color: var(--c360-muted); }
.chip-visible { border-color: var(--c360-navy); color: var(--c360-navy); }

/* Tablet and phone: the rail moves to the left edge, panels stack */
@media (max-width: 1023px) {
  .path-rail { display: none; }
  .panels { grid-column: 1 / -1; }
  .panel { padding-left: 40px; padding-bottom: var(--s-16); }
  .panel > .rail { display: block; }
  .panel > .rail .node { top: 4px; }
  .panel > .rail .seg { top: 22px; bottom: 0; }
}
@media (max-width: 639px) {
  .compare { grid-template-columns: 1fr; gap: var(--s-3); }
  .state { padding: var(--s-4) var(--s-6) var(--s-6); }
  .state p { font-size: 17px; }
  .panel-photo { aspect-ratio: 3 / 2; }
}

/* ---------- Measures ---------- */
.measures-head, .measures-body { grid-column: 1 / span 9; }
.measures-head .scenario-label { margin-top: var(--s-3); }
.measures-body { margin-top: var(--s-6); }
.measure-table { width: 100%; border-collapse: collapse; }
.measure-table th, .measure-table td { text-align: left; padding: var(--s-6) 0; border-bottom: 1px solid var(--c360-line); vertical-align: middle; }
.measure-table thead th { padding: 0 0 var(--s-4); font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--c360-muted); }
.measure-table tbody th { font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--c360-ink); padding-right: var(--s-6); }
.measure-table thead th:not(:first-child), .measure-table td { width: 160px; }
.blank { display: inline-block; width: 72px; height: 1px; background: var(--c360-steel); vertical-align: middle; }
.measures-line { margin-top: var(--s-8); max-width: 60ch; color: var(--c360-text); }

@media (max-width: 1023px) { .measures-head, .measures-body { grid-column: 1 / -1; } }
@media (max-width: 639px) {
  .measure-table tbody th { font-size: 17px; padding-right: var(--s-3); }
  .measure-table thead th:not(:first-child), .measure-table td { width: 72px; }
  .measure-table td { padding-left: var(--s-2); }
  .measure-table thead th:not(:first-child) { padding-left: var(--s-2); }
  .blank { width: 40px; }
}

.nowrap { white-space: nowrap; }

/* ---------- What stays human ---------- */
.human-col:first-child { grid-column: 1 / span 5; }
.human-col:last-child { grid-column: 7 / span 5; }
.line-list { margin-top: var(--s-6); }
.line-list li { padding: var(--s-4) 0; border-top: 1px solid var(--c360-line); color: var(--c360-text); }
.line-list li:last-child { border-bottom: 1px solid var(--c360-line); }
.human-line { margin-top: var(--s-16); max-width: 760px; font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: var(--c360-ink); text-wrap: balance; }
.human-line::before { content: ""; display: block; width: 48px; height: 2px; margin-bottom: var(--s-6); background: var(--c360-rule-gradient); }

@media (max-width: 1023px) { .human-col:first-child, .human-col:last-child { grid-column: 1 / -1; } .human-col + .human-col { margin-top: var(--s-6); } }
@media (max-width: 639px) { .human-line { font-size: 22px; margin-top: var(--s-12); } }

/* ---------- Method ---------- */
.steps .step { grid-column: span 4; padding-top: var(--s-6); border-top: 1px solid var(--c360-line); }
.step-num { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--c360-muted); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: var(--s-3); }
.step p { margin-top: var(--s-3); }
.method-foot { margin-top: var(--s-12); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4) var(--s-8); }
.method-close { font-weight: 500; font-size: 20px; line-height: 1.4; color: var(--c360-ink); max-width: 60ch; }

@media (max-width: 1023px) { .steps .step { grid-column: 1 / -1; } }

/* ---------- Guide ---------- */
.guide-grid { align-items: center; }
.guide-photo { grid-column: 1 / span 4; max-width: 340px; }
.guide-photo figcaption { margin-top: var(--s-4); text-align: center; }
.guide-text { grid-column: 6 / span 7; }
.guide-body { margin-top: var(--s-6); max-width: 64ch; }
.guide-body p + p { margin-top: var(--s-4); }
.guide-quote { margin: var(--s-24) 0 0; max-width: 1000px; }
.guide-quote p { text-wrap: balance; }
.guide-foot { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--c360-line); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4) var(--s-8); }
.trust { letter-spacing: 0.01em; text-wrap: balance; }

@media (max-width: 1023px) {
  .guide-photo { grid-column: 1 / -1; max-width: 240px; }
  .guide-text { grid-column: 1 / -1; margin-top: var(--s-8); }
  .guide-quote { margin-top: var(--s-16); }
}

/* ---------- Industries ---------- */
.industries-top { align-items: end; }
.industries-top .section-head { grid-column: 1 / span 7; }
.industries-photo { grid-column: 8 / span 5; aspect-ratio: 3 / 2; }
.industries-top + .industry-cards { margin-top: var(--s-12); }
.industry-cards .card { grid-column: span 6; display: flex; flex-direction: column; }
.industry-cards .card p { flex: 1; }
.industry-cards .card .link { margin-top: var(--s-6); align-self: flex-start; }

@media (max-width: 1023px) {
  .industries-top .section-head, .industries-photo, .industry-cards .card { grid-column: 1 / -1; }
  .industries-photo { margin-top: var(--s-4); }
}
@media (max-width: 639px) { .industries-top h2 { text-wrap: pretty; } }

/* ---------- Answers ---------- */
.answers-grid { align-items: start; }
.answers-grid .section-head { grid-column: 1 / span 4; }
.answers-grid .faq { grid-column: 5 / span 8; }
.answers-grid .section-head + * { margin-top: 0; }
@media (max-width: 1023px) {
  .answers-grid .section-head, .answers-grid .faq { grid-column: 1 / -1; }
  .answers-grid .faq { margin-top: var(--s-8); }
}

/* ---------- Final CTA ---------- */
.final-inner { max-width: 760px; }
.final-line { margin-top: var(--s-6); color: #fff; }
.final-ctas { margin-top: var(--s-12); display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-12); }
.final-cta { max-width: 320px; }
.final-cta .small { margin-top: var(--s-3); color: var(--c360-steel); }
.final-cta .small + .small { margin-top: var(--s-1); }
@media (max-width: 639px) { .final-cta { max-width: none; width: 100%; } }

/* ---------- Footer ---------- */
.site-footer { padding: var(--s-24) 0 var(--s-12); }
.footer-grid { row-gap: var(--s-12); }
.footer-brand { grid-column: 1 / span 5; }
.footer-logo { width: 240px; height: auto; margin-bottom: var(--s-8); }
.footer-desc { color: var(--c360-steel); max-width: 44ch; }
.footer-col { grid-column: span 2; }
.footer-col:last-child { grid-column: span 3; }
.footer-head { font-family: var(--font-text); font-weight: 600; font-size: 15px; line-height: 1.5; color: #fff; }
.footer-col ul { margin-top: var(--s-4); }
.footer-col li { font-size: 15px; line-height: 1.5; color: var(--c360-steel); }
.footer-col li + li { margin-top: var(--s-3); }
.footer-col a, .footer-bottom a { color: #fff; text-decoration: none; }
.footer-col a:hover, .footer-bottom a:hover { text-decoration: underline; text-decoration-color: var(--c360-teal); text-underline-offset: 4px; }
.footer-bottom { margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid rgb(255 255 255 / 12%); display: flex; flex-wrap: wrap; gap: var(--s-6); color: var(--c360-steel); }

@media (max-width: 1023px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-col, .footer-col:last-child { grid-column: span 4; }
}
@media (max-width: 639px) {
  .footer-col, .footer-col:last-child { grid-column: 1 / -1; }
  .footer-logo { width: 200px; }
}

/* ---------- Reduced motion: every node filled, nothing animates ---------- */
@media (prefers-reduced-motion: reduce) {
  .node, .seg-fill, .rail-name, .site-nav { transition: none; }
  .node { background: var(--c360-navy); border-color: var(--c360-navy); }
  .seg-fill { transform: scaleY(1); }
  .rail-name { color: var(--c360-ink); }
  .is-active .node { background: var(--c360-teal); border-color: var(--c360-teal); }
}