/* ==========================================================================
   Hello Purple — page styles
   Extracted from index.html for CSP without 'unsafe-inline' on script-src.
   colors_and_type.css must be loaded first.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--pg-ink-black);color:var(--pg-cloudy-white);font-family:var(--pg-font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;}
a{color:inherit;text-decoration:none;}
button,input,textarea{font:inherit;color:inherit;background:transparent;border:none;outline:none;}
button{cursor:pointer;}
button[disabled]{cursor:default;}

/* ---------- Header ---------- */
.page-pad{padding:48px 60px 0;}
.top{display:flex;justify-content:space-between;align-items:center;width:100%;
  opacity:0;transition:opacity 700ms var(--pg-ease);}
.top.in{opacity:1;}
.logo{height:28px;display:block;}
.logo img{height:100%;display:block;}
.top .home{
  font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(245,253,255,0.7);display:inline-flex;align-items:center;gap:10px;
  transition:color 220ms var(--pg-ease);
}
.top .home:hover{color:#fff;}
.top .home .arrow{width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);}
.head-rule{margin:24px 60px 0;height:1px;background:rgba(245,253,255,0.18);
  opacity:0;transition:opacity 800ms var(--pg-ease) 80ms;}
.head-rule.in{opacity:1;}

/* ---------- Stage: typewriter hero ---------- */
.stage{
  min-height:100vh;
  padding:0 60px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  max-width:1800px;margin:0 auto;
}
/* Reserve vertical space so the manifesto doesn't push the headline up */
.stage{padding-bottom:80px;padding-top:120px;}

.headline{
  font-family:var(--pg-font-sans);
  font-weight:500;
  font-size:clamp(80px, 13vw, 220px);
  line-height:0.96;
  letter-spacing:-0.025em;
  color:var(--pg-cloudy-white);
  margin:0;
  display:block;
  min-height:1em;
}
#prefix,#dynamic{white-space:pre;}
.word-purple{
  font-family:var(--pg-font-serif);
  font-weight:400;
  color:var(--pg-blue-violet);
  letter-spacing:-0.035em;
  display:inline;
}
.word-purple .dot{color:var(--pg-blue-violet);}
.caret{
  display:inline-block;
  width:0.06em;height:0.86em;
  background:var(--pg-blue-violet);
  margin-left:0.05em;
  vertical-align:-0.06em;
  transform:translateY(0.04em);
  animation:blink 1100ms steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

.sub-eyebrow{
  margin-top:48px;
  font-weight:700;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(166,225,250,0.85);display:inline-flex;align-items:center;gap:14px;
  opacity:0;transform:translateY(8px);
  transition:opacity 700ms var(--pg-ease), transform 700ms var(--pg-ease), color 220ms var(--pg-ease);
  cursor:pointer;
}
.sub-eyebrow.in{opacity:1;transform:none;}
.sub-eyebrow::before{content:"";width:42px;height:1px;background:var(--pg-blue-violet);display:inline-block;transition:background 220ms var(--pg-ease), width 220ms var(--pg-ease);}
a.sub-eyebrow:hover{color:#fff;}
a.sub-eyebrow:hover::before{background:#fff;width:64px;}

/* ---------- Manifesto body ---------- */
.manifesto{
  max-width:980px;margin:0 auto;padding:120px 60px 0;width:100%;
}
.stanza{
  font-weight:500;
  font-size:56px;
  line-height:1.18;
  letter-spacing:-0.012em;
  color:var(--pg-cloudy-white);
  margin:0 0 56px;
  max-width:880px;
  text-wrap:pretty;
  opacity:0;transform:translateY(14px);
  transition:opacity 800ms var(--pg-ease), transform 800ms var(--pg-ease);
}
.stanza.in{opacity:1;transform:none;}
.stanza--lead{font-size:64px;line-height:1.1;}
.stanza--small{font-size:44px;line-height:1.25;color:rgba(245,253,255,0.82);}
.stanza em{font-style:normal;font-family:var(--pg-font-serif);font-weight:400;color:var(--pg-frosted-blue);letter-spacing:-0.005em;}
.pause{height:120px;}

/* ---------- Form (Blue Violet block) ---------- */
.form-section{
  background:var(--pg-blue-violet);color:#fff;
  margin-top:160px;padding:120px 60px;
  position:relative;overflow:hidden;
}
.form-section .rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;opacity:0.22;}
.form-section .rings svg{width:1200px;height:1200px;margin-right:-380px;}
.form-wrap{max-width:980px;margin:0 auto;position:relative;z-index:1;}

.form-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-weight:700;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.92);margin-bottom:48px;
}
.form-eyebrow::before{content:"";width:42px;height:1px;background:#fff;}
.form-title{
  font-weight:500;font-size:clamp(48px, 6.5vw, 88px);line-height:0.98;letter-spacing:-0.02em;
  margin-bottom:24px;max-width:880px;
}
.form-title .serif{font-family:var(--pg-font-serif);font-weight:400;color:var(--pg-frosted-blue);}
.form-sub{font-size:18px;line-height:1.55;color:rgba(255,255,255,0.85);max-width:560px;margin-bottom:64px;}

form.signup{display:grid;grid-template-columns:1fr;gap:0;position:relative;}
.field{position:relative;border-bottom:1px solid rgba(255,255,255,0.35);transition:border-color 220ms var(--pg-ease);}
.field:focus-within{border-bottom-color:#fff;}
.field label{
  position:absolute;top:48px;left:0;
  font-size:13px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  pointer-events:none;
  transition:opacity 220ms var(--pg-ease);
}
.field input,.field textarea{
  width:100%;padding:48px 0 18px;font-size:22px;font-weight:500;color:#fff;line-height:1.4;resize:none;
}
.field textarea{min-height:96px;padding-bottom:24px;}
.field--optional label::after{content:" · optional";font-size:10px;letter-spacing:0.16em;color:rgba(255,255,255,0.5);}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  opacity:0;
}

/* Honeypot — visually hidden, off-screen, never tab-focused */
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}

