/* Shared PRINCE surface. Functional tools keep their own layout and status colors. */
.prince-site {
  --ps-bg:#0e0c0e; --ps-panel:#161317; --ps-line:#393239;
  --ps-ink:#f4efe9; --ps-soft:#c8c1c8; --ps-gold:#d9b866; --ps-ambient-gold:#b09a68;
  --ps-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--ps-bg); color:var(--ps-ink); font-family:var(--ps-font);
  text-underline-offset:5px;
}
.prince-site *, .prince-site *::before, .prince-site *::after { box-sizing:border-box; }
.prince-site :is(h1,h2,h3,h4,button,input,select,textarea) { font-family:var(--ps-font); letter-spacing:0; }
.prince-site :is(h1,h2,h3,h4) { text-shadow:none; overflow-wrap:break-word; }
.prince-site :focus-visible { outline:2px solid var(--ps-gold); outline-offset:4px; }
.prince-site :is(.btn,.pp-btn,.cta,.trial-btn,.meet-bots-button) { border-radius:6px; letter-spacing:0; }
.prince-site :is(button,input,select,textarea) { max-width:100%; }
.prince-site a { text-underline-offset:5px; }
.prince-site #pp-header .pp-title { font-family:var(--ps-font); letter-spacing:0; }
.prince-site #pp-header { font-family:var(--ps-font); min-height:159px; }
.prince-home-motion .brand-lockup { font-family:var(--ps-font); }
.prince-site #pp-header .pp-logo { box-shadow:none; border-radius:6px; }
.prince-site #pp-header .pp-bots { flex-wrap:wrap; justify-content:center; transform:none !important; }
.prince-site #pp-header *, .prince-site #pp-footer *,
.prince-site #pp-header *::before, .prince-site #pp-header *::after,
.prince-site #pp-footer::before, .prince-site #pp-footer::after,
.prince-site #pp-footer *::before, .prince-site #pp-footer *::after { animation:none !important; }
.prince-site #pp-header a { transition:color .18s,background-color .18s,border-color .18s; }
.prince-site #pp-header :is(.pp-nav > a, .pp-item > a)[aria-current="page"] { color:var(--ps-gold); text-decoration:underline; }   /* plain links only: the gold call-to-action buttons keep their own contrast */

