/* Feelbits site. The app's own colours: Sunlit meadow accent, meadow-green grounds, rounded heavy type.
   Mobile first; sections are sheets that rise over each other. Light only, like the app. */
:root{
  --leaf:#6CC062; --on-fill:#1F3A0E; --ink:#2F6E1E;
  --glass:rgba(140,200,115,.67); --glass-rim:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(78,143,63,.4);
  --meadow-1:#F1FAEC; --meadow-2:#E2F3D9; --meadow-3:#D6EECB;
  --text:#1C2615; --soft:#46553C; --faint:#6E7C65; --paper:#FBFCF8; --white:#FFFFFF;
  --round: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter:20px; --sheet:32px; --velvet:url(velvet.png);
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 1rem/1.5 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--ink)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
mark.todo{background:#FFE7A3;color:#5A4100;border-radius:6px;padding:0 .3em;font-weight:600}

/* ---------- shared pieces ---------- */
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-fill);font:800 1.375rem/1 var(--round);letter-spacing:-.01em}
.brand .icon{width:36px;height:36px;flex:none;filter:drop-shadow(0 2px 5px rgba(47,110,30,.22))}
.store{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:21.5px;border:0;cursor:pointer;
  background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--on-fill);font:800 1.0625rem/1 var(--round);text-decoration:none;
  box-shadow:var(--glass-rim),0 6px 14px -8px rgba(47,110,30,.35);transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.store:hover{transform:translateY(-1px)}
.store:active{transform:scale(.97)}
.store.small{min-height:38px;padding:0 15px;border-radius:14.6px;font-size:.875rem}
.note{margin:0;font-size:.875rem;color:var(--faint)}
.free{display:inline-flex;align-items:center;gap:9px;margin:4px 0 0;padding:7px 15px 7px 7px;border-radius:15px;background:rgba(255,255,255,.88);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 18px -10px rgba(31,58,14,.55);font:800 .9375rem/1 var(--round);color:var(--on-fill)}
.free .tick{width:26px;height:26px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--glass-rim)}
.free svg{width:15px;height:15px;fill:none;stroke:var(--on-fill);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.end .free{margin-top:16px}

h1,h2,h3{font-family:var(--round);font-weight:800;color:var(--on-fill);margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.375rem,9.5vw,4rem);line-height:1.02}
h2{font-size:clamp(2rem,8vw,3.25rem);line-height:1.04}
h3{font-size:1.25rem;line-height:1.2;letter-spacing:-.01em}
.lead,.body{font-size:1.0625rem;line-height:1.55;color:var(--soft);margin:14px 0 0;max-width:36ch;text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;font:800 .875rem/1 var(--round);color:var(--ink)}
.eyebrow svg{width:22px;height:22px;fill:currentColor}

/* ---------- top bar (shows once the hero's button has scrolled away) ---------- */
.topbar{position:fixed;left:0;right:0;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);
  background:rgba(251,252,248,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid rgba(47,110,30,.08);transform:translateY(-110%);transition:transform .45s cubic-bezier(.3,1.2,.5,1)}
.topbar.on{transform:none}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.topbar .brand{font-size:1.125rem}
.topbar .brand .icon{width:30px;height:30px}

/* ---------- sheets ---------- */
.sheet{position:relative;border-radius:var(--sheet) var(--sheet) 0 0;margin-top:calc(var(--sheet) * -1);padding-block:56px 72px}
.sheet:nth-of-type(1){z-index:1}.sheet:nth-of-type(2){z-index:2}.sheet:nth-of-type(3){z-index:3}.sheet:nth-of-type(4){z-index:4}
.sheet:nth-of-type(5){z-index:5}.sheet:nth-of-type(6){z-index:6}.sheet:nth-of-type(7){z-index:7}.sheet:nth-of-type(8){z-index:8}
.sheet:nth-of-type(9){z-index:9}.sheet:nth-of-type(10){z-index:10}
.on-white{background:var(--white);box-shadow:0 -12px 30px -22px rgba(31,58,14,.35)}
.on-meadow{background:linear-gradient(180deg,var(--meadow-1),var(--meadow-2));box-shadow:0 -12px 30px -22px rgba(31,58,14,.3)}

