/* X&X TAP v0.4.1 — v0.2-inspired readable type system.
   Font families remain the original Manrope + Cormorant Garamond.
   Improves legibility without removing any of the v0.4 layout/features. */
:root {
  --xx-readable-sans: 'Manrope', Arial, sans-serif;
  --xx-readable-display: 'Cormorant Garamond', Georgia, serif;
}

/* Restore the v0.2 clarity: Manrope for utility and content,
   Cormorant Garamond reserved for memorable editorial headlines. */
body.x3-body, .xx-profile-page, .xx-hub-page {
  font-family: var(--xx-readable-sans);
  font-weight: 500;
}
body.x3-body { line-height: 1.55; }
body.x3-body button,
body.x3-body input,
body.x3-body select,
body.x3-body textarea,
.xx-hub-page button,
.xx-hub-page input,
.xx-hub-page select,
.xx-hub-page textarea { font-family: var(--xx-readable-sans); }

/* Showcase — less compressed headlines, better optical weight. */
.x3-hero h1 {
  font-family: var(--xx-readable-display);
  font-size: clamp(65px, 7.3vw, 112px);
  line-height: .96;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: 34px 0 31px;
}
.x3-hero h1 em,
.x3-section h2 em,
.x3-end h2 em { font-weight: 500; }
.x3-hero h1 .x3-highlight::after { bottom: 1px; }
.x3-section h2,
.x4-made-intro h2 {
  font-family: var(--xx-readable-display);
  font-size: clamp(53px, 6.2vw, 95px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.x3-end h2 {
  font-family: var(--xx-readable-display);
  font-size: clamp(66px, 8vw, 123px);
  font-weight: 600;
  line-height: .99;
  letter-spacing: -.025em;
}
.x3-faq h2 { font-size: clamp(52px, 5.6vw, 84px); }
.x3-value-card h3 { font: 600 clamp(35px, 3.35vw, 51px)/1.06 var(--xx-readable-display); letter-spacing: -.015em; }
.x3-lab-person h3 { font: 600 clamp(36px, 3.7vw, 48px)/1.05 var(--xx-readable-display); letter-spacing: -.025em; }
.x3-steps h3 { font: 600 clamp(32px, 3vw, 44px)/1.08 var(--xx-readable-display); }
.x3-fake-editor h3 { font: 600 clamp(28px, 2.7vw, 37px)/1.1 var(--xx-readable-display); }
.x3-product-bottom h3 { font: 600 clamp(34px, 3.8vw, 50px)/1.08 var(--xx-readable-display); }
.x3-tier h3 { font: 600 clamp(30px, 2.7vw, 39px)/1.08 var(--xx-readable-display); }
.x3-phone-name { line-height: .97; }
.x3-marquee-inner { font: 600 31px var(--xx-readable-display); }

/* Explanatory content — no tiny print for important selling copy. */
.x3-hero-sub,
.x3-intro-copy p,
.x3-lab-copy > p,
.x3-price-head p,
.x4-made-intro p { font-size: 15px; line-height: 1.85; }
.x3-value-card p,
.x3-faq-items p { font-size: 14px; line-height: 1.8; }
.x3-navlinks > a:not(.x3-pill), .x4-nav-audience { font-size: 12px; font-weight: 700; }
.x3-pill, .x3-navlinks .x3-nav-cta, .x3-textlink, .x3-arrow-link { font-size: 12px; }
.x3-kicker, .x3-overline, .x3-section-label, .x3-hero-meta, .x3-hero-footer { font-size: 10px; letter-spacing: .12em; }
.x3-pricing-note { font-size: 11px; line-height: 1.7; }
.x3-faq-items summary { font-size: 14px; line-height: 1.5; }

/* Made for You — maintain v0.4 mega-menu and use-case grid. */
.x4-mega-feature h2 {
  font: 600 clamp(36px, 3vw, 48px)/1.06 var(--xx-readable-display);
  letter-spacing: -.025em;
}
.x4-mega-feature p, .x4-mega-note { font-size: 13px; line-height: 1.7; }
.x4-mega-label, .x4-eyebrow { font-size: 10px; letter-spacing: .11em; }
.x4-mega-column > a { font-size: 13px !important; line-height: 1.5; }
.x4-mega-cta { font-size: 12px !important; }
.x4-audience-card h3 {
  font: 600 clamp(29px, 2.65vw, 41px)/1.08 var(--xx-readable-display);
  letter-spacing: -.02em;
}
.x4-audience-card p { font-size: 13px; line-height: 1.7; }
.x4-audience-card a { font-size: 12px; line-height: 1.4; }
.x4-card-top { font-size: 10px; letter-spacing: .08em; }
.x4-made-footer { font-size: 12px; letter-spacing: .04em; }
.x4-audience-card { min-height: 380px; }
.x4-audience-spotlight { min-height: 455px; }

/* Public Tap profile — contact details, biography and action labels. */
.xx-public h1 { font-family: var(--xx-readable-display); font-weight: 600; line-height: 1.06; }
.xx-greeting, .xx-role { font-size: 12px; line-height: 1.6; }
.xx-bio { font-size: 14px; line-height: 1.8; }
.xx-link-card strong { font-size: 14px; line-height: 1.5; }
.xx-mini-sections p { font-size: 14px; line-height: 1.75; }
.xx-contact-actions button, .xx-contact-actions a { font-size: 13px; }
.xx-profile-footer { font-size: 10px; }

/* Hub editor — practical readability, especially input labels and navigation. */
.xx-hub-rail button, .xx-hub-rail a,
.xx-form-grid label, .xx-tier-selector label { font-size: 13px; }
.xx-hub-heading p, .xx-editor-panel > p, .xx-demo-alert { font-size: 13px; line-height: 1.7; }
.xx-form-grid input, .xx-form-grid textarea, .xx-link-fields input,
.xx-tier-selector select { font-size: 14px; line-height: 1.5; }
.xx-choice-row button, .xx-theme-grid button,
.xx-save-foot button, .xx-editor-bottom button { font-size: 12px; }
.xx-preview-head strong { font-weight: 600; }

@media (max-width: 1024px) {
  .x3-hero h1 { font-size: clamp(64px, 8.9vw, 98px); }
  .x3-section h2 { font-size: clamp(52px, 7.5vw, 85px); }
  .x4-audience-card { min-height: 360px; }
}
@media (max-width: 720px) {
  .x3-hero h1 { font-size: clamp(62px, 12vw, 82px); line-height: .98; }
  .x3-section h2, .x4-made-intro h2 { font-size: clamp(50px, 9.2vw, 68px); line-height: 1.05; }
  .x3-end h2 { font-size: clamp(60px, 10vw, 84px); }
  .x3-hero-sub { font-size: 14px; }
  .x4-audience-card { min-height: 350px; }
  .x4-mega-feature h2 { font-size: 39px; }
}
@media (max-width: 540px) {
  .x3-hero h1 { font-size: clamp(58px, 12.6vw, 73px); line-height: 1; letter-spacing: -.028em; }
  .x3-section h2, .x4-made-intro h2 { font-size: clamp(47px, 9.5vw, 62px); }
  .x3-hero-sub { font-size: 14px; line-height: 1.75; }
  .x3-intro-copy p, .x3-lab-copy > p, .x3-price-head p, .x4-made-intro p { font-size: 14px; }
  .x4-audience-grid { grid-template-columns: 1fr; }
  .x4-audience-card, .x4-audience-spotlight { grid-column: auto; min-height: 305px; }
  .x4-audience-card h3 { font-size: 40px; }
  .x4-audience-card p { font-size: 14px; }
  .x4-audience-card a { font-size: 13px; }
  .x4-audience-spotlight { min-height: 420px; }
  .x4-audience-spotlight .x4-card-art { max-height: 170px; }
  .x4-mega { grid-template-columns: 1fr; }
  .x4-mega-feature { grid-column: auto; }
  .x4-mega-feature h2 { font-size: 38px; }
  .x4-mega-column > a { font-size: 13px !important; }
  .x4-card-top { font-size: 11px; }
  .x3-steps h3 { font-size: 36px; }
  .x3-tier h3 { font-size: 40px; }
}