/* ==========================================================================
   Funnel Builder Pro AI - Early Access Funnel
   Design tokens lifted verbatim from the app bundle at app.funnelbuilderpro.ai
   (assets/index-*.css :root block). HSL values converted to hex for reference.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  /* Core surfaces */
  --background:        hsl(210 39% 14%);   /* #162432 */
  --surface-deep:      hsl(210 39% 12%);   /* #131F2B  (app sidebar) */
  --card:              hsl(210 35% 17%);   /* #1C2B3B */
  --card-top:          hsl(210 35% 19%);   /* #1F3041 */
  --secondary:         hsl(210 30% 20%);   /* #243342 */

  /* Text */
  --foreground:        hsl(210 9% 98%);    /* #F9FAFA */
  --muted-foreground:  hsl(210 15% 68%);   /* #A1ADBA */

  /* Lines + fields */
  --border:            hsl(210 28% 22%);   /* #283848 */

  /* Brand */
  --primary:           hsl(204 100% 50%);  /* #0099FF */
  --primary-lift:      hsl(204 100% 65%);  /* #4DB8FF */
  --primary-foreground:hsl(0 0% 100%);
  --accent:            hsl(9 80% 56%);     /* #E95035 */

  /* Composites, straight from the app */
  --radius: .75rem;
  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% 0%, hsl(204 100% 50% / .10), transparent 60%),
                   radial-gradient(ellipse 60% 40% at 100% 100%, hsl(9 80% 56% / .06), transparent 60%);
  --gradient-accent: linear-gradient(135deg, hsl(204 100% 50%), hsl(204 100% 65%));
  --gradient-card: linear-gradient(180deg, hsl(210 35% 19%), hsl(210 35% 17%));
  --shadow-glow: 0 20px 60px -15px hsl(204 100% 50% / .30);
  --shadow-card: 0 4px 24px -6px hsl(210 50% 4% / .50);

  /* Type roles */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  background-color:var(--background);
  background-image:var(--gradient-hero);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--foreground);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.shell{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:26px 24px 72px;
}
.shell--narrow{max-width:760px}

/* --------------------------------------------------------------- topbar -- */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:22px;
  border-bottom:1px solid var(--border);
}

.wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.0625rem;
  letter-spacing:-.02em;
  color:var(--foreground);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.wordmark .dot-ai{color:var(--primary)}
.wordmark .glyph{display:block;flex:0 0 auto}

.tag{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid hsl(9 80% 56% / .35);
  background:hsl(9 80% 56% / .08);
  border-radius:999px;
  padding:5px 11px;
  white-space:nowrap;
}

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

.hero{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  grid-template-areas:
    "copy  form"
    "proof form";
  column-gap:64px;
  row-gap:0;
  align-items:start;
  margin-top:64px;
}
.hero-copy{grid-area:copy}
.hero .proof{grid-area:proof}
.hero .card{grid-area:form}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary);
  margin:0 0 20px;
}

h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.3rem, 5.1vw, 3.75rem);
  line-height:1.03;
  letter-spacing:-.035em;
  margin:0 0 22px;
  text-wrap:balance;
}

.lede{
  font-size:1.0625rem;
  line-height:1.68;
  color:var(--muted-foreground);
  margin:0;
  max-width:46ch;
}
.lede strong{color:var(--foreground);font-weight:600}

.proof{
  list-style:none;
  margin:34px 0 0;
  padding:0;
  border-top:1px solid var(--border);
}
.proof li{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:12px;
  align-items:start;
  padding:15px 0;
  border-bottom:1px solid var(--border);
  font-size:.9375rem;
  line-height:1.55;
  color:var(--muted-foreground);
}
.proof svg{margin-top:3px;color:var(--primary)}

/* ------------------------------------------------------------------ card -- */

.card{
  background:var(--gradient-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:30px;
}

.card h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.375rem;
  letter-spacing:-.02em;
  margin:0 0 8px;
}
.card .card-sub{
  font-size:.875rem;
  line-height:1.6;
  color:var(--muted-foreground);
  margin:0 0 26px;
}

/* ----------------------------------------------------------------- form -- */

.field{margin-bottom:18px}

.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-foreground);
  margin-bottom:8px;
}
.field label .req{color:var(--accent);margin-left:3px}

.field input,
.field select{
  width:100%;
  font-family:var(--font-body);
  font-size:.9375rem;
  color:var(--foreground);
  background:var(--surface-deep);
  border:1px solid var(--border);
  border-radius:.5rem;
  padding:13px 14px;
  appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field select{
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted-foreground) 50%),
    linear-gradient(135deg,var(--muted-foreground) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:38px;
  cursor:pointer;
}
.field input::placeholder{color:hsl(210 15% 52%)}
.field input:focus,
.field select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px hsl(204 100% 50% / .20);
}
.field input:focus-visible,
.field select:focus-visible{outline:none}