/* text + phone + try-out: stacked on phones, two columns from 900px */
.feature{display:grid;gap:34px;grid-template-areas:"text" "phone" "try"}
.feature > .text{grid-area:text}
.feature > .phones{grid-area:phone}
.feature > .try{grid-area:try;min-width:0}
@media (min-width:900px){
  .sheet{padding-block:96px 120px}
  .feature{grid-template-columns:1fr minmax(0,.9fr);grid-template-areas:"text phone" "try phone";column-gap:64px;row-gap:36px;align-items:start}
  .feature.flip{grid-template-columns:minmax(0,.9fr) 1fr;grid-template-areas:"phone text" "phone try"}
  .feature > .phones{position:sticky;top:96px}
}

/* phones with the real app */
.phones{display:flex;justify-content:center;align-items:flex-start;gap:14px}
.phone{margin:0;flex:none;width:min(252px,64vw);aspect-ratio:540/1174;border-radius:42px;padding:7px;background:#1B2416;
  box-shadow:0 34px 60px -34px rgba(31,58,14,.55),inset 0 0 0 1.5px rgba(255,255,255,.09)}
.phones.two .phone{width:min(228px,42vw);border-radius:36px;padding:6px}
.phones.two .phone:nth-child(2){margin-top:42px}
.phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:35px;background:var(--meadow-2);cursor:pointer}
.phones.two .phone video{border-radius:30px}
.phone figcaption{position:absolute;left:-9999px}

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,var(--meadow-1) 0%,var(--meadow-2) 58%,var(--meadow-3) 100%);padding-bottom:var(--sheet)}
.hero header{padding-top:calc(16px + env(safe-area-inset-top,0px))}
.hero .copy{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:40px 6px}
.hero .lead{margin-inline:auto}
.hero .cta{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:12px}
.garden{position:relative;height:310px;--u:.4;overflow:hidden;max-width:1200px;margin-inline:auto}
.fb{position:absolute;--x:var(--px);--y:var(--py);--s:var(--ps);--z:var(--pz);left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:var(--z);
  width:calc(var(--w) * var(--s) * var(--u) * 1px);transform:translate(calc(var(--ax) * -1%),calc(var(--ay) * -1%))}
.fb.wide{display:none}
.fb::before{content:"";position:absolute;left:calc(var(--ax) * 1%);top:calc(var(--ay) * 1%);width:62%;height:16%;transform:translate(-50%,-55%);
  background:radial-gradient(closest-side,rgba(31,58,14,.2),rgba(31,58,14,0));z-index:-1}
.fb img{width:100%}
@media (min-width:760px){
  .garden{height:430px;--u:.5}
  .fb{--x:var(--dx);--y:var(--dy);--s:var(--ds);--z:var(--dz)}
  .fb.wide{display:block}
  .hero .copy{padding-block:64px 0}
}

