/* koifi.app/beta — the beta-tester landing + application form.
   Loaded AFTER css/site.css: the tokens (--bg, --gold, --serif …), the nav,
   buttons, eyebrow, grad-text, FAQ accordion and footer all come from there.
   Everything page-specific lives under `.beta` so nothing leaks to the home
   page, and the class names that site.css already owns (hero, counter …) are
   prefixed `b-` here. Mobile-first: one column on phones, two-column hero
   from 861 px. Only the companion moves above the fold. */

.beta{padding-top:74px}
.beta [hidden]{display:none!important}
.beta .wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.beta h2{font-size:clamp(1.9rem,4.4vw,2.75rem);line-height:1.1;text-wrap:balance}
.beta h3{font-size:1.45rem;line-height:1.15}
.beta section{padding-block:56px}
.beta .btn{min-height:48px}
.beta .btn:focus-visible,.beta input:focus-visible,.beta button:focus-visible,.beta a:focus-visible,.beta summary:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.nav .lang button{min-height:44px;min-width:44px}
.nav .btn-gold.b-navcta{display:inline-flex}
.b-mute{color:var(--muted)}

/* ── hero ── */
.b-hero{padding-block:28px 48px}
.b-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.b-hero-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.b-hero h1{font-size:clamp(2.5rem,6vw,4.1rem);line-height:1.02;text-wrap:balance}
.b-hero-sub{font-size:1.08rem;color:var(--muted);max-width:56ch;line-height:1.65}
.b-hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.b-how{font:500 .9rem var(--sans);color:var(--muted);border-bottom:1px solid var(--border-2);padding-block:6px}
.b-how:hover{color:var(--ink)}
.b-counter{display:inline-flex;align-items:baseline;gap:10px;font:500 .9rem var(--sans);color:var(--muted)}
.b-counter b{font-family:var(--serif);font-size:1.8rem;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}

.b-companion{position:relative;display:grid;place-items:center;min-height:380px}
.b-glow{position:absolute;width:min(72vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(201,152,126,.22),rgba(201,152,126,0) 68%)}
.b-companion-in{position:relative;display:flex;flex-direction:column;align-items:center}
.mstage{position:relative;aspect-ratio:1}
.mstage{transition:opacity .28s ease}
.mstage canvas,.mstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mstage canvas{transition:opacity .25s} /* the SVG snaps in under a fading canvas — never a dim cross-fade */
.mstage canvas{opacity:0}
.mstage.live canvas{opacity:1}
.mstage.live img{opacity:0;transition:opacity 0s .26s} /* the SVG stays until the canvas is fully in: no dim cross-fade */
.b-hero .mstage{width:min(70vw,360px)}
.b-bubble{position:relative;margin-top:-6px;max-width:340px;min-height:3.1em;background:var(--card);border:1px solid var(--border-2);border-radius:18px;padding:12px 18px;font:italic 500 1.12rem/1.35 var(--serif);color:var(--ink);text-align:center;transition:opacity .2s}
.b-bubble::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;background:var(--card);border-left:1px solid var(--border-2);border-top:1px solid var(--border-2);transform:translateX(-50%) rotate(45deg)}
.b-bubble.quiet{color:var(--muted)}

/* ── section heads, cards ── */
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:64ch}
.sec-head p{color:var(--muted);font-size:1.02rem;line-height:1.65}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card p{color:var(--muted);font-size:.94rem;line-height:1.6}
.card .ic{width:38px;height:38px;border-radius:10px;background:rgba(201,152,126,.14);display:grid;place-items:center;color:var(--gold-l)}
.card .ic svg{width:20px;height:20px;stroke-width:1.6}

