@font-face{font-family:"Fredoka";src:url(/assets/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --sky-hi:#fdeeda; --sky:#fad3bc; --sky-lo:#f7c8b4;
  --ink:#39283c; --mute:#736478;
  --cream:#fff6e8; --card:#fffaf1;
  --orange:#e07f31; --orange-soft:#f8a564; --orange-tint:#fdecd8;
  --park:#cfe0ad; --park-deep:#b6d094; --trunk:#9a7350;
  --line:#2b2a3320;
  --shadow:0 18px 40px -22px #2b2a3355;
  /* SambaZen token roles, aliased onto the palette above */
  --sz-surface:var(--cream); --sz-surface-raised:var(--card); --sz-font-display:"Fredoka","Nunito",sans-serif; --sz-font-body:"Nunito",sans-serif; --sz-ink:var(--ink); --sz-ink-soft:var(--mute);
  --sz-accent:var(--orange); --sz-line:var(--line); --sz-radius-card:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Nunito","Nunito Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.wordmark,.foot-mark{font-family:"Fredoka","Nunito",sans-serif;font-weight:600;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.12;margin:0 0 .5rem}
h3{font-size:1.25rem;margin:0 0 .35rem}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
.wrap{width:min(1120px,calc(100% - 2.5rem));margin-inline:auto}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--ink);color:var(--cream);padding:.6rem 1rem;border-radius:8px;z-index:20;text-decoration:none}
.skip:focus{top:1rem}

/* Header and campaign hero */
.site-head{background:var(--cream);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}
.wordmark{display:inline-flex;align-items:center;gap:12px;font-size:1.4rem;text-decoration:none}
.wordmark img{width:40px;height:40px;border-radius:12px}
.studio-link{font-size:.88rem;text-decoration:none;color:var(--mute);padding-block:12px;transition:color .18s}
.studio-link strong{color:var(--ink);font-weight:800}
.hero{position:relative;isolation:isolate;overflow:hidden;background:#fff4e3}
.hero-art{position:absolute;inset:0;z-index:-1}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-copy{min-height:clamp(560px,50vw,960px);display:flex;flex-direction:column;justify-content:center;gap:32px;padding-block:48px}
.hero-intro,.hero-download{max-width:50%}
h1{font-size:clamp(4rem,7.5vw,7rem);line-height:.96;margin:0 0 24px;font-weight:600;letter-spacing:-.04em}
.lead{font-family:var(--sz-font-display);font-weight:500;font-size:clamp(2rem,3.5vw,3.4rem);line-height:1.08;letter-spacing:-.02em;margin:0}
.lead span{color:#dc632f}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:12px}
.app-store-badge,.store-badge{display:inline-flex;align-items:center;line-height:0;min-height:48px;border-radius:8px;transition:transform .18s ease,box-shadow .18s ease}
.app-store-badge img,.store-badge img{display:block;width:auto;height:48px;max-width:100%;object-fit:contain}
.stores-note{font-size:.88rem;font-weight:700;color:var(--mute);margin:0}
.try-link{display:none;align-items:center;gap:12px;min-height:44px;margin-top:16px;color:#a7451e;font-weight:800;text-decoration:none;transition:color .18s,transform .18s}
body:has(#try:not([hidden])) .try-link{display:inline-flex}
.try-link span{font-size:1.3rem}
.challenge-wrap:has(.challenge[hidden]){display:none}
.challenge-wrap{padding-block:24px}
.challenge-wrap .challenge{max-width:720px;margin:0 auto}
/* ---------- challenge note (only when a share link brings a query) ---------- */
.challenge{
  display:flex;align-items:center;gap:16px;margin:0 0 24px;padding:16px;max-width:34rem;
  background:color-mix(in srgb,var(--sz-surface-raised) 72%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--sz-accent) 40%,transparent);
  border-radius:var(--sz-radius-card);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sz-accent) 12%,transparent),var(--shadow);
  animation:challenge-in .42s cubic-bezier(.2,.9,.3,1.2) both;
}
.challenge-capy{width:48px;height:auto;flex:none;transform:rotate(-6deg)}
.challenge-copy{min-width:0}
.challenge-copy p{margin:0}
.challenge-label{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sz-accent);margin-bottom:4px!important}
.challenge-title{font-family:"Fredoka","Nunito",sans-serif;font-weight:600;font-size:1.2rem;line-height:1.25;color:var(--sz-ink);overflow-wrap:anywhere}
.challenge-detail{font-size:.95rem;line-height:1.45;color:var(--sz-ink-soft);margin-top:4px!important}
@keyframes challenge-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
/* The note's lines rise in one after another, 40ms apart, once the panel has landed. */
.challenge-copy>*{animation:challenge-rise .32s cubic-bezier(.2,.9,.3,1) both}
.challenge-copy>:nth-child(1){animation-delay:.12s}
.challenge-copy>:nth-child(2){animation-delay:.16s}
.challenge-copy>:nth-child(3){animation-delay:.2s}
.challenge-copy>:nth-child(4){animation-delay:.24s}
@keyframes challenge-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* The app is the only way to ride: the note ends on the App Store and Google Play badges. */
.challenge-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px}
.challenge-actions .challenge-store{min-height:44px;border-radius:8px;transition:transform .18s ease,box-shadow .18s ease}
.challenge-store:focus-visible{outline:2px solid var(--sz-accent);outline-offset:4px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--sz-accent) 50%,transparent),0 0 8px color-mix(in srgb,var(--sz-accent) 50%,transparent)}
@media(hover:hover){.challenge-store:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--sz-accent) 50%,transparent),0 0 8px color-mix(in srgb,var(--sz-accent) 50%,transparent)}}
.challenge-store:active{transform:scale(.95)}
.challenge-android{font-size:.85rem;font-weight:700;color:var(--sz-ink-soft)}