/* ---------- meet the Feelbits ---------- */
.meet .intro{max-width:620px}
.stage{position:relative;margin-top:30px;border-radius:30px;padding:26px 20px 22px;display:grid;justify-items:center;text-align:center;
  background:radial-gradient(80% 70% at 50% 62%,color-mix(in srgb,var(--tone) 50%,#fff) 0%,var(--wash) 52%,var(--white) 100%);transition:--tone .8s,--wash .8s}
@property --tone{syntax:"<color>";inherits:true;initial-value:#EADDC5}
@property --wash{syntax:"<color>";inherits:true;initial-value:#F9F3E8}
@property --ink{syntax:"<color>";inherits:true;initial-value:#5B4A2A}
.stage .pic{display:grid;place-items:end center;height:calc(433px * var(--k));--k:.5}
.stage .pic img{height:calc(var(--h) * var(--k) * 1px);width:auto;max-width:none;filter:drop-shadow(0 14px 14px color-mix(in srgb,var(--ink) 16%,transparent))}
.stage .who{transition:opacity .16s ease,transform .16s ease}
.stage.out .who,.stage.out .pic{opacity:0;transform:translateY(5px)}
.stage .pic{transition:opacity .16s ease,transform .16s ease}
.stage h3{margin-top:16px;font-size:2rem;color:var(--ink);transition:color .6s}
.stage .rest{display:none}
.stage.rest-on .pic,.stage.rest-on .who{display:none}
.stage.rest-on .rest{display:grid;justify-items:center}
.stage .rest{transition:opacity .16s ease,transform .16s ease}
.stage.out .rest{opacity:0;transform:translateY(5px)}
.shadows{display:flex;align-items:flex-end;justify-content:center;width:100%;overflow:hidden;height:calc(433px * var(--k));--k:.5}
.shadows img{height:calc(var(--h) * var(--k) * .56px);width:auto;max-width:none;margin:0 -4px;filter:brightness(0);opacity:.2}
.shadows img:nth-child(2),.shadows img:nth-child(3){height:calc(var(--h) * var(--k) * .7px);opacity:.26;position:relative;z-index:1}
.stage .rest .store{margin-top:16px}
.stage .def{margin:6px auto 0;max-width:30ch;color:color-mix(in srgb,var(--ink) 85%,#fff)}
.stage .arrows{position:absolute;inset:auto 12px 50% 12px;display:flex;justify-content:space-between;pointer-events:none}
.stage .arrows button{pointer-events:auto;width:42px;height:42px;border:0;border-radius:16px;background:rgba(255,255,255,.75);color:var(--on-fill);cursor:pointer;font:800 1.125rem/1 var(--round);
  box-shadow:0 4px 12px -6px rgba(31,58,14,.4)}
.roster{display:flex;gap:6px;overflow-x:auto;padding:16px 4px 8px;margin:0 -4px;scrollbar-width:none;scroll-snap-type:x proximity}
.roster::-webkit-scrollbar{display:none}
.roster button{flex:none;width:62px;height:76px;border:0;border-radius:20px;background:none;cursor:pointer;display:grid;place-items:end center;padding:6px 4px;scroll-snap-align:center;
  transition:background .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.roster button img{max-height:62px;width:auto}
.roster button[aria-pressed="true"]{background:color-mix(in srgb,var(--leaf) 26%,#fff);transform:translateY(-2px)}
.roster-hint{margin:6px 0 0;font-size:.8125rem;color:var(--faint);text-align:center}
.roster button.more{flex:none;width:76px;height:76px;align-self:end;display:grid;place-items:center;align-content:center;gap:2px;border-radius:22px;text-decoration:none;scroll-snap-align:center;padding:0;
  background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--on-fill);font:800 1.125rem/1 var(--round);box-shadow:var(--glass-rim)}
.roster button.more[aria-pressed="true"]{transform:translateY(-2px);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--leaf)}
.roster .more small{font:700 .625rem/1.15 var(--round);text-align:center;padding:0 6px}
@media (min-width:900px){
  .meet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
  .stage{margin-top:0}
  .stage .pic{--k:.62}
  .roster{flex-wrap:wrap;overflow:visible;justify-content:flex-start}
  .meet .roster-hint{display:none}
}

/* ---------- Learn paths: cards that slide ---------- */
.slides{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px var(--gutter) 14px;margin:0 calc(var(--gutter) * -1);scroll-padding-inline:var(--gutter)}
.slides::-webkit-scrollbar{display:none}
.path{position:relative;flex:0 0 84%;scroll-snap-align:start;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t t" "b i";align-items:end;column-gap:8px;row-gap:2px;min-height:188px;padding:20px 14px 18px 20px;border-radius:26px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 90% at 10% 0%,color-mix(in srgb,var(--pc) 82%,#fff) 0%,var(--pc) 52%,color-mix(in srgb,var(--pc) 82%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -16px color-mix(in srgb,var(--pc) 80%,#000)}
.path::after{content:"";position:absolute;inset:0;background:var(--velvet) 0 0/180px 180px;mix-blend-mode:soft-light;opacity:.18;pointer-events:none;filter:blur(1px)}
.path > *{position:relative;z-index:1}
.path h3{grid-area:t;align-self:start;color:#fff;font-size:1.5rem}
.path > div{grid-area:b}
.path > img{grid-area:i}
.path p{margin:6px 0 0;font-size:.9375rem;line-height:1.35;color:rgba(255,255,255,.9);max-width:22ch}
.path .count{display:block;margin-top:14px;font:700 .8125rem var(--round);color:rgba(255,255,255,.82)}
.path img{height:96px;width:auto}
.slide-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2px}
.slide-nav button{width:40px;height:40px;border:0;border-radius:15px;background:var(--white);color:var(--on-fill);cursor:pointer;font:800 1.125rem/1 var(--round);box-shadow:0 4px 12px -6px rgba(31,58,14,.4)}
.slide-nav .dots{display:flex;gap:7px}
.slide-nav .dots i{width:7px;height:7px;border-radius:3px;background:rgba(31,58,14,.18);transition:background .25s,width .3s cubic-bezier(.3,1.4,.5,1)}
.slide-nav .dots i.on{background:var(--ink);width:18px}
@media (min-width:900px){.slides{margin:0;padding:4px 0 14px;scroll-padding-inline:0}.path{flex-basis:80%}}

/* a download button between sections */
.go{display:flex;flex-direction:column;align-items:center;gap:22px}
.go .store{align-self:center}
@media (min-width:900px){.go{align-items:flex-start}.go .store{align-self:flex-start}}

/* ---------- the end, with the fine print on the same light ---------- */
.end{position:relative;overflow:hidden;padding-bottom:0;isolation:isolate;
  background:radial-gradient(120% 80% at 12% 0%,#FFF6CF 0%,rgba(255,246,207,0) 55%),linear-gradient(160deg,#F7E39A 0%,#E8D86E 34%,#BCD86C 68%,#8FCB68 100%)}
.end .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.end .body{color:#3B4A26;margin-inline:auto}
.end .store{margin-top:24px;background:var(--on-fill);color:#FFF6D6;box-shadow:0 10px 22px -10px rgba(31,58,14,.7)}
.end .trio{position:relative;width:min(560px,100%);margin:40px auto 30px}
.end .trio::after{content:"";position:absolute;left:6%;right:4%;bottom:-3%;height:16%;z-index:-1;
  background:radial-gradient(closest-side,rgba(31,58,14,.24),rgba(31,58,14,0))}
.end .trio img{width:100%;position:relative}
.fineprint{text-align:center;padding:10px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));font-size:.6875rem;color:rgba(31,58,14,.42)}
.fineprint a{color:inherit;text-decoration:none;margin:0 6px}
.fineprint a:hover{text-decoration:underline}

/* ---------- legal pages: plain on purpose ---------- */
.legal-page{background:#fff;color:#444;min-height:100vh;font:400 .9375rem/1.6 var(--body)}
.legal-top{max-width:680px;margin:0 auto;padding:calc(16px + env(safe-area-inset-top,0px)) var(--gutter) 0}
.legal{max-width:680px;margin:0 auto;padding:24px var(--gutter) 24px}
.legal h1{font:600 1.375rem/1.3 var(--body);color:#222;letter-spacing:0;margin:0 0 4px}
.legal h2{font:600 1rem/1.4 var(--body);color:#222;letter-spacing:0;margin:22px 0 4px}
.legal p,.legal li{color:#444;margin:0 0 10px}
.legal ul{padding-left:20px}
.legal a{color:#444}
.legal .date{color:#888;font-size:.875rem}
.back{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:17.7px;text-decoration:none;cursor:pointer;border:0;
  background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--on-fill);font:800 .9375rem/1 var(--round);box-shadow:var(--glass-rim),0 6px 14px -8px rgba(47,110,30,.35);
  transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.back:active{transform:scale(.97)}
.legal-bottom{max-width:680px;margin:0 auto;padding:8px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}