/* ============================================================
   Sound Mind — soundmindapp.co
   Page styles. Design: Claude Design handoff 2026-08-29.
   Tokens live in tokens.css (authoritative, do not edit).
   ============================================================ */

/* ---- self-hosted fonts (no CDN at runtime) ---- */
@font-face{font-family:'Inter';src:url('fonts/Inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-500i.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}

html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--sm-color-background);font-family:var(--sm-font-sans);
     color:var(--sm-color-text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--sm-color-primary)}
a:hover{color:var(--sm-palette-burnt-orange-light)}

/* ---- reveal + progress-fill animation (once-only, reduced-motion aware) ---- */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0s);will-change:opacity,transform}
[data-reveal].is-visible{opacity:1;transform:none}
[data-fill]{transition:width 1.4s cubic-bezier(.22,1,.36,1) .4s}
[data-reveal]:not(.is-visible) [data-fill]{width:0!important}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  [data-fill]{transition:none}
  html{scroll-behavior:auto}
}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--sm-color-primary);color:#fff;text-decoration:none;
     font-size:16px;font-weight:600;padding:15px 32px;border-radius:var(--sm-radius-full);
     transition:background .2s ease}
.btn:hover{background:var(--sm-palette-burnt-orange-light);color:#fff}
.btn.sm{font-size:14px;padding:10px 20px}

/* ---- 0. floating nav ---- */
.nav{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:20px;padding:8px 8px 8px 10px;
  border-radius:var(--sm-radius-full);background:rgba(28,24,20,.55);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 4px 24px rgba(0,0,0,.18);
  max-width:calc(100% - 24px)}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-mark{width:32px;height:32px;border-radius:var(--sm-radius-full);
  background:var(--sm-palette-soft-white);display:flex;align-items:center;justify-content:center}
.nav-mark i{width:24px;height:24px;background:var(--sm-logo-mark) center/contain no-repeat}
.nav-brand span{font-family:var(--sm-font-serif);font-size:18px;color:#fff;letter-spacing:.01em}

/* ---- 1. hero ---- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero>picture img{position:absolute;left:0;right:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,13,.38) 0%,rgba(20,17,13,.10) 30%,rgba(20,17,13,.22) 62%,rgba(20,17,13,.62) 100%)}
.hero-inner{position:relative;text-align:center;padding:110px 24px 90px;max-width:880px;
  display:flex;flex-direction:column;align-items:center;gap:var(--sm-space-lg)}
.hero h1{margin:0;font-family:var(--sm-font-serif);font-weight:500;
  font-size:clamp(44px,6.5vw,78px);line-height:1.12;color:#fff;text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero h1 em{font-style:italic;margin-right:.12em}
.hero-sub{margin:0;max-width:560px;font-size:18px;line-height:1.65;color:rgba(255,255,255,.94);
  text-shadow:0 1px 12px rgba(0,0,0,.35);text-wrap:pretty}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:var(--sm-space-md);margin-top:var(--sm-space-sm)}
.hero-cta .btn{box-shadow:0 6px 24px rgba(0,0,0,.25)}
.micro{font-size:13px;color:rgba(255,255,255,.78)}

/* ---- 2. scripture band ---- */
.scripture{background:var(--sm-color-background);padding:128px 24px}
.scripture-inner{max-width:780px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--sm-space-xl)}
.scripture blockquote{margin:0;font-family:var(--sm-font-serif);
  font-size:clamp(24px,3vw,34px);line-height:1.55;color:var(--sm-color-text);text-wrap:balance}
.ref{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sm-color-primary)}
.rule{width:320px;max-width:60%;height:1px;background:var(--sm-color-divider)}
.scripture-support{margin:0;max-width:520px;font-size:16px;line-height:1.7;
  color:var(--sm-color-text-secondary);text-wrap:pretty}

/* ---- 3. tools for renewal ---- */
.tools{background:var(--sm-color-surface-alt);padding:112px 24px}
.tools-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sm-space-3xl)}
.tools-head{text-align:center;display:flex;flex-direction:column;gap:var(--sm-space-md);align-items:center}
.tools-head h2{margin:0;font-family:var(--sm-font-serif);font-weight:500;
  font-size:clamp(32px,4vw,44px);color:var(--sm-color-text)}
.tools-head p{margin:0;font-size:17px;color:var(--sm-color-text-secondary)}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sm-space-2xl) var(--sm-space-3xl)}
.tool{display:flex;flex-direction:column;gap:var(--sm-space-base)}
.phone{width:100%;aspect-ratio:9/19.5;background:var(--sm-palette-dark-bg);
  border-radius:40px;padding:9px;box-shadow:var(--sm-shadow-md)}
.phone-screen{width:100%;height:100%;border-radius:32px;overflow:hidden;background:var(--sm-color-surface)}
.phone-screen img{width:100%;height:100%;object-fit:cover}
.tool h3{margin:12px 0 0;padding:0 10px;font-size:18px;font-weight:600;color:var(--sm-color-text)}
.tool p{margin:0;padding:0 10px;font-size:15px;line-height:1.6;color:var(--sm-color-text-secondary);text-wrap:pretty}

