@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-normal.ef05b30d6e5c.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

.public-surface {
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --color-navy: #0b1f3b;
  --color-gold: #c9a96b;
  --color-sand: #e8e4dc;
  --color-canvas: #fafaf8;
  --color-portal: #e8e4dc;
  --color-ink: #2e2e2e;
  --color-slate: #5e5b55;
  --color-line: #d8d1c4;
  --color-mineral: #0b1f3b;
  --color-mineral-dark: #0b1f3b;
  --public-line-strong: #b7ad9b;
  --public-line-inverse: #6b6b68;
  --public-text-inverse: #fafaf8;
  --public-text-inverse-muted: #e8e4dc;
  --public-focus: #0b1f3b;
  --public-truth-bg: #e8e4dc;
  --public-truth-text: #0b1f3b;
  --shadow-raised: 0 18px 48px rgb(11 31 59 / 8%);
  font-family: var(--font-sans);
  background: var(--color-canvas);
  color: var(--color-ink);
  caret-color: var(--color-navy);
  scrollbar-color: var(--color-gold) var(--color-canvas);
}

.public-surface ::selection {
  color: var(--color-navy);
  background: var(--color-sand);
}

.public-surface h1,
.public-surface h2,
.public-surface h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.public-surface .shell {
  width: min(calc(100% - clamp(2rem, 8vw, 8rem)), 76rem);
}

.public-surface .public-header.site-header {
  background: var(--color-canvas);
  backdrop-filter: none;
}

.public-surface .button {
  border-radius: 0.4rem;
  font-weight: 600;
  box-shadow: none;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.public-surface .button-primary {
  color: var(--color-canvas);
  background: var(--color-navy);
}

.public-surface .button-secondary {
  color: var(--color-navy);
  background: var(--color-canvas);
  border-color: var(--public-line-strong);
}

@media (hover: hover) and (pointer: fine) {
  .public-surface .public-header-login:hover {
    background: var(--color-sand);
    border-color: var(--color-navy);
  }
}

.public-surface .button:not(:disabled):active:not(:focus-visible) {
  transform: scale(0.97);
}

.public-surface :focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--color-canvas);
}

.public-surface .public-home {
  --public-story-space: clamp(3.5rem, 7vw, 6rem);
}

.public-surface .public-home .public-home-hero {
  padding-block: clamp(3rem, 6.5vw, 6rem);
  background: var(--color-canvas);
}

.public-surface .public-home-hero::before {
  inset: 0 0 0 58%;
  background: var(--color-sand);
  clip-path: none;
}

.public-surface .public-home-hero-copy h1 {
  max-width: 20ch;
  font-size: clamp(2.65rem, 4.1vw, 4rem);
  line-height: 1.12;
  color: var(--color-navy);
}

.public-surface .public-home-hero-copy p {
  max-width: 43ch;
  color: var(--color-slate);
  font-size: clamp(1rem, 1.45vw, 1.125rem);
  line-height: 1.8;
}

.public-surface .public-home-hero-copy .button {
  background: var(--color-gold);
  color: var(--color-navy);
  min-height: 3.25rem;
  padding-inline: 1.5rem;
}

.public-surface .public-hero-portal,
.public-surface .public-portal-demo {
  background: var(--color-canvas);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-raised);
}

.public-surface .public-hero-portal-header,
.public-surface .public-portal-demo-header {
  background: var(--color-canvas);
}