/* Editorial pages share a quiet field, not different animated backdrops. */
.prince-editorial { background:var(--ps-bg) !important; }
.prince-editorial :is(.prince-hero,.adopt-hero,.bots-hero,.bots-wrap,.adopt-page) { background:transparent; }
.prince-editorial :is(.prince-hero,.adopt-hero,.bots-hero) { padding-top:48px; padding-bottom:40px; }
.prince-editorial :is(.prince-hero,.adopt-hero,.bots-hero,.bots-wrap,.hero-card)::before,
.prince-editorial :is(.prince-hero,.adopt-hero,.bots-hero,.bots-wrap,.hero-card)::after,
.prince-editorial :is(.blackshield-card,.trial-card,.testing-info)::before,
.prince-editorial :is(.blackshield-card,.trial-card,.testing-info)::after { display:none; }
.prince-editorial :is(.hero-card,.cta-bar) { background:none; border:0; border-radius:0; box-shadow:none; }
.prince-editorial :is(h1,.hero-content h1,.bots-hero h1,.adopt-hero h1) {
  font-family:var(--ps-font); font-size:44px; line-height:1.12; letter-spacing:0;
  color:var(--ps-ink); background:none; -webkit-text-fill-color:currentColor; text-shadow:none;
}
.prince-editorial :is(h2,.section h2,.comparison-label) { font-family:var(--ps-font); font-size:30px; line-height:1.25; letter-spacing:0; text-shadow:none; }
.prince-editorial :is(h3,.bot-name,.plan-card h3) { font-family:var(--ps-font); letter-spacing:0; }
.prince-editorial :is(.section,.sec) { margin-block:0; padding-block:48px; border-top:1px solid var(--ps-line); }
.prince-editorial :is(.card,.plan-card,.trial-card,.blackshield-card,.bot-card,.facts,.comparison-wrap) {
  border-radius:8px; border-color:var(--ps-line); background:var(--ps-panel); box-shadow:none;
}
.prince-editorial :is(.plan-card.featured,.orbit,.halo,.chip .dot,.pp-livedot,.pp-scanline::before) { animation:none !important; }
.prince-editorial :is(.adopt-page,.plan-card,.typing-terminal,.hero-scan,.portrait,.panel.hero,.panel.hero img),
.prince-editorial :is(.adopt-page,.plan-card,.hero-scan,.panel.hero)::before,
.prince-editorial :is(.adopt-page,.plan-card,.hero-scan,.panel.hero)::after { animation:none !important; }
.prince-editorial :is(.glitch-numbers,.hero-scan) { display:none; }
.prince-editorial :is(.plan-card,.adopt-page)::before,
.prince-editorial :is(.plan-card,.adopt-page)::after { display:none; }
.prince-editorial .panel.hero { background:none; border:0; border-radius:0; box-shadow:none; }
.prince-editorial .panel.hero::before, .prince-editorial .panel.hero::after { display:none; }
.prince-editorial :is(.starthere,.toggle a,.trial-price,.trial-price.business) { box-shadow:none; border-radius:6px; }
.prince-auth .stars, .prince-auth .card::before, .prince-auth .card::after { display:none; }
.prince-auth .card { background:var(--ps-panel); box-shadow:none; border:1px solid var(--ps-line); border-radius:8px; }
.prince-auth h1 { font-size:30px; line-height:1.2; }
.prince-editorial :is(.orbit,.halo) { display:none; }
.prince-editorial :is(.typing-terminal,.reveal,.hero-card) { animation:none; opacity:1; transform:none; }
.prince-editorial .typing-terminal { white-space:normal; width:auto; border-right:0; }
.prince-editorial :is(.btn,.cta,.trial-btn,.meet-bots-button) { min-height:44px; box-shadow:none; transform:none; }
.prince-editorial :is(.btn,.cta,.trial-btn,.meet-bots-button):hover { box-shadow:none; transform:none; filter:brightness(1.08); }
.prince-editorial .meet-bots-button { color:#100e11; }
.prince-editorial .bot-img { border-radius:0; object-fit:contain; }
.prince-editorial .bot-card:hover { box-shadow:none; border-color:var(--ps-gold); }
.prince-editorial .section > .card:only-child { border:0; border-radius:0; background:none; padding-inline:0; }

/* The static primary navigation: rendered only without script (inside <noscript>), the same nine
   destinations the shared header offers, so every page keeps its way around the product. */
.ps-static-nav { display:flex; flex-wrap:wrap; gap:12px 20px; padding:20px 16px; max-width:1200px; margin:0 auto; border-bottom:1px solid var(--ps-line); }
.ps-static-nav a { color:var(--ps-ink); font-weight:600; text-decoration:none; padding:6px 0; }
.ps-static-nav a:hover, .ps-static-nav a:focus-visible { color:var(--ps-gold); text-decoration:underline; }

/* The skip link lives in the shared header partial and appears only when focused. */
.prince-site .pp-skip { position:absolute; left:-9999px; top:16px; z-index:100000; padding:10px 14px; border-radius:6px; background:var(--ps-gold); color:#0f0e11; font-weight:700; text-decoration:none; }
.prince-site .pp-skip:focus, .prince-site .pp-skip:focus-visible { left:16px; outline:2px solid var(--ps-ink); outline-offset:2px; }

/* Card rooms (welcome, thank-you, day pass, account tools, 404): one centered card that now sits
   under the shared header and above the shared footer instead of floating alone on the page. */
.prince-site.prince-card { display:block !important; place-items:initial !important; align-items:initial !important; justify-content:initial !important; padding:0 !important; min-height:100vh; }
.prince-site.prince-card > :is(.card,main.card,.wrap,.page,main.page) { width:calc(100% - 32px); margin:40px auto; }
.prince-site.prince-card #pp-footer { margin-top:40px; }

/* Calm by default (2026-09-21). Ninety percent calm, ten percent magic: a page with no meaningful
   system activity to show holds still. Decorative backdrops that used to drift, breathe, shine or
   pulse forever are stopped at the source; anything else animates at most once and returns to
   stillness. The homepage's approved choreography (prince-motion) is untouched; loading spinners
   may keep turning while they are visible. */
.prince-site:not(.prince-home-motion) *:not(.spinner):not(.spin):not([class*="spinner"]):not([role="progressbar"]),
.prince-site:not(.prince-home-motion) *::before, .prince-site:not(.prince-home-motion) *::after { animation-iteration-count:1 !important; }
.prince-site:not(.prince-home-motion), .prince-site:not(.prince-home-motion)::before, .prince-site:not(.prince-home-motion)::after,
.prince-site:not(.prince-home-motion) :is(.hero,.feed-hero,.masthead,.restored-wrap,.wrap,.mast-ribbon,.tagline-wrap,.card,.puck,.ring,.kpi,.glow,.aurora,.aurora-edge,.shine,.scan,.sr-stars,.logo-orb,.alive-orb,.alive-halo,.heart,.bot,.badge,.tagline,.flow,.orb)::before,
.prince-site:not(.prince-home-motion) :is(.hero,.feed-hero,.masthead,.restored-wrap,.wrap,.mast-ribbon,.tagline-wrap,.card,.puck,.ring,.kpi,.glow,.aurora,.aurora-edge,.shine,.scan,.sr-stars,.logo-orb,.alive-orb,.alive-halo,.heart,.bot,.badge,.tagline,.flow,.orb)::after,
.prince-site:not(.prince-home-motion) :is(.glow,.aurora,.aurora-edge,.shine,.scan,.sr-stars,.logo-orb,.alive-orb,.alive-halo,.heart,.bot,.badge,.tagline,.flow,.orb,.puck,.ring,#signalsFlow,h1,circle),
.prince-editorial img { animation:none !important; }

/* Ambient gold illuminates in place. Traveling gold lives in prince-motion.css. */
.ps-waypoint { position:relative; }
.ps-reading-signal { display:block; position:absolute; top:-18px; left:50%; margin-left:-24px; width:48px; height:2px; pointer-events:none; }
.ps-reading-signal::after { content:""; display:block; width:100%; height:100%; background:var(--ps-ambient-gold); opacity:0; }
.ps-waypoint[data-ambient-align="start"] > .ps-reading-signal { left:0; margin-left:0; }
.ps-waypoint[data-ambient-place="below"] > .ps-reading-signal { top:auto; bottom:-12px; }
.ps-waypoint.ps-arriving > .ps-reading-signal::after { animation:ps-arrival .42s ease-out 1 both; }
.ps-waypoint.ps-read > .ps-reading-signal::after { opacity:.7; }
@keyframes ps-arrival { 0%{opacity:0} 55%{opacity:.9} 100%{opacity:.7} }

/* A common cadence, with narrower prose and a distinct orange room for Wallah. */
.prince-mission .section { max-width:1200px; padding-block:56px; }
.prince-plans .adopt-page { padding-top:24px; padding-bottom:56px; }
.prince-editorial.g-wallah { --max:1200px; --ps-ambient-gold:#c4935e; }
.prince-editorial.g-wallah main > section { padding-block:56px; }
.prince-editorial.g-wallah .ps-waypoint[data-ambient-align="start"] > .ps-reading-signal { top:auto; bottom:-12px; }
.prince-editorial.g-wallah .sec-head h2 { margin-bottom:24px; }

/* The homepage tells the product story before its longer company explanation. */
.prince-home-motion .what-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.prince-home-motion .what-card { background:none; border:0; border-top:1px solid var(--ps-line); border-radius:0; box-shadow:none; text-align:left; padding:28px 0; }
.prince-home-motion .what-card:hover { background:none; box-shadow:none; }
.prince-home-motion .what-card-head { justify-content:flex-start; align-items:center; min-height:92px; }
.prince-home-motion .what-card .what-guardian { width:66px; height:88px; object-fit:contain; border-radius:0; }
.prince-home-motion .what-card p { text-align:left; line-height:1.7; color:var(--ps-soft); }
.prince-home-motion .what-card-head h3 { text-align:left; font-size:21px; }
.prince-home-motion .pp-showcase { border-top:1px solid var(--ps-line); }
.prince-home-motion .pm-introduction { text-align:left; }
.prince-home-motion .pm-introduction .lead { margin-inline:0; }
.prince-home-motion .pm-introduction .value-triad { text-align:left; }
@media(max-width:720px) {
  .prince-site #pp-header { min-height:189px; }
}
@media(max-width:379px) {
  .prince-site #pp-header { min-height:251px; }
}
@media(max-width:640px) {
  .prince-mission .section, .prince-editorial.g-wallah main > section { padding-block:36px; }
  .prince-plans .adopt-page { padding-top:16px; padding-bottom:36px; }
  .prince-editorial :is(h1,.hero-content h1,.bots-hero h1,.adopt-hero h1) { font-size:32px; }
  .prince-editorial :is(h2,.section h2,.comparison-label) { font-size:26px; }
  .prince-editorial :is(.section,.sec) { padding-block:32px; }
  .prince-home-motion .what-grid { grid-template-columns:minmax(0,1fr); }
  .prince-home-motion .what-card-head { min-height:80px; }
}
/* Alive on every page (rule, 2026-09-22). Everything arrives once: sections and cards
   rise into place the first time they enter the view, then hold still; controls and cards answer the
   hand with a lift; the header draws its gold hairline once on load. Finite, opacity and transform
   only (no layout shift), and the reduced-motion block below collapses all of it to stillness. */
.prince-site.ps-motion .ps-arrive { opacity:0; transform:translateY(14px); transition:opacity .55s ease-out, transform .55s cubic-bezier(.2,.7,.2,1); }
.prince-site.ps-motion .ps-arrive.ps-arrived { opacity:1; transform:none; }
.prince-site :is(.card,.plan-card,.bot-card,.trial-card,.blackshield-card,.what-card) { transition:transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s ease, box-shadow .22s ease; }
.prince-site :is(.card,.plan-card,.bot-card,.trial-card,.blackshield-card):hover { transform:translateY(-3px); border-color:var(--ps-gold); box-shadow:0 14px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(217,184,102,.28); }
.prince-editorial :is(.btn,.cta,.trial-btn,.meet-bots-button) { transition:transform .18s cubic-bezier(.2,.7,.2,1), filter .18s ease, box-shadow .18s ease; }
.prince-editorial :is(.btn,.cta,.trial-btn,.meet-bots-button):hover { transform:translateY(-1px); filter:brightness(1.1); box-shadow:0 8px 20px rgba(0,0,0,.3); }
.prince-site #pp-header { position:relative; }
.prince-site #pp-header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--ps-gold), transparent); transform-origin:left; animation:ps-header-sweep 1.1s cubic-bezier(.2,.7,.2,1) .2s 1 both; }
@keyframes ps-header-sweep { 0%{transform:scaleX(0);opacity:0} 60%{opacity:1} 100%{transform:scaleX(1);opacity:.55} }

@media(prefers-reduced-motion:reduce) {
  .prince-site *, .prince-site *::before, .prince-site *::after { scroll-behavior:auto !important; }
  .ps-waypoint.ps-arriving > .ps-reading-signal::after { animation:none; opacity:.7; }
  /* Every page honors the preference the same way: decorative and transitional motion ends at once;
     the homepage's own choreography already settles itself and keeps its final states. */
  .prince-site:not(.prince-home-motion) *, .prince-site:not(.prince-home-motion) *::before, .prince-site:not(.prince-home-motion) *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;
  }
}