/* ---- 4. habit building ---- */
.habit{background:var(--sm-color-background);padding:128px 24px}
.habit-inner{max-width:1160px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:var(--sm-space-4xl);align-items:center}
.habit-copy{display:flex;flex-direction:column;gap:var(--sm-space-lg);max-width:520px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sm-color-primary)}
.habit-copy h2{margin:0;font-family:var(--sm-font-serif);font-weight:500;
  font-size:clamp(32px,4vw,46px);line-height:1.2;color:var(--sm-color-text)}
.habit-copy h2 em{font-style:italic}
.habit-copy>p{margin:0;font-size:16px;line-height:1.7;color:var(--sm-color-text-secondary);text-wrap:pretty}
.progress-card{background:var(--sm-color-surface);border:1px solid var(--sm-color-border);
  border-radius:var(--sm-radius-lg);box-shadow:var(--sm-shadow-sm);padding:var(--sm-space-lg);
  display:flex;flex-direction:column;gap:var(--sm-space-md);margin-top:var(--sm-space-sm)}
.track{width:100%;height:6px;border-radius:var(--sm-radius-full);background:var(--sm-color-toggle-track);overflow:hidden}
.track-fill{height:100%;border-radius:var(--sm-radius-full);background:var(--sm-color-primary);width:38%}
.track-days{display:flex;justify-content:space-between;font-size:13px;color:var(--sm-color-text-secondary)}
.track-note{font-size:13px;color:var(--sm-color-text-muted);text-align:center}
.habit-card-col{display:flex;flex-direction:column;align-items:center;gap:var(--sm-space-lg)}
.dcard{position:relative;width:min(420px,100%);aspect-ratio:3/4;border-radius:var(--sm-radius-xl);
  overflow:hidden;box-shadow:var(--sm-shadow-lg)}
.dcard>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dcard-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,20,14,.42) 0%,rgba(24,20,14,.18) 45%,rgba(24,20,14,.52) 100%)}
.dcard-content{position:absolute;inset:0;padding:var(--sm-space-lg);display:flex;flex-direction:column}
.dcard-chip{align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 12px;border-radius:var(--sm-radius-full)}
.dcard-middle{flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:var(--sm-space-base);text-align:center;padding:var(--sm-space-base) var(--sm-space-xs)}
.dcard-verse{font-family:var(--sm-font-serif);margin:0;font-size:26px;line-height:1.5;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.35)}
.dcard-ref{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.dcard-lockup{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.8);line-height:1.5}
.dcard-caption{margin:0;max-width:400px;text-align:center;font-size:14px;line-height:1.6;
  color:var(--sm-color-text-secondary)}

/* ---- 5. get the app + footer ---- */
.get{position:relative;overflow:hidden;padding:136px 24px 48px}
.get-bg{position:absolute;left:0;right:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
.get-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(22,18,14,.78) 0%,rgba(22,18,14,.45) 55%,rgba(22,18,14,.55) 100%)}
.get-inner{position:relative;max-width:1140px;margin:0 auto}
.get-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:var(--sm-space-4xl);align-items:center}
.get-copy{display:flex;flex-direction:column;gap:var(--sm-space-lg);max-width:480px}
.get-copy h2{margin:0;font-family:var(--sm-font-serif);font-weight:500;
  font-size:clamp(34px,4vw,48px);line-height:1.2;color:#fff}
.get-copy h2 em{font-style:italic}
.get-copy>p{margin:0;font-size:17px;line-height:1.65;color:rgba(255,255,255,.88);text-wrap:pretty}
.get-cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sm-space-md)}
.get-cta .micro{color:rgba(255,255,255,.72)}
.get-verse{border-left:1px solid rgba(255,255,255,.35);padding-left:var(--sm-space-xl);max-width:460px}
.get-verse p{font-family:var(--sm-font-serif);margin:0 0 var(--sm-space-md);
  font-size:clamp(24px,2.4vw,30px);line-height:1.5;font-style:italic;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.4);text-wrap:pretty}
.get-verse .ref{color:#fff;letter-spacing:.14em}
.foot{margin-top:104px;border-top:1px solid rgba(255,255,255,.25);padding-top:var(--sm-space-xl);
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--sm-space-lg)}
.foot-id{display:flex;flex-direction:column;gap:var(--sm-space-md)}
.foot-brand{display:flex;align-items:center;gap:var(--sm-space-md)}
.foot-mark{width:40px;height:40px;border-radius:var(--sm-radius-md);
  background:var(--sm-palette-soft-white);display:flex;align-items:center;justify-content:center}
.foot-mark i{width:30px;height:30px;background:var(--sm-logo-mark) center/contain no-repeat}
.foot-brand span{font-family:var(--sm-font-serif);font-size:20px;color:#fff}
.foot-id small{font-size:13px;color:rgba(255,255,255,.7)}
.foot-id a{font-size:13px;color:rgba(255,255,255,.85)}
.foot-links{display:flex;gap:var(--sm-space-xl)}
.foot-links a{font-size:14px;color:rgba(255,255,255,.85);text-decoration:none}
.foot-links a:hover{color:var(--sm-palette-burnt-orange-light)}

/* ---- small screens: auto-fit minmax(420/380px) would overflow a 390px viewport ---- */
@media (max-width:479px){
  .habit-inner,.get-grid{grid-template-columns:1fr}
  .nav{gap:10px;padding-left:8px}
  .nav-brand span{display:none}
}