:root{
  --paper:#faf7f1; --paper-deep:#f1ece2; --card:#ffffff; --ink:#26221c; --soft:#5c554a; --line:#e6dfd3;
  --navy:#13233c; --navy-deep:#0d1830; --navy-soft:#1c3050; --orange:#ea561f; --orange-deep:#c9440f; --copper:#d08a60;
  --on-navy:#faf7f1; --on-navy-soft:#9fb0c8;
  --font:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Big Shoulders Display","Archivo Narrow","Arial Narrow",Impact,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-deep);margin:0 0 14px}
.price .eyebrow,.hero .eyebrow{color:var(--orange)}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:900;letter-spacing:.005em;text-transform:uppercase;line-height:.98;text-wrap:balance}
h2{font-size:clamp(2.2rem,5.2vw,3.8rem)}
h3{font-size:1.6rem}
p{margin:0 0 16px}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--soft);max-width:60ch}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;border-radius:12px;font-weight:800;font-size:1.08rem;text-decoration:none;border:0;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 160ms,color 160ms}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--orange-deep);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.btn.primary:hover{background:#b53d0d}}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.paper{background:var(--paper);color:var(--navy)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.mono{font-family:var(--mono)}

/* ---------- header ---------- */
header{position:absolute;inset:0 0 auto 0;z-index:5;color:var(--on-navy)}
header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:900;letter-spacing:.03em;font-size:1.45rem}
.mark svg{width:30px;height:30px}
.mark b span{color:var(--orange)}
nav{display:flex;gap:26px;font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase}
nav a{text-decoration:none;color:var(--on-navy-soft);padding:8px 0;transition:color 160ms}
nav a:hover{color:var(--on-navy)}
/* Phones: the links fold into a menu the header button opens. site.js adds
   .has-menu; without script the links stay on the page as a wrapped row. */
.menu-btn,.menu-cta{display:none}
@media (max-width:760px){
  header .wrap{flex-wrap:wrap}
  header nav{flex-wrap:wrap;gap:0 20px;width:100%;padding-bottom:8px}
  header nav a{padding:12px 0}
  .has-menu .menu-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1.5px solid rgba(250,247,241,.4);border-radius:12px;background:transparent;color:var(--on-navy);font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:transform 160ms var(--ease-out),border-color 160ms}
  .has-menu .menu-btn:active{transform:scale(.97)}
  .has-menu .menu-btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
  .has-menu.menu-open{background:var(--navy-deep)}
  .has-menu.menu-open .menu-btn{border-color:var(--on-navy)}
  .has-menu nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;flex-wrap:nowrap;gap:0;width:auto;padding:4px 22px 26px;background:var(--navy-deep);box-shadow:0 24px 40px rgba(13,24,48,.35);font-family:var(--display);font-size:1.7rem;font-weight:900;letter-spacing:.02em;visibility:hidden;opacity:0;transform:translateY(-8px)}
  /* .menu-moved arrives with the first tap, so the fold on page load is instant and only real opens and closes animate. */
  .has-menu.menu-moved nav{transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s 220ms}
  .has-menu.menu-open nav{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .has-menu nav a{color:var(--on-navy);padding:15px 0;border-bottom:1px solid rgba(250,247,241,.14)}
  .has-menu nav a[aria-current="page"]{color:var(--orange)}
  .has-menu nav .menu-cta{display:flex;justify-content:center;text-align:center;line-height:1.25;margin-top:22px;padding:10px 20px;border-bottom:0;color:var(--paper);font-family:var(--font);font-size:1.08rem;letter-spacing:0;text-transform:none}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.has-menu.menu-moved nav{transition:none}.has-menu nav{transform:none}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:var(--on-navy);padding:124px 0 88px;overflow:clip;isolation:isolate}
