/* ============================================================
   yapbt landing page
   Extracted from the marketing partials so the page carries no
   inline <style>, which is what lets a CSP drop 'unsafe-inline'.
   Self-contained: the .pbx-* namespace and its own tokens, kept
   deliberately separate from main.css so marketing restyling
   cannot disturb the app.
   ============================================================ */
:root{
  --pbx-ink:#0E2233;
  --pbx-ink-soft:#4A5D6B;
  --pbx-surface:#F6F8F7;
  --pbx-panel:#FFFFFF;
  --pbx-court:#19647E;
  --pbx-court-deep:#124B60;
  --pbx-kitchen:#59A96A;
  --pbx-kitchen-soft:#E4F2E7;
  --pbx-ball:#D6F227;
  --pbx-ball-deep:#B8D40E;
  --pbx-line:#E2E8E6;
  --pbx-line-strong:#C9D3D0;
  --pbx-btn-bg:#0E2233;
  --pbx-btn-fg:#FFFFFF;
  /* Text sitting on the always-white button inside the teal CTA panel. It
     cannot be --pbx-ink, which goes near-white in dark mode. */
  --pbx-on-light:#0E2233;
  --pbx-radius:14px;
  --pbx-shadow:0 1px 2px rgba(14,34,51,.06),0 8px 24px rgba(14,34,51,.07);
  --pbx-font-display:"Archivo Black",sans-serif;
  --pbx-font-body:"Archivo",sans-serif;
  --pbx-font-data:"Martian Mono",monospace;
}
/* Dark theme.
   The landing page keeps its own token set on purpose — marketing restyling
   must not be able to disturb the app — so it needs its own dark block rather
   than inheriting main.css's. Same contract: follow the OS by default, let a
   `data-theme` attribute on <html> win either way.

   --pbx-ball stays put. It is the one colour that reads as the brand, and it
   has enough luminance to sit on a dark panel unchanged. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --pbx-ink:#EAF1F4;
    --pbx-ink-soft:#A9BCC6;
    --pbx-surface:#0B1620;
    --pbx-panel:#111F2B;
    --pbx-court:#4FA8C4;
    --pbx-court-deep:#6FBED6;
    --pbx-kitchen:#5FBF83;
    --pbx-kitchen-soft:#172E22;
    --pbx-line:#21323F;
    --pbx-line-strong:#33485A;
    --pbx-btn-bg:#EAF1F4;
    --pbx-btn-fg:#0B1620;
    --pbx-shadow:0 1px 2px rgba(0,0,0,.30),0 8px 24px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --pbx-ink:#EAF1F4;
  --pbx-ink-soft:#A9BCC6;
  --pbx-surface:#0B1620;
  --pbx-panel:#111F2B;
  --pbx-court:#4FA8C4;
  --pbx-court-deep:#6FBED6;
  --pbx-kitchen:#5FBF83;
  --pbx-kitchen-soft:#172E22;
  --pbx-line:#21323F;
  --pbx-line-strong:#33485A;
  --pbx-btn-bg:#EAF1F4;
  --pbx-btn-fg:#0B1620;
  --pbx-shadow:0 1px 2px rgba(0,0,0,.30),0 8px 24px rgba(0,0,0,.45);
}

.pbx{font-family:var(--pbx-font-body);color:var(--pbx-ink);line-height:1.55;-webkit-font-smoothing:antialiased}
.pbx *,.pbx *::before,.pbx *::after{box-sizing:border-box}
.pbx-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.pbx-btn{
  border:0;border-radius:999px;padding:14px 26px;font-weight:700;font-size:15.5px;
  font-family:var(--pbx-font-body);cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.pbx-btn-primary{background:var(--pbx-btn-bg);color:var(--pbx-btn-fg)}
/* The ball hairline tucked under the lower edge, matching .btn-primary in
   the app so the marketing CTA and the in-app CTA behave the same. */
