/* TrueTone waitlist — the app's "Mist" design system, ported to the web.
 *
 * Palette is taken from tailwind.config.js and src/theme/tokens.ts so the landing page
 * and the product look like the same thing. Do not introduce colours that aren't in
 * that file; if the app's palette moves, move this with it.
 *
 * Fonts are self-hosted from web/fonts/ (built by scripts/build-waitlist.mjs out of
 * node_modules/@expo-google-fonts). Nothing here may reference a third-party origin —
 * scripts/check-waitlist-copy.mjs fails the build if it does. */

@font-face{font-family:Fraunces;src:url(/fonts/fraunces-light.woff2)format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(/fonts/fraunces-light-italic.woff2)format("woff2");
  font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Fraunces;src:url(/fonts/fraunces-regular.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Mulish;src:url(/fonts/mulish-light.woff2)format("woff2");
  font-weight:300;font-display:swap}
@font-face{font-family:Mulish;src:url(/fonts/mulish-regular.woff2)format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:Mulish;src:url(/fonts/mulish-semibold.woff2)format("woff2");
  font-weight:600;font-display:swap}

:root{
  --mist:        #FBF7F2;   /* mist-100  */
  --mist-deep:   #EBE2D3;   /* mist-300  */
  --sand:        #DFC1AF;   /* rose-300  */
  --rose:        #F8EEE7;   /* rose-100  */
  --ink:         #221F1A;
  --ink-soft:    #6B655B;   /* ink.soft / mauve-600 */
  --sage:        #7E9174;
  --clay:        #C1875F;
  --mauve:       #8A8378;   /* mauve-500 */
  --deep:        #3F3A33;   /* mauve-700 — the CTA accent */
  --glass:       rgba(255,252,248,0.52);
  --glass-line:  rgba(255,255,255,0.75);
  --shadow:      0 20px 60px -20px rgba(63,58,51,0.24);

  --display: "Fraunces", Georgia, serif;
  --body:    "Mulish", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-weight:300;
  color:var(--ink);
  background:var(--mist);
  line-height:1.6;
  overflow-x:hidden;
}

/* ---- ambient mesh ---- */
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mesh i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.65}
.m1{width:60vw;height:60vw;left:-18vw;top:-22vw;background:#F3DCCB}
.m2{width:52vw;height:52vw;right:-16vw;top:12vh;background:#E6D3BE}
.m3{width:46vw;height:46vw;left:8vw;bottom:-20vw;background:#D8E0D0}
.m4{width:34vw;height:34vw;right:6vw;bottom:2vh;background:var(--mist-deep)}

.wrap{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:0 24px}

/* ---- type ---- */
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-0.015em;margin:0}
h1{font-size:clamp(2.6rem,7vw,4.5rem);line-height:1.04}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.15}
h3{font-size:1.12rem;font-weight:400}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;
  font-weight:600;color:var(--ink-soft);margin:0 0 18px}
p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,2.2vw,1.28rem);color:var(--ink-soft);max-width:34em}

/* ---- glass ---- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid var(--glass-line);
  border-radius:26px;
  box-shadow:var(--shadow);
}

/* ---- header ---- */
header{padding:46px 0 0}
.mark{display:flex;align-items:center;gap:11px;
  font-family:var(--display);font-size:1.22rem;letter-spacing:-0.01em}
.dot{width:19px;height:19px;border-radius:50%;
  background:conic-gradient(from 200deg,var(--clay),var(--sand),var(--sage),var(--mist-deep),var(--clay))}

/* ---- hero ---- */
.hero{padding:clamp(56px,11vh,104px) 0 20px}
.hero h1{max-width:12ch}
.hero h1 em{font-style:italic;color:var(--deep)}
.hero .lede{margin-top:26px}

.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;padding:0;list-style:none}
.facts li{font-size:.79rem;letter-spacing:.02em;color:var(--ink-soft);
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid var(--glass-line)}

/* ---- how it works: three steps ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin:56px 0}
.step{padding:28px 26px}
.step .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  margin-bottom:16px;font-size:.82rem;font-weight:600;color:var(--deep);
  background:rgba(255,255,255,.72);border:1px solid var(--glass-line)}
.step h3{margin-bottom:8px}
.step p{font-size:.93rem;color:var(--ink-soft);margin:0}

/* ---- the routine: the page's signature moment ---- */
.routine{margin:56px 0;padding:34px 30px 30px}
.routine h2{max-width:22ch;margin-bottom:8px}
.routine .example{font-size:.82rem;color:var(--ink-soft);margin:0 0 26px}
.plan{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.plan section{padding:22px 22px 24px;border-radius:20px;
  background:rgba(255,255,255,.46);border:1px solid var(--glass-line)}
.plan h3{display:flex;align-items:center;gap:9px;font-size:.74rem;font-weight:600;
  font-family:var(--body);text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);margin-bottom:16px}
.plan h3::before{content:"";width:9px;height:9px;border-radius:50%}
.plan .am h3::before{background:var(--clay)}
.plan .pm h3::before{background:var(--mauve)}
.plan ol{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:13px}
.plan li{counter-increment:step;position:relative;padding-left:26px;font-size:.94rem}
.plan li::before{content:counter(step);position:absolute;left:0;top:.05em;
  font-size:.72rem;font-weight:600;color:var(--ink-soft)}
.plan .why{display:block;font-size:.82rem;color:var(--ink-soft)}

/* ---- makeup: honestly marked as not here yet ---- */
.soon{display:inline-block;margin-left:10px;padding:4px 11px;border-radius:999px;
  font-family:var(--body);font-size:.64rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);vertical-align:middle;
  background:rgba(255,255,255,.6);border:1px solid var(--glass-line)}

