/* THE ONE STYLESHEET of the public site (web task W5): one request per page, because the site sits behind a
   per-IP request throttle and a conference crowd shares one IP. Three parts, in order:
   1. the self-hosted fonts' @font-face rules;
   2. the design tokens, a BYTE COPY of the web app's web/app/src/design/tokens.css (W1), between the two
      marker comments below (tests/test_site_pages.py checks the copy);
   3. the site's own rules. */

/* Self-hosted fonts of the public site (web task W5). The same seven files, byte for byte, as the web app's
   (web task W1, web/app/src/design/fonts.css and fonts.ts): the Latin subset, woff2 only, from the exactly
   pinned Fontsource packages @fontsource/manrope@5.3.0, @fontsource/newsreader@5.3.0 and
   @fontsource/jetbrains-mono@5.3.0 (SIL Open Font License 1.1; the licence of each family is served beside
   the files as fonts/OFL-*.txt). nginx serves `font-src 'self'`, so nothing is fetched from another origin.
   tests/test_site_pages.py checks each file's SHA256 against the web app's pinned manifest. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/manrope-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/manrope-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/manrope-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/manrope-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/newsreader-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

/* BEGIN tokens.css (byte copy of web/app/src/design/tokens.css) */
/* Alektra design tokens. All variables are prefixed --alk- to avoid clashing with Tailwind. Generated from packages/tokens/src. Do not edit by hand. */
:root{
  --alk-color-ink-900: #1C1B19;
  --alk-color-ink-800: #2B2A27;
  --alk-color-ink-700: #3A3935;
  --alk-color-ink-600: #46443F;
  --alk-color-ink-500: #5C5953;
  --alk-color-ink-450: #66635C;
  --alk-color-ink-400: #6B6862;
  --alk-color-ink-300: #A29E96;
  --alk-color-ink-250: #ADA9A1;
  --alk-color-ink-200: #C9C6BF;
  --alk-color-ink-150: #D6D3CC;
  --alk-color-ink-100: #E7E5DF;
  --alk-color-ink-75: #E9E7E1;
  --alk-color-ink-50: #EFEDE8;
  --alk-color-ink-25: #F1EFEA;
  --alk-color-ink-10: #F6F5F2;
  --alk-color-ink-0: #FFFFFF;
  --alk-color-red-600: #C00000;
  --alk-color-red-50: #FFF4F4;
  --alk-color-amber-700: #A34A00;
  --alk-color-amber-500: #F29B26;
  --alk-color-amber-400: #F5AB45;
  --alk-color-amber-100: #FFF1DE;
  --alk-color-amber-50: #FFF8EF;
  --alk-color-bg-default: var(--alk-color-ink-0);
  --alk-color-bg-subtle: var(--alk-color-ink-10);
  --alk-color-bg-inverse: var(--alk-color-ink-900);
  --alk-color-surface-default: var(--alk-color-ink-0);
  --alk-color-surface-muted: var(--alk-color-ink-10);
  --alk-color-surface-inverse: var(--alk-color-ink-800);
  --alk-color-text-primary: var(--alk-color-ink-900);
  --alk-color-text-secondary: var(--alk-color-ink-600);
  --alk-color-text-tertiary: var(--alk-color-ink-450);
  --alk-color-text-inverse: var(--alk-color-ink-10);
  --alk-color-text-inverse-muted: var(--alk-color-ink-300);
  --alk-color-border-default: var(--alk-color-ink-100);
  --alk-color-border-strong: var(--alk-color-ink-150);
  --alk-color-border-row: var(--alk-color-ink-50);
  --alk-color-brand-default: var(--alk-color-red-600);
  --alk-color-brand-tint: var(--alk-color-red-50);
  --alk-color-exception-fg: var(--alk-color-amber-700);
  --alk-color-exception-fg-on-dark: var(--alk-color-amber-400);
  --alk-color-exception-mark: var(--alk-color-amber-500);
  --alk-color-exception-bg: var(--alk-color-amber-100);
  --alk-color-exception-row: var(--alk-color-amber-50);
  --alk-color-heat-bg: var(--alk-color-ink-900);
  --alk-color-heat-cell: var(--alk-color-ink-700);
  --alk-color-heat-hot: var(--alk-color-amber-500);
  --alk-color-heat-axis: var(--alk-color-ink-300);
  --alk-color-action-primary-bg: var(--alk-color-ink-900);
  --alk-color-action-primary-fg: var(--alk-color-ink-0);
  --alk-color-action-brand-bg: var(--alk-color-red-600);
  --alk-color-action-brand-fg: var(--alk-color-ink-0);
  --alk-font-sans: Manrope, system-ui, sans-serif;
  --alk-font-serif: Newsreader, Georgia, serif;
  --alk-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --alk-font-app-serif: 'Source Serif 4', Georgia, serif;
  --alk-font-app-legible: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --alk-space-0: 0px;
  --alk-space-1: 4px;
  --alk-space-2: 8px;
  --alk-space-3: 12px;
  --alk-space-4: 16px;
  --alk-space-5: 20px;
  --alk-space-6: 24px;
  --alk-space-7: 28px;
  --alk-space-8: 32px;
  --alk-space-10: 40px;
  --alk-space-12: 48px;
  --alk-space-14: 56px;
  --alk-space-16: 64px;
  --alk-space-20: 80px;
  --alk-space-24: 96px;
  --alk-space-30: 120px;
  --alk-space-40: 160px;
  --alk-radius-xs: 4px;
  --alk-radius-sm: 8px;
  --alk-radius-md: 12px;
  --alk-radius-lg: 18px;
  --alk-radius-xl: 22px;
  --alk-radius-2xl: 24px;
  --alk-radius-3xl: 32px;
  --alk-radius-pill: 980px;
  --alk-shadow-hairline: 0 1px 3px rgba(28,27,25,.10);
  --alk-shadow-card: 0 20px 50px rgba(28,27,25,.07);
  --alk-shadow-doc: 0 30px 80px rgba(28,27,25,.08);
  --alk-shadow-popover: 0 24px 60px rgba(28,27,25,.18);
  --alk-duration-instant: 100ms;
  --alk-duration-fast: 150ms;
  --alk-duration-base: 250ms;
  --alk-duration-slow: 450ms;
  --alk-duration-draw: 1800ms;
  --alk-duration-ambient: 90s;
  --alk-ease-standard: cubic-bezier(.2,.7,.2,1);
  --alk-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --alk-ease-exit: cubic-bezier(.4,0,1,1);
  --alk-stagger: 40ms;
  --alk-layout-content: 1120px;
  --alk-layout-wide: 1400px;
  --alk-layout-doc: 900px;
  --alk-nav-height: 52px;
  --alk-app-sidebar: 260px;
}

