:root {
  --fuel-green: #02E555;
  --fuel-blue: #88ECD1;
  --fuel-grey-100: #DDDDDD;
  --fuel-grey-300: #B2B2B2;
  --fuel-grey-600: #595959;
  --fuel-grey-800: #323232;
  --fuel-white: #FFFFFF;
  --fuel-black: #000000;
  /* User-approved Holdings text accent: white backgrounds only. */
  --color-accent-text-on-light: #087A36;

  /* Approved foundations; font files are not bundled yet. */
  --font-sans: "Space Grotesk", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --type-annotation: 0.8125rem;
  --type-body: 1rem;
  --type-intro: 1.25rem;
  --type-subsection: 1.5625rem;
  --type-31: 1.9375rem;
  --type-39: 2.4375rem;
  --type-49: 3.0625rem;
  --type-61: 3.8125rem;
  --type-76: 4.75rem;
  --type-95: 5.9375rem;
  --leading-annotation: 1.25rem;
  --leading-body: 1.5rem;
  --leading-intro: 2rem;
  --leading-subsection: 2rem;
  --weight-body: 400;
  --weight-label: 500;
  --weight-heading: 600;
  --weight-on-green: 700;
  --tracking-body: 0;
  --tracking-subsection: -0.01em;
  --tracking-display: -0.02em;
  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --container-wide: 75rem;
  --container-workspace: 70rem;
  --container-reading: 42.5rem;
  --container-form: 35rem;
  --measure-body: 60ch;
  --measure-body-max: 70ch;
  --measure-hero: 12ch;
  --measure-hero-max: 18ch;
  --radius-structural: 0;
  --radius-control: 4px;
  --radius-dialog: 8px;
  --bevel-primary: 10px;
  /* Parallel inset at 45deg: c_inner = c_outer - stroke * (2 - sqrt(2)). */
  --bevel-inner-cut: calc(var(--bevel-primary) - var(--stroke-control) * 0.5857864376);
  --bevel-slash-width: 12px;
  --bevel-slash-height: 1px;
  --bevel-slash-right: 3px;
  --bevel-slash-bottom: 6px;
  --bevel-slash-rotation: -45deg;
  --stroke-divider: 1px;
  --stroke-control: 2px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --control-small: 2.5rem;
  --control-standard: 3rem;
  --control-large: 3.5rem;
  --target-touch: 3rem;
  --icon-inline: 1rem;
  --icon-standalone: 1.5rem;
  --layer-base: 0;
  --layer-sticky: 10;
  --layer-popover: 20;
  --layer-modal: 30;
  --layer-notice: 40;
  --elevation-shadow: none;
  /* Overlay-only alpha: never apply opacity to readable content. */
  --color-modal-scrim: rgb(0 0 0 / 48%);
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-standard: 180ms;
  --duration-slow: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --page-gutter: var(--space-2);
  --grid-gap: var(--space-3);
  --panel-padding: var(--space-2);
  --field-gap: var(--space-2);
  --form-group-gap: var(--space-3);
  --app-section-gap: var(--space-4);
  --app-start-gap: var(--space-3);
  --landing-section-padding: var(--space-8);
  --landing-hero-padding: var(--space-6);
  --header-min-height: 4rem;
  --type-hero: var(--type-49);
  --leading-hero: 3.25rem;
  --type-section: var(--type-31);
  --leading-section: 2.25rem;
  --type-page-title: var(--type-31);
  --leading-page-title: 2.25rem;
  --type-outcome: var(--type-39);
  --leading-outcome: 3rem;
  --type-metric: var(--type-31);
  --leading-metric: 2.5rem;
  --color-accent: var(--fuel-green);
  --color-accent-secondary: var(--fuel-blue);
  --color-on-accent: var(--fuel-black);
  --color-selected: var(--fuel-green);
  --color-on-selected: var(--fuel-black);
  --color-support-panel: var(--fuel-blue);
  --color-on-support-panel: var(--fuel-black);
}

:root,
:root[data-theme="light"],
[data-color-scope="light"] {
  color-scheme: light;
  --color-background: var(--fuel-white);
  --color-surface: var(--fuel-grey-100);
  --color-text: var(--fuel-black);
  --color-text-secondary: var(--fuel-grey-600);
  --color-ui-strong: var(--fuel-grey-800);
  --color-border: var(--fuel-grey-100);
  --color-border-strong: var(--fuel-grey-300);
  --color-text-support: var(--fuel-grey-600);
  --color-text-strong: var(--fuel-grey-800);
  --color-on-surface: var(--fuel-black);
  --color-control-border: var(--fuel-grey-600);
  --color-surface-divider: var(--fuel-grey-300);
  --color-secondary-action: var(--fuel-black);
  --color-on-secondary-action: var(--fuel-white);
  --color-disabled: var(--fuel-grey-100);
  --color-on-disabled: var(--fuel-grey-600);
  --color-focus: var(--fuel-black);
}

