/* ==========================================================================
   THE CX REVENUE CHALLENGE
   Type follows the Adoreboard brand system (Doc 00, section 2):
   Fraunces for titles, Bricolage Grotesque for body. Inter is app-only and
   is deliberately not used here, since this is a marketing surface.
   ========================================================================== */

:root{
  --lavender:#F5F2F9; --lavender-deep:#ECE7F5;
  --navy:#2E224A; --navy-dark:#1A1722;
  --purple:#7255B1; --purple-deep:#5B3F94; --violet:#9B7BC7;
  --gray:#6B6B78; --line:rgba(114,85,177,0.22); --white:#FFFFFF;
  --amber:#C97A21; --amber-bg:#FDF3E7; --amber-line:#F0D2AC;
  --green:#2F8F4E; --green-bg:#EAF6EE; --green-line:#BFE3CB;
  --red:#C0463F; --red-bg:#FBEAEA; --red-line:#F0C1BE;
  --radius:14px;
  --shadow: 0 1px 2px rgba(46,34,74,0.04), 0 8px 24px rgba(46,34,74,0.08);

  --font-title: 'Fraunces', Georgia, serif;
  --font-body:  'Bricolage Grotesque', Arial, sans-serif;
}

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--lavender); color:var(--navy);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
  min-height:100vh; line-height:1.55;
}

h1,h2,h3,.serif{ font-family:var(--font-title); font-weight:500; letter-spacing:-0.01em; line-height:1.15; }
::selection{ background:var(--violet); color:var(--white); }

/* --- accessibility ------------------------------------------------------ */
:focus-visible{ outline:2.5px solid var(--purple); outline-offset:2px; border-radius:4px; }
[hidden]{ display:none !important; }

/* --- shared bits -------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:flex-start; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--purple); text-align:left;
}
.eyebrow::before{ content:""; width:16px; height:2px; background:var(--purple); border-radius:2px; margin-top:7px; flex-shrink:0; }

button{ font-family:inherit; cursor:pointer; }

.btn{
  appearance:none; border:none; border-radius:999px; padding:14px 28px;
  font-family:inherit; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn::after{ content:"\2192"; font-size:1.05em; line-height:1; }
.btn-primary{ background:var(--purple); color:var(--white); box-shadow:0 8px 20px rgba(114,85,177,0.35); }
.btn-primary:hover{ background:var(--purple-deep); transform:translateY(-1px); }
.btn-primary:disabled{ opacity:0.45; transform:none; cursor:not-allowed; }
.btn-inline{ max-width:360px; margin:0 auto; }

.link-btn{
  background:none; border:none; color:var(--purple); font-family:inherit;
  font-weight:600; font-size:13px; padding:0; text-decoration:underline;
}

/* --- chrome ------------------------------------------------------------- */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; padding:20px clamp(20px,5vw,56px); }
.logo-link{ display:block; line-height:0; }
.logo-img{ height:22px; width:auto; display:block; }

