/* ============================================================
   Reseller Quoting in the Agentic Era webinar page (reseller-webinar.html).
   Loaded only by that page, after the 2026-10-03 design system and
   site.css. Values are the inline styles from the Claude Design export,
   moved into classes.
   ============================================================ */

html, body { background: #191424; }

.rw-main { font-family: var(--font-secondary); color: #F0F6FF; min-height: 100vh; }

/* layout */
.rw-shell { max-width: 1280px; margin: 0 auto; }
.rw-section { padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 72px); }
.rw-section--ink { color: #191424; }
.rw-stack { display: flex; flex-direction: column; gap: 36px; }
.rw-stack--demo { gap: 40px; }
.rw-intro { display: flex; flex-direction: column; gap: 14px; }
.rw-intro--tight { gap: 12px; }
.rw-intro--center { align-items: center; text-align: center; }

/* type */
.rw-h1 { margin: 0; font-family: var(--font-primary); font-weight: 800; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; color: #F0F6FF; text-wrap: balance; }
.rw-h2 { margin: 0; font-family: var(--font-primary); font-weight: 800; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: #F0F6FF; }
.rw-h2--balance { text-wrap: balance; }
.rw-h2--ink { color: #191424; }
.rw-h2-form { margin: 0; font-family: var(--font-primary); font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -0.018em; color: #191424; }
.rw-lede { margin: 0; font-size: 20px; line-height: 1.55; color: rgba(240, 246, 255, 0.75); max-width: 580px; text-wrap: pretty; }
.rw-body { margin: 0; font-size: 16px; line-height: 1.62; color: rgba(240, 246, 255, 0.75); text-wrap: pretty; }
.rw-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240, 246, 255, 0.62); }
.rw-mono--ink { color: #5C5568; }
.rw-rule { width: 200px; margin: 0; border: 0; }

/* co-brand lockup (hero header and close) */
.rw-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; flex-wrap: wrap; }
.rw-lockup { display: flex; align-items: center; gap: 20px; }
.rw-lockup__fp { height: 96px; margin: -32px -18px -32px -26px; display: block; }
.rw-lockup__x { font-family: var(--font-mono); font-size: 14px; color: rgba(240, 246, 255, 0.62); }
.rw-lockup__sf { height: 44px; display: block; }
.rw-lockup--sm { gap: 16px; }
.rw-lockup--sm .rw-lockup__fp { height: 72px; margin: -24px -14px -24px -20px; }
.rw-lockup--sm .rw-lockup__x { font-size: 12px; }
.rw-lockup--sm .rw-lockup__sf { height: 34px; }

/* hero */
.rw-hero { padding: 0 clamp(20px, 5vw, 72px) clamp(56px, 8vw, 96px); }
.rw-hero__grid { max-width: 1280px; margin: clamp(32px, 6vw, 72px) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 6vw, 80px); align-items: start; }
.rw-hero__copy { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.rw-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); background: rgba(240, 246, 255, 0.14); margin-top: 8px; max-width: 640px; }
.rw-fact { border-radius: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.rw-fact__v { font-family: var(--font-primary); font-weight: 700; font-size: 16px; color: #F0F6FF; }

/* registration plate */
.rw-register { --plate-offset: 0px; --plate-pad: clamp(28px, 4vw, 44px); --plate-gutter: clamp(24px, 4vw, 44px); margin-left: 0; scroll-margin-top: 24px; }
.rw-form { display: flex; flex-direction: column; gap: 20px; }
.rw-form__head { display: flex; flex-direction: column; gap: 8px; }
.rw-form__note { margin: 0; font-size: 14px; line-height: 1.6; color: #5C5568; }
.rw-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }
.rw-form label { display: block; }
.rw-form .input-label { color: #5C5568; }
.rw-form .input-error-msg { margin: 0; }
.rw-form .btn-primary { justify-content: center; width: 100%; }
.rw-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rw-done { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.rw-done p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A4458; }

/* demo */
.rw-demo__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px 72px; align-items: end; }
.rw-steps { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); background: rgba(240, 246, 255, 0.14); }
.rw-step { border-radius: 0; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.rw-step__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rw-step__top i { font-size: 24px; color: rgba(240, 246, 255, 0.70); }
.rw-step__num { font-family: var(--font-mono); font-size: 12px; color: rgba(240, 246, 255, 0.62); font-variant-numeric: tabular-nums; }
.rw-step__label { font-family: var(--font-primary); font-weight: 700; font-size: 18px; color: #F0F6FF; }

/* what we'll cover */
.rw-problems { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); background: #191424; }
.rw-problem { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 22px; padding: 28px 28px 32px; }
.rw-problem__visual { background: #191424; border-radius: 8px; padding: 20px; height: 176px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rw-problem__title { display: flex; align-items: baseline; gap: 12px; }
.rw-problem__num { font-family: var(--font-mono); font-size: 13px; color: #5C5568; font-variant-numeric: tabular-nums; }
.rw-problem__title h3 { margin: 0; font-family: var(--font-primary); font-weight: 800; font-size: 21px; line-height: 1.25; color: #191424; text-wrap: balance; }
.rw-problem__block { display: flex; flex-direction: column; gap: 6px; }
.rw-problem__block p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A4458; text-wrap: pretty; }
.rw-problem__block--session { border-top: 1px solid #D1CCD4; padding-top: 18px; }
.rw-problem__block--session p { color: #191424; }

/* problem visuals (chips on the dark tile) */
.rw-vis { width: 100%; }
.rw-vis__cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240, 246, 255, 0.62); }
.rw-vis--row { display: flex; align-items: center; gap: 10px; }
.rw-vis__sources { display: flex; flex-direction: column; gap: 8px; }
.rw-chip { font-family: var(--font-mono); font-size: 11px; color: #F0F6FF; padding: 5px 8px; border: 1px solid rgba(240, 246, 255, 0.28); border-radius: 6px; white-space: nowrap; }
.rw-vis__arrow { font-size: 18px; color: rgba(240, 246, 255, 0.62); }
.rw-vis__lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rw-vis__lines .rw-vis__cap { margin-bottom: 4px; }
.rw-vis__line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 7px; background: rgba(255, 255, 255, 0.08); white-space: nowrap; font-family: var(--font-mono); font-size: 10px; color: rgba(240, 246, 255, 0.75); }
.rw-vis--col { display: flex; flex-direction: column; gap: 4px; }
.rw-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; background: rgba(255, 255, 255, 0.08); border-left: 2px solid #00D67E; }
.rw-opt i { font-size: 14px; color: rgba(240, 246, 255, 0.62); }
.rw-opt__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rw-opt__name { font-family: var(--font-mono); font-size: 11px; color: #F0F6FF; white-space: nowrap; }
.rw-opt__note { font-family: var(--font-mono); font-size: 9px; color: rgba(240, 246, 255, 0.62); white-space: nowrap; }
.rw-vis--calc { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rw-calc__files { display: flex; gap: 8px; width: 100%; }
.rw-calc__file { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border: 1px dashed rgba(240, 246, 255, 0.28); border-radius: 6px; }
.rw-calc__file i { font-size: 20px; color: rgba(240, 246, 255, 0.70); }
.rw-calc__file span { font-family: var(--font-mono); font-size: 10px; color: rgba(240, 246, 255, 0.75); white-space: nowrap; }
.rw-calc__down { font-size: 16px; color: rgba(240, 246, 255, 0.62); }
.rw-calc__result { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: rgba(255, 255, 255, 0.08); border-left: 2px solid #00D67E; font-family: var(--font-mono); font-size: 10px; color: #F0F6FF; }
.rw-calc__result span { white-space: nowrap; }

/* speakers */
.rw-speakers__wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.rw-speakers { width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); background: #191424; }
.rw-speaker { padding: 0; }
.rw-speaker img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: center 25%; display: block; filter: saturate(0.85); }
.rw-speaker__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.rw-speaker__name { margin: 0; font-family: var(--font-primary); font-weight: 800; font-size: 20px; line-height: 1.2; color: #191424; }
.rw-speaker__title { margin: 0; font-size: 14px; line-height: 1.5; color: #4A4458; }

/* close */
.rw-close { padding: clamp(56px, 8vw, 88px) clamp(20px, 5vw, 72px) 40px; position: relative; }
.rw-close__inner { position: relative; display: flex; flex-direction: column; gap: 56px; }
.rw-close__cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.rw-close__h2 { font-size: clamp(28px, 3.2vw, 38px); }
.rw-close__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(74, 68, 88, 0.6); padding-top: 24px; }
.rw-close__q { font-size: 13px; color: rgba(240, 246, 255, 0.62); }
.rw-close__q a { text-decoration: underline; text-decoration-color: rgba(255, 43, 78, 0.6); text-underline-offset: 3px; }
.rw-close__q a:hover { color: #FF2B4E; }

/* Phone widths: step the lockup down so it fits a 390px viewport (same fix as the Boston page). */
@media (max-width: 520px) {
  .rw-lockup { gap: 14px; }
  .rw-lockup__fp { height: 72px; margin: -24px -14px -24px -20px; }
  .rw-lockup__x { font-size: 12px; }
  .rw-lockup__sf { height: 34px; }
  .rw-header { min-height: 72px; }
}

/* Gated recording (added 2026-11-05): the player replaces the form inside the plate. */
.rw-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #0B0A10; }
.rw-video .wistia_embed, .rw-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.rw-done--video { gap: 18px; }
.rw-done--video p { font-size: 14px; }
.rw-form .turnstile:empty { display: none; }