:root[data-theme="dark"],
[data-color-scope="dark"] {
  color-scheme: dark;
  --color-background: var(--fuel-black);
  --color-surface: var(--fuel-grey-800);
  --color-text: var(--fuel-white);
  --color-text-secondary: var(--fuel-grey-300);
  --color-ui-strong: var(--fuel-white);
  --color-border: var(--fuel-grey-800);
  --color-border-strong: var(--fuel-grey-600);
  /* Grey 2 is retained, but not for regular small supporting copy. */
  --color-text-support: var(--fuel-grey-100);
  --color-text-strong: var(--fuel-grey-100);
  --color-on-surface: var(--fuel-white);
  --color-control-border: var(--fuel-grey-300);
  --color-surface-divider: var(--fuel-grey-600);
  --color-secondary-action: var(--fuel-white);
  --color-on-secondary-action: var(--fuel-black);
  --color-disabled: var(--fuel-grey-800);
  --color-on-disabled: var(--fuel-grey-300);
  --color-focus: var(--fuel-white);
}

/* Variables cannot be used in media-query conditions.
   Approved thresholds: sm 640, md 768, lg 1024, xl 1280 CSS px.
   xl currently needs no separate foundation override. */
@media (min-width: 40rem) {
  :root { --page-gutter: var(--space-3); }
}
@media (min-width: 48rem) {
  :root {
    --type-hero: var(--type-76);
    --leading-hero: 5rem;
  }
}
@media (min-width: 64rem) {
  :root {
    --page-gutter: var(--space-5);
    --grid-gap: var(--space-4);
    --panel-padding: var(--space-3);
    --form-group-gap: var(--space-4);
    --app-section-gap: var(--space-6);
    --app-start-gap: var(--space-5);
    --landing-section-padding: var(--space-12);
    --landing-hero-padding: var(--space-10);
    --header-min-height: 4.5rem;
    --type-hero: var(--type-95);
    --leading-hero: 6rem;
    --type-section: var(--type-49);
    --leading-section: 3.5rem;
    --type-page-title: var(--type-39);
    --leading-page-title: 3rem;
    --type-outcome: var(--type-61);
    --leading-outcome: 4rem;
    --type-metric: var(--type-39);
    --leading-metric: 3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-standard: 0ms;
    --duration-slow: 0ms;
  }
}

