/* ===================================================================
   ORBT Labs — Demo System (shared, segment-agnostic)
   Reused verbatim by every demo in the program (Phases 2-6).
   Program-wide constant strings live here:
     - DEMO marker    : "A demo by ORBT Labs — this business is fictional"
     - Conversion line : "builds like this start at $2,400"
     - CTA target      : /contact/start
   No segment-specific copy of any kind. Keep this file brand-neutral.
   Register tokens mirror the blessed navy/gold/ivory craft; scoped so
   demos that already declare :root tokens inherit cleanly.
   =================================================================== */

:root{
  --ds-navy:#0f1b33; --ds-navy-2:#152540; --ds-ink:#0c1526;
  --ds-paper:#fbf8f1; --ds-bone:#f6f1e7;
  --ds-gold:#c8a25a; --ds-gold-deep:#a9853f; --ds-gold-soft:#dcc58f;
  --ds-tx:#1c2536; --ds-tx-2:#54607a; --ds-smoke:#8a8272;
  --ds-line-lt:rgba(246,241,231,.18);
  --ds-marker-h:46px;

  /* ORBT Labs brand tokens (source of truth: /styles.css) — used ONLY by the
     studio strip so it reads deliberately in ORBT Labs' dark-space identity,
     never the host demo's palette. */
  --orbt-bg:#0a0a0a; --orbt-fg:#fafafa; --orbt-muted:#9095a0;
  --orbt-accent:#c8302f; --orbt-rule:rgba(255,255,255,.10);
}

/* Reserve space so the fixed strip never covers primary content.
   Uses min-height on the strip + matching padding here; on phones the
   longer disclosure tail (e.g. "this photographer is fictional") is allowed
   to wrap to a second line rather than truncate — PROGRAM LAW: the
   fictional-demo disclosure is NEVER cut off — so the reserved height grows
   to match at the phone breakpoint. */
body[data-demo]{padding-top:var(--ds-marker-h)}

/* -------------------------------------------------------------------
   SYS-01 · The ORBT Labs studio strip (rebrand of the DEMO marker)
   A full-width fixed top band — the studio's signature on its own work.
   ORBT Labs dark-space ground (#0a0a0a), a red accent hairline, the real
   orbit mark + wordmark on the left, a LOUD fictional-demo disclosure in
   the centre (PROGRAM LAW — never diluted or shrunk), and a subtle
   "See the studio →" funnel to orbtlabs.com on the right.
   Deliberately ORBT Labs' brand, sitting ABOVE each demo's own header.
   Legibility: paper-white on near-black passes the squint test at 390px.
   Font: system-ui sans for this tiny chrome (no googleapis, no heavy
   self-host for micro-text — the disclosure stays crisp and legible).
   ------------------------------------------------------------------- */
.demo-marker{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  min-height:var(--ds-marker-h);
  display:flex;align-items:center;gap:16px;
  background:var(--orbt-bg);
  border-bottom:1px solid var(--orbt-rule);
  box-shadow:0 6px 24px -14px rgba(0,0,0,.9);
  padding:0 20px;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--orbt-fg);line-height:1.25;
}
/* the studio's red accent hairline across the very top — the signature */
.demo-marker:before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--orbt-accent);opacity:.9;
}

/* LEFT · the real orbit mark + wordmark, linking home */
.demo-marker .dm-brand{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;color:var(--orbt-fg);
  transition:opacity .3s ease;
}
.demo-marker .dm-brand:hover{opacity:.82}
.demo-marker .dm-mark{
  flex:none;display:inline-flex;width:22px;height:22px;
}
.demo-marker .dm-orbit{width:22px;height:22px;color:var(--orbt-fg);display:block}
.demo-marker .dm-orbit .dm-core{fill:var(--orbt-accent)}
.demo-marker .dm-word{
  font-weight:600;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;
  color:var(--orbt-fg);
}

/* CENTRE · the LOUD fictional-demo disclosure (never quieter than legible,
   NEVER truncated — it wraps before it clips). */
.demo-marker .dm-txt{
  flex:1 1 auto;min-width:0;text-align:center;
  font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orbt-fg);line-height:1.35;
}
.demo-marker .dm-txt b{font-weight:600;color:var(--orbt-accent)}

/* RIGHT · the subtle funnel to the studio (tasteful, removable) */
.demo-marker .dm-more{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;color:var(--orbt-muted);
  font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  transition:color .3s ease;
}
.demo-marker .dm-more:hover{color:var(--orbt-fg)}
.demo-marker .dm-more .dm-arrow{
  font-size:12px;letter-spacing:0;transition:transform .3s ease;
}
.demo-marker .dm-more:hover .dm-arrow{transform:translateX(3px)}

