/* ============================================================
   MARSLER — subpage layer
   Inner pages (services, work, faq, legal). Loads AFTER mars.css,
   so it inherits every token, atom and component already defined.
   ============================================================ */

/* ---------- page hero ---------- */
.phero{ padding:calc(96px + clamp(40px,9vh,96px)) 0 0; }
.crumbs{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin-bottom:30px;
}
.crumbs a{ color:var(--muted); transition:color .3s; }
.crumbs a:hover{ color:var(--neon); }
.crumbs .sep{ color:var(--hair); }
.crumbs .here{ color:var(--neon); }

.peyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:26px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.peyebrow .tick{ width:34px; height:1px; background:var(--neon); box-shadow:0 0 8px var(--neon-glow); }
.peyebrow .s-no{ color:var(--neon); }

.ptitle{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem, 7vw, 6rem); line-height:1; letter-spacing:-.02em;
  margin:0 0 28px; max-width:18ch; text-wrap:balance;
}
.ptitle em{ color:var(--neon); text-shadow:0 0 38px rgba(10,246,210,.45); }

.plead{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.35rem,2.7vw,2.1rem); line-height:1.35; letter-spacing:-.01em;
  color:var(--ink); max-width:46ch; text-wrap:pretty;
}
.plead em{ color:var(--neon); }

.phero .badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.phero .badges span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; padding:6px 12px; border:1px solid var(--hair); border-radius:999px; color:var(--muted); }
.phero .badges .live{ color:var(--neon); border-color:var(--neon-line); }

/* ---------- generic content block ---------- */
.block{ padding-block:clamp(64px,10vw,120px); }
.block-head{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding-bottom:32px; border-bottom:1px solid var(--hair); margin-bottom:48px;
}
.block-head .k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--neon); }
.block-head h2{ font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.6vw,2.8rem); line-height:1.1; letter-spacing:-.01em; }
.block-head h2 em{ color:var(--neon); }

/* ---------- long-form prose ---------- */
.prose{ max-width:62ch; }
.prose > * + *{ margin-top:22px; }
.prose p{ color:var(--muted); font-size:1.25rem; line-height:1.7; text-wrap:pretty; }
.prose p b, .prose li b{ color:var(--ink); font-weight:500; }
.prose em{ color:var(--neon); }
.prose h2{ font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3.2vw,2.4rem); letter-spacing:-.01em; margin-top:48px; line-height:1.12; }
.prose h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,2.4vw,1.7rem); margin-top:36px; }
.prose a{ color:var(--neon); border-bottom:1px solid var(--neon-line); transition:border-color .3s; }
.prose a:hover{ border-color:var(--neon); }
.prose ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.prose ul li{ position:relative; padding-left:26px; color:var(--muted); line-height:1.62; }
.prose ul li::before{ content:"→"; position:absolute; left:0; top:0; color:var(--neon); font-family:var(--mono); }

/* ---------- two-column intro (lead + meta) ---------- */
.split{ display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(40px,7vw,110px); align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:48px; } }

/* ---------- payload / feature cards ---------- */
.payloads{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:16px; overflow:hidden; }
@media (max-width:720px){ .payloads{ grid-template-columns:1fr; } }
.payloads .cell{ background:var(--bg); padding:clamp(26px,3vw,38px); transition:background .4s; }
.payloads .cell:hover{ background:var(--bg-2); }
.payloads .cell .pk{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--neon); display:block; margin-bottom:14px; }
.payloads .cell h3{ font-family:var(--serif); font-weight:300; font-size:clamp(1.3rem,2.4vw,1.8rem); margin-bottom:12px; letter-spacing:-.01em; }
.payloads .cell p{ color:var(--muted); font-size:.98rem; line-height:1.62; }

