/* BestHuman — webinar registration page
   Tokens extracted from besthuman.webflow.shared, 2026-08-06.
   Cream (#fff5eb) is deliberately excluded from the palette: it is the exact
   tone that produces the generic look. See design-spec.md.

   Contrast, verified 2026-08-06:
     #f33457 on white ....... 3.86  -> display and non-text only, never body
     white on #c7003d ....... 6.01  -> button fills
     white on #a80034 ....... 7.74  -> button hover
     #c7003d on white ....... 6.01  -> eyebrow text
     #333440 on white ...... 12.31 */

:root{
  --ink:#1e1f2d;
  --ink-soft:#333440;
  --accent:#f33457;
  --accent-deep:#c7003d;
  --accent-hover:#a80034;
  --paper:#ffffff;
  --paper-2:#fafafa;
  --blush:#fff0f0;
  --blush-deep:#ffd9d9;
  --rule:#d4d4d7;

  --font-display:'Raleway',system-ui,-apple-system,sans-serif;
  --font-editorial:'Lora',Georgia,serif;

  --step--2:0.6875rem;
  --step--1:0.8125rem;
  --step-0:1rem;
  --step-1:clamp(1.15rem,1rem + 0.6vw,1.5rem);
  --step-2:clamp(1.95rem,1rem + 3vw,3.4rem);

  --measure:34rem;
  --gutter:clamp(1.25rem,0.6rem + 2.6vw,4rem);
  --shell:78rem;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
p{margin:0 0 1rem;}

/* ---------- type scale ---------- */

.eyebrow{
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin:0 0 1.25rem;
}
.display{
  font-weight:200;
  font-size:var(--step-2);
  line-height:1.04;
  letter-spacing:-0.022em;
  color:var(--ink);
  margin:0;
  text-wrap:balance;   /* stops "26." orphaning onto its own line */
}
.display strong{font-weight:800;letter-spacing:-0.03em;}
.lead{
  font-size:var(--step-1);
  font-weight:300;
  line-height:1.45;
  color:var(--ink-soft);
}
.label{
  font-size:var(--step--1);
  letter-spacing:0.08em;
  color:var(--ink-soft);
  opacity:0.7;
}

/* Lora appears exactly once, on the philosophy line. Do not extend its use. */
.philosophy{
  font-family:var(--font-editorial);
  font-style:italic;
  font-weight:400;
  font-size:var(--step-1);
  line-height:1.4;
  color:var(--ink);
  margin:2rem 0 0;
  padding-left:1.1rem;
  border-left:2px solid var(--accent);
}

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--accent-deep);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:#fff;padding:0.7rem 1.1rem;z-index:99;
}
.skip:focus{left:0;}

/* ---------- shell ---------- */

.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);}
/* Narrow sections keep the shell's left gutter so they line up with the hero.
   Constraining the children, not the container, keeps the page left-aligned
   instead of switching to a centred column halfway down. */
.wrap--narrow{max-width:var(--shell);}
.wrap--narrow > *{max-width:46rem;}
.band{padding:clamp(3rem,2rem + 4vw,6rem) 0;}
.band--alt{background:var(--paper-2);border-block:1px solid var(--rule);}
.band h2:not(.display),.band h3{
  font-weight:600;font-size:var(--step-0);color:var(--ink);margin:0 0 0.5rem;
}

/* ---------- hero ---------- */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:clamp(2rem,1rem + 4vw,5rem);
  align-items:center;
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(2.5rem,1.5rem + 5vw,6rem) var(--gutter) clamp(2rem,1rem + 3vw,4rem);
}
.hero__copy{max-width:var(--measure);}
.hero__copy .lead{margin:1.4rem 0 1.5rem;}

/* Hero bullets: three objection-answering points, not an agenda. */
.points{list-style:none;margin:0 0 1.9rem;padding:0;}
.points li{
  position:relative;
  padding:0 0 0 1.65rem;
  margin:0 0 0.6rem;
  font-size:var(--step--1);
  line-height:1.5;
}
/* Checkmark, not a caret: the tick needs unequal dimensions, otherwise
   rotating a square corner just reads as an angle bracket. */
.points li::before{
  content:'';
  position:absolute;
  left:0.15rem;
  top:0.35em;
  width:0.4rem;
  height:0.72rem;
  border:2px solid var(--accent);
  border-left:0;
  border-top:0;
  transform:rotate(42deg);
}

