/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM — Apple SF Pro / system stack
   Same fonts as apple.com on Mac/iOS (-apple-system); system-ui elsewhere
   ═══════════════════════════════════════════════════════════════ */

:root {
  --font-apple: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'SF Mono Regular', Menlo, Consolas, monospace;
  /* ─── Color (shared tokens) ─── */
  --fire: #ff3d00;
  --gold: #ffa500;
  --ember: #ff1744;
  --violet: #7c3aed;
  --mint: #00e5a0;
  --bg: #05030a;
  --s1: #0f0b17;
  --s2: #17112a;
  --bd: rgba(255, 255, 255, 0.06);
  --txt: #f8f5ff;
  --mut: rgba(248, 245, 255, 0.5);
  --dim: rgba(248, 245, 255, 0.22);

  /* ─── Font families (Apple.com stack) ─── */
  --font-display: var(--font-apple);
  --font-body: var(--font-apple);
  --font-label: var(--font-apple);

  /* ─── Type scale (fluid where noted) ─── */
  --text-2xs: 0.5rem;
  --text-xs: 0.625rem;
  --text-sm: 0.75rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 2.5vw, 1.5rem);
  --text-2xl: clamp(1.65rem, 3.5vw, 2rem);
  --text-3xl: clamp(2rem, 4.5vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 5.5vw, 3.5rem);
  --text-5xl: clamp(3.2rem, 7.5vw, 5.5rem);
  --text-hero: clamp(3.5rem, 8.5vw, 6.25rem);

  /* ─── Line height ─── */
  --leading-display: 1.05;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.47059;
  --leading-relaxed: 1.6;
  --leading-loose: 1.75;

  /* ─── Letter-spacing ─── */
  --tracking-tight: -0.022em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-label: 0.06em;
  --tracking-caps: 0.08em;
  --tracking-display: -0.015em;

  /* ─── Spacing rhythm (4px base) ─── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4rem, 10vw, 6rem);

  /* ─── Weights ─── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* ─── Document base ─── */
html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--txt);
}

p {
  line-height: var(--leading-relaxed);
  color: var(--mut);
}

strong {
  font-weight: var(--weight-semibold);
  color: var(--txt);
}

/* ─── Semantic heading scale ─── */
h1,
.h1,
.type-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  color: var(--txt);
}

h2,
.h2,
.type-h2,
.sh,
.dbh,
.co-h,
.sv-h,
.age-h {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  color: var(--txt);
}

h3,
.h3,
.type-h3,
.pm-name,
.spc-h,
.sf-h {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

h4,
.type-h4,
.lgbox h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--gold);
}

/* ─── Labels & meta ─── */
.type-label,
.stag,
.pm-cat,
.pm-rel-h,
.co-sec,
.areas-t,
.spc-tag,
.ftcolh,
.ann-t,
.sct,
.tkr,
.resc,
.spt,
.hlive,
.delp,
.delsub,
.rsc,
.rvso,
.ci-p,
.ci-qn,
.ci-rm,
.cp-safe,
.co-step-label,
.co-step-dot,
.f label,
.pay-m-lbl,
.vid-notice,
.ftca p,
.ftbot,
.ftlinks .cnt,
.pm-old,
.pm-save,
.pm-rc-price {
  font-family: var(--font-label);
}

.stag,
.pm-cat,
.co-sec,
.areas-t,
.spc-tag,
.ftcolh {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

/* ─── Body text sizes ─── */
.type-body-lg,
.hsub,
.pm-desc,
.faqa,
.lgbox p,
.lgbox ul li,
.age-p,
.sv-p,
.ftabout,
.rvt,
.spc-p,
.sf-t,
.dbs {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--mut);
}

