/* ==================================================================
   home.css — landing page only. Loaded after base.css.
================================================================== */

.hero{padding:44px 0 38px}
.hero h1{font-size:clamp(34px,7vw,76px); font-weight:800; letter-spacing:-.045em; line-height:.9; max-width:14ch}
.hero .lede{margin-top:16px}

/* the live decision */
.decision{
  margin-top:34px; border:1.5px solid var(--ink); background:var(--sheet);
  display:grid; grid-template-columns:minmax(0,1fr) 300px;
}
.dseat{padding:18px 20px}
.dseat + .dseat{border-left:1px solid var(--ink)}
.dseat .cap{font-size:12px; font-weight:600; color:var(--grey); margin-bottom:10px}
.dline{display:flex; gap:30px; align-items:flex-end; flex-wrap:wrap}
.dline .grp{display:flex; flex-direction:column; gap:7px}
.dline .who{font-size:12px; color:var(--grey)}
.dtotal{font-size:34px; font-weight:800; letter-spacing:-.04em; line-height:1; margin-left:6px}
.dask{margin-top:16px; font-size:17px; font-weight:600}
.dbtns{display:flex; gap:7px; flex-wrap:wrap; margin-top:14px}
.dbtns button{
  border:1.5px solid var(--ink); padding:8px 14px; min-height:var(--tap);
  font-size:14px; font-weight:600; background:var(--sheet);
}
.dbtns button:hover:not(:disabled){background:var(--ink); color:var(--sheet)}
.dbtns button:disabled{opacity:.35}
.dbtns button.right{background:var(--blue); border-color:var(--blue); color:#fff; opacity:1}
.dbtns button.wrong{background:var(--red); border-color:var(--red); color:#fff; opacity:1}
.dverdict{margin-top:14px; font-size:14.5px; min-height:66px; border-left:3px solid var(--ink); padding-left:10px}
.dverdict b{font-weight:700}
.dnext{font-size:13px; text-decoration:underline; color:var(--grey); margin-top:10px; display:inline-block; padding:6px 0}
.dnext:hover{color:var(--red)}

.hero-cta{margin-top:26px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.hero-cta .side{font-size:13px; color:var(--grey)}

.claims{display:flex; flex-wrap:wrap; border:1.5px solid var(--ink); background:var(--sheet); margin-top:6px}
.claims div{flex:1 1 190px; padding:13px 16px; border-right:1px solid var(--ink); font-size:13.5px}
.claims div:last-child{border-right:none}
.claims b{display:block; font-size:15px; font-weight:700; margin-bottom:2px}

.endcta{padding:40px 0 46px}
.endcta h2{font-size:clamp(24px,4vw,40px); letter-spacing:-.04em; max-width:20ch}

@media (max-width:820px){
  .decision{grid-template-columns:1fr}
  .dseat + .dseat{border-left:none; border-top:1px solid var(--ink)}
}
@media (max-width:540px){
  :root{--card-w:60px}
  .hero{padding:30px 0 26px}
  .dline{gap:20px}
  .claims div{flex:1 1 100%; border-right:none; border-bottom:1px solid var(--ink)}
  .claims div:last-child{border-bottom:none}
  .hero-cta .btn{width:100%}
}