/*
 * Shared type roles for the public site.
 * Page-level styles still control composition and task-specific density.
 */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin.woff2?v=468d56b6") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2?v=01817351") format("woff2");
}

:root {
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --type-ink: #18201c;
  --type-muted: #59655e;
  --type-soft: #68746d;
  --type-accent: #b94818;
  --type-display-xl: clamp(3.25rem, 8vw, 6rem);
  --type-display-lg: clamp(2.75rem, 6.5vw, 5.25rem);
  --type-display-md: clamp(2.625rem, 5vw, 4rem);
  --type-heading-lg: clamp(1.875rem, 3.5vw, 2.625rem);
  --type-heading-md: clamp(1.625rem, 2.5vw, 2rem);
  --type-heading-sm: 1.125rem;
  --type-lead: clamp(1.125rem, 1.6vw, 1.3125rem);
  --type-body: 1rem;
  --type-prose: 1.125rem;
  --type-ui: 0.875rem;
  --type-meta: 0.8125rem;
}

html {
  font-size: 100%;
}

body {
  color: var(--type-ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font-family: inherit;
  letter-spacing: 0;
}

h1,
h2,
h3,
p,
li,
summary,
figcaption {
  letter-spacing: 0;
}

h1,
h2 {
  text-wrap: balance;
}

h3,
p,
li,
figcaption {
  text-wrap: pretty;
}

/* Shared brand and navigation roles */
.brand {
  color: var(--type-ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}

.links,
.navlinks {
  color: var(--type-muted);
  font-size: var(--type-ui);
  font-weight: 600;
  line-height: 1.3;
}

.links a,
.navlinks a {
  font-weight: inherit;
}

.nav-cta,
.button:not(.secondary) {
  background: var(--type-accent);
  color: #fff;
  font-size: var(--type-ui);
  font-weight: 700;
}

.nav-cta:hover,
.button:not(.secondary):hover {
  background: #9d3b13;
}

.eyebrow,
.breadcrumb,
.article-meta,
.post-meta,
.updated,
.footer-title {
  font-family: var(--font-body);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

.article-meta,
.post-meta,
.updated {
  color: var(--type-soft);
}

.footer,
footer {
  font-size: var(--type-ui);
}

.footer-title {
  font-size: 0.75rem;
}

.footer-copy,
.footer-list a,
.footer-brand,
.footer-list span {
  color: var(--type-muted);
  font-size: var(--type-ui);
  line-height: 1.6;
}

.footer-list a {
  font-weight: 600;
}

.footer-brand strong {
  color: var(--type-ink);
  font-weight: 700;
}

.footer-brand,
.footer-brand span,
.internal-page .hero > *,
.internal-page .layout > *,
.internal-page .contact-grid > *,
.article-page .article-layout > * {
  min-width: 0;
}

.footer-brand span {
  overflow-wrap: anywhere;
}

/* Homepage: persuasive headline, compact product controls, readable sections */
.home-page {
  --display: var(--font-display);
  --body: var(--font-body);
  --color-text-primary: var(--type-ink);
  --color-text-secondary: var(--type-muted);
  --color-text-tertiary: var(--type-soft);
}

.home-page .topbar,
.home-page .nav {
  height: 4.5rem;
}

.home-page h1 {
  max-width: 38rem;
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  font-weight: 700;
  line-height: 1;
}

.home-page .hero-subhead {
  max-width: 37rem;
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
}

.home-page .lead {
  max-width: 35rem;
  color: var(--type-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.home-page .section h2,
.home-page .editorial h2,
.home-page .cta h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading-lg);
  font-weight: 700;
  line-height: 1.08;
}

.home-page .card h3,
.home-page .content-columns h3,
.home-page summary,
.home-page .panel-title,
.home-page .upload-title {
  font-family: var(--font-body);
  font-size: var(--type-heading-sm);
  font-weight: 700;
  line-height: 1.35;
}

.home-page .card p,
.home-page .content-columns p,
.home-page details p,
.home-page .section-intro {
  color: var(--type-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.home-page .camera-heading h2,
.home-page .share-sheet__header h2 {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

.home-page .result-age,
.home-page .insight-grid strong,
.home-page .step-num {
  font-variant-numeric: tabular-nums;
}

/* General information and trust pages */
.internal-page {
  --body: var(--font-body);
  --display: var(--font-display);
  color: var(--type-ink);
  font-family: var(--font-body);
}

.internal-page h1 {
  max-width: 56rem;
  font-family: var(--font-display);
  font-size: var(--type-display-lg);
  font-weight: 700;
  line-height: 1;
}

.internal-page .lead,
.internal-page .dek {
  max-width: 47.5rem;
  color: var(--type-muted);
  font-size: var(--type-lead);
  line-height: 1.55;
}

.internal-page h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading-md);
  font-weight: 700;
  line-height: 1.15;
}

.internal-page h3 {
  font-family: var(--font-body);
  font-size: var(--type-heading-sm);
  font-weight: 700;
  line-height: 1.35;
}

.internal-page .body p,
.internal-page .body li,
.internal-page .content p,
.internal-page .content li,
.internal-page .section-block p,
.internal-page .section-block li {
  color: var(--type-muted);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.internal-page .hero-note,
.internal-page .toc {
  color: var(--type-muted);
  font-size: var(--type-ui);
  line-height: 1.65;
}

.internal-page .hero-note strong,
.internal-page .toc,
.internal-page .accent,
.internal-page .text-link,
.internal-page .link-list a,
.internal-page .email-link,
.internal-page .button {
  font-weight: 700;
}

.internal-page .accent,
.internal-page .text-link,
.internal-page .email-link {
  overflow-wrap: anywhere;
}

/* How-it-works is explanatory prose rather than a policy page. */
.how-page {
  --body: var(--font-body);
  --display: var(--font-display);
}

.how-page main > h1 {
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  font-weight: 700;
  line-height: 1.02;
}

.how-page main > h1 + p {
  max-width: 46rem;
  margin-top: 1.5rem;
  color: var(--type-muted);
  font-size: var(--type-lead);
  line-height: 1.6;
}

.how-page main > h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading-md);
  font-weight: 700;
  line-height: 1.15;
}

.how-page .card h2 {
  font-family: var(--font-body);
  font-size: var(--type-heading-sm);
  font-weight: 700;
  line-height: 1.35;
}

.how-page main > p,
.how-page main > ul,
.how-page main > ol {
  max-width: 46rem;
}

.how-page main p,
.how-page main li {
  color: var(--type-muted);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.how-page .accent {
  color: var(--type-accent);
  font-weight: 700;
}

/* Blog index: editorial discovery with a stronger display signal. */
.blog-index-page {
  --body: var(--font-body);
  --display: var(--font-display);
}

.blog-index-page h1 {
  font-family: var(--font-display);
  font-size: var(--type-display-xl);
  font-weight: 700;
  line-height: 0.98;
}

.blog-index-page .lead {
  color: var(--type-muted);
  font-size: var(--type-lead);
  line-height: 1.55;
}

.blog-index-page .post-row h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading-lg);
  font-weight: 700;
  line-height: 1.08;
}

.blog-index-page .post-row p {
  color: var(--type-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Articles: long-form measure and generous leading stay article-only. */
.article-page {
  --body: var(--font-body);
  --display: var(--font-display);
}

.article-page h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
}

.article-page .dek {
  color: var(--type-muted);
  font-size: var(--type-lead);
  line-height: 1.55;
}

.article-page .article-body {
  width: 100%;
  min-width: 0;
  max-width: 68ch;
}

.article-page .article-body h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading-lg);
  font-weight: 700;
  line-height: 1.12;
}

.article-page .article-body h3 {
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.4;
}

.article-page .article-body p,
.article-page .article-body li {
  color: var(--type-muted);
  font-size: var(--type-prose);
  line-height: 1.75;
}

.article-page .article-body a,
.article-page .side-note a,
.article-page .next-row a,
.article-page .faq summary,
.article-page .comparison-table th {
  font-weight: 700;
}

.article-page .article-figure figcaption,
.article-page .side-note,
.article-page .factor p,
.article-page .sources li {
  color: var(--type-soft);
}

@media (max-width: 53.75rem) {
  .internal-page h1 {
    font-size: clamp(2.75rem, 10vw, 4.25rem);
  }

  .internal-page .toc {
    width: 100%;
    min-width: 0;
  }

  .article-page .comparison-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
  }
}

@media (max-width: 35rem) {
  .home-page .topbar,
  .home-page .nav {
    height: 4rem;
  }

  .home-page h1,
  .how-page main > h1 {
    font-size: 2.5rem;
  }

  .internal-page h1,
  .article-page h1 {
    font-size: 2.75rem;
  }

  .contact-page h1 {
    font-size: 2.5rem;
  }

  .blog-index-page h1 {
    font-size: 4rem;
  }

  .internal-page .footer-brand {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .internal-page .footer-brand span {
    flex-basis: 100%;
    padding-left: 2.125rem;
  }
}