.type-body,
.ut,
.fi-d,
.dp-d,
.pm-safety-box,
.pm-specs,
.delgrid p,
.co-s {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.type-body-sm,
.fi-t,
.delic,
.rvn,
.faqq,
.ftlinks a,
.ftca a {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.type-caption,
.rcount,
.pm-rc-name,
.cp-tr,
.csr,
.age-legal {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--dim);
}

/* ─── Display / hero ─── */
.hh1,
.hw1,
.hw2 {
  font-family: var(--font-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
}

.hw1 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
}

.hw2 {
  font-size: var(--text-hero);
  font-weight: var(--weight-medium);
}

/* ─── Section headings (inline + home) ─── */
.sh {
  margin-bottom: var(--space-4);
}

.cmn,
.ftlogo,
.cp-ht,
.vid-brand-text {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
}

.cmn {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

.cmc {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
}

/* ─── Prices ─── */
.pc-price,
.pm-price,
.rsn,
.cptv-tot,
.csr.tot span:last-child {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: 1.1;
}

.pm-price {
  font-size: var(--text-2xl);
}

.rsn {
  font-size: var(--text-3xl);
}

/* ─── Buttons (unified) ─── */
button,
[type='button'],
[type='submit'] {
  font-family: var(--font-body);
}

.bprim,
.bgho,
.nshop,
.pc-atc,
.pm-atc,
.cp-co,
.copl,
.age-y,
.age-n,
.cobk,
.pm-vid-btn,
.flt,
.srtsel {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1.2;
}

.bprim,
.bgho {
  font-size: var(--text-sm);
}

.bprim {
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
}

.nshop,
.pc-atc,
.pm-atc,
.cp-co,
.copl,
.age-y {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}

.bgho,
.cobk,
.age-n {
  font-weight: var(--weight-semibold);
}

.flt,
.srtsel,
.pm-tab {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}

.pm-tab {
  font-weight: var(--weight-bold);
}

/* ─── Form inputs ─── */
input,
select,
textarea {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.srch input {
  font-size: var(--text-sm);
}

.f input,
.f select,
.f textarea {
  font-size: var(--text-sm);
}

/* ─── Nav (uses tokens) ─── */
.nlogo,
.nav-drawer-hd .nlogo {
  font-family: var(--font-display);
}

/* ─── Global: match apple.com (overrides legacy inline font rules) ─── */
.hh1,
.hw1,
.hw2,
.sh,
.cmn,
.vid-brand-text,
.pm-name,
.pm-price,
.rsn,
.sf-h,
.spc-h,
.dbh,
.cp-ht,
.cptv-tot,
.co-h,
.sv-h,
.lgbox h2,
.age-h,
.ftlogo,
.csr.tot span:last-child,
.ann-t,
.sct,
.tkr,
.hlive,
.spt,
.stag,
.pm-cat,
.pm-old,
.pm-save,
.pm-rel-h,
.co-sec,
.areas-t,
.spc-tag,
.ftcolh,
.ftbot,
.ftca p,
.co-step-label,
.co-step-dot,
.vid-notice,
.cp-safe,
.ci-p,
.ci-qn,
.flt,
.srtsel,
.resc,
.srch input,
.pg,
.faqq,
.f input,
.f select,
.f textarea,
.pm-rc-price,
.rsc,
.rvso,
.delsub,
.delp,
.cmc {
  font-family: var(--font-apple) !important;
}

.rss,
.pm-bdg,
.utag,
.ftbadge {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
}

.lgbox h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display);
}

.ftlogo {
  font-size: var(--text-2xl);
}

.co-h {
  font-size: var(--text-3xl);
}

/* ─── Section spacing rhythm ─── */
.sec {
  padding: var(--space-section) clamp(1.5rem, 5vw, 4rem);
}

.sh + p,
.stag + .sh {
  margin-top: 0;
}

.stag {
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}

.stag::before {
  width: 1.125rem;
}

/* ─── Home page aliases ─── */
#home {
  --home-serif: var(--font-display);
}

/* ─── Cascade overrides (legacy inline rules) ─── */
.ann-t,
.tkr,
.hlive,
.spt,
.resc,
.stag,
.pm-cat,
.pm-old,
.pm-save,
.pm-rel-h,
.co-sec,
.areas-t,
.spc-tag,
.ftcolh,
.ftbot,
.ftca p,
.co-step-label,
.co-step-dot,
.f label,
.vid-notice,
.cp-safe,
.ci-p,
.ci-qn {
  font-family: var(--font-label);
}

.hh1,
.hw1,
.hw2,
.sh,
.cmn,
.vid-brand-text,
.pm-name,
.pm-price,
.rsn,
.sf-h,
.spc-h,
.dbh,
.cp-ht,
.cptv-tot,
.co-h,
.sv-h,
.lgbox h2,
.age-h,
.ftlogo,
.csr.tot span:last-child {
  font-family: var(--font-display);
}

.bprim,
.bgho,
.nshop,
.pc-atc,
.pm-atc,
.cp-co,
.copl,
.age-y,
.age-n,
.cobk,
.pm-vid-btn,
.flt,
.srtsel,
.pm-tab,
.faqq,
.f input,
.f select,
.f textarea,
.srch input {
  font-family: var(--font-body);
}

/* Readable body copy */
.hsub,
.pm-desc,
.faqa,
.lgbox p,
.age-p,
.sv-p,
.dbs,
.ftabout,
.rvt,
.spc-p,
.sf-t {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}

.fi-d,
.dp-d,
.co-s,
.pm-safety-box,
.ut {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Section rhythm */
.inn > .stag + .sh {
  margin-top: var(--space-2);
}

.home-sec-head .sh,
#home .home-sec-head h2,
#home .home-sec .sh {
  font-family: var(--font-display);
}

#home .home-lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}

#home .home-sec-link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
}