[data-app-theme="light"], .app-root{
  --alk-app-bg: #F6F5F2;
  --alk-app-side: rgba(255,255,255,0.75);
  --alk-app-card: #FFFFFF;
  --alk-app-line: #E7E5DF;
  --alk-app-row: #EFEDE8;
  --alk-app-tx: #1C1B19;
  --alk-app-tx2: #3A3935;
  --alk-app-tx3: #5C5953;
  --alk-app-pill: #E9E7E1;
  --alk-app-heat: #1C1B19;
  --alk-app-cell: #3A3935;
  --alk-app-heat-axis: #A29E96;
  --alk-app-ex-bg: #FFF1DE;
  --alk-app-ex-row: #FFF8EF;
  --alk-app-ex: #A34A00;
  --alk-app-hot: #F29B26;
  --alk-app-primary: #1C1B19;
  --alk-app-on-primary: #FFFFFF;
  --alk-app-inset: #F6F5F2;
  --alk-app-brand: #C00000;
}
[data-app-theme="warm"]{
  --alk-app-bg: #F3EEE4;
  --alk-app-side: rgba(250,246,238,0.85);
  --alk-app-card: #FFFDF8;
  --alk-app-line: #E2D9C8;
  --alk-app-row: #EDE5D6;
  --alk-app-tx: #26221E;
  --alk-app-tx2: #433C35;
  --alk-app-tx3: #5F564C;
  --alk-app-pill: #E7DFD0;
  --alk-app-heat: #2A2520;
  --alk-app-cell: #4A423A;
  --alk-app-heat-axis: #A29E96;
  --alk-app-ex-bg: #F9E6CB;
  --alk-app-ex-row: #FAF0E0;
  --alk-app-ex: #934200;
  --alk-app-hot: #F29B26;
  --alk-app-primary: #26221E;
  --alk-app-on-primary: #FFFFFF;
  --alk-app-inset: #F3EEE4;
  --alk-app-brand: #C00000;
}
[data-app-theme="dark"]{
  --alk-app-bg: #151412;
  --alk-app-side: rgba(28,28,30,0.85);
  --alk-app-card: #1F1E1B;
  --alk-app-line: #2F2E2A;
  --alk-app-row: #292825;
  --alk-app-tx: #F6F5F2;
  --alk-app-tx2: #D3D0C9;
  --alk-app-tx3: #ADA9A1;
  --alk-app-pill: #2B2A27;
  --alk-app-heat: #0C0B0A;
  --alk-app-cell: #363531;
  --alk-app-heat-axis: #A29E96;
  --alk-app-ex-bg: rgba(242,155,38,0.18);
  --alk-app-ex-row: rgba(242,155,38,0.08);
  --alk-app-ex: #F5AB45;
  --alk-app-hot: #F29B26;
  --alk-app-primary: #F6F5F2;
  --alk-app-on-primary: #1C1B19;
  --alk-app-inset: #292825;
  --alk-app-brand: #C00000;
}
[data-app-font="serif"]{ --alk-app-font: var(--alk-font-app-serif); }
[data-app-font="legible"]{ --alk-app-font: var(--alk-font-app-legible); }
.app-root{ --alk-app-font: var(--alk-font-sans); --alk-app-fs: 16px; font-family: var(--alk-app-font); font-size: var(--alk-app-fs); }
[data-app-size="large"]{ --alk-app-fs: 18px; }

