/* ============================================================
   Reformer — Brand design system
   Tokens pulled verbatim from reformer.la's published Webflow
   :root variables. Amethyst #1b162e · Mountain Dew #f3ff6f ·
   Periwinkle #f4f0ff · Magenta #d839ab · Indigo #422eff.
   Type: adelle-sans (Adobe Typekit kit opb7avl) — the face the
   live site uses for headings + body.
   ============================================================ */

:root {
  /* ---- brand (reformer.la :root) ---- */
  --rf-amethyst:     #1b162e;   /* dark canvas + primary text */
  --rf-amethyst-lift:#241d3c;   /* lifted amethyst for gradients */
  --rf-dew:          #f3ff6f;   /* signature accent (mountain dew) */
  --rf-periwinkle:   #f4f0ff;   /* light surface + text on dark */
  --rf-lavender:     #eae7f5;   /* alt light surface */
  --rf-paper:        #f0edf8;   /* neutral light base (alpha source) */
  --rf-magenta:      #d839ab;   /* link / accent */
  --rf-indigo:       #422eff;   /* brand blue-indigo */
  --rf-success:      #01e787;
  --rf-white:        #ffffff;

  /* amethyst (ink) alphas — over light surfaces */
  --rf-ink-88: #1b162ee0;
  --rf-ink-64: #1b162ea3;
  --rf-ink-48: #1b162e7a;
  --rf-ink-16: #1b162e29;
  --rf-ink-10: #1b162e14;
  /* periwinkle (paper) alphas — over dark/brand surfaces */
  --rf-paper-88: #f0edf8e0;
  --rf-paper-64: #f0edf8a3;
  --rf-paper-48: #f0edf87a;
  --rf-paper-16: #f0edf829;
  --rf-paper-10: #f0edf814;

  /* ---- type ---- */
  --font-display: 'adelle-sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'adelle-sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'adelle-sans', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 22px;
  --radius-sm: 13px;
  --hairline: 1px solid var(--rf-ink-16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--rf-amethyst);
  color: var(--rf-amethyst);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- logo lockup: R-mark + Reformer wordmark ---- */
.lockup { display: inline-flex; align-items: center; gap: 0.5em; line-height: 1; }
.lockup .mark { height: 1.25em; width: auto; flex: none; display: inline-block; }
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }

/* ---- shared primitives ---- */
.kicker {
  font-family: var(--font-mono); font-size: 1.45cqw; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; display: inline-block;
}
.headline {
  font-family: var(--font-display); font-weight: 600; font-size: 6.4cqw;
  line-height: 1.04; letter-spacing: -0.022em; margin: 0; text-wrap: balance;
}
.headline.sm { font-size: 5cqw; }
.headline.xl { font-size: 8.2cqw; letter-spacing: -0.03em; }
.lead { font-size: 2.5cqw; line-height: 1.45; font-weight: 400; max-width: 46ch; margin: 0; }
.lead.muted { opacity: 0.66; }

/* inline emphasis — colour resolved per theme in deck.css */
em.hl { font-style: normal; color: var(--rf-magenta); font-weight: 700; }

.figure { font-family: var(--font-display); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* pill / tag */
.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: 1.2cqw; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.5em 1.05em; border-radius: 999px; border: 1px solid currentColor;
}
.pill-row { display: flex; flex-wrap: wrap; gap: 0.7cqw; }

/* columns */
.cols { display: grid; gap: 3cqw; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.col-h { font-family: var(--font-display); font-weight: 600; font-size: 2.4cqw; letter-spacing: -0.015em; margin: 0 0 0.6em; }

/* bullets */
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { font-size: 1.85cqw; line-height: 1.48; padding-left: 1.5em; position: relative; margin-bottom: 0.55em; }
.bullets li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; }

/* callout — the punch line */
.callout { font-family: var(--font-display); font-weight: 600; font-size: 2.5cqw; line-height: 1.3; letter-spacing: -0.014em; margin: 0; }

/* helpers */
.center { text-align: center; }
.muted { opacity: 0.62; }

/* ---- email-the-PDF modal ---- */
.rf-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(27,22,46,0.6); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s var(--ease); padding: 20px; }
.rf-modal.open { opacity: 1; }
.rf-modal__card { background: var(--rf-white); color: var(--rf-amethyst); width: min(430px, 100%); border-radius: 22px; padding: 32px 32px 28px; position: relative; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.55); transform: translateY(12px) scale(0.98); transition: transform 0.3s var(--ease); }
.rf-modal.open .rf-modal__card { transform: none; }
.rf-modal__x { position: absolute; top: 14px; right: 18px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--rf-ink-48); cursor: pointer; }
.rf-modal__card h3 { font-family: var(--font-display); font-weight: 600; font-size: 25px; margin: 14px 0 6px; letter-spacing: -0.02em; }
.rf-modal__card p { font-size: 14px; color: var(--rf-ink-64); margin: 0 0 16px; }
#pdfForm { display: flex; flex-direction: column; gap: 10px; }
#pdfForm input { font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border: 1px solid var(--rf-ink-16); border-radius: 12px; outline: none; transition: border-color 0.2s; background: #fff; color: var(--rf-amethyst); }
#pdfForm input:focus { border-color: var(--rf-magenta); }
.rf-modal__msg { min-height: 1.2em; font-size: 13px; margin: 4px 0 0 !important; }
.rf-modal__msg.ok { color: #0a9d6b; }