/* Numzi landing pages (/count, /read) — layout on top of numzi.css tokens */

/* logged-out top bar */
.lp-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.5rem; min-height:88px; background:var(--cream); border-bottom:3px solid var(--warm);
  position:sticky; top:0; z-index:100;
}
.lp-top .nav-logo img{height:54px; display:block;}
.lp-top-right{display:flex; align-items:center; gap:.7rem;}

/* hero */
.lp-hero{
  display:flex; flex-wrap:wrap; align-items:center; gap:3rem;
  max-width:1080px; margin:0 auto; padding:3.5rem 1.5rem 3rem;
}
.lp-hero-text{flex:1 1 380px;}
.lp-eyebrow{
  display:inline-block; font-family:'Fredoka One',cursive; font-size:.85rem; color:var(--ink);
  background:var(--yellow); border:2px solid var(--ink); border-radius:999px; padding:.25rem .9rem; margin-bottom:1rem;
}
.lp-hero-text h1{font-family:'Fredoka One',cursive; font-size:clamp(2rem,4.5vw,3rem); line-height:1.1; margin:0 0 1rem;}
.lp-hero-text .lead{font-size:1.15rem; font-weight:700; color:var(--brown); line-height:1.5; margin:0 0 1.75rem;}
.lp-cta{
  font-family:'Fredoka One',cursive; color:#fff; background:var(--orange); border:2.5px solid var(--ink);
  border-radius:14px; padding:.9rem 1.6rem; font-size:1.15rem; cursor:pointer; box-shadow:0 5px 0 var(--orange-d);
  display:inline-block;
}
.lp-cta:active{transform:translateY(2px); box-shadow:0 3px 0 var(--orange-d);}
.lp-cta.read{background:var(--lavender); box-shadow:0 5px 0 var(--lavender-d);}
.lp-cta-note{display:block; margin-top:.7rem; color:var(--brown); font-weight:700; font-size:.85rem;}
/* Refund guarantee, same wording and green treatment as the homepage's .lrn-refund. These
   pages are ad sitelinks, so the offer they show has to be the offer the homepage shows -
   subscribe with the 30-day refund - or the ad promises one thing and the page another. */
