/* ============================================================
   HourHub — internal page styles (legal, about, contact)
   ============================================================ */

.page{padding:56px 24px 40px;max-width:760px}
.page-head{padding-bottom:36px;border-bottom:1px solid var(--line);margin-bottom:8px}
.page-head .eyebrow{margin-bottom:12px;display:block}
.page-head h1{font-size:clamp(30px,5.5vw,44px)}
.page-head .lede{color:var(--text-2);font-size:17px;margin-top:14px;max-width:56ch;line-height:1.6}
.page-head .updated{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:22px}

.page section{padding:0;border:0}
.page h2{font-size:20px;margin-top:38px}
.page h2:first-of-type{margin-top:34px}
.page h3{font-size:16px;font-weight:600;margin:24px 0 6px}
.page p{color:var(--text-2);margin-top:10px;line-height:1.7}
.page a{color:var(--green)}
.page strong{color:var(--text);font-weight:600}
.page ul{list-style:none;margin-top:10px}
.page li{color:var(--text-2);padding-left:20px;position:relative;margin-top:8px;line-height:1.65}
.page li::before{content:'';position:absolute;left:2px;top:12px;width:6px;height:1px;background:var(--green)}

.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;margin-top:22px;
}
.panel.warn{border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.panel h3{margin-top:0}
.steps-num{counter-reset:s;list-style:none;margin-top:12px}
.steps-num li{padding-left:34px;margin-top:12px}
.steps-num li::before{
  counter-increment:s;content:counter(s);
  left:0;top:-1px;width:22px;height:22px;background:transparent;
  border:1px solid var(--green);border-radius:50%;color:var(--green);
  font-family:var(--mono);font-size:11px;line-height:21px;text-align:center;
}

/* Contact page cards */
.contact-grid{display:grid;gap:16px;margin-top:28px}
@media(min-width:600px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
.contact-tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;transition:transform .2s var(--ease),border-color .2s;
}
.contact-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.contact-tile .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--glow);color:var(--green);margin-bottom:16px}
.contact-tile h3{font-size:17px;font-weight:700}
.contact-tile p{margin-top:6px;font-size:15px}
.contact-tile a.big{display:inline-block;margin-top:12px;color:var(--green);font-weight:600;font-size:15px}

/* About page */
.about-hero-stat{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;
}
.stat-chip{
  font-family:var(--mono);font-size:12px;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:8px 14px;
}
.stat-chip b{color:var(--green);font-weight:500}