.pbx-btn-primary:hover{transform:translateY(-1px);box-shadow:0 3px 0 -1px var(--pbx-ball),0 8px 20px rgba(14,34,51,.25)}
.pbx-btn-ghost{background:var(--pbx-panel);color:var(--pbx-ink);border:1.5px solid var(--pbx-line-strong)}
.pbx-btn-ghost:hover{border-color:var(--pbx-ink)}
@media (prefers-reduced-motion:reduce){
  .pbx *,.pbx *::before,.pbx *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.pbx-hero{padding:72px 0 56px;background:var(--pbx-surface)}
.pbx-hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center}
.pbx-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--pbx-font-data);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pbx-court);
  border:1px solid var(--pbx-line-strong);border-radius:999px;padding:7px 14px;
  background:var(--pbx-panel);margin-bottom:22px;
}
.pbx-eyebrow .pbx-pip{width:8px;height:8px;border-radius:50%;background:var(--pbx-ball);box-shadow:0 0 0 3px rgba(214,242,39,.35)}
.pbx-hero h1{
  font-family:var(--pbx-font-display);
  font-size:clamp(38px,5vw,58px);
  line-height:1.04;letter-spacing:-.5px;margin:0 0 20px;
}
.pbx-hero h1 .pbx-hl{color:var(--pbx-court)}
.pbx-lede{font-size:18px;color:var(--pbx-ink-soft);max-width:52ch;margin:0 0 30px}
.pbx-btn-row{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:960px){.pbx-hero-grid{grid-template-columns:1fr;gap:40px}}
@media (max-width:600px){.pbx-hero{padding:48px 0 40px}}

