:root {
  --ground: #f7f7f5;
  --ink: #17191c;
  --ink-soft: #4c5258;
  --accent: #2fc4dd;
  --pill-border: rgba(23, 25, 28, 0.16);
  --glow: 247, 247, 245; /* rgb of ground, for the radial glow */
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #e9e9e7; /* video ground while it loads */
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

/* Atelier-Maren-style glow: lifts the centre so ink type reads over the render.
   Three states, switchable from the mock chrome: full / soft / off. */
.hero .glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(var(--glow), 0.85), rgba(var(--glow), 0) 22%),
    radial-gradient(ellipse 62% 52% at 50% 46%,
      rgba(var(--glow), 0.94) 0%,
      rgba(var(--glow), 0.72) 42%,
      rgba(var(--glow), 0.25) 68%,
      rgba(var(--glow), 0) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.glow-soft .glow {
  background:
    linear-gradient(to bottom, rgba(var(--glow), 0.6), rgba(var(--glow), 0) 20%),
    radial-gradient(ellipse 58% 48% at 50% 46%,
      rgba(var(--glow), 0.55) 0%,
      rgba(var(--glow), 0.35) 45%,
      rgba(var(--glow), 0.1) 70%,
      rgba(var(--glow), 0) 100%);
}
.glow-off .glow {
  background:
    linear-gradient(to bottom, rgba(var(--glow), 0.45), rgba(var(--glow), 0) 16%);
}

/* ---------- nav ---------- */
nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 26px 44px;
  z-index: 3;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark .dot {
  width: 9px; height: 9px;
  border-radius: 2.5px;
  background: var(--accent);
}
.wordmark small {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 17px;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 34px;
  justify-self: center;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent);
  outline: none;
}

.nav-cta { justify-self: end; }

/* ---------- pills / buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-dark {
  background: var(--ink);
  color: #fff;
  padding: 10px 8px 10px 22px;
  border: 1px solid var(--ink);
}
.btn-dark .disc {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 13px;
}
.btn-dark:hover { transform: translateY(-1px); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pill-border);
  color: var(--ink);
  padding: 14px 26px;
}
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }

.nav-cta .btn-dark { padding: 7px 6px 7px 18px; font-size: 14px; }
.nav-cta .btn-dark .disc { width: 26px; height: 26px; font-size: 12px; }

/* ---------- centre stack ---------- */
.stack {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  gap: 0;
}

/* headline voice: grotesque, LeftClick register. */
h1 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-size: clamp(2.4rem, 4.8vw, 4rem);
  max-width: 16ch;
  text-wrap: balance;
  margin-bottom: 26px;
}

.sub {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
  text-wrap: balance;
  margin-bottom: 40px;
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- load-in ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.85s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
.reveal.d1 { animation-delay: 0.15s; }
.reveal.d2 { animation-delay: 0.30s; }
.reveal.d3 { animation-delay: 0.45s; }
.reveal.d4 { animation-delay: 0.60s; }
@keyframes rise {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
}

/* ---------- sections below the hero ---------- */
.sec { padding: 130px 24px; }
.sec-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}

.sec-title {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  max-width: 24ch;
  text-wrap: balance;
  color: var(--ink);
}

.sec-body {
  font-size: clamp(1rem, 1.3vw, 1.13rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}

/* audience circles */
.aud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.aud-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* gradient-outline capsules, two and two */
.aud-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 12px 14px;
  justify-content: center;
}
.aud-pills .pill-aud {
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 12px 30px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(100deg, #35c8de, #2b7de0) border-box;
  transition: transform 0.2s;
}
.aud-pills .pill-aud:hover { transform: translateY(-2px); }

/* platform figure placeholder */
.fig {
  width: 100%;
  max-width: 1080px;
  border: 1px solid var(--pill-border);
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 28px 70px -34px rgba(23, 25, 28, 0.28);
}
.fig-bar {
  display: flex;
  gap: 6px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(23, 25, 28, 0.08);
}
.fig-bar span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(23, 25, 28, 0.12);
}
.fig-body {
  padding: 16px;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 14px;
}
.fig-panel {
  border: 1px solid rgba(23, 25, 28, 0.08);
  border-radius: 12px;
  background: #fbfbf9;
  padding: 16px 16px 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fig-panel h4 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fig-panel svg { width: 100%; height: auto; display: block; }
.fig-caption {
  font-size: 12px;
  color: var(--ink-soft);
}
.fig-legend {
  display: flex;
  gap: 16px;
  font-size: 11.5px;
  color: var(--ink-soft);
  align-items: center;
}
.fig-legend i {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2.5px;
  margin-right: 6px;
  vertical-align: -1px;
}
.fig-kpis {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 4px 4px 6px;
}
.kpi {
  border: 1px solid var(--pill-border);
  border-radius: 14px;
  padding: 10px 18px;
  background: #fafaf8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 108px;
}
.kpi small {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.kpi b {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* output cards */
.sec-outputs { background: #efefeb; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  text-align: left;
}
.card {
  background: #ffffff;
  border: 1px solid rgba(23, 25, 28, 0.06);
  border-radius: 16px;
  padding: 28px 26px;
}
.card h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.cards-4 { grid-template-columns: repeat(4, 1fr); }

/* study contents: compact ruled list, deliberately quieter than the cards */
.includes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}
.includes-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.includes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 44px;
  text-align: left;
}
.inc {
  padding: 20px 0 22px;
  border-top: 1px solid rgba(23, 25, 28, 0.14);
}
.inc h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 7px;
}
.inc p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* smaller section-title variant for inner panels */
.sec-title-sm { font-size: clamp(1.65rem, 2.9vw, 2.35rem); }

/* how it works */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
  text-align: left;
}
.step {
  border-top: 2px solid var(--ink);
  padding-top: 22px;
}
.step-num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.step h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 12px 0 12px;
}
.step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.how-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* Mino AI teaser */
.sec-ai { background: #efefeb; }
.ai-panel {
  width: 100%;
  max-width: 980px;
  border: 1.5px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(120deg, #35c8de, #2b7de0) border-box;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.ai-chip {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #157a8d;
  background: rgba(47, 196, 221, 0.12);
  border-radius: 999px;
  padding: 7px 16px;
}
.ai-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
  width: 100%;
  margin-top: 10px;
}
.ai-feats h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.ai-feats p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* founder */
.founder {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1000px;
  text-align: left;
}
.founder-photo {
  width: 100%;
  aspect-ratio: 4 / 4.7;
  border-radius: 18px;
  background: #ecedec;
  overflow: hidden;
}
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 47% 30%;
  display: block;
}
.founder-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.founder-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.founder-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.founder-cred {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 4px;
}
.founder-copy .sec-body { font-size: 15px; }
.founder-copy .sec-body { max-width: 56ch; }
.founder-links { display: flex; gap: 12px; flex-wrap: wrap; }