/* Turnstile widget — sits between fields and submit row */
.cf-turnstile-wrap{margin-top:32px;min-height:65px;}

.submit-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:40px;flex-wrap:wrap-reverse;}
.legal{font-size:12px;line-height:1.55;color:rgba(255,255,255,0.78);max-width:520px;}
.legal a{border-bottom:1px solid rgba(255,255,255,0.45);}
.legal a:hover{border-bottom-color:#fff;}

.btn{
  background:#fff;color:var(--pg-blue-violet);padding:22px 30px;
  font-weight:700;letter-spacing:0.18em;text-transform:uppercase;font-size:13px;
  display:inline-flex;align-items:center;gap:14px;
  transition:background 220ms var(--pg-ease), transform 120ms var(--pg-ease), opacity 220ms var(--pg-ease);
  border-radius:0;
  position:relative;
}
.btn:hover{background:var(--pg-frosted-blue);}
.btn:active{transform:scale(0.98);}
.btn[disabled]{opacity:0.65;background:#fff;}
.btn[disabled]:hover{background:#fff;}
.btn .arrow{width:14px;height:14px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);}
.btn[aria-busy="true"] .arrow{display:none;}
.btn[aria-busy="true"]::after{
  content:"";display:inline-block;width:14px;height:14px;
  border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin 800ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Error region */
.form-error{
  margin-top:24px;font-size:14px;color:#fff;background:rgba(0,0,0,0.18);
  padding:14px 18px;border-left:2px solid #fff;line-height:1.45;
}
.form-error[hidden]{display:none;}

/* No-JS fallback message — hidden by default, revealed by <noscript> in <head> */
.form-noscript{display:none;}

/* Sub-eyebrow desktop: the middle dot stays visible; mobile hides it (see @media) */
.se-sep{display:inline;}

/* Sent state — left-aligned with the form title, no dot decoration. */
.sent-wrap{display:none;flex-direction:column;justify-content:center;align-items:flex-start;padding:24px 0;}
.sent-wrap.show{display:flex;}
.sent-content{opacity:0;transform:translateY(8px);}
.sent-wrap.show .sent-content{animation:rise 600ms var(--pg-ease) forwards;}
@keyframes rise{to{opacity:1;transform:translateY(0);}}
.sent-title{font-weight:500;font-size:clamp(40px, 5vw, 64px);line-height:1.02;letter-spacing:-0.015em;color:#fff;}
.sent-title .serif{font-family:var(--pg-font-serif);font-weight:400;color:var(--pg-frosted-blue);}
form.signup.hide{display:none;}

/* Footer */
footer{margin:0 60px;padding:32px 0 40px;border-top:1px solid rgba(245,253,255,0.12);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:rgba(245,253,255,0.65);}

@media (max-width:720px){
  .page-pad{padding:24px 24px 0;}
  .head-rule{margin:20px 24px 0;}
  .logo{height:22px;}
  .stage{padding:80px 24px 40px;}

  /* Hero: break after "Hello," — viewport is too narrow for one line */
  .headline{min-height:2em;line-height:1.02;}
  #prefix{display:block;min-height:1em;}

  /* Sub-eyebrow on mobile: stack the purple accent line ABOVE the text and
     left-align both. flex-direction:column makes each item its own row, so
     ::before sits on row 1, "Be the first to build" on row 2, "scroll below"
     on row 3. The middle dot is dropped. */
  .sub-eyebrow{flex-direction:column;align-items:flex-start;gap:8px;}
  .se-sep{display:none;}

  .manifesto{padding:64px 24px 0;}
  .stanza{font-size:32px;margin-bottom:36px;}
  .stanza--lead{font-size:34px;}
  .stanza--small{font-size:26px;}
  .pause{height:48px;}
  .form-section{margin-top:80px;padding:64px 24px;}
  .form-title{font-size:34px;}
  .field input,.field textarea{font-size:18px;padding-top:42px;}
  footer{margin:0 24px;}
  .submit-row{justify-content:flex-end;}
  .legal{order:2;width:100%;}
}