/* CostCompass — Landing page styles */

/* Base is provided by ../colors_and_type.css — this adds page-level structure. */

html,
body,
#root {
  min-height: 100%;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
}
button {
  font-family: inherit;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* ───────── Page rhythm ───────── */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Match the /app header (Tailwind bg-bone-50/80): the surface tone at 80%,
     not the darker page background (--bg / bone-100). --surface == --bone-50. */
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-hair);
}
.lp-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  height: 68px;
  display: flex;
  align-items: center;
  /* Brand + nav sit left-justified together (matching the /app header);
     the nav-right controls are pushed to the far right via margin-left:auto
     on .lp-nav-right. The gap sets the brand→nav separation. */
  gap: 40px;
}
.lp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-brand img {
  display: block;
}
/* Compass brand mark. Background-image so the .dark theme class swaps to the
   dark variant (cream/tan strokes) — same mark the app shows in dark mode —
   rather than recoloring the light SVG with a filter. */
.lp-compass-mark {
  display: block;
  flex: none;
  background: url("/assets/compass-light.svg") center / contain no-repeat;
}
.dark .lp-compass-mark {
  background-image: url("/assets/compass-dark.svg");
}
.lp-wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 30;
}
.lp-brand-tag {
  padding-left: 12px;
  border-left: var(--border-hair);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
/* Beta-period label — copper bordered box, mirrors the app header. */
.lp-beta {
  flex: none;
  padding: 2px 6px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* --beta-accent (not --copper-600) so the landing's copper-intensity
     control doesn't shift the tag away from the Astro pages' copper. */
  color: var(--beta-accent);
  border: 1px solid color-mix(in srgb, var(--beta-accent) 40%, transparent);
}
.lp-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.lp-nav a {
  position: relative;
  font-size: 14px;
  color: var(--fg-muted);
  transition: color 0.15s;
}
.lp-nav a:hover {
  color: var(--fg);
}
/* Active page: brighter text + a 1px copper underline, matching the /app
   header's active NavLink. Set via aria-current="page" in SiteChrome. */
.lp-nav a[aria-current="page"] {
  color: var(--fg);
}
.lp-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--copper-600);
}
.lp-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  /* Push the theme toggle + auth CTAs to the far right, leaving brand + nav
     left-justified. */
  margin-left: auto;
}
.lp-nav-right .lp-btn {
  white-space: nowrap;
}

/* ───────── Section frame ───────── */
.lp-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 40px;
  position: relative;
}
.lp-section-tight {
  padding: 80px 40px;
}
.lp-section-meta {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  text-transform: uppercase;
  pointer-events: none;
}
.lp-section-meta span:last-child {
  text-align: right;
}

/* ───────── Hero ───────── */
.lp-hero {
  padding-top: 96px;
  padding-bottom: 80px;
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.lp-hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.lp-hero-kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--copper-600);
}

