:root{
  --bg:#FBFAF5;
  --card:#FFFFFF;
  --ink:#22333B;
  --ink-soft:#647079;
  --coral:#1F9E89;
  --coral-dark:#157C6B;
  --lavender:#F0A73C;
  --mint:#E8636B;
  --mint-bg:#FBE1E1;
  --yellow:#4FA8D8;
  --yellow-bg:#DCEEF8;
  --pink:#6FAE52;
  --pink-bg:#E4F1DA;
  --sky:#A6528C;
  --sky-bg:#F1E1EC;
  --coral-bg:#D9F2EA;
  --lavender-bg:#FDEBD2;
  --radius:22px;
  --shadow: 0 10px 30px rgba(34,51,59,0.08);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Nunito', sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
}
a{text-decoration:none; color:inherit;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}

/* HEADER */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,248,240,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(45,42,61,0.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Baloo 2'; font-weight:800; font-size:22px;
}
.logo-tiles{display:flex; gap:3px;}
.logo-tiles span{
  width:24px; height:24px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:800; font-family:'Baloo 2';
  transform:rotate(-6deg);
}
.logo-tiles span:nth-child(1){background:var(--coral);}
.logo-tiles span:nth-child(2){background:var(--lavender); transform:rotate(4deg); margin-top:2px;}
.logo-tiles span:nth-child(3){background:var(--mint); transform:rotate(-3deg);}
nav ul{display:flex; gap:32px; list-style:none;}
nav ul li a{
  font-weight:700; font-size:15px; color:var(--ink-soft);
  transition:color .2s;
}
nav ul li a:hover{color:var(--coral-dark);}
.nav-cta{
  background:var(--ink); color:#fff !important;
  padding:10px 20px; border-radius:999px; font-weight:700; font-size:14px;
}
.nav-toggle{display:none;}

/* HERO */
.hero{
  padding:70px 0 40px;
  position:relative;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--coral-bg); color:var(--coral-dark);
  font-weight:800; font-size:13px; padding:8px 16px; border-radius:999px;
  margin-bottom:20px;
}
.badge .dot{width:7px; height:7px; background:var(--coral-dark); border-radius:50%;}
.hero h1{
  font-size:48px; line-height:1.12; letter-spacing:-0.5px;
  margin-bottom:18px;
}
.hero h1 .hl{color:var(--coral-dark); position:relative; white-space:nowrap;}
.hero p{
  font-size:18px; color:var(--ink-soft); max-width:460px; margin-bottom:28px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 26px; border-radius:999px; font-weight:800; font-size:15px;
  border:none; cursor:pointer; transition:transform .15s, box-shadow .15s;
  font-family:'Nunito';
}
.btn-primary{background:var(--coral-dark); color:#fff; box-shadow:0 8px 20px rgba(232,110,76,0.35);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{background:#fff; color:var(--ink); border:2px solid rgba(45,42,61,0.1);}
.btn-ghost:hover{border-color:var(--ink);}
.trust-row{display:flex; gap:22px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); font-weight:700;}
.trust-row span{display:flex; align-items:center; gap:6px;}

/* HERO VISUAL - hangman tile stack */
.hero-visual{position:relative; height:400px;}
.tile{
  position:absolute; width:64px; height:64px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2'; font-size:30px; font-weight:800; color:#fff;
  box-shadow:0 10px 22px rgba(45,42,61,0.18);
}
.gallows{
  position:absolute; left:10px; top:0; width:150px; height:340px;
}
.gallows svg{width:100%; height:100%;}

/* TILE MARQUEE */
.marquee-wrap{
  background:var(--ink); padding:26px 0; overflow:hidden; margin:70px 0;
  transform:rotate(-1.2deg); box-shadow:0 4px 0 rgba(0,0,0,0.05);
}
.marquee{display:flex; gap:16px; width:max-content; animation:scroll 26s linear infinite;}
.marquee .mtile{
  width:52px; height:52px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2'; font-size:24px; font-weight:800; color:#fff;
}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* SECTION HEADS */
.section{padding:50px 0;}
.section-head{text-align:center; max-width:600px; margin:0 auto 44px;}
.eyebrow{
  font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  color:var(--coral-dark); margin-bottom:10px; display:block;
}
.section-head h2{font-size:34px; margin-bottom:12px;}
.section-head p{color:var(--ink-soft); font-size:16px;}