.hero::after{content:"";position:absolute;z-index:-1;right:-26vw;bottom:-36vw;width:62vw;height:62vw;border-radius:50%;border:4.5vw solid var(--orange);opacity:.95}
@media (max-width:900px){.hero::after{right:-40vw;bottom:-46vw;width:86vw;height:86vw;border-width:7vw}}
.hero .copy{max-width:min(720px,62%)}
@media (max-width:900px){.hero .copy{max-width:100%}}
.hero .eyebrow{color:var(--on-navy-soft)}
.hero h1{font-size:clamp(3.2rem,7.6vw,6rem);line-height:.92;letter-spacing:.005em;margin:0 0 22px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:inline-block}
.hero .lead{color:var(--on-navy-soft);max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 12px}
.hero .fine{font-size:.85rem;color:var(--on-navy-soft);margin:0}
@media (max-width:900px){.hero{padding:120px 0 70vw}}

/* ---------- monday queue (pinned) ---------- */
.monday{background:var(--paper);padding:0}
.monday .pin{min-height:100svh;display:grid;align-items:center}
.monday .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:72px 0}
@media (max-width:900px){.monday .grid{grid-template-columns:1fr;gap:34px;padding:56px 0 64px}}
.monday h2 em{font-style:normal;color:var(--orange)}
.queue{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 30px 60px -40px rgba(19,35,60,.45)}
.queue .top{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.queue .top b{font-size:.95rem}
.queue .top span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.qcard{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 10px;background:var(--paper)}
.qcard h3{font-size:1.2rem;margin:0 0 6px}
.qcard p{font-size:.9rem;color:var(--soft);margin:0 0 10px}
.chip{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--paper-deep);border-radius:999px;padding:5px 10px;margin:0 0 12px}
.qcard .acts{display:flex;gap:8px}
.qcard .acts span{font-size:.82rem;font-weight:800;padding:8px 14px;border-radius:9px;background:var(--navy);color:var(--paper)}
.qcard .acts span + span{background:transparent;color:var(--soft);box-shadow:inset 0 0 0 1.5px var(--line)}
.queue .foot{display:flex;justify-content:space-between;align-items:center;padding:12px 6px 2px;font-size:.88rem;color:var(--soft)}
.queue .foot b{color:var(--orange-deep)}

/* ---------- two products ---------- */
.fork{background:var(--paper);padding:40px 0 30px}
.product{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.product:nth-child(even){direction:rtl}
.product:nth-child(even) > *{direction:ltr}
@media (max-width:900px){.product,.product:nth-child(even){grid-template-columns:1fr;direction:ltr;gap:26px;padding:44px 0}}
.product .art{border-radius:20px;overflow:hidden;background:var(--navy);aspect-ratio:8/5}
.product .art img{width:100%;height:100%;object-fit:cover}
.product h3{font-size:clamp(2rem,3.6vw,2.8rem);margin:0 0 12px}
.product .prob{font-weight:700;color:var(--navy);margin:0 0 14px;font-size:1.1rem}
.product p{color:var(--soft)}
.product a.more{font-weight:800;color:var(--orange);text-decoration:none}

.art-queue{display:grid;place-items:center;padding:8%;background:var(--navy)}
.mini{width:min(100%,360px);background:var(--card);border-radius:16px;padding:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mini-top{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 10px;border-bottom:1px solid var(--line);margin-bottom:10px;font-size:.9rem}
.mini-top span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep)}
.mini-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 8px}
.mini-card .chip{margin:0 0 8px}
.mini-card b{display:block;font-size:.95rem}
.mini-foot{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);padding:8px 4px 0}

/* ---------- covenant ---------- */
.covenant{background:var(--paper-deep);padding:88px 0}
.covenant h2{max-width:22ch;margin:0 0 34px}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
@media (max-width:760px){.rows{grid-template-columns:1fr}}
.rows .r{padding:20px 0;border-top:1px solid rgba(38,34,28,.16)}
.rows .r b{display:block;margin:0 0 4px}
.rows .r span{color:var(--soft)}
.covenant .note{color:var(--soft);font-size:.9rem;margin:22px 0 0}

/* ---------- video ---------- */