.lp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 0 0.25em;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 28;
}
.lp-hero h1 .line {
  display: block;
}
.lp-hero h1 em {
  font-style: italic;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100;
  color: var(--copper-600);
  padding-right: 0.05em;
}
.lp-hero .lead {
  margin-top: 48px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 56ch;
  text-wrap: pretty;
}
.lp-hero-questions {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg-soft);
  font-variation-settings:
    "opsz" 36,
    "SOFT" 30;
  max-width: 30ch;
}
.lp-hero-questions em {
  font-style: italic;
  color: var(--copper-600);
  font-variation-settings:
    "opsz" 36,
    "SOFT" 100;
  padding-right: 0.04em;
}
.lp-hero-ctas {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.lp-hero-note {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--fg-faint);
  text-transform: uppercase;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.lp-hero-note .sep {
  width: 1px;
  height: 10px;
  background: var(--rule);
}

/* Side panel — almanac "frontispiece" list of supported services */
.lp-frontispiece {
  border: var(--border-hair);
  background: var(--surface);
  padding: 28px 30px;
  position: relative;
}
.lp-frontispiece h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 20px;
}
.lp-frontispiece ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-frontispiece li {
  display: flex;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule);
  color: var(--fg-soft);
}
.lp-frontispiece li:last-child {
  border-bottom: none;
}
.lp-frontispiece li .dots {
  flex: 1;
  border-bottom: 1px dotted var(--rule);
  margin: 0 8px;
  transform: translateY(-4px);
}
.lp-frontispiece li .state {
  color: var(--copper-600);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.lp-frontispiece li .kind {
  font-size: 10px;
  color: var(--fg-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lp-frontispiece .fp-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}

/* MTD-by-service variant of the frontispiece */
.lp-fp-mtd {
  padding: 26px 26px 22px;
}
.lp-fp-mtd .fp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.lp-fp-mtd .fp-head h4 {
  margin: 0;
  color: var(--copper-600);
  white-space: nowrap;
}
.lp-fp-mtd .fp-period {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.lp-fp-mtd .fp-total {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 6px;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 16px;
  font-feature-settings: "tnum" 1;
}
.lp-fp-mtd .fp-total .d {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--fg-muted);
  align-self: start;
  padding-top: 10px;
}
.lp-fp-mtd .fp-total .n {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 20;
}
.lp-fp-mtd .fp-total .n small {
  font-size: 22px;
  color: var(--fg-muted);
  letter-spacing: -0.02em;
}
.lp-fp-mtd .fp-total-lbl {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  text-transform: uppercase;
  margin-top: 6px;
}
.lp-fp-mtd .fp-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-fp-mtd .fp-rows li {
  display: block;
  border: none;
  padding: 0;
}
.lp-fp-mtd .fp-row-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-sans);
  margin-bottom: 5px;
  gap: 10px;
}
.lp-fp-mtd .fp-row-name {
  font-size: 12.5px;
  color: var(--fg);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lp-fp-mtd .fp-row-val {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--fg);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.lp-fp-mtd .fp-bar-wrap {
  height: 2px;
  background: rgba(17, 17, 17, 0.06);
  overflow: hidden;
}
.dark .lp-fp-mtd .fp-bar-wrap {
  background: rgba(237, 232, 222, 0.1);
}
.lp-fp-mtd .fp-bar {
  height: 100%;
  background: var(--fg);
}
.lp-fp-mtd .fp-bar.copper {
  background: var(--copper-600);
}
.lp-fp-mtd .fp-row-ft {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}

/* Three-answers variant of the frontispiece — three stacked tiles, one per question */
.lp-fp-answers {
  padding: 26px 26px 22px;
}
.lp-fp-answers .fp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.lp-fp-answers .fp-head h4 {
  margin: 0;
  color: var(--copper-600);
  white-space: nowrap;
}
.lp-fp-answers .fp-period {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.lp-fp-answers .fp-tile {
  padding: 18px 0 16px;
  border-top: 1px solid var(--rule);
}
.lp-fp-answers .fp-tile-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.lp-fp-answers .fp-tile-lbl .period {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  font-weight: 400;
}
.lp-fp-answers .fp-tile.copper .fp-tile-lbl {
  color: var(--copper-600);
}
.lp-fp-answers .fp-tile-val {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-feature-settings: "tnum" 1;
}
.lp-fp-answers .fp-tile-val .d {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--fg-muted);
}
.lp-fp-answers .fp-tile-val .n {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 20;
}
.lp-fp-answers .fp-tile.copper .fp-tile-val .n {
  color: var(--copper-600);
}
.lp-fp-answers .fp-tile-val .n small {
  font-size: 16px;
  color: var(--fg-muted);
  letter-spacing: -0.01em;
}

/* ───────── Dashboard preview ───────── */
.lp-preview-wrap {
  margin: 0 auto;
  max-width: 1140px;
  border: var(--border-hair);
  background: var(--surface);
  box-shadow:
    0 1px 0 rgba(17, 17, 17, 0.04),
    0 0 0 1px rgba(17, 17, 17, 0.06),
    0 30px 60px -30px rgba(17, 17, 17, 0.18);
  position: relative;
}
.lp-preview-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: var(--border-hair);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}
.lp-preview-dots {
  display: flex;
  gap: 6px;
}
.lp-preview-dots span {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--bone-300);
  display: block;
}
.lp-preview-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  background: var(--bg);
  padding: 4px 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  letter-spacing: 0.03em;
}
.lp-preview-body {
  padding: 40px;
}