.screen{ display:none; min-height:100vh; padding:110px clamp(20px,6vw,20px) 80px; }
.screen.active{ display:block; animation:fadeUp .5s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

.wrap{ max-width:640px; margin:0 auto; padding:0 20px; }
.wrap-wide{ max-width:960px; margin:0 auto; padding:0 20px; }

.hero-wave{ position:absolute; top:0; left:0; width:100%; height:420px; z-index:0; opacity:0.9; pointer-events:none; }
.intro-inner{ position:relative; z-index:1; text-align:center; }
.intro-tight{ margin-bottom:20px; }
.intro-inner h1{ font-size:clamp(28px,5vw,46px); margin:22px 0 16px; color:var(--navy); }
.intro-inner h1.h1-sm{ font-size:clamp(26px,4.4vw,36px); }
.intro-inner p.sub{ font-size:16px; line-height:1.6; color:var(--gray); max-width:540px; margin:0 auto 30px; }

/* --- forms -------------------------------------------------------------- */
.form-card{
  background:var(--white); border-radius:20px; box-shadow:var(--shadow);
  padding:clamp(26px,5vw,40px); text-align:left; position:relative; z-index:1;
}
.field{ margin-bottom:18px; border:none; padding:0; }
.field label,
.field legend{ display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:8px; padding:0; }
.field .hint{ font-size:12px; color:var(--gray); font-weight:400; margin:5px 0 0; }
.field .error{ font-size:12px; color:var(--red); font-weight:600; margin:6px 0 0; }
.field input[type=text], .field input[type=email], .field input[type=url], .field select{
  width:100%; padding:13px 15px; border-radius:10px; border:1.5px solid var(--line);
  background:var(--lavender); font-size:15px; font-family:inherit; color:var(--navy); appearance:none;
}
.field input[aria-invalid="true"]{ border-color:var(--red); background:var(--red-bg); }
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236B6B78' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}

/* NPS / CSAT toggle */
.seg{ display:inline-flex; background:var(--lavender-deep); border-radius:999px; padding:3px; margin-bottom:14px; }
.seg-btn{
  appearance:none; border:none; background:transparent; border-radius:999px;
  padding:7px 18px; font-family:inherit; font-size:13px; font-weight:700; color:var(--gray);
  transition:background .15s ease, color .15s ease;
}
.seg-btn.active{ background:var(--white); color:var(--purple); box-shadow:0 1px 3px rgba(46,34,74,0.12); }

.nps-row{ display:flex; align-items:center; gap:14px; }
.nps-row input[type=range]{ flex:1; accent-color:var(--purple); }
.nps-value{ font-family:var(--font-title); font-size:24px; font-weight:600; color:var(--purple); width:62px; text-align:center; }

.optional-toggle{ margin:-6px 0 18px; }
.optional-panel{ margin-bottom:18px; }
.micro{ font-size:12px; color:var(--gray); margin:12px 0 0; text-align:center; }

.progress-dots{ display:flex; justify-content:center; gap:8px; margin-bottom:26px; position:relative; z-index:1; }
.progress-dots span{ width:8px; height:8px; border-radius:50%; background:var(--lavender-deep); }
.progress-dots span.on{ background:var(--purple); }

/* --- the scorecard card ------------------------------------------------- */
.scorecard-card{ background:var(--white); border-radius:18px; box-shadow:var(--shadow); padding:14px; margin:0 0 18px; }
.scorecard-img{ width:100%; height:auto; display:block; border-radius:10px; }
.anon-tag{
  display:inline-flex; align-items:center; gap:6px; background:var(--lavender-deep); color:var(--navy);
  font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:12px;
}
.results-cta{ text-align:center; margin-top:8px; }
.results-cta p{ font-size:14.5px; color:var(--gray); margin:0 0 14px; }

/* --- processing --------------------------------------------------------- */
#stateProcessing{ text-align:center; padding-top:60px; }
.pulse-ring{
  width:88px; height:88px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--purple);
  margin:0 auto 32px; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.processing-h{ font-size:24px; margin:0 0 28px; }
.analyzing-steps{ list-style:none; padding:0; margin:0; }
.analyzing-step{ font-size:15px; color:var(--gray); font-weight:600; margin-bottom:8px; opacity:0; animation:stepfade .45s ease forwards; }
#pstep1{ animation-delay:.1s; } #pstep2{ animation-delay:.8s; } #pstep3{ animation-delay:1.5s; }
@keyframes stepfade{ to{ opacity:1; } }
.analyzing-step .check{ color:var(--green); margin-right:6px; }

/* --- reassurance and confirmation --------------------------------------- */
.reassure-note{ background:var(--lavender-deep); border-radius:14px; padding:16px 18px; font-size:13.5px; color:var(--gray); margin-bottom:20px; }
.reassure-note p{ margin:0 0 10px; }
.reassure-note p:last-child{ margin-bottom:0; }
.reassure-note b{ color:var(--navy); }

.meetings-wrap{ background:var(--white); border-radius:20px; box-shadow:var(--shadow); padding:10px; min-height:640px; }
.meetings-wrap iframe{ width:100%; min-height:620px; border:0; display:block; }
.meetings-fallback{ padding:40px 24px; text-align:center; color:var(--gray); font-size:14px; }

.confirm{ text-align:center; }
.confirm h2{ font-size:22px; margin:0 0 10px; }
.check-circle{
  width:56px; height:56px; border-radius:50%; background:var(--green-bg); border:2px solid var(--green-line);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:26px; color:var(--green);
}
.recap-card{ background:var(--lavender); border-radius:14px; padding:16px 18px; margin-bottom:18px; font-size:13.5px; color:var(--navy); text-align:left; }
.recap-card b{ color:var(--purple); }

.footnote{ text-align:center; font-size:12px; color:var(--gray); margin:28px auto 0; max-width:640px; padding:0 20px; }

/* --- safe-mode banner (shown only when HubSpot is not configured) -------- */
.safe-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:var(--amber-bg); border-top:1.5px solid var(--amber-line); color:var(--amber);
  font-size:12.5px; font-weight:600; text-align:center; padding:9px 16px;
}

/* --- responsive --------------------------------------------------------- */
@media (max-width:520px){
  .screen{ padding-top:96px; }
  .nps-value{ font-size:20px; width:54px; }
  .meetings-wrap{ min-height:560px; padding:6px; }
}

@media (prefers-reduced-motion:reduce){
  .screen.active{ animation:none; }
  .pulse-ring{ animation:none; border-top-color:var(--line); }
  .analyzing-step{ animation:none; opacity:1; }
  .btn-primary:hover{ transform:none; }
}

/* opt-out link under the call ask */
.opt-out{ text-align:center; margin:16px 0 0; }
.opt-out .link-btn{ font-weight:500; color:var(--gray); }
.opt-out .link-btn:hover{ color:var(--purple); }