/* GENERATED FILE. Do not edit by hand.
/* Source: packages/ui/tokens/tokens.json
/* Rebuild: node scripts/build-design-tokens.mjs */

:root {
  --pa-ink: #0B0F19;
  --pa-slate950: #070A12;
  --pa-orange: #F97316;
  --pa-orange-deep: #EA580C;
  --pa-green: #22C55E;
  --pa-green-deep: #16A34A;
  --pa-cream: #F8FAFC;
  --pa-muted: #94A3B8;
  --pa-red: #EF4444;
  --pa-amber: #F59E0B;

  --pa-surface-raised: rgba(255,255,255,0.02);
  --pa-surface-raised-hover: rgba(255,255,255,0.05);
  --pa-border: rgba(255,255,255,0.10);
  --pa-border-soft: rgba(255,255,255,0.05);
  --pa-border-strong: rgba(255,255,255,0.15);

  --pa-text: #F8FAFC;
  --pa-text-secondary: rgba(255,255,255,0.75);
  --pa-text-tertiary: rgba(255,255,255,0.60);
  --pa-text-quiet: rgba(255,255,255,0.40);

  --pa-font-display: 'Barlow Condensed', system-ui, sans-serif;
  --pa-font-body: 'Barlow', system-ui, sans-serif;

  --pa-radius-control: 6px;
  --pa-radius-panel: 8px;
  --pa-radius-card: 16px;

  --pa-shadow-glow: 0 0 0 1px rgba(249,115,22,.45), 0 20px 60px -12px rgba(249,115,22,.5);
  --pa-shadow-glow-green: 0 0 0 1px rgba(34,197,94,.45), 0 20px 60px -12px rgba(34,197,94,.5);
}

/* ---------------------------------------------------------------- base --- */

/* A minimal reset. The website inherits all of this from Tailwind's preflight,
   but the stylesheet has to stand on its own wherever the bundle is consumed:
   without border-box every padded full width element overflows its container. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--pa-slate950); }

body {
  font-family: var(--pa-font-body);
  background: transparent;
  color: var(--pa-cream);
}

:focus-visible {
  outline: 2px solid #F97316;
  outline-offset: 3px;
  border-radius: 8px;
}

/* ------------------------------------------------------------ type --- */

.font-display,
.pa-font-display { font-family: var(--pa-font-display); letter-spacing: .01em; }

/* .h-display is the legacy name still used across the pages. .pa-display is
   the name new markup should use; both resolve to the same rule. */