/* Inside-preview layout reuses app-shape but in a static way */
.lp-preview-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}
.lp-preview-hdr .t {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 30;
}
.lp-preview-money {
  padding: 28px;
  border: var(--border-hair);
  background: var(--surface);
  position: relative;
  margin-bottom: 28px;
}
.lp-preview-money::before,
.lp-preview-money::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--fg);
  pointer-events: none;
}
.lp-preview-money::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}
.lp-preview-money::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}
.lp-preview-money .mtd {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.lp-preview-money .mtd .d {
  font-family: var(--font-display);
  color: var(--fg-muted);
  font-size: 22px;
  padding-top: 10px;
}
.lp-preview-money .mtd .n {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-feature-settings:
    "tnum" 1,
    "ss01";
  font-variation-settings:
    "opsz" 144,
    "SOFT" 20;
}
.lp-preview-money .mtd .n small {
  color: var(--fg-muted);
  font-size: 72px;
}
.lp-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--rule);
}
.lp-preview-stats .stat .l {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.lp-preview-stats .stat .v {
  font-family: var(--font-display);
  font-size: 22px;
  margin-top: 6px;
  font-feature-settings: "tnum" 1;
}
.lp-preview-stats .stat .v small {
  color: var(--fg-muted);
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.lp-preview-row2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 28px;
}
.lp-preview-card {
  border: var(--border-hair);
  background: var(--surface);
  padding: 20px;
}
.lp-preview-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.lp-preview-card-hdr .l {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.lp-preview-card-hdr .m {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-faint);
  letter-spacing: 0.02em;
}
.lp-bar-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.lp-bar-row:last-child {
  border-bottom: none;
}
.lp-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.lp-bar-name {
  font-size: 13px;
}
.lp-bar-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-feature-settings: "tnum" 1;
}
.lp-bar-wrap {
  height: 3px;
  background: rgba(17, 17, 17, 0.06);
  overflow: hidden;
}
.dark .lp-bar-wrap {
  background: rgba(237, 232, 222, 0.1);
}
.lp-bar {
  height: 100%;
  background: var(--fg);
  transform-origin: left;
}
.lp-bar.copper {
  background: var(--copper-600);
}
.lp-bar-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-faint);
}

/* ───────── Features grid ───────── */
.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: var(--border-hair);
  background: var(--surface);
}
.lp-feature {
  padding: 44px 36px;
  border-right: var(--border-hair);
  position: relative;
}
.lp-feature:last-child {
  border-right: none;
}
.lp-feature-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--copper-600);
  text-transform: uppercase;
}
.lp-feature h3 {
  margin: 14px 0 22px;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 30;
}
.lp-feature p {
  margin: 0;
  color: var(--fg-soft);
  font-size: 14.5px;
  line-height: 1.55;
}
.lp-feature-demo {
  margin-top: 24px;
  min-height: 120px;
}

/* Provider-guide cards reuse .lp-feature but are links into /guides/. Strip
   the anchor defaults and lay them out as a column so the "Read the guide"
   affordance pins to the bottom and the three cards stay equal height. */
.lp-guide-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.lp-guide-card:hover {
  background: color-mix(in srgb, var(--surface) 95%, var(--fg) 5%);
}
.lp-guide-go {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--copper-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp-guide-go svg {
  width: 14px;
  height: 14px;
}
.lp-guide-card:hover .lp-guide-go {
  color: var(--copper-700);
}

/* Features H2 — three-questions framing */
.lp-features-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 12px auto 0;
  max-width: 18ch;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 30;
}
.lp-features-title em {
  font-style: italic;
  color: var(--copper-600);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100;
  padding-right: 0.03em;
}