.public-surface .public-hero-portal-body {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.public-surface .public-hero-edition-media picture {
  border-radius: 0.25rem;
}

.public-surface .public-hero-edition-copy h3 {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.25;
}

.public-surface .public-home-benefit-list > div {
  border-color: var(--color-gold);
}

.public-surface .public-home-benefits h2,
.public-surface .public-pricing h2,
.public-surface .public-home-context h2,
.public-surface .public-feature h2,
.public-surface .public-sample-teaser h2,
.public-surface .public-home-faq h2 {
  color: var(--color-navy);
  line-height: 1.16;
}

.public-surface .public-home-context {
  background: var(--color-sand);
}

.public-surface .public-home-context-copy > p {
  color: var(--color-slate);
}

.public-surface .public-home-sample-quote {
  background: var(--color-navy);
  border-radius: 0.5rem;
}

.public-surface .public-home-sample-quote > p {
  color: var(--color-canvas);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.45;
}

.public-surface .public-home-sample-quote > cite,
.public-surface .public-about-copy > p:last-child {
  color: var(--color-sand);
}

.public-surface .public-about-founder {
  color: var(--color-gold);
}

.public-surface .public-about-home h2 {
  color: var(--color-canvas);
  line-height: 1.18;
}

.public-surface .public-price-plan {
  background: var(--color-canvas);
  border-radius: 0.5rem;
}

.public-surface .public-price-plan h3 {
  font-size: 1.65rem;
}

.public-surface .public-price {
  font-variant-numeric: tabular-nums;
}

.public-surface .public-price-plan-featured {
  color: var(--color-canvas);
  background: var(--color-navy);
}

.public-surface .public-price-plan-featured :is(.public-price span, .public-price-context, .public-price-total-context, .public-plan-features, small) {
  color: var(--color-sand);
}

.public-surface .public-price-benefit,
.public-surface .public-price-total {
  color: var(--color-navy);
  background: var(--color-gold);
  border-radius: 0.3rem;
}

.public-surface .public-price-plan-featured .button-primary {
  color: var(--color-navy);
  background: var(--color-sand);
}

.public-surface .public-price-plan .button:disabled {
  opacity: 1;
  color: var(--color-slate);
  background: var(--color-sand);
  border-color: transparent;
}

.public-surface .public-archive-demo,
.public-surface .public-analysis-demo {
  background: var(--color-sand);
  border-radius: 0.5rem;
  box-shadow: none;
}

.public-surface .public-archive-demo > header,
.public-surface .public-archive-list,
.public-surface .public-archive-list > * {
  border-color: var(--public-line-strong);
}

.public-surface .public-footer {
  background: var(--color-sand);
}

.public-surface .footer-heading {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: normal;
}

.public-surface .public-sample-document {
  background: var(--color-canvas);
  box-shadow: none;
}

.public-surface :is(.sample-edition-choice[aria-current], .sample-portfolio-tile, .sample-portfolio-tile[data-portfolio-held="true"], .sample-margin-figure, .sample-context-section) {
  color: var(--color-ink);
  background: var(--color-sand);
}

.public-surface .sample-chart-previous,
.public-surface .sample-chart-rest {
  fill: var(--color-gold);
}

.public-surface .sample-source-mark[data-source-active="true"]::before {
  background: var(--color-sand);
  border-color: var(--public-line-strong);
}

.public-surface .sample-document-subtitle.sample-source-mark {
  border-radius: 0;
}

.public-surface .sample-document-subtitle.sample-source-mark::before {
  display: none;
}

.public-surface .sample-document-subtitle:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 6px;
  box-shadow: none;
}

.public-surface .sample-source-panel {
  background: var(--color-canvas);
  scrollbar-color: var(--color-gold) var(--color-canvas);
}

@media (hover: hover) and (pointer: fine) {
  .public-surface .button-primary:not(:disabled):hover {
    color: var(--color-navy);
    background: var(--color-gold);
  }

  .public-surface .public-home-hero-copy .button:hover {
    background: var(--color-sand);
  }

  .public-surface .public-header-actions .button-compact:hover::before {
    background: var(--color-gold);
  }

  .public-surface .button-secondary:not(:disabled):hover,
  .public-surface .public-faq-list summary:hover {
    background: var(--color-sand);
  }
}

@media (min-width: 64rem) {
  .public-surface .public-home .public-home-hero-layout {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .public-surface .public-home-hero-demo {
    width: min(100%, 38rem);
  }

  .public-surface .public-home-hero-copy h1 {
    max-width: none;
    font-size: clamp(2.25rem, 3.5vw, 3.5rem);
  }

  .public-surface .public-home-hero::before {
    left: 51%;
  }
}

@media (max-width: 53.999rem) {
  .public-surface .public-home-hero::before {
    display: none;
  }

  .public-surface .public-home-hero-demo {
    width: 100%;
  }

  .public-surface .public-hero-portal {
    background: var(--color-sand);
    box-shadow: none;
  }

  .public-surface .public-hero-portal-header {
    background: var(--color-sand);
  }
}

@media (max-width: 27.999rem) {
  .public-surface .public-header-row {
    width: calc(100% - 1.5rem);
  }

  .public-surface .public-header-actions {
    gap: 0.75rem;
  }

  .public-surface .public-home-hero-copy h1 {
    font-size: clamp(2.1rem, 9vw, 2.65rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-surface .button {
    transition: none;
  }

  .public-surface .button:not(:disabled):active:not(:focus-visible) {
    transform: none;
  }
}

@media (forced-colors: active) {
  .public-surface :focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}