#catechiq-landing{
  --ink:#14162b;
  --ink-2:#1c1f3d;
  --parchment:#efe7d8;
  --parchment-2:#e3d9c4;
  --gold:#c9a227;
  --gold-bright:#e0bc4a;
  --blue:#3a5a8c;
  --ember:#a13d2c;
  --text-light:#f5f1e6;
  --text-muted:#a9acc9;
  --serif: "Fraunces", serif;
  --sans: "Manrope", sans-serif;

  position:relative;
  background:var(--ink);
  color:var(--text-light);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
#catechiq-landing, #catechiq-landing *{box-sizing:border-box;}
#catechiq-landing img, #catechiq-landing svg{display:block;max-width:100%;}
#catechiq-landing a{color:inherit;}

#catechiq-landing .ciq-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:640px){ #catechiq-landing .ciq-wrap{padding:0 20px;} }

/* subtle mosaic backdrop texture (scoped to this container, scrolls with it) */
#catechiq-landing .mosaic-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.05;
  background-image:
    linear-gradient(45deg, var(--gold) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gold) 25%, transparent 25%);
  background-size:64px 64px;
  z-index:0;
}

/* Header */
#catechiq-landing .ciq-header{
  position:relative;
  z-index:2;
  padding:28px 0;
}
#catechiq-landing .header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
#catechiq-landing .brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.3rem;
  letter-spacing:0.01em;
}
#catechiq-landing .brand-mark{
  width:34px;height:34px;flex:none;
}
#catechiq-landing .ciq-nav{
  display:flex;
  gap:32px;
  font-size:0.95rem;
  color:var(--text-muted);
}
#catechiq-landing .ciq-nav a{text-decoration:none;transition:color .2s;}
#catechiq-landing .ciq-nav a:hover{color:var(--text-light);}
@media (max-width:640px){ #catechiq-landing .ciq-nav{display:none;} }

/* Hero */
#catechiq-landing .hero{
  position:relative;
  z-index:2;
  padding:64px 0 100px;
}
#catechiq-landing .hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:64px;
  align-items:center;
}
@media (max-width:900px){
  #catechiq-landing .hero-grid{grid-template-columns:1fr;gap:56px;}
}
#catechiq-landing .hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.6rem, 5.5vw, 4.1rem);
  line-height:1.05;
  margin:0 0 24px;
  letter-spacing:-0.01em;
}
#catechiq-landing .hero h1 .drop{
  font-size:1.5em;
  font-weight:600;
  color:var(--gold-bright);
}
#catechiq-landing .hero p.lede{
  font-size:1.15rem;
  color:var(--text-muted);
  max-width:46ch;
  margin:0 0 36px;
}
#catechiq-landing .cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-bottom:16px;
}
#catechiq-landing .btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-radius:10px;
  font-family:var(--sans);
  font-weight:700;
  font-size:0.98rem;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
#catechiq-landing .btn:active{transform:scale(0.98);}
#catechiq-landing .btn-primary{
  background:var(--gold);
  color:var(--ink);
}
#catechiq-landing .btn-primary:hover{background:var(--gold-bright);}
#catechiq-landing .btn-ghost{
  background:transparent;
  border-color:rgba(245,241,230,0.25);
  color:var(--text-light);
}
#catechiq-landing .btn-ghost:hover{border-color:rgba(245,241,230,0.55);}
#catechiq-landing .btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;}

#catechiq-landing .store-note{
  font-size:0.88rem;
  color:var(--text-muted);
}

/* Notify form */
#catechiq-landing .notify{
  margin-top:28px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  max-width:420px;
}
#catechiq-landing .notify input[type=email]{
  flex:1;
  min-width:200px;
  padding:13px 16px;
  border-radius:10px;
  border:1px solid rgba(245,241,230,0.2);
  background:var(--ink-2);
  color:var(--text-light);
  font-family:var(--sans);
  font-size:0.95rem;
}
#catechiq-landing .notify input[type=email]:focus{outline:2px solid var(--gold-bright);outline-offset:2px;}
#catechiq-landing .notify input[type=email]::placeholder{color:var(--text-muted);}
#catechiq-landing .notify .btn{padding:13px 20px;}
#catechiq-landing .notify-msg{
  margin-top:10px;
  font-size:0.9rem;
  color:var(--gold-bright);
  min-height:1.2em;
}
#catechiq-landing .formkit-alert{
  list-style:none;
  margin:8px 0 0 0;
  padding:0;
  font-size:0.85rem;
  color:var(--ember);
}
#catechiq-landing .formkit-alert:empty{display:none;}

