/* ============================================================
   Rankboard — shared stylesheet
   ============================================================ */
:root{
  --ink:#1B1A17;
  --ink-2:#232019;
  --ivory:#EFEAE0;
  --ivory-dim:#D9D3C5;
  --amber:#E3A73B;
  --teal:#2F6F63;
  --rule:#4A453D;
  --rule-soft:#33302A;
  --red:#C97A6B;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--ink); color:var(--ivory); font-family:'Space Grotesk',sans-serif;}
body{-webkit-font-smoothing:antialiased;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}
.wrap{max-width:1040px; margin:0 auto; padding:0 28px;}
img{max-width:100%;}

/* ---------- NAV ---------- */
nav.wrap{display:flex; align-items:center; justify-content:space-between; padding-top:28px; padding-bottom:28px;}
.logo{font-weight:700; font-size:19px; letter-spacing:-0.02em; display:flex; align-items:center; gap:9px; text-decoration:none;}
.logo .dot{width:8px; height:8px; background:var(--amber); border-radius:50%; display:inline-block;}
.nav-links{display:flex; gap:32px; font-size:14.5px; color:var(--ivory-dim);}
.nav-links a{text-decoration:none; transition:color .15s;}
.nav-links a:hover, .nav-links a.active{color:var(--ivory);}
.nav-mobile-note{display:none;}
.btn{
  font-family:'Space Grotesk',sans-serif; font-size:14.5px; font-weight:600;
  padding:10px 18px; border-radius:3px; border:1px solid var(--rule);
  cursor:pointer; text-decoration:none; display:inline-block;
  transition:border-color .15s, background .15s;
}
.btn-primary{background:var(--amber); color:var(--ink); border-color:var(--amber); font-weight:700;}
.btn-primary:hover{background:#EEB558;}
.btn-ghost{background:transparent; color:var(--ivory); border-color:var(--rule);}
.btn-ghost:hover{border-color:var(--ivory-dim);}
.btn-lg{padding:13px 26px; font-size:15.5px;}

/* ---------- HERO (home) ---------- */
.hero{padding-top:56px; padding-bottom:72px; text-align:center;}
.hero h1{
  font-size:56px; line-height:1.06; font-weight:700; letter-spacing:-0.025em;
  max-width:760px; margin:0 auto 22px;
}
.hero p.sub{
  font-size:18px; color:var(--ivory-dim); max-width:520px; margin:0 auto 34px; line-height:1.55;
}
.hero-cta{display:flex; gap:14px; justify-content:center; margin-bottom:64px;}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{padding-top:52px; padding-bottom:56px; text-align:center; border-bottom:1px solid var(--rule-soft);}
.page-hero h1{
  font-size:44px; line-height:1.1; font-weight:700; letter-spacing:-0.025em;
  max-width:680px; margin:0 auto 18px;
}
.page-hero p.sub{
  font-size:17px; color:var(--ivory-dim); max-width:520px; margin:0 auto; line-height:1.55;
}

/* ---------- SPLIT-FLAP BOARD ---------- */
.board-label{font-size:12px; color:var(--ivory-dim); margin-bottom:10px; letter-spacing:0.02em;}
.board{
  max-width:560px; margin:0 auto; background:var(--ink-2);
  border:1px solid var(--rule-soft); border-radius:4px; padding:6px;
}
.board-head{
  display:grid; grid-template-columns:56px 1fr 100px;
  padding:10px 16px; font-size:11.5px; color:var(--ivory-dim);
  border-bottom:1px solid var(--rule-soft); letter-spacing:0.02em;
}
.board-rows{position:relative; padding:6px 0;}
.row{
  display:grid; grid-template-columns:56px 1fr 100px; align-items:center;
  padding:13px 16px; position:absolute; left:0; right:0;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.rank-flap{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; background:var(--ivory); color:var(--ink);
  border-radius:2px; font-weight:700; font-size:15px;
}
.row.is-first .rank-flap{background:var(--amber);}
.row-name{text-align:left; font-size:15.5px; font-weight:500; padding-left:6px;}
.row-score{text-align:right; font-size:16px; font-weight:700; letter-spacing:0.02em;}
.row.is-first .row-score{color:var(--amber);}
.live-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--amber); margin-right:7px; animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.board-foot{
  display:flex; align-items:center; padding:12px 16px 8px; font-size:12px; color:var(--ivory-dim);
}

/* ---------- SECTION SHARED ---------- */
section{padding:76px 0; border-top:1px solid var(--rule-soft);}
section.no-border{border-top:none;}
section.tight{padding:56px 0;}
.kicker{font-size:14px; color:var(--amber); font-weight:600; margin-bottom:10px;}
h2{font-size:34px; font-weight:700; letter-spacing:-0.02em; margin-bottom:14px; max-width:520px;}
h3{font-size:19px; font-weight:600;}
.section-sub{color:var(--ivory-dim); font-size:16px; max-width:520px; line-height:1.6; margin-bottom:48px;}
.section-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.section-head-row .section-sub{margin-bottom:0;}
.link-more{font-size:14.5px; font-weight:600; color:var(--teal); text-decoration:none; white-space:nowrap; padding-bottom:48px; display:inline-block;}
.link-more:hover{color:var(--ivory);}

/* ---------- HOW IT WORKS (steps) ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.step{padding:0 28px 0 0; border-left:1px solid var(--rule-soft); padding-left:28px;}
.step:first-child{border-left:none; padding-left:0;}
.step-num{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--amber); margin-bottom:14px;}
.step h3{margin-bottom:10px;}
.step p{color:var(--ivory-dim); font-size:15px; line-height:1.6;}
.step ul{margin-top:14px; list-style:none;}
.step li{color:var(--ivory-dim); font-size:14px; line-height:1.5; padding:6px 0 6px 16px; position:relative;}
.step li::before{content:"—"; position:absolute; left:0; color:var(--teal);}

/* ---------- NICHE STRIP (home preview) ---------- */
.niche-list{border-top:1px solid var(--rule-soft);}
.niche-row{
  display:grid; grid-template-columns:200px 1fr 140px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--rule-soft); gap:20px;
}
.niche-name{font-weight:600; font-size:16px;}
.niche-desc{color:var(--ivory-dim); font-size:14.5px; line-height:1.5;}
.niche-tag{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--teal);
  text-align:right; letter-spacing:0.01em;
}

