/* Freewill website. Shared styles for every page. Plain CSS, no build step.
   Colors, radii and type come from the app: cream ground, teal actions,
   salmon accents, Bangers headlines in caps, DM Sans body. */

:root{
  --cream:#F5F0E8;
  --cream-2:#EDE8DC;
  --wash:#EAF8FC;
  --teal:#1AA3B8;
  --teal-dark:#147F8E;
  --teal-deep:#0B5E6B;
  --navy:#1E4D63;
  --salmon:#FF8C7A;
  --salmon-soft:#FFE3DC;
  --ink:#2D2D2D;
  --muted:#6F6A64;
  --black:#000;
  --surface:rgba(255,255,255,.72);
  --line:rgba(26,163,184,.14);
  --radius:22px;
  --radius-sm:14px;
  --shadow:0 12px 32px rgba(14,94,107,.10),0 2px 6px rgba(14,94,107,.05);
  --shadow-lift:0 22px 48px rgba(14,94,107,.16),0 4px 10px rgba(14,94,107,.08);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --font-display:'Bangers',cursive;
  --font-body:'DM Sans',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--cream);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--salmon-soft);color:var(--black)}
:focus-visible{outline:3px solid var(--salmon);outline-offset:3px;border-radius:6px}

/* ── Type ──────────────────────────────────────────────────────────── */
.display{
  font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.04em;line-height:.95;
  color:var(--black);
}
.eyebrow{
  font-family:var(--font-body);font-size:12px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
.eyebrow.salmon{color:var(--salmon)}
.eyebrow.teal{color:var(--teal)}
.lead{font-size:19px;line-height:1.6;color:var(--ink)}
.muted{color:var(--muted)}

/* ── Pills (the app's STRETCH / STAGE 4 OF 7 badges) ──────────────── */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  line-height:1;white-space:nowrap;
}
.pill-salmon{background:var(--salmon);color:#fff}
.pill-teal{background:var(--teal);color:#fff}
.pill-cream{background:var(--cream);color:var(--teal-dark);border:1.5px solid var(--line)}

/* ── Buttons (the app's START and COMPLETE CHALLENGE) ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:16px;border:0;cursor:pointer;
  font-family:var(--font-display);font-size:19px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;text-decoration:none;
  color:#fff;background:linear-gradient(90deg,var(--teal),var(--teal-dark));
  box-shadow:0 10px 24px rgba(26,163,184,.32);
  transition:transform .25s var(--spring),box-shadow .25s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(26,163,184,.38);text-decoration:none}
.btn:active{transform:translateY(0) scale(.98)}
.btn-ghost{
  background:transparent;color:var(--teal);
  border:2px solid var(--teal);box-shadow:none;
}
.btn-ghost:hover{background:rgba(26,163,184,.08);box-shadow:none}
.btn-salmon{background:linear-gradient(90deg,#FF9A8A,var(--salmon));box-shadow:0 10px 24px rgba(255,140,122,.35)}
.btn-salmon:hover{box-shadow:0 16px 32px rgba(255,140,122,.42)}

/* App Store badge, used everywhere */
.store-badge{display:inline-block;transition:transform .25s var(--spring),opacity .2s}
.store-badge img{height:50px;width:auto}
.store-badge:hover{transform:translateY(-3px) scale(1.03)}

/* ── Cards (the app's Progress and Cove cards) ────────────────────── */
.card{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 26px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.card.salmon{background:linear-gradient(180deg,#FFF1EE,#FFE7E1);border-color:#FFC9BD}
.card.teal{background:linear-gradient(180deg,#F2FBFC,#E4F5F8);border-color:#C9ECF1}
.card-title{
  font-family:var(--font-display);font-size:26px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--black);line-height:1;margin-bottom:12px;
}

/* Wash: the app's cream-to-pale-teal gradient behind screens */
.wash{background:linear-gradient(180deg,var(--cream) 0%,var(--wash) 100%)}
.wash-up{background:linear-gradient(180deg,var(--wash) 0%,var(--cream) 100%)}

/* ── Nav ──────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:64px;padding:0 max(20px,5vw);
  background:rgba(245,240,232,.86);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(26,163,184,.10);
  transition:transform .35s var(--ease-out);
}
.nav.nav-hidden{transform:translateY(-100%)}
.logo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:25px;letter-spacing:.08em;
  color:var(--teal);text-decoration:none;line-height:1;
  transition:transform .3s var(--spring);
}
.logo:hover{transform:scale(1.06) rotate(-2deg);text-decoration:none}
.logo img{width:34px;height:34px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{
  font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--ink);
  padding:8px 2px;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--teal);border-color:var(--teal);text-decoration:none}

.nav-links a.nav-new{
  color:#fff;background:var(--salmon);border-radius:999px;padding:7px 13px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:0;
}
.nav-links a.nav-new:hover{background:#FF7A66;color:#fff}

/* ── Waves: a calm ripple (off for reduced motion) ────────────────── */
.wave.ripple{width:106%;max-width:none;margin-left:-3%;animation:waveDrift 8s ease-in-out infinite alternate}
.wave.ripple.down{animation-name:waveDriftDown;animation-duration:9s}
@keyframes waveDrift{from{transform:translate(0.8%,0)}to{transform:translate(-0.8%,-4px)}}
@keyframes waveDriftDown{from{transform:translate(-0.8%,0)}to{transform:translate(0.8%,4px)}}

@media(max-width:820px){
  .nav-links a:not(.nav-new){display:none}
}

/* ── Page header (inner pages) ────────────────────────────────────── */
.page-head{
  position:relative;overflow:hidden;
  padding:132px max(20px,5vw) 56px;text-align:center;
}
.page-head .eyebrow{margin-bottom:16px}
.page-head .display{font-size:clamp(46px,7vw,92px);margin-bottom:16px}
.page-head .lead{max-width:600px;margin:0 auto;color:var(--muted)}
.page-head .head-crab{
  width:clamp(96px,14vw,168px);height:auto;margin:0 auto 10px;
  filter:drop-shadow(0 14px 18px rgba(14,94,107,.16));
}
.page-wrap{max-width:720px;margin:0 auto;padding:0 max(20px,5vw) 90px}
.page-wrap .card{margin-bottom:16px}
.page-wrap .card p{margin-bottom:14px}
.page-wrap .card p:last-child{margin-bottom:0}
.page-wrap .card strong{color:var(--black)}
.card-sub{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-dark);margin:18px 0 6px}
.dash-list{list-style:none;padding:0;margin-bottom:14px}
.dash-list:last-child{margin-bottom:0}
.dash-list li{padding:4px 0 4px 22px;position:relative;line-height:1.55}
.dash-list li::before{
  content:"";position:absolute;left:0;top:13px;width:10px;height:10px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 3px rgba(26,163,184,.16);
}

/* ── Waves and ocean bits ─────────────────────────────────────────── */
.wave{display:block;width:100%;height:auto}
.ocean{position:relative;overflow:hidden;color:var(--cream);
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.22),transparent 60%),
    linear-gradient(180deg,#1BA7BC 0%,#1593A9 45%,#0E6E7E 100%);
}
.ocean::after{ /* dotted sand along the floor, like the Cove */
  content:"";position:absolute;left:0;right:0;bottom:0;height:26%;pointer-events:none;
  background-image:radial-gradient(rgba(245,240,232,.16) 1.4px,transparent 1.6px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 70%);mask-image:linear-gradient(180deg,transparent,#000 70%);
}
.rays{
  position:absolute;inset:-10% 0 auto 0;height:70%;pointer-events:none;z-index:0;
  background:
    linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 34%,transparent 40%),
    linear-gradient(80deg,transparent 55%,rgba(255,255,255,.06) 60%,transparent 66%),
    linear-gradient(95deg,transparent 72%,rgba(255,255,255,.05) 76%,transparent 82%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);
}
.bubble{
  position:absolute;border-radius:50%;z-index:1;pointer-events:none;
  border:1.5px solid rgba(245,240,232,.45);
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.3),transparent 55%);
  animation:bubbleRise var(--dur,14s) linear infinite;
  animation-delay:var(--delay,0s);
}
@keyframes bubbleRise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.9}
  50%{transform:translateY(-45vh) translateX(10px)}
  100%{transform:translateY(-90vh) translateX(-6px);opacity:0}
}
.seaweed{position:absolute;bottom:0;z-index:1;width:clamp(84px,10vw,150px);height:auto;transform-origin:bottom center;animation:sway 6.5s ease-in-out infinite}
.seaweed.alt{animation-duration:7.5s;animation-delay:-2s}
@keyframes sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}

