/* ============================================================
   hero.css: the Beethoven home page (/ and /beethoven/) and the
   onboarding page (/onboarding/). Site tokens only (style.css);
   no new fonts. Animation is CSS only and stops under
   prefers-reduced-motion.
   ============================================================ */

/* ---------- home: headline ---------- */
.bh {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 32px 8px;
  text-align: center;
  position: relative;
}
.bh::before {                      /* the site's faint drafting grid, behind the diagram */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 58%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 58%, #000 0%, transparent 78%);
  pointer-events: none;
  z-index: -1;
}
.bh__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.7rem, 5.8vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.bh__title em { color: var(--teal); font-style: italic; }
.bh__lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 18px auto 0;
  text-wrap: balance;
}

/* ---------- home: the diagram ----------
   Two shape-only SVGs (wide, tall) share one set of HTML labels. Each label carries its
   position and size in SVG units (--x --y --fs wide, --px --py --pfs tall); the stage has
   the SVG's aspect ratio, so percentages and container-width font sizes keep the labels
   on their shapes at every width. */
.flow {
  container-type: inline-size;
  margin: 36px auto 0;
  max-width: 1140px;
}
.flow__stage {
  --vw: 1200; --vh: 560;
  position: relative;
  aspect-ratio: 1200 / 560;
}
.flow__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow__art--tall { display: none; }

.flow__t {
  position: absolute;
  left: calc(var(--x) / var(--vw) * 100%);
  top: calc(var(--y) / var(--vh) * 100%);
  font-size: max(10.5px, calc(var(--fs) / var(--vw) * 100cqw));   /* stays legible on tablets */
  transform: translate(-50%, -50%);
  white-space: nowrap;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}
.flow__t.t-s { transform: translate(0, -50%); }
.flow__t.t-e { transform: translate(-100%, -50%); }
.flow__t .ph { display: none; }

.t-node { font-family: var(--font-display); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.t-arrow { font-family: var(--font-mono); color: var(--ink-soft); letter-spacing: 0.01em; }
.t-arrow.t-o { color: var(--ochre); }
.t-me { font-family: var(--font-mono); color: var(--teal); }
.t-url { font-family: var(--font-mono); color: var(--ink-soft); }
.t-ask {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper-deep);
  border-radius: 1.15em;
  padding: 0.55em 0.95em;
}