@font-face {
  font-family:'Space Grotesk';
  src:url('/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:'Space Grotesk';
  src:url('/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight:500;
  font-display:swap
}

@font-face {
  font-family:'Space Grotesk';
  src:url('/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
  font-weight:600;
  font-display:swap
}

@font-face {
  font-family:'Space Grotesk';
  src:url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight:700;
  font-display:swap
}

@font-face {
  font-family:'IBM Plex Mono';
  src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

:root {
  --sidebar-width:15rem;
  --vault-size:30rem;
  --vault-tilt:-12deg;
  --vault-depth:var(--space-4);
  --section-rule:var(--stroke-divider) solid var(--color-border);
  --app-rule:var(--stroke-control) solid var(--color-border);
  --line-control:var(--stroke-control) solid var(--color-control-border)
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:var(--space-3)
}
body {
  margin:0;
  background:var(--color-background);
  color:var(--color-text);
  font-family:var(--font-sans);
  font-size:var(--type-body);
  line-height:var(--leading-body)
}
button,input,select {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button,a,input,select,summary {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled,input:disabled,select:disabled {
  cursor:not-allowed;
  background:var(--color-disabled);
  color:var(--color-on-disabled)
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:var(--focus-width) solid var(--color-focus);
  outline-offset:var(--focus-offset)
}
button:hover:not(:disabled),a:hover,summary:hover {
  text-decoration:underline;
  text-underline-offset:var(--space-1)
}
button:active:not(:disabled),a:active {
  outline:var(--stroke-control) solid currentColor;
  outline-offset:calc(-1 * var(--stroke-control))
}
h1,h2,h3,p {
  margin:0
}
p+p {
  margin-top:var(--space-2)
}
h1,h2 {
  letter-spacing:var(--tracking-display)
}
h1 {
  font-size:var(--type-page-title);
  line-height:var(--leading-page-title);
  font-weight:600
}
h2 {
  font-size:var(--type-subsection);
  line-height:var(--leading-subsection);
  font-weight:600
}
h3 {
  font-size:var(--type-intro);
  line-height:var(--leading-intro);
  font-weight:600
}
p {
  max-width:var(--measure-body-max)
}
h2+p,h3+p {
  margin-top:var(--space-2)
}
.support,.data-note {
  color:var(--color-text-support)
}
.icon {
  width:var(--icon-standalone);
  height:var(--icon-standalone);
  flex-shrink:0;
  vertical-align:middle
}
.wide {
  width:min(var(--container-wide),calc(100% - var(--page-gutter) * 2));
  margin-inline:auto
}
.reading {
  max-width:var(--container-reading)
}
.section-label {
  display:flex;
  align-items:center;
  gap:var(--space-1);
  font-weight:500;
  margin-bottom:var(--space-3)
}
.square-mark {
  display:inline-block;
  width:var(--space-1);
  height:var(--space-1);
  background:var(--fuel-green);
  outline:var(--stroke-divider) solid var(--color-control-border)
}
.actions {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap
}
.button {
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:var(--control-standard);
  padding:var(--space-1) var(--space-3);
  font-weight:600;
  border:var(--stroke-control) solid var(--color-text);
  border-radius:var(--radius-control);
  background:transparent;
  color:var(--color-text);
  text-align:center;
  line-height:var(--leading-body);
  max-width:100%
}
.button.primary {
  background:var(--fuel-green);
  color:var(--fuel-black);
  font-weight:700;
  border-color:var(--fuel-black)
}
.button.secondary {
  background:var(--color-secondary-action);
  color:var(--color-on-secondary-action);
  border-color:var(--color-secondary-action)
}
.button.quiet {
  border-color:transparent
}
.button:disabled {
  background:var(--color-disabled);
  color:var(--color-on-disabled);
  border-color:var(--color-control-border)
}
.button.bevel {
  border:0;
  border-radius:0;
  min-height:var(--control-large);
  padding-right:var(--space-4);
  font-weight:700;
  color:var(--fuel-black);
  background:transparent
}
.button.bevel::before,.button.bevel::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--fuel-black);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--bevel-primary)),calc(100% - var(--bevel-primary)) 100%,0 100%)
}
.button.bevel::after {
  inset:var(--stroke-control);
  z-index:-1;
  background:var(--fuel-green);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--bevel-inner-cut)),calc(100% - var(--bevel-inner-cut)) 100%,0 100%)
}
.bevel-slash {
  position:absolute;
  right:var(--bevel-slash-right);
  bottom:var(--bevel-slash-bottom);
  width:var(--bevel-slash-width);
  height:var(--bevel-slash-height);
  background:var(--fuel-black);
  transform:rotate(var(--bevel-slash-rotation));
  pointer-events:none
}
.text-link {
  text-decoration:underline;
  text-underline-offset:var(--space-1);
  min-height:var(--control-standard);
  display:inline-flex;
  align-items:center;
  font-weight:500
}
.icon-button {
  display:inline-grid;
  place-items:center;
  width:var(--target-touch);
  min-width:var(--target-touch);
  height:var(--target-touch);
  border:0;
  background:transparent;
  color:inherit;
  border-radius:var(--radius-control)
}
.skip {
  position:fixed;
  top:var(--space-2);
  left:var(--space-2);
  padding:var(--space-2);
  background:var(--color-background);
  z-index:var(--layer-notice);
  transform:translateY(-200%)
}
.skip:focus {
  transform:none
}
.preview-strip {
  background:var(--fuel-grey-100);
  color:var(--fuel-black);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-1) var(--page-gutter);
  font-size:var(--type-annotation);
  line-height:var(--leading-annotation)
}
.preview-strip>span:first-child {
  font-weight:700
}
.preview-strip a {
  text-decoration:underline;
  min-height:var(--control-standard);
  display:flex;
  align-items:center;
  font-size:var(--type-body)
}
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-2) var(--page-gutter);
  min-height:var(--header-min-height);
  border-bottom:var(--section-rule)
}
.logo {
  display:flex;
  align-items:center;
  gap:var(--space-1);
  font-size:var(--type-intro);
  white-space:nowrap
}
.logo img {
  width:var(--space-4);
  height:var(--space-4)
}
.logo strong {
  font-weight:500
}
.logo-divider {
  padding-inline:var(--space-1);
  color:var(--color-text-support)
}
.brand-link {
  display:flex;
  align-items:center;
  min-height:var(--control-standard)
}
.desktop-nav {
  display:flex;
  gap:var(--space-4)
}
.desktop-nav a {
  min-height:var(--control-standard);
  display:flex;
  align-items:center
}
.header-actions {
  display:flex;
  align-items:center;
  gap:var(--space-1)
}
.menu-button {
  display:none
}
.landing-hero {
  display:grid;
  grid-template-columns:7fr 5fr;
  align-items:center;
  gap:var(--space-4);
  padding-block:var(--landing-hero-padding)
}
.hero-copy {
  position:relative;
  z-index:1
}
.landing-hero h1 {
  font-size:var(--type-hero);
  line-height:var(--leading-hero);
  font-weight:700;
  max-width:var(--measure-hero-max)
}
.intro {
  font-size:var(--type-intro);
  line-height:var(--leading-intro);
  margin-top:var(--space-4)
}
.hero-copy .actions {
  margin-top:var(--space-4)
}
.hero-note {
  margin-top:var(--space-3);
  max-width:var(--container-form)
}
.vault {
  height:var(--vault-size);
  position:relative;
  min-width:0;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center
}
.vault-grid {
  position:absolute;
  inset:var(--space-4);
  border:var(--stroke-divider) solid var(--color-border);
  transform:rotate(var(--vault-tilt))
}
.vault-slab {
  position:absolute;
  width:70%;
  aspect-ratio:1/1.1;
  clip-path:polygon(0 0,100% 0,100% 80%,80% 100%,0 100%);
  transform:rotate(var(--vault-tilt))
}
.vault-slab.back {
  background:var(--fuel-grey-600);
  translate:var(--space-4) calc(-1 * var(--space-4))
}
.vault-slab.middle {
  background:var(--fuel-black);
  translate:var(--space-2) calc(-1 * var(--space-2))
}
.vault-slab.front {
  background:var(--fuel-green);
  color:var(--fuel-black);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:var(--space-4)
}
.vault-mark {
  font-size:var(--type-95);
  line-height:1;
  font-weight:700;
  transform:skew(-12deg);
  border-top:var(--stroke-control) solid currentColor;
  border-bottom:var(--stroke-control) solid currentColor;
  padding-block:var(--space-3);
  width:75%;
  letter-spacing:var(--tracking-display)
}
.vault-caption {
  font-size:var(--type-31);
  line-height:var(--leading-subsection);
  font-weight:600;
  max-width:8ch
}
.vault-note {
  position:absolute;
  bottom:0;
  left:var(--space-2);
  font-size:var(--type-annotation);
  color:var(--color-text-support)
}
.landing-section {
  padding-block:var(--landing-section-padding)
}
.landing-section h2,.closing h2 {
  font-size:var(--type-section);
  line-height:var(--leading-section)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:var(--space-6);
  margin-bottom:var(--space-6)
}
.section-heading>p {
  max-width:var(--container-form);
  width:40%
}
.program-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
  margin-bottom:var(--space-3)
}
.program-panel {
  padding:var(--space-5);
  background:var(--color-surface);
  color:var(--color-on-surface);
  display:flex;
  flex-direction:column;
  gap:var(--space-3)
}
.earn-panel {
  background:var(--fuel-blue);
  color:var(--fuel-black);
  --color-secondary-action:var(--fuel-black);
  --color-on-secondary-action:var(--fuel-white);
  --color-focus:var(--fuel-black)
}
.panel-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-2)
}
.program-panel h3 {
  font-size:var(--type-31);
  line-height:var(--leading-section)
}
.program-number {
  font-size:var(--type-61);
  line-height:var(--leading-outcome);
  font-weight:600;
  letter-spacing:var(--tracking-display)
}
.program-number span {
  display:block;
  font-size:var(--type-body);
  line-height:var(--leading-body);
  letter-spacing:0;
  font-weight:500
}
.program-panel .button {
  align-self:start;
  margin-top:auto
}
.terms {
  font-weight:500
}
.strategy-band {
  background:var(--color-background);
  color:var(--color-text)
}
.strategy-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-5);
  margin-block:var(--space-6)
}
.strategy-list article {
  border-top:var(--stroke-control) solid var(--fuel-grey-600);
  padding-top:var(--space-3)
}
.strategy-index {
  font-family:var(--font-mono);
  color:var(--fuel-green);
  display:block;
  margin-bottom:var(--space-4)
}
.strategy-list strong {
  display:block;
  margin-top:var(--space-4)
}
.strategy-list p {
  color:var(--fuel-grey-100)
}
.tiers {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-4);
  padding-block:var(--space-4)
}
.tiers article {
  padding-block:var(--space-3);
  border-top:var(--stroke-control) solid var(--color-text)
}
.tier-bars {
  display:flex;
  gap:var(--space-1);
  height:var(--space-6);
  margin-bottom:var(--space-3)
}
.tier-bars span {
  width:var(--space-2);
  height:var(--space-4);
  background:var(--color-text);
  transform:skew(-20deg)
}
.tier-amount {
  font-size:var(--type-subsection);
  font-weight:500
}
.tier-amount span {
  font-size:var(--type-body)
}
.tiers p:last-child {
  color:var(--color-text-support)
}
.benefit-line {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--space-4);
  border-top:var(--section-rule);
  padding-top:var(--space-5);
  margin-top:var(--space-4)
}
.benefit-line h3 {
  margin-top:var(--space-2)
}
.faq-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-8);
  border-top:var(--section-rule)
}
details {
  border-bottom:var(--section-rule);
  padding-block:var(--space-2)
}
summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  min-height:var(--control-large);
  cursor:pointer;
  font-weight:500;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