/* ---------- USE-CASE CARDS (full use-cases page) ---------- */
.case-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); border-radius:4px; overflow:hidden;}
.case-card{background:var(--ink); padding:28px 26px;}
.case-tag{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--teal);
  letter-spacing:0.02em; margin-bottom:12px; display:inline-block;
}
.case-card h3{margin-bottom:10px;}
.case-card p{color:var(--ivory-dim); font-size:14.5px; line-height:1.6; margin-bottom:14px;}
.case-why{
  font-size:13.5px; color:var(--ivory-dim); border-top:1px solid var(--rule-soft);
  padding-top:14px; line-height:1.5;
}
.case-why strong{color:var(--amber); font-weight:600;}

/* ---------- INTEGRATIONS ---------- */
.integ-grid{display:flex; flex-wrap:wrap; gap:12px;}
.integ-pill{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ivory-dim);
  border:1px solid var(--rule); border-radius:20px; padding:9px 18px;
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule-soft);}
.faq-item{padding:24px 0; border-bottom:1px solid var(--rule-soft);}
.faq-item h4{font-size:16.5px; font-weight:600; margin-bottom:8px;}
.faq-item p{color:var(--ivory-dim); font-size:14.5px; line-height:1.6; max-width:640px;}

/* ---------- ROADMAP / NOTICE TAGS ---------- */
.soon-tag{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ivory-dim);
  background:var(--ink); border:1px solid var(--rule); border-radius:10px;
  padding:2px 8px; margin-left:8px; letter-spacing:0.02em; white-space:nowrap;
}
.notice-box{
  background:var(--ink-2); border:1px solid var(--rule-soft); border-radius:4px;
  padding:18px 22px; margin-bottom:40px; font-size:14.5px; color:var(--ivory-dim); line-height:1.6;
}
.notice-box strong{color:var(--ivory);}

/* ---------- PRICING ---------- */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--rule-soft); border-radius:4px; overflow:hidden;}
.plan{padding:32px 26px; border-left:1px solid var(--rule-soft); background:var(--ink-2);}
.plan:first-child{border-left:none;}
.plan.featured{background:#26221A;}
.plan-rank{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ivory-dim); margin-bottom:18px;}
.plan.featured .plan-rank{color:var(--amber);}
.plan-name{font-size:19px; font-weight:600; margin-bottom:6px;}
.plan-price{font-family:'JetBrains Mono',monospace; font-size:32px; font-weight:700; margin-bottom:4px;}
.plan-price span{font-size:14px; color:var(--ivory-dim); font-weight:400;}
.plan-desc{color:var(--ivory-dim); font-size:14px; margin-bottom:22px; line-height:1.5;}
.plan-feats{list-style:none; margin-bottom:26px;}
.plan-feats li{font-size:14px; color:var(--ivory-dim); padding:7px 0; border-top:1px solid var(--rule-soft);}
.plan-feats li:first-child{border-top:none;}
.plan .btn{width:100%; text-align:center;}