/* browser window */
.b-win { fill: var(--paper-card); stroke: var(--line); stroke-width: 1; }
.b-bar { fill: var(--paper-deep); }
.b-rule, .b-railrule { stroke: var(--line-soft); stroke-width: 1; }
.b-dot { fill: rgba(26, 28, 24, 0.16); }
.b-url { fill: var(--paper-card); stroke: var(--line-soft); }
.b-lock rect { fill: var(--ink-faint); }
.b-lock path { fill: none; stroke: var(--ink-faint); stroke-width: 1.4; }
.b-rail { fill: var(--paper); }
.b-ico { fill: none; stroke: var(--line); stroke-width: 1.3; }
.b-ico-l { stroke: var(--ink-faint); stroke-width: 1.5; stroke-linecap: round; }
.b-bars { fill: var(--line); }
.b-av { fill: var(--teal); }
.b-sk { fill: rgba(26, 28, 24, 0.07); }
.b-card { fill: var(--paper); stroke: var(--line-soft); }
.b-ax { stroke: var(--line); stroke-width: 1; }
.b-box { fill: var(--paper-card); stroke: var(--ink); stroke-width: 1; }
.b-wh { stroke: var(--ink); stroke-width: 0.9; }
.b-med { stroke: var(--ochre); stroke-width: 1.7; }
.b-jit { fill: var(--teal); opacity: 0.32; }
.b-comp { fill: var(--paper-card); stroke: var(--line); stroke-width: 1; }
.b-caret { stroke: var(--teal); stroke-width: 1.6; animation: bh-caret 1.1s steps(1) infinite; }
.b-send { fill: var(--ink); }
.b-send-a { fill: none; stroke: var(--paper-card); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* nodes */
.n-cloud { fill: var(--paper-card); stroke: var(--ink); stroke-width: 1.4; }
.n-rack { fill: var(--paper-card); stroke: var(--ink); stroke-width: 1.4; }
.n-foot { fill: var(--ink); }
.n-unit { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.n-unit--me { fill: rgba(14, 95, 88, 0.09); stroke: var(--teal); stroke-width: 1.3; }
.n-led { fill: var(--ink-faint); opacity: 0.55; }
.n-led--on { fill: var(--teal); opacity: 1; animation: bh-led 1.8s ease-in-out infinite; }
.n-led--blink { animation: bh-blink 2.6s steps(1) infinite; }
.n-prompt { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.n-vent { stroke: var(--line); stroke-width: 1.2; stroke-linecap: round; }
.n-board { fill: var(--paper-card); stroke: var(--ink); stroke-width: 1.4; }
.n-brk { fill: var(--paper-deep); stroke: var(--ink); stroke-width: 1.2; }
.n-gold { fill: var(--ochre); opacity: 0.85; }
.n-fan { fill: var(--paper); stroke: var(--ink); stroke-width: 1.1; }
.n-blade { fill: none; stroke: var(--ink-soft); stroke-width: 1.2; stroke-linecap: round; }
.n-hub { fill: var(--ink); }
.n-spin { transform-box: fill-box; transform-origin: center; animation: bh-spin 2.4s linear infinite; }

/* arrows and the dots that run along them */
.fl-a { fill: none; stroke: var(--teal); stroke-width: 1.5; opacity: 0.5; }
.fl-a--o { stroke: var(--ochre); opacity: 0.6; }
.fl-h { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fl-h--o { stroke: var(--ochre); }
.fl-port { fill: var(--paper-card); stroke: var(--teal); stroke-width: 1.6; }
.fl-d {
  fill: none;
  stroke: var(--teal);
  stroke-width: 8.5;
  stroke-linecap: round;
  stroke-dasharray: 0 200;   /* pathLength 100: one dot per run */
  animation: bh-flow 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite both;
}
.fl-d--o { stroke: var(--ochre); }
.fl-d--late { animation-delay: 1.6s; }

@keyframes bh-flow {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  10%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes bh-caret { 50% { opacity: 0; } }
@keyframes bh-led { 50% { opacity: 0.35; } }
@keyframes bh-blink { 0%, 60% { opacity: 0.55; } 61%, 70% { fill: var(--teal); opacity: 0.9; } 71% { opacity: 0.55; } }
@keyframes bh-spin { to { transform: rotate(360deg); } }

/* ---------- home: what you need ---------- */
.bh__need {
  margin: 30px auto 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.9;
}
.bh__need-k { color: var(--ink-faint); margin-right: 4px; }
.bh__need a { color: var(--ink); border-bottom: 1px solid var(--line); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.bh__need a:hover { color: var(--teal); border-color: var(--teal); }
.bh__sep { color: var(--ink-faint); margin: 0 9px; }
.bh__need a.bh__how { border: 0; color: var(--teal); margin-left: 18px; font-weight: 500; white-space: nowrap; }
.bh__need a.bh__how:hover { color: var(--teal-deep); }

/* ---------- home: sections under the diagram ---------- */
.bh-sec {
  max-width: 820px;
  margin: 0 auto;
  padding: 104px 32px 0;
  text-align: center;
}
.bh-sec--get { max-width: 1100px; }
.bh__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 34px;
}

/* the request form and the browser cards: markup and base styles are shared with
   /beethoven/request.html (tools/templates, site.css); here they are only centred */
.bh-sec .request-form { margin: 0 auto; text-align: left; }
.bh-sec .browsers { text-align: left; }
.bh-sec .browser { transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.bh-sec .browser:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 22px 40px -30px rgba(10, 66, 61, 0.5); }

.bh__fine {
  margin: 72px auto 104px;
  font-size: 0.84rem;
  color: var(--ink-faint);
}
.bh__fine a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.bh__fine a:hover { color: var(--teal); border-color: var(--teal); }

/* ---------- home: tablets ----------
   Where the labels' minimum size takes over (a diagram narrower than about 1000px), "the heavy
   lifting" in one line is wider than the gap between the GPU and the rack, so it touched the
   rack; there it goes on two short lines, centred in the gap just under its arrow. */
@media (min-width: 721px) {
  @container (max-width: 1000px) {
    .flow__t.t-lift {
      white-space: normal;
      width: 6.4em;
      text-align: center;
      top: calc(436 / var(--vh) * 100%);
    }
  }
}

/* ---------- home: tablets and phones ---------- */
@media (max-width: 720px) {
  .bh { padding: 44px 16px 0; }
  .bh-sec { padding: 76px 16px 0; }
  .flow { margin-top: 30px; }
  .flow__stage { --vw: 360; --vh: 626; aspect-ratio: 360 / 626; }
  .flow__art--wide { display: none; }
  .flow__art--tall { display: block; }
  .flow__t {
    left: calc(var(--px) / var(--vw) * 100%);
    top: calc(var(--py) / var(--vh) * 100%);
    font-size: max(10px, calc(var(--pfs) / var(--vw) * 100cqw));
  }
  .flow__t.t-ps { transform: translate(0, -50%); }
  .flow__t.t-pm { transform: translate(-50%, -50%); }
  .flow__t.t-pe { transform: translate(-100%, -50%); }
  .flow__t .ph { display: inline; }
  .fl-d { stroke-width: 6; }
  .bh__need { font-size: 0.88rem; }
  .bh__sep { margin: 0 6px; }
  .bh__need a.bh__how { display: block; margin: 6px 0 0; }
  .bh__fine { margin: 56px auto 72px; }
}

/* ============================================================
   ONBOARDING (/onboarding/)
   ============================================================ */
.obd { max-width: 1040px; margin: 0 auto; padding: 0 32px; }
.obd-hero { padding: 72px 32px 12px; text-align: center; max-width: 900px; margin: 0 auto; }
.obd-hero .eyebrow { display: block; margin-bottom: 14px; }
.obd-hero .bh__title { font-size: clamp(2.5rem, 6vw, 4.6rem); }
.obd-sec { padding: 88px 0 0; }
.obd-sec:last-child { padding-bottom: 110px; }
.obd__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 26px;
}
.obd__h2 .eyebrow { display: block; margin-bottom: 10px; }
.obd p { color: var(--ink-soft); max-width: 46em; }
.obd p + p { margin-top: 12px; }
.obd a:not(.btn) { color: var(--teal); border-bottom: 1px solid rgba(14, 95, 88, 0.25); transition: border-color 0.2s var(--ease); }
.obd a:not(.btn):hover { border-color: var(--teal); }

/* what you need: five tiles */
.obd-need { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.obd-need li {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.obd-need b { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ochre); font-weight: 500; }
.obd-need a:not(.btn) { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.2; color: var(--ink); border: 0; }
.obd-need a:not(.btn):hover { color: var(--teal); }
.obd-need span { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.45; }

/* three steps */
.obd-steps { list-style: none; counter-reset: st; display: grid; gap: 0; border-top: 1px solid var(--line); }
.obd-steps li {
  counter-increment: st;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 4px 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.obd-steps li::before {
  content: counter(st);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--teal);
}
.obd-steps h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.25; }
.obd-steps p { font-size: 0.98rem; }
.obd__after { margin-top: 18px; font-size: 0.95rem; }

/* your first question */
.obd-chat {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 26px 48px -36px rgba(10, 66, 61, 0.45);
}
.obd-chat__bar { display: flex; align-items: center; gap: 7px; padding: 0 2px 14px; }
.obd-chat__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(26, 28, 24, 0.16); }
.obd-chat__bar span { margin-left: 10px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint); }
.obd-chat__ask {
  margin-left: auto;
  width: fit-content;
  max-width: 100%;
  background: var(--paper-deep);
  border-radius: 16px;
  padding: 11px 16px;
  font-size: 1.08rem;
  color: var(--ink) !important;
}
.obd-chat__do { list-style: none; counter-reset: do; margin: 18px 0 2px; display: grid; gap: 8px; }
.obd-chat__do li { counter-increment: do; position: relative; padding-left: 34px; font-size: 0.97rem; color: var(--ink-soft); }
.obd-chat__do li::before {
  content: counter(do);
  position: absolute; left: 0; top: 0.12em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: var(--paper-card);
  font-family: var(--font-mono); font-size: 0.72rem;
  display: grid; place-items: center;
}
.obd-chat__do code, .obd code { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-deep); padding: 0.08em 0.38em; border-radius: 4px; color: var(--ink); }

.obd-fig { margin: 28px 0 0; }
.obd-fig__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; -webkit-overflow-scrolling: touch; }
.obd-fig img { display: block; width: 100%; min-width: 640px; height: auto; }
.obd-fig figcaption { font-size: 0.86rem; color: var(--ink-soft); margin-top: 10px; }
.obd-stats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.obd-stats li { background: var(--paper-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 12px; }
.obd-stats b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; line-height: 1.1; color: var(--teal-deep); white-space: nowrap; }
.obd-stats span { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.4; }
.obd__answer { margin-top: 20px; }

