/* FRETTLIFT site pages (About, How it works). Built from the Figma frames. */
:root{--page:#f8f8f5;--band:#eeece7;--panel:#eeece7;--ink:#111110;--ink2:#555550;--ink3:#77756f;--label:#c7512d;--accent:#d94a25;--line:#e2ded5;--dark:#111110;--white:#fff;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;--body:'Barlow',system-ui,-apple-system,sans-serif;}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px);}
img,video{max-width:100%;display:block;}
a{color:inherit;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px;}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:clamp(20px,11.1vw,160px);}
.label{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:1.8px;text-transform:uppercase;color:var(--label);margin:0;}
.h1{font-family:var(--display);font-weight:800;font-size:clamp(60px,7.8vw,112px);line-height:.95;margin:0;letter-spacing:0;text-wrap:balance;}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(40px,4.2vw,60px);line-height:1.02;margin:0;text-wrap:balance;}
.h-banner{font-family:var(--display);font-weight:800;font-size:clamp(46px,5.6vw,80px);line-height:1;margin:0;text-wrap:balance;}
.lead{font-size:clamp(18px,1.55vw,22px);line-height:1.5;color:var(--ink2);margin:0;max-width:34em;}
.desc{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink2);margin:0;max-width:32em;}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 24px 0 26px;border-radius:12px;background:var(--accent);color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-size:22px;}
.btn:hover{filter:brightness(.94);}
.btn svg{width:18px;height:18px;flex:none;}
.btn-outline{background:transparent;color:var(--ink);border:2px solid var(--ink);}
.btn-outline:hover{background:var(--ink);color:#fff;filter:none;}
.small{font-size:16px;color:var(--ink2);margin:12px 0 0;}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(248,248,245,.94);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #e8e6e0;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:88px;padding-inline:clamp(20px,5.5vw,80px);}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;}
.brand-mark{width:38px;height:38px;border-radius:9px;}
.brand-word{height:26px;width:auto;}
.nav{display:flex;align-items:center;gap:32px;}
.nav a.link{font-size:16px;text-decoration:none;color:var(--ink2);}
.nav a.link:hover,.nav a.link[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;}
.nav .btn{min-height:50px;font-size:20px;padding:0 20px;}
@media (max-width:640px){.site-header .wrap{height:68px;}.nav{gap:16px;}.nav a.link.hide-sm{display:none;}.nav .btn{min-height:42px;font-size:17px;padding:0 14px;}.brand-mark{width:32px;height:32px;}.brand-word{height:21px;}}
@media (max-width:400px){.nav a.link{font-size:15px;}.site-header .brand-word{height:18px;}}
@media (max-width:350px){.site-header .brand-word{display:none;}}
/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,584fr) minmax(0,456fr);gap:clamp(40px,5.5vw,80px);align-items:center;padding-block:clamp(48px,8vw,110px);}
.hero .intro{display:grid;gap:28px;align-content:center;}
.hero .intro .h1{margin-top:-8px;}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;}}
/* phone */
.phone-stage{position:relative;justify-self:center;width:min(456px,100%);padding-bottom:6px;}
.phone{position:relative;width:min(335px,74%);margin:0 auto;aspect-ratio:335/698;border-radius:52px;background:#0d0d0c;padding:9px;box-shadow:0 0 0 2px #3a3936 inset,0 30px 60px rgba(17,17,16,.22);}
.phone .scr{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:#f3f1ec;display:flex;flex-direction:column;}
.phone .sbar{flex:none;height:44px;display:flex;align-items:center;justify-content:space-between;padding:4px 28px 0 32px;font:600 15px var(--body);color:var(--ink);}
.phone .sbar i{width:46px;height:11px;border-radius:3px;background:linear-gradient(90deg,var(--ink) 0 52%,transparent 52% 60%,var(--ink) 60%);opacity:.85;}
.phone .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:31%;height:28px;border-radius:15px;background:#0d0d0c;z-index:2;}
.phone .scr img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:top;}
.caption{text-align:center;font-size:14px;color:var(--ink3);margin:18px 0 0;}
.float{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(17,17,16,.06),0 18px 40px rgba(17,17,16,.16);}
.float img,.float video{width:100%;height:auto;}
.tempo-float{position:absolute;left:0;top:64%;width:min(320px,66%);z-index:3;}
@media (max-width:900px){.tempo-float{left:2%;}}
/* bands */
.band{background:var(--band);}
.trio .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-block:36px;}
.trio .item{display:flex;gap:16px;align-items:flex-start;}
.trio svg{width:24px;height:24px;flex:none;color:var(--accent);margin-top:2px;}
.trio h3{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2;margin:0 0 6px;}
.trio p{font-size:16px;line-height:1.45;color:var(--ink2);margin:0;}
@media (max-width:820px){.trio .wrap{grid-template-columns:1fr;gap:24px;}}
/* feature sections */
.feature .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5.5vw,80px);align-items:center;padding-block:clamp(48px,5vw,72px);}
.feature .copy{display:grid;gap:20px;}
.feature .copy .label{margin-bottom:2px;}
.checks{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:12px;}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.4;color:var(--ink2);}
.checks svg{width:19px;height:19px;flex:none;color:var(--accent);margin-top:2px;}
.panel{position:relative;background:var(--panel);border-radius:12px;aspect-ratio:520/708;width:100%;max-width:520px;justify-self:center;overflow:hidden;}
.panel .float{position:absolute;}
.flip .panel{order:2;}
@media (max-width:900px){.feature .wrap{grid-template-columns:1fr;}.flip .panel{order:0;}.panel{max-width:460px;}}
/* banner */
.dark{background:var(--dark);color:#fff;}
.dark .label{color:#f0ede8;}
.banner .wrap{display:grid;grid-template-columns:minmax(0,690fr) minmax(0,358fr);gap:72px;align-items:center;padding-block:72px;}
.banner .msg{display:grid;gap:24px;justify-items:start;}
.banner .msg p{font-size:20px;line-height:1.5;color:#c9c7c0;margin:0;}
.banner .label{margin-bottom:16px;}
@media (max-width:820px){.banner .wrap{grid-template-columns:1fr;gap:28px;}}
/* faq */
.faq .wrap{display:grid;grid-template-columns:minmax(0,400fr) minmax(0,640fr);gap:80px;padding-block:clamp(56px,6vw,72px);align-items:start;}
.faq .intro{display:grid;gap:20px;position:sticky;top:120px;}
.faq .intro a{color:var(--ink);}
.faq .intro a.feedback{font-size:16px;font-weight:600;color:var(--label);text-decoration:none;}
.faq .intro a.feedback:hover{text-decoration:underline;}
.faq details{border-bottom:1px solid var(--line);padding:18px 0;}
.faq details:first-child{padding-top:0;}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:18px;cursor:pointer;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.2;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary svg{width:20px;height:20px;flex:none;color:var(--label);margin-top:6px;transition:transform .2s;}
.faq details[open] summary svg{transform:rotate(90deg);}
.faq details p{font-size:16px;line-height:1.5;color:var(--ink2);margin:8px 36px 0 0;}
@media (max-width:820px){.faq .wrap{grid-template-columns:1fr;gap:32px;}.faq .intro{position:static;}.faq summary{font-size:23px;}}
/* footer */
.site-footer{border-top:1px solid #2c2b28;}
.site-footer .wrap{padding-block:64px 40px;}
.foot-grid{display:grid;grid-template-columns:400px repeat(3,minmax(0,200px));gap:40px;justify-content:space-between;}
.foot-brand{display:grid;gap:14px;align-content:start;}
.foot-brand .brand-word{height:46px;filter:brightness(0) invert(1);}
.foot-brand p{margin:0;font-size:16px;line-height:1.5;color:#c9c7c0;}
.foot-brand .beta{font-size:14px;color:#9b9891;}
.foot-col h3{font-family:var(--display);font-weight:700;font-size:25px;margin:0 0 14px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;}
.foot-col a{font-size:16px;color:#c9c7c0;text-decoration:none;}
.foot-col a:hover{color:#fff;text-decoration:underline;}
.foot-end{margin-top:48px;border-top:1px solid #2c2b28;padding-top:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#9b9891;}
.foot-end .frett-analytics-settings{color:#9b9891;font-size:14px;}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;}.foot-brand{grid-column:1/-1;}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr;}}
/* how it works */
.words{display:flex;flex-wrap:wrap;column-gap:.26em;row-gap:0;max-width:6.2em;}
.words span{display:inline-block;white-space:nowrap;}
.words .beat{color:var(--accent);}
@media (prefers-reduced-motion:no-preference){
  .words.go span{opacity:.1;animation:wordin 8s infinite;}
  .words.go span:nth-child(1){animation-name:w1;}.words.go span:nth-child(2){animation-name:w2;}.words.go span:nth-child(3){animation-name:w3;}.words.go span:nth-child(4){animation-name:w4;}
}
@keyframes w1{0%{opacity:.1}5%,88%{opacity:1}96%,100%{opacity:.1}}
@keyframes w2{0%,10%{opacity:.1}15%,88%{opacity:1}96%,100%{opacity:.1}}
@keyframes w3{0%,20%{opacity:.1}25%,88%{opacity:1}96%,100%{opacity:.1}}
@keyframes w4{0%,30%{opacity:.1}35%,88%{opacity:1}96%,100%{opacity:.1}}
.hero-panel{position:relative;background:var(--panel);border-radius:24px;aspect-ratio:480/520;width:min(480px,100%);justify-self:center;overflow:hidden;}
.hero-panel .float{position:absolute;}
.section .wrap{padding-block:clamp(64px,7vw,104px);display:grid;gap:44px;}
.section .head{display:grid;gap:14px;max-width:760px;}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
@media (max-width:1100px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:820px){.grid3{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.grid4,.grid3{grid-template-columns:1fr;}}
.step{background:#fff;border-radius:20px;padding:24px 24px 28px;display:flex;flex-direction:column;gap:12px;}
.step .vis{border-radius:14px;overflow:hidden;background:#f3f1ec;aspect-ratio:640/500;}
.step .vis video,.step .vis img{width:100%;height:100%;object-fit:cover;}
.step .num{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--label);margin-top:4px;}
.step h3,.tile h3,.habit h3,.player h3{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.05;margin:0;}
.step p,.tile p,.habit p{font-size:16px;line-height:1.45;color:var(--ink2);margin:0;}
.tile{background:#fff;border-radius:20px;padding:28px 28px 30px;display:grid;gap:10px;align-content:start;}
.tile p{font-size:17px;}
.tile::before{content:'';width:28px;height:4px;border-radius:2px;background:var(--accent);}
.habit{border-top:2px solid var(--ink);padding:20px 12px 0 0;display:grid;gap:8px;align-content:start;}
.habit h3{font-size:26px;}
.habit p{font-size:17px;}
.player{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:14px;}
.player h3{font-size:26px;}
.player .why{font-size:15px;line-height:1.4;color:var(--ink2);margin:0;}
.player ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.player li{background:#f3f1ec;border-radius:10px;padding:8px 12px 9px;}
.player li b{display:block;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;}
.player li span{font-size:13px;color:var(--ink2);}
.player .btn{margin-top:auto;justify-content:center;font-size:18px;min-height:48px;border-radius:10px;padding:0 16px;}
.player .btn svg{width:12px;height:13px;}
@media (prefers-reduced-motion:reduce){.faq summary svg{transition:none;}}