.lp-refund{
  font-size:.85rem; color:#2f5d3f; font-weight:700; line-height:1.5;
  background:#EAF6EC; border:1.5px solid #b9d7c1; border-radius:12px;
  padding:.7rem .9rem; margin:1rem 0 0; text-align:left; max-width:34rem;
}
.lp-refund strong{color:#236b3c;}
.lp-final .lp-refund{margin-left:auto; margin-right:auto;}

/* hero visual card */
.lp-hero-visual{flex:1 1 320px; display:flex; justify-content:center;}
.lp-device{
  background:var(--card); border:3px solid var(--ink); border-radius:26px; padding:1.6rem;
  box-shadow:8px 8px 0 var(--ink); width:100%; max-width:340px; text-align:center;
}
.lp-device .big{font-size:4.5rem; line-height:1;}
.lp-device .charms{font-size:2.4rem; letter-spacing:.3rem; margin:.6rem 0;}
.lp-device .cap{font-family:'Fredoka One',cursive; font-size:1.1rem; margin-top:.5rem;}
.lp-device .sub{color:var(--brown); font-weight:700; font-size:.9rem;}

/* sections */
.lp-section{max-width:1000px; margin:0 auto; padding:2.5rem 1.5rem;}
.lp-section h2{font-family:'Fredoka One',cursive; font-size:1.7rem; text-align:center; margin:0 0 .5rem;}
.lp-section .sec-sub{text-align:center; color:var(--brown); font-weight:700; max-width:620px; margin:0 auto 2rem;}
.lp-band{background:var(--kraft); border-top:3px solid var(--warm); border-bottom:3px solid var(--warm);}

/* reframe two-column */
.lp-vs{display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:720px; margin:0 auto;}
.lp-vs .col{background:var(--card); border:2.5px solid var(--ink); border-radius:16px; padding:1.3rem; text-align:center;}
.lp-vs .col .ic{font-size:2.2rem;}
.lp-vs .col h3{font-family:'Fredoka One',cursive; font-size:1.05rem; margin:.5rem 0 .3rem;}
.lp-vs .col p{color:var(--brown); font-weight:700; font-size:.9rem; margin:0;}
.lp-vs .col.good{box-shadow:5px 5px 0 var(--ink);}

/* steps */
.lp-steps{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.lp-step{background:var(--card); border:2.5px solid var(--ink); border-radius:18px; padding:1.4rem; box-shadow:4px 4px 0 var(--ink);}
.lp-step .n{font-family:'Fredoka One',cursive; width:38px; height:38px; border-radius:50%; background:var(--orange); color:#fff; border:2.5px solid var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:.7rem;}
.lp-step.read .n{background:var(--lavender);}
.lp-step h3{font-family:'Fredoka One',cursive; font-size:1.1rem; margin:.2rem 0 .3rem;}
.lp-step p{color:var(--brown); font-weight:700; font-size:.92rem; margin:0;}

/* learn list */
.lp-learn{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;}
.lp-learn .chip{background:var(--card); border:2.5px solid var(--ink); border-radius:999px; padding:.5rem 1.1rem; font-weight:800;}

/* why / credibility */
.lp-why{background:var(--card); border:2.5px solid var(--ink); border-radius:20px; padding:1.8rem; text-align:center; max-width:760px; margin:0 auto; box-shadow:5px 5px 0 var(--ink);}
.lp-why .badges{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1rem;}

/* cross-sell */
.lp-cross{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; justify-content:center;
  background:var(--card); border:2.5px dashed var(--ink); border-radius:18px; padding:1.4rem 1.6rem; max-width:760px; margin:0 auto;
}
.lp-cross .ic{font-size:2.5rem;}
.lp-cross .tx{flex:1 1 240px;}
.lp-cross .tx h3{font-family:'Fredoka One',cursive; margin:0 0 .2rem;}
.lp-cross .tx p{color:var(--brown); font-weight:700; margin:0; font-size:.92rem;}

/* final cta */
.lp-final{text-align:center; padding:3rem 1.5rem 3.5rem;}
.lp-final h2{font-family:'Fredoka One',cursive; font-size:1.8rem; margin:0 0 1.25rem;}

/* trust strip */
.lp-trust{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; padding:0 1.5rem 1.5rem; max-width:900px; margin:0 auto;}
.lp-trust span{background:var(--kraft); border:2px solid var(--ink); border-radius:999px; padding:.4rem 1rem; font-weight:800; font-size:.9rem;}

/* testimonials */
.lp-quotes{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); max-width:1000px; margin:0 auto;}
.lp-quotes .q{background:var(--card); border:2.5px solid var(--ink); border-radius:18px; padding:1.3rem; box-shadow:4px 4px 0 var(--ink);}
.lp-quotes .q p{margin:0 0 .7rem; font-weight:700; line-height:1.5;}
.lp-quotes .q span{color:var(--brown); font-weight:800; font-size:.88rem;}
.lp-quotes .q .stars{color:var(--yellow); font-size:1rem; letter-spacing:1px; -webkit-text-stroke:.5px var(--ink);}

/* founder / about us */
.lp-founder{display:flex; gap:1.1rem; align-items:center; background:var(--card); border:2.5px solid var(--ink); border-radius:20px; padding:1.5rem 1.6rem; max-width:760px; margin:0 auto; box-shadow:5px 5px 0 var(--ink);}
.lp-founder .em{font-size:2.8rem; flex-shrink:0;}
.lp-founder h3{font-family:'Fredoka One',cursive; margin:0 0 .3rem;}
.lp-founder p{color:var(--brown); font-weight:700; margin:0; line-height:1.55; font-size:.95rem;}

/* footer */
.lp-foot{text-align:center; color:var(--brown); font-weight:700; font-size:.85rem; padding:2rem 1.5rem; border-top:3px solid var(--warm);}
@media (max-width:520px){ .lp-founder{flex-direction:column; text-align:center;} }

@media (max-width:760px){
  .lp-top{padding:0 1.1rem;} .lp-section{padding:2rem 1.1rem;}
  .lp-vs{grid-template-columns:1fr;}
}