:root {
  color-scheme: light;

  /* Shared with the product portal. One neutral family and one EzNRG accent. */
  --bg-deep: #f7f9fc;
  --bg: #f7f9fc;
  --ink-teal: #e9f3f0;
  --surface: #ffffff;
  --surface-2: #eef2f6;
  --muted-surface: #e6ebf0;
  --footer-surface: #edf4f1;

  --text: #202a36;
  --muted: #607084;

  --mint: #087c70;
  --mint-lift: #087c70;
  --mint-deep: #05665d;
  --ember: #087c70;
  --ember-deep: #05665d;
  --accent-rgb: 8, 124, 112;
  --danger: #9d2b20;
  --danger-soft: #f8e5e3;

  --primary: var(--mint);
  --primary-foreground: #ffffff;
  --ring: var(--mint);

  /* Compatibility aliases. They all resolve to the single brand accent. */
  --teal: var(--mint);
  --teal-deep: var(--mint-deep);
  --cyan: var(--mint-lift);
  --green: var(--mint);
  --amber: var(--mint-deep);

  --border: #e1e7ef;
  --shadow: 0 24px 80px rgba(20, 52, 48, 0.12);
  --max: 1160px;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Structural corners only. Decorative shapes (pill badges = 999px,
     circles/dots = 50%, the key-ghost glyph) keep their own literals. */
  --radius: 6px;
  --radius-lg: 10px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-deep: #111820;
  --bg: #111820;
  --ink-teal: #123a32;
  --surface: #18212c;
  --surface-2: #202c39;
  --muted-surface: #131c26;
  --footer-surface: #0d1816;
  --text: #edf2f7;
  --muted: #9aabbe;
  --mint: #62d1b8;
  --mint-lift: #7de0c8;
  --mint-deep: #4bb99f;
  --ember: #62d1b8;
  --ember-deep: #4bb99f;
  --accent-rgb: 98, 209, 184;
  --danger: #e28170;
  --danger-soft: #311a16;
  --primary-foreground: #06201b;
  --border: #2b3848;
  --shadow: 0 24px 80px rgba(2, 10, 13, 0.48);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg-deep);
  font-family: var(--font-body);
  font-feature-settings: "ss01" 1;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* One restrained page-level background in both themes. */
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(115% 70% at 6% -14%, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-rgb), 0) 64%),
    radial-gradient(100% 75% at 96% 2%, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0) 62%),
    linear-gradient(178deg, var(--surface) 0%, var(--bg) 48%, var(--bg-deep) 100%);
  background-size: 160px 160px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

input,
textarea {
  width: 100%;
  color: var(--text);
}

input[type="hidden"] {
  display: none;
}

textarea {
  min-height: 132px;
  resize: vertical;
}

.container {
  width: min(100% - 40px, var(--max));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: 96px 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  padding: 10px 14px;
  color: var(--primary-foreground);
  background: var(--mint);
  border-radius: var(--radius);
  transform: translateY(-140%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.header-sentinel {
  position: absolute;
  top: 12px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.site-header.is-scrolled {
  border-color: rgba(var(--accent-rgb), 0.2);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 18px 50px rgba(20, 52, 48, 0.1);
}

.header-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 24px;
  transition: min-height 220ms ease;
}

.site-header.is-scrolled .header-shell {
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
}

/*
  The lockup is two separate files (mark + wordmark), not one image, so both are
  sized off `height` and never `width`. Their aspect ratios are far apart - the
  mark is 0.92, the wordmark 3.52 - so a shared width would blow the balance
  between them. Keep the ~1.75:1 mark-to-wordmark height ratio when retuning.
*/
.brand-mark {
  width: auto;
  height: 42px;
  transition: height 220ms ease, transform 220ms ease;
}

.brand-wordmark {
  width: auto;
  height: 24px;
  transition: height 220ms ease;
}

:root:not([data-theme="dark"]) .brand-wordmark {
  filter: brightness(0);
  opacity: 0.84;
}

:root:not([data-theme="dark"]) .brand-mark {
  filter: brightness(0.58) saturate(1.15);
}

.site-header.is-scrolled .brand-mark {
  height: 38px;
}

.site-header.is-scrolled .brand-wordmark {
  height: 22px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  padding: 10px 12px;
  color: var(--muted);
  border-radius: var(--radius);
  font-size: 0.94rem;
  font-weight: 700;
  transition: color 180ms ease, background-color 180ms ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  color: var(--text);
  background: var(--surface-2);
}

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.menu-button svg {
  width: 23px;
  height: 23px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.button::after {
  position: absolute;
  inset: -40% auto -40% -70%;
  width: 58%;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  transition: left 420ms ease;
}

.button:hover::after,
.button:focus-visible::after {
  left: 118%;
}

.button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.button-primary {
  color: var(--primary-foreground);
  background: linear-gradient(135deg, var(--primary), var(--teal-deep) 72%);
  box-shadow: 0 18px 50px rgba(139, 216, 166, 0.2);
}

.button-primary:hover,
.button-primary:focus-visible {
  box-shadow: 0 22px 62px rgba(139, 216, 166, 0.3);
}

.button-secondary {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--mint);
  background: var(--surface-2);
}

.button-small {
  min-height: 42px;
  padding-inline: 14px;
  color: var(--primary-foreground);
  background: linear-gradient(135deg, var(--mint), var(--mint-deep) 78%);
  box-shadow: 0 12px 32px rgba(139, 216, 166, 0.18);
  font-size: 0.92rem;
}

.hero {
  min-height: calc(100vh - 124px);
  display: flex;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 56px;
}

/*
  Section glow. The old version was a 420px-tall box with blur(8px) and no
  bottom mask, so it ended on a hard horizontal line partway down the page.
  Radial gradients that fall off to zero alpha of their own hue have no edge
  to see, and the mask guarantees the bottom third is gone regardless.
*/
.hero::after,
.cta-section::before,
.contact-section::before,
.upload-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background: radial-gradient(
    58% 62% at 22% 26%,
    rgba(139, 216, 166, 0.15),
    rgba(139, 216, 166, 0) 70%
  );
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 0) 96%);
}