/* Tablet — tighten the disclosure tracking, keep all three clusters. */
@media(max-width:900px){
  .demo-marker .dm-txt{letter-spacing:.12em;font-size:10.5px}
}
/* Phone — the wordmark and the "See the studio" caption fold away so the
   orbit mark + the LOUD disclosure own the full width and stay legible.
   The mark alone still links home; the disclosure is never sacrificed — it
   wraps to a second line if the (longer) photographer/practitioner tail needs
   it, and the strip grows to fit (min-height + vertical padding). The reserved
   body padding tracks via the bumped --ds-marker-h so nothing overlaps. */
@media(max-width:600px){
  :root{--ds-marker-h:56px}
  .demo-marker{gap:11px;padding:9px 14px}
  .demo-marker .dm-word{display:none}
  .demo-marker .dm-more{display:none}
  .demo-marker .dm-txt{
    font-size:10px;letter-spacing:.08em;text-align:left;
  }
}
@media(max-width:360px){
  .demo-marker .dm-txt{font-size:9.5px;letter-spacing:.04em}
}

/* -------------------------------------------------------------------
   SYS-01 · Honesty caption
   Captions every fake result, review, stat, or data point.
   Playfair italic, muted — quiet, legible (never gold-on-cream body).
   ------------------------------------------------------------------- */
.honesty-cap{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;
  font-size:12.5px;line-height:1.5;letter-spacing:.01em;
  color:var(--ds-tx-2);
}
.honesty-cap.on-dark{color:rgba(246,241,231,.72)}
.honesty-cap .hc-tag{
  font-family:'Jost',system-ui,sans-serif;font-style:normal;font-weight:400;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ds-smoke);margin-right:8px;
}

/* -------------------------------------------------------------------
   SYS-02 · The single conversion strip (the ONLY price in a demo body)
   ORBT Labs studio identity — the studio's sales pitch in its OWN brand,
   deliberately dark-space, NOT the host demo's palette. Mirrors the SYS-01
   banner exactly in spirit so the demo is FRAMED top and bottom by ORBT
   chrome: near-black ground (#0a0a0a), the ORBT red accent (#c8302f) on the
   price + CTA + the top hairline signature (same :before red rule as the
   banner), clean system-ui type (NO serif, NO googleapis/gstatic). Reads as
   ORBT Labs' studio block against any demo palette above it.
   ------------------------------------------------------------------- */
.orbt-strip{
  background:var(--orbt-bg);color:var(--orbt-fg);
  border-top:1px solid var(--orbt-rule);
  position:relative;overflow:hidden;
}
/* the studio's red accent hairline across the top — mirrors the SYS-01 banner
   signature so the demo is framed by the same red rule top and bottom */
.orbt-strip:before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--orbt-accent);opacity:.9;
}
.orbt-strip-inner{
  max-width:1280px;margin:0 auto;padding:52px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.orbt-strip .os-eyebrow{
  display:block;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:500;
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--orbt-muted);margin-bottom:14px;
}
.orbt-strip .os-line{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:600;
  font-size:clamp(24px,3.4vw,40px);line-height:1.12;letter-spacing:-.01em;margin:0;color:var(--orbt-fg);
}
.orbt-strip .os-line em{font-style:normal;font-weight:600}
.orbt-strip .os-line .os-price{font-style:normal;font-weight:600;color:var(--orbt-accent)}
.orbt-strip .os-sub{
  margin:14px 0 0;max-width:44ch;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:400;
  font-size:14.5px;line-height:1.55;color:var(--orbt-muted);
}
.orbt-strip .os-cta{
  flex:none;display:inline-block;text-decoration:none;
  border:1px solid var(--orbt-accent);color:var(--orbt-fg);
  background:var(--orbt-accent);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;line-height:1;
  padding:20px 38px;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.orbt-strip .os-cta:hover{background:transparent;color:var(--orbt-accent);border-color:var(--orbt-accent)}
@media(max-width:640px){
  .orbt-strip-inner{padding:40px 24px;gap:24px}
  .orbt-strip .os-cta{padding:17px 30px}
}

/* Motion — fail OPEN (mirrors the blessed reveal contract).
   Content is visible by default; JS opts INTO the hidden resting state
   only after adding .js to <body> and only for .rv elements. */
.js .rv{opacity:0;transform:translateY(24px);
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
}

/* -------------------------------------------------------------------
   ADDITIVE NOTE (Phase 2, carried through the Phase 3 rebrand) ·
   Person-brand disclosure wording variant.
   The program-wide DEFAULT disclosure string is unchanged and canonical:
     "A demo by ORBT Labs — this business is fictional"
   For a demo whose brand is a PERSON (e.g. a photographer) rather than a
   business, the disclosure tail is configurable per page: set
     <body data-demo data-demo-tail="this photographer is fictional">
   demo-system.js reads that attribute against a small allow-list
   ("this business is fictional" | "this photographer is fictional" |
   "this practitioner is fictional") and falls back to the default for any
   page that doesn't set it — so med-spa (Solenne) is byte-for-byte unchanged.
   This is a COPY variant only — strip markup, layout, and styling are
   identical across all tails. Additive only — never breaks any demo.
   ------------------------------------------------------------------- */