/* Temporary "work in progress" landing (index.html). Builds on tokens/base/
   components; only the pieces unique to this page live here, so the file can
   be dropped once the full site (temp.html) goes public. */

/* ---------- header badge ---------- */
.wip-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
  color:var(--ink-soft); border:1px solid var(--line); background:var(--paper-raised);
  padding:7px 12px; border-radius:30px;
}
.wip-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;}
@media (prefers-reduced-motion: no-preference){
  .wip-dot{animation:wipPulse 2.4s ease-in-out infinite;}
  @keyframes wipPulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}
}

/* ---------- hero ---------- */
.cs-hero{padding-bottom:64px;}
.cs-inner{align-items:center;}

.cs-signup{margin-top:30px; max-width:520px;}
.cs-signup-label{margin:0 0 12px; font-size:0.95rem; color:var(--ink-soft);}
.cs-signup form{display:flex; gap:10px; flex-wrap:wrap;}
.cs-signup input{
  font-family:'Jost',sans-serif; font-size:1rem;
  padding:12px 14px; border:1px solid var(--line); border-radius:4px;
  background:var(--paper-raised); color:var(--ink); flex:1; min-width:0;
}
@media (max-width:480px){ .cs-signup form{flex-direction:column;} .cs-signup .btn{width:100%;} }

.cs-photo{
  margin:0; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:8px; padding:10px; justify-self:end; width:100%; max-width:440px;
}
.cs-photo img{display:block; width:100%; height:auto; aspect-ratio:683/648; object-fit:cover; border-radius:4px;}
.cs-photo figcaption{
  font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft); padding:10px 4px 2px;
}
@media (max-width:820px){ .cs-photo{justify-self:stretch; max-width:none;} }

/* ---------- roadmap ---------- */
.roadmap{
  list-style:none; margin:36px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (max-width:900px){ .roadmap{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .roadmap{grid-template-columns:1fr;} }

.roadmap li{background:var(--paper); padding:24px 22px; position:relative;}
.roadmap h3{font-size:1.1rem; font-weight:600; margin-top:10px; color:var(--ink);}
.roadmap p{font-size:0.92rem; color:var(--ink-soft); margin:8px 0 0;}

.rm-status{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
  color:var(--ink-soft);
}
.rm-status::before{
  content:""; width:9px; height:9px; border-radius:50%;
  border:1.5px solid currentColor; box-sizing:border-box; flex:none;
}
.roadmap li.done .rm-status{color:var(--accent-deep);}
.roadmap li.done .rm-status::before{background:currentColor;}
.roadmap li.current{background:var(--paper-raised); box-shadow:inset 0 3px 0 var(--accent);}
.roadmap li.current .rm-status{color:var(--ink);}
.roadmap li.current .rm-status::before{border-color:var(--accent); background:var(--accent);}
.roadmap li:not(.done):not(.current) h3{color:var(--ink-soft);}