/*
  Only the hero gets the warm counterweight, because only the hero has the
  curve next to it to explain what warm means. Everywhere else an ember glow
  is just an orange smudge, which is worse than no second hue at all.
*/
.hero::after {
  background:
    radial-gradient(58% 62% at 22% 26%, rgba(139, 216, 166, 0.15), rgba(139, 216, 166, 0) 70%),
    radial-gradient(40% 46% at 86% 16%, rgba(242, 166, 90, 0.07), rgba(242, 166, 90, 0) 68%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(370px, 0.88fr);
  align-items: center;
  gap: 56px;
}

.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 14px;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0.7;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

/*
  The scale was inverted: h2 topped out at 4.5rem while the hero h1 stopped
  at 3.8rem, so every section heading shouted louder than the page's actual
  headline. h1 > h2 > h3 now, with the hero the largest thing on the site.
*/
h1 {
  max-width: 15ch;
  margin-bottom: 24px;
  font-size: clamp(2.9rem, 5.6vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.hero-copy h1 {
  max-width: 17ch;
  color: var(--text);
  font-family: var(--font-display);
  text-shadow: 0 0 48px rgba(139, 216, 166, 0.14);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-copy h1 {
    color: transparent;
    /* Restrained on purpose: cream that only lifts toward mint in the last
       quarter. The old version ran through four stops that were all the
       same hex, so it rendered as a flat mint bar. */
    background: linear-gradient(102deg, var(--text) 0%, var(--text) 46%, var(--mint-lift) 88%, var(--mint) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

h2 {
  max-width: 22ch;
  margin-bottom: 22px;
  font-size: clamp(1.9rem, 3.3vw, 3rem);
}

h3 {
  margin-bottom: 12px;
  font-size: 1.16rem;
  letter-spacing: -0.01em;
}

.hero-body {
  max-width: 680px;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.split-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.8fr);
  gap: 54px;
  align-items: start;
  margin-bottom: 42px;
}

.split-intro:last-child {
  margin-bottom: 0;
}

.section-body,
.split-intro p,
.page-hero p,
.site-footer p,
.coming-soon {
  color: var(--muted);
}

.form-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0) 38%),
    var(--surface);
  box-shadow: var(--shadow);
}

.learn-summary-card,
.watch-card,
.channel-card,
.upload-panel {
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.learn-summary-card::before,
.watch-card::before,
.channel-card::before,
.upload-panel::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 0%), rgba(139, 216, 166, 0.2), rgba(139, 216, 166, 0) 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 40%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.learn-summary-card > *,
.watch-card > *,
.channel-card > *,
.upload-panel > * {
  position: relative;
  z-index: 1;
}

.learn-summary-card:hover,
.watch-card:hover,
.channel-card:hover,
.upload-panel:hover {
  transform: translateY(-6px);
  border-color: rgba(139, 216, 166, 0.34);
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.26), 0 0 44px rgba(139, 216, 166, 0.08);
}

.learn-summary-card:hover::before,
.watch-card:hover::before,
.channel-card:hover::before,
.upload-panel:hover::before {
  opacity: 1;
}

.card-icon {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 22px;
  place-items: center;
  color: var(--mint);
  background: rgba(139, 216, 166, 0.1);
  border: 1px solid rgba(139, 216, 166, 0.22);
  border-radius: var(--radius-lg);
  transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.card-icon svg {
  width: 20px;
  height: 20px;
}

.watch-card:hover .card-icon {
  color: var(--primary-foreground);
  background: linear-gradient(135deg, var(--amber), var(--cyan));
  border-color: transparent;
  transform: translateY(-2px) rotate(-4deg);
}

.enroll-hero .eyebrow,
#early-bird .eyebrow {
  color: var(--primary);
}

.button.is-disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.68;
  transform: none;
}

/*
  Single centred column, shared by the homepage closer and the contact
  page -- both are a Telegram CTA and nothing else.
*/
.join-cta {
  display: grid;
  justify-items: center;
  max-width: 720px;
  text-align: center;
}

.join-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  place-items: center;
  color: var(--mint);
  background: rgba(139, 216, 166, 0.1);
  border: 1px solid rgba(139, 216, 166, 0.22);
  border-radius: var(--radius-lg);
}

.join-icon svg {
  width: 26px;
  height: 26px;
}

.join-cta h1,
.join-cta h2 {
  max-width: 620px;
}

.join-body {
  max-width: 580px;
  color: var(--muted);
  font-size: 1.08rem;
}

.join-button {
  margin-top: 30px;
}

.form-panel {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.form-panel label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
}

.form-panel input,
.form-panel textarea {
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 13px 14px;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.form-panel input:focus,
.form-panel textarea:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14);
}

.form-panel button {
  width: 100%;
}

.form-success,
.form-error {
  margin: 0;
  padding: 13px 14px;
  border-radius: var(--radius);
  font-weight: 700;
}

.form-success {
  color: var(--green);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.24);
}

.form-error {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}

/* On confirmation, collapse the fields so only the success note remains. */
.form-panel.is-submitted label,
.form-panel.is-submitted > button {
  display: none;
}

.form-panel.is-submitted .form-success {
  padding: 20px;
  font-size: 1.02rem;
}

/* Enroll page
   ------------------------------------------------------------ */

.enroll-intro {
  text-align: center;
}

.enroll-intro h1 {
  margin-inline: auto;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
}

.enroll-intro p {
  max-width: 620px;
  margin-inline: auto;
}

.enroll-section {
  padding-top: 8px;
}

.enroll-shell {
  display: grid;
  gap: 30px;
  width: min(100% - 40px, 560px);
  margin-inline: auto;
}

.enroll-shell .form-panel {
  gap: 20px;
  padding: 30px;
}

.enroll-shell .form-panel input {
  min-height: 52px;
  font-size: 1.02rem;
}

.appearance-control {
  display: inline-flex;
  align-items: center;
}

.appearance-control select {
  min-height: 36px;
  padding: 0 30px 0 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: 600 0.82rem var(--font-body);
  cursor: pointer;
}