summary span {
  font-size:var(--type-subsection)
}
details[open] summary span {
  transform:rotate(45deg)
}
details p {
  padding-block:var(--space-2);
  color:var(--color-text-support)
}
.closing {
  background:var(--fuel-grey-100);
  color:var(--fuel-black);
  padding-block:var(--space-10);
  --color-focus:var(--fuel-black)
}
.closing p {
  margin-block:var(--space-3)
}
.footer {
  padding-block:var(--space-5);
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap
}
.footer>div {
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap
}
.footer a {
  min-height:var(--control-standard);
  display:flex;
  align-items:center
}
.footer>p {
  width:100%;
  color:var(--color-text-support);
  font-size:var(--type-annotation)
}

.app-layout {
  display:grid;
  grid-template-columns:var(--sidebar-width) minmax(0,1fr);
  min-height:calc(100dvh - var(--space-16))
}
.sidebar {
  border-right:var(--section-rule);
  padding:var(--space-4) var(--space-2);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--space-10)
}
.nav-item {
  min-height:var(--control-large);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2);
  font-weight:500
}
.nav-item.current {
  background:var(--color-surface);
  color:var(--color-on-surface);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:var(--space-1)
}
.nav-secondary {
  margin-top:var(--space-6)
}
.sidebar-bottom {
  padding:var(--space-2);
  font-size:var(--type-annotation);
  color:var(--color-text-support)
}
.sidebar-bottom p:first-child {
  color:var(--color-text);
  font-size:var(--type-body)
}
.workspace {
  padding:var(--space-5) var(--page-gutter) var(--space-3);
  width:100%;
  max-width:calc(var(--container-workspace) + var(--page-gutter) * 2);
  margin-inline:auto;
  min-width:0;
  outline:none
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:var(--space-3);
  margin-bottom:var(--space-5)
}
.page-heading p:not(.section-label) {
  margin-top:var(--space-2);
  color:var(--color-text-support)
}
.page-heading .section-label {
  margin-bottom:var(--space-1)
}
.app-footer {
  border-top:var(--section-rule);
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
  padding-top:var(--space-3);
  margin-top:var(--space-8);
  color:var(--color-text-support);
  font-size:var(--type-annotation)
}
.app-footer a {
  font-size:var(--type-body);
  min-height:var(--control-standard);
  display:flex;
  align-items:center
}
.portfolio-overview {
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:var(--space-5);
  padding-bottom:var(--space-5);
  border-bottom:var(--section-rule)
}
.hero-balance {
  font-size:var(--type-outcome);
  line-height:var(--leading-outcome);
  font-weight:700;
  letter-spacing:var(--tracking-display);
  margin-block:var(--space-2);
  overflow-wrap:anywhere
}
.debt-line {
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-top:var(--space-4)
}
.earn-highlight {
  padding-left:var(--space-5);
  border-left:var(--section-rule)
}
.earn-highlight>.icon {
  margin-bottom:var(--space-2)
}
.metric p {
  margin:0
}
.metric-value {
  font-size:var(--type-metric);
  line-height:var(--leading-metric);
  letter-spacing:var(--tracking-subsection);
  font-weight:600;
  margin-block:var(--space-1);
  overflow-wrap:anywhere
}
.metric-unit {
  font-size:var(--type-intro);
  line-height:var(--leading-intro);
  white-space:nowrap
}
.green-text .metric-value {
  color:var(--color-accent-text-on-light)
}
:root[data-theme='dark'] .green-text .metric-value {
  color:var(--fuel-green)
}
.account-grid {
  display:grid;
  grid-template-columns:2fr 3fr;
  gap:var(--space-5);
  margin-top:var(--space-5)
}
.membership-panel {
  padding:var(--space-3);
  background:var(--color-surface);
  color:var(--color-on-surface)
}
.membership-panel h2 {
  font-size:var(--type-39);
  line-height:var(--leading-page-title);
  margin-block:var(--space-3) var(--space-1)
}
.membership-track {
  height:var(--space-1);
  background:var(--color-control-border);
  margin-block:var(--space-3)
}
.membership-fill {
  display:block;
  height:100%;
  background:var(--color-on-surface);
  width:0
}
.membership-fill.tier-light {
  width:25%
}
.membership-fill.tier-personal {
  width:50%
}
.membership-fill.tier-pro {
  width:75%
}
.membership-fill.tier-max {
  width:100%
}
.numeric {
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums
}
.allocation-row {
  display:flex;
  align-items:start;
  gap:var(--space-2);
  padding-block:var(--space-3);
  border-bottom:var(--section-rule)
}
.allocation-row>div:last-child {
  margin-left:auto;
  text-align:right
}
.allocation-row .text-link {
  display:flex;
  justify-content:end
}
.allocation-row p {
  color:var(--color-text-support)
}
.allocation>p {
  margin-top:var(--space-2)
}
.app-section {
  margin-top:var(--space-6)
}
.app-section>h2 {
  margin-bottom:var(--space-3)
}
.attention-row,.history-row {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding-block:var(--space-3);
  border-block:var(--section-rule)
}
.attention-row .button {
  margin-left:auto
}
.attention-icon,.empty-symbol {
  width:var(--control-large);
  height:var(--control-large);
  display:grid;
  place-items:center;
  background:var(--color-surface);
  color:var(--color-on-surface)
}
.data-note {
  margin-top:var(--space-4);
  font-size:var(--type-annotation)
}
.choice-grid,.calculator {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-4)
}
.program-choice {
  display:block;
  padding:var(--space-4);
  background:var(--color-surface);
  color:var(--color-on-surface)
}
.program-choice>.icon {
  margin-bottom:var(--space-4)
}
.program-choice>strong {
  display:flex;
  justify-content:space-between;
  margin-top:var(--space-5)
}
.start-demo {
  margin-top:var(--space-6);
  padding-top:var(--space-5);
  border-top:var(--section-rule)
}
.start-demo .actions {
  margin-top:var(--space-3)
}
.progress {
  margin-bottom:var(--space-5)
}
.progress>p {
  color:var(--color-text-support);
  margin-bottom:var(--space-2)
}
.progress ol {
  display:flex;
  list-style:none;
  padding:0;
  margin:0;
  gap:var(--space-3);
  flex-wrap:wrap
}
.progress li {
  display:flex;
  align-items:center;
  gap:var(--space-1);
  color:var(--color-text-support)
}
.progress li span {
  display:grid;
  place-items:center;
  width:var(--space-4);
  height:var(--space-4);
  border:var(--stroke-control) solid var(--color-control-border);
  font-size:var(--type-annotation)
}
.progress li[aria-current] {
  font-weight:700;
  color:var(--color-text)
}
.progress li[aria-current] span {
  background:var(--fuel-green);
  color:var(--fuel-black);
  border-color:var(--fuel-black)
}
.progress li.complete span {
  background:var(--color-secondary-action);
  color:var(--color-on-secondary-action)
}
.configuration h2 {
  margin-bottom:var(--space-4)
}
label {
  display:block;
  font-weight:500
}
input:not([type=radio]):not([type=checkbox]),select {
  display:block;
  width:100%;
  min-height:var(--control-standard);
  border:var(--line-control);
  border-radius:var(--radius-control);
  background:var(--color-background);
  color:var(--color-text);
  padding:var(--space-1) var(--space-2);
  margin-top:var(--space-1);
  max-width:100%
}
input:hover,select:hover {
  border-color:var(--color-text)
}
input:active,select:active {
  border-color:var(--color-text)
}
.field-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:var(--space-4)
}
input.amount-input {
  font-size:var(--type-31);
  line-height:var(--leading-metric);
  padding-block:var(--space-2)
}
.configuration>.support {
  margin-top:var(--space-1)
}
.presets {
  display:flex;
  gap:var(--space-1);
  margin-top:var(--space-2);
  flex-wrap:wrap
}
.presets button {
  min-height:var(--control-standard);
  padding:var(--space-1) var(--space-2);
  border:var(--line-control);
  background:var(--color-background);
  color:var(--color-text);
  border-radius:var(--radius-control)
}
fieldset {
  border:0;
  padding:0;
  margin:var(--space-4) 0
}
legend {
  font-weight:500;
  margin-bottom:var(--space-2)
}
.term-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-1)
}
.term-options label {
  border:var(--line-control);
  padding:var(--space-2) var(--space-1);
  border-radius:var(--radius-control);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-1);
  cursor:pointer;
  text-align:center
}
.term-options label.selected {
  background:var(--fuel-green);
  color:var(--fuel-black);
  border-color:var(--fuel-black);
  font-weight:700
}
.term-options input {
  accent-color:var(--fuel-black);
  width:var(--space-2);
  height:var(--space-2)
}
.term-options span {
  font-size:var(--type-body)
}
.funding-block {
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:var(--section-rule)
}
.funding-block .button {
  margin-top:var(--space-2)
}
.outcome {
  background:var(--color-surface);
  color:var(--color-on-surface);
  padding:var(--space-4);
  align-self:start
}
.outcome-number {
  font-size:var(--type-outcome);
  line-height:var(--leading-outcome);
  font-weight:700;
  margin-block:var(--space-2);
  overflow-wrap:anywhere
}
.outcome-number span {
  display:block;
  font-size:var(--type-intro);
  font-weight:500;
  line-height:var(--leading-intro)
}
.outcome .support {
  color:var(--color-on-surface)
}
.outcome>.button {
  width:100%;
  margin-top:var(--space-3)
}
.outcome>.text-link {
  margin-top:var(--space-2)
}
.outcome .rows {
  border-color:var(--color-surface-divider)
}
.rows {
  margin:var(--space-3) 0;
  padding:0
}
.rows>div {
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  padding-block:var(--space-2);
  border-bottom:var(--section-rule)
}
.rows dt {
  flex:1
}
.rows dd {
  margin:0;
  max-width:60%;
  text-align:right;
  font-weight:500;
  overflow-wrap:anywhere
}
.outcome .rows>div {
  border-color:var(--color-surface-divider)
}
.check-label {
  display:flex;
  gap:var(--space-2);
  align-items:start;
  margin-block:var(--space-3);
  padding-block:var(--space-1);
  min-height:var(--control-standard);
  cursor:pointer
}
.check-label input {
  width:var(--icon-standalone);
  height:var(--icon-standalone);
  flex-shrink:0;
  accent-color:var(--color-text);
  margin:0
}
.notice,.error {
  background:var(--color-surface);
  color:var(--color-on-surface);
  padding:var(--space-3);
  margin-block:var(--space-3)
}
.error {
  border:var(--stroke-control) solid var(--color-text)
}
.break {
  overflow-wrap:anywhere
}
.success-panel {
  max-width:var(--container-reading);
  padding:var(--space-5);
  background:var(--color-surface);
  color:var(--color-on-surface)
}
.success-icon {
  display:grid;
  place-items:center;
  background:var(--fuel-green);
  color:var(--fuel-black);
  width:var(--space-8);
  height:var(--space-8);
  margin-bottom:var(--space-3)
}
.success-panel .actions {
  margin-top:var(--space-4)
}
.metrics-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-5);
  padding-bottom:var(--space-4);
  border-bottom:var(--section-rule)
}
.list-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  margin-block:var(--space-5) var(--space-3)
}
.pagination {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-2);
  margin-block:var(--space-2)
}
.position-head,.position-row {
  display:grid;
  grid-template-columns:1.3fr 1.3fr 1fr .8fr 1fr;
  gap:var(--space-2);
  align-items:center;
  padding:var(--space-2) 0
}
.position-head {
  color:var(--color-text-support);
  border-bottom:var(--stroke-control) solid var(--color-text)
}
.position-row {
  min-height:var(--space-12);
  border-bottom:var(--section-rule)
}
.position-row>div>span {
  display:block
}
.position-row:hover {
  background:var(--color-surface);
  color:var(--color-on-surface)
}
.position-row:hover .support {
  color:var(--color-on-surface)
}
.mobile-label {
  display:none!important
}
.status {
  display:inline-block;
  padding:var(--space-1);
  font-size:var(--type-body);
  line-height:var(--leading-body);
  background:var(--color-surface);
  color:var(--color-on-surface);
  text-transform:capitalize
}
.empty {
  padding:var(--space-6) var(--space-3);
  max-width:var(--container-reading)
}
.empty-symbol {
  margin-bottom:var(--space-3)
}
.empty .actions,.empty>.button {
  margin-top:var(--space-3)
}
.benefits-hero {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--color-surface);
  color:var(--color-on-surface);
  padding:var(--space-4);
  margin-bottom:var(--space-4)
}
.benefits-hero h2 {
  font-size:var(--type-outcome);
  line-height:var(--leading-outcome);
  margin-block:var(--space-2)
}
.benefits-hero>.icon {
  width:var(--space-10);
  height:var(--space-10)
}
.benefits-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-5)
}
.benefits-grid h2 {
  margin-top:var(--space-3)
}
.future-panel {
  margin-top:var(--space-6);
  border-top:var(--section-rule);
  padding-top:var(--space-4)
}
.settings-list {
  max-width:var(--container-workspace)
}
.settings-list section {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-4);
  padding-block:var(--space-4);
  border-bottom:var(--section-rule)
}
.settings-list section>div {
  max-width:var(--container-form)
}
.settings-list select {
  width:auto;
  min-width:12rem
}
.doc-section {
  margin-top:var(--space-5)
}
.network-indicator {
  font-size:var(--type-body);
  padding-inline:var(--space-2)
}
dialog {
  color:var(--color-text);
  background:var(--color-background);
  border:var(--line-control);
  border-radius:var(--radius-dialog);
  padding:0;
  max-height:calc(100dvh - var(--space-4));
  width:min(var(--container-form),calc(100% - var(--space-4)));
  max-width:none
}
dialog::backdrop {
  background:var(--color-modal-scrim)
}
.dialog-inner {
  padding:var(--space-3);
  overflow-y:auto
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  margin-bottom:var(--space-3)
}
.dialog-heading h2 {
  font-size:var(--type-subsection)
}
.mobile-dialog {
  margin:0;
  width:100%;
  height:100dvh;
  max-height:100dvh;
  border:0;
  border-radius:0
}
.mobile-dialog .dialog-inner {
  min-height:100%;
  padding:calc(var(--space-2) + env(safe-area-inset-top)) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom))
}
.mobile-dialog .nav-secondary {
  margin-top:var(--space-3)
}
.mobile-dialog label {
  margin-top:var(--space-3)
}
.mobile-dialog .button {
  margin-top:var(--space-3);
  width:100%
}
.toast {
  position:fixed;
  bottom:calc(var(--space-3) + env(safe-area-inset-bottom));
  right:calc(var(--space-3) + env(safe-area-inset-right));
  max-width:min(var(--container-form),calc(100% - var(--space-6)));
  background:var(--color-secondary-action);
  color:var(--color-on-secondary-action);
  padding:var(--space-2);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  z-index:var(--layer-popover);
  border:var(--stroke-control) solid var(--color-control-border)
}
.offline {
  background:var(--fuel-blue);
  color:var(--fuel-black);
  padding:var(--space-2) var(--page-gutter);
  font-weight:500
}

