/* Payama home page.
 *
 * Deliberately standalone. The rest of the site runs on theme.css, which
 * switches between light and dark; the marketing page is a fixed light scheme
 * and shares nothing with it but the fonts. Keeping its tokens local means a
 * theme.css re-export can never move the homepage underneath us.
 *
 * Fonts come from /fonts.css, which self-hosts Archivo and Coolvetica. There
 * is no CDN call anywhere on this page.
 */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  --sky:#79abd9;            /* hero card fill, shifts on scroll */
  --ground:#e4ecf7;         /* page behind the hero card */
  --ink:#101317;
  --body:#49525d;
  --muted:#5f6874;
  --kicker:#4a83b8;
  --grid:rgba(74,131,184,.13);
  --font-body:"Archivo",system-ui,sans-serif;
  --font-display:"Coolvetica","Archivo",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.68,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;interpolate-size:allow-keywords}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body)}
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0;height:0}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--kicker)}
h1,h2,h3{margin:0}
p{margin:0}
::selection{background:var(--sky);color:#fff}

/* The signed-in / signed-out nav links carry `hidden`, and several of them are
   also .hero-cta, which sets display:flex. Same specificity as the UA's
   [hidden] rule and declared later, so it wins and the hidden link shows
   anyway. Restate it as a win-everything rule. */
[hidden]{display:none!important}

/* Focus stays visible. DESIGN.md section 5: "Don't remove it." */
:focus-visible{outline:2px solid var(--kicker);outline-offset:2px}

/* ── Motion ─────────────────────────────────────────────────────────── */
@keyframes d-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes d-pop{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes d-rise{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
@keyframes d-reveal{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:none}}
@keyframes d-draw{to{stroke-dashoffset:0}}
@keyframes d-bob{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-11px) rotate(var(--tilt))}}
@keyframes d-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-22px)}}
@keyframes d-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes d-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes d-dot{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-5px);opacity:1}}
@keyframes d-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Page shell ─────────────────────────────────────────────────────── */
.page{font-size:16px;overflow-x:clip}
.ground,.ground-grid{position:fixed;inset:0;z-index:0}
.ground{background-color:var(--ground)}
.ground-grid{pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:54px 54px}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero-section{position:relative;z-index:1;min-height:190vh}
.hero-stage{position:sticky;top:0;height:100vh;padding-top:84px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end}
.hero-card{position:absolute;inset:0;overflow:hidden;background-color:var(--sky);
  transition:left .18s linear,right .18s linear,bottom .18s linear,border-radius .18s linear,background-color 1.1s ease}
.hero-dots{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 5px,transparent 6px);
  background-size:44px 44px;background-position:11px 11px}
.hero-shapes{position:absolute;inset:0;pointer-events:none}
.hero-shapes span{position:absolute;background:rgba(255,255,255,.4)}