.appearance-control select:hover,
.appearance-control select:focus-visible {
  border-color: var(--mint);
}

.learn-summary-section {
  padding-top: 32px;
}

.learn-summary-grid,
.watch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.learn-summary-card,
.watch-card,
.primer-panel,
.channel-card,
.upload-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 34%),
    rgba(23, 27, 25, 0.78);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.learn-summary-card {
  min-height: 230px;
  padding: 26px;
}

.learn-summary-card span {
  display: block;
  margin-bottom: 18px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.learn-summary-card p,
.watch-card p,
.primer-panel p,
.channel-card p,
.channel-copy p,
.upload-panel p,
.upload-copy p {
  color: var(--muted);
}

.primer-shell {
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.primer-tabs {
  display: grid;
  gap: 10px;
  align-content: start;
}

.primer-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 16px;
  overflow: hidden;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: 700;
  text-align: left;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.primer-tab::after {
  position: absolute;
  inset: auto 12px 8px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--cyan), var(--amber));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.primer-tab span {
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.primer-tab:hover,
.primer-tab:focus-visible,
.primer-tab.is-active {
  color: var(--text);
  background: rgba(139, 216, 166, 0.1);
  border-color: rgba(139, 216, 166, 0.34);
}

.primer-tab.is-active::after {
  transform: scaleX(1);
}

.primer-tab:hover,
.primer-tab:focus-visible {
  transform: translateY(-2px);
}

.primer-panel {
  min-height: 476px;
  padding: 34px;
}

.primer-panel.is-active {
  animation: panel-enter 320ms ease both;
}

.primer-panel h3 {
  max-width: 820px;
  margin-bottom: 18px;
  font-size: clamp(1.8rem, 3.6vw, 3.35rem);
  line-height: 1;
}

.primer-panel > p:not(.eyebrow) {
  max-width: 860px;
  font-size: 1.08rem;
}

.primer-panel ul {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.primer-panel li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--text);
}

.primer-panel li svg {
  width: 22px;
  height: 22px;
  color: var(--green);
}

.contract-watch-section {
  background: linear-gradient(
    180deg,
    rgba(23, 27, 25, 0) 0%,
    rgba(23, 27, 25, 0.5) 30%,
    rgba(23, 27, 25, 0) 92%
  );
}

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

.watch-card {
  min-height: 270px;
  padding: 24px;
}

.channel-section {
  padding-top: 80px;
  padding-bottom: 72px;
}

.channel-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(420px, 0.88fr);
  gap: 46px;
  align-items: start;
}

.channel-copy h2 {
  max-width: 680px;
}

.channel-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.channel-card {
  display: grid;
  gap: 16px;
  min-height: 292px;
  padding: 24px;
}

.channel-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--cyan);
  background: rgba(139, 216, 166, 0.1);
  border: 1px solid rgba(139, 216, 166, 0.2);
  border-radius: var(--radius-lg);
}

.channel-icon svg {
  width: 28px;
  height: 28px;
}

.channel-action {
  align-self: end;
  width: 100%;
}

.channel-action.is-disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
}


.upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.62fr);
  gap: 54px;
  align-items: start;
}

.upload-copy h2 {
  max-width: 760px;
}

.upload-panel {
  display: grid;
  gap: 16px;
  padding: 28px;
}

.upload-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: var(--mint);
  background: rgba(139, 216, 166, 0.1);
  border: 1px solid rgba(139, 216, 166, 0.22);
  border-radius: var(--radius-lg);
  transition: transform 220ms ease, color 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

.upload-icon svg {
  width: 28px;
  height: 28px;
}

.upload-panel.is-ready {
  border-color: rgba(139, 216, 166, 0.28);
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.26), 0 0 50px rgba(139, 216, 166, 0.08);
}

.upload-panel.is-ready .upload-icon {
  color: var(--primary-foreground);
  background: linear-gradient(135deg, var(--green), var(--cyan));
  border-color: transparent;
  transform: scale(1.05);
}

.upload-panel.is-error {
  border-color: rgba(255, 120, 120, 0.34);
}

.contract-upload-button {
  width: 100%;
  margin-top: 8px;
}

.contract-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-status {
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(16, 19, 18, 0.54);
  font-weight: 700;
}

.upload-status.is-ready {
  color: var(--green);
  border-color: rgba(139, 216, 166, 0.24);
}

.upload-status.is-error {
  color: #ffb4a8;
  border-color: rgba(255, 120, 120, 0.28);
}

.page-hero {
  padding-top: 132px;
  padding-bottom: 68px;
}

.narrow {
  max-width: 820px;
}

.page-hero h1 {
  max-width: 18ch;
  font-size: clamp(2.9rem, 5.6vw, 4.4rem);
}

.page-hero p {
  font-size: 1.12rem;
}

.about-hero .eyebrow {
  color: var(--primary);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 32px;
}

.pillars-list {
  display: grid;
  gap: 20px;
}

.pillar {
  position: relative;
  overflow: hidden;
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(139, 216, 166, 0.055), rgba(139, 216, 166, 0) 34%),
    rgba(23, 27, 25, 0.78);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 216, 166, 0.34);
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.26), 0 0 44px rgba(139, 216, 166, 0.08);
}

.pillar-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 22px;
}