/* ── growth path ── */
.path{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.stage-card{background:var(--bg-2);border:1px solid var(--border);border-radius:18px;padding:18px 16px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0;transition:border-color .3s}
.stage-card.on{border-color:var(--border-2)}
.stage-card .mstage{width:128px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.stage-card .st{font:600 .7rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.stage-card h3{font-size:1.35rem}
.stage-card p{color:var(--muted);font-size:.88rem;line-height:1.55}

/* ── 360° section: shared feature row ── */
.s360 ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.f360{display:grid;grid-template-columns:22px 1fr;column-gap:12px;row-gap:2px;align-items:start}
.f360>:first-child{grid-row:span 2;width:20px;height:20px;margin-top:2px} /* the <i> before Lucide swaps it, the <svg> after */
.f360 svg{stroke-width:1.6;color:var(--acc,var(--gold-l))}
.f360 .f-t,.f360 .f-p{grid-column:2}
.f360 .f-t{font:600 .95rem/1.3 var(--sans);color:var(--ink)}
.f360 .f-p{font-size:.84rem;line-height:1.45;color:var(--muted)}
.b-g1{--acc:#D8B098}.b-g2{--acc:#8CC3D6}.b-g3{--acc:#8FD1A6}.b-g4{--acc:#E8A9C0}

/* 360°: a hero card + four theme cards with gradient hairlines and a pointer glow */
.bento{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:14px}
.b-card{position:relative;border-radius:20px;padding:24px;border:1px solid transparent;overflow:hidden;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(140deg,rgba(216,176,152,.55),rgba(216,176,152,.06) 42%,rgba(216,176,152,.32)) border-box}
.b-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(201,152,126,.16),transparent 60%);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--acc,#C9987E) 16%,transparent),transparent 60%)}
.b-card:hover::before{opacity:1}
.b-card h3{display:flex;align-items:center;gap:12px;font:500 1.45rem/1.1 var(--serif);margin-bottom:18px}
.b-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--acc);background:rgba(201,152,126,.12);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.b-ic svg{width:20px;height:20px;stroke-width:1.7}
.b-hero360{grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
  background:radial-gradient(90% 60% at 50% 34%,rgba(201,152,126,.24),transparent 62%) padding-box,linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(140deg,rgba(216,176,152,.7),rgba(216,176,152,.08) 45%,rgba(216,176,152,.4)) border-box}
.b-koi{width:min(100%,320px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.b-hero-txt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px} /* above the card's hover glow */
.b-big{font:500 clamp(4.2rem,7vw,6rem)/.9 var(--serif);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.b-big-t{font:500 1.3rem/1.25 var(--serif);max-width:20ch}
.b-big-s{font-size:.9rem;color:var(--muted);max-width:30ch}

@media (max-width:980px){
  .bento{grid-template-columns:1fr 1fr}
  .b-hero360{grid-column:1/-1;grid-row:auto;flex-direction:row;gap:28px;text-align:left;padding-block:20px}
  .b-koi{width:min(42%,260px);flex:none}
  .b-hero-txt{align-items:flex-start}
}
@media (max-width:600px){
  .bento{grid-template-columns:1fr}
  .b-hero360{flex-direction:column;text-align:center;gap:4px}
  .b-koi{width:min(72%,240px)}
  .b-hero-txt{align-items:center}
}

/* ── five companions ── */
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.comp5{background:var(--bg-2);border:1px solid var(--border);border-radius:18px;padding:18px 14px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}
.comp5 .mstage{width:min(40vw,150px)}
.comp5 b{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin-top:4px}
.comp5 .cr{font:600 .7rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.comp5 p{color:var(--muted);font-size:.88rem;line-height:1.55}

/* ── how it works ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s;list-style:none}
.step{position:relative;padding:22px 20px 22px 64px;border:1px solid var(--border);border-radius:18px;background:var(--bg-2);min-width:0}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:20px;top:20px;width:30px;height:30px;border-radius:50%;border:1px solid var(--border-2);display:grid;place-items:center;font:600 .88rem var(--sans);color:var(--gold-l)}
.step h3{font-size:1.3rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:.94rem;line-height:1.6}

/* ── pond ── */
.pond-wrap{background:var(--bg-3);border:1px solid var(--border);border-radius:22px;overflow:hidden}
.pond-wrap svg{display:block;width:100%;height:auto}
.pond-cap{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:14px 18px;color:var(--muted);font-size:.88rem;border-top:1px solid var(--border)}
.pond-cap b{color:var(--ink);font-variant-numeric:tabular-nums}
.pond .pond-note{margin-top:14px;color:var(--muted);font-size:.94rem}
/* pond life (js/pond.js draws the extra elements only without reduced motion;
   the media query keeps the pads still too) */
@media (prefers-reduced-motion:no-preference){
  .pond-wrap svg .pad{transform-box:fill-box;transform-origin:center;animation:pbob 6.5s ease-in-out infinite;animation-delay:var(--bob,0s)}
  .pond-wrap svg .pond-egg{transform-box:fill-box;transform-origin:50% 90%;animation:prock 7s ease-in-out infinite}
  .pond-wrap svg .shimmer{opacity:0;animation:pshim 12s ease-in-out infinite;animation-delay:var(--sd,0s)}
  .pond-wrap svg .firefly{animation:pfly 9s ease-in-out infinite;animation-delay:var(--fd,0s)}
  .pond-wrap svg .dragonfly{animation:pdrag 22s linear infinite}
  .pond-wrap svg .df-wings{transform-box:fill-box;transform-origin:center;animation:pwing .45s ease-in-out infinite alternate}
  .pond-wrap svg.pond-paused *{animation-play-state:paused}
  @keyframes pbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
  @keyframes prock{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
  @keyframes pshim{0%,100%{opacity:0;transform:translateX(0)}40%{opacity:.28}60%{opacity:.2}80%{opacity:0;transform:translateX(var(--sx,20px))}}
  @keyframes pfly{0%,100%{opacity:.25;transform:translate(0,0)}35%{opacity:1;transform:translate(var(--fx,20px),var(--fy,-10px))}70%{opacity:.55;transform:translate(calc(var(--fx,20px)*-.6),calc(var(--fy,-10px)*.8))}}
  @keyframes pdrag{0%{transform:translate(-60px,232px) rotate(-4deg);opacity:0}4%{opacity:1}22%{transform:translate(220px,204px) rotate(3deg)}30%{transform:translate(300px,252px) rotate(-6deg)}46%{transform:translate(520px,216px) rotate(4deg)}58%{transform:translate(860px,196px) rotate(0);opacity:1}60%,100%{transform:translate(860px,196px);opacity:0}}
  @keyframes pwing{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
}

/* ── form ── */
.bform{display:flex;flex-direction:column;gap:22px;max-width:760px}
.bform fieldset{border:0;display:flex;flex-direction:column;gap:18px;min-width:0}
.bform fieldset[disabled]{opacity:.55}
.fld{display:flex;flex-direction:column;gap:8px;border:0;min-width:0}
.fld>legend,.fld>label.l{font:500 .9rem/1.45 var(--sans);color:var(--ink);padding:0;margin-bottom:8px}
.fld>label.l{margin-bottom:0}
.hint{font-size:.8rem;color:var(--faint);font-weight:400}
.bform input[type=email],.bform input[type=text]{width:100%;min-height:48px;background:var(--bg-2);border:1px solid var(--border-2);border-radius:12px;color:var(--ink);padding:12px 14px;font:400 16px var(--sans)}
.bform input[type=text].other{margin-top:8px;max-width:420px}
.bform input::placeholder{color:var(--faint)}
.bform input[aria-invalid=true]{border-color:var(--red)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 14px;border-radius:999px;border:1px solid var(--border-2);background:var(--bg-2);color:var(--ink);font:500 .88rem var(--sans);cursor:pointer;user-select:none;max-width:100%}
.opt input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--gold-d);margin:0;flex:none;display:grid;place-items:center;cursor:pointer}
.opt input[type=checkbox]{border-radius:4px}
.opt input:checked{background:var(--gold);border-color:var(--gold)}
.opt:has(input:checked){border-color:var(--gold);background:rgba(201,152,126,.12)}
.opt:has(input:focus-visible){outline:2px solid var(--gold-l);outline-offset:2px}
.opt span{overflow-wrap:anywhere}
.err{color:var(--red);font-size:.82rem}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;line-height:1.55;color:var(--muted);cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;border:1.5px solid var(--gold-d);display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:var(--gold);border-color:var(--gold)}
.consent input:checked::after{content:"";width:10px;height:6px;border-left:2px solid #1A1410;border-bottom:2px solid #1A1410;transform:translateY(-1px) rotate(-45deg)}
.consent a{color:var(--gold-l);text-decoration:underline}
.form-foot{display:flex;flex-direction:column;gap:14px}
.progress{display:flex;gap:6px;align-items:center;font:500 .76rem var(--sans);color:var(--muted)}
.progress i{display:block;width:34px;height:4px;border-radius:2px;background:var(--border-2)}
.progress i.on{background:var(--gold)}
.progress span{margin-left:6px}
.sendrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fail{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fail a{color:var(--gold-l);text-decoration:underline}

/* companions row (appears with step 2) */
.row-comp{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.comp{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.comp .mstage{width:100%;max-width:112px}
.comp b{font-family:var(--serif);font-size:1.1rem;font-weight:500}
.comp small{color:var(--faint);font-size:.74rem}
.row-hint{text-align:center;color:var(--muted);font-size:.88rem;margin-top:-6px}

/* thank-you */
#done{display:flex;flex-direction:column;gap:18px;max-width:760px}
.done-comp{display:flex;flex-direction:column;align-items:center;align-self:center;gap:4px}
.done-comp .mstage{width:min(52vw,220px)}
.pos{font-family:var(--serif);font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.05}
.pos b{color:var(--gold-l);font-weight:500;font-variant-numeric:tabular-nums}
.share{display:flex;flex-direction:column;gap:12px;border:1px solid var(--border);border-radius:18px;padding:18px;background:var(--bg-2)}
.share h3{font-size:1.4rem}
.share code{display:block;background:var(--bg-3);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:.88rem;color:var(--gold-l);user-select:all;overflow-wrap:anywhere}
.share .acts{display:flex;gap:8px;flex-wrap:wrap}

/* faq: reuse the home page accordion (site.css .faq) on the page background */
.beta .faq{background:transparent;padding-block:56px}
.beta .faq-list{margin-top:8px;max-width:760px;margin-left:0}
.beta .faq details p{color:var(--muted);padding:0 4px 20px;line-height:1.7}
.beta .faq summary{min-height:44px}
.beta .faq a{color:var(--gold-l);text-decoration:underline}


@media (prefers-reduced-motion:no-preference){
  .b-glow{animation:bglow 6s ease-in-out infinite}
}
@keyframes bglow{0%,100%{transform:scale(.96);opacity:.85}50%{transform:scale(1.04);opacity:1}}

@media (max-width:860px){
  .b-hero-in{grid-template-columns:1fr;gap:20px}
  .b-companion{order:-1;min-height:0}
  .b-hero .mstage{width:min(62vw,260px)}
  .cards,.steps{grid-template-columns:1fr}
  .path{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;overscroll-behavior-x:contain}
  .stage-card{scroll-snap-align:center}
  .five{grid-template-columns:1fr 1fr}
  .comp5:last-child{grid-column:1/-1}
  .row-comp{gap:6px}
  .comp b{font-size:.86rem}
  .comp small{display:none}
  .beta section{padding-block:44px}
}
@media (max-width:768px){
  /* site.css hides the nav CTA under 768 px (the home page shows a burger);
     /beta has no menu, so the CTA stays and the burger never renders. */
  .nav .btn-gold.b-navcta{padding:8px 14px}
  .nav-in{gap:12px}
}
@media (max-width:360px){
  .nav .brand span{display:none}
}