/* Love Handles website. Layout: a gym sheet you scroll. Black poster bands for the big moments, white paper
   between them, the real app on drawn iPhones as the proof. Same type and colors as the app. One look, both
   themes: every color is set here, so it reads the same on a light or dark phone. */
:root{
  --ink:#0d0d0c; --ink-2:#3a3a37; --muted:#6d6d67; --paper:#ffffff; --fill:#f1f1ec; --line:#e2e2dc;
  --on-ink:#ffffff; --on-ink-2:#b9b9b2; --on-ink-line:#2c2c29; --bezel:#161615; --bezel-edge:#3b3b38;
  --no:#b3261e; --no-soft:#fbe8e5; --yes:#15703a;
  --display:"Anton","Impact","Haettenschweiler","Arial Narrow Bold",sans-serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}

/* ---- bands and the gutter ---- */
.band{width:100%}
.band.ink{background:var(--ink);color:var(--on-ink)}
.band.fill{background:var(--fill)}
.wrap{max-width:1120px;margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.sec{padding-block:clamp(56px,9vw,104px)}

/* ---- type ---- */
.eyebrow{font:800 11.5px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ink .eyebrow{color:var(--on-ink-2)}
.display{font:400 clamp(44px,6.6vw,88px)/.92 var(--display);text-transform:uppercase;letter-spacing:.005em}
.display span{display:block}
.h2{font:400 clamp(36px,5.6vw,64px)/.95 var(--display);text-transform:uppercase;letter-spacing:.008em;text-wrap:balance}
.h3{font:400 26px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.lede{font-size:clamp(17px,1.9vw,19px);line-height:1.55;color:var(--ink-2);max-width:34em}
.ink .lede{color:var(--on-ink-2)}
.copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.copy p{max-width:34em}

/* ---- top bar ---- */
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-ink)}
.brand .mark{width:40px;height:23px}
.brand b{font:400 21px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.nav a{font:800 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-2);text-decoration:none;padding-block:8px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-ink)}

/* The heart hands from the app's opening screen, drawn as a mask so it takes the text color. */
.mark{display:inline-block;background:currentColor;-webkit-mask:url(img/logo-heart.png) center/contain no-repeat;mask:url(img/logo-heart.png) center/contain no-repeat}

/* ---- hero ---- */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,72px);align-items:center;padding-block:clamp(36px,6vw,72px) clamp(56px,8vw,96px)}
.hero .copy{gap:26px}
.hero-mark{width:118px;height:67px;color:var(--on-ink);animation:beat 1.6s ease-in-out infinite;transform-origin:center}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(1)}36%{transform:scale(1.04)}48%{transform:scale(1)}}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.soon{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:var(--on-ink);color:var(--ink);border-radius:999px;padding:14px 22px;font:800 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.soon .mark{width:26px;height:15px}
.textlink{font:800 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;padding-block:8px}
.hero .shot{justify-self:center}

/* ---- the drawn iPhone ---- */
.phone{position:relative;width:min(300px,76vw);max-width:100%;aspect-ratio:786/1704;border-radius:48px;padding:9px;background:var(--bezel);box-shadow:0 0 0 1.5px var(--bezel-edge),0 40px 80px -34px rgba(0,0,0,.55)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:39px;background:var(--paper)}
.phone::after{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:31%;height:25px;border-radius:14px;background:#000}
.shot{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.shot figcaption{font:800 11px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center}
.ink .shot figcaption{color:var(--on-ink-2)}

/* ---- portions ---- */
.head-block{display:flex;flex-direction:column;gap:16px;max-width:760px}
.hands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vw,56px)}
.hand-card{border:1.5px solid var(--ink);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.hand-top{display:flex;align-items:center;gap:16px}
.hand{flex:none;width:72px;height:72px;border-radius:50%;background:var(--fill);position:relative}
.hand::after{content:"";position:absolute;inset:0;background:var(--ink);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.hand.palm{--m:url(img/hand-palm.png)}
.hand.fist{--m:url(img/hand-fist.png)}
.hand.thumb{--m:url(img/hand-thumb.png)}
.hand-name{display:flex;flex-direction:column;gap:4px}
.hand-name b{font:400 40px/.9 var(--display);text-transform:uppercase}
.ex{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ex li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.ex li:last-child{border-bottom:0;padding-bottom:0}
.ex b{white-space:nowrap;font-variant-numeric:tabular-nums}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,80px);align-items:center;margin-top:clamp(56px,8vw,96px)}
.split.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.split.flip .shot{order:2}

/* ---- the reveal ---- */
.gotyou{font:400 clamp(28px,3.6vw,40px)/1 var(--display);text-transform:uppercase;border-top:1px solid var(--on-ink-line);padding-top:22px;margin-top:6px}
.takes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--on-ink-line);border:1px solid var(--on-ink-line);border-radius:14px;overflow:hidden;max-width:34em}
.takes div{background:var(--ink);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.takes span{font:800 10.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-2)}
.takes b{font:400 22px/1 var(--display);text-transform:uppercase;font-weight:400}