.pillar-index {
  flex: 0 0 auto;
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.pillar-head .eyebrow {
  margin-bottom: 8px;
}

.pillar-head h2 {
  /* ch is relative to the element's own font-size, so the global 22ch cap
     lands around 370px here and broke these into three short lines inside a
     1160px card. */
  max-width: 32ch;
  margin-bottom: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.pillar-body {
  display: grid;
  gap: 16px;
  max-width: 860px;
  padding-left: calc(1rem + 22px);
}

.pillar-body p {
  color: var(--muted);
  font-size: 1.02rem;
}

@media (max-width: 640px) {
  .pillar {
    padding: 22px;
  }

  .pillar-head {
    gap: 14px;
  }

  .pillar-body {
    padding-left: 0;
  }
}

/*
  The About page's closing note. It used to sit below the founder cards and
  carried its own hairline seam to separate itself from them. With the cards
  gone it is the first thing in the section, so that seam would land a hair
  under .about-close-section::after and read as a doubled rule.
*/
.coming-soon {
  margin: 0;
}

/*
  Section seams. Seven hard `border-top: 1px solid #2b312d` rules used to cut
  the page into stripes -- each one a literal black line, which is half of the
  "black to green with visible lines" complaint. This is the peak-bracket
  motif from the hero curve instead: a hairline that fades out at both ends,
  so there is no edge to catch the eye at the viewport boundary.
*/
.primer-section::after,
.channel-section::after,
.pillars-section::after,
.about-close-section::after,
.site-footer::after {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(139, 216, 166, 0) 0%,
    rgba(139, 216, 166, 0.24) 20%,
    rgba(139, 216, 166, 0.24) 80%,
    rgba(139, 216, 166, 0) 100%
  );
}

.site-footer {
  position: relative;
}

.site-footer {
  padding: 44px 0;
  background: var(--footer-surface);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.footer-brand {
  margin-bottom: 16px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  justify-content: flex-end;
  gap: 10px 18px;
}

.footer-links a {
  color: var(--muted);
  font-weight: 700;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text);
}

/*
  The legal row. Separated from the row above by the same fading hairline the
  section seams use -- a flat border-top here would reintroduce exactly the
  hard line the seam motif exists to avoid.
*/
.footer-legal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 32px;
  padding-top: 22px;
  font-size: 0.86rem;
}

.footer-legal::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(139, 216, 166, 0) 0%,
    rgba(139, 216, 166, 0.18) 20%,
    rgba(139, 216, 166, 0.18) 80%,
    rgba(139, 216, 166, 0) 100%
  );
}

.footer-legal p {
  margin: 0;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.site-footer .appearance-control select {
  min-width: 112px;
  min-height: 38px;
}

.footer-legal-links a {
  color: var(--muted);
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--text);
}

/* ==========================================================================
   The interval curve

   The one piece of art on the site, and it is the product thesis drawn
   literally: a bill is one number, a day has a shape. Off-peak draws in
   mint, the peak window in ember. Nothing here is invented -- it is a
   labelled illustrative load profile, and it says so.
   ========================================================================== */

.hero-curve {
  position: relative;
  margin: 0;
  padding: 22px 22px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(139, 216, 166, 0.055), rgba(139, 216, 166, 0) 44%),
    rgba(14, 17, 16, 0.72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.curve-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.curve-legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.curve-key {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 2px;
}

.curve-key-mint {
  background: var(--mint);
}

.curve-key-ember {
  margin-left: 8px;
  background: var(--ember);
}

.hero-curve svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.curve-baseline {
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}

.curve-line {
  fill: none;
  stroke: var(--mint);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.curve-line-peak {
  stroke: var(--ember);
}

.curve-peak-edge {
  stroke: rgba(242, 166, 90, 0.4);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.curve-peak-label {
  fill: var(--ember);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.curve-hour {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  opacity: 0.62;
}

/*
  Draw-on. The stroke carries pathLength="1", so a dasharray of 1 is the
  whole line regardless of its real length and the offset animates 1 -> 0.
  No JS: the existing .reveal IntersectionObserver adds .is-visible, and the
  global prefers-reduced-motion rule collapses the transition to 1ms, so the
  curve simply appears for anyone who asked for less motion.
*/
.is-enhanced .hero-curve .curve-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.32, 0.72, 0.24, 1) 220ms;
}

.is-enhanced .hero-curve.is-visible .curve-line {
  stroke-dashoffset: 0;
}

.curve-readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
}

.curve-readout-item {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  background: rgba(12, 15, 14, 0.92);
}

.curve-readout-item span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.curve-readout-item strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The second readout is the cost half of the pair, so it wears ember. */
.curve-readout-item:last-child strong {
  color: var(--ember);
}

.curve-caption {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* ==========================================================================
   Proof strip -- real mechanics only, no invented metrics
   ========================================================================== */

.proof-strip {
  position: relative;
  padding: 30px 0;
  background: linear-gradient(
    180deg,
    rgba(139, 216, 166, 0) 0%,
    rgba(139, 216, 166, 0.045) 50%,
    rgba(139, 216, 166, 0) 100%
  );
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.proof-item {
  display: grid;
  gap: 5px;
  padding-left: 16px;
  border-left: 1px solid rgba(139, 216, 166, 0.22);
}

.proof-item strong {
  color: var(--mint-lift);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.proof-item span {
  color: var(--muted);
  font-size: 0.88rem;
}

/* ==========================================================================
   How it works -- three steps. The numbering is earned: it is a real
   sequence, not decoration on an unordered list.
   ========================================================================== */

.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 46%),
    rgba(23, 27, 25, 0.7);
  transition: border-color 180ms ease, transform 180ms ease;
}

.step:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 216, 166, 0.3);
}

.step-index {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--mint);
  border: 1px solid rgba(139, 216, 166, 0.3);
  border-radius: 50%;
  background: rgba(139, 216, 166, 0.08);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
}

.step h3 {
  margin-bottom: 8px;
}

.step p {
  margin: 0;
  color: var(--muted);
}

/* ==========================================================================
   Assorted section furniture
   ========================================================================== */

.contract-section {
  padding-top: 0;
}

.contract-shell {
  position: relative;
  overflow: hidden;
  padding: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(146deg, rgba(242, 166, 90, 0.07), rgba(242, 166, 90, 0) 54%),
    rgba(23, 27, 25, 0.72);
}

/* This section is about what a contract costs you, so it wears the cost hue. */
.contract-shell .eyebrow {
  color: var(--ember);
}

.contract-shell .section-body {
  max-width: 62ch;
  margin-bottom: 28px;
  font-size: 1.05rem;
}

.about-cta {
  margin-top: 34px;
}