/* ---------- numbered process steps ---------- */
.steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.steps li{ display:grid; grid-template-columns:auto 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--hair); align-items:baseline; }
.steps .sn{ font-family:var(--mono); font-size:.78rem; color:var(--neon); letter-spacing:.1em; }
.steps h3{ font-family:var(--serif); font-weight:300; font-size:clamp(1.3rem,2.6vw,2rem); letter-spacing:-.01em; margin-bottom:8px; }
.steps p{ color:var(--muted); font-size:1.0625rem; line-height:1.62; max-width:60ch; }

/* ---------- screenshot drop zones (matches .m-view telemetry look) ---------- */
.shot{
  position:relative; aspect-ratio:16/10; border-radius:14px; overflow:hidden;
  border:1px solid var(--hair); background:linear-gradient(var(--bg-3),var(--bg-2));
  box-shadow:0 40px 120px -50px rgba(0,0,0,.9);
}
.shot::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--hair-2) 1px,transparent 1px),linear-gradient(90deg,var(--hair-2) 1px,transparent 1px);
  background-size:38px 38px; }
.shot .vp-tag{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; color:var(--faint); }
.shot .vp-mid{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px; }
.shot .vp-mid .glyph{ width:48px; height:48px; border-radius:50%; border:1px solid var(--neon-line); display:grid; place-items:center; color:var(--neon); }
.shot .vp-mid .cap{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--muted); max-width:34ch; }
.shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; }
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,26px); }
@media (max-width:720px){ .gallery{ grid-template-columns:1fr; } }

/* ---------- key facts list (reuses .stats visual language) ---------- */
.facts{ display:grid; gap:0; border-top:1px solid var(--hair); }
.facts .row{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--hair); }
.facts dt{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.facts dd{ margin:0; font-family:var(--mono); font-size:.92rem; color:var(--ink); text-align:right; }
.facts dd a{ color:var(--neon); }

/* ---------- FAQ (native details/summary) ---------- */
.faq{ border-top:1px solid var(--hair); max-width:76ch; }
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 0; display:flex; gap:18px; align-items:baseline;
  font-family:var(--serif); font-weight:300; font-size:clamp(1.15rem,2.2vw,1.55rem); letter-spacing:-.01em;
  color:var(--ink); transition:color .3s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q{ font-family:var(--mono); font-size:.7rem; color:var(--neon); letter-spacing:.1em; transform:translateY(2px); }
.faq summary .pm{ margin-left:auto; font-family:var(--mono); color:var(--neon); transition:transform .3s var(--ease); }
.faq details[open] summary .pm{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--neon); }
.faq .a{ padding:0 0 26px 36px; color:var(--muted); font-size:1.02rem; line-height:1.7; max-width:62ch; text-wrap:pretty; }
.faq .a a{ color:var(--neon); border-bottom:1px solid var(--neon-line); }

/* ---------- related cards ---------- */
.related{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.rel-card{ display:block; padding:26px; border:1px solid var(--hair); border-radius:14px; background:var(--bg-2); transition:border-color .35s, transform .35s var(--ease), background .35s; }
.rel-card:hover{ border-color:var(--neon-line); transform:translateY(-3px); background:var(--bg-3); }
.rel-card .rk{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--neon); }
.rel-card h3{ font-family:var(--serif); font-weight:300; font-size:1.4rem; margin:10px 0 8px; letter-spacing:-.01em; }
.rel-card p{ color:var(--muted); font-size:.94rem; line-height:1.55; }

/* ---------- CTA band ---------- */
.cta{ position:relative; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding-block:clamp(64px,10vw,120px); text-align:center; }
.cta h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,5vw,3.6rem); line-height:1.05; letter-spacing:-.02em; max-width:20ch; margin:0 auto 16px; }
.cta h2 em{ color:var(--neon); }
.cta p{ color:var(--muted); max-width:48ch; margin:0 auto 32px; }
.cta .hero-cta{ justify-content:center; }

/* ---------- back link ---------- */
.backlink{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:gap .3s, color .3s; }
.backlink:hover{ color:var(--neon); gap:16px; }
.backlink .ar{ color:var(--neon); }