/* your data */
.obd-data {
  list-style: none;
  border-left: 3px solid var(--teal);
  background: var(--paper-card);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  display: grid;
  gap: 8px;
}
.obd-data li { font-size: 0.95rem; color: var(--ink-soft); padding-left: 18px; position: relative; }
.obd-data li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }

/* other ways to get involved */
.obd-ways { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.obd-ways li { background: var(--paper-card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.obd-ways h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; }
.obd-ways p { font-size: 0.92rem; flex: 1; }
.obd-ways a:not(.btn) { align-self: flex-start; font-size: 0.9rem; font-weight: 500; overflow-wrap: anywhere; }
.obd__more { margin-top: 22px; font-size: 0.95rem; }

@media (max-width: 900px) {
  .obd-need { grid-template-columns: repeat(2, 1fr); }
  .obd-need li:last-child { grid-column: 1 / -1; }
  .obd-stats { grid-template-columns: repeat(2, 1fr); }
  .obd-ways { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .obd { padding: 0 16px; }
  .obd-hero { padding: 44px 16px 0; }
  .obd-sec { padding-top: 64px; }
  .obd-steps li { grid-template-columns: 44px 1fr; gap: 4px 12px; }
  .obd-steps li::before { font-size: 2rem; }
  .obd-chat { padding: 14px; }
  .obd-chat__ask { font-size: 1rem; }
}

/* ---------- reduced motion: everything holds still ---------- */
@media (prefers-reduced-motion: reduce) {
  .fl-d { animation: none; stroke-dashoffset: -58; opacity: 1; }
  .n-spin, .n-led--on, .n-led--blink, .b-caret { animation: none; }
  .bh-sec .browser, .bh-sec .browser:hover { transition: none; transform: none; }
}