/* =========================================================
   Commonplace — Fall Cohort waiting list

   Recreated from the Relic design handoff. The prototype held
   every value in inline style attributes because its authoring
   environment demanded it; the handoff asks for those to move
   into the normal styling layer. Same numbers, same tokens.
   ========================================================= */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  background:var(--color-cream);
  height:100%;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font-sans);
  color:var(--color-espresso);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                 /* the deck owns all scrolling */
}
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
::placeholder{ color:rgba(58,40,30,.42); opacity:1; }
:focus-visible{ outline:2px solid var(--color-ruby); outline-offset:3px; }

@keyframes cp-cue{
  0%,100%{ opacity:.45; transform:translateY(0); }
  50%    { opacity:1;   transform:translateY(5px); }
}
@keyframes cp-rise{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

/* =========================================================
   THE DECK

   Panels are stacked in a scroller, one viewport each. A panel
   that outgrows the viewport scrolls inside itself rather than
   letting the outer scroller drift off a snap point — that
   drift is what used to let one flick carry past a panel.
   ========================================================= */
.deck{
  position:relative;
  height:100dvh;
  overflow:hidden;                 /* movement is programmatic, never native */
  scroll-behavior:auto;
}

.panel{
  position:absolute; inset:0;
  height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:flex;
  justify-content:center;
  padding:56px 28px 40px;
  background:var(--color-cream);

  /* Panels below the current one sit one viewport down, panels
     above sit one up. Only the transform moves — nothing scrolls. */
  transform:translate3d(0,100%,0);
  visibility:hidden;
  transition:transform .62s cubic-bezier(.33,0,.12,1), visibility .62s;
  will-change:transform;
}
.panel.is-current{ transform:translate3d(0,0,0); visibility:visible; }
.panel.is-above  { transform:translate3d(0,-100%,0); }

.panel__inner{ width:100%; max-width:560px; margin:auto 0; }

/* ---- Intro panels ---- */
.panel--perry  { background:var(--color-perry); }
.panel--radiant{ background:var(--color-radiant); }

.panel--hook .panel__inner{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:40px; min-height:calc(100dvh - 96px); margin:0;
}
.mark{ width:104px; height:104px; object-fit:contain; margin-top:5vh; flex:0 0 auto; }
.mark--sm{ width:86px; height:86px; margin-top:0; }

.hook__line{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(30px, min(9.2vw,6.4vh), 58px);
  line-height:1.12; letter-spacing:-.015em;
  color:var(--color-black); text-wrap:pretty;
  flex:0 0 auto;
}

.hook__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }

.mono{
  font-family:var(--font-mono); font-weight:400; font-size:11px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--color-black);
}
.mono--brand{ letter-spacing:.14em; }

.cue{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:6px; animation:cp-cue 2.6s ease-in-out infinite;
}
.cue__word{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--color-black); }
.cue__rule{ width:1px; height:26px; background:var(--color-black); opacity:.6; }

.stack{ display:flex; flex-direction:column; gap:28px; }

.card{
  background:var(--color-cream);
  padding:28px 26px;
  font:400 clamp(16px,4.4vw,19px)/1.5 var(--font-sans);
  color:var(--color-black);
  text-wrap:pretty;
}

/* Discreet by design: 16px wide, hairline stroke, and the same 2.6s pulse
   as the SCROLL cue on the first panel so it reads as the same invitation.
   Centred under the stack rather than pinned to a corner, because these two
   panels are vertically centred compositions. */
.arrow{
  align-self:center;
  padding:8px;
  color:var(--color-black);
  animation:cp-cue 2.6s ease-in-out infinite;
}
.arrow svg{ width:16px; height:10px; display:block; }

.shot{ width:74%; aspect-ratio:1; object-fit:cover; }
.shot--right{ margin-left:auto; }

.begin{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(28px,7vh,56px); }
.begin__word{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(52px, min(17vw,13vh), 110px);
  line-height:.96; letter-spacing:-.02em; color:var(--color-black);
}
.pulse{ animation:cp-cue 2.6s ease-in-out infinite; }

