/* K-Bap landing — one screen: headline, store badge, the app itself.
   Palette is the ad creative's, so the ad and the page match. */
:root{
  --primary:#FF7134;
  /* #FF7134 is 2.6:1 on white, so orange TEXT uses this darker tone (5.0:1). */
  --primary-ink:#C4441A;
  --peach:#FFE8DE;
  --cream:#FBF6EC;
  --ink:#2F3137;
  /* The palette's body grey is 4.27:1 on peach and #9196A1 is 2.96:1 anywhere,
     both under 4.5:1, so secondary text darkens a step: 5.9:1 on white. */
  --ink-2:#5F646F;
  --ink-3:#9AA0AB;   /* headline's quiet third line only — never body text */
  --line:#EAEBEE;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  background:
    radial-gradient(88% 52% at 80% 2%,  #FFD4BE 0%, rgba(255,212,190,0) 62%),
    radial-gradient(70% 44% at 4% 26%,  #FFE8DE 0%, rgba(255,232,222,0) 70%),
    var(--cream);
}
img{max-width:100%}
h1{margin:0;font-weight:600}
p{margin:0}

/* ---------------- the one screen ---------------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;          /* the real visible height, toolbars included */
  display:flex;flex-direction:column;
  overflow:hidden;
  padding:max(18px,env(safe-area-inset-top)) 22px 0;
  text-align:center;
}

/* warm bloom behind the phone, sitting under everything */
.glow{
  position:absolute;left:50%;bottom:-22%;
  width:min(150%,720px);aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,113,52,.22) 0%,rgba(255,113,52,.07) 42%,rgba(255,113,52,0) 66%);
  pointer-events:none;
}
.hero > *:not(.glow){position:relative}

/* No wordmark at the top: the one on file is the old lockup, and the headline
   says the name anyway. */
.copy{flex:0 0 auto;margin-top:clamp(52px,12svh,120px)}

h1{
  font-size:clamp(34px,9.4vw,56px);
  line-height:1.04;
  letter-spacing:-.035em;
  display:flex;flex-direction:column;
}
.dim{color:var(--ink-3)}

.lede{
  margin:clamp(14px,2.4svh,20px) auto 0;
  max-width:22em;
  font-size:clamp(15px,4vw,18px);
  color:var(--ink-2);
  text-wrap:balance;
}

/* ---------------- store badges (official assets, unmodified) ----------------
   Apple's SVG is 119.664x40 with NO clear space baked in, so the 1/4-height
   margin the guidelines require is added here as padding. Google's PNG is
   646x250 with its pill centred in 41px of transparency, which is already
   ~1/4, so it gets none, and its box is pill/0.672 to match pill heights.
   Nothing is rotated, recoloured, redrawn or animated, and flex:0 0 auto stops
   a narrow viewport from shrinking the art off its own proportions.

   --bh is the pill height. iOS gets one badge at 52px. Everywhere else both
   show at 40px, Apple's documented minimum, which leaves ~16px of slack on a
   360px phone. 44px measured as fitting on paper and still wrapped, so the
   floor buys the headroom: two badges stacked vertically is the one thing this
   page must never do. */
.badges{
  --bh:40px;
  margin-top:clamp(22px,3.6svh,34px);
  display:flex;justify-content:center;align-items:center;gap:6px;
}
/* Only iOS drops a badge, and it drops Play. The App Store link stays on every
   device: this page exists to catch iOS paid traffic, so it must never be the
   link that disappears. Android and desktop therefore show both, at 44px. */
.ios .badges{--bh:52px}
.ios .badge-play{display:none}

.badge{display:inline-flex;flex:0 0 auto;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .18s ease}
.badge:active{transform:scale(.97)}
.badge img{display:block}
.badge-apple{padding:calc(var(--bh)/4)}
.badge-apple img{height:var(--bh);width:calc(var(--bh)*2.9916)}
.badge-play img{height:calc(var(--bh)/.672);width:calc(var(--bh)/.672*2.584)}
.badge:focus-visible{outline:3px solid var(--primary-ink);outline-offset:2px;border-radius:10px}

.note{margin-top:clamp(8px,1.4svh,14px);font-size:13px;color:var(--ink-2)}

/* ---------------- the app, rising into frame ---------------- */
.stage{
  flex:1 1 auto;min-height:clamp(150px,26svh,460px);
  position:relative;margin-top:clamp(20px,4svh,44px);
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);
}
.screen{
  position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  width:min(72%,290px);height:auto;
  border-radius:28px;
  /* hairline so the screen keeps its edge against the warm background */
  border:1px solid rgba(47,49,55,.07);
  box-shadow:0 1px 2px rgba(47,49,55,.06),0 28px 56px -26px rgba(47,49,55,.42);
}

/* ---------------- footer, just under the fold ---------------- */
footer{padding:26px 22px calc(28px + env(safe-area-inset-bottom));text-align:center}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
footer a{color:var(--ink-2);font-size:13px;text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--ink)}
.disclaimer{margin-top:12px;font-size:12px;color:var(--ink-2)}
.copy-line{margin-top:6px;font-size:12px;color:var(--ink-2)}

/* ---------------- entrance ----------------
   Text fades up; the screen only translates. Animating the screen's opacity
   would push back the largest paint, so it stays painted the whole time. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lift{from{transform:translate(-50%,28px)}to{transform:translate(-50%,0)}}
h1,.lede,.badges,.note{animation:rise .62s cubic-bezier(.22,.7,.28,1) backwards}
h1{animation-delay:.06s}
.lede{animation-delay:.20s}
.badges{animation-delay:.28s}
.note{animation-delay:.36s}
.screen{animation:lift .8s cubic-bezier(.22,.7,.28,1) .18s backwards}

@media (prefers-reduced-motion:reduce){
  h1,.lede,.badges,.note,.screen,.badge{animation:none;transition:none}
}

/* ---------------- roomier screens ---------------- */
@media (min-width:600px){
  .hero{padding-inline:32px}
  .copy{max-width:620px;margin-inline:auto}
  .screen{width:min(58%,330px);border-radius:32px}
  .stage{min-height:clamp(200px,30svh,520px)}
}
@media (min-height:900px) and (min-width:600px){
  .screen{width:min(58%,360px)}
}