/* ---- why it's different ---- */
/* Explicit 2×2 rather than auto-fit: four cards in an auto-fit track wrap 3+1 at this
   max-width and leave an orphan on the second row. */
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:56px 0}
.card{padding:28px 26px}
.card h3{margin-bottom:9px}
.card p{font-size:.93rem;color:var(--ink-soft);margin:0}

/* ---- signature: the boundary ---- */
.boundary{margin:74px 0;padding:34px 30px 30px}
.boundary .eyebrow{margin-bottom:10px}
.boundary h2{max-width:20ch;margin-bottom:26px}

.stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;
  gap:18px;align-items:center;min-height:190px}
.side{text-align:center}
.side small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);font-weight:600;margin-bottom:16px}

.phone{width:96px;height:150px;margin:0 auto;border-radius:20px;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.6);
  position:relative;overflow:hidden;display:grid;place-items:center}
.face{width:52px;height:66px;border-radius:50% 50% 46% 46%;
  background:linear-gradient(160deg,var(--clay),var(--mauve));opacity:.9}
/* The loop rests in its finished state — photo gone, bands present — because that is the
   claim the section makes. An even split left the whole stage blank on arrival. */
.face.fading{animation:vanish 7s ease-in-out infinite}
@keyframes vanish{
  0%,22%{opacity:.9;transform:scale(1);filter:blur(0)}
  40%,100%{opacity:0;transform:scale(.86);filter:blur(9px)}
}

.divider{align-self:stretch;width:1px;border-left:1.5px dashed var(--sand);position:relative}
.divider span{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  white-space:nowrap;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;
  background:var(--mist);padding:5px 12px;border-radius:999px}

.bands{display:flex;flex-direction:column;gap:9px;align-items:flex-start;max-width:210px;margin:0 auto}
.band{font-size:.79rem;padding:6px 15px;border-radius:999px;color:var(--ink);
  border:1px solid rgba(255,255,255,.8);opacity:0}
.band b{font-weight:600}
.b1{background:rgba(126,145,116,.30)}
.b2{background:rgba(193,135,95,.26)}
.b3{background:rgba(138,131,120,.26)}
.drifting .band{animation:drift 7s ease-in-out infinite}
.drifting .b2{animation-delay:.34s}
.drifting .b3{animation-delay:.68s}
@keyframes drift{
  0%,26%{opacity:0;transform:translateX(-26px)}
  44%,100%{opacity:1;transform:translateX(0)}
}

.boundary footer{margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.7);
  font-size:.88rem;color:var(--ink-soft);max-width:52em}

/* ---- honest limits ---- */
.limits{margin:56px 0;padding:32px 30px}
.limits h2{margin-bottom:20px}
.limits ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
/* Block, not flex: the <strong> lead-in has to run inline with the sentence that follows
   it. As a flex item it becomes its own column and the bullet text wraps beside it. */
.limits li{position:relative;padding-left:20px;font-size:.94rem;color:var(--ink-soft)}
.limits li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--sand)}
.limits strong{color:var(--ink);font-weight:600}

/* ---- signup ---- */
.signup{margin:70px 0 40px;padding:40px 32px;text-align:center}
.signup h2{max-width:18ch;margin:0 auto 14px}
.signup .lede{margin:0 auto 30px;font-size:1rem}

.embed{max-width:420px;margin:0 auto}
form{display:grid;gap:12px;text-align:left}
label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
input[type=email]{width:100%;padding:14px 17px;border-radius:14px;
  font-family:var(--body);font-size:1rem;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.7);color:var(--ink)}
input[type=email]::placeholder{color:var(--ink-soft);opacity:.65}
input[type=email]:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.84rem;color:var(--ink-soft);
  text-transform:none;letter-spacing:0;font-weight:300}
.check input{margin-top:.32em;accent-color:var(--deep);flex:0 0 auto}
.check input:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
button{padding:15px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(145deg,var(--ink-soft),var(--deep));
  color:#fff;font-family:var(--body);font-size:.98rem;font-weight:600;letter-spacing:.02em;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(63,58,51,.55)}
button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
button:disabled{opacity:.6;cursor:progress;transform:none}

/* Status line for the form. Never collapses, so the layout doesn't jump on submit. */
.status{min-height:1.4em;margin:14px 0 0;font-size:.86rem;text-align:center}
.status[data-tone="ok"]{color:var(--sage);font-weight:600}
.status[data-tone="err"]{color:#8A3F1E;font-weight:600}

.fineprint{font-size:.78rem;color:var(--ink-soft);margin:16px auto 0;max-width:38em}

/* ---- footer ---- */
.foot{padding:40px 0 60px;font-size:.79rem;color:var(--ink-soft);
  border-top:1px solid rgba(255,255,255,.7);margin-top:20px}
.foot p{margin:0 0 .6em;max-width:56em}
.foot a{color:var(--deep)}

@media (max-width:620px){
  .plan{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .stage{grid-template-columns:1fr;gap:26px;text-align:center}
  .divider{width:100%;height:1px;border-left:0;border-top:1.5px dashed var(--sand)}
  .divider span{transform:translate(-50%,-50%)}
  .bands{align-items:center}
  .drifting .band{animation-name:drift-v}
  @keyframes drift-v{
    0%,26%{opacity:0;transform:translateY(-16px)}
    44%,100%{opacity:1;transform:translateY(0)}
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .band{opacity:1}
  .face{opacity:.25;filter:blur(6px)}
}