/* ---------- price (navy strip) ---------- */
.price{background:var(--navy);color:var(--on-navy);padding:96px 0}
.price .lead{color:var(--on-navy-soft)}
.price .lead b{color:var(--on-navy)}
.plist{margin:38px 0 56px;max-width:720px}
.plist .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-top:1px solid rgba(250,247,241,.14)}
.plist .row:last-child{border-bottom:1px solid rgba(250,247,241,.14)}
.plist small{display:block;color:var(--on-navy-soft);font-size:.82rem;font-weight:500}
.plist .amt{color:var(--orange);font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px}
@media (max-width:640px){.pair{grid-template-columns:1fr}}
.big{padding:26px 24px;border-radius:16px;background:var(--navy-soft)}
.big.now{background:var(--orange)}
.big .n{font-family:var(--display);font-size:clamp(2.8rem,6vw,4.2rem);font-weight:900;letter-spacing:.005em;line-height:1;font-variant-numeric:tabular-nums}
.big .n span{font-size:.42em;font-weight:700;letter-spacing:0}
.big .l{margin:10px 0 0;font-size:.9rem;color:var(--on-navy-soft)}
.big.now{color:var(--navy)}
.big.now .l{color:var(--navy)}
.punch{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;margin:26px 0 8px;letter-spacing:.005em}
details.seats{max-width:720px;margin:18px 0 0;border:1px solid rgba(250,247,241,.18);border-radius:12px}
details.seats summary{cursor:pointer;padding:14px 18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-soft);list-style:none}
details.seats summary::-webkit-details-marker{display:none}
details.seats summary::before{content:"+ ";color:var(--orange)}
details.seats[open] summary::before{content:"– "}
.seat-row{display:flex;justify-content:space-between;gap:14px;padding:9px 18px;font-size:.88rem;border-top:1px solid rgba(250,247,241,.08)}
.seat-row span:last-child{color:var(--on-navy-soft);font-variant-numeric:tabular-nums}
.price .foot{color:var(--on-navy-soft);font-size:.85rem;margin:16px 0 0;max-width:720px}

/* ---------- final cta (orange) ---------- */
.final{background:var(--orange);color:var(--navy);padding:96px 0}
.final h2{max-width:16ch;margin:0 0 20px}
.final p{color:var(--navy);max-width:48ch}
.final .btn.paper{margin-top:14px;background:var(--navy);color:var(--paper)}