/* final CTA band */
.sec-cta { background: var(--ink); }
.sec-cta .sec-title { color: #ffffff; }
.sec-cta .sec-body { color: rgba(255, 255, 255, 0.62); }
.btn-light {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid #ffffff;
  padding: 10px 8px 10px 22px;
}
.btn-light .disc {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 13px;
}
.btn-light:hover { transform: translateY(-1px); }
.btn-ghost-dark {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  padding: 14px 26px;
}
.btn-ghost-dark:hover { border-color: #ffffff; transform: translateY(-1px); }

/* footer */
footer {
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 72px 44px 36px;
}
.foot-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 48px;
  text-align: left;
}
.foot-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
footer .wordmark { color: #ffffff; }
footer .wordmark small { color: rgba(255, 255, 255, 0.6); }
.foot-tagline {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  max-width: 34ch;
}
.foot-col h4 {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 14px;
}
.foot-col a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.15s;
}
.foot-col a:hover, .foot-col a:focus-visible { color: #ffffff; outline: none; }
.foot-bottom {
  max-width: 1120px;
  margin: 52px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}
.foot-legal { display: flex; gap: 22px; }
.foot-legal a { color: rgba(255, 255, 255, 0.45); text-decoration: none; }
.foot-legal a:hover { color: #ffffff; }

@media (max-width: 900px) {
  footer { padding: 56px 24px 30px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* scroll reveal */
.sr {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sr.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sr { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .sec { padding: 90px 20px; }
  .cards, .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .includes-grid { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .fig-body { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .ai-panel { padding: 40px 28px; }
  .ai-feats { grid-template-columns: 1fr; gap: 18px; }
  .founder { grid-template-columns: 1fr; gap: 32px; }
  .founder-photo { max-width: 300px; justify-self: center; }
  .founder-copy { align-items: center; text-align: center; }
  .founder-copy .sec-body { text-align: center; }
}
@media (max-width: 560px) {
  .cards, .cards-4 { grid-template-columns: 1fr; }
  .includes-grid { grid-template-columns: 1fr; }
  .aud-pills { grid-template-columns: 1fr; }
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  nav { padding: 18px 20px; grid-template-columns: auto 1fr; }
  .nav-links { display: none; }
  .nav-cta { justify-self: end; }
  h1 { margin-bottom: 20px; }
  .sub { margin-bottom: 30px; }
  .cta-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .cta-row .btn { justify-content: center; }
}

/* ---------- nav additions: current page + "Go to the platform" ---------- */
.nav-static { position: relative; }
.nav-cta {
  display: flex;
  align-items: center;
  gap: 22px;
}
/* gradient-outline pill, same construction as the audience pills */
.nav-app {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 20px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(100deg, #35c8de, #2b7de0) border-box;
  transition: transform 0.15s ease;
}
.nav-app:hover { transform: translateY(-1px); }
.nav-app:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav-links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---------- inner pages ---------- */
.page-top { border-bottom: 1px solid rgba(23, 25, 28, 0.07); }
.sec.page-head { padding-top: 96px; }
.page-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.page-title {
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  max-width: 21ch;
  margin-bottom: 0;
}

.sec-tint { background: #efefeb; }
.sec-ai.sec-plain { background: var(--ground); }

/* two-column variant of the ruled list */
.includes-grid.two { grid-template-columns: repeat(2, 1fr); gap: 0 56px; }

/* platform workflow: copy and screenshot alternate sides */
.flow {
  display: flex;
  flex-direction: column;
  gap: 88px;
  width: 100%;
  margin-top: 16px;
}
.flow-step {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
  text-align: left;
}
.flow-step:nth-child(even) .flow-copy { order: 2; }
.flow-copy h3 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 0 12px;
}
.flow-copy p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
}
.shot {
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  border: 1.5px dashed rgba(23, 25, 28, 0.22);
  background: #fafaf8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}
.shot span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(23, 25, 28, 0.4);
}


@media (max-width: 900px) {
  .flow { gap: 60px; }
  .flow-step { grid-template-columns: 1fr; gap: 24px; }
  .flow-step:nth-child(even) .flow-copy { order: 0; }
  .includes-grid.two { gap: 0 32px; }
  .sec.page-head { padding-top: 64px; }
}
@media (max-width: 760px) {
  .nav-app { display: none; }
}
@media (max-width: 560px) {
  .includes-grid.two { grid-template-columns: 1fr; }
}

/* ---------- platform: step scope tags ---------- */
.step-num .scope {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #157a8d;
  background: rgba(47, 196, 221, 0.13);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 8px;
  vertical-align: 1px;
}

/* ---------- platform: battery spotlight (dark band) ---------- */
.sec-battery { background: var(--ink); }
.battery {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  text-align: left;
}
.battery-lead {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sec-battery .page-kicker { color: #6fd7e8; }
.sec-battery .sec-title { color: #ffffff; }
.sec-battery .sec-body { color: rgba(255, 255, 255, 0.64); }
.battery-list { display: flex; flex-direction: column; }
.bat-item {
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.bat-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.bat-item h3 {
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 7px;
}
.bat-item p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 900px) {
  .battery { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- about: two-paragraph intro ---------- */
.about-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* =====================================================================
   INTERACTION LAYER
   One orchestrated moment per page (figure assembles, workflow stage,
   dispatch chart) plus a few consistent micro-interactions. Everything
   here collapses to its end state under prefers-reduced-motion.
   ===================================================================== */

/* ---------- fixed nav that frosts once you scroll ---------- */
nav, nav.nav-static {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
nav.is-scrolled {
  background: rgba(247, 247, 245, 0.78);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 rgba(23, 25, 28, 0.08);
  padding-top: 14px;
  padding-bottom: 14px;
}
.page-top { height: 94px; }
@media (max-width: 760px) { .page-top { height: 78px; } }

/* ---------- hero: video eases back and copy lifts away as you scroll ---------- */
.hero { --p: 0; }
.hero video { transform: scale(calc(1.02 + var(--p) * 0.12)); will-change: transform; }
.hero .stack {
  opacity: calc(1 - var(--p) * 1.6);
  transform: translateY(calc(var(--p) * -70px));
  will-change: transform, opacity;
}

/* ---------- audience pills become tabs ---------- */
button.pill-aud {
  font-family: var(--sans);
  cursor: pointer;
  transition: transform 0.2s, color 0.2s, background 0.25s;
}
button.pill-aud:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pill-aud.is-on {
  color: #ffffff;
  background:
    linear-gradient(100deg, #35c8de, #2b7de0) padding-box,
    linear-gradient(100deg, #35c8de, #2b7de0) border-box;
}
.aud-line {
  min-height: 3.2em;
  max-width: 50ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: balance;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.aud-line.is-swapping { opacity: 0; transform: translateY(6px); }

/* ---------- the platform figure assembles itself ---------- */
.panels-fill { clip-path: inset(0 0 100% 0); }
.fig.in .panels-fill { animation: rows-in 1.3s steps(6, end) 0.35s forwards; }
@keyframes rows-in { to { clip-path: inset(0 0 0 0); } }

.tariff-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fig.in .tariff-line { transition: stroke-dashoffset 1.4s ease 0.5s; stroke-dashoffset: 0; }

.bars-charge rect, .bars-discharge rect {
  transform-box: fill-box;
  transform: scaleY(0);
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.8s + var(--i) * 0.05s);
}
.bars-charge rect { transform-origin: top; }
.bars-discharge rect { transform-origin: bottom; }
.fig.in .bars-charge rect, .fig.in .bars-discharge rect { transform: scaleY(1); }

.kpi { transition: transform 0.2s ease, border-color 0.2s ease; }
.kpi:hover { transform: translateY(-2px); border-color: var(--accent); }

/* ---------- staggered entrances for grids ---------- */
.cards.sr, .includes.sr, .battery-list.sr { opacity: 1; transform: none; }
.cards.sr > *, .includes.sr .inc, .battery-list.sr > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.cards.sr.in > *, .includes.sr.in .inc, .battery-list.sr.in > * { opacity: 1; transform: none; }
.cards.sr > :nth-child(2), .includes.sr .inc:nth-child(2), .battery-list.sr > :nth-child(2) { transition-delay: 0.08s; }
.cards.sr > :nth-child(3), .includes.sr .inc:nth-child(3), .battery-list.sr > :nth-child(3) { transition-delay: 0.16s; }
.cards.sr > :nth-child(4), .includes.sr .inc:nth-child(4), .battery-list.sr > :nth-child(4) { transition-delay: 0.24s; }
.cards.sr > :nth-child(5), .includes.sr .inc:nth-child(5) { transition-delay: 0.32s; }
.cards.sr > :nth-child(6), .includes.sr .inc:nth-child(6) { transition-delay: 0.40s; }

/* ---------- cards: lift, and a soft light that follows the cursor ---------- */
.card, .ai-panel { position: relative; isolation: isolate; }
.card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.card::before, .ai-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(47, 196, 221, 0.13), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  pointer-events: none;
}
.card:hover::before, .ai-panel:hover::before { opacity: 1; }
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 196, 221, 0.35);
  box-shadow: 0 22px 44px -26px rgba(23, 25, 28, 0.3);
}

/* ---------- how it works: the rule above each step draws in sequence ---------- */
.step { border-top-color: rgba(23, 25, 28, 0.12); position: relative; }
.step::before {
  content: "";
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1);
}
.step:nth-child(2)::before { transition-delay: 0.35s; }
.step:nth-child(3)::before { transition-delay: 0.7s; }
.steps.in .step::before { transform: scaleX(1); }

/* ---------- platform: sticky screenshot stage beside the steps ---------- */
.flow { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.flow-steps { display: flex; flex-direction: column; }
.flow-steps .flow-step {
  display: flex;
  min-height: 62vh;
  align-items: center;
  opacity: 0.3;
  transition: opacity 0.45s ease;
}
.flow-steps .flow-step.is-active { opacity: 1; }
.flow-steps .flow-step .shot { display: none; }
.flow-steps .flow-step.sr { transform: none; }
.flow-stage {
  position: sticky;
  top: calc(50vh - 190px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 18vh 0;
}
.stage-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 70px -38px rgba(23, 25, 28, 0.35);
}
.stage-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.stage-shot.is-on { opacity: 1; transform: none; }
.stage-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.stage-dots { display: flex; gap: 6px; }
.stage-dots i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(23, 25, 28, 0.18);
  transition: width 0.35s ease, background 0.35s ease;
}
.stage-dots i.is-on { width: 22px; background: var(--accent); }

@media (max-width: 900px) {
  .flow { display: flex; flex-direction: column; gap: 60px; }
  .flow-stage { display: none; }
  .flow-steps { gap: 60px; }
  .flow-steps .flow-step { display: grid; min-height: 0; opacity: 1; }
  .flow-steps .flow-step .shot { display: flex; }
}

/* ---------- platform: interactive dispatch chart ---------- */
.dispatch {
  grid-column: 1 / -1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  padding: 26px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dispatch-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.dispatch-title { font-size: 16px; font-weight: 600; color: #ffffff; }
.dispatch-caption {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  min-height: 1.5em;
  transition: opacity 0.25s ease;
}
.dispatch-caption.is-swapping { opacity: 0; }
.seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.seg button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.seg button.is-on { background: #ffffff; color: var(--ink); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dispatch-svg { width: 100%; height: auto; display: block; }
.dispatch-svg .bar {
  transform-box: fill-box;
  transform: scaleY(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dispatch-svg .bar.dis { transform-origin: bottom; fill: #2fc4dd; }
.dispatch-svg .bar.chg { transform-origin: top; fill: #8fa9bd; }
.dispatch-svg .solar-area { fill: rgba(242, 184, 75, 0.16); stroke: #f2b84b; stroke-width: 1.5; transition: opacity 0.5s ease; }
.dispatch-svg .price-line { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.8; }
.dispatch-svg .axis { stroke: rgba(255, 255, 255, 0.16); }
.dispatch-svg text { fill: rgba(255, 255, 255, 0.45); font-size: 12px; font-family: var(--sans); }
.dispatch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  align-items: center;
}
.dispatch-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.lg-dis { background: #2fc4dd; }
.lg-chg { background: #8fa9bd; }
.lg-solar { background: #f2b84b; }
.lg-price { background: rgba(255, 255, 255, 0.75); height: 2px !important; border-radius: 1px !important; }
.lg-solar-wrap { transition: opacity 0.4s ease; }
.lg-note { margin-left: auto; font-style: italic; }
.battery { row-gap: 56px; }

/* ---------- reduced motion: every moment lands in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero video, .hero .stack { transform: none !important; opacity: 1 !important; }
  .panels-fill { clip-path: none; animation: none !important; }
  .tariff-line { stroke-dashoffset: 0; transition: none !important; }
  .bars-charge rect, .bars-discharge rect { transform: none; transition: none; }
  .cards.sr > *, .includes.sr .inc, .battery-list.sr > * { opacity: 1; transform: none; transition: none; }
  .step::before { transform: scaleX(1); transition: none; }
  .stage-shot, .flow-steps .flow-step, .dispatch-svg .bar, .aud-line { transition: none; }
  .card:hover { transform: none; }
}

/* =====================================================================
   SERVICES PAGE
   ===================================================================== */

/* now / next / later: three cards on a timeline that draws in */
.svc-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  position: relative;
  padding-top: 34px;
  text-align: left;
}
.svc-track::after {
  content: "";
  position: absolute;
  top: 5px; left: 28px; right: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 22%, rgba(23, 25, 28, 0.14) 40%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.6, 0, 0.2, 1);
}
.svc-track.in::after { transform: scaleX(1); }
.svc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  overflow: visible;
}
.svc::after {
  content: "";
  position: absolute;
  top: -35px; left: 26px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid rgba(23, 25, 28, 0.25);
  z-index: 1;
}
.svc:first-child::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(47, 196, 221, 0.2); }
.svc h3 { margin-bottom: 0; }
.svc ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 8px;
  flex: 1;
}
.svc li {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}
.svc li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 10px; height: 6px;
  border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}
.svc-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 11px;
}
.svc-status.now { background: var(--accent); color: #0d3a42; }
.svc-status.next { border: 1px solid rgba(47, 196, 221, 0.6); color: #157a8d; }
.svc-status.later { background: rgba(23, 25, 28, 0.07); color: var(--ink-soft); }
.svc .btn { margin-top: auto; }

.matrix-key {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  align-items: center;
}
.matrix-key i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.k-cell { background: rgba(23, 25, 28, 0.13); }
.k-best { background: var(--accent); }

/* staggered entrances, as on the other grids */
.svc-track.sr { opacity: 1; transform: none; }
.svc-track.sr > .svc {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.svc-track.sr.in > .svc { opacity: 1; transform: none; }
.svc-track.sr > :nth-child(2) { transition-delay: 0.12s; }
.svc-track.sr > :nth-child(3) { transition-delay: 0.24s; }
.svc-track.sr.in > .svc:hover { transform: translateY(-4px); }

@media (max-width: 900px) {
  .svc-track { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .svc-track { padding-top: 0; }
  .svc-track::after, .svc::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-track::after { transform: none; transition: none; }
  .svc-track.sr > .svc { opacity: 1; transform: none; transition: none; }
}

/* ---------- services: footnote, timeline hover, pricing note ---------- */
.fn-mark { color: var(--accent); text-decoration: none; font-weight: 600; margin-left: 1px; }
.fn-note { font-size: 13px; color: var(--ink-soft); max-width: 60ch; margin-top: -22px; }
.svc::after { transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.svc:hover::after { border-color: var(--accent); box-shadow: 0 0 0 5px rgba(47, 196, 221, 0.2); }
.price-note {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(23, 25, 28, 0.07);
  border-radius: 999px;
  padding: 10px 10px 10px 18px;
}
.price-note p { font-size: 15px; color: var(--ink); }

/* ---------- services: scope builder ---------- */
.builder {
  width: 100%;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  text-align: left;
  align-items: stretch;
}
.builder-controls, .builder-out {
  background: #ffffff;
  border: 1px solid rgba(23, 25, 28, 0.07);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.presets { display: flex; flex-direction: column; gap: 8px; }
.preset {
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #fafaf8;
  border: 1.5px solid rgba(23, 25, 28, 0.08);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.preset b { font-size: 15px; font-weight: 600; color: var(--ink); }
.preset span { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.preset:hover { transform: translateX(3px); }
.preset.is-on {
  border-color: transparent;
  background:
    linear-gradient(#f2fbfd, #f2fbfd) padding-box,
    linear-gradient(100deg, #35c8de, #2b7de0) border-box;
}
.preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sliders { display: flex; flex-direction: column; gap: 16px; }
.slider { display: flex; flex-direction: column; gap: 8px; }
.slider-head {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.slider-head output {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #157a8d;
}
.slider input { width: 100%; accent-color: var(--accent); cursor: pointer; }

.seg-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg-label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.seg.seg-light { background: rgba(23, 25, 28, 0.06); }
.seg.seg-light button { color: var(--ink-soft); font-size: 13px; padding: 7px 14px; }
.seg.seg-light button.is-on { background: var(--ink); color: #ffffff; }

.builder-out { justify-content: space-between; }
.builder-stage {
  background: #fafaf8;
  border-radius: 14px;
  padding: 10px;
}
.grid-svg { width: 100%; height: auto; display: block; }
.grid-svg .gcell {
  fill: rgba(23, 25, 28, 0.13);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.35s ease, fill 0.35s ease;
}
.grid-svg .gcell.off { opacity: 0; }
.grid-svg .gcell.best { fill: var(--accent); }
.builder-count {
  font-size: 15px;
  color: var(--ink-soft);
}
.builder-count b {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
.builder-summary {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  min-height: 3.1em;
  transition: opacity 0.2s ease;
}
.builder-summary.is-swapping { opacity: 0; }
.builder-out .matrix-key { justify-content: flex-start; }
.builder-out .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .grid-svg .gcell, .preset, .builder-summary { transition: none; }
}

/* ---------- inline link out to another page ---------- */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid rgba(23, 25, 28, 0.2);
  transition: border-color 0.2s ease, gap 0.2s ease;
}
.more-link:hover, .more-link:focus-visible {
  border-bottom-color: var(--accent);
  gap: 14px;
  outline: none;
}

/* =====================================================================
   REFINEMENTS
   ===================================================================== */

/* a common edge for white panels: the brand cyan, kept very quiet */
:root { --edge: rgba(47, 196, 221, 0.34); }
.card, .fig, .builder-controls, .builder-out, .stage-frame, .price-note, .scope-fig {
  border: 1px solid var(--edge);
}
.fig { box-shadow: 0 28px 70px -34px rgba(23, 68, 79, 0.28); }
.fig-panel, .kpi { border-color: rgba(47, 196, 221, 0.22); }

/* 1) the explainer sits beside the figure */
.what-row {
  display: grid;
  grid-template-columns: 0.75fr 1.55fr;
  gap: 28px;
  align-items: center;
  width: 100%;
}
.what-note {
  background: #ffffff;
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: 26px 26px 28px;
  text-align: left;
  position: relative;
}
.what-note::before {
  content: "";
  position: absolute;
  top: 26px; left: 0;
  width: 3px; height: 42px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #35c8de, #2b7de0);
}
.what-note p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.what-row .fig { margin: 0; }

/* 2 & 3) cards and method items: title first, detail on hover */
.card-reveal, .reveal-grid .inc {
  position: relative;
  padding-right: 44px;
}
.card-reveal { min-height: 232px; display: flex; flex-direction: column; }
.card-reveal h3 {
  font-size: 19px;
  line-height: 1.25;
  margin-bottom: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.card-reveal .card-body, .reveal-grid .inc p {
  font-size: 15px;
  line-height: 1.55;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (hover: hover) {
  .card-reveal:hover .card-body, .card-reveal:focus-within .card-body,
  .reveal-grid .inc:hover p, .reveal-grid .inc:focus-within p {
    opacity: 1;
    transform: none;
  }
}
.reveal-grid .inc {
  min-height: 132px;
  cursor: default;
  transition: border-color 0.25s ease;
}
.reveal-grid .inc h3 { font-size: 16.5px; margin-bottom: 0; }
.reveal-grid .inc:hover { border-top-color: var(--accent); }
.card-arrow {
  position: absolute;
  top: 26px; right: 22px;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-soft);
  transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1), color 0.25s ease;
}
.reveal-grid .inc .card-arrow { top: 22px; right: 4px; font-size: 15px; }
.card-reveal:hover .card-arrow, .reveal-grid .inc:hover .card-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* 5) sliders: the top of the range reads as "and beyond" */
.slider-head output.at-max::after { content: "+"; }

@media (max-width: 900px) {
  .what-row { grid-template-columns: 1fr; }
  .card-reveal { min-height: 0; }
  .card-reveal .card-body, .reveal-grid .inc p { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card-reveal h3, .card-arrow { transition: none; }
}

/* the figure is narrower beside the note, so the KPI tiles sit as a 3 x 2 grid */
.what-row .fig-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.what-row .kpi { min-width: 0; padding: 10px 12px; }
@media (max-width: 560px) {
  .what-row .fig-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- the explainer sits under the figure ---------- */
.what-note.below {
  max-width: 900px;
  margin: 4px auto 0;
  text-align: left;
}
.what-note.below::before { top: 26px; height: calc(100% - 52px); }

/* ---------- reveal cards: the detail replaces the title, in the same space ---------- */
.card-reveal, .reveal-grid .inc {
  display: grid;
  grid-template-areas: "swap";
  align-content: center;
}
.card-reveal { min-height: 0; padding: 24px 44px 24px 24px; }
.card-reveal h3, .card-reveal .card-body,
.reveal-grid .inc h3, .reveal-grid .inc p {
  grid-area: swap;
  margin: 0;
}
.card-reveal h3, .reveal-grid .inc h3 {
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (hover: hover) {
  .card-reveal:hover h3, .card-reveal:focus-within h3,
  .reveal-grid .inc:hover h3, .reveal-grid .inc:focus-within h3 {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.card-reveal .card-body, .reveal-grid .inc p { transform: translateY(10px); }
.reveal-grid .inc { min-height: 0; padding: 20px 28px 22px 0; }
.reveal-grid .inc .card-arrow { top: 20px; }

/* =====================================================================
   TYPE SCALE: three body sizes only
   lead (under a heading) · body (everything else) · small (captions)
   ===================================================================== */
:root { --text-lead: 18px; --text-body: 16px; --text-small: 13px; }

.sec-body, .sub { font-size: var(--text-lead); line-height: 1.6; }
.what-note p,
.aud-line,
.card-reveal .card-body,
.step p,
.flow-copy p,
.ai-feats p,
.card p,
.inc p,
.scope p,
.svc p,
.svc li,
.how-note,
.builder-summary,
.builder-count,
.price-note p,
.founder-copy .sec-body,
.bat-item p { font-size: var(--text-body); line-height: 1.55; }

.fig-note, .fig-caption, .foot-tagline, .founder-cred,
.matrix-key, .fig-legend, .dispatch-legend, .stage-meta { font-size: var(--text-small); }

/* 6) use-case cards: title centred, arrow parked bottom-right */
.cards-4 .card-reveal {
  text-align: center;
  justify-items: center;
  padding: 26px 24px 46px;
}
.cards-4 .card-reveal h3,
.cards-4 .card-reveal .card-body { max-width: 26ch; }
.cards-4 .card-arrow {
  top: auto;
  bottom: 18px;
  right: 20px;
}

/* card titles sit in the middle of the box; the arrow keeps its corner */
.cards-4 .card-reveal { padding: 30px 24px; align-content: center; }
.cards-4 .card-arrow { bottom: 16px; right: 18px; }

/* heading scale, written down: step titles share one size across the site */
:root { --text-step: 22px; }
.step h3, .flow-copy h3 { font-size: var(--text-step); }

/* the title and the hover text share one cell: centre BOTH inside it, or the
   title floats to the top of a cell sized by the (longer) description */
.card-reveal h3, .card-reveal .card-body,
.reveal-grid .inc h3, .reveal-grid .inc p { align-self: center; }
.cards-4 .card-reveal h3, .cards-4 .card-reveal .card-body { justify-self: center; }

/* =====================================================================
   HOW IT WORKS - option B: number, icon, short title, detail on hover
   ===================================================================== */
.ico { width: 54px; height: 54px; display: block; flex: none; }
.ico .stroke { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico .accent { fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.vb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
  text-align: left;
}
.vb-step {
  border-top: 2px solid rgba(23, 25, 28, 0.12);
  padding: 22px 20px 24px 0;
  cursor: default;
  position: relative;
}
.vb-step::before {
  content: "";
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1);
}
.vb-step:nth-child(2)::before { transition-delay: 0.3s; }
.vb-step:nth-child(3)::before { transition-delay: 0.6s; }
.vb.in .vb-step::before { transform: scaleX(1); }
.vb-top { display: flex; align-items: center; gap: 18px; }
.vb-num {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(23, 25, 28, 0.28);
  transition: color 0.3s ease;
}
.vb-step:hover .vb-num, .vb-step:focus-within .vb-num { color: var(--accent); }
.vb-step h3 {
  font-family: var(--sans);
  font-size: var(--text-step);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 18px 0 0;
}
.vb-step p {
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 10px;
}
.vb-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* a pulse of light runs along each rule, one step after the next */
.vb-step::after {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(47, 196, 221, 0.18);
  opacity: 0;
}
.vb.in .vb-step::after { animation: pulse-run 0.95s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
.vb.in .vb-step:nth-child(2)::after { animation-delay: 0.3s; }
.vb.in .vb-step:nth-child(3)::after { animation-delay: 0.6s; }
@keyframes pulse-run {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 20px); opacity: 0; }
}

/* the icon redraws, and the step lifts a little, when you point at it */
.vb-step { transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1); }
.vb-step:hover { transform: translateY(-3px); }
.vb-step:hover::before { background: var(--accent); }
.ico .stroke, .ico .accent { transition: stroke 0.3s ease; }

@media (max-width: 900px) {
  .vb { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .vb-step::before { transform: scaleX(1); transition: none; }
  .vb-step::after { display: none; }
  .vb-step:hover { transform: none; }
}

/* =====================================================================
   ROUND OF FIXES: workflow pacing, includes hover, footnote tooltip
   ===================================================================== */

/* the reveal items belong to the body size like everything else */
.card-reveal .card-body, .reveal-grid .inc p { font-size: var(--text-body); }

/* workflow: the title stays closer, and each step holds the screen longer
   so step 01 can be read before 02 takes over */
#workflow .sec-inner { gap: 54px; }
.flow { margin-top: 0; }
/* each step is a little over half a screen: enough to read, little dead space */
.flow-steps .flow-step { min-height: 58vh; }
.flow-steps .flow-step:first-child { min-height: 62vh; }
.flow-steps .flow-step:last-child { min-height: 46vh; }
.flow-stage { top: calc(50vh - 200px); margin: 8vh 0 6vh; }

/* "every study includes": a quiet lift, cyan rule and a nudge on hover */
.inc-glow .inc {
  padding-left: 14px;
  margin-left: -14px;
  border-radius: 0 10px 10px 0;
  transition: border-top-color 0.25s ease, background 0.3s ease, transform 0.3s cubic-bezier(0.2,0.6,0.2,1);
}
.inc-glow .inc:hover {
  border-top-color: var(--accent);
  background: linear-gradient(180deg, rgba(47, 196, 221, 0.09), rgba(47, 196, 221, 0));
  transform: translateY(-3px);
}
.inc-glow .inc h3 { transition: color 0.25s ease; }
.inc-glow .inc:hover h3 { color: #10707f; }

/* footnote marker with a tooltip instead of a line under the hero */
button.fn-mark {
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0 2px;
  cursor: help;
  position: relative;
  line-height: 1;
}
.fn-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translate(-50%, 6px);
  width: min(320px, 76vw);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  border-radius: 12px;
  padding: 12px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease;
  z-index: 20;
}
.fn-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 10px; height: 10px;
  background: var(--ink);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}
button.fn-mark:hover .fn-tip,
button.fn-mark:focus-visible .fn-tip { opacity: 1; transform: translate(-50%, 0); }
button.fn-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 900px) {
  .flow-steps .flow-step, .flow-steps .flow-step:first-child, .flow-steps .flow-step:last-child { min-height: 0; padding-top: 0; }
}

/* =====================================================================
   SURVEY: a slim bar under the hero, and a block on the Services page
   ===================================================================== */
.survey-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  background: #eaf7fa;
  border-bottom: 1px solid rgba(47, 196, 221, 0.3);
  padding: 14px 24px;
}
.survey-bar p { font-size: var(--text-body); color: var(--ink); }
.survey-bar .btn-dark { padding: 8px 6px 8px 18px; font-size: 14px; }
.survey-bar .btn-dark .disc { width: 26px; height: 26px; font-size: 12px; }
.survey-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(47, 196, 221, 0.22);
  flex: none;
}
.sec-survey { padding-top: 0; }
.survey-panel {
  width: 100%;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 36px;
  align-items: center;
  text-align: left;
  background: #ffffff;
  border: 1.5px solid transparent;
  border-radius: 22px;
  padding: 34px 36px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(100deg, #35c8de, #2b7de0) border-box;
}
.survey-copy { display: flex; flex-direction: column; gap: 12px; }
.survey-copy .sec-title { text-align: left; }
.survey-action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.survey-note { font-size: var(--text-small); color: var(--ink-soft); }

@media (max-width: 760px) {
  .survey-bar { padding: 12px 44px 12px 18px; gap: 10px; }
  .survey-bar p { font-size: 14.5px; }
  .survey-panel { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
}

/* =====================================================================
   MOBILE: a real menu, and tap-to-open cards
   ===================================================================== */
.nav-burger { display: none; }
.nav-menu { display: none; }

@media (max-width: 760px) {
  nav {
    grid-template-columns: auto 1fr;
    align-items: center;
    background: rgba(247, 247, 245, 0.92);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
  }
  .nav-cta { display: none; }

  /* the burger replaces the button in the corner */
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    justify-self: end;
    width: 42px; height: 42px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--pill-border);
    border-radius: 12px;
    cursor: pointer;
  }
  .nav-burger span {
    display: block;
    height: 1.8px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.28s ease, opacity 0.2s ease;
  }
  .nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.4px) rotate(-45deg); }

  .nav-menu {
    display: block;
    grid-column: 1 / -1;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(23, 25, 28, 0.1);
  }
  .nav-menu[hidden] { display: none; }
  .nav-menu > a {
    display: block;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    padding: 12px 2px;
    border-bottom: 1px solid rgba(23, 25, 28, 0.07);
  }
  .nav-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0 8px;
  }
  .nav-menu-actions .btn { justify-content: center; width: 100%; }
  .nav-menu-actions .btn-dark { padding: 12px 8px 12px 20px; }

  /* tapping a card opens its explanation, since there is no hover on a phone */
  .card-reveal, .reveal-grid .inc {
    grid-template-areas: none;
    display: block;
    cursor: pointer;
  }
  .card-reveal h3, .reveal-grid .inc h3 { display: block; }
  .card-reveal .card-body, .reveal-grid .inc p {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transform: none;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.3s ease;
  }
  .card-reveal.is-open .card-body, .reveal-grid .inc.is-open p {
    max-height: 260px;
    opacity: 1;
    margin-top: 10px;
  }
  .card-arrow { transition: transform 0.3s ease; }
  .card-reveal.is-open .card-arrow, .reveal-grid .inc.is-open .card-arrow {
    transform: rotate(90deg);
    color: var(--accent);
  }
  .cards-4 .card-reveal { text-align: left; padding: 20px 44px 20px 20px; }
  .cards-4 .card-reveal h3, .cards-4 .card-reveal .card-body { max-width: none; }
  .cards-4 .card-arrow { top: 22px; bottom: auto; right: 18px; }
}

/* text inside a panel is body size, not the lead size used under a section title */
.survey-copy .sec-body, .ai-panel .sec-body, .founder-copy .sec-body { font-size: var(--text-body); }

/* on a phone the steps stack, so the title needs its own breathing room */
@media (max-width: 900px) {
  #workflow .sec-inner { gap: 40px; }
  .flow-steps { gap: 54px; }
}

/* =====================================================================
   VARIANT 2
   Ground unchanged (off-white + warm grey bands). What changes:
   every border is thicker and carries the blue from the audience pills,
   the "feasibility study" section uses the full width, and the four
   use-case cards alternate blue and white.
   ===================================================================== */
:root {
  --edge-blue: #4fb8dd;                 /* the pill blue, solid */
  --edge-blue-soft: rgba(79, 184, 221, 0.55);
  --card-blue: #e8f6fb;                 /* the blue card fill */
}

/* ---- thicker, bluer borders everywhere a panel has one ---- */
.card, .fig, .fig-panel, .kpi, .builder-controls, .builder-out, .stage-frame,
.price-note, .what-note, .scope-fig, .shot, .svc, .demo-stage {
  border-width: 3px;
  border-style: solid;
  border-color: var(--edge-blue);
}
.fig { border-color: var(--edge-blue); }
.shot { border-style: dashed; }
.pill-aud { border-width: 3px; }
.nav-app { border-width: 2.5px; }
.btn-ghost { border-width: 2.5px; border-color: var(--edge-blue); }
.survey-panel, .ai-panel { border-width: 3px; }
.card:hover { border-color: var(--edge-blue); }

/* rules and dividers take the same blue, a little stronger than before */
.step, .vb-step { border-top-color: var(--ink); border-top-width: 2px; }
.inc { border-top-color: rgba(79, 184, 221, 0.5); border-top-width: 3px; }
.includes-label, .aud-label { color: #17191c; }

/* ---- the feasibility-study section uses the width it has ---- */
.sec-what.wide .sec-inner { max-width: 1280px; }
.sec-what.wide .sec-title,
.sec-what.wide .page-title {
  max-width: 34ch;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
}
/* four audiences on one line */
.sec-what.wide .aud-pills { grid-template-columns: repeat(4, auto); gap: 12px; }
.sec-what.wide .aud-line { max-width: 68ch; }
.sec-what.wide .fig { max-width: 100%; }
.sec-what.wide .what-note.below { max-width: 1100px; }

/* ---- use-case cards: white as before, with the thicker blue border ---- */
.cards.alt .card { background: #ffffff; }
@media (max-width: 900px) {
  .sec-what.wide .aud-pills { grid-template-columns: repeat(2, minmax(0, auto)); }
  .sec-what.wide .sec-title, .sec-what.wide .page-title { font-size: clamp(2rem, 7vw, 2.6rem); }
}

/* =====================================================================
   GRADIENT BORDERS EVERYWHERE
   The Mino AI panel's trick: the border is a cyan-to-blue gradient, so the
   colour travels around the box. The fill is painted inside it, which is why
   each group below repeats its own background colour.
   ===================================================================== */
:root {
  --grad-edge: linear-gradient(115deg, #35c8de 0%, #2b7de0 55%, #35c8de 100%);
  --grad-edge-hot: linear-gradient(115deg, #2fc4dd 0%, #1f63c4 55%, #2fc4dd 100%);
}

/* white panels */
.card, .fig, .builder-controls, .builder-out, .stage-frame,
.price-note, .what-note, .svc, .demo-stage, .vc-panel {
  border: 3px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, var(--grad-edge) border-box;
}
/* panels whose fill is the off-white inset */
.fig-panel, .kpi, .scope-fig, .builder-stage {
  border: 3px solid transparent;
  background: linear-gradient(#fafaf8, #fafaf8) padding-box, var(--grad-edge) border-box;
}
/* the ghost button keeps its frosted fill */
.btn-ghost {
  border: 2.5px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)) padding-box,
              var(--grad-edge) border-box;
}
.btn-ghost-dark {
  border: 2.5px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)) padding-box,
              var(--grad-edge) border-box;
}

/* hover: the same gradient, deeper */
.card:hover, .kpi:hover, .btn-ghost:hover {
  background-image: linear-gradient(#ffffff, #ffffff), var(--grad-edge-hot);
}
.fig-panel:hover { background-image: linear-gradient(#fafaf8, #fafaf8), var(--grad-edge-hot); }

/* the screenshot frames stay dashed, so they keep a plain blue line */
.shot { border: 3px dashed var(--edge-blue); background: #fafaf8; }

/* anything sitting INSIDE a main box keeps the plain light-blue line:
   the gradient belongs to the outer panel only */
.fig-panel, .kpi, .builder-stage, .preset, .scope-fig,
.ai-panel .btn-ghost, .survey-panel .btn-ghost, .svc .btn-ghost,
.price-note .btn-ghost, .builder-out .btn-ghost, .founder-links .btn-ghost,
.card .btn-ghost {
  border: 2px solid var(--edge-blue-soft);
  background: #fafaf8;
}
.ai-panel .btn-ghost, .survey-panel .btn-ghost, .svc .btn-ghost,
.price-note .btn-ghost, .builder-out .btn-ghost, .founder-links .btn-ghost,
.card .btn-ghost { background: rgba(255, 255, 255, 0.72); }
.fig-panel:hover, .kpi:hover { background: #fafaf8; border-color: var(--edge-blue); }

/* the hero's secondary button is solid white inside */
.hero .btn-ghost {
  background: linear-gradient(#ffffff, #ffffff) padding-box, var(--grad-edge) border-box;
}
.hero .btn-ghost:hover {
  background-image: linear-gradient(#ffffff, #ffffff), var(--grad-edge-hot);
}

/* =====================================================================
   TYPE, ONE STEP UP
   Headline and section titles unchanged. Everything between them and the
   captions grows by about 10%. Small print and labels stay as they were.
   ===================================================================== */
:root {
  --text-lead: 20px;      /* was 18 */
  --text-body: 17.5px;    /* was 16 */
  --text-step: 24px;      /* was 22 */
  --text-small: 13px;     /* unchanged */
}
.card h3, .svc h3, .inc h3, .scope h3, .bat-item h3, .ai-feats h3 { font-size: 21px; }  /* was 19 */
.card-reveal h3 { font-size: 21px; }
.reveal-grid .inc h3 { font-size: 18px; }                                                /* was 16.5 */
.founder-name { font-size: 17.5px; }
.vb-num, .vd-num { font-size: 33px; }                                                    /* keeps step numbers in proportion */

/* =====================================================================
   LOGO
   ===================================================================== */
.wordmark { gap: 12px; align-items: center; }
.logo { width: 36px; height: 36px; flex: none; display: block; }
.wm-text { display: flex; flex-direction: column; line-height: 1; }
.wm-text b {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.wm-text small {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--ink-soft);
  margin-top: 3px;
}
/* on the dark footer the tile flips: white square, dark smile */
footer .logo .logo-tile { fill: #ffffff; }
footer .logo .logo-smile { stroke: #17191c; }
footer .wm-text b { color: #ffffff; }
footer .wm-text small { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 760px) {
  .logo { width: 32px; height: 32px; }
  .wm-text b { font-size: 17px; }
}

/* =====================================================================
   NIGHT THEME (applies when <body> has the class "night")
   ===================================================================== */


/* =====================================================================
   NIGHT
   Same layout, same gradient borders, inverted ground. Panels are raised
   surfaces rather than white cards, and the drawn figures are re-inked.
   ===================================================================== */body.night {
  --ground: #0e1317;
  --ink: #eef3f6;
  --ink-soft: #9aabb7;
  --pill-border: rgba(255, 255, 255, 0.2);
  --glow: 14, 19, 23;
  --tint: #141b21;
  --panel: #171f26;
  --panel-soft: #1c252d;
}body.night,
body.night { background: var(--ground); color: var(--ink); }body.night .sec-tint,
body.night .sec-outputs,
body.night .sec-ai { background: var(--tint); }body.night .sec-ai.sec-plain { background: var(--ground); }body.night .sec-cta,
body.night .sec-battery,
body.night footer { background: #080c0f; }body.night .page-top { border-bottom-color: rgba(255, 255, 255, 0.08); }

/* panels: raised surfaces, gradient border kept */body.night .card,
body.night .fig,
body.night .builder-controls,
body.night .builder-out,
body.night .stage-frame,
body.night .price-note,
body.night .what-note,
body.night .svc,
body.night .demo-stage,
body.night .vc-panel,
body.night .ai-panel,
body.night .survey-panel {
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad-edge) border-box;
}body.night .fig-panel,
body.night .kpi,
body.night .builder-stage,
body.night .preset,
body.night .scope-fig { background: var(--panel-soft); }body.night .btn-ghost,
body.night .hero .btn-ghost {
  background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)) padding-box,
              var(--grad-edge) border-box;
  color: var(--ink);
}body.night .btn-dark { background: #ffffff; color: #0e1317; border-color: #ffffff; }body.night .btn-dark .disc { background: #0e1317; color: #ffffff; }body.night .btn-light { background: var(--accent); color: #05222a; border-color: var(--accent); }body.night .btn-light .disc { background: #05222a; color: var(--accent); }

/* nav and bars */body.night nav.is-scrolled { background: rgba(14, 19, 23, 0.82); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
@media (max-width: 760px) {body.night nav { background: rgba(14, 19, 23, 0.94); } }body.night .nav-menu { border-top-color: rgba(255, 255, 255, 0.12); }body.night .nav-menu > a { color: var(--ink); border-bottom-color: rgba(255, 255, 255, 0.08); }body.night .survey-bar { background: #10222a; border-bottom-color: rgba(47, 196, 221, 0.35); }body.night .survey-bar p { color: var(--ink); }

/* rules, chips, small print */body.night .step,
body.night .vb-step { border-top-color: rgba(255, 255, 255, 0.5); }body.night .inc { border-top-color: rgba(79, 184, 221, 0.45); }body.night .pill-aud { background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad-edge) border-box; color: var(--ink); }body.night .pill-aud.is-on { color: #05222a; }body.night .seg.seg-light { background: rgba(255, 255, 255, 0.08); }body.night .seg.seg-light button { color: var(--ink-soft); }body.night .seg.seg-light button.is-on { background: var(--accent); color: #05222a; }body.night .svc-status.later { background: rgba(255, 255, 255, 0.1); color: var(--ink-soft); }body.night .ai-chip { background: rgba(47, 196, 221, 0.16); color: #7fdcee; }body.night .fn-tip { background: #05222a; }

/* the drawn figures are re-inked for a dark panel */body.night .fig-panel svg rect[fill="#eef0ef"] { fill: #0f171d; }body.night .fig-panel svg rect[stroke="#d8dbd9"] { stroke: #2b3a46; }body.night .fig-panel svg [stroke="#b9bfbc"] { stroke: #3a4b58; }body.night .fig-panel svg line[stroke="#d8dbd9"] { stroke: #2b3a46; }body.night .tariff-line { stroke: #dbe6ee; }body.night .bars-charge rect { fill: #5c7d94; }body.night .fig-legend i[style*="#17191c"] { background: #dbe6ee !important; }body.night .grid-svg .gcell { fill: rgba(255, 255, 255, 0.14); }body.night .ico .stroke { stroke: var(--ink); }body.night .k-cell { background: rgba(255, 255, 255, 0.14); }body.night .matrix-key,
body.night .fig-note,
body.night .fig-caption { color: var(--ink-soft); }

/* the hero glow now darkens rather than lightens the video */body.night .hero .glow {
  background:
    linear-gradient(to bottom, rgba(14, 19, 23, 0.9), rgba(14, 19, 23, 0) 22%),
    radial-gradient(ellipse 62% 52% at 50% 46%,
      rgba(14, 19, 23, 0.86) 0%, rgba(14, 19, 23, 0.6) 42%,
      rgba(14, 19, 23, 0.2) 68%, rgba(14, 19, 23, 0) 100%);
}body.night .hero video { filter: saturate(0.9) brightness(0.75); }

/* footer */body.night .foot-col a { color: rgba(255, 255, 255, 0.72); }body.night .foot-bottom { border-top-color: rgba(255, 255, 255, 0.12); }

/* the outlined pills need an opaque fill at night, or the gradient border
   shows straight through the middle and takes the label with it */body.night .btn-ghost,
body.night .hero .btn-ghost,
body.night .nav-app {
  background: linear-gradient(#1a232a, #1a232a) padding-box, var(--grad-edge) border-box;
  color: var(--ink);
}body.night .btn-ghost:hover,
body.night .hero .btn-ghost:hover,
body.night .nav-app:hover {
  background-image: linear-gradient(#202b34, #202b34), var(--grad-edge-hot);
}body.night .btn-ghost-dark {
  background: linear-gradient(#141c22, #141c22) padding-box, var(--grad-edge) border-box;
  color: var(--ink);
}

/* the selected preset keeps its pale fill, so its text goes dark */body.night .preset.is-on b { color: #06222b; }body.night .preset.is-on span { color: #2c5866; }

/* --- contrast fixes found by scanning the night pages --- */body.night .includes-label,
body.night .aud-label { color: var(--ink-soft); }      /* was forced to near-black */body.night .vb-num,
body.night .vd-num { color: rgba(255, 255, 255, 0.34); }        /* step numbers were dark on dark */body.night .vb-step:hover .vb-num { color: var(--accent); }

/* nested ghost buttons inside panels: dark fill, light label */body.night .ai-panel .btn-ghost,
body.night .survey-panel .btn-ghost,
body.night .svc .btn-ghost,
body.night .price-note .btn-ghost,
body.night .builder-out .btn-ghost,
body.night .founder-links .btn-ghost,
body.night .card .btn-ghost {
  background: #1a232a;
  border-color: var(--edge-blue-soft);
  color: var(--ink);
}

/* the dispatch toggle: white pill needs dark text */body.night .dispatch .seg button.is-on { background: var(--accent); color: #06222b; }body.night .dispatch .seg button { color: rgba(255, 255, 255, 0.72); }

/* --- night: nothing turns white on hover --- */body.night .aud-pills .pill-aud {
  background: linear-gradient(#171f26, #171f26) padding-box, var(--grad-edge) border-box;
  color: var(--ink);
}body.night .aud-pills .pill-aud:hover {
  background: linear-gradient(#123039, #123039) padding-box, var(--grad-edge-hot) border-box;
  color: #7fdcee;
}body.night .aud-pills .pill-aud.is-on {
  background: linear-gradient(100deg, #35c8de, #2b7de0) padding-box,
              linear-gradient(100deg, #35c8de, #2b7de0) border-box;
  color: #05222a;
}body.night .card:hover,
body.night .kpi:hover {
  background-image: linear-gradient(#1c262e, #1c262e), var(--grad-edge-hot);
}body.night .fig-panel:hover { background-image: linear-gradient(#202a33, #202a33), var(--grad-edge-hot); }
/* the primary button is brand cyan rather than glaring white */body.night .btn-dark { background: #2fc4dd; border-color: #2fc4dd; color: #05222a; }body.night .btn-dark .disc { background: #05222a; color: #2fc4dd; }body.night .btn-dark:hover { background: #55d3e8; border-color: #55d3e8; }body.night .btn-light { background: #2fc4dd; border-color: #2fc4dd; color: #05222a; }body.night .more-link { color: var(--ink); border-bottom-color: rgba(255, 255, 255, 0.28); }

/* the theme switch itself */body.night .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 2px solid var(--pill-border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}body.night .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }body.night .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }body.night .theme-toggle .sun { display: none; }body.night .theme-toggle .sun { display: block; }body.night .theme-toggle .moon { display: none; }
@media (max-width: 760px) {body.night .nav-cta .theme-toggle { display: inline-flex; } }

/* the staff line under the waitlist panel */
.staff-line {
  font-size: var(--text-small);
  color: var(--ink-soft);
  margin-top: 4px;
}
.staff-line a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--edge-blue);
  padding-bottom: 1px;
}
.staff-line a:hover { border-bottom-color: var(--accent); }
body.night .staff-line a { color: var(--ink); }

/* =====================================================================
   THEME SWITCH (belongs to both themes, so it must not be scoped)
   ===================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  border: 2px solid var(--pill-border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-toggle svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .sun { display: none; }
body.night .theme-toggle .sun { display: block; }
body.night .theme-toggle .moon { display: none; }
body.night .theme-toggle { border-color: rgba(255, 255, 255, 0.28); }
body.night .theme-toggle:hover { border-color: var(--accent); background: rgba(47, 196, 221, 0.12); }

/* shown only if the hero video cannot start on its own */
.hero-play {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--pill-border);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
}
.hero-play svg { width: 22px; height: 22px; fill: var(--ink); }
body.night .hero-play { background: rgba(14, 19, 23, 0.8); border-color: rgba(255, 255, 255, 0.3); }
body.night .hero-play svg { fill: #ffffff; }

/* phones: the poster frame stands in for the video, drifting slowly so the
   hero still feels alive without downloading anything */
.hero.poster-only video { display: none; }
.hero.poster-only::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("media/hero-poster.jpg") center/cover no-repeat;
  animation: hero-drift 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.poster-only::before { animation: none; transform: scale(1.04); }
}
.hero-play { bottom: 14%; }

/* keep the play button out of the way of the hero buttons */
.hero-play {
  left: auto;
  right: 20px;
  bottom: 20px;
  transform: none;
  width: 48px;
  height: 48px;
}
.hero-play svg { width: 19px; height: 19px; }

/* phone hero: a shorter frame so the wide render is not cropped to a sliver,
   and a lighter wash so the panels and battery stay visible behind the text */
@media (max-width: 900px) {
  .hero.poster-only { height: auto; min-height: 0; padding: 92px 0 54px; }
  .hero.poster-only::before {
    background-position: 50% 60%;
    animation: hero-drift-phone 26s ease-in-out infinite alternate;
  }
  @keyframes hero-drift-phone {
    from { transform: scale(1.02); }
    to   { transform: scale(1.08) translate3d(-1%, -0.5%, 0); }
  }
  .hero.poster-only .glow {
    background:
      linear-gradient(to bottom, rgba(var(--glow), 0.9), rgba(var(--glow), 0.55) 26%, rgba(var(--glow), 0.4) 62%, rgba(var(--glow), 0.75));
  }
  .hero.poster-only .stack { padding-top: 12px; }
  .hero-play { bottom: 14px; right: 14px; }
}

/* On phones the hero shows the render as a picture rather than a cropped
   backdrop, so the array and the battery are actually visible. */
.hero-shot { display: none; }
@media (max-width: 900px) {
  .hero.poster-only { height: auto; min-height: 0; padding: 96px 0 30px; display: block; }
  .hero.poster-only::before { display: none; }
  .hero.poster-only .glow { display: none; }
  .hero.poster-only .stack { height: auto; padding-bottom: 6px; }
  .hero.poster-only .hero-shot {
    display: block;
    width: calc(100% - 40px);
    margin: 4px auto 0;
    border-radius: 18px;
    border: 3px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box, var(--grad-edge) border-box;
    box-shadow: 0 20px 44px -28px rgba(17, 45, 75, 0.45);
  }
  .hero.poster-only .hero-play { position: static; margin: 16px auto 0; }
}
body.night .hero.poster-only .hero-shot {
  background: linear-gradient(#171f26, #171f26) padding-box, var(--grad-edge) border-box;
}

/* PHONE HERO — the render as a full background.
   A 16:9 image inside a tall phone screen cannot be "cover" cropped without
   losing the array and the battery, so it is sized to fit the width and sits
   in the lower half, with the ground colour carrying the rest. */
@media (max-width: 900px) {
  .hero.poster-only { height: 86svh; min-height: 560px; padding: 0; display: flex; }
  .hero.poster-only::before {
    display: block;
    background-size: 118% auto;
    background-position: 50% 78%;
    animation: hero-drift-phone 26s ease-in-out infinite alternate;
  }
  @keyframes hero-drift-phone {
    from { transform: scale(1);    }
    to   { transform: scale(1.06); }
  }
  .hero.poster-only .glow {
    display: block;
    background:
      linear-gradient(to bottom, rgba(var(--glow), 0.96) 8%, rgba(var(--glow), 0.72) 42%, rgba(var(--glow), 0.12) 66%, rgba(var(--glow), 0.05));
  }
  .hero.poster-only .stack { justify-content: flex-start; padding-top: 108px; height: 100%; }
  .hero.poster-only .hero-shot { display: none; }
}

/* phone hero, tuned: the render sits across the bottom of the hero and the
   text sits on clean ground above it, so both stay readable */
@media (max-width: 900px) {
  .hero.poster-only { height: 92svh; min-height: 600px; }
  .hero.poster-only::before {
    background-size: 132% auto;
    background-position: 50% 100%;
  }
  .hero.poster-only .glow {
    background: linear-gradient(to bottom,
      rgba(var(--glow), 1) 0%,
      rgba(var(--glow), 1) 40%,
      rgba(var(--glow), 0.72) 52%,
      rgba(var(--glow), 0.1) 64%,
      rgba(var(--glow), 0) 72%);
  }
  .hero.poster-only .stack { justify-content: flex-start; padding-top: 104px; }
  .hero.poster-only .cta-row { margin-top: 4px; }
}

/* =====================================================================
   PHONE HERO, FINAL: text and buttons on the ground, the render as a
   picture underneath. Overrides the background-image attempt above.
   ===================================================================== */
@media (max-width: 900px) {
  .hero.poster-only {
    height: auto;
    min-height: 0;
    padding: 96px 0 34px;
    display: block;
  }
  .hero.poster-only::before { display: none; }
  .hero.poster-only .glow { display: none; }
  .hero.poster-only .stack { height: auto; padding-top: 0; padding-bottom: 4px; }
  .hero.poster-only .hero-shot {
    display: block;
    width: calc(100% - 40px);
    margin: 18px auto 0;
    border-radius: 18px;
    border: 3px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box, var(--grad-edge) border-box;
    box-shadow: 0 20px 44px -28px rgba(17, 45, 75, 0.45);
  }

  /* 1) the two hero buttons sit side by side, and smaller */
  .hero .cta-row {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: none;
  }
  .hero .cta-row .btn {
    flex: 0 1 auto;
    font-size: 14.5px;
    padding: 10px 16px;
  }
  .hero .cta-row .btn-dark { padding: 7px 6px 7px 16px; }
  .hero .cta-row .btn-dark .disc { width: 26px; height: 26px; font-size: 12px; }

  /* 2) the menu actions read like the page links, not like buttons */
  .nav-menu-actions {
    display: block;
    padding: 0 0 10px;
  }
  .nav-menu-actions .btn {
    display: block;
    width: auto;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(23, 25, 28, 0.07);
    border-radius: 0;
    padding: 12px 2px;
    text-align: left;
  }
  .nav-menu-actions .btn .disc { display: none; }
  .nav-menu-actions .btn:hover { color: var(--accent); }
  body.night .nav-menu-actions .btn { color: var(--ink); border-bottom-color: rgba(255, 255, 255, 0.08); }
}


/* founder: name, role, nothing else */
.founder-role {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: -6px;
}
.founder-role.muted { font-weight: 400; color: var(--ink-soft); margin-top: -10px; }
.founder-copy .founder-links { margin-top: 10px; }

/* ---------- dispatch chart: stagger indices and legend swatches ----------
   These were inline style="--i:0" attributes and style="background:#..." on the legend
   swatches. They are here because the Content-Security-Policy sets style-src 'self' with
   no 'unsafe-inline', so an inline style attribute is dropped by the browser and the
   animation silently does not stagger. Tests/test_website_site.py fails if one comes back.

   The indices must match the SVG's element order: 11 charge bars, 9 discharge bars. */
.bars-charge rect:nth-child(1)  { --i: 0; }
.bars-charge rect:nth-child(2)  { --i: 1; }
.bars-charge rect:nth-child(3)  { --i: 2; }
.bars-charge rect:nth-child(4)  { --i: 3; }
.bars-charge rect:nth-child(5)  { --i: 4; }
.bars-charge rect:nth-child(6)  { --i: 5; }
.bars-charge rect:nth-child(7)  { --i: 6; }
.bars-charge rect:nth-child(8)  { --i: 7; }
.bars-charge rect:nth-child(9)  { --i: 8; }
.bars-charge rect:nth-child(10) { --i: 9; }
.bars-charge rect:nth-child(11) { --i: 10; }

.bars-discharge rect:nth-child(1) { --i: 0; }
.bars-discharge rect:nth-child(2) { --i: 1; }
.bars-discharge rect:nth-child(3) { --i: 2; }
.bars-discharge rect:nth-child(4) { --i: 3; }
.bars-discharge rect:nth-child(5) { --i: 4; }
.bars-discharge rect:nth-child(6) { --i: 5; }
.bars-discharge rect:nth-child(7) { --i: 6; }
.bars-discharge rect:nth-child(8) { --i: 7; }
.bars-discharge rect:nth-child(9) { --i: 8; }

.fig-legend i.lg-discharge { background: #2fc4dd; }
.fig-legend i.lg-charge    { background: #a9bfd0; }
.fig-legend i.lg-tariff    { background: #17191c; height: 2px; border-radius: 1px; }

/* ---------- 404 ----------
   Used by 404.html, which a later task creates. Here rather than inline for the same
   CSP reason as everything above. */
.nf { min-height: 52vh; display: grid; place-items: center; }
.nf .sec-inner { text-align: center; }
.nf .cta-row { justify-content: center; }

/* The figure on the homepage shows made-up numbers. It says so. */
.fig-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- legal pages ----------
   .legal-tbc is a visible admission that something is unfinished. It is deliberately not
   subtle: a reader should be able to tell at a glance which parts of these pages are
   settled and which are waiting on the company. Remove each item as it is filled in, and
   remove the block when it is empty. */
.legal-prose { max-width: 68ch; margin: 0 auto; }
.legal-prose h1 { margin-bottom: 8px; }
.legal-prose h2 { margin: 42px 0 12px; }
.legal-prose h3 { margin: 28px 0 8px; }
.legal-prose p, .legal-prose li { font-size: 17.5px; line-height: 1.65; }
.legal-prose ul { padding-left: 22px; margin: 12px 0; }
.legal-prose li { margin-bottom: 8px; }
.legal-updated { margin-top: 48px; font-size: 13px; color: var(--ink-soft); }
.legal-tbc {
  margin: 36px 0;
  padding: 22px 24px;
  border: 1px dashed var(--edge-blue);
  border-radius: 14px;
  background: rgba(79, 184, 221, 0.06);
}
.legal-tbc h3 { margin-top: 0; }
.legal-tbc-tag {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--edge-blue);
}

/* Links inside running prose. This site styles every other link by class, so a bare <a> in
   a paragraph fell through to the browser default: blue, then visited-purple. The colour is
   inherited rather than set, so the link stays legible in both themes automatically, and the
   brand blue does the work of marking it as a link. */
.legal-prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--edge-blue);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.legal-prose a:hover,
.legal-prose a:focus-visible { color: var(--edge-blue); }