/* ---------- COMPARISON TABLE ---------- */
.compare{width:100%; border-collapse:collapse; font-size:14.5px;}
.compare th, .compare td{padding:14px 16px; border-bottom:1px solid var(--rule-soft); text-align:center;}
.compare td:first-child, .compare th:first-child{text-align:left; color:var(--ivory-dim);}
.compare thead th{color:var(--ivory); font-weight:600; font-size:14px;}
.compare tbody tr:hover{background:var(--ink-2);}
.compare .yes{color:var(--teal); font-weight:700;}
.compare .no{color:var(--rule); }
.compare .soon{color:var(--amber); font-weight:600; font-size:12px; font-family:'JetBrains Mono',monospace; letter-spacing:0.02em;}
.table-scroll{overflow-x:auto;}

/* ---------- FORM (start page) ---------- */
.form-card{
  max-width:480px; margin:0 auto; background:var(--ink-2); border:1px solid var(--rule-soft);
  border-radius:6px; padding:36px 34px;
}
.field{margin-bottom:20px; text-align:left;}
.field label{display:block; font-size:13.5px; color:var(--ivory-dim); margin-bottom:8px; font-weight:600;}
.field input, .field select{
  width:100%; background:var(--ink); border:1px solid var(--rule); border-radius:3px;
  padding:11px 13px; font-family:'Space Grotesk',sans-serif; font-size:14.5px; color:var(--ivory);
}
.field input:focus, .field select:focus{outline:none; border-color:var(--teal);}
.form-card .btn{width:100%; text-align:center; margin-top:6px;}
.form-status{font-size:13.5px; color:var(--teal); margin-top:14px; min-height:18px;}
.form-status.is-error{color:var(--red);}
.reassure{list-style:none; max-width:480px; margin:36px auto 0; text-align:left;}
.reassure li{color:var(--ivory-dim); font-size:14.5px; padding:8px 0 8px 22px; position:relative;}
.reassure li::before{content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:700;}

/* ---------- LEGAL PAGES ---------- */
.legal-content{padding:56px 0 20px;}
.legal-content h2{font-size:22px; margin-top:36px; margin-bottom:12px; max-width:none;}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content p{color:var(--ivory-dim); font-size:15px; line-height:1.7; margin-bottom:16px; max-width:760px;}
.legal-content ul{margin:0 0 16px 20px; color:var(--ivory-dim); font-size:15px; line-height:1.7; max-width:760px;}
.legal-content li{margin-bottom:6px;}
.legal-updated{color:var(--ivory-dim); font-size:13.5px; margin-bottom:28px;}
.legal-disclaimer{background:var(--ink-2); border:1px solid var(--rule-soft); border-radius:4px; padding:16px 20px; font-size:14px; color:var(--ivory-dim); line-height:1.6; margin-bottom:40px; max-width:760px;}
.legal-disclaimer strong{color:var(--amber);}

/* ---------- FINAL CTA ---------- */
.cta-band{text-align:center;}
.cta-band h2{max-width:none; margin:0 auto 14px;}
.cta-band .section-sub{margin:0 auto 30px;}
.cta-band .hero-cta{margin-bottom:0;}

/* ---------- FOOTER ---------- */
footer{padding:40px 0 56px; border-top:1px solid var(--rule-soft); display:flex; justify-content:space-between; align-items:center; color:var(--ivory-dim); font-size:13.5px; flex-wrap:wrap; gap:16px;}
footer .foot-links{display:flex; gap:24px;}
footer .foot-links a{text-decoration:none;}
footer .foot-links a:hover{color:var(--ivory);}

@media (max-width:760px){
  .hero h1{font-size:38px;}
  .page-hero h1{font-size:32px;}
  .steps, .pricing, .case-grid{grid-template-columns:1fr;}
  .step{border-left:none; padding-left:0; margin-bottom:32px;}
  .plan{border-left:none; border-top:1px solid var(--rule-soft);}
  .plan:first-child{border-top:none;}
  .niche-row{grid-template-columns:1fr; gap:6px;}
  .niche-tag{text-align:left;}
  .nav-links{display:none;}
  .section-head-row{flex-direction:column; align-items:flex-start;}
  .link-more{padding-bottom:0;}
  footer{flex-direction:column; align-items:flex-start;}
}