.pbx-court-wrap{position:relative;padding:0}
.pbx-dots-bg{
  position:absolute;inset:0;border-radius:24px;
  background-image:radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--pbx-court) 14%, transparent) 2px, transparent 2.5px);
  background-size:22px 22px;
}
.pbx-court{
  position:relative;aspect-ratio:44/20;width:100%;
  background:var(--pbx-court);border-radius:18px;
  box-shadow:var(--pbx-shadow),inset 0 0 0 3px rgba(255,255,255,.9);
  overflow:hidden;transform:rotate(-2deg);
}
.pbx-court::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;
  background:rgba(255,255,255,.95);transform:translateX(-50%);
}
.pbx-kitchen{position:absolute;top:0;bottom:0;width:15.9%;background:var(--pbx-kitchen)}
.pbx-kitchen.pbx-left{right:50%}
.pbx-kitchen.pbx-right{left:50%}
.pbx-kitchen::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:#fff}
.pbx-kitchen.pbx-left::after{left:0}
.pbx-kitchen.pbx-right::after{right:0}
.pbx-svc-line{position:absolute;height:3px;background:rgba(255,255,255,.95);top:50%;transform:translateY(-50%)}
.pbx-svc-line.pbx-l{left:0;right:65.9%}
.pbx-svc-line.pbx-r{left:65.9%;right:0}
.pbx-ball-pos{
  position:absolute;width:22px;height:22px;
  top:30%;left:22%;
  transform-origin:center;
  animation:pbx-rally 16.5s ease-in-out infinite, pbx-bounce 16.5s ease-in-out infinite;
}
.pbx-ball-dot{
  display:block;width:100%;height:100%;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.3));
  animation:pbx-spin 1.1s linear infinite;
}
@keyframes pbx-spin{to{transform:rotate(360deg)}}
.pbx-roll{animation:pbx-roll 2.6s linear infinite}
@keyframes pbx-roll{to{transform:translateX(-96px)}}
/* constant velocity per shot, hard reversal at each strike */
@keyframes pbx-rally{
  0%{top:30%;left:22%;animation-timing-function:linear}
  8.3333%{top:62%;left:90%;animation-timing-function:linear}
  16.6667%{top:70%;left:40%;animation-timing-function:linear}
  25%{top:25%;left:62%;animation-timing-function:linear}
  33.3333%{top:60%;left:10%;animation-timing-function:linear}
  41.6667%{top:20%;left:78%;animation-timing-function:linear}
  50%{top:35%;left:34%;animation-timing-function:linear}
  58.3333%{top:72%;left:94%;animation-timing-function:linear}
  66.6667%{top:55%;left:6%;animation-timing-function:linear}
  75%{top:30%;left:68%;animation-timing-function:linear}
  83.3333%{top:68%;left:44%;animation-timing-function:linear}
  91.6667%{top:45%;left:84%;animation-timing-function:linear}
  100%{top:30%;left:22%}
}
/* bounce (top-down): scale tracks height — strike .90, apex 1.0 @38%, contact .82 @72%, ~40% rebound .89 @86% */
@keyframes pbx-bounce{
  0%{transform:scale(.90);animation-timing-function:ease-out}
  3.1667%{transform:scale(1);animation-timing-function:ease-in}
  6%{transform:scale(.82);animation-timing-function:ease-out}
  7.1667%{transform:scale(.89);animation-timing-function:ease-in}
  8.3333%{transform:scale(.90);animation-timing-function:ease-out}
  11.5%{transform:scale(1);animation-timing-function:ease-in}
  14.3333%{transform:scale(.82);animation-timing-function:ease-out}
  15.5%{transform:scale(.89);animation-timing-function:ease-in}
  16.6667%{transform:scale(.90);animation-timing-function:ease-out}
  19.8333%{transform:scale(1);animation-timing-function:ease-in}
  22.6667%{transform:scale(.82);animation-timing-function:ease-out}
  23.8333%{transform:scale(.89);animation-timing-function:ease-in}
  25%{transform:scale(.90);animation-timing-function:ease-out}
  28.1667%{transform:scale(1);animation-timing-function:ease-in}
  31%{transform:scale(.82);animation-timing-function:ease-out}
  32.1667%{transform:scale(.89);animation-timing-function:ease-in}
  33.3333%{transform:scale(.90);animation-timing-function:ease-out}
  36.5%{transform:scale(1);animation-timing-function:ease-in}
  39.3333%{transform:scale(.82);animation-timing-function:ease-out}
  40.5%{transform:scale(.89);animation-timing-function:ease-in}
  41.6667%{transform:scale(.90);animation-timing-function:ease-out}
  44.8333%{transform:scale(1);animation-timing-function:ease-in}
  47.6667%{transform:scale(.82);animation-timing-function:ease-out}
  48.8333%{transform:scale(.89);animation-timing-function:ease-in}
  50%{transform:scale(.90);animation-timing-function:ease-out}
  53.1667%{transform:scale(1);animation-timing-function:ease-in}
  56%{transform:scale(.82);animation-timing-function:ease-out}
  57.1667%{transform:scale(.89);animation-timing-function:ease-in}
  58.3333%{transform:scale(.90);animation-timing-function:ease-out}
  61.5%{transform:scale(1);animation-timing-function:ease-in}
  64.3333%{transform:scale(.82);animation-timing-function:ease-out}
  65.5%{transform:scale(.89);animation-timing-function:ease-in}
  66.6667%{transform:scale(.90);animation-timing-function:ease-out}
  69.8333%{transform:scale(1);animation-timing-function:ease-in}
  72.6667%{transform:scale(.82);animation-timing-function:ease-out}
  73.8333%{transform:scale(.89);animation-timing-function:ease-in}
  75%{transform:scale(.90);animation-timing-function:ease-out}
  78.1667%{transform:scale(1);animation-timing-function:ease-in}
  81%{transform:scale(.82);animation-timing-function:ease-out}
  82.1667%{transform:scale(.89);animation-timing-function:ease-in}
  83.3333%{transform:scale(.90);animation-timing-function:ease-out}
  86.5%{transform:scale(1);animation-timing-function:ease-in}
  89.3333%{transform:scale(.82);animation-timing-function:ease-out}
  90.5%{transform:scale(.89);animation-timing-function:ease-in}
  91.6667%{transform:scale(.90);animation-timing-function:ease-out}
  94.8333%{transform:scale(1);animation-timing-function:ease-in}
  97.6667%{transform:scale(.82);animation-timing-function:ease-out}
  98.8333%{transform:scale(.89);animation-timing-function:ease-in}
  100%{transform:scale(.90)}
}
.pbx-court-caption{
  position:relative;margin-top:16px;text-align:center;
  font-family:var(--pbx-font-data);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pbx-ink-soft);
}