.facts{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2.5rem;
  margin:0 0 2.25rem;
  padding:1.25rem 0 0;
  border-top:1px solid var(--rule);
}
.facts div{margin:0;}
.facts dt{margin:0 0 0.2rem;}
.facts dd{margin:0;font-weight:600;color:var(--ink);}

.cta{
  display:inline-block;
  font-family:inherit;
  font-size:var(--step-0);
  font-weight:600;
  color:#fff;
  background:var(--accent-deep);
  border:0;
  padding:0.95rem 1.9rem;
  cursor:pointer;
  transition:background 160ms ease,transform 160ms ease;
}
.cta:hover{background:var(--accent-hover);}
.cta:active{transform:translateY(1px);}

/* page-load stagger, flattened by the reduced-motion rule at the foot */
.hero__copy > *{animation:rise-in 520ms cubic-bezier(0.2,0.7,0.2,1) both;}
.hero__copy > .eyebrow{animation-delay:60ms;}
.hero__copy > .display{animation-delay:140ms;}
.hero__copy > .lead{animation-delay:240ms;}
.hero__copy > .points{animation-delay:330ms;}
.hero__copy > .facts{animation-delay:420ms;}
.hero__copy > .cta{animation-delay:510ms;}
.hero__chat{animation:rise-in 620ms cubic-bezier(0.2,0.7,0.2,1) 300ms both;}
@keyframes rise-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ---------- chat replay ---------- */

.chat__caption{
  font-size:var(--step--1);
  color:var(--ink-soft);
  opacity:0.72;
  margin:0 0 0.7rem;
  display:flex;
  align-items:baseline;
  gap:0.5rem;
}
.chat__dot{
  width:0.4rem;height:0.4rem;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}
.chat{
  background:var(--paper-2);
  border:1px solid var(--rule);
  height:clamp(21rem,48vh,29rem);
  overflow:hidden;
  padding:1.15rem;
  display:flex;
  flex-direction:column;
  gap:0.65rem;
  position:relative;
}
/* Fades at both ends. Without the top one, messages scrolling out of view
   are hard-clipped mid-bubble. */
.chat::before,
.chat::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:3rem;
  pointer-events:none;
  z-index:1;
}
.chat::before{
  top:0;
  background:linear-gradient(to top,rgba(250,250,250,0),var(--paper-2));
}
.chat::after{
  bottom:0;
  height:3.5rem;
  background:linear-gradient(to bottom,rgba(250,250,250,0),var(--paper-2));
}
.msg{
  background:var(--blush);
  border-left:2px solid var(--accent);
  padding:0.55rem 0.8rem;
  font-size:var(--step--1);
  line-height:1.45;
  color:var(--ink);
  flex:0 0 auto;
  animation:msg-in 380ms cubic-bezier(0.2,0.7,0.2,1) both;
}
@keyframes msg-in{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
.msg p{margin:0;}
.msg__time{
  display:block;
  font-variant-numeric:tabular-nums;
  font-size:var(--step--2);
  letter-spacing:0.06em;
  color:var(--ink-soft);
  opacity:0.55;
  margin-bottom:0.15rem;
}
.msg__react{
  display:inline-block;
  margin-top:0.4rem;
  font-size:var(--step--2);
  background:var(--blush-deep);
  color:var(--ink);
  padding:0.1rem 0.5rem;
  border-radius:999px;
}
.chat[data-static]{overflow-y:auto;}
.chat[data-static] .msg{animation:none;}
.chat[data-static]::before,
.chat[data-static]::after{display:none;}

/* ---------- feature: text + session photo ---------- */

.feature{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
  gap:clamp(2rem,1rem + 4vw,4.5rem);
  align-items:start;
}
.feature__text > *{max-width:38rem;}
.feature__media{margin:0;}
.feature__media img{
  width:100%;
  height:auto;
  border:1px solid var(--rule);
}
.feature__media figcaption{
  font-size:var(--step--1);
  color:var(--ink-soft);
  opacity:0.72;
  margin-top:0.7rem;
}

/* Real numbers from the session transcript. Not decoration. */
.stats{
  list-style:none;
  display:flex;
  gap:2rem;
  margin:1.5rem 0 0;
  padding:1.25rem 0 0;
  border-top:1px solid var(--rule);
}
.stats li{display:flex;flex-direction:column;}
.stats strong{
  font-size:1.9rem;
  font-weight:200;
  line-height:1;
  color:var(--accent-deep);
  letter-spacing:-0.02em;
}
.stats span{
  font-size:var(--step--2);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:0.7;
  margin-top:0.35rem;
}

@media (max-width:56rem){
  .feature{grid-template-columns:1fr;}
}

/* ---------- the split (what actually happens) ---------- */

.split__icon{
  display:block;
  width:2rem;
  height:2rem;
  color:var(--accent-deep);
  margin:0 0 1rem;
}
.split__icon svg{width:100%;height:100%;display:block;}

/* ---------- takeaways ---------- */

.takeaways{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.5rem,1rem + 2vw,3rem);
}
.takeaways li{
  padding-top:1.1rem;
  border-top:2px solid var(--accent);
}
.takeaways h3{margin:0 0 0.5rem;}
.takeaways p{margin:0;}