@media (prefers-reduced-motion: reduce){ :root{ --alk-duration-fast:0ms; --alk-duration-base:0ms; --alk-duration-slow:0ms; --alk-duration-draw:0ms; } }
/* END tokens.css */

/* The public site's own rules (web task W5). Values come from the design tokens above; the components follow docs/web/design/03-site-components.md
   and rebuild the approved prototypes in web/reference/design/prototypes/ without copying their markup or inline
   styles (the site's CSP is `style-src 'self'`, so there is no inline style anywhere).
   Rules kept here: no green; brand red only for the brand (logo plate, primary CTA, one serif accent per page,
   the selected-row marker of the stakeholder lens); amber only for exceptions and for the draft mark (it needs
   review); every number in a table or a record is mono; no number is animated; reduced motion shows the end
   state; no CSS-drawn text (every `content` below is empty). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--alk-color-bg-default);
  color: var(--alk-color-text-primary);
  font-family: var(--alk-font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--alk-color-ink-900);
  outline-offset: 2px;
}

.on-dark :focus-visible {
  outline-color: var(--alk-color-ink-0); /* white on dark: amber is kept for exceptions only (W5 review) */
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: var(--alk-radius-pill);
  background: var(--alk-color-ink-900);
  color: var(--alk-color-ink-0);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 8px;
}

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

.wrap {
  max-width: calc(var(--alk-layout-content) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-wide {
  max-width: calc(var(--alk-layout-wide) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-doc {
  max-width: calc(var(--alk-layout-doc) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.mono,
.num {
  font-family: var(--alk-font-mono);
  font-variant-numeric: tabular-nums;
}

.accent {
  font-family: var(--alk-font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--alk-color-brand-default);
  letter-spacing: -0.02em;
}

.overline {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alk-color-text-tertiary);
}

.lede {
  margin: 0;
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--alk-color-text-secondary);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
}

.h1 {
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.h2 {
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.h3 {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.h4 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.title {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.small {
  font-size: 15px;
  line-height: 1.6;
}

.caption {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--alk-color-text-tertiary);
}

.section {
  padding: 120px 0;
}

.section-tight {
  padding: 80px 0;
}

.bg-subtle {
  background: var(--alk-color-bg-subtle);
}

.center {
  text-align: center;
}

/* ---------------------------------------------------------------------------------------------------------
   The draft mark: on every page until the owner approves the copy (tests/test_site_pages.py requires it). */

.draft {
  background: var(--alk-color-exception-bg);
  color: var(--alk-color-exception-fg);
  border-bottom: 1px solid var(--alk-color-ink-150);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.draft p {
  margin: 0;
  padding: 8px 0;
}

.draft strong {
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------------------------------------------
   Buttons and badges */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--alk-radius-pill);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--alk-duration-slow) var(--alk-ease-spring), background var(--alk-duration-instant) var(--alk-ease-standard);
}

.btn:hover {
  transform: scale(1.03);
}

.btn-brand {
  background: var(--alk-color-action-brand-bg);
  color: var(--alk-color-action-brand-fg);
}

.btn-outline {
  background: var(--alk-color-ink-0);
  color: var(--alk-color-brand-default);
  box-shadow: inset 0 0 0 1.5px var(--alk-color-brand-default);
}

.btn-dark {
  background: var(--alk-color-action-primary-bg);
  color: var(--alk-color-action-primary-fg);
}

.btn-light {
  background: var(--alk-color-ink-0);
  color: var(--alk-color-ink-900);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.center .btn-row,
.btn-row.center {
  justify-content: center;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}

.badge-beta {
  background: var(--alk-color-ink-900);
  color: var(--alk-color-ink-0);
}

.badge-soon {
  background: var(--alk-color-ink-0);
  color: var(--alk-color-text-secondary);
  box-shadow: inset 0 0 0 1px var(--alk-color-ink-150);
}

.on-dark .badge-beta {
  background: var(--alk-color-ink-10);
  color: var(--alk-color-ink-900);
}

.on-dark .badge-soon {
  background: var(--alk-color-ink-800);
  color: var(--alk-color-ink-300);
  box-shadow: inset 0 0 0 1px var(--alk-color-ink-600);
}

.badge-review {
  background: var(--alk-color-exception-bg);
  color: var(--alk-color-exception-fg);
}

/* ---------------------------------------------------------------------------------------------------------
   SiteNav: sticky, 52px; the menus are disclosure widgets (<details>), so they need no script. */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--alk-nav-height);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--alk-color-border-default);
}

@supports (backdrop-filter: blur(12px)) {
  .nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(1.4) blur(12px);
  }
}

.nav-in {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  width: 27px;
  height: 24px;
}

.menus {
  display: flex;
  align-items: stretch;
  gap: 28px;
}

.menu {
  display: flex;
  align-items: stretch;
}

.menu > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: var(--alk-color-text-secondary);
  cursor: pointer;
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu > summary:hover,
.menu[open] > summary {
  color: var(--alk-color-text-primary);
}

.chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--alk-duration-base) var(--alk-ease-standard);
}

.menu[open] .chev {
  transform: translateY(1px) rotate(225deg);
}

.menu-link {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--alk-color-text-secondary);
  text-decoration: none;
}