/* Practice: the real interactive scene, separate from the campaign hero. */
.teaser.wrap{max-width:960px;padding-block:64px 32px}
.teaser.wrap .teaser-heading{text-align:center;margin-bottom:24px}
.teaser.wrap .teaser-heading h2{font-size:clamp(2.4rem,5vw,3.2rem);margin-bottom:8px}
.teaser.wrap .teaser-heading p{margin:0;color:var(--mute);font-size:1.08rem}
.teaser.wrap .teaser-rider-track{width:clamp(104px,12vw,144px)}
.teaser.wrap .teaser-capy{height:clamp(144px,18vw,208px)}
.teaser-under{margin-inline:8px}
.teaser-say{text-align:center}

/* Actual in-game captures, without feature cards or long explanations. */
.screens{padding:32px 0 64px;background:var(--cream)}
.screens h2{text-align:center;font-size:clamp(2rem,5vw,3rem)}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:560px;margin:32px auto 0}
.shots figure{margin:0;min-width:0;text-align:center}
.phone{border:6px solid var(--ink);border-radius:32px;overflow:hidden;background:var(--ink);box-shadow:0 24px 48px -24px #39283c55;line-height:0}
.shots figure:first-child .phone{transform:rotate(-3deg)}
.shots figure:last-child .phone{transform:rotate(3deg)}
.shots figcaption{margin-top:16px;font-size:.88rem;font-weight:700;color:var(--mute)}

.site-foot{background:var(--cream);border-top:1px solid var(--line);padding:32px 0}
.foot-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.foot-mark{font-size:1.2rem;margin:0 0 4px}
.foot-by{margin:0;color:var(--mute);font-size:.88rem}
.foot-links{display:flex;flex-wrap:wrap;gap:24px;font-size:.88rem}
.foot-links a,.foot-by a{color:var(--mute);text-decoration-color:var(--line);text-underline-offset:4px;transition:color .18s}
.foot-small{margin:24px auto 0;font-size:.72rem;line-height:1.6;color:var(--mute);width:min(1120px,calc(100% - 2.5rem))}
/* ---------- privacy notice ---------- */
.policy{max-width:800px;padding-block:64px}
.policy h1{font-size:clamp(2.5rem,8vw,4rem);line-height:1.12;overflow-wrap:anywhere}
.policy h2{font-size:clamp(1.4rem,4vw,1.8rem);line-height:1.25;margin:32px 0 16px}
.policy p{overflow-wrap:anywhere}
.policy .notice{padding:24px;background:var(--sz-surface-raised);border:1px solid var(--sz-line);border-radius:var(--sz-radius-card)}
.policy article{scroll-margin-top:24px}
.policy code{font-size:.9em}


.hero-intro,.hero-download{animation:hero-in .48s ease-out both}
.hero-download{animation-delay:.08s}
@keyframes hero-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(hover:hover){
  .studio-link:hover,.foot-links a:hover,.foot-by a:hover{color:#a7451e}
  .app-store-badge:hover,.store-badge:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .try-link:hover{color:var(--ink);transform:translateY(2px)}
}
.app-store-badge:active,.store-badge:active,.try-link:active{transform:scale(.95)}
@media(max-width:1000px) and (min-width:961px){
  .hero-copy{min-height:560px}
  .hero-intro,.hero-download{max-width:48%}
  h1{font-size:clamp(3.6rem,7.5vw,4.8rem)}
  .lead{font-size:2.4rem}
  .hero-download .stores{gap:8px}
  .hero-download .stores img{height:40px}
}
@media(max-width:960px){
  .hero{display:flex;flex-direction:column}
  .hero-copy{display:contents}
  .hero-intro{order:1;padding:32px 16px 16px;text-align:center;max-width:none}
  h1{font-size:clamp(2.8rem,10vw,4rem);margin-bottom:12px}
  .lead{font-size:clamp(1.8rem,6vw,2.4rem);line-height:1.04}
  .hero-art{order:2;position:relative;inset:auto;z-index:0;height:clamp(264px,76vw,456px);width:100%;overflow:hidden}
  .hero-art img{object-position:right center}
  .hero-download{order:3;max-width:none;text-align:center;padding:16px 16px 24px;background:var(--cream)}
  .hero-download .stores{justify-content:center;gap:12px}
  .hero-download .stores img{height:44px}
  .try-link{margin-top:8px}
  .teaser.wrap{padding-block:40px 16px}
  .teaser.wrap .teaser-heading{margin-bottom:16px}
  .teaser.wrap .teaser-rider-track{width:clamp(80px,23vw,104px)}
  .teaser.wrap .teaser-capy{height:clamp(112px,32vw,144px)}
  .screens{padding:32px 0 48px}
  .shots{gap:24px;max-width:480px;margin-top:24px}
  .phone{border-width:4px;border-radius:24px}
  .foot-row{align-items:flex-start}
  .challenge-capy{display:none}
}
@media(max-width:520px){
  body{font-size:16px}
  .wrap,.foot-small{width:calc(100% - 32px)}
  .head-row{min-height:64px}
  .wordmark{font-size:1.12rem;gap:8px}
  .wordmark img{width:32px;height:32px;border-radius:8px}
  .studio-link{font-size:.8rem}
  .foot-links{gap:16px}
  .shots{gap:24px;padding-inline:8px}
}
@media(max-width:360px){
  .hero-download .stores img{height:40px}
  .challenge-actions{gap:8px}
  .challenge-actions img{height:36px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-intro,.hero-download,.challenge,.challenge-copy>*{animation:none!important}
  .app-store-badge,.store-badge,.try-link{transition:none}
  .app-store-badge:hover,.store-badge:hover,.app-store-badge:active,.store-badge:active,.try-link:hover,.try-link:active{transform:none}
}