/* ── Phone frame (the hero mockup and the Cove screens) ───────────── */
.phone{
  position:relative;width:var(--phone-w,270px);
  background:#111;border-radius:calc(var(--phone-w,270px) * .158);
  padding:calc(var(--phone-w,270px) * .022);
  border:2.5px solid #B8B8B8;
  box-shadow:0 28px 60px rgba(14,30,40,.32),0 8px 18px rgba(14,30,40,.16);
}
.phone::before{content:'';position:absolute;right:-5px;top:28%;width:3px;height:13%;background:#B8B8B8;border-radius:0 2px 2px 0}
.phone::after{content:'';position:absolute;left:-5px;top:22%;width:3px;height:10%;background:#B8B8B8;border-radius:2px 0 0 2px;box-shadow:0 calc(var(--phone-w,270px) * .13) 0 #B8B8B8}
.phone-screen{
  border-radius:calc(var(--phone-w,270px) * .138);overflow:hidden;
  aspect-ratio:1206/2622;background:var(--cream);
  transform:translateZ(0);
}
.phone-screen img,.phone-screen video{width:100%;height:100%;object-fit:cover;display:block}
.phone-screen picture{display:block;width:100%;height:100%}

/* ── Scroll reveal ────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal[data-delay="3"]{transition-delay:.36s}

/* ── Footer ───────────────────────────────────────────────────────── */
.footer{
  position:relative;background:var(--cream-2);
  border-top:1px solid rgba(0,0,0,.06);
  padding:34px max(20px,5vw) 30px;
}
.footer-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.footer .logo{font-size:22px}
.social{display:flex;gap:12px;align-items:center}
.social a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:rgba(26,26,26,.06);transition:background .15s,transform .2s var(--spring);
}
.social a:hover{background:rgba(26,163,184,.16);transform:translateY(-3px);text-decoration:none}
.social svg{width:18px;height:18px;fill:rgba(26,26,26,.62);stroke:none}
.social svg.stroke{fill:none;stroke:rgba(26,26,26,.62);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{font-size:13px;font-weight:600;color:rgba(26,26,26,.55)}
.footer-links a:hover{color:var(--teal);text-decoration:none}
.footer-copy{display:block;text-align:center;margin-top:22px;font-size:12px;color:rgba(26,26,26,.4)}
.footer-copy a{color:inherit}
@media(max-width:700px){
  .footer-row{flex-direction:column;text-align:center}
  .footer-links{justify-content:center;gap:10px 14px}
  .footer-links a{font-size:12px}
}

/* ── Motion safety ────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
  .bubble{display:none}
  .wave.ripple{animation:none}
  .wave.ripple{width:100%;margin-left:0}
}