.brand-mark-image {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

/* Second Star spacing and type contract. Keep section rhythm, list rhythm,
   and the middle heading scale explicit so new content does not collapse into
   one oversized display style and tiny captions. */
:root {
  --fs-display: clamp(40px, 6vw, 72px);
  --fs-h2: clamp(28px, 3.5vw, 40px);
  --fs-h3: clamp(22px, 2.5vw, 26px);
  --fs-body: 17px;
  --fs-eyebrow: 15px;
  --lh-tight: 1.1;
  --lh-body: 1.6;
  --space-list-gap: 8px;
  --space-eyebrow-heading: 16px;
  --space-heading-body: 32px;
  --space-section: 96px;
}

.site-page .eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .06em; margin-bottom: var(--space-eyebrow-heading); }
.site-page h1 { font-size: var(--fs-display); line-height: var(--lh-tight); }
.site-page h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.site-page h3, .site-page .page-card h2, .site-page .faq-item h2 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
.site-page p, .site-page li { line-height: var(--lh-body); }
.site-page .page-section { padding-block: 0; }
.site-page .page-section + .page-section { margin-top: var(--space-section); }
.site-page .page-section > h2 + .checklist,
.site-page .page-section > h2 + .page-grid,
.site-page .page-section > h2 + .page-list { margin-top: var(--space-heading-body); }
.site-page .checklist li + li, .site-page .page-list li + li { margin-top: var(--space-list-gap); }
.site-page li strong { margin-right: .35ch; }

.brand {
  gap: 12px;
  font-size: 15px;
  letter-spacing: .12em;
}

/* Keep the marketing copy legible over the paper field without turning the
   hero into a heavy card. The teal edge gives the app's hero treatment a
   quieter editorial counterpart. */
.hero-copy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(46, 134, 168, 0.26);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(46, 134, 168, 0.12));
  box-shadow: 0 18px 45px rgba(43, 34, 48, 0.12), 6px 6px 0 rgba(46, 134, 168, 0.14);
  backdrop-filter: blur(14px) saturate(1.06);
}

.hero-copy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), transparent 42%);
}

.hero-copy > * {
  position: relative;
  z-index: 1;
}

.hero-art {
  background: radial-gradient(circle at 58% 45%, rgba(66, 111, 130, 0.44) 0, #223444 36%, #18222d 72%);
  box-shadow: 12px 12px 0 rgba(46, 134, 168, 0.18);
}

.hero-art .star {
  filter: drop-shadow(0 0 8px rgba(244, 181, 60, 0.72));
}

@media (max-width: 800px) {
  .hero-copy {
    padding: 30px 24px;
  }
}

.site-page { padding: 70px 0 110px; }
.page-hero { max-width: 780px; padding: 58px 0 78px; }
.page-hero h1 { max-width: 760px; }
.page-hero .lede { max-width: 650px; }
.page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.page-card { padding: 30px; border: 1px solid rgba(24,34,45,.14); border-radius: 22px; background: rgba(255,255,255,.42); box-shadow: 5px 5px 0 rgba(46,134,168,.1); }
.page-card .step-number { font-size: 30px; }
.page-card h2, .page-card h3 { margin-top: 16px; }
.page-card h2 { font-size: 30px; }
.page-card p { color: rgba(24,34,45,.68); font-size: 14px; line-height: 1.7; }
.page-card p:last-child { margin-bottom: 0; }
.page-section { padding: 65px 0; }
.page-section h2 { margin-bottom: 30px; }
.page-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 50px; margin: 0; padding: 0; list-style: none; }
.page-list li { padding: 18px 0 18px 28px; border-top: 1px solid rgba(24,34,45,.16); color: rgba(24,34,45,.72); font-size: 15px; position: relative; }
.page-list li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); }
.checklist { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: checklist; }
.checklist li { display: grid; grid-template-columns: 40px 190px 1fr; gap: 18px; align-items: start; padding: 20px 22px; border: 1px solid rgba(24,34,45,.14); border-radius: 16px; background: rgba(255,255,255,.42); counter-increment: checklist; }
.checklist li::before { content: counter(checklist); display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: 700 13px var(--display); }
.checklist strong { font: 700 16px var(--display); }
.checklist span { color: rgba(24,34,45,.68); font-size: 14px; line-height: 1.6; }
.checklist-compact li { grid-template-columns: 40px 210px 1fr; padding-block: 16px; }
.page-feedback-button { margin-top: 28px; }
.page-note { margin-top: 28px; padding: 22px 26px; border-left: 3px solid var(--gold); background: rgba(244,181,60,.12); color: rgba(24,34,45,.72); font-size: 14px; }
.faq-list { max-width: 850px; }
.faq-item { padding: 25px 0; border-top: 1px solid rgba(24,34,45,.16); }
.faq-item h2 { margin: 0 0 10px; font-size: 24px; }
.faq-item p { max-width: 700px; margin: 0; color: rgba(24,34,45,.7); line-height: 1.7; }
.page-cta { margin-top: 60px; padding: 48px; border-radius: 24px; background: var(--blue); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.page-cta h2 { font-size: 42px; }
.page-cta .eyebrow { color: #f4d889; }
@media (max-width: 800px) { .site-page { padding: 35px 0 75px; } .page-hero { padding: 35px 0 55px; } .page-grid, .page-list { grid-template-columns: 1fr; } .checklist li, .checklist-compact li { grid-template-columns: 34px 1fr; gap: 12px; padding: 17px; } .checklist span { grid-column: 2; } .page-section { padding: 45px 0; } .page-cta { align-items: flex-start; flex-direction: column; padding: 34px 26px; } .page-cta h2 { font-size: 36px; } }