.h-display,
.pa-display {
  font-family: var(--pa-font-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.pa-eyebrow {
  font-family: var(--pa-font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pa-orange);
}

.pa-eyebrow--tight {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}

.pa-eyebrow--quiet { color: var(--pa-text-quiet); }
.pa-eyebrow--green { color: var(--pa-green); }

/* -------------------------------------------------------- backdrop --- */

.courtyard,
.pa-courtyard { background-image: radial-gradient(1200px 600px at 70% -10%, rgba(249,115,22,.22), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(34,197,94,.16), transparent 60%); }

.pa-courtyard--soft { background-image: radial-gradient(1200px 600px at 70% -10%, rgba(249,115,22,.18), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(34,197,94,.12), transparent 60%); }

.noise::after,
.pa-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>");
}

/* ------------------------------------------------------------ photo --- */
/* Every photo on the site sits in a .pa-photo frame. The image is graded before
   export (about a stop darker, slightly warm); the frame adds the veil that
   fades it into the page. Pick one veil per use, never stack a page-local one. */

.pa-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--pa-slate950);
  border-radius: var(--pa-radius-card);
}
.pa-photo > img,
.pa-photo > picture,
.pa-photo > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pa-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11,15,25,.18) 0%, rgba(11,15,25,.42) 55%, rgba(11,15,25,.92) 100%);
}
.pa-photo--hero::after { background: linear-gradient(90deg, rgba(11,15,25,.92) 0%, rgba(11,15,25,.62) 45%, rgba(11,15,25,.28) 100%), linear-gradient(180deg, rgba(11,15,25,.35) 0%, rgba(11,15,25,0) 35%, rgba(11,15,25,.55) 75%, #0B0F19 100%); }
.pa-photo--band::after { background: linear-gradient(180deg, #0B0F19 0%, rgba(11,15,25,.55) 30%, rgba(11,15,25,.55) 70%, #0B0F19 100%); }
.pa-photo--quiet::after { background: linear-gradient(180deg, rgba(11,15,25,.55) 0%, rgba(11,15,25,.55) 100%); }
.pa-photo--bare::after { background: none; }

/* Full bleed: the photo becomes the section's backdrop and everything else in
   the section paints over it. The parent gets its own stacking context so the
   negative z-index cannot drop the photo behind the page background, and the
   siblings keep whatever positioning they already have. */
.pa-photo--bleed {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0;
}
:has(> .pa-photo--bleed) { position: relative; isolation: isolate; }

/* Anything placed over a framed photo (a caption, a badge). */
.pa-photo__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px;
}

/* A portrait frame, for people. */
.pa-photo--portrait { aspect-ratio: 4 / 5; }
.pa-photo--portrait::after { background: linear-gradient(180deg, rgba(11,15,25,0) 55%, rgba(11,15,25,.75) 100%); }

/* --------------------------------------------------------- controls --- */

.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--pa-radius-control);
  font-family: var(--pa-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .025em;
  text-transform: uppercase;
  /* Buttons render as anchors on the marketing pages and as <button> in app
     chrome. The site gets this from Tailwind's preflight, but the stylesheet has
     to stand on its own wherever the bundle is consumed. The variant rules below
     re-set background and border where they need them. */
  text-decoration: none;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pa-btn--sm {
  height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
}

.pa-btn--lg {
  height: 48px;
  padding: 0 24px;
  font-size: 1.125rem;
}

.pa-btn--primary {
  background: var(--pa-orange);
  color: var(--pa-ink);
}
.pa-btn--primary:hover { background: var(--pa-orange-deep); }

/* The glow is opt in, not automatic: on the site it sits on hero calls to
   action, never on the header button. */
.pa-btn--glow { box-shadow: var(--pa-shadow-glow); }
.pa-btn--glow.pa-btn--solo { box-shadow: var(--pa-shadow-glow-green); }

/* Green never carries a call to action that competes with an orange one in the
   same view: this variant is for the solo route and confirmation screens. */
.pa-btn--solo { background: var(--pa-green); color: var(--pa-ink); }
.pa-btn--solo:hover { background: var(--pa-green-deep); }

.pa-btn--outline { border: 1px solid var(--pa-border-strong); color: var(--pa-cream); }
.pa-btn--outline:hover { border-color: rgba(255,255,255,.30); background: var(--pa-surface-raised-hover); }

/* The diagonal highlight that sweeps a primary button on hover. .btn-primary is
   the legacy name in the existing pages. */
.btn-primary,
.pa-btn--sheen { position: relative; overflow: hidden; isolation: isolate; }

.btn-primary::after,
.pa-btn--sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  transition: transform .55s ease;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
}

.btn-primary:hover::after,
.pa-btn--sheen:hover::after { transform: translateX(110%); }

.pa-field {
  height: 44px;
  padding: 0 12px;
  border-radius: var(--pa-radius-control);
  background: var(--pa-surface-raised-hover);
  border: 1px solid var(--pa-border);
  color: var(--pa-cream);
  outline: none;
}
.pa-field::placeholder { color: var(--pa-text-quiet); }
.pa-field:focus { border-color: var(--pa-orange); background: rgba(255,255,255,.10); }
/* A locked field has to look locked. Without this a disabled input is pixel
   identical to an editable one. */
.pa-field:disabled,
.pa-field[readonly] { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------ cards --- */

.pa-card {
  border-radius: var(--pa-radius-card);
  border: 1px solid var(--pa-border);
  background: var(--pa-surface-raised);
}

.pa-card--accent { border-color: rgba(249,115,22,.40); background: rgba(249,115,22,.05); }

.pa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--pa-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pa-badge--live { color: var(--pa-green); }
.pa-badge--soon { color: var(--pa-text-quiet); }

/* ----------------------------------------------------------- motion --- */

.lift,
.pa-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover,
.pa-lift:hover { transform: translateY(-4px); }

.reveal,
.pa-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in,
.pa-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .pa-reveal { opacity: 1; transform: none; transition: none; }
  .lift:hover,
  .pa-lift:hover { transform: none; }
}

/* ------------------------------------------------------------ legal --- */
/* Shared by privacy.html, terms.html and waiver.html, which each carried their
   own near-identical copy. Policy bodies are injected from policy_versions. */

.legal { color: rgba(248,250,252,0.85); line-height: 1.65; font-size: 1rem; }
.legal h1 {
  font-family: var(--pa-font-display);
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--pa-cream);
}
.legal h2 {
  font-family: var(--pa-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.4rem;
  margin-top: 2.25rem;
  margin-bottom: .6rem;
  color: var(--pa-cream);
}
.legal p, .legal li { margin: .65rem 0; }
.legal ol { padding-left: 1.5rem; }
.legal ol[type="a"] > li::marker { color: var(--pa-orange); font-weight: 600; }
.legal ol[type="i"] > li::marker { color: rgba(248,250,252,0.5); }
.legal a { color: var(--pa-orange); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: #FFA559; }
.legal strong { color: var(--pa-cream); }
.legal .lead { font-size: 1.1rem; color: rgba(248,250,252,0.75); margin-bottom: 1.5rem; }
.legal .meta {
  font-family: var(--pa-font-display);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .75rem;
  color: rgba(248,250,252,0.5);
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.legal .warning {
  background: rgba(249,115,22,.1);
  border: 1px solid rgba(249,115,22,.4);
  padding: 1rem;
  border-radius: var(--pa-radius-panel);
  margin: 1.25rem 0;
  color: #FFD2A8;
  font-weight: 600;
}