@media(max-width:79.99rem) {
  .position-head {
  display:none
}
.position-row {
  grid-template-columns:1fr 1fr
}
.position-row .mobile-label {
  display:block!important;
  color:var(--color-text-support)
}
.position-row>.text-link {
  justify-self:start
}
.position-row .status {
  justify-self:start
}
.term-options {
  grid-template-columns:1fr
}
.term-options label {
  flex-direction:row;
  justify-content:space-between;
  padding:var(--space-2)
}
.term-options label span {
  margin-left:auto
}
.app-header>.support {
  display:none
}

}

@media(max-width:63.99rem) {
  .desktop-only,.desktop-nav,.theme-button {
  display:none!important
}
.menu-button {
  display:inline-grid
}
.header {
  padding-block:var(--space-1)
}
.landing-hero {
  grid-template-columns:1fr 1fr
}
.landing-hero h1 {
  font-size:var(--type-49);
  line-height:3.25rem
}
.vault {
  --vault-size:24rem
}
.section-heading {
  gap:var(--space-4)
}
.program-panel {
  padding:var(--space-3)
}
.program-number {
  font-size:var(--type-49)
}
.tiers {
  grid-template-columns:repeat(2,1fr)
}
.sidebar {
  display:none
}
.app-layout {
  display:block
}
.workspace {
  padding-top:var(--space-3)
}
.calculator {
  grid-template-columns:1fr 1fr
}
.portfolio-overview {
  gap:var(--space-3)
}
.earn-highlight {
  padding-left:var(--space-3)
}
.faq-section {
  gap:var(--space-4)
}

}

