/* ============================================================
   PI Webinar-Replay LP — base
   Reset, design tokens, typography, layout primitives
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@500;600&display=swap');

:root {
  /* Surfaces */
  --bg:           #0A0A0A;
  --bg-alt:       #111111;
  --bg-card:      #161616;
  --bg-elev:      #1C1C1C;

  /* Bronze accent — premium matte */
  --bronze:       #C9A86A;
  --bronze-soft:  #B89456;
  --bronze-dim:   rgba(201, 168, 106, 0.18);
  --gold-logo:    #D4AF37;

  /* Text */
  --text:         #EDEDED;
  --text-strong:  #FFFFFF;
  --muted:        #8C8C8C;
  --muted-dim:    #5A5A5A;

  /* Lines */
  --hairline:     1px solid rgba(201, 168, 106, 0.18);
  --hairline-soft: 1px solid rgba(255, 255, 255, 0.06);

  /* Spacing scale */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Type scale (fluid) */
  --fs-eyebrow: 0.78rem;
  --fs-body:    1.0625rem;   /* 17px */
  --fs-lead:    1.25rem;     /* 20px */
  --fs-h4:      1.375rem;    /* 22px */
  --fs-h3:      1.75rem;     /* 28px */
  --fs-h2:      clamp(1.875rem, 3vw + 0.5rem, 2.75rem);
  --fs-h1:      clamp(2.25rem, 5vw + 0.5rem, 4.25rem);
  --fs-stat:    clamp(2.5rem, 6vw, 4.5rem);

  /* Fonts */
  --font-body:  'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-disp:  'Cormorant Garamond', 'Open Sans', serif;  /* used sparingly for editorial pull-quotes */

  /* Container + radius + motion */
  --container:  1180px;
  --radius:     6px;
  --radius-lg:  10px;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ----- Typography ----- */
h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.025em; font-weight: 700; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { margin: 0 0 var(--s-4); color: var(--text); max-width: 70ch; }
strong { color: var(--text-strong); font-weight: 600; }

/* ----- Layout primitives ----- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.section {
  padding-block: clamp(64px, 9vw, 128px);
  position: relative;
}
.section--alt { background: var(--bg-alt); }
.section--narrow { padding-block: clamp(48px, 6vw, 80px); }

.section-head {
  max-width: 720px;
  margin: 0 auto var(--s-8);
  text-align: center;
}
.section-head p { margin-inline: auto; color: var(--muted); font-size: var(--fs-lead); }
.section-head--left { text-align: left; margin-inline: 0; }

/* Eyebrow tag — bronze caps */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: var(--s-4);
}

/* Pull-quote (editorial serif) */
.pull-quote {
  font-family: var(--font-disp);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.35;
  font-weight: 500;
  font-style: italic;
  color: var(--text-strong);
}

/* Helpers */
.muted   { color: var(--muted); }
.hairline { border: 0; border-top: 1px solid rgba(201,168,106,0.22); margin-block: var(--s-7); }
.center  { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Selection */
::selection { background: var(--bronze); color: #0A0A0A; }