.submit{
  width:100%;
  margin-top:8px;
  font-family:var(--font-body);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:.005em;
  color:var(--primary-foreground);
  background:var(--gradient-accent);
  border:0;
  border-radius:.625rem;
  padding:16px 20px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.submit:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow);filter:saturate(1.08)}
.submit:active{transform:translateY(0)}
.submit:focus-visible{outline:2px solid var(--primary-lift);outline-offset:3px}

.fineprint{
  font-size:.8125rem;
  line-height:1.6;
  color:var(--muted-foreground);
  margin:16px 0 0;
}

/* -------------------------------------------------------------- console -- */
/* Signature element: the copilot build log, styled as the app renders output. */

.console{
  margin-top:72px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-deep);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

.console-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 18px;
  background:var(--card);
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-foreground);
}
.console-bar .lamps{display:inline-flex;gap:6px;margin-right:4px}
.console-bar .lamps i{
  width:8px;height:8px;border-radius:50%;
  background:var(--border);display:block;
}
.console-bar .lamps i:first-child{background:hsl(9 80% 56% / .6)}
.console-bar .left{display:inline-flex;align-items:center;gap:12px}

.console-body{padding:8px 18px 18px}

.logline{
  display:grid;
  grid-template-columns:34px 116px 1fr;
  gap:14px;
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid hsl(210 28% 22% / .7);
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted-foreground);
}
.logline .idx{color:var(--primary);font-size:11px;letter-spacing:.08em}
.logline .key{color:var(--foreground);font-weight:500}
.logline .val{color:var(--muted-foreground)}

.logline--done{
  grid-template-columns:34px 1fr auto;
  border-bottom:0;
  padding-top:16px;
  color:var(--foreground);
}
.logline--done .idx{color:var(--primary)}
.logline--done .val{color:var(--primary);font-weight:500}

.console-note{
  font-size:.8125rem;
  color:var(--muted-foreground);
  margin:16px 2px 0;
  font-family:var(--font-mono);
  letter-spacing:.02em;
}

/* Page-load reveal, one pass only. */
.reveal{opacity:0;transform:translateY(6px);animation:rise .5s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  .submit{transition:none}
  .submit:hover{transform:none}
}

/* -------------------------------------------------------- confirm stack -- */

.confirm{margin-top:72px;text-align:left}

.seal{
  width:52px;height:52px;
  border-radius:50%;
  display:grid;place-items:center;
  background:hsl(204 100% 50% / .12);
  border:1px solid hsl(204 100% 50% / .40);
  color:var(--primary);
  margin-bottom:26px;
}

.steps{
  list-style:none;
  counter-reset:s;
  margin:44px 0 0;
  padding:0;
  border-top:1px solid var(--border);
}
.steps li{
  counter-increment:s;
  display:grid;
  grid-template-columns:40px 1fr;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--border);
  font-size:.9375rem;
  line-height:1.6;
  color:var(--muted-foreground);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--primary);
  padding-top:4px;
}
.steps li b{
  display:block;
  color:var(--foreground);
  font-weight:600;
  font-size:1rem;
  margin-bottom:3px;
}

.section-label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-foreground);
  margin:0;
}

.applink{
  color:var(--primary);
  text-decoration:none;
  border-bottom:1px solid hsl(204 100% 50% / .35);
}
.applink:hover{border-bottom-color:var(--primary)}
.applink:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}

/* ---------------------------------------------------------------- footer -- */

.footer{
  margin-top:72px;
  padding-top:22px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:hsl(210 15% 52%);
}

/* --------------------------------------------------------- debug readout -- */
/* Hidden unless the URL carries ?debug=1 */

.readout{
  display:none;
  gap:14px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-foreground);
}
.readout.on{display:inline-flex}
.readout span{display:inline-flex;align-items:center;gap:6px}
.readout .dot{width:7px;height:7px;border-radius:50%;background:var(--border);display:block}
.readout .dot.ok{background:var(--primary)}
.readout .dot.bad{background:var(--accent)}

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

@media (max-width:900px){
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "form"
      "proof";
    row-gap:40px;
    margin-top:48px;
  }
  .proof{margin-top:0}
  .lede{max-width:none}
  .console{margin-top:52px}
  .confirm{margin-top:52px}
  .card{padding:26px}
}

@media (max-width:560px){
  .shell{padding:20px 18px 56px}
  .logline{grid-template-columns:28px 1fr;row-gap:2px}
  .logline .val{grid-column:2}
  .logline--done{grid-template-columns:28px 1fr}
  .console-body{padding:6px 15px 16px}
  .console-bar{padding:12px 15px;font-size:10px}
  .footer{flex-direction:column;gap:8px}
}