.pbx-features{padding:56px 0 72px;background:var(--pbx-surface)}
.pbx-features h2{
  font-family:var(--pbx-font-display);font-size:clamp(26px,3vw,34px);
  letter-spacing:-.3px;margin:0 0 8px;
}
.pbx-section-sub{color:var(--pbx-ink-soft);margin:0 0 34px;max-width:60ch}
.pbx-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pbx-feat{
  background:var(--pbx-panel);border:1px solid var(--pbx-line);border-radius:var(--pbx-radius);
  padding:26px;transition:transform .15s,box-shadow .15s;
}
.pbx-feat:hover{transform:translateY(-3px);box-shadow:var(--pbx-shadow)}
.pbx-feat-icon{
  width:42px;height:42px;border-radius:12px;margin-bottom:16px;
  display:grid;place-items:center;font-size:20px;
  background:var(--pbx-kitchen-soft);color:var(--pbx-kitchen);
}
.pbx-feat:nth-child(2) .pbx-feat-icon{background:#E3F0F5;color:var(--pbx-court)}
.pbx-feat:nth-child(3) .pbx-feat-icon{background:#F7FADB;color:var(--pbx-ball-deep)}
.pbx-feat:nth-child(5) .pbx-feat-icon{background:#E3F0F5;color:var(--pbx-court)}
.pbx-feat h3{font-size:17px;margin:0 0 6px}
.pbx-feat p{font-size:14.5px;color:var(--pbx-ink-soft);margin:0}
@media (max-width:960px){.pbx-feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pbx-feat-grid{grid-template-columns:1fr}}

.pbx-cta-section{padding:0 0 80px;background:var(--pbx-surface)}
.pbx-cta{
  background:var(--pbx-court);border-radius:22px;color:#fff;
  padding:52px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;
  position:relative;overflow:hidden;
}
.pbx-cta .pbx-cta-ball{
  position:absolute;right:-60px;top:-60px;width:260px;height:260px;
  opacity:.9;pointer-events:none;
}
.pbx-cta h2{font-family:var(--pbx-font-display);font-size:clamp(24px,2.6vw,32px);margin:0 0 8px}
.pbx-cta p{opacity:.85;max-width:46ch;margin:0}
.pbx-cta .pbx-btn{background:#fff;color:var(--pbx-on-light);position:relative;z-index:1;text-decoration:none;display:inline-block}
@media (max-width:960px){.pbx-cta{flex-direction:column;align-items:flex-start}}

/* ── Sign-in affordance ──────────────────────────────────────
   The landing page has no app nav, but a returning visitor still
   needs a way in that isn't the signup CTA. */
.pbx-page { margin: 0; background: var(--pbx-surface); }

.pbx-signin {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 10;
}
.pbx-signin a {
  font-family: var(--pbx-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--pbx-ink);
  text-decoration: none;
  background: var(--pbx-panel);
  border: 1.5px solid var(--pbx-line-strong);
  border-radius: 999px;
  padding: 9px 20px;
  display: inline-block;
  transition: border-color .12s;
}
.pbx-signin a:hover { border-color: var(--pbx-ink); }

@media (max-width: 600px) {
  .pbx-signin { top: 12px; right: 12px; }
  .pbx-signin a { padding: 7px 16px; font-size: 13px; }
}

/* ─── Footer ───────────────────────────────────────────────────────
   Mirrors the app footer in main.css, in this page's own visual language.
   templates/landing.html does not extend base.html, so it carries its own. */

.pbx-footer {
  border-top: 1px solid rgba(14, 34, 51, .12);
  padding: 28px 0;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(14, 34, 51, .62);
}

.pbx-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.pbx-footer-links {
  display: flex;
  gap: 20px;
}

.pbx-footer-links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.pbx-footer-links a:hover,
.pbx-footer-links a:focus-visible {
  color: #0e2233;
  border-bottom-color: currentColor;
}

@media (max-width: 640px) {
  .pbx-footer-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}