/* Feature demo visuals */
.demo-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px dashed var(--rule);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
}
.demo-track .line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--fg-soft);
  white-space: nowrap;
}
.demo-track .line > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.demo-track .line .tick {
  color: var(--copper-600);
}

/* Card I — bill-statement style line items with a copper TOTAL footer */
.demo-statement {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px dashed var(--rule);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
}
.demo-statement .line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--fg-soft);
  white-space: nowrap;
  padding: 5px 0;
}
.demo-statement .line > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  letter-spacing: 0.04em;
}
.demo-statement .line .amt {
  font-feature-settings: "tnum" 1;
  color: var(--fg);
}
.demo-statement .line.total {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
  color: var(--copper-600);
  letter-spacing: 0.08em;
}
.demo-statement .line.total .amt {
  color: var(--copper-600);
}

/* Card II — compact month-to-date pastiche with burn / runway micro-stats */
.demo-mtd {
  padding: 14px 16px 16px;
  border: 1px solid var(--rule);
  background: var(--bg);
  position: relative;
}
.demo-mtd::before,
.demo-mtd::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--fg);
  pointer-events: none;
}
.demo-mtd::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}
.demo-mtd::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}
.demo-mtd .lbl {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-600);
}
.demo-mtd .num {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-feature-settings: "tnum" 1;
}
.demo-mtd .num .d {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--fg-muted);
}
.demo-mtd .num .n {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--fg);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 20;
}
.demo-mtd .num .n small {
  font-size: 18px;
  color: var(--fg-muted);
  letter-spacing: -0.01em;
}
.demo-mtd .sub {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.demo-mtd .sub .sl {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.demo-mtd .sub .sv {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 16px;
  font-feature-settings: "tnum" 1;
}
.demo-mtd .sub .sv small {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--fg-muted);
  letter-spacing: 0;
}

.demo-forecast svg {
  width: 100%;
  height: 120px;
  display: block;
}

.demo-alert {
  border: 1px solid var(--signal-warn);
  color: var(--signal-warn);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--signal-warn) 6%, transparent);
}
.demo-alert .a-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.demo-alert .a-body {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--fg);
  letter-spacing: -0.015em;
}
.demo-alert .a-foot {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  text-transform: uppercase;
}

/* ───────── Pricing ───────── */
.lp-pricing-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 12px auto 0;
  max-width: 18ch;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 30;
}
.lp-pricing-title em {
  font-style: italic;
  color: var(--copper-600);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100;
  padding-right: 0.03em;
}
.lp-pricing-card {
  max-width: 760px;
  margin: 0 auto;
  border: var(--border-hair);
  background: var(--surface);
  position: relative;
}
.lp-pricing-card::before,
.lp-pricing-card::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--fg);
  pointer-events: none;
}
.lp-pricing-card::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}
.lp-pricing-card::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}
.lp-pricing-head {
  text-align: center;
  padding: 40px 36px 28px;
  border-bottom: 1px solid var(--rule);
}
.lp-pricing-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-feature-settings: "tnum" 1;
}
.lp-pricing-price .d {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--fg-muted);
  align-self: start;
  padding-top: 14px;
}
.lp-pricing-price .n {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--fg);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 20;
}
.lp-pricing-price .per {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--copper-600);
  margin-left: 4px;
  font-variation-settings:
    "opsz" 36,
    "SOFT" 100;
}
.lp-pricing-sub {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.lp-pricing-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}
.lp-pricing-col {
  padding: 32px 36px;
}
.lp-pricing-col + .lp-pricing-col {
  border-left: 1px solid var(--rule);
}
.lp-pricing-col .label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-600);
  margin-bottom: 18px;
}
.lp-pricing-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-pricing-col li {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--fg-soft);
  padding-left: 18px;
  position: relative;
}
.lp-pricing-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--copper-600);
}
.lp-pricing-foot {
  padding: 28px 36px 36px;
  text-align: center;
}

