/* ===== Reset & base ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #e8756a;outline-offset:3px;border-radius:6px}

/* ===== Tokens ===== */
:root{
  --cream:#fff8f3;
  --peach:#fff0ed;
  --navy:#1a1a2e;
  --panel:#252540;
  --teal:#e0f7f5;
  --yellow:#fff3db;
  --coral:#e8756a;
  --coral-text:#c4504a;
  --mint:#2ec4b6;
  --amber:#ffb347;
  --ink:#2d3436;
  --muted:#7b8794;
  --muted-light:#c7c7d9;
  --muted-footer:#a6a6b8;
  --chip-green:#34d399;

  --serif:'Fraunces', ui-serif, Georgia, serif;
  --sans:'Figtree', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --max:1280px;
  --pad-x:clamp(20px, 4.8vw, 80px);
}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ===== Typography ===== */
.display-1{
  font-family:var(--serif);
  font-weight:900;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:clamp(34px, 4.8vw, 68px);
  line-height:1.08;
  color:var(--ink);
  text-align:center;
  margin:0;
  letter-spacing:-0.01em;
}
.display-1 span{display:block}

.display-2{
  font-family:var(--serif);
  font-weight:700;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:clamp(26px, 2.9vw, 40px);
  line-height:1.2;
  color:var(--ink);
  text-align:center;
  margin:0;
  letter-spacing:-0.005em;
}
.display-2 span{display:block}
.display-light{color:#fff}
.align-center{text-align:center}

.lede{
  font-size:clamp(15px, 1.35vw, 19px);
  line-height:1.58;
  color:var(--muted);
  text-align:center;
  max-width:720px;
  margin:0 auto;
}
.lede-cool{color:var(--muted)}
.lede-light{color:var(--muted-light);max-width:620px}

.eyebrow-uppercase{
  font-weight:600;
  font-size:14px;
  letter-spacing:0.08em;
  color:var(--amber);
  margin:0;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  border-radius:999px;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:var(--coral);
  color:#fff;
  padding:18px 32px;
  font-size:18px;
  box-shadow:0 8px 24px rgba(232,117,106,.35);
}
.btn-primary:hover{box-shadow:0 12px 28px rgba(232,117,106,.42)}

.btn-nav{
  background:var(--amber);
  color:var(--ink);
  padding:12px 22px;
  font-size:16px;
}

.btn-dark{
  background:var(--ink);
  color:#fff;
  padding:20px 40px;
  font-size:19px;
  box-shadow:0 10px 30px rgba(45,52,54,.25);
}

/* ===== Nav ===== */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px var(--pad-x);
  background:var(--cream);
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-mark{
  width:50px;height:30px;
  object-fit:contain;
}
.logo-word{
  font-family:var(--serif);
  font-weight:700;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:24px;
  color:var(--ink);
}
.logo-on-dark .logo-word{color:#fff;font-size:20px}
.logo-on-dark .logo-mark{width:40px;height:24px}

.nav-right{display:flex;align-items:center;gap:32px}
.nav-link{font-weight:500;font-size:16px;color:var(--ink)}
.nav-link:hover{color:var(--coral)}

.nav-hamburger{
  display:none;
  width:24px;height:24px;
  flex-direction:column;
  justify-content:space-around;
  padding:2px 0;
}
.nav-hamburger span{
  display:block;height:2px;width:20px;
  background:var(--ink);border-radius:2px;
}

/* ===== Hero ===== */
.hero{
  display:flex;flex-direction:column;align-items:center;
  gap:28px;
  padding:72px var(--pad-x) 88px;
  background:var(--cream);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--peach);
  color:var(--coral-text);
  border-radius:20px;
  padding:8px 16px 8px 14px;
  font-size:14px;font-weight:600;
}
.eyebrow-short{display:none}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.dot-coral{background:var(--coral-text)}
.dot-green{background:var(--chip-green)}

.hero-sub{
  max-width:680px;
  font-size:clamp(15px, 1.45vw, 20px);
  line-height:1.5;
  color:var(--muted);
  text-align:center;
  margin:0;
}
.cta-row{
  display:flex;align-items:center;gap:16px;
  margin-top:8px;
}
.cta-note{
  font-size:15px;color:var(--muted);font-weight:500;
}

/* ===== Problem ===== */
.problem{
  background:var(--peach);
  padding:96px var(--pad-x);
  display:flex;flex-direction:column;align-items:center;
  gap:40px;
}
.pain-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  width:100%;
  max-width:1280px;
}
.pain-card{
  background:#fff;
  border-radius:20px;
  padding:28px;
  display:flex;flex-direction:column;
  gap:10px;
}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  border-radius:16px;
  margin-bottom:6px;
}
.badge svg{width:26px;height:26px}
.badge-peach{background:var(--peach)}
.badge-white{background:#fff}
.badge-teal{background:var(--teal);width:44px;height:44px;border-radius:12px}
.badge-teal svg{width:24px;height:24px}

.card-title{
  font-weight:600;font-size:19px;color:var(--ink);margin:0;line-height:1.3;
}
.card-body{
  font-weight:400;font-size:16px;color:var(--muted);margin:0;line-height:1.5;
}

/* ===== Chat section ===== */
.chat-section{
  background:var(--navy);
  padding:100px var(--pad-x);
  display:flex;flex-direction:column;align-items:center;
  gap:48px;
}
.chat-header{
  display:flex;flex-direction:column;align-items:center;
  gap:16px;
}
.chat-demo{
  width:100%;
  max-width:1180px;
  height:520px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  overflow:hidden;
  display:flex;
}
.chat-tabs{
  width:360px;
  flex-shrink:0;
  background:rgba(255,255,255,.03);
  padding:20px 16px;
  display:flex;flex-direction:column;gap:4px;
  overflow:hidden;
}
.chat-tab{
  display:flex;align-items:center;gap:12px;
  padding:14px;
  border-radius:12px;
  color:var(--muted-light);
  font-weight:500;font-size:16px;
  text-align:left;
  transition:background .12s ease, color .12s ease;
}
.chat-tab svg{width:20px;height:20px;flex-shrink:0}
.chat-tab:hover{background:rgba(255,255,255,.05);color:#fff}
.chat-tab[aria-selected="true"]{
  background:var(--coral);
  color:#fff;
  font-weight:600;
}

.chat-transcript{
  flex:1;
  min-width:0;
  padding:32px;
  display:flex;flex-direction:column;
  gap:20px;
  overflow:hidden;
}
.user-bubble{display:flex;justify-content:flex-end}
.user-bubble > div, .user-text{
  background:var(--mint);
  color:var(--navy);
  font-weight:500;font-size:16px;line-height:1.45;
  padding:14px 18px;
  border-radius:18px;
  max-width:440px;
  margin:0;
}
.data-chip{
  display:inline-flex;align-items:center;gap:8px;
  align-self:flex-start;
  background:rgba(52,211,153,.15);
  color:var(--chip-green);
  font-weight:500;font-size:13px;
  padding:8px 14px 8px 12px;
  border-radius:14px;
}
.assistant-bubble{
  display:flex;gap:12px;align-items:flex-start;
}
.avatar{
  width:34px;height:34px;
  background:var(--navy);
  border-radius:17px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  padding:0 6px;
}
.avatar img{width:23px;height:14px;object-fit:contain}
.assistant-body{
  flex:1;min-width:0;
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:16px 18px;
  display:flex;flex-direction:column;gap:10px;
}
.thought{
  color:var(--muted);
  font-weight:500;font-size:13px;
  margin:0;line-height:1.4;
}
.answer{
  color:#fff;
  font-size:16px;line-height:1.5;
  margin:0;
}

/* ===== How It Works ===== */
.how{
  background:var(--cream);
  padding:100px var(--pad-x);
  display:flex;flex-direction:column;align-items:center;
  gap:48px;
}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  width:100%;
  max-width:1164px;
}
.step{
  background:#fff;
  border:1px solid var(--peach);
  border-radius:20px;
  padding:32px 28px;
  display:flex;flex-direction:column;gap:16px;
}
.num{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  border-radius:24px;
  color:#fff;
  font-family:var(--serif);
  font-weight:700;font-size:22px;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
.num-coral{background:var(--coral)}
.num-mint{background:var(--mint)}
.num-yellow{background:var(--amber)}
.step-title{font-weight:600;font-size:21px;color:var(--ink);margin:0;line-height:1.25}
.step-body{font-size:16px;color:var(--muted);margin:0;line-height:1.5}

/* ===== Feature Proof ===== */
.feature-proof{
  background:var(--cream);
  padding:20px var(--pad-x) 100px;
}
.feature-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1164px;
  margin:0 auto;
}
.feature-card{
  border-radius:20px;
  padding:32px 28px;
  display:flex;flex-direction:column;gap:14px;
}
.feature-peach{background:var(--peach)}
.feature-mint{background:var(--teal)}
.feature-yellow{background:var(--yellow)}
.feat-title{font-weight:600;font-size:20px;color:var(--ink);margin:0;line-height:1.3}
.feat-body{font-size:16px;color:var(--ink);opacity:.75;margin:0;line-height:1.5}

/* ===== Trust ===== */
.trust{
  background:var(--teal);
  padding:80px var(--pad-x);
  display:flex;align-items:center;
  gap:56px;
}
.trust-left{
  width:560px;
  display:flex;flex-direction:column;gap:16px;
}
.trust-left .display-2{font-size:38px;text-align:left;line-height:1.16}
.trust-left .lede{text-align:left;font-size:18px;line-height:1.5;margin:0}
.trust-right{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:12px;
}
.trust-badge{
  display:flex;align-items:center;gap:14px;
  background:#fff;
  border-radius:14px;
  padding:16px 18px;
}
.trust-text{flex:1;min-width:0}
.trust-title{font-weight:600;font-size:16px;color:var(--ink);margin:0 0 2px}
.trust-sub{font-weight:400;font-size:14px;color:var(--muted);margin:0}

/* ===== FAQ ===== */
.faq{
  background:var(--cream);
  padding:100px var(--pad-x);
  display:flex;flex-direction:column;align-items:center;
  gap:40px;
}
.faq-list{
  display:flex;flex-direction:column;gap:16px;
  width:100%;
  max-width:820px;
}
.faq-item{
  background:#fff;
  border:1px solid var(--peach);
  border-radius:16px;
  padding:24px 28px;
  display:flex;flex-direction:column;gap:10px;
}
.faq-q{font-weight:600;font-size:19px;color:var(--ink);margin:0;line-height:1.3}
.faq-a{font-size:16px;color:var(--muted);margin:0;line-height:1.5}

/* ===== Final CTA ===== */
.final-cta{
  padding:110px var(--pad-x);
  background:linear-gradient(90deg, #e8756a 0%, #ffb8a0 55%, #ffd485 100%);
  display:flex;flex-direction:column;align-items:center;
  gap:24px;
  text-align:center;
}
.display-final{font-size:clamp(30px, 4vw, 54px);color:#fff;line-height:1.12}
.final-sub{
  max-width:660px;
  font-size:clamp(15px, 1.4vw, 19px);line-height:1.47;
  color:#fff;opacity:.92;
  font-weight:500;
  margin:0;
}
.signup-form{
  margin-top:8px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:100%;max-width:560px;
}
.signup-form[hidden]{display:none}
.signup-form .email-input{
  width:100%;
  font:inherit;font-size:17px;
  background:rgba(255,255,255,.95);
  color:var(--ink);
  border:0;border-radius:32px;
  padding:18px 24px;
  outline:0;
  box-shadow:0 6px 18px rgba(45,52,54,.12);
}
.signup-form .email-input::placeholder{color:#9aa3a8}
.signup-form .email-input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.6), 0 6px 18px rgba(45,52,54,.18)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.visually-hidden{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{
  color:#fff;font-weight:500;font-size:15px;margin:4px 0 0;min-height:1.2em;
}
.form-status.error{color:#3a1f1c}

.signup-success{
  width:100%;max-width:560px;
  margin-top:8px;
  background:#fff;
  border-radius:24px;
  padding:32px 28px 30px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
  box-shadow:0 18px 40px rgba(45,52,54,.18);
  animation:signupSuccessIn 520ms cubic-bezier(.16,1,.3,1) both;
}
.signup-success[hidden]{display:none}
.signup-success-icon{
  width:52px;height:52px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--coral) 0%, var(--amber) 100%);
  color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(232,117,106,.35);
  animation:signupSuccessIconIn 640ms cubic-bezier(.34,1.56,.64,1) both;
}
.signup-success-icon svg{width:28px;height:28px}
.signup-success-title{
  font-family:var(--serif);
  font-weight:700;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:clamp(26px, 2.6vw, 34px);
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0;
}
.signup-success-body{
  font-size:16px;line-height:1.5;
  color:var(--muted);
  margin:0;
  max-width:420px;
}
.signup-success-body strong{color:var(--ink);font-weight:600;word-break:break-word}
@keyframes signupSuccessIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes signupSuccessIconIn{
  from{opacity:0;transform:scale(.6)}
  to{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .signup-success,.signup-success-icon{animation:none}
}

/* ===== Footer ===== */
.footer{
  background:var(--navy);
  padding:36px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;
}
.footer-copy{
  color:var(--muted-footer);
  font-size:14px;margin:0;
}

/* ===================================================== */
/* ============== TABLET (≤1024px) ===================== */
/* ===================================================== */
@media (max-width:1024px){
  /* Trust: stack the two columns */
  .trust{
    flex-direction:column;
    align-items:stretch;
    gap:32px;
    padding:72px var(--pad-x);
  }
  .trust-left{width:100%;max-width:720px;margin:0 auto;text-align:center}
  .trust-left .display-2{text-align:center}
  .trust-left .lede{text-align:center;margin:0 auto}
  .trust-right{max-width:720px;width:100%;margin:0 auto}

  /* Chat demo: stack — tabs horizontal scroll, transcript below */
  .chat-demo{
    flex-direction:column;
    height:auto;
  }
  .chat-tabs{
    width:100%;
    flex-direction:row;
    overflow-x:auto;
    padding:14px 14px;
    gap:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .chat-tabs::-webkit-scrollbar{display:none}
  .chat-tab{
    flex-shrink:0;
    padding:10px 14px;
    font-size:14px;
    border-radius:10px;
    background:rgba(255,255,255,.04);
  }
  .chat-tab span{white-space:nowrap}
  .chat-tab[aria-selected="true"]{background:var(--coral)}
  .chat-transcript{min-height:340px}

  /* nudge nav spacing tighter on tablets */
  .nav-right{gap:24px}
  .nav-link{font-size:15px}
}

/* ===================================================== */
/* ============== MOBILE (≤768px) ====================== */
/* ===================================================== */
@media (max-width:768px){
  :root{ --pad-x:24px; }

  /* nav */
  .nav{padding:18px var(--pad-x);background:var(--cream)}
  .nav-right{display:none}
  .nav-hamburger{display:flex}
  .logo-mark{width:40px;height:24px}
  .logo-word{font-size:25px}

  /* hero */
  .hero{padding:40px var(--pad-x) 56px;gap:24px}
  .eyebrow-full{display:none}
  .eyebrow-short{display:inline}
  .display-1{font-size:36px;line-height:1.1}
  .hero-sub{font-size:16px;line-height:1.5}
  .cta-row{flex-direction:column;width:100%;gap:18px;margin-top:8px}
  .btn-primary{width:100%;font-size:17px;padding:16px 24px}
  .cta-note{font-size:14px}

  /* problem */
  .problem{padding:56px var(--pad-x);gap:32px}
  .display-2{font-size:28px;line-height:1.22;text-align:center}
  .lede{font-size:16px;line-height:1.5}
  .pain-cards{grid-template-columns:1fr;gap:16px}
  .pain-card{padding:24px 22px}
  .badge{width:48px;height:48px;border-radius:14px}
  .badge svg{width:24px;height:24px}
  .card-title{font-size:18px}
  .card-body{font-size:15px}

  /* chat section */
  .chat-section{padding:64px var(--pad-x);gap:32px}
  .chat-header{gap:14px}
  .eyebrow-uppercase{font-size:13px}
  .chat-demo{
    flex-direction:column;
    height:auto;
    max-height:none;
    border-radius:20px;
  }
  .chat-tabs{
    width:100%;
    flex-direction:row;
    overflow-x:auto;
    padding:14px 14px;
    gap:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .chat-tabs::-webkit-scrollbar{display:none}
  .chat-tab{flex-shrink:0;padding:10px 14px;font-size:14px;border-radius:10px;background:rgba(255,255,255,.04)}
  .chat-tab span{white-space:nowrap}
  .chat-transcript{padding:22px;gap:14px}
  .user-bubble > div, .user-text{max-width:100%;font-size:15px}
  .answer{font-size:15px}
  .thought{font-size:12px}

  /* how */
  .how{padding:56px var(--pad-x);gap:28px}
  .steps{grid-template-columns:1fr;gap:16px}
  .step{padding:24px 22px;gap:12px}
  .num{width:44px;height:44px;border-radius:22px;font-size:20px}
  .step-title{font-size:19px}
  .step-body{font-size:15px}

  /* feature proof */
  .feature-proof{padding:0 var(--pad-x) 56px}
  .feature-cards{grid-template-columns:1fr;gap:14px}
  .feature-card{
    flex-direction:row;align-items:center;gap:14px;
    padding:22px;
  }
  .feature-card .badge{margin-bottom:0;flex-shrink:0}
  .feature-card-text{display:flex;flex-direction:column;gap:6px}
  .feat-title{font-size:17px}
  .feat-body{font-size:14px;line-height:1.45}

  /* trust */
  .trust{flex-direction:column;align-items:stretch;padding:56px var(--pad-x);gap:24px}
  .trust-left{width:100%}
  .trust-left .display-2{font-size:26px;text-align:left;line-height:1.2}
  .trust-left .lede{font-size:16px}
  .trust-right{gap:10px}
  .trust-badge{padding:14px 16px;align-items:flex-start}
  .trust-badge .badge{width:38px;height:38px;border-radius:10px}
  .trust-badge .badge svg{width:20px;height:20px}
  .trust-title{font-size:16px}
  .trust-sub{font-size:14px;line-height:1.4}

  /* faq */
  .faq{padding:56px var(--pad-x);gap:24px}
  .faq-list{max-width:none}
  .faq-item{padding:22px}
  .faq-q{font-size:17px}
  .faq-a{font-size:15px}

  /* final cta */
  .final-cta{padding:64px var(--pad-x);gap:18px}
  .display-final{font-size:32px;line-height:1.12}
  .final-sub{font-size:16px}
  .btn-dark{width:100%;font-size:17px;padding:18px 32px}

  /* footer */
  .footer{flex-direction:column;gap:14px;padding:32px var(--pad-x);text-align:center}
}

/* extra tight */
@media (max-width:380px){
  .display-1{font-size:32px}
  .display-final{font-size:28px}
}

/* prevent flash for slow font load */
.fonts-loading h1, .fonts-loading h2 { visibility:visible }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}