.menu-link:hover {
  color: var(--alk-color-text-primary);
}

.panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--alk-color-ink-0);
  border-bottom: 1px solid var(--alk-color-border-default);
  box-shadow: 0 0 0 100vmax rgba(28, 27, 25, 0.28);
  clip-path: inset(0 0 -100vh 0);
}

.panel-in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-top: 36px;
  padding-bottom: 44px;
  animation: panel-in var(--alk-duration-slow) var(--alk-ease-standard) both;
}

.panel-in.two {
  grid-template-columns: repeat(2, minmax(0, 360px));
}

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

.mh {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--alk-color-text-tertiary);
}

.mlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 -12px;
  padding: 10px 12px;
  border-radius: var(--alk-radius-md);
  text-decoration: none;
}

.mi:hover {
  background: var(--alk-color-bg-subtle);
}

.mt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.md {
  font-size: 13px;
  color: var(--alk-color-text-secondary);
}

.sheet-menu {
  display: none;
}

@media (max-width: 899px) {
  .menus {
    display: none;
  }

  .sheet-menu {
    display: flex;
  }

  .sheet-menu > summary {
    padding: 0 4px;
    font-size: 15px;
  }

  .sheet {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(100vh - var(--alk-nav-height));
    overflow-y: auto;
    background: var(--alk-color-ink-0);
    padding: 8px 20px 40px;
  }

  .sheet details {
    border-bottom: 1px solid var(--alk-color-border-default);
  }

  .sheet summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  .sheet summary::-webkit-details-marker {
    display: none;
  }

  .sheet .mlist {
    padding-bottom: 12px;
  }

  .sheet .mi {
    margin: 0;
    padding: 10px 0;
  }

  .sheet .mt {
    font-size: 17px;
  }
}

/* ---------------------------------------------------------------------------------------------------------
   HeroRays */

.hero {
  position: relative;
  overflow: hidden;
  padding: 128px 0 120px;
  text-align: center;
}

.rays {
  position: absolute;
  left: 50%;
  top: 164px;
  width: 3200px;
  height: 3200px;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.rays-spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: spin var(--alk-duration-ambient) linear infinite;
}

.rays line {
  stroke: var(--alk-color-ink-900);
  stroke-opacity: 0.07;
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw var(--alk-duration-draw) var(--alk-ease-standard) forwards;
}

.rays line:nth-child(9n + 1) {
  stroke: var(--alk-color-brand-default);
  stroke-opacity: 0.5;
  stroke-width: 1.4;
}

.rays line:nth-child(2n) {
  stroke-opacity: 0.05;
}

.rays line:nth-child(4n + 2) {
  animation-delay: 0.2s;
}

.rays line:nth-child(4n + 3) {
  animation-delay: 0.4s;
}

.rays line:nth-child(4n) {
  animation-delay: 0.6s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.hero-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  margin: 0 auto 56px;
  border-radius: 50%;
  background: var(--alk-color-ink-0);
}

