/* Hers AI typography layer
   Editorial display type for intimate brand moments, quiet grotesk for UI.
   Loaded after styles.css so the product keeps its existing layout and color system. */

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/instrument-sans:vf@5.3.0/latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Bodoni Moda Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/bodoni-moda:vf@5.3.0/latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Bodoni Moda Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/bodoni-moda:vf@5.3.0/latin-wght-italic.woff2') format('woff2-variations');
}

:root {
  --display: 'Bodoni Moda Variable', 'Bodoni 72', Didot, 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans Variable', 'Avenir Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--sans);
  font-synthesis: none;
}

body,
button,
textarea,
input,
select {
  font-family: var(--sans);
}

/* Real logo replaces faux text wordmarks. */
.wordmark {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 0;
  line-height: 1;
}
.brand-logo {
  display: block;
  width: auto;
  height: 31px;
  object-fit: contain;
}
.brand-logo-gate {
  height: 38px;
  margin: 0 0 22px;
}

/* Stop treating every label like a launch-day keynote. */
.eyebrow { font-weight: 600; letter-spacing: .14em; }
.button { font-weight: 650; }
.text-button { font-weight: 550; }
.status-pill,
.adult-mark { font-weight: 650; }

.age-card h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.7vw, 2.45rem);
  line-height: 1.06;
  letter-spacing: -.018em;
}

.hero {
  padding-top: clamp(28px, 5vw, 54px);
}
.hero h1 {
  max-width: 760px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.35rem, 5vw, 3.55rem);
  line-height: .99;
  letter-spacing: -.024em;
}
.hero h1 em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.015em;
}
.hero-lede { font-weight: 500; }
.hero-note { font-weight: 500; letter-spacing: .025em; }

.cc-name {
  margin-top: 18px;
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.4vw, 1.95rem);
  font-weight: 550;
  letter-spacing: .005em;
  line-height: 1;
  text-transform: none;
}
.cc-tag { font-weight: 600; letter-spacing: .055em; }
.cc-cta { font-weight: 650; }
.pro-tag { font-weight: 650; }

.section-title,
.pro-section h2,
.dialog-copy h2,
.terms-copy h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.015em;
}
.section-title {
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
  line-height: 1.1;
}
.pro-section h2 {
  font-size: clamp(1.65rem, 2.9vw, 2.05rem);
  line-height: 1.07;
}
.pro-section h2 em { font-style: italic; }
.pro-price {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 550;
  letter-spacing: -.015em;
}

.edge h3,
.chat-identity h1,
.account-sections summary,
.upgrade-card strong {
  font-weight: 600;
}

.chat-intro .intro-name {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}

/* SEO comparison pages inherit the same brand voice instead of a mystery font token. */
.article h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.018em;
}
.article h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.5vw, 1.72rem);
  letter-spacing: -.01em;
}
.article h3 { font-weight: 600; }

/* Checkout success page: same product, same voice. */
.success-page h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.3rem);
  letter-spacing: -.012em;
}
.success-page .button,
.success-page .eyebrow,
.success-page .num { font-weight: 600; }

@media (max-width: 480px) {
  .brand-logo { height: 28px; }
  .brand-logo-gate { height: 34px; }
  .hero h1 { font-size: clamp(2.18rem, 11vw, 3rem); }
}