.split{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);}
.split__half{padding:clamp(1.5rem,1rem + 2vw,2.5rem);background:var(--paper);}
.split__half + .split__half{border-left:1px solid var(--rule);background:var(--blush);}
.split__marker{
  font-size:var(--step--1);font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent-deep);margin:0 0 0.7rem;
}
.split__half p:last-child{margin-bottom:0;}

/* ---------- cast ---------- */

.cast{
  list-style:none;margin:0 0 1.5rem;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:1.5rem;
}
.cast li{display:flex;flex-direction:column;gap:0.15rem;}
.cast strong{color:var(--ink);}
/* Initials until headshots arrive. Swap for an <img> with the same box and
   nothing else in the layout has to change. */
.cast__photo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1;
  background:var(--blush);
  border:1px solid var(--rule);
  margin-bottom:0.55rem;
  font-size:1.5rem;
  font-weight:200;
  letter-spacing:0.04em;
  color:var(--accent-deep);
}

/* ---------- ticks + faq ---------- */

.ticks{list-style:none;margin:0;padding:0;}
.ticks li{padding:0 0 0 1.6rem;margin:0 0 0.9rem;position:relative;}
.ticks li::before{
  content:'';position:absolute;left:0;top:0.68em;
  width:0.65rem;height:2px;background:var(--accent);
}

.faq{margin:0;}
.faq dt{font-weight:600;color:var(--ink);margin:1.4rem 0 0.3rem;}
.faq dd{margin:0;}

/* Two columns so four short answers do not leave half the row empty.
   Pairs are wrapped in divs, otherwise the grid would split every term
   from its own definition. */
.faq--cols{
  display:grid;
  /* 24rem floor keeps this at two columns on a 78rem shell, so four
     questions land as a balanced 2x2 instead of 3 plus an orphan. */
  grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));
  gap:0 clamp(2rem,1rem + 3vw,4rem);
}
.faq--cols > div{margin:0 0 1.6rem;}
.faq--cols dt{margin-top:0;}

/* ---------- close + footer ---------- */

.band--close .lead{margin:1rem 0 2rem;}
.foot{padding:2.5rem 0;border-top:1px solid var(--rule);font-size:var(--step--1);}
.foot p{margin:0.2rem 0;}
.foot a{color:var(--accent-deep);}

/* ---------- modal ---------- */

.modal[hidden]{display:none;}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:var(--gutter);}
.modal__backdrop{
  position:absolute;inset:0;background:rgba(30,31,45,0.55);
  animation:fade-in 180ms ease both;
}
.modal__panel{
  position:relative;
  background:var(--paper);
  width:min(34rem,100%);
  max-height:90vh;
  overflow-y:auto;
  padding:2rem clamp(1.25rem,0.8rem + 1.6vw,2.25rem);
  border-top:3px solid var(--accent);
  animation:panel-in 220ms cubic-bezier(0.2,0.7,0.2,1) both;
}
.modal__title{
  font-weight:200;font-size:var(--step-2);line-height:1.05;
  color:var(--ink);margin:0 0 0.35rem;
}
.modal__sub{margin:0 0 1.5rem;font-size:var(--step--1);opacity:0.75;}
.modal__close{
  position:absolute;top:0.5rem;right:0.65rem;
  background:none;border:0;font-size:1.75rem;line-height:1;
  color:var(--ink-soft);cursor:pointer;padding:0.25rem 0.5rem;
}
.modal__close:hover{color:var(--ink);}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes panel-in{from{opacity:0;transform:translateY(10px) scale(0.99);}to{opacity:1;transform:none;}}
body.is-locked{overflow:hidden;}

/* ---------- responsive ---------- */

@media (max-width:56rem){
  .hero{grid-template-columns:1fr;}
  .hero__copy{max-width:none;}
  .hero__chat{order:2;}
}
@media (max-width:44rem){
  .split{grid-template-columns:1fr;}
  .split__half + .split__half{border-left:0;border-top:1px solid var(--rule);}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:0.001ms !important;
  }
}