/* header */
.hero-header{position:absolute;top:0;left:0;right:0;z-index:10;width:100%;height:76px;
  padding:0 62px;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand:hover{color:#fff}
.brand img{width:48px;height:48px;display:block;transition:transform .34s cubic-bezier(.34,1.6,.64,1)}
.brand:hover img{transform:rotate(-9deg) scale(1.09)}
.brand span{font-family:var(--font-display);font-size:26px;color:#fff}
.hero-nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.hero-nav a{font-size:15px;color:rgba(255,255,255,.9);white-space:nowrap}
.hero-nav a:hover{color:#fff}
.hero-cta{display:flex;align-items:center;height:44px;padding:0 21px;border-radius:14px;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(8px);color:#fff;font-weight:600;
  transition:background .18s,transform .16s}
.hero-cta:hover{background:rgba(255,255,255,.34);color:#fff;transform:translateY(-2px)}
.hero-cta:active{transform:none}

/* floating game cards */
.hero-cards{position:absolute;inset:0;z-index:2;transition:opacity .5s ease}
.game{position:absolute;filter:drop-shadow(0 22px 30px rgba(9,28,48,.42));perspective:620px;
  animation:d-rise .7s var(--ease) both,d-bob 8.4s ease-in-out infinite}
.game:nth-child(1){--tilt:-6deg;left:7%;top:17%;width:158px;height:198px;animation-delay:.1s,.1s}
.game:nth-child(2){--tilt:5deg;left:11%;bottom:13%;width:138px;height:173px;animation-delay:.2s,.2s;animation-duration:.7s,9.2s}
.game:nth-child(3){--tilt:5deg;right:7%;top:14%;width:158px;height:198px;animation-delay:.16s,.16s;animation-duration:.7s,8.8s}
.game:nth-child(4){--tilt:-5deg;right:11%;bottom:15%;width:138px;height:173px;animation-delay:.26s,.26s;animation-duration:.7s,9.6s}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s var(--ease)}
.face{position:absolute;inset:0;padding:3px;border-radius:22px;
  background:linear-gradient(148deg,#fbfdff 0%,#cfdeed 22%,#93a9c0 48%,#eaf1f8 70%,#a8bccf 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -3px 7px rgba(96,120,145,.35);
  transition:transform .62s var(--ease),opacity .5s ease}
.face > span{display:block;width:100%;height:100%;border-radius:19px;overflow:hidden;
  background-size:cover;background-position:center;
  box-shadow:inset 0 9px 16px -10px rgba(255,255,255,.75),inset 0 -8px 14px -10px rgba(70,96,124,.4)}
.metal{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:22px;mix-blend-mode:screen;
  background:linear-gradient(128deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 26%,
    rgba(255,255,255,0) 46%,rgba(255,255,255,.1) 68%,rgba(255,255,255,.42) 100%)}
.sheen{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:22px;opacity:0;
  transition:opacity .25s ease;
  background:radial-gradient(60% 60% at var(--mx,50%) var(--my,50%),rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.34) 32%,rgba(255,255,255,0) 68%)}

/* copy + chat card */
/* The stage is justify-end, so this block sits flush against the bottom of the
   viewport -- which is exactly where .cue is pinned. The bottom padding is the
   cue's own footprint (37px tall, 26px up from the edge) plus room to breathe,
   so the chat card stops above it instead of printing over it. Once you start
   scrolling the cue fades and .copy-clip collapses, which gives the card far
   more room back than this reserves. */
.hero-copy{position:relative;z-index:5;width:100%;max-width:1120px;margin:0 auto;
  padding:6px 40px 84px;text-align:center;pointer-events:none;transition:opacity .5s ease}
.copy-clip{overflow:hidden;max-height:34vh;transition:height .55s var(--ease),opacity .4s}
.hero-copy h1{margin:0 auto;max-width:16ch;font-family:var(--font-display);font-weight:400;
  line-height:.95;color:#fff;transition:font-size .5s var(--ease);animation:d-in .7s var(--ease) both}
.hero-copy h1 span{position:relative;display:inline-block}
.hero-copy h1 svg{position:absolute;left:-1%;bottom:-10px;width:102%;height:16px;overflow:visible}
.hero-copy h1 path{stroke:#fff;stroke-width:5;stroke-linecap:round;
  stroke-dasharray:320;stroke-dashoffset:320;animation:d-draw 1s ease .8s forwards}
.hero-sub{margin:12px auto 0;max-width:44ch;line-height:1.5;color:rgba(255,255,255,.92);
  text-wrap:pretty;transition:font-size .5s var(--ease);animation:d-in .7s var(--ease) .1s both}

.chat-card{max-width:620px;margin:2vh auto 0;padding:4vh 46px 3.4vh;overflow:hidden;
  pointer-events:auto;border-radius:30px;background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(14px);
  box-shadow:0 40px 76px -34px rgba(9,28,48,.5);text-align:left;
  animation:d-pop .8s var(--ease) .2s both}
.chat-inner{overflow:hidden;transition:height .5s var(--ease)}
.bubble-row{display:flex;justify-content:flex-end}
.bubble{max-width:86%;padding:14px 18px;border-radius:20px 20px 6px 20px;
  background:var(--sky);color:#12212f;font-size:16px;line-height:1.45}
.reply{display:flex;gap:12px;margin-top:2vh}
.reply img{width:22px;height:22px;flex:none;margin-top:2px}
.reply-body{flex:1;min-width:0}
.reply-lead{font-size:16px;line-height:1.5;color:var(--ink)}
.reply-lead b{color:var(--kicker);font-weight:600}
.typing{display:inline-flex;gap:5px;align-items:center;height:22px}
.typing span{width:5px;height:5px;border-radius:999px;background:#9fb3c6;
  animation:d-dot 1.1s ease-in-out infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
.steps{margin-top:1.2vh;display:flex;flex-direction:column}
/* The vertical padding is set from home.js, not here. These rows collapse to
   height:0 before their step has run, and under border-box a zero height still
   renders as tall as its own padding -- six waiting rows added ~96px of dead
   space inside the card, which then pushed it down over the scroll cue. */
.step{display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:10px;
  background:rgba(240,245,250,.9);font-size:15px;color:var(--ink);overflow:hidden;
  transition:height .45s var(--ease),opacity .35s ease,margin .45s var(--ease),
    padding .45s var(--ease)}
.step + .step{margin-top:.5vh}
.step em{margin-left:auto;font-family:ui-monospace,monospace;font-style:normal;
  font-size:12px;color:var(--muted)}
.bar{height:5px;margin-top:1vh;border-radius:999px;background:#dde6ef;overflow:hidden;
  transition:height .4s var(--ease),margin .4s var(--ease)}
.bar > span{display:block;height:100%;border-radius:999px;background:var(--sky);
  transition:width .5s var(--ease)}
.done{overflow:hidden;font-size:16px;line-height:1.5;color:var(--ink);
  transition:height .5s var(--ease),margin .5s var(--ease),opacity .4s ease}
.prompt-row{display:flex;align-items:center;gap:14px;margin-top:2vh;padding-top:2vh;
  border-top:1px solid #e3ebf3}
.prompt-field{flex:1;min-width:0;position:relative}
.ghost{position:absolute;inset:0;z-index:1;pointer-events:none;font-size:16px;line-height:1.5;
  color:#8a949f;white-space:nowrap;overflow:hidden}
.caret{display:inline-block;width:2px;height:17px;margin-left:2px;vertical-align:-3px;
  background:var(--sky);animation:d-blink 1s steps(1) infinite}
.prompt-field textarea{position:relative;z-index:2;width:100%;resize:none;border:0;outline:none;
  background:transparent;color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5}
.build{display:flex;align-items:center;gap:12px;height:52px;padding:0 10px 0 24px;border:0;
  border-radius:16px;background:#12181f;color:#fff;font-family:var(--font-body);font-weight:600;
  font-size:16px;white-space:nowrap;cursor:pointer;transition:background .18s,transform .16s}
.build:hover{background:#1d262f;transform:translateY(-2px)}
.build:active{transform:none}
.build i{width:32px;height:32px;border-radius:11px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center}

.cue{position:absolute;left:0;right:0;bottom:26px;z-index:5;display:flex;flex-direction:column;
  align-items:center;gap:10px;transition:opacity .4s ease;animation:d-in .6s ease .5s both}
.cue-text{display:flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-size:16px;letter-spacing:.08em;color:rgba(255,255,255,.92)}
.cue-text svg{animation:d-nudge 1.8s ease-in-out infinite}
.cue-rail{width:210px;height:8px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden}
.cue-rail > span{display:block;height:100%;border-radius:999px;background:#fff;
  transition:width .5s var(--ease)}

/* ── How it works ───────────────────────────────────────────────────── */
.sheet{position:relative;z-index:6;background:transparent}
.sheet-inner{max-width:1120px;margin:0 auto;padding:52px 40px 0}
.kicker{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--kicker)}
.sheet h2{margin:14px 0 0;max-width:16ch;font-family:var(--font-display);font-weight:400;
  font-size:62px;line-height:.98}
.how{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.how-step{animation:d-reveal .8s var(--ease) both;animation-timeline:view();
  animation-range:entry 6% entry 56%}
.how-num{font-family:ui-monospace,monospace;font-size:13px;color:var(--kicker)}
.how-step h3{margin:10px 0 8px;font-size:20px;font-weight:600}
.how-step p{font-size:15px;line-height:1.55;color:var(--body);text-wrap:pretty}

.rail-wrap{margin-top:52px;padding:30px 0 34px;overflow:hidden}
.rail{display:flex;width:max-content;animation:d-marquee 52s linear infinite;will-change:transform}
.rail-card{flex:none;width:168px;height:210px;margin-right:18px;perspective:620px;padding:3px;
  border-radius:22px;transform:rotate(var(--tilt));
  background:linear-gradient(148deg,#fbfdff 0%,#cfdeed 22%,#93a9c0 48%,#eaf1f8 70%,#a8bccf 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -3px 7px rgba(96,120,145,.35),
    0 18px 30px -20px rgba(9,28,48,.5)}
.rail-card .tilt{position:relative;display:block;width:100%;height:100%;border-radius:19px;
  overflow:hidden;background:#eef4fa}
.rail-card .tilt > span{display:block;width:100%;height:100%;background-size:cover;background-position:center}
.rail-card .metal,.rail-card .sheen{border-radius:19px}

/* ── Closing + footer ───────────────────────────────────────────────── */
.close{max-width:1120px;margin:0 auto;padding:84px 40px 96px}
.close-card{position:relative;overflow:hidden;border-radius:34px;background:var(--sky);
  padding:74px 46px 80px;text-align:center;box-shadow:0 34px 62px -34px rgba(9,28,48,.5)}
.close-card h2{position:relative;margin:0 auto;max-width:20ch;font-family:var(--font-display);
  font-weight:400;font-size:62px;line-height:.98;color:#fff}
.close-card p{position:relative;margin:20px auto 0;max-width:46ch;font-size:17px;
  line-height:1.55;color:rgba(255,255,255,.9)}
.close-cta{position:relative;display:inline-flex;align-items:center;gap:14px;height:58px;
  margin-top:34px;padding:0 13px 0 28px;border-radius:18px;background:#12181f;color:#fff;
  font-weight:600;font-size:17px;transition:background .18s,transform .16s}
.close-cta:hover{background:#1d262f;color:#fff;transform:translateY(-3px)}
.close-cta span{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center}

footer{border-top:1px solid rgba(74,131,184,.2)}
.foot{max-width:1120px;margin:0 auto;padding:40px;display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot h4{margin:0 0 14px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot a{font-size:14px;color:var(--body)}
.foot a:hover{color:var(--ink)}
.foot-bottom{max-width:1120px;margin:0 auto;padding:20px 40px 40px;display:flex;gap:20px;
  border-top:1px solid rgba(74,131,184,.2);font-size:12.5px;color:var(--muted)}

/* ── Narrow screens ─────────────────────────────────────────────────── */

/* The design is built for a wide viewport: the four game cards are pinned to
 * the corners of a full-height stage and the chat card needs room to grow six
 * rows tall without overflowing. Below ~1024px there is no room for either, so
 * the scroll-scrubbed hero degrades to a static one — headline, chat card,
 * prompt — and the corner cards drop out rather than colliding with the copy.
 *
 * home.js reads the same 1024px breakpoint and skips the scroll animation
 * entirely there, so nothing fights over inline styles. */
@media (max-width:1024px){
  .hero-section{min-height:0}
  /* relative, not static: .hero-card and .hero-header are absolutely
     positioned, and the stage has to stay their containing block. Letting
     them fall through to .hero-section (or worse, to the viewport) paints the
     blue card behind the whole document, footer included. */
  .hero-stage{position:relative;height:auto;min-height:100vh;padding-top:96px;
    justify-content:center}
  .hero-cards,.cue{display:none}

  .hero-header{height:66px;padding:0 22px}
  .brand img{width:38px;height:38px}
  .brand span{font-size:22px}
  .hero-nav{gap:16px}
  .hero-nav a:not(.hero-cta){display:none}

  .hero-copy{padding:0 20px 32px}
  .copy-clip{max-height:none}
  .hero-copy h1{font-size:clamp(34px,7.4vw,58px)!important;max-width:14ch}
  /* The drawn underline is sized to a one-line headline. Once it wraps, the
     span's box is the full block and the stroke runs off the last word. */
  .hero-copy h1 svg{display:none}
  .hero-sub{font-size:clamp(15px,2.6vw,18px)!important;max-width:38ch}
  .chat-card{margin-top:26px;padding:24px 22px 22px;border-radius:24px}
  .reply{margin-top:16px}
  .steps{margin-top:12px}
  .step + .step{margin-top:6px}
  .prompt-row{flex-direction:column;align-items:stretch;gap:12px;margin-top:18px;padding-top:18px}
  .build{justify-content:center}

  .sheet-inner{padding:44px 20px 0}
  .sheet h2{font-size:clamp(32px,7vw,50px)}
  .how{margin-top:34px;grid-template-columns:repeat(2,1fr);gap:22px}

  .close{padding:56px 20px 64px}
  .close-card{padding:48px 24px 52px;border-radius:26px}
  .close-card h2{font-size:clamp(30px,6.4vw,46px)}

  .foot{padding:32px 20px;grid-template-columns:1fr 1fr;gap:28px}
  .foot-bottom{flex-direction:column;gap:8px;padding:16px 20px 32px}
}

@media (max-width:560px){
  .how{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .rail-card{width:132px;height:165px}
}