.hero-disc img {
  width: 80px;
  height: 72px;
}

.hero-copy {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
  padding: 24px 24px 32px;
  border-radius: 48px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0));
}

.display {
  font-size: 92px;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero-copy .lede {
  max-width: 640px;
  margin: 24px auto 36px;
}

/* ---------------------------------------------------------------------------------------------------------
   StakeholderLens: a radiogroup of real radio inputs; the record highlights by :has(), no script. */

.lens-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 56px;
}

.lens-parties {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.party {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 16px 20px;
  border-radius: 16px;
  cursor: pointer;
  transition: background var(--alk-duration-base) var(--alk-ease-standard);
}

.party input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.party-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--alk-color-text-secondary);
}

.party-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alk-color-text-tertiary);
}

.party:hover {
  background: rgba(255, 255, 255, 0.6);
}

.party:has(input:checked) {
  background: var(--alk-color-ink-0);
  box-shadow: var(--alk-shadow-hairline);
}

.party:has(input:checked) .party-name {
  color: var(--alk-color-text-primary);
}

.party:has(input:checked) .party-tag {
  color: var(--alk-color-brand-default);
}

.party:has(input:focus-visible) {
  outline: 2px solid var(--alk-color-ink-900);
  outline-offset: 2px;
}

.record {
  overflow: hidden;
  border-radius: var(--alk-radius-2xl);
  background: var(--alk-color-ink-0);
  box-shadow: var(--alk-shadow-doc);
}

.record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 28px;
}

.record-head .title {
  font-size: 19px;
}

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 28px;
  border-top: 1px solid var(--alk-color-border-row);
  font-size: 16px;
  color: var(--alk-color-text-tertiary);
  transition: color var(--alk-duration-base) var(--alk-ease-standard), background var(--alk-duration-base) var(--alk-ease-standard),
    box-shadow var(--alk-duration-base) var(--alk-ease-standard);
}

.row .num {
  font-size: 14px;
  white-space: nowrap;
}

