/* ============================================================
   Closer Station — public site
   Layered on app.css: same tokens, same fonts, same rules.
   One sheet of paper. Hairlines and registration marks.
   No shadows. No radius on regions. Light only.
   ============================================================ */

.site{max-width:1100px;margin:0 auto;padding:0 28px}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
.topbar .site{display:flex;align-items:center;gap:24px;min-height:78px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand .glyph{width:26px;height:26px;background:var(--navy);flex:0 0 26px}
.brand .name{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.brand .name span{color:var(--steel)}

.loginbox{
  position:relative;background:var(--paper-2);border:1px solid var(--rule);
  padding:12px 14px 11px;width:308px;flex:0 0 308px;
}
.loginbox::after{
  content:"";position:absolute;inset:-5px;pointer-events:none;
  background-image:var(--plus),var(--plus),var(--plus),var(--plus);
  background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom;
}
.loginbox .eyebrow{margin-bottom:8px}
.loginrow{display:flex;gap:6px}
.loginbox input{
  width:100%;font-family:var(--ui);font-size:13px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;
  padding:7px 9px;margin-bottom:6px;
}
.loginbox input:focus{border-color:var(--steel);outline:none}
.loginbox .alt{font-size:11.5px;color:var(--ink3);margin-top:7px}
.loginbox .alt a{color:var(--steel-hi);font-weight:600}
.msg{font-size:11.5px;margin-top:7px;display:none}
.msg.on{display:block}
.msg.bad{color:var(--alert)}
.msg.good{color:var(--ok)}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.01em;
  border:1px solid var(--steel);background:var(--steel);color:#fff;
  border-radius:2px;padding:8px 16px;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--steel-hi);border-color:var(--steel-hi)}
.btn.ghost{background:transparent;color:var(--steel-hi);border-color:var(--rule-2)}
.btn.ghost:hover{background:var(--steel-soft);border-color:var(--steel)}
.btn.navy{background:var(--navy);border-color:var(--navy)}
.btn.navy:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn.wide{display:block;width:100%;text-align:center;padding:11px 16px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- hero ---------- */
.hero{padding:84px 0 72px;border-bottom:1px solid var(--rule)}
.hero .eyebrow{margin-bottom:18px}
.hero h1{
  font-size:clamp(38px,5.4vw,62px);line-height:1.04;letter-spacing:-.03em;
  max-width:15ch;margin-bottom:22px;
}
.hero .lede{
  font-size:17px;line-height:1.6;color:var(--ink2);max-width:56ch;margin-bottom:30px;
}
.heroacts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.heroacts .note{font-size:12px;color:var(--ink3)}

/* ---------- stat strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:52px}
.strip div{background:var(--paper);padding:18px 20px}
.strip .n{font-family:var(--disp);font-weight:700;font-size:29px;letter-spacing:-.03em;color:var(--ink);line-height:1}
.strip .l{font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-top:7px}

/* ---------- sections ---------- */
.sect{padding:72px 0;border-bottom:1px solid var(--rule)}
.sect > .site > .eyebrow{margin-bottom:14px}
.sect h2{font-size:31px;letter-spacing:-.022em;margin-bottom:14px}
.sect .sub{font-size:15px;color:var(--ink2);max-width:60ch;margin-bottom:38px}

.grid5{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.grid5 article{background:var(--paper);padding:24px 24px 26px}
.grid5 .num{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-bottom:12px}
.grid5 h3{font-size:17px;margin-bottom:8px}
.grid5 p{font-size:13.5px;color:var(--ink2);margin:0}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.tier{
  position:relative;background:var(--paper-2);border:1px solid var(--rule);
  padding:26px 24px 24px;display:flex;flex-direction:column;min-height:100%;
}
.tier::after{
  content:"";position:absolute;inset:-5px;pointer-events:none;
  background-image:var(--plus),var(--plus),var(--plus),var(--plus);
  background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom;
}
.tier.live{border-color:var(--navy);border-width:1px}
.tier .cap{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;min-height:20px}
.tier h3{font-size:19px}
.flag{
  font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 7px;border-radius:2px;
}
.flag.now{background:var(--navy);color:#fff}
.flag.soon{background:var(--paper-3);color:var(--ink3);border:1px solid var(--rule)}
.price{display:flex;align-items:baseline;gap:5px;margin-bottom:6px}
.price .amt{font-family:var(--disp);font-weight:700;font-size:44px;letter-spacing:-.035em;color:var(--ink);line-height:1}
.price .per{font-size:13px;color:var(--ink3)}
.tier .blurb{font-size:13.5px;color:var(--ink2);margin:0 0 20px;min-height:38px}
.tier ul{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--rule)}
.tier li{
  font-size:13.5px;color:var(--ink2);padding:9px 0 9px 22px;position:relative;
  border-bottom:1px solid var(--rule);
}
.tier li::before{
  content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;background:var(--navy);
}
.tier li.soon{color:var(--ink3)}
.tier li.soon::before{background:transparent;border:1px solid var(--rule-2)}
.tier li b{color:var(--ink);font-weight:600}
.tier .foot{margin-top:auto}
.tier .fine{font-size:11.5px;color:var(--ink3);margin-top:10px;text-align:center}
.waitrow{display:flex;gap:6px}
.waitrow input{
  flex:1;min-width:0;font-family:var(--ui);font-size:13px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;padding:9px 10px;
}
.waitrow input:focus{border-color:var(--steel);outline:none}

/* ---------- plain page (plans / welcome) ---------- */
.plain{max-width:560px;margin:0 auto;padding:70px 28px 90px}
.panel{
  position:relative;background:var(--paper-2);border:1px solid var(--rule);padding:30px 30px 28px;
}
.panel::after{
  content:"";position:absolute;inset:-5px;pointer-events:none;
  background-image:var(--plus),var(--plus),var(--plus),var(--plus);
  background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom;
}
.field{margin-bottom:15px}
.field label{display:block;margin-bottom:6px}
.field input{
  width:100%;font-family:var(--ui);font-size:14px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;padding:10px 11px;
}
.field input:focus{border-color:var(--steel);outline:none}
.field input:disabled,.field input[readonly]{background:var(--paper-3);color:var(--ink2)}
.field .hint{font-size:11.5px;color:var(--ink3);margin-top:5px}

/* ---------- footer ---------- */
.sitefoot{padding:34px 0 48px}
.sitefoot .site{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sitefoot .stamp{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.sitefoot nav{display:flex;gap:20px}
.sitefoot nav a{font-size:12.5px;color:var(--ink3)}
.sitefoot nav a:hover{color:var(--steel-hi)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .tiers{grid-template-columns:1fr;gap:26px}
  .strip{grid-template-columns:repeat(2,1fr)}
  .topbar .site{flex-wrap:wrap;min-height:0}
  .loginbox{width:100%;flex:1 1 100%}
  .hero{padding:56px 0 48px}
}