@media (max-width: 640px) {
  .lp-pricing-body {
    grid-template-columns: 1fr;
  }
  .lp-pricing-col + .lp-pricing-col {
    border-left: none;
    border-top: 1px solid var(--rule);
  }
}

/* ───────── CTA ───────── */
.lp-cta {
  text-align: center;
  padding: 140px 40px;
  border-top: var(--border-hair);
  border-bottom: var(--border-hair);
  position: relative;
  max-width: none;
  margin: 60px 0 0;
}
.lp-cta::before,
.lp-cta::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 1px;
  background: var(--copper-600);
  top: 50%;
}
.lp-cta::before {
  left: 40px;
}
.lp-cta::after {
  right: 40px;
}
.lp-cta .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--copper-600);
  text-transform: uppercase;
}
.lp-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 20px auto 28px;
  max-width: 18ch;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 40;
}
.lp-cta h2 em {
  font-style: italic;
  color: var(--copper-600);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100;
}
.lp-cta p {
  max-width: 52ch;
  margin: 0 auto 32px;
  color: var(--fg-soft);
  font-size: 16px;
}
.lp-cta .ctas {
  display: inline-flex;
  gap: 14px;
}
.lp-cta-note {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ───────── Footer ───────── */
.lp-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lp-footer .col {
  display: flex;
  gap: 24px;
  align-items: baseline;
}
.lp-footer a:hover {
  color: var(--fg);
}
.lp-footer-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.15s;
}
.lp-footer-link:hover {
  color: var(--fg);
}

/* ───────── Video Modal ───────── */
.lp-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.lp-video-modal {
  position: relative;
  width: 100%;
  max-width: 1040px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
  aspect-ratio: 16 / 9;
}
.lp-video-modal video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}
.lp-video-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.65);
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.15s;
}
.lp-video-close:hover {
  color: white;
}
.lp-video-close svg {
  width: 20px;
  height: 20px;
}

/* Video CTA — play-icon ghost button */
.lp-btn-video .lp-btn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--copper-600);
}
.lp-btn-video .lp-btn-play svg {
  width: 14px;
  height: 14px;
}
.lp-btn-video:hover .lp-btn-play {
  color: inherit;
}

/* ───────── Legal Modal ───────── */
.lp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lp-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}
.lp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}
.lp-modal-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
.lp-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--fg-muted);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.lp-modal-close:hover {
  color: var(--fg);
}
.lp-modal-close svg {
  width: 16px;
  height: 16px;
}
.lp-modal-body {
  overflow-y: auto;
  padding: 24px 28px;
  flex: 1;
}
.lp-modal-text {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg);
}
.lp-modal-text h2 {
  font-size: 13px;
  font-weight: 600;
  margin: 20px 0 6px;
  color: var(--fg);
}
.lp-modal-text h2:first-child {
  margin-top: 0;
}
.lp-modal-text p {
  line-height: 1.7;
  margin: 0 0 12px;
}
.lp-modal-text ul {
  margin: 0 0 12px;
  padding-left: 18px;
  line-height: 1.7;
}
.lp-modal-text li {
  margin-bottom: 4px;
}
.lp-modal-text strong {
  font-weight: 600;
}
.lp-modal-text em {
  font-style: italic;
}
.lp-modal-footer {
  padding: 14px 28px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ───────── Buttons ───────── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-family: var(--font-sans);
  padding: 12px 22px;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.lp-btn:hover {
  background: var(--copper-700);
  border-color: var(--copper-700);
  color: #fdfbf7;
}
.lp-btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--rule);
}
.lp-btn-ghost:hover {
  border-color: var(--fg);
  background: transparent;
  color: var(--fg);
}
.lp-btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}

/* Icon wrapper inside button */
.lp-btn svg {
  width: 14px;
  height: 14px;
}

