/* ============================================================
   Sub-page scaffolding (/mira, /nexus) — the same design system
   as the landing page, laid out as a straight reading column.
   ============================================================ */
.pg { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padding: 0 var(--pad); counter-reset: sec; }
.pg-hero {
  position: relative; min-height: 58vh; display: grid; align-content: center;
  justify-items: start; gap: 16px; padding-top: 100px;
}
/* the product name as a wireframe watermark behind its own hero */
.pg-wm {
  position: absolute; right: -3vw; top: 54%; transform: translateY(-50%);
  font: 800 clamp(120px, 21vw, 300px)/1 var(--display); letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(111, 163, 255, 0.13);
  pointer-events: none; user-select: none; z-index: -1; white-space: nowrap;
}
.pg-h { font-size: clamp(46px, 6.5vw, 100px); max-width: none; }
.pg-hero .lede { max-width: 56ch; }
/* centred hero variant — the landing's launch stance */
.pg-hero.pg-center {
  min-height: 78vh; justify-items: center; text-align: center;
  max-width: 1060px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad);
}
.pg-wm-c { right: auto; left: 50%; transform: translate(-50%, -50%); }
.pg-wm-sm { font-size: clamp(70px, 12.5vw, 185px); }  /* longer words still fit */
.panel .flow { margin-top: 28px; }
.pg-sec { position: relative; padding: 62px 0; border-top: 1px solid var(--line); counter-increment: sec; }
/* a ghost index in the corner of every section */
.pg-sec::after {
  content: "0" counter(sec);
  position: absolute; top: 46px; right: 0;
  font: 800 clamp(44px, 6vw, 84px)/1 var(--display);
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
  pointer-events: none; user-select: none;
}
.pg-sec .lede { margin-top: 16px; }

.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 30px; }
.pg-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.pg-card:hover { border-color: rgba(111, 163, 255, 0.5); transform: translateY(-3px); background: rgba(11, 95, 255, 0.05); }
.pg-card .k { display: block; font: 500 12px/1 var(--mono); letter-spacing: 0.2em; color: var(--bright); margin-bottom: 10px; }
.pg-card h3 { font: 600 16px/1.3 var(--display); color: var(--ink); margin-bottom: 7px; }
.pg-card p { font-size: 15px; line-height: 1.65; color: var(--body); }

.pg-steps { display: grid; gap: 10px; margin-top: 28px; }
.pg-step {
  display: flex; gap: 18px; align-items: baseline;
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s, transform 0.2s;
}
.pg-step:hover { border-color: rgba(111, 163, 255, 0.5); transform: translateX(4px); }
.pg-step b { font: 500 13px/1 var(--mono); color: var(--bright); letter-spacing: 0.12em; }
.pg-step h3 { font: 600 15.5px/1.3 var(--display); color: var(--ink); }
.pg-step p { margin-top: 5px; font-size: 14.5px; line-height: 1.6; color: var(--body); }

.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 30px; }
.pg-stat {
  border: 1px solid var(--line); border-radius: 14px; padding: 24px 18px; text-align: center;
  background: rgba(255, 255, 255, 0.02);
}
.pg-stat b { display: block; font: 700 clamp(26px, 3vw, 40px)/1 var(--display); color: var(--ink); }
/* direct child only — the odometer fills the <b> with its own spans */
.pg-stat > span { display: block; margin-top: 9px; font: 400 12px/1.5 var(--mono); letter-spacing: 0.14em; color: var(--muted); }

.pg-cta {
  position: relative; overflow: hidden;
  margin: 70px 0 90px; border: 1px solid var(--line); border-radius: 18px;
  padding: 46px 34px; text-align: center; background: rgba(11, 95, 255, 0.05);
}
.pg-cta::before {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: radial-gradient(closest-side at 50% 120%, rgba(11, 95, 255, 0.22), transparent 70%);
}
.pg-cta h2 { font: 700 clamp(24px, 3vw, 40px)/1.15 var(--display); color: var(--ink); }
.pg-cta p { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--body); }
.pg .layerwrap { margin-top: 34px; }