/* TOOL GRID */
.tool-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.tool-card{
  background:var(--card); border-radius:var(--radius); padding:26px;
  box-shadow:var(--shadow); position:relative; transition:transform .2s, box-shadow .2s;
  display:flex; flex-direction:column; gap:14px;
  border:2px solid transparent;
}
.tool-card:hover{transform:translateY(-6px); box-shadow:0 16px 34px rgba(45,42,61,0.14);}
.tool-card.featured{
  grid-column:span 2; grid-row:span 1;
  background:linear-gradient(135deg, var(--coral-bg), #fff 70%);
  border-color:var(--coral);
}
.tool-icon{
  width:50px; height:50px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; color:#fff; font-family:'Baloo 2';
}
.tool-card h3{font-size:19px; margin-bottom:2px;}
.tool-card p{font-size:14px; color:var(--ink-soft); flex-grow:1;}
.tool-link{
  font-weight:800; font-size:14px; display:inline-flex; align-items:center; gap:6px;
}
.pop-tag{
  position:absolute; top:20px; right:20px;
  background:var(--coral-dark); color:#fff; font-size:11px; font-weight:800;
  padding:5px 12px; border-radius:999px; letter-spacing:0.4px;
}
.soon-card{
  border:2px dashed rgba(45,42,61,0.2); background:transparent; box-shadow:none;
  align-items:center; text-align:center; justify-content:center; color:var(--ink-soft);
}
.soon-card:hover{transform:none; box-shadow:none;}

/* WHY US */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.why-card{
  background:var(--card); border-radius:18px; padding:24px; box-shadow:var(--shadow);
  text-align:center;
}
.why-card .ic{
  width:46px; height:46px; border-radius:12px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.why-card h4{font-size:16px; margin-bottom:6px;}
.why-card p{font-size:13px; color:var(--ink-soft);}

/* HOW IT WORKS */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative;}
.step{
  background:var(--card); border-radius:var(--radius); padding:30px 24px; box-shadow:var(--shadow);
  position:relative;
}
.step .num{
  font-family:'Baloo 2'; font-size:38px; font-weight:800; opacity:0.15; margin-bottom:6px;
}
.step h4{font-size:18px; margin-bottom:8px;}
.step p{font-size:14px; color:var(--ink-soft);}

/* FAQ */
.faq{max-width:760px; margin:0 auto;}
.faq-item{
  background:var(--card); border-radius:16px; margin-bottom:14px; box-shadow:var(--shadow);
  overflow:hidden;
}
.faq-q{
  padding:20px 24px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; font-weight:800; font-size:15.5px;
}
.faq-q .plus{font-size:22px; color:var(--coral-dark); transition:transform .25s; font-weight:400;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  padding:0 24px; font-size:14.5px; color:var(--ink-soft);
}
.faq-item.open .faq-a{max-height:200px; padding-bottom:20px;}

/* CTA BAND */
.cta-band{
  background:linear-gradient(120deg, var(--lavender), var(--coral));
  border-radius:28px; padding:54px 40px; text-align:center; color:#fff;
  margin:20px 0 70px;
}
.cta-band h2{font-size:30px; margin-bottom:10px; color:#fff;}
.cta-band p{margin-bottom:24px; opacity:0.92;}
.cta-band .btn-primary{background:#fff; color:var(--ink); box-shadow:none;}

/* FOOTER */
footer{background:var(--ink); color:#fff; padding:50px 0 24px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px;}
footer h5{font-size:14px; margin-bottom:14px; opacity:0.6; letter-spacing:0.5px; text-transform:uppercase;}
footer ul{list-style:none;}
footer ul li{margin-bottom:9px; font-size:14px; opacity:0.85;}
footer ul li a:hover{opacity:1; text-decoration:underline;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); padding-top:20px;
  display:flex; justify-content:space-between; font-size:13px; opacity:0.6; flex-wrap:wrap; gap:10px;
}

/* --- Interactive tool components (shared across solver pages) --- */
.page-hero{padding:54px 0 20px;}
.crumb{font-size:13px; color:var(--ink-soft); font-weight:700; margin-bottom:14px;}
.tool-panel{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:32px;}
label{display:block; font-weight:800; font-size:13.5px; margin-bottom:6px; color:var(--ink);}
.hint{font-size:12.5px; color:var(--ink-soft); margin-top:5px; margin-bottom:14px;}
input[type=text], input[type=number], textarea, select{
  width:100%; padding:12px 14px; border-radius:12px; border:2px solid rgba(45,42,61,0.12);
  font-family:'Nunito'; font-size:14.5px; background:#fff; color:var(--ink);
}
textarea{resize:vertical; font-family:'Consolas',monospace;}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--coral);}
.field{margin-bottom:16px;}
.btn-small{padding:8px 16px; font-size:13px;}
.results-box{background:var(--bg); border-radius:16px; padding:18px; min-height:180px; max-height:420px; overflow-y:auto; border:2px dashed rgba(45,42,61,0.15);}
.result-empty{color:var(--ink-soft); font-size:14px; text-align:center; padding:40px 10px;}
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{background:#fff; border:2px solid rgba(45,42,61,0.1); border-radius:999px; padding:6px 14px; font-weight:800; font-size:13.5px;}
.word-list{display:flex; flex-wrap:wrap; gap:8px;}
.word-pill{background:#fff; border:2px solid rgba(45,42,61,0.1); padding:6px 14px; border-radius:999px; font-weight:700; font-size:13.5px;}
.mini-grid{display:grid; gap:4px;}
.grid-cell{width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-weight:800; font-family:'Baloo 2'; font-size:15px; cursor:pointer; user-select:none; border:2px solid rgba(45,42,61,0.1); background:#fff;}
.piece-swatch{display:flex; gap:3px; flex-direction:column; padding:6px; border-radius:10px; border:2px solid transparent; cursor:pointer; background:#fff;}
.piece-row{display:flex; gap:3px;}
.piece-sq{width:16px; height:16px; border-radius:3px; background:rgba(45,42,61,0.1);}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.related-card{background:var(--card); border-radius:16px; padding:18px; box-shadow:var(--shadow); display:flex; align-items:center; gap:12px;}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{display:none;}
  .tool-grid{grid-template-columns:repeat(2,1fr);}
  .tool-card.featured{grid-column:span 2;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  nav ul{display:none;}
  .hero h1{font-size:36px;}
}

.legal-content{max-width:760px;}
.legal-content h2{font-size:21px; margin:30px 0 10px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--ink-soft); font-size:15px; margin-bottom:12px; line-height:1.7;}
.legal-content ul{color:var(--ink-soft); font-size:15px; margin:0 0 12px 20px; line-height:1.7;}
.legal-content li{margin-bottom:6px;}
.legal-content strong{color:var(--ink);}
.updated-note{font-size:13px; color:var(--ink-soft); font-weight:700; margin-bottom:30px; display:inline-block; background:var(--coral-bg); padding:6px 14px; border-radius:999px;}