/* ───────── Variants ───────── */
/* Default = restrained */
body.variant-editorial .lp-section {
  padding-top: 140px;
  padding-bottom: 140px;
}
body.variant-editorial .lp-hero h1 {
  letter-spacing: -0.045em;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 70;
}
body.variant-editorial .lp-section-meta {
  display: flex;
}
body.variant-editorial .lp-section::before {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  top: 70px;
  height: 1px;
  background: var(--rule);
}
body.variant-editorial .lp-features {
  border: none;
  background: transparent;
  gap: 1px;
  background: var(--rule);
}
body.variant-editorial .lp-feature {
  background: var(--surface);
  border-right: none;
}

body.variant-specimen .lp-hero h1 {
  font-size: clamp(60px, 9vw, 128px);
  letter-spacing: -0.05em;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 10;
}
body.variant-specimen .lp-feature {
  padding: 56px 36px;
}
body.variant-specimen .lp-feature h3 {
  font-size: 38px;
}
body.variant-specimen .lp-feature::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--fg);
  border-top: 1px solid var(--fg);
}
body.variant-specimen .lp-feature::after {
  content: "";
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--fg);
  border-bottom: 1px solid var(--fg);
}
body.variant-specimen .lp-preview-wrap {
  border-width: 2px;
}

/* Restrained = default, no special rules */

/* Tick-corners toggle: hide corner marks on money panel and specimen mode if off */
body.no-ticks .lp-preview-money::before,
body.no-ticks .lp-preview-money::after,
body.no-ticks.variant-specimen .lp-feature::before,
body.no-ticks.variant-specimen .lp-feature::after {
  display: none;
}

/* Density: tight */
body.density-tight .lp-section {
  padding-top: 80px;
  padding-bottom: 80px;
}
body.density-tight .lp-hero {
  padding-top: 72px;
  padding-bottom: 56px;
}
body.density-tight .lp-cta {
  padding-top: 100px;
  padding-bottom: 100px;
}
body.density-tight .lp-feature {
  padding: 32px 28px;
}

/* ───────── Responsive ───────── */
@media (max-width: 900px) {
  .lp-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .lp-features {
    grid-template-columns: 1fr;
  }
  .lp-feature {
    border-right: none;
    border-bottom: var(--border-hair);
  }
  .lp-feature:last-child {
    border-bottom: none;
  }
  .lp-preview-row2 {
    grid-template-columns: 1fr;
  }
  .lp-nav {
    display: none;
  }
}

/* Phone — collapse decorative chrome and promote a single primary CTA.
   The theme toggle and "Start free" CTA are dropped; both routes (Sign
   in / Start free) hit the same WorkOS endpoint, so leaving only "Sign
   in" still admits both new and returning users without overflowing the
   header. */