/* Quiz card */
#catechiq-landing .quiz-card{
  background:var(--parchment);
  color:var(--ink);
  border-radius:18px;
  padding:32px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
  position:relative;
}
#catechiq-landing .quiz-eyebrow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.85rem;
  color:#6b6450;
  margin-bottom:18px;
}
#catechiq-landing .quiz-progress{
  display:flex;
  gap:5px;
}
#catechiq-landing .quiz-progress span{
  width:22px;height:5px;border-radius:3px;
  background:var(--parchment-2);
}
#catechiq-landing .quiz-progress span.done{background:var(--blue);}
#catechiq-landing .quiz-question{
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:500;
  line-height:1.3;
  margin:0 0 22px;
}
#catechiq-landing .quiz-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#catechiq-landing .quiz-opt{
  text-align:left;
  padding:13px 16px;
  border-radius:10px;
  border:1.5px solid var(--parchment-2);
  background:#f8f4ea;
  font-family:var(--sans);
  font-size:0.98rem;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
#catechiq-landing .quiz-opt:hover{border-color:var(--blue);}
#catechiq-landing .quiz-opt.correct{
  background:#e9f2e2;
  border-color:#5c8a4a;
  font-weight:700;
}
#catechiq-landing .quiz-opt.wrong{
  background:#f4e3e0;
  border-color:var(--ember);
}
#catechiq-landing .quiz-opt[disabled]{cursor:default;}
#catechiq-landing .quiz-feedback{
  margin-top:16px;
  font-size:0.92rem;
  color:#5c5540;
  min-height:1.3em;
}
#catechiq-landing .quiz-feedback strong{color:var(--blue);}

/* How it works */
#catechiq-landing .section{
  position:relative;
  z-index:2;
  padding:80px 0;
}
#catechiq-landing .section-head{
  max-width:56ch;
  margin-bottom:52px;
}
#catechiq-landing .section-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.8rem, 3.4vw, 2.5rem);
  margin:0 0 14px;
}
#catechiq-landing .section-head p{
  color:var(--text-muted);
  font-size:1.05rem;
  margin:0;
}
#catechiq-landing .steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}
@media (max-width:800px){ #catechiq-landing .steps{grid-template-columns:1fr;} }
#catechiq-landing .step{
  border-top:2px solid rgba(245,241,230,0.15);
  padding-top:22px;
}
#catechiq-landing .step .num{
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--gold-bright);
  display:block;
  margin-bottom:10px;
}
#catechiq-landing .step h3{
  font-family:var(--sans);
  font-size:1.1rem;
  margin:0 0 8px;
}
#catechiq-landing .step p{
  color:var(--text-muted);
  font-size:0.96rem;
  margin:0;
}

/* Topics mosaic */
#catechiq-landing .topics-section{background:var(--ink-2);}
#catechiq-landing .mosaic{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
  border-radius:16px;
  overflow:hidden;
}
@media (max-width:800px){ #catechiq-landing .mosaic{grid-template-columns:repeat(2,1fr);} }
#catechiq-landing .tile{
  padding:28px 20px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
}
#catechiq-landing .tile h4{
  font-family:var(--serif);
  font-size:1.05rem;
  margin:0;
  font-weight:600;
}
#catechiq-landing .tile span{
  font-size:0.82rem;
  color:rgba(255,255,255,0.75);
}
#catechiq-landing .tile.t1{background:#3a5a8c;}
#catechiq-landing .tile.t2{background:#4a3a6a;}
#catechiq-landing .tile.t3{background:#5c4426;}
#catechiq-landing .tile.t4{background:#7a3228;}
#catechiq-landing .tile.t5{background:#2f4a3a;}

/* Footer CTA */
#catechiq-landing .footer-cta{
  text-align:left;
  padding:90px 0 60px;
}
#catechiq-landing .footer-cta h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem,4vw,3rem);
  max-width:16ch;
  margin:0 0 28px;
}
#catechiq-landing .ciq-footer{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(245,241,230,0.12);
  padding:32px 0 48px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  font-size:0.88rem;
  color:var(--text-muted);
}

@media (prefers-reduced-motion: reduce){
  #catechiq-landing{scroll-behavior:auto;}
  #catechiq-landing *{transition:none !important;}
}