.lens:has(#lens-owner:checked) .row.r-owner,
.lens:has(#lens-lender:checked) .row.r-lender,
.lens:has(#lens-offtaker:checked) .row.r-offtaker,
.lens:has(#lens-investor:checked) .row.r-investor,
.lens:has(#lens-insurer:checked) .row.r-insurer,
.lens:has(#lens-optim:checked) .row.r-optim {
  color: var(--alk-color-text-primary);
  background: var(--alk-color-brand-tint);
  box-shadow: inset 3px 0 0 var(--alk-color-brand-default);
}

.reads {
  display: none;
  margin-top: 24px;
}

.lens:has(#lens-owner:checked) .reads-owner,
.lens:has(#lens-lender:checked) .reads-lender,
.lens:has(#lens-offtaker:checked) .reads-offtaker,
.lens:has(#lens-investor:checked) .reads-investor,
.lens:has(#lens-insurer:checked) .reads-insurer,
.lens:has(#lens-optim:checked) .reads-optim {
  display: block;
  animation: rise var(--alk-duration-slow) var(--alk-ease-spring) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.reads ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.reads li {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Without :has() support the record shows every row at full strength. */
@supports not selector(:has(*)) {
  .row {
    color: var(--alk-color-text-primary);
  }

  .reads-owner {
    display: block;
  }
}

/* ---------------------------------------------------------------------------------------------------------
   PillarTrio and CapabilityCard */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.pillars .h3 + p {
  margin: 8px 0 0;
  color: var(--alk-color-text-secondary);
}

.pillar-brand {
  color: var(--alk-color-brand-default);
}

.capability {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 420px);
  gap: 48px;
  align-items: center;
  margin-top: 80px;
  padding: 64px;
  border-radius: var(--alk-radius-3xl);
  background: var(--alk-color-bg-subtle);
}

.big-num {
  margin: 0;
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.capability .lede {
  margin-top: 12px;
}

.mini {
  border-radius: var(--alk-radius-xl);
  background: var(--alk-color-ink-0);
  box-shadow: var(--alk-shadow-card);
  padding: 8px 24px 16px;
}

.mini .row {
  color: var(--alk-color-text-primary);
  padding: 14px 0;
}

.mini .row:first-of-type {
  border-top: 0;
}

.matched {
  color: var(--alk-color-text-secondary);
  font-weight: 600;
}

.review {
  color: var(--alk-color-exception-fg);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------------------------------------
   HeatStory: dark section, market switcher of radios, an hour grid drawn from one SVG pattern. */

.heat {
  background: var(--alk-color-heat-bg);
  color: var(--alk-color-text-inverse);
  padding: 120px 0;
}

.heat .h2 {
  color: var(--alk-color-ink-0);
  margin-bottom: 48px;
}

.heat-hot {
  color: var(--alk-color-exception-fg-on-dark);
}

.segbar {
  display: flex;
  justify-content: center;
  margin-bottom: 56px;
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: var(--alk-radius-pill);
  background: var(--alk-color-ink-800);
}

.seg label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: var(--alk-radius-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--alk-color-ink-150);
  cursor: pointer;
  transition: background var(--alk-duration-base) var(--alk-ease-standard), color var(--alk-duration-base) var(--alk-ease-standard);
}

.seg input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.seg label:has(input:checked) {
  background: var(--alk-color-ink-10);
  color: var(--alk-color-ink-900);
}

.seg label:has(input:checked) .badge-soon {
  background: var(--alk-color-ink-0);
  color: var(--alk-color-text-secondary);
}

.seg label:has(input:focus-visible) {
  outline: 2px solid var(--alk-color-ink-0);
  outline-offset: 2px;
}

.mpanel {
  display: none;
}

.heatstory:has(#m-ercot:checked) .mp-ercot,
.heatstory:has(#m-pjm:checked) .mp-pjm,
.heatstory:has(#m-caiso:checked) .mp-caiso,
.heatstory:has(#m-miso:checked) .mp-miso {
  display: block;
}

@supports not selector(:has(*)) {
  .mp-ercot {
    display: block;
  }
}

.grid-year,
.grid-weeks {
  width: 100%;
  height: auto;
}

.grid-weeks {
  display: none;
}

.cell-matched {
  fill: var(--alk-color-heat-cell);
}

.cell-hot {
  fill: var(--alk-color-heat-hot);
  animation: hot-in var(--alk-duration-slow) var(--alk-ease-standard) 1.2s both;
}

.month {
  fill: var(--alk-color-heat-axis);
  font-family: var(--alk-font-sans);
  font-size: 13px;
}

.month-tick {
  stroke: var(--alk-color-heat-bg);
  stroke-width: 1.5;
}

.scan {
  fill: var(--alk-color-heat-bg);
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: scan 1.2s var(--alk-ease-standard) forwards;
}

@keyframes scan {
  to {
    transform: scaleX(0);
  }
}

@keyframes hot-in {
  from {
    opacity: 0;
  }
}

.grid-caption {
  margin: 16px 0 48px;
  font-size: 13px;
  font-weight: 500;
  color: var(--alk-color-ink-300);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 28px;
  border-radius: var(--alk-radius-xl);
  background: var(--alk-color-ink-800);
}

.card-kind {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--alk-color-exception-fg-on-dark);
}

.card-kind.note,
.card-kind.common {
  color: var(--alk-color-ink-300);
}

.card-when {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--alk-color-ink-300);
}

.card-text {
  margin: 12px 0 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--alk-color-ink-0);
}

.card-amount {
  margin: 0;
  font-size: 14px;
  color: var(--alk-color-exception-fg-on-dark);
}

.card-amount.quiet {
  color: var(--alk-color-ink-300);
  font-family: var(--alk-font-sans);
}

/* ---------------------------------------------------------------------------------------------------------
   SignedSeal */

.seal {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto 32px;
  animation: settle var(--alk-duration-slow) var(--alk-ease-spring) both;
}

.seal svg {
  width: 168px;
  height: 168px;
}

.seal circle {
  fill: none;
  stroke: var(--alk-color-brand-default);
}

.seal img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 56px;
  transform: translate(-50%, -50%);
}

@keyframes settle {
  from {
    transform: scale(1.06);
  }
}

.signed {
  margin: 0;
  font-family: var(--alk-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--alk-color-brand-default);
}

.seal-line {
  margin: 24px 0 8px;
  font-size: 13px;
  color: var(--alk-color-text-secondary);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------------------------
   Inner pages */

.page-hero {
  padding: 96px 0 64px;
}

.page-hero .lede {
  max-width: 720px;
  margin-top: 20px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--alk-color-border-default);
}

.feature:first-of-type {
  border-top: 0;
}

.feature p {
  margin: 12px 0 0;
  color: var(--alk-color-text-secondary);
}

.panel-card {
  padding: 32px;
  border-radius: var(--alk-radius-xl);
  background: var(--alk-color-bg-subtle);
}

.bg-subtle .panel-card {
  background: var(--alk-color-ink-0);
}

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-top: 1px solid var(--alk-color-border-row);
}

.ticks li:first-child {
  border-top: 0;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--alk-color-ink-450);
}

.ticks .sub {
  display: block;
  font-size: 15px;
  color: var(--alk-color-text-secondary);
}

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

.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border-radius: var(--alk-radius-xl);
  background: var(--alk-color-ink-0);
  box-shadow: inset 0 0 0 1px var(--alk-color-border-default);
  text-decoration: none;
}

a.tile:hover {
  box-shadow: inset 0 0 0 1px var(--alk-color-ink-150), var(--alk-shadow-hairline);
}

.tile p {
  margin: 0;
  color: var(--alk-color-text-secondary);
  font-size: 15px;
}

.cta-band {
  padding: 96px 0;
  background: var(--alk-color-ink-900);
  color: var(--alk-color-ink-0);
  text-align: center;
}

.cta-band .lede {
  color: var(--alk-color-ink-300);
  margin: 16px auto 32px;
  max-width: 640px;
}

.prose {
  max-width: 720px;
}

.prose p {
  margin: 0 0 16px;
  color: var(--alk-color-text-secondary);
}

.prose h2 {
  margin: 40px 0 12px;
}

/* Team */

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

.member img {
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--alk-radius-xl);
  background: var(--alk-color-bg-subtle);
  object-fit: cover;
}

.member h3 {
  margin-top: 20px;
}

.member .role {
  margin: 4px 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alk-color-text-tertiary);
}

.member p {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--alk-color-text-secondary);
}

.member a {
  font-size: 15px;
  font-weight: 600;
}

address {
  font-style: normal;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.placeholder-value {
  font-family: var(--alk-font-mono);
  color: var(--alk-color-exception-fg);
  font-size: 15px;
}

/* ---------------------------------------------------------------------------------------------------------
   AttestationReport (/sample): an illustrative SAMPLE sheet, placeholder values only. */

.doc-ground {
  background: var(--alk-color-ink-75);
  padding: 56px 0 96px;
}

.doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.doc-bar p {
  margin: 0;
}

.doc {
  position: relative;
  overflow: hidden;
  padding: 72px 72px 64px;
  background: var(--alk-color-ink-0);
  box-shadow: var(--alk-shadow-doc);
}

.watermark {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) rotate(-28deg);
  font-size: 168px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--alk-color-ink-900);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.doc-stamp {
  display: inline-block;
  padding: 6px 14px;
  border: 2px solid var(--alk-color-ink-600);
  border-radius: var(--alk-radius-xs);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--alk-color-ink-600);
}

.doc-title {
  margin: 28px 0 8px;
  font-family: var(--alk-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.doc-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--alk-color-border-default);
  border-bottom: 1px solid var(--alk-color-border-default);
}

.doc-meta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alk-color-text-tertiary);
}

.doc-meta dd {
  margin: 4px 0 0;
  font-size: 15px;
}

.doc h2 {
  margin: 48px 0 12px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.doc p {
  margin: 0 0 12px;
  color: var(--alk-color-text-secondary);
}

.doc-summary {
  font-family: var(--alk-font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--alk-color-text-primary);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 32px 0 0;
}

.kpi {
  padding: 16px;
  border-radius: var(--alk-radius-sm);
  background: var(--alk-color-bg-subtle);
}

.kpi dt {
  font-size: 13px;
  font-weight: 500;
  color: var(--alk-color-text-tertiary);
}

.kpi dd {
  margin: 4px 0 0;
  font-family: var(--alk-font-mono);
  font-size: 20px;
  font-weight: 500;
}

.table-scroll {
  overflow-x: auto;
}

.tbl {
  width: 100%;
  min-width: 640px; /* on a phone the table scrolls inside its own box rather than squeezing every cell */
  border-collapse: collapse;
  font-size: 14px;
}

.tbl th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--alk-color-border-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--alk-color-text-tertiary);
}

.tbl td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--alk-color-border-row);
  vertical-align: top;
}