/* ==========================================================================
   Terms and Privacy

   Reading documents, not marketing pages. The global h2 scale (up to 3rem) is
   built for section headers with one line of text each -- at a dozen headings
   down a page it reads as shouting, so it steps down here. Measure is capped
   at 68ch: the .narrow container is sized for 1.12rem hero copy, which is
   wider than comfortable for a long body of 1rem text.
   ========================================================================== */

.legal-hero h1 {
  margin-bottom: 12px;
}

.legal-effective {
  margin-bottom: 24px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.legal-section-wrap {
  padding-top: 0;
}

.legal-body {
  max-width: 68ch;
}

.legal-section + .legal-section {
  margin-top: 40px;
}

.legal-body h2 {
  max-width: none;
  margin-bottom: 14px;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
}

.legal-body p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.72;
}

.legal-body p:last-child {
  margin-bottom: 0;
}

.legal-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.72;
  list-style: disc;
}

.legal-body li {
  margin-bottom: 8px;
}

.legal-body li::marker {
  color: var(--primary);
}

.how-section .eyebrow,
.learn-hero .eyebrow {
  color: var(--primary);
}

.reveal {
  opacity: 1;
  transform: none;
}

.is-enhanced .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.18, 0.84, 0.32, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.is-enhanced .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes panel-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 920px) {
  .header-shell {
    min-height: 68px;
  }

  .menu-button {
    display: grid;
  }

  .nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 20px;
    left: 20px;
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }

  [data-menu].is-open .nav {
    display: grid;
  }

  .header-actions { display: contents; }

  .nav-link,
  .nav .button {
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
    text-align: center;
    border: 1px solid var(--border);
  }

  .nav-link {
    background: var(--surface-2);
  }

  .hero {
    min-height: auto;
    padding-top: 64px;
    padding-bottom: 48px;
  }

  .hero-grid,
  .split-intro,
  .primer-shell,
  .channel-grid,
  .upload-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .learn-summary-grid,
  .watch-grid,
  .channel-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .primer-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .primer-panel {
    min-height: auto;
  }

  .step-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 28px, var(--max));
  }

  .section {
    padding: 68px 0;
  }

  /* The curve stays on mobile. It is the signature -- the old hero art was
     hidden here, which left phones with a wall of text and no idea. */
  .hero-curve {
    padding: 16px 16px 14px;
  }

  .curve-readout {
    grid-template-columns: 1fr;
  }

  .proof-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contract-shell {
    padding: 26px;
  }

  .step {
    padding: 22px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    height: 34px;
  }

  .brand-wordmark {
    height: 20px;
  }

  .site-header.is-scrolled .brand-mark {
    height: 32px;
  }

  .site-header.is-scrolled .brand-wordmark {
    height: 19px;
  }

  .site-header.is-scrolled .header-shell {
    min-height: 62px;
  }

  h1 {
    font-size: clamp(2.46rem, 11vw, 3.1rem);
  }

  .hero-copy h1 {
    font-size: clamp(2.36rem, 10vw, 2.85rem);
  }

  h2 {
    font-size: clamp(2rem, 10vw, 3.1rem);
  }

  .hero-actions {
    display: grid;
  }

  .button {
    width: 100%;
  }





  .learn-summary-grid,
  .watch-grid,
  .channel-card-grid,
  .footer-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .primer-panel,
  .channel-card,
  .upload-panel {
    padding: 20px;
  }

  .primer-panel li {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
  }

  .primer-tabs {
    grid-template-columns: 1fr;
  }

  .primer-tab {
    min-height: 54px;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Platform-owned Start Audit page. The shell and tokens match the homepage. */
.start-audit-page main {
  min-height: calc(100dvh - 77px);
}

.audit-intake-section {
  display: grid;
  align-items: center;
  min-height: calc(100dvh - 77px);
  padding: 64px 0 84px;
}

.audit-intake-shell {
  width: min(100% - 40px, 720px);
  margin-inline: auto;
}

.audit-intake-heading {
  max-width: 640px;
  margin: 0 auto 30px;
  text-align: center;
}

.audit-intake-heading .eyebrow {
  margin-bottom: 12px;
}

.audit-intake-heading h1 {
  max-width: 15ch;
  margin: 0 auto 18px;
  font-size: clamp(2.45rem, 5vw, 3.9rem);
}

.audit-intake-heading p {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.05rem;
}

.audit-request-form {
  gap: 22px;
  padding: clamp(24px, 5vw, 38px);
}

.audit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.audit-request-form label {
  display: grid;
  gap: 8px;
}

.audit-request-form input {
  min-height: 52px;
  margin: 0;
  font-size: 1rem;
}

.audit-consent {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.55;
}

.audit-consent input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
  accent-color: var(--mint);
}

.audit-consent a {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.audit-form-feedback {
  margin: 0;
  padding: 13px 14px;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: var(--radius);
  font-weight: 650;
}

.audit-request-form[aria-busy="true"] {
  opacity: 0.84;
}

.audit-request-form[hidden],
.audit-intake-heading[hidden] {
  display: none;
}

.audit-success-panel {
  padding: clamp(34px, 7vw, 58px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-rgb), 0) 48%),
    var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.34);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.audit-success-panel[hidden] {
  display: none;
}

.audit-success-panel h1 {
  max-width: 14ch;
  margin: 0 auto 18px;
  font-size: clamp(2.35rem, 5vw, 3.65rem);
}

.audit-success-copy {
  max-width: 57ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.08rem;
}

.audit-success-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 34px 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.audit-success-path li {
  padding: 0 22px;
}

.audit-success-path li + li {
  border-left: 1px solid var(--border);
}

.audit-success-path strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.98rem;
}

