/* ============================================================
   BaggaDonuts — inner page styles (Process, Coming Soon, etc.)
   Reuses styles.css tokens + home.css (sections, ring-wm motif).
   ============================================================ */

/* ---------- Page hero (smaller than the home hero) ---------- */
.page-hero{ position:relative; overflow:hidden; padding-block:clamp(56px,8vw,104px) clamp(40px,6vw,72px); border-bottom:1px solid var(--line); }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.95;
  font-size:clamp(40px,6vw,82px); margin:14px 0 0; text-wrap:balance; max-width:18ch; }
.page-hero .lead{ font-size:clamp(18px,2vw,22px); color:var(--ink-soft); max-width:60ch; margin:22px 0 0; text-wrap:pretty; }
.page-hero .crumb{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.page-hero .crumb a{ color:var(--ink-soft); text-decoration:none; }
.page-hero .crumb a:hover{ color:var(--glaze); }

/* ---------- Methodology phases ---------- */
.phases{ display:grid; gap:0; }
.phase{ display:grid; gap:24px 48px; padding-block:clamp(36px,5vw,60px); border-top:1px solid var(--line); align-items:start; }
.phase:first-child{ border-top:0; }
@media(min-width:860px){ .phase{ grid-template-columns:340px 1fr; } }
.phase-head{ display:flex; gap:18px; align-items:flex-start; }
.phase-num{ flex:none; width:54px; height:54px; border-radius:50%; border:3px solid var(--glaze); color:var(--glaze);
  display:grid; place-items:center; font-family:var(--mono); font-weight:600; font-size:17px; }
.phase-head h2{ font-family:var(--display); font-weight:800; font-size:clamp(26px,3vw,36px); letter-spacing:-.02em; line-height:1; margin:8px 0 0; }
.phase-dur{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; }
.phase-body p{ font-size:17px; color:var(--ink-soft); margin:0 0 18px; max-width:60ch; text-wrap:pretty; }
.phase-deliver{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.phase-deliver li{ display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--ink); }
.phase-deliver li::before{ content:""; flex:none; width:14px; height:14px; margin-top:4px; border-radius:50%; border:4px solid var(--glaze); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--ink); color:var(--paper); }
.cta-band .wrap{ padding-block:clamp(56px,8vw,96px); text-align:center; }
.cta-band h2{ font-family:var(--display); font-weight:800; color:var(--paper); font-size:clamp(30px,5vw,54px); letter-spacing:-.02em; margin:0 auto; max-width:20ch; }
.cta-band p{ color:#cfc6bd; max-width:52ch; margin:18px auto 0; font-size:18px; }
.cta-band .row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }

/* ---------- Principles ---------- */
.principles{ display:grid; gap:24px; margin-top:44px; }
@media(min-width:760px){ .principles{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   COMING SOON template
   ============================================================ */
.soon{ position:relative; overflow:hidden; min-height:78vh; display:grid; place-items:center; text-align:center; padding-block:80px; }
.soon .wrap{ position:relative; z-index:2; }
.soon .badge{ font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--glaze);
  display:inline-flex; align-items:center; gap:.6em; border:1px solid var(--line); border-radius:999px; padding:9px 18px; background:var(--paper); }
.soon .badge::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--glaze); animation:soon-pulse 2.2s ease-out infinite; }
@keyframes soon-pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--glaze) 55%, transparent);} 70%{ box-shadow:0 0 0 9px rgba(237,67,89,0);} 100%{ box-shadow:0 0 0 0 rgba(237,67,89,0);} }
.soon h1{ font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.96;
  font-size:clamp(42px,8vw,96px); margin:26px 0 0; text-wrap:balance; }
.soon .lead{ font-size:clamp(18px,2vw,22px); color:var(--ink-soft); max-width:52ch; margin:20px auto 0; text-wrap:pretty; }
.soon .actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }

/* roadmap / status tracker */
.roadmap{ max-width:560px; margin:52px auto 0; text-align:left; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper); }
.roadmap .rhead{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  padding:14px 20px; border-bottom:1px solid var(--line); background:var(--paper-2); }
.roadmap a.ritem{ display:flex; align-items:center; gap:14px; padding:14px 20px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink); transition:background .15s; }
.roadmap a.ritem:first-of-type{ border-top:0; }
.roadmap a.ritem:hover{ background:var(--paper-2); }
.roadmap .rname{ font-family:var(--display); font-weight:700; font-size:17px; flex:1; }
.roadmap .rstatus{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.rstatus.done{ background:color-mix(in srgb,var(--matcha) 18%, var(--paper)); color:#2f7a47; border:1px solid var(--matcha); }
.rstatus.wip{ background:color-mix(in srgb,var(--tangerine) 18%, var(--paper)); color:#9a5a07; border:1px solid var(--tangerine); }
.rstatus.todo{ background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line); }
.roadmap .rdot{ width:10px; height:10px; border-radius:50%; flex:none; }
.rdot.done{ background:var(--matcha); } .rdot.wip{ background:var(--tangerine); } .rdot.todo{ background:var(--line); }