/* ---- Question panels ---- */
.panel--q{ padding:72px 28px; }
.panel--q .panel__inner{ max-width:1040px; display:flex; flex-wrap:wrap;
  gap:clamp(28px,5vw,64px); align-items:flex-start; }

.q__side{ flex:1 1 300px; display:flex; flex-direction:column; gap:14px; }
.q__title{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(30px,7.4vw,48px); line-height:1.1; letter-spacing:-.015em;
  color:var(--color-black); text-wrap:pretty;
}
.q__title--sm  { font-size:clamp(28px,6.6vw,44px); }
.q__title--lg  { font-size:clamp(34px,8.4vw,54px); }
.q__title--md  { font-size:clamp(32px,7.8vw,50px); }

.q__sub{ font:400 15px/1.55 var(--font-sans); color:var(--color-evergreen); max-width:44ch; }
.q__answers{ flex:1 1 340px; display:flex; flex-direction:column; gap:10px; }

.opt{
  text-align:left; font:400 16px/1.35 var(--font-sans);
  color:var(--color-espresso);
  background:var(--color-white);
  border:1px solid var(--color-latte);
  border-radius:var(--radius-md);
  padding:15px 18px; min-height:54px;
  transition:all var(--transition-base);
}
.opt:hover{ border-color:var(--color-espresso); }
.opt.is-selected{
  background:var(--color-espresso);
  border-color:var(--color-espresso);
  color:var(--color-cream);
}

.other{ display:none; animation:cp-rise .3s ease; }
.other.is-open{ display:block; }
.other input{
  width:100%; font:400 16px var(--font-sans); color:var(--color-espresso);
  background:var(--color-white); border:1px solid var(--color-espresso);
  border-radius:var(--radius-md); padding:15px 18px; min-height:54px;
}

.cta{
  align-self:flex-start;
  background:var(--color-ruby); color:var(--color-white);
  border-radius:var(--radius-pill);
  padding:14px 28px; min-height:48px;
  font:500 15px var(--font-sans);
  transition:background var(--transition-base);
}
.cta:hover{ background:var(--color-cta-hover); }
.cta[disabled]{ opacity:.55; pointer-events:none; }
.other .cta{ margin-top:10px; }

.longtext{
  width:100%; min-height:160px;
  font:400 16px/1.55 var(--font-sans);
  background:var(--color-white); border:1px solid var(--color-latte);
  border-radius:var(--radius-md); padding:16px 18px; resize:vertical;
}

.hint{
  font-family:var(--font-mono); font-weight:400; font-size:11px;
  text-transform:uppercase; letter-spacing:.09em;
  color:var(--color-ruby); margin-top:12px;
  animation:cp-rise .3s ease;
}

/* ---- Contact ---- */
.fields{ display:flex; flex-wrap:wrap; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; flex:1 1 150px; }
.field--full{ flex:1 1 100%; }
.field input{
  width:100%; font:400 16px var(--font-sans); color:var(--color-espresso);
  background:var(--color-white); border:1px solid var(--color-latte);
  border-radius:var(--radius-md); padding:14px 16px; min-height:52px;
}
.field input:focus{ outline:none; border-color:var(--color-espresso); }
.field.is-invalid input{ border-color:var(--color-ruby); }

/* ---- Confirmation ---- */
.done{ display:flex; flex-direction:column; gap:28px; }
.done__title{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(38px,10vw,64px); line-height:1.08; letter-spacing:-.02em;
  color:var(--color-black);
}
.done__body{ font:400 clamp(16px,4.2vw,18px)/1.55 var(--font-sans); color:var(--color-black); }
.share__label{ color:var(--color-steel-navy); margin-bottom:12px; }
.share__row{
  background:var(--color-cream); border-radius:var(--radius-md);
  padding:14px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.share__url{ font:400 14px var(--font-mono); color:var(--color-espresso);
  overflow:hidden; text-overflow:ellipsis; flex:1 1 200px; }
.ghost{
  border:1px solid var(--color-ruby); color:var(--color-ruby);
  border-radius:var(--radius-pill); padding:10px 18px; min-height:44px;
  font:500 15px var(--font-sans); transition:all var(--transition-base);
}
.ghost:hover{ background:var(--color-ruby); color:var(--color-white); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}