footer{background:var(--navy-deep);color:var(--on-navy-soft);padding:38px 0 46px;font-size:.8rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .mono{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
footer .mono a{text-decoration:none;color:inherit}
footer .mono a:hover,footer .mono a[aria-current]{color:var(--on-navy)}
footer .legal-line{flex-basis:100%;font-size:.74rem;color:var(--on-navy-soft);opacity:.85}
footer .legal-line a{color:inherit}

/* ---------- legal pages (privacy, terms, refunds, cookies) ---------- */
.legal{margin:26px 0 0;max-width:72ch}
.legal .q{padding:26px 0 22px;border-top:1px solid var(--line)}
.legal .q:last-child{border-bottom:1px solid var(--line)}
.legal .q h3{font-size:1.35rem;margin:0 0 10px}
.legal .q p,.legal .q li{margin:0 0 10px;color:var(--ink)}
.legal .q p:last-child{margin:0}
.legal .q b{color:var(--navy)}
.legal .q ul{margin:0 0 10px;padding-left:20px}
.legal .q li{margin:0 0 6px}
.legal-meta{margin:18px 0 0;font-size:.9rem;color:var(--soft)}
.legal-meta .row{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.legal-meta .row:last-child{border-bottom:1px solid var(--line)}
.legal-meta .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;padding-top:4px}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;font-size:.9rem}
.legal-nav a{color:var(--on-navy-soft)}
.legal-nav a[aria-current]{color:var(--on-navy);font-weight:700}

/* ---------- sticky mobile cta ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(250,247,241,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform 320ms var(--ease-out)}
.bar .btn{width:100%;justify-content:center}
body.show-bar .bar{transform:none}
@media (min-width:761px){.bar{display:none}}

/* ---------- motion defaults (JS refines) ---------- */
.reveal{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.reveal{will-change:auto}}

/* ---------- shared: secondary pages ---------- */
.hero.short{padding:120px 0 76px}
@media (max-width:900px){.hero.short{padding:116px 0 60vw}}
.partner{display:inline-block;font-size:.85rem;color:var(--on-navy);background:rgba(250,247,241,.08);border:1px solid rgba(250,247,241,.28);border-radius:10px;padding:8px 12px;margin:0 0 22px}
.section{padding:80px 0}
.section.deep{background:var(--paper-deep)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 12px}
@media (max-width:640px){.stats{grid-template-columns:1fr}}
.stats > div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 20px}
.stats b{display:block;font-family:var(--display);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:900;letter-spacing:.005em;color:var(--navy);line-height:1}
.stats span{display:block;margin-top:6px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.muted{color:var(--soft);font-size:.92rem}
.list{list-style:none;padding:0;margin:22px 0 0;max-width:62ch}
.list li{padding:14px 0;border-top:1px solid var(--line);line-height:1.5}
.list li:last-child{border-bottom:1px solid var(--line)}
.list b{color:var(--navy)}
.kv{margin:18px 0 0}
.kv .row{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:.98rem}
.kv .row:last-child{border-bottom:1px solid var(--line)}
.kv .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);padding-top:5px}
.kv .v{color:var(--ink)}
.kv .v b{color:var(--navy)}
.pricebar{margin:18px 0 0;font-weight:800;color:var(--navy)}
.pricebar small{display:block;font-weight:500;color:var(--soft);margin-top:4px}
.pill{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep);border:1.5px solid var(--orange);border-radius:999px;padding:6px 12px}
.together{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 28px;margin:34px 0 0}
.together h3{margin:0 0 8px;font-size:1.5rem}
.together p{margin:0;color:var(--soft)}
.covenant-block{background:var(--paper-deep);border-radius:16px;padding:22px 24px;margin:34px 0 0;color:var(--ink)}
.covenant-block b{color:var(--navy)}
/* secondary heroes carry longer headlines: one step smaller, wider column */
.hero.short h1{font-size:clamp(2.8rem,6.6vw,5.4rem)}
.hero.short .copy{max-width:min(760px,64%)}
@media (max-width:900px){.hero.short .copy{max-width:100%}}
/* the queue art grows to its content instead of clipping the third card */
.product .art.art-queue{aspect-ratio:auto;min-height:0}

/* hero depth: two soft lobes behind the ring, drifting on transform only (PRD-SITE R6). Off under reduced motion. */
.hero::before{content:"";position:absolute;inset:-18%;z-index:-2;pointer-events:none;
  background:radial-gradient(40% 44% at 20% 70%, rgba(255,255,255,.07) 0%, transparent 70%),
    radial-gradient(36% 42% at 76% 28%, rgba(0,0,0,.30) 0%, transparent 70%),
    radial-gradient(30% 34% at 54% 92%, rgba(234,86,31,.09) 0%, transparent 70%);
  animation:heroDepth 42s ease-in-out infinite alternate}
@keyframes heroDepth{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}100%{transform:translate3d(-2%,2%,0) scale(1.02)}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}

/* ---------- the staff, on the home page ---------- */
.staffing{background:var(--paper);padding:80px 0 60px;border-bottom:1px solid var(--line)}
.seats{margin:30px 0 0;border-top:1px solid var(--line)}
.seat{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.seat-n{font-family:var(--display);font-size:2.6rem;font-weight:900;color:var(--orange);line-height:1}
.seat h3{font-size:1.7rem;margin:0 0 6px}
.seat p{margin:0 0 4px;max-width:62ch}
.seat-never{color:var(--navy);font-weight:700;font-size:.95rem}
.seats-foot{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:space-between;margin:24px 0 0}
.seats-foot p{margin:0;color:var(--soft)}
.btn.navy{background:var(--navy);color:var(--paper)}
/* doors */
.doors{font-family:var(--display);font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:900;text-transform:uppercase;letter-spacing:.01em;color:var(--on-navy);margin:0 0 6px;line-height:1.05}
.doors .mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;color:var(--orange);text-transform:uppercase;display:block;margin:0 0 6px}
.doors .doors-sub{display:block;font-family:var(--font);font-size:1rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--on-navy-soft);margin-top:6px}
.doors-band{background:var(--navy-deep);color:var(--on-navy);padding:88px 0}
.doors-band .lead{color:var(--on-navy-soft)}
.doors-band h2{font-size:clamp(2.6rem,7vw,5.4rem)}