.audit-success-path span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.audit-success-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 640px) {
  .audit-intake-section {
    align-items: start;
    min-height: auto;
    padding: 48px 0 64px;
  }

  .audit-intake-shell {
    width: min(100% - 28px, 720px);
  }

  .audit-form-grid,
  .audit-success-path {
    grid-template-columns: 1fr;
  }

  .audit-success-path {
    gap: 18px;
  }

  .audit-success-path li {
    padding: 0;
  }

  .audit-success-path li + li {
    padding-top: 18px;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .audit-success-actions {
    display: grid;
  }
}

/* Audit landing page. Campaign pages retain their independent stylesheets. */
:focus-visible {
  outline: 2px solid var(--mint-lift);
  outline-offset: 5px;
}
#main:focus { outline: none; }
.landing-page h1,
.landing-page h2,
.landing-page h3 { font-weight: 700; }
.landing-page h2 {
  font-size: clamp(2rem, 3.5vw, 3.1rem);
  letter-spacing: -0.045em;
  line-height: 1.08;
}
.landing-page h3 { font-size: 1.22rem; line-height: 1.25; letter-spacing: -0.025em; }
.landing-page .title-line { display: block; text-wrap: balance; }
.landing-page .section:not(.audit-hero):not(.manifesto-section) { padding-block: 80px; }
.landing-page .eyebrow { font-size: .68rem; letter-spacing: .11em; }
.audit-hero { padding: 88px 0 0; }
.audit-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 70px; align-items: center; }
.audit-hero h1 {
  max-width: 18ch;
  font-size: clamp(3rem, 4.5vw, 4.05rem);
  line-height: 1.025;
  letter-spacing: -.055em;
  margin-bottom: 28px;
}
.audit-hero h1 span { display: block; }
.mint-text { color: var(--mint-lift); }
.audit-intro { max-width: 49ch; color: #b9c2bd; font-size: 1.05rem; line-height: 1.8; margin-bottom: 28px; }
.audit-hero-actions { display: flex; align-items: flex-start; gap: 12px; }
.audit-action { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; }
.audit-action .audit-unavailable {
  background: #547562;
  color: #f4f1ea;
  border: 1px solid #729a82;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
  border-radius: 6px;
}
.audit-unavailable::after { display: none; }
.audit-status { font-size: .7rem; color: var(--muted); line-height: 1.3; }
.header-actions { display: flex; align-items: flex-start; gap: 10px; margin-left: 12px; }
.nav .audit-action { gap: 4px; }
.header-actions .button { min-height: 36px; font-size: .85rem; white-space: nowrap; border-radius: 6px; }
.header-actions .login-unavailable { cursor: not-allowed; opacity: 1; }
@media (max-width: 920px) {
  .header-actions { display: contents; }
  .header-actions > :only-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .nav {
    right: 12px;
    left: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.login-unavailable::after { display: none; }
.nav .audit-action .button { min-height: 36px; font-size: .85rem; }
.nav .audit-status { font-size: .62rem; }
.audit-hero-actions .button { border-radius: 6px; min-height: 50px; }
.audit-visual { position: relative; min-width: 0; }
.audit-visual::before { content: ""; pointer-events: none; position: absolute; inset: -60px 0; z-index: -1; background: radial-gradient(ellipse at 60% 25%, #8bd8a618, transparent 65%), radial-gradient(ellipse at 90% 80%, #f2a65a12, transparent 60%); }
.visual-label { display: block; margin-bottom: 16px; font-family: var(--font-mono); font-size: .65rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.audit-summary { margin: 0; border: 1px solid #405447; border-radius: 10px; background: linear-gradient(145deg, #20362a 0%, #17221c 43%, #151b17 100%); box-shadow: 0 30px 70px #0005; overflow: hidden; }
.audit-summary-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 25px; border-bottom: 1px solid #ffffff12; font-size: .72rem; color: #c2cfc6; }
.audit-summary-top > span:first-child { display: flex; align-items: center; gap: 8px; }
.audit-summary-top svg { width: 17px; height: 17px; color: var(--mint); }
.audit-tag { border: 1px solid #52604b; padding: 4px 8px; border-radius: 4px; color: #e7bd8e; font-size: .64rem; }
.audit-summary-body { padding: 32px; }
.audit-summary-title { color: #c2cfc6; font-size: .85rem; margin-bottom: 20px; }
.audit-amount { display: block; color: var(--mint-lift); font-family: var(--font-display); font-size: clamp(4rem, 6vw, 5.6rem); font-weight: 700; letter-spacing: -.065em; line-height: 1; }
.audit-amount-label { margin: 8px 0 30px; font-size: .9rem; color: #d0d9d3; }
.audit-customer-context { margin: 0; font-size: .8rem; color: #b9c2bd; }
.audit-summary-note { padding: 17px 32px; margin: 0; border-top: 1px solid #ffffff10; font-size: .66rem; line-height: 1.7; color: #acb8b0; background: #00000013; }
.mission-story { margin-top: 32px; padding: 64px 0; border-block: 1px solid var(--border); background: #ffffff02; }
.mission-content { max-width: 960px; }
.mission-content h2 { max-width: 24ch; margin: 16px 0 30px; font-size: clamp(2rem, 3.5vw, 3.1rem); text-wrap: balance; }
.mission-body { max-width: 75ch; color: #b9c2bd; font-size: 1rem; line-height: 1.85; }
.mission-body p { margin-bottom: 18px; }
.mission-body p:last-child { margin-bottom: 0; }
.mission-attribution { margin: 28px 0 0; color: var(--mint); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.story-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; padding-block: 12px; color: var(--mint-lift); font-size: .94rem; font-weight: 600; list-style: none; cursor: pointer; }
.story-disclosure > summary::-webkit-details-marker { display: none; }
.story-disclosure > summary:hover { color: var(--text); }
.story-disclosure .disclosure-less { display: none; }
.story-disclosure[open] > summary .disclosure-more { display: none; }
.story-disclosure[open] > summary .disclosure-less { display: inline; }
.disclosure-icon { flex-shrink: 0; font-size: 1.4rem; font-weight: 400; line-height: 1; }
.story-disclosure[open] > summary .disclosure-icon { transform: rotate(45deg); }
.manifesto-disclosure > summary { color: var(--ember); }
.manifesto-disclosure[open] > summary { margin-bottom: 16px; }
.mission-disclosure > summary { max-width: 75ch; border-top: 1px solid var(--border); }
.mission-disclosure[open] > summary { margin-bottom: 20px; }
.audit-section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 70px; margin-bottom: 42px; }
.audit-section-heading h2 { margin-bottom: 0; }
.audit-section-heading > p { max-width: 48ch; margin-bottom: 0; color: #b9c2bd; font-size: 1rem; line-height: 1.75; }
.audit-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.audit-steps li { padding: 32px; background: linear-gradient(150deg, #8bd8a608, #8bd8a601); }
.audit-steps li + li { border-left: 1px solid var(--border); }
.audit-step-number { display: block; font-family: var(--font-mono); font-size: .72rem; color: var(--mint); margin-bottom: 32px; }
.audit-steps p, .after-options p, .strategy-pillars p { font-size: 1rem; line-height: 1.75; color: #b9c2bd; margin-bottom: 0; }
.audit-after { background: linear-gradient(125deg, #8bd8a606, #0b0e0d00 65%); border-block: 1px solid var(--border); }
.after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.audit-section-body { max-width: 45ch; font-size: 1rem; color: #b9c2bd; line-height: 1.75; }
.recovery-card { border: 1px solid #3c5142; border-radius: 8px; padding: 28px; margin-top: 32px; background: #8bd8a605; }
.recovery-card h3 { font-size: .85rem; font-weight: 600; }
.recovery-split { display: grid; grid-template-columns: 1fr 1fr; margin-block: 24px; }
.recovery-split > div { display: flex; flex-direction: column; gap: 5px; }
.recovery-split > div + div { border-left: 1px solid #3c5142; padding-left: 28px; }
.recovery-split strong { font-family: var(--font-display); font-size: 3.2rem; letter-spacing: -.06em; line-height: 1; }
.recovery-split > div:first-child strong { color: var(--mint-lift); }
.recovery-split span { font-size: .75rem; color: var(--muted); }
.recovery-card > p { color: #b9c2bd; font-size: .75rem; margin: 0; max-width: 45ch; }
.after-options { align-self: center; }
.after-options article { display: flex; gap: 22px; padding: 28px 0; }
.after-options article + article { border-top: 1px solid var(--border); }
.option-marker { color: var(--ember); font-family: var(--font-mono); font-size: .7rem; padding-top: 5px; }
.strategy-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.strategy-pillars article { border-top: 1px solid var(--border); padding-top: 28px; }
.strategy-icon { color: var(--mint); display: block; margin-bottom: 18px; }
.strategy-icon svg { width: 24px; height: 24px; }
.strategy-note { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .78rem; margin: 36px 0 0; }
.strategy-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--mint); }
.manifesto-section {
  padding-top: 28px;
  background: radial-gradient(ellipse at 50% 45%, rgba(242, 166, 90, 0.055), rgba(242, 166, 90, 0) 68%);
}
.manifesto-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid transparent;
  border-radius: 10px;
  background:
    linear-gradient(135deg, #1d1d19, var(--surface) 42%, #121715) padding-box,
    linear-gradient(135deg, rgba(242, 166, 90, 0.48), rgba(242, 166, 90, 0.08) 42%, rgba(139, 216, 166, 0.1) 70%, rgba(242, 166, 90, 0.3)) border-box;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(242, 166, 90, 0.025);
}
.manifesto-frame::before,
.manifesto-frame::after {
  position: absolute;
  z-index: 2;
  width: 56px;
  height: 56px;
  pointer-events: none;
  content: "";
}
.manifesto-frame::before {
  top: 10px;
  left: 10px;
  border-top: 2px solid rgba(242, 166, 90, 0.42);
  border-left: 2px solid rgba(242, 166, 90, 0.42);
}
.manifesto-frame::after {
  right: 10px;
  bottom: 10px;
  border-right: 2px solid rgba(242, 166, 90, 0.34);
  border-bottom: 2px solid rgba(242, 166, 90, 0.34);
}
.manifesto-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 70px;
  margin-bottom: 50px;
}
.manifesto-heading .eyebrow { color: var(--ember); }
.manifesto-heading h2 { max-width: 13ch; margin-bottom: 0; }
.manifesto-heading > p {
  max-width: 50ch;
  margin: 0;
  color: #d5d0c7;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.55;
}
.manifesto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(242, 166, 90, 0.45);
}
.manifesto-chapter { padding: 36px 38px 0 0; }
.manifesto-chapter + .manifesto-chapter {
  padding-right: 0;
  padding-left: 38px;
  border-left: 1px solid rgba(242, 166, 90, 0.28);
}
.manifesto-index {
  display: block;
  margin-bottom: 18px;
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}
.manifesto-chapter h3 { max-width: 22ch; margin-bottom: 22px; }
.manifesto-copy p {
  margin: 0 0 18px;
  color: #bfc5c0;
  font-size: 0.91rem;
  line-height: 1.85;
}
.manifesto-copy p:last-child { margin-bottom: 0; }
.manifesto-chapter blockquote {
  position: relative;
  margin: 0 0 26px;
  padding: 21px 22px 19px;
  border: 1px solid var(--ember);
  background: rgba(242, 166, 90, 0.07);
}
.manifesto-chapter blockquote::before {
  position: absolute;
  top: -16px;
  left: 15px;
  padding: 0 7px;
  color: var(--ember);
  background: var(--surface);
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 2rem;
  line-height: 1;
}
.manifesto-chapter blockquote p {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: -0.02em;
}
.manifesto-chapter blockquote footer {
  margin-top: 12px;
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.energy-services { border-top: 1px solid var(--border); background: linear-gradient(145deg, #f2a65a05, transparent 54%); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.service-grid article { display: flex; flex-direction: column; padding: 30px; background: linear-gradient(150deg, #ffffff02, transparent); }
.service-grid article + article { border-left: 1px solid var(--border); }
.service-number { display: block; margin-bottom: 24px; color: var(--ember); font-family: var(--font-mono); font-size: .7rem; }
.service-grid h3 { text-wrap: balance; }
.service-grid p { margin: 0; color: #b9c2bd; font-size: 1rem; line-height: 1.75; }
.service-grid .service-technical { margin-top: auto; padding-top: 24px; color: var(--ember); font-size: .78rem; line-height: 1.6; }
.service-note { margin: 24px 0 0; color: var(--muted); font-size: .75rem; }
.audit-intelligence .audit-section-heading { align-items: center; margin-bottom: 0; }
.audit-faq { border-top: 1px solid var(--border); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 23px 0; font-size: .94rem; font-weight: 600; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-plus { color: var(--mint); font-size: 1.25rem; font-weight: 400; transition: transform 180ms ease; }
.faq-list details[open] .faq-plus { transform: rotate(45deg); }
.faq-list details[open] summary { color: var(--mint-lift); }
.faq-list details > p { font-size: 1rem; color: #b9c2bd; max-width: 60ch; padding-right: 24px; margin: 0 0 24px; line-height: 1.75; }
.audit-closing { text-align: center; border-top: 1px solid #3a4b3e; background: radial-gradient(ellipse at 50% 100%, #8bd8a616, transparent 65%); }
.audit-closing h2 { max-width: 24ch; margin-inline: auto; }
.audit-closing p:not(.eyebrow) { color: #b9c2bd; font-size: .95rem; max-width: 49ch; margin: 0 auto 26px; }
.landing-page .site-footer { background: var(--footer-surface); }
@media (max-width: 1050px) {
  .audit-hero-grid { gap: 36px; }
  .audit-hero h1 { font-size: 3.4rem; }
  .after-grid, .audit-section-heading, .manifesto-heading, .faq-grid { gap: 45px; }
}
@media (max-width: 760px) {
  .landing-page .section:not(.audit-hero):not(.manifesto-section) { padding-block: 56px; }
  .landing-page main > section:not(.audit-hero):not(.manifesto-section) > .container { width: calc(100% - 40px); }
  .audit-hero { padding-top: 48px; }
  .audit-hero-grid, .after-grid, .audit-section-heading, .manifesto-heading, .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .audit-hero h1 { font-size: clamp(2.6rem, 8vw, 3.8rem); max-width: 19ch; }
  .audit-visual { max-width: 510px; width: 100%; margin-inline: auto; }
  .audit-intro { max-width: 56ch; }
  .audit-steps, .strategy-pillars { grid-template-columns: 1fr; }
  .audit-steps li + li { border-left: 0; border-top: 1px solid var(--border); }
  .audit-steps li { padding: 26px; }
  .audit-step-number { margin-bottom: 16px; }
  .mission-story { padding: 52px 0; }
  .audit-section-heading { margin-bottom: 28px; }
  .audit-section-heading > p { max-width: 60ch; }
  .nav .audit-action { margin: 0; }
  .strategy-pillars { gap: 28px; }
  .manifesto-section { padding-top: 10px; }
  .manifesto-heading { margin-bottom: 36px; }
  .manifesto-grid { grid-template-columns: 1fr; }
  .manifesto-chapter { padding: 30px 0 0; }
  .manifesto-chapter + .manifesto-chapter {
    margin-top: 32px;
    padding: 32px 0 0;
    border-top: 1px solid rgba(242, 166, 90, 0.28);
    border-left: 0;
  }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article + article { border-left: 0; border-top: 1px solid var(--border); }
  .service-number { margin-bottom: 20px; }
}
@media (max-width: 420px) {
  .audit-hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .audit-hero-actions .button { padding-inline: 10px; font-size: .83rem; }
  .audit-hero-actions .button svg { width: 16px; }
  .audit-summary-top { padding: 16px 20px; gap: 8px; }
  .audit-summary-body { padding: 26px; }
  .audit-summary-note { padding: 16px 26px; }
  .manifesto-frame { padding: 30px 24px; }
  .manifesto-chapter blockquote { padding: 20px 18px 18px; }
}

/* Theme parity and one-accent lock for the audit landing page. */
.audit-intro,
.audit-section-heading > p,
.audit-steps p,
.after-options p,
.strategy-pillars p,
.audit-section-body,
.recovery-card > p,
.mission-body,
.service-grid p,
.faq-list details > p,
.audit-closing p:not(.eyebrow) {
  color: var(--muted);
}

.audit-visual::before {
  background: radial-gradient(ellipse at 60% 25%, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0) 66%);
}

.audit-summary {
  border-color: color-mix(in srgb, var(--mint) 38%, var(--border));
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0) 55%), var(--surface);
  box-shadow: var(--shadow);
}

.audit-summary-top,
.audit-summary-note {
  border-color: var(--border);
}

.audit-summary-top,
.audit-summary-title,
.audit-amount-label,
.audit-customer-context,
.audit-summary-note {
  color: var(--muted);
}

.audit-tag {
  color: var(--mint);
  border-color: color-mix(in srgb, var(--mint) 34%, var(--border));
}

.audit-summary-note {
  background: var(--surface-2);
}

.mission-story,
.audit-after,
.energy-services,
.audit-closing {
  background: rgba(var(--accent-rgb), 0.025);
}

.audit-closing {
  border-color: var(--border);
  background: radial-gradient(ellipse at 50% 100%, rgba(var(--accent-rgb), 0.11), rgba(var(--accent-rgb), 0) 68%);
}

.recovery-card {
  border-color: color-mix(in srgb, var(--mint) 34%, var(--border));
  background: rgba(var(--accent-rgb), 0.045);
}

.recovery-split > div + div {
  border-color: var(--border);
}

.manifesto-section {
  background: radial-gradient(ellipse at 50% 45%, rgba(var(--accent-rgb), 0.055), rgba(var(--accent-rgb), 0) 68%);
}

.manifesto-frame {
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb), 0.07), rgba(var(--accent-rgb), 0) 48%) padding-box,
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.52), rgba(var(--accent-rgb), 0.08)) border-box,
    var(--surface) padding-box;
  box-shadow: var(--shadow);
}

.manifesto-frame::before,
.manifesto-frame::after,
.manifesto-grid,
.manifesto-chapter + .manifesto-chapter {
  border-color: rgba(var(--accent-rgb), 0.34);
}

.manifesto-heading > p,
.manifesto-copy p {
  color: var(--muted);
}

.manifesto-chapter blockquote {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: var(--mint);
}

.service-grid article {
  background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.035), rgba(var(--accent-rgb), 0));
}