@media (max-width: 600px) {
  .lp-header-inner {
    padding: 0 16px;
    gap: 12px;
  }
  .lp-brand-tag {
    display: none;
  }
  .lp-nav-right {
    gap: 8px;
  }
  /* Drop the decorative theme toggle and the duplicate "Start free" CTA
     on phones. Keep whichever primary action the header is currently
     rendering — "Sign in" for signed-out, "Dashboard" for signed-in —
     and promote it to filled style so it reads as the primary action.
     Selecting by intent class (not by ghost/non-ghost styling) keeps
     signed-in users on small screens from losing their app entry point. */
  .lp-nav-theme,
  .lp-nav-start {
    display: none;
  }
  .lp-nav-signin,
  .lp-nav-dashboard {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
  }

  .lp-section {
    padding: 72px 16px;
  }
  .lp-section-tight {
    padding: 48px 16px;
  }
  .lp-section-meta {
    top: 24px;
    left: 16px;
    right: 16px;
  }

  .lp-hero h1 {
    /* Each .line span is display:block, so the heading wraps as
       "Three questions about" / "your AI bill." Below ~38px the first
       line fits in a 393px-wide viewport and we avoid an orphaned
       "about" on its own line. */
    font-size: 36px;
    letter-spacing: -0.025em;
  }

  /* Dashboard preview — at <=600px the nested padding (body 40 + money
     28 = 68px each side) leaves <70px per stat cell, narrower than
     "$31,120.00" at 16px nowrap, so the rightmost value visibly spills
     past its cell. Tighten the nested padding and shrink the headline
     so the card breathes symmetrically on iPhone 12-class screens. */
  .lp-preview-body {
    padding: 20px 16px;
  }
  .lp-preview-money {
    padding: 20px 16px;
    margin-bottom: 20px;
  }
  .lp-preview-money .mtd .n,
  .lp-preview-money .mtd .n small {
    font-size: 48px;
  }
  .lp-preview-money .mtd .d {
    font-size: 18px;
    padding-top: 4px;
  }
  .lp-preview-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .lp-preview-stats .stat .v {
    font-size: 15px;
    white-space: nowrap;
  }
  .lp-preview-stats .stat .v small {
    font-size: 10px;
    white-space: nowrap;
  }
  .lp-preview-card {
    padding: 16px;
  }
  .lp-hero-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .lp-hero-note .sep {
    display: none;
  }

  .lp-cta {
    padding: 80px 16px;
  }
  .lp-cta::before {
    left: 16px;
  }
  .lp-cta::after {
    right: 16px;
  }

  .lp-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 16px 40px;
  }
  .lp-footer .col {
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* ───────── Prose surface (Security page, future long-form docs) ─────────
   Pre-rendered Markdown HTML lives inside .lp-prose. Constrain width
   for reading comfort and give headings/code/tables sensible defaults.
   The diagrams are committed SVGs and need to scale down on narrow
   screens. */
.lp-prose {
  max-width: 760px;
  padding: 80px 40px 120px;
  font-family: var(--font-sans);
  color: var(--fg-soft);
  line-height: 1.65;
}
.lp-prose h1 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 32px;
}
.lp-prose h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--fg);
  margin: 64px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.lp-prose h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  margin: 40px 0 12px;
}
.lp-prose p,
.lp-prose ul,
.lp-prose ol {
  margin: 0 0 18px;
}
.lp-prose ul,
.lp-prose ol {
  padding-left: 22px;
}
.lp-prose li {
  margin: 6px 0;
}
.lp-prose strong {
  color: var(--fg);
  font-weight: 600;
}
.lp-prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bone-200);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--fg);
  /* Long unbroken tokens (DNS names, dotted identifiers) would otherwise
     push the page wider than narrow phone viewports. */
  overflow-wrap: anywhere;
}
.lp-prose pre {
  background: var(--bone-200);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.lp-prose pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}
.lp-prose blockquote {
  border-left: 3px solid var(--accent);
  margin: 0 0 18px;
  padding: 4px 16px;
  color: var(--fg-muted);
}
.lp-prose table {
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14px;
  width: 100%;
}
.lp-prose th,
.lp-prose td {
  border: 1px solid var(--rule);
  padding: 8px 12px;
  text-align: left;
}
.lp-prose th {
  background: var(--bone-200);
  font-weight: 600;
  color: var(--fg);
}
.lp-prose hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}
.lp-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.lp-prose a:hover {
  color: var(--accent-hover);
}
.lp-prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px auto;
}
.lp-prose em {
  font-style: italic;
  color: var(--fg-muted);
}

/* Diagrams ship as paired light/dark SVGs (see render-security.mjs).
   Break them out of the 760px prose column, but display each SVG at
   its native size so the embedded 16px text matches the surrounding
   body text. If a diagram's native width exceeds the container, it
   scales down (which makes its text smaller — accept that). */
.lp-prose .cc-diagram {
  display: block;
  text-align: center;
  margin: 32px 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100vw - 80px), 1100px);
  max-width: none;
}
.lp-prose .cc-diagram img {
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}
.lp-prose .cc-diagram-dark {
  display: none;
}
.dark .lp-prose .cc-diagram-light {
  display: none;
}
.dark .lp-prose .cc-diagram-dark {
  display: block;
}

.dark .lp-prose code,
.dark .lp-prose pre,
.dark .lp-prose th {
  background: rgba(255, 255, 255, 0.04);
}