/* ---- your day ---- */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,72px);margin-top:clamp(40px,6vw,64px)}
.pair .shot{gap:22px}
.pair .shot figcaption{max-width:22em;display:flex;flex-direction:column;gap:8px;text-transform:none;letter-spacing:0;font:400 15.5px/1.5 var(--body);color:var(--ink-2)}
.pair .shot figcaption b{font:400 24px/1 var(--display);text-transform:uppercase;color:var(--ink);letter-spacing:.01em}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:clamp(48px,7vw,80px);border-top:2px solid var(--ink)}
.checks li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}
.checks .box{width:24px;height:24px;border:2px solid var(--ink);border-radius:6px;background:var(--ink);position:relative;margin-top:2px}
.checks .box::after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;border:solid var(--on-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.checks b{display:block;font-weight:800;font-size:16px}
.checks span{display:block;color:var(--ink-2);font-size:15px}

/* ---- modes ---- */
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:30em}
.modes div{border:1.5px solid var(--ink);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.modes b{font:400 21px/1 var(--display);text-transform:uppercase}
.modes span{font-size:13.5px;color:var(--ink-2);line-height:1.4}

/* ---- privacy band ---- */
.priv .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:end}
.nos{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.nos li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.nos b{font:400 24px/1 var(--display);text-transform:uppercase}
.nos span{font-size:14.5px;color:var(--ink-2);text-align:right}

/* ---- footer ---- */
.foot .wrap{display:flex;flex-direction:column;gap:22px;padding-block:44px calc(44px + env(safe-area-inset-bottom, 0px))}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot p{color:var(--on-ink-2);font-size:13.5px;max-width:52em}

/* ---- document pages (privacy, support) ---- */
.doc .wrap{max-width:760px}
.doc-head{display:flex;flex-direction:column;gap:14px;padding-block:clamp(40px,7vw,72px) 8px}
.doc-body{display:flex;flex-direction:column;gap:14px;padding-block:24px clamp(56px,8vw,96px)}
.doc-body h2{font:400 28px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-top:26px;text-wrap:balance}
.doc-body p,.doc-body li{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.doc-body strong{color:var(--ink)}
.doc-body ul{display:flex;flex-direction:column;gap:6px}
.doc-body ul li{position:relative;padding-left:22px}
.doc-body ul li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--ink);border-radius:2px}
.short{border:2px solid var(--ink);border-radius:16px;padding:18px 20px;font-size:17px;line-height:1.55}
.faq{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:800;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 26px/1 var(--body)}
.faq details[open] summary::after{content:"\2212"}
.faq details > div{display:flex;flex-direction:column;gap:10px;padding-bottom:20px}
.contact{display:flex;flex-direction:column;gap:10px;border:2px solid var(--ink);border-radius:16px;padding:20px}
.email{font:800 19px/1.3 var(--body);word-break:break-word;user-select:all}
.todo{background:#ffe066;color:var(--ink);padding:0 4px;border-radius:3px}

/* ---- narrow screens ---- */
@media (max-width:860px){
  .hero .wrap,.split,.split.flip,.priv .wrap{grid-template-columns:minmax(0,1fr)}
  .split.flip .shot{order:0}
  .hands{grid-template-columns:minmax(0,1fr)}
  .pair{grid-template-columns:minmax(0,1fr)}
  .checks{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .nav .opt{display:none}
}
@media (max-width:420px){
  .soon{font-size:12px;letter-spacing:.09em;padding:14px 18px}
  .takes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{gap:16px}
  .brand b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-mark{animation:none}
}