@media(max-width:47.99rem) {
  .preview-strip {
  gap:var(--space-1);
  justify-content:space-between;
  flex-wrap:wrap
}
.preview-strip a {
  display:none
}
.preview-strip span {
  font-size:var(--type-annotation)
}
.landing-hero {
  grid-template-columns:1fr;
  gap:var(--space-3)
}
.hero-copy .intro {
  margin-top:var(--space-3)
}
.hero-copy .actions {
  align-items:stretch;
  flex-direction:column
}
.hero-copy .text-link {
  justify-content:center
}
.vault {
  --vault-size:24rem;
  width:100%;
  max-width:var(--container-form);
  margin:auto
}
.vault-slab {
  width:65%;
  max-width:18rem
}
.vault-mark {
  font-size:var(--type-76)
}
.vault-caption {
  font-size:var(--type-subsection)
}
.section-heading {
  display:block;
  margin-bottom:var(--space-4)
}
.section-heading>p {
  width:auto;
  margin-top:var(--space-3)
}
.program-grid,.strategy-list,.faq-section,.benefit-line,.choice-grid,.calculator,.account-grid,.benefits-grid {
  grid-template-columns:1fr
}
.strategy-list {
  gap:var(--space-4)
}
.strategy-index {
  margin-bottom:var(--space-2)
}
.strategy-list strong {
  margin-top:var(--space-2)
}
.tiers {
  gap:var(--space-3)
}
.tier-amount {
  font-size:var(--type-intro)
}
.faq-section>div:first-child {
  margin-bottom:var(--space-3)
}
.closing {
  padding-block:var(--space-8)
}
.closing .button {
  width:100%
}
.footer {
  flex-direction:column
}
.page-heading {
  flex-direction:column;
  gap:var(--space-3)
}
.page-heading>.button {
  width:100%
}
.portfolio-overview {
  grid-template-columns:1fr
}
.earn-highlight {
  border-left:0;
  border-top:var(--section-rule);
  padding:var(--space-3) 0 0
}
.earn-highlight>.icon {
  display:none
}
.account-grid {
  gap:var(--space-4)
}
.attention-row {
  flex-wrap:wrap
}
.attention-row>.button {
  width:100%;
  margin-left:0
}
.allocation-row {
  flex-wrap:wrap
}
.allocation-row>div:last-child {
  margin-left:auto
}
.progress ol {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2)
}
.outcome {
  padding:var(--space-3)
}
.term-options {
  grid-template-columns:1fr
}
.success-panel {
  padding:var(--space-3)
}
.success-panel .actions {
  flex-direction:column;
  align-items:stretch
}
.metrics-grid {
  gap:var(--space-4);
  grid-template-columns:1fr
}
.list-toolbar {
  align-items:start;
  flex-direction:column
}
.list-toolbar .actions {
  width:100%;
  align-items:stretch
}
.list-toolbar label {
  flex:1
}
.pagination {
  flex-direction:column;
  align-items:stretch
}
.pagination>.actions {
  justify-content:space-between
}
.position-row {
  padding-block:var(--space-3);
  gap:var(--space-2)
}
.position-row>div:first-child {
  grid-column:1/-1
}
.position-row>.text-link {
  grid-column:1/-1
}
.settings-list section {
  align-items:stretch;
  flex-direction:column;
  gap:var(--space-3)
}
.settings-list select {
  width:100%
}
.benefits-hero {
  padding:var(--space-3);
  gap:var(--space-2)
}
.benefits-hero>.icon {
  width:var(--space-6);
  height:var(--space-6)
}
.dialog-inner {
  padding:var(--space-2)
}
.dialog-inner .actions {
  align-items:stretch;
  flex-direction:column
}
.toast {
  right:calc(var(--space-2) + env(safe-area-inset-right));
  bottom:calc(var(--space-2) + env(safe-area-inset-bottom));
  max-width:calc(100% - var(--space-4))
}

}

@media(max-width:23rem) {
  .tiers {
  grid-template-columns:1fr
}
.position-row {
  grid-template-columns:1fr
}
.logo {
  font-size:var(--type-body)
}
.logo-divider {
  padding-inline:var(--space-1)
}
.vault {
  --vault-size:20rem
}
.program-number {
  font-size:var(--type-39)
}
.allocation-row>div:last-child {
  margin-left:var(--space-4);
  text-align:left
}
.allocation-row .text-link {
  justify-content:start
}
.rows>div {
  flex-direction:column;
  gap:var(--space-1)
}
.rows dd {
  max-width:100%;
  text-align:left
}

}

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

}


.vault-mark img {
  display:block;
  width:100%;
  aspect-ratio:1;
  max-height:var(--space-16)
}
.progress li span .icon {
  width:var(--icon-inline);
  height:var(--icon-inline)
}


h1,h2,h3,p,dt,dd {
  overflow-wrap:anywhere
}
.brand-link {
  min-width:0;
  max-width:calc(100% - var(--target-touch) - var(--space-3))
}
.logo {
  white-space:normal
}
.logo>span {
  overflow-wrap:anywhere
}
.logo img {
  flex-shrink:0
}