/* ---------- watchman phone (replaces the flat wall render) ----------
   XP Command rebuilt live: slab headline, blueprint grid, mono metadata,
   tab bar, 2819 mark in the status bar. Palette is 2819 red/black/white per
   Lonnell 2026-09-06, which overrides this file's paper/green/amber skin and
   CLAUDE.md's "never 2819 red/black" line — flip --xp-accent to change it back.
   Sizing is in cq units off the phone so it scales cleanly at any width. */
.product .art.art-phone{aspect-ratio:auto;display:grid;place-items:center;
  padding:34px 0;background:
    radial-gradient(70% 55% at 50% 32%, rgba(237,28,36,.14) 0%, transparent 70%),
    #000}
@media (max-width:900px){.product .art.art-phone{padding:26px 0}}

.xp-phone{--xp-accent:#ED1C24; --xp-muted:#8d8d92;
  width:min(70%,264px);aspect-ratio:9/19.5;container-type:inline-size;
  border-radius:34px;padding:5px;background:linear-gradient(160deg,#3a3a3d,#0c0c0d);
  box-shadow:0 44px 70px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.15)}
.xp-screen{position:relative;height:100%;overflow:hidden;border-radius:29px;
  background:#0a0a0b;color:#fff;font-size:5.75cqw;display:flex;flex-direction:column}

/* blueprint underlay: grid and ghost issue numeral, both fading out low on the
   screen so the empty rows below the fold don't read as a spreadsheet */
.xp-grid{position:absolute;inset:0;pointer-events:none;background-image:
  linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:3.4em 4.6em;
  -webkit-mask-image:linear-gradient(#000 42%,transparent 88%);
  mask-image:linear-gradient(#000 42%,transparent 88%)}
/* the watermark is the 2819 mark itself, bleeding off the right edge where
   XP Command carries its issue numeral */
.xp-ghost{position:absolute;top:2.3em;right:-.75em;width:4.2em;height:6em;
  background:var(--xp-accent);opacity:.2;pointer-events:none;
  -webkit-mask:url(/m/deck-img/2819-mark.svg) center/contain no-repeat;
  mask:url(/m/deck-img/2819-mark.svg) center/contain no-repeat}

.xp-bar{position:relative;display:flex;justify-content:space-between;align-items:center;
  gap:.6em;padding:.7em .9em .65em;background:#000;font-family:var(--mono);
  font-size:.46em;letter-spacing:.15em;color:var(--xp-muted)}
.xp-bar .id{display:flex;align-items:center;gap:.7em;color:#fff;font-weight:700}
/* masked so the mark inherits colour instead of shipping a baked-in fill */
.xp-mark{flex:none;width:1.55em;height:2.2em;background:currentColor;
  -webkit-mask:url(/m/deck-img/2819-mark.svg) center/contain no-repeat;
  mask:url(/m/deck-img/2819-mark.svg) center/contain no-repeat}

.xp-body{position:relative;flex:1;padding:1em .9em 0;min-height:0}
.xp-live{display:flex;align-items:center;gap:.5em;font-family:var(--mono);
  font-size:.46em;letter-spacing:.15em}
.xp-live i{width:.5em;height:.5em;border-radius:50%;background:#fff}
.xp-live .pill{margin-left:auto;display:flex;align-items:center;gap:.55em;
  border:1px solid rgba(255,255,255,.7);border-radius:99px;padding:.55em 1.1em}
.xp-live .pill i{background:var(--xp-accent)}
.xp-rule{height:1px;background:rgba(255,255,255,.24);margin:.8em 0 .5em}

.xp-slab{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:3.15em;line-height:.84;letter-spacing:.005em;margin:0}
.xp-under{width:2.2em;height:.13em;background:var(--xp-accent);margin:.3em 0 .42em}
.xp-meta{font-family:var(--mono);font-size:.46em;letter-spacing:.15em;color:var(--xp-muted)}
.xp-date{font-family:var(--display);font-weight:900;font-size:3.6em;line-height:.8;margin:.14em 0 .06em}
.xp-src{font-family:var(--mono);font-size:.46em;letter-spacing:.15em;color:var(--xp-accent)}
.xp-note{margin:.7em 0 1em;font-size:.6em;line-height:1.42;color:rgba(255,255,255,.9)}

.xp-lab{font-family:var(--mono);font-size:.46em;letter-spacing:.15em;color:var(--xp-muted);
  padding-bottom:.55em;border-bottom:1px solid rgba(255,255,255,.5);margin-bottom:.7em}
.xp-row{display:grid;grid-template-columns:3.6em 1fr;gap:.7em;align-items:baseline;
  padding-bottom:.7em;margin-bottom:.7em;border-bottom:1px solid rgba(255,255,255,.16)}
.xp-row span{font-family:var(--mono);font-size:.46em;letter-spacing:.15em;color:var(--xp-muted)}
.xp-row b{font-family:var(--display);font-weight:900;font-size:1.05em;line-height:1.02;letter-spacing:.01em}
.xp-row b em{font-style:normal;color:var(--xp-accent)}
.xp-row.none b{text-align:right;color:var(--xp-muted)}

.xp-tabs{position:relative;display:flex;justify-content:space-between;align-items:flex-end;
  padding:.9em 1em 1.5em;background:#000;font-family:var(--mono);
  font-size:.4em;letter-spacing:.12em;color:var(--xp-muted)}
.xp-tabs .on{color:var(--xp-accent);border-bottom:.26em solid var(--xp-accent);padding-bottom:.28em}
.xp-tabs .bdg{position:relative}
.xp-tabs .bdg::after{content:"3";position:absolute;top:-1.5em;right:-1em;
  width:1.5em;height:1.5em;display:grid;place-items:center;border-radius:50%;
  background:var(--xp-accent);color:#fff;font-size:1.15em;font-weight:700;letter-spacing:0}

/* Opening C is confined to the homepage hero; secondary heroes stay intact. */
.hero:has(> .opening-band){padding-top:76px}
.hero:has(> .opening-band) > .wrap{padding-top:40px}
.opening-band{position:relative;z-index:1;width:100%;aspect-ratio:16/9;max-height:72vh;overflow:hidden;background:var(--navy)}
.opening-band video{width:100%;height:100%;object-fit:cover}
#opening-sound{position:absolute;right:16px;bottom:16px;min-width:48px;min-height:48px;padding:12px 18px;border:1px solid var(--on-navy-soft);border-radius:0;background:rgb(19 35 60 / 85%);color:var(--paper);font:13px var(--mono);text-transform:uppercase;cursor:pointer}
#opening-sound:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
#opening-sound:active{background:var(--navy)}
@media (hover:hover){#opening-sound:hover{background:var(--navy)}}
/* Native controls need their own bottom row in the reduced-motion fallback. */
.opening-band:has(video[controls]) #opening-sound{bottom:64px}
@media (max-width:600px){
  #opening-sound{right:8px;bottom:0;width:52px;padding:4px;line-height:1.2}
}

/* FAQ (for-churches): questions as h3 so answer engines can lift them */
.faq-list{margin-top:22px;max-width:62ch}
.faq-item{padding:18px 0;border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0 0 6px;color:var(--navy);font-size:1.1rem;line-height:1.3}
.faq-item p{margin:0;line-height:1.55}
.faq-item a{color:var(--orange-deep);font-weight:700}