.tbl .num {
  white-space: nowrap;
}

.tbl tr.ex td {
  background: var(--alk-color-exception-row);
}

.tbl .ex-amount {
  color: var(--alk-color-exception-fg);
}

.signoff {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--alk-color-border-default);
}

.signoff p {
  margin: 0;
}

/* ---------------------------------------------------------------------------------------------------------
   SiteFooter */

.foot {
  background: var(--alk-color-bg-subtle);
  font-size: 13px;
  color: var(--alk-color-text-secondary);
  padding: 64px 0 32px;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr) 1.3fr;
  gap: 32px;
}

.foot h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--alk-color-text-primary);
}

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot li {
  margin: 0 0 8px;
}

.foot a {
  text-decoration: none;
}

.foot a:hover {
  text-decoration: underline;
  color: var(--alk-color-text-primary);
}

.foot .brand {
  font-size: 16px;
  margin-bottom: 12px;
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--alk-color-border-default);
}

.foot-base p {
  margin: 0;
}

/* ---------------------------------------------------------------------------------------------------------
   Phone (the designed 390px layout) */

@media (max-width: 899px) {
  .lens-grid,
  .split,
  .feature,
  .capability {
    grid-template-columns: 1fr;
  }

  .lens-parties {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 2px 8px;
  }

  .party {
    flex: 0 0 auto;
    padding: 10px 16px;
    border-radius: var(--alk-radius-pill);
    background: var(--alk-color-ink-0);
    box-shadow: inset 0 0 0 1px var(--alk-color-border-default);
  }

  .party-name {
    font-size: 15px;
  }

  .party-tag {
    display: none;
  }

  .party:has(input:checked) {
    background: var(--alk-color-ink-900);
    box-shadow: none;
  }

  .party:has(input:checked) .party-name {
    color: var(--alk-color-ink-0);
  }

  .team,
  .tiles {
    grid-template-columns: 1fr 1fr;
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }

  .foot-grid > :first-child,
  .foot-grid > :last-child {
    grid-column: 1 / -1;
  }

  .doc-meta,
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 639px) {
  .wrap,
  .wrap-wide,
  .wrap-doc {
    padding: 0 20px;
  }

  body {
    font-size: 16px;
  }

  .section,
  .heat {
    padding: 64px 0;
  }

  .section-tight {
    padding: 48px 0;
  }

  .display {
    font-size: 46px;
  }

  .h1 {
    font-size: 40px;
  }

  .h2 {
    font-size: 32px;
  }

  .h3 {
    font-size: 28px;
  }

  .h4 {
    font-size: 22px;
  }

  .lede {
    font-size: 17px;
  }

  .hero {
    padding: 72px 0 64px;
  }

  .rays {
    top: 108px;
  }

  .hero-disc {
    width: 96px;
    height: 96px;
    margin-bottom: 32px;
  }

  .hero-disc img {
    width: 60px;
    height: 54px;
  }

  .hero-copy {
    padding: 16px 20px 24px;
  }

  .seg {
    border-radius: var(--alk-radius-2xl);
  }

  .page-hero {
    padding: 56px 0 40px;
  }

  .pillars,
  .team,
  .tiles,
  .reads ul {
    grid-template-columns: 1fr;
  }

  .capability {
    margin-top: 48px;
    padding: 32px 24px;
    gap: 32px;
  }

  .big-num {
    font-size: 56px;
  }

  .row {
    padding: 14px 20px;
    font-size: 15px;
  }

  .record-head {
    padding: 16px 20px;
  }

  .grid-year {
    display: none;
  }

  .grid-weeks {
    display: block;
  }

  .segbar {
    margin-bottom: 32px;
  }

  .seg label {
    padding: 8px 12px;
    font-size: 14px;
  }

  .signed {
    font-size: 64px;
  }

  .cta-band {
    padding: 64px 0;
  }

  .doc-ground {
    padding: 24px 0 48px;
  }

  .doc {
    padding: 40px 20px 32px;
  }

  .watermark {
    font-size: 88px;
  }

  .doc-title {
    font-size: 32px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------------------------------------
   Reduced motion: every animation off, the end state shown (docs/web/design/02-motion.md rule 6). */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .rays line {
    stroke-dashoffset: 0;
  }

  .scan {
    display: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------------------------------------
   Print: the sample sheet prints on its own, without the site chrome or shadows. */

@media print {
  .nav,
  .foot,
  .skip,
  .doc-bar {
    display: none;
  }

  .doc-ground {
    background: none;
    padding: 0;
  }

  .doc {
    box-shadow: none;
    padding: 0;
  }

  .doc .print-break {
    break-before: page;
  }
}

.month-sm {
  font-size: 20px;
}

/* The markets page: one section per market, reached by #ercot, #pjm, #caiso, #miso from the menus. */
.market {
  padding-top: 72px;
  border-top: 1px solid var(--alk-color-border-default);
  scroll-margin-top: var(--alk-nav-height);
}

.market-head .lede {
  max-width: 720px;
  margin-top: 16px;
}

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

.market-index .small {
  color: var(--alk-color-text-secondary);
}

@media (max-width: 899px) {
  .market-index {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 639px) {
  .market {
    padding-top: 48px;
  }

  .market-index {
    grid-template-columns: 1fr;
  }
}