/* Thrive prelaunch waitlist site. Static composition: every scene at rest with --p
   at 0 and no transforms. motion.css reads --p; this file never does. */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
  background: var(--deep);
  color: var(--ink);
  font-family: var(--font-body);
}

:root {
  --paper: #edf0e6;
  --ink: #061711;
  --ink-soft: #33493f;
  --jade: #b8d9c7;
  --deep: #08120d;
  --muted: #a6bab0;
  --ivory: #edf0e0;

  --font-display: 'Zen Maru Gothic', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --vh: 100dvh;
  --motion: 1;
}

/* A scene is a sticky stage plus copy in normal flow, both direct children of
   main (display: contents keeps the wrapper for ids and --p only). The stage
   sticks at the top and stays there under everything after it, so stages pile
   up: the next one slides over the one before, and no scene ever scrolls away.
   --track is how many viewports the scene's copy spans; the stage is alone for
   (track - 1) viewports, and the next stage covers it over the last one. */
.scene {
  display: contents;
  --p: 0;
  --pe: 0.5;
}

.stage {
  position: sticky;
  top: 0;
  height: var(--vh);
  overflow: hidden;
  contain: paint;
}

.stage.covered {
  visibility: hidden;
}

.copy {
  position: relative;
  margin-top: calc(-1 * var(--vh));
  min-height: calc(var(--track) * var(--vh));
}

 /* A layer travels +amp to -amp over its scene's whole timeline (motion.css), so
   its overscan above and below the stage is exactly that amplitude: no edge can
   show at any scroll position. Backgrounds drift 15% of the viewport; foreground
   cutouts pass at 25%. Mobile caps both at 24px. */
.layer {
  --amp: calc(var(--vh) * .15);
  --overscan: 15%;
  position: absolute;
  inset: calc(-1 * var(--overscan));
  width: calc(100% + 2 * var(--overscan));
  height: calc(100% + 2 * var(--overscan));
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  pointer-events: none;
}

.layer.fg {
  --amp: calc(var(--vh) * .25);
  --overscan: 25%;
}

.reveal {
  --amp: calc(var(--vh) * .1);
}

/* Every stage after the first enters through a painted, wandering edge
   (art/edge-mask.webp, alpha: clear at the top, solid at the bottom) unioned with
   a solid block below it. The stage before is still pinned underneath, so the
   clear part of the strip always reveals real art, never page ground. */
.scene + .scene .stage {
  --join-strip: 28%;
  /* --k (motion.css) slides the strip up and out over the first stretch of the
     scene once it has pinned, so the edge exists only while the stage arrives. */
  --k: 0;
  -webkit-mask-image: url('art/edge-mask.webp'), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--join-strip), 100% calc(100% - var(--join-strip) * (1 - var(--k)) + 6px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 calc(-1 * var(--join-strip) * var(--k)), bottom;
  -webkit-mask-composite: source-over, source-over;
  mask-image: url('art/edge-mask.webp'), linear-gradient(#000, #000);
  mask-size: 100% var(--join-strip), 100% calc(100% - var(--join-strip) * (1 - var(--k)) + 6px);
  mask-repeat: no-repeat, no-repeat;
  mask-position: 0 calc(-1 * var(--join-strip) * var(--k)), bottom;
  mask-composite: add;
}

/* The waterline: a tighter edge, so the surface replaces the bank in one pass
   rather than a long double exposure of trees and rays. */
#underwater .stage {
  --join-strip: 18%;
}

#underwater .stage .layer.bg {
  --fy: 0%;
}

.mist,
.tint,
.deepen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mist {
  background: linear-gradient(to top, var(--paper) 0%, transparent 60%);
  opacity: 0;
}

.tint {
  background: #0f3a3a;
  mix-blend-mode: multiply;
  opacity: 0;
}

/* The lower half of the water darkens into the ground the closing sits on.
   Static: reduced motion needs it too. Rocks still read through the top of it. */
.deepen {
  background: linear-gradient(to bottom, transparent 0 38%, rgba(8, 18, 13, 0.55) 62%, var(--deep) 100%);
}

/* Persistent header: white in difference blend reads dark on the pale sky and
   light on the water. */
.brand,
.status {
  position: fixed;
  top: 24px;
  z-index: 50;
  color: #fff;
  mix-blend-mode: difference;
  text-decoration: none;
  font-family: var(--font-body);
}

.brand {
  left: 24px;
  font-size: 15px;
  font-weight: 500;
}

.status {
  right: 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hero, over the ivory sky, top-left. Vertical padding reads the frozen --vh so
   the keyboard (which only shrinks the live viewport) never moves the form. */
.copy.hero {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(var(--vh) * .16) 6vw calc(var(--vh) * .4);
}

.copy.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -10vw;
  top: 0;
  width: min(78vw, 1100px);
  height: calc(var(--vh) * 1.05);
  background: radial-gradient(closest-side, rgba(237, 240, 230, 0.88) 45%, rgba(237, 240, 230, 0.5) 72%, rgba(237, 240, 230, 0) 100%);
  pointer-events: none;
}

/* Three sentences; each one is an inline block so a line only breaks between
   sentences unless a sentence is wider than the column. The column stops short
   of the phone on the right. */
.hero h1 {
  margin: 0 0 24px;
  max-width: 56vw;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 84px);
  line-height: 1.05;
  color: var(--ink);
}

.hero h1 span {
  display: inline-block;
  text-wrap: balance;
}

.hero .sub {
  margin: 0 0 32px;
  max-width: 34ch;
  font-size: 25px;
  color: var(--ink);
}

/* Dark ink for the small text over the pale mountains. */
.hero form.join label,
.hero form.join .note,
.hero .cue {
  color: var(--ink-soft);
}

.hero .cue {
  margin: 24px 0 0;
  font-size: 14px;
}

/* The welcome screen, right of the headline over the pines, so the first thing the
   visitor sees says what Thrive is. */
.copy.hero .hero-phone {
  position: absolute;
  right: 9vw;
  top: calc(var(--vh) * .12);
  width: clamp(220px, 21vw, 320px);
  margin: 0;
}

/* Story: the intro top-left over the misty sky, then three demo rows over the
   lake, then the mid-page form. The copy's own height sets the scene length. */
.copy.story {
  padding: calc(var(--vh) * .3) 8vw calc(var(--vh) * .5);
}

.story .intro {
  max-width: 620px;
}

.story .text {
  position: relative;
  isolation: isolate;
}

.story .text::before {
  content: '';
  position: absolute;
  inset: -22% -16% -22% -20%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--paper) 52%, rgba(237, 240, 230, 0.75) 76%, rgba(237, 240, 230, 0) 100%);
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.story h2 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.05;
  text-wrap: balance;
  color: var(--ink);
}

.story .body {
  margin: 0 0 24px;
  max-width: 46ch;
  font-size: 21px;
  color: var(--ink);
}

.story h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  text-wrap: balance;
  color: var(--ink);
}

.reveal {
  margin: calc(var(--vh) * .08) 0 0;
  justify-self: center;
  width: clamp(240px, 23vw, 340px);
}

.reveal img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
  border: 1px solid rgba(184, 217, 199, 0.3);
  box-shadow: 0 30px 70px rgba(6, 23, 17, 0.4);
}

/* Transition bands: painted cutouts in front of the joins. Clouds, mist and fog hang off the top of the incoming scene's copy block, which paints
   above both stages and carries no mask, so they cover the card's edge as it
   arrives and then drift away as the scene settles. Their amplitude is negative:
   they lag the card on entry and catch up during the dwell. The bubbles live in
   the water stage itself, behind the koi. */
.band {
  position: absolute;
  left: -5%;
  width: 110%;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.copy .band {
  --amp: calc(var(--vh) * -.1);
}

.story .text,
.demo,
.reveal,
.closing {
  position: relative;
  z-index: 1;
}

.band.clouds {
  top: calc(var(--vh) * -.22);
  opacity: .95;
}

.band.mist {
  top: calc(var(--vh) * -.44);
}

.band.fog {
  top: calc(var(--vh) * -.3);
  opacity: .9;
}

.band.bubbles {
  --amp: calc(var(--vh) * .3);
  left: 8%;
  width: 62%;
  top: 22%;
  opacity: .34;
}

/* Koi, resting right of centre in the upper water. */
.koi {
  position: absolute;
  top: 14%;
  right: 12%;
  width: 620px;
  max-width: 55%;
}

.koi img {
  display: block;
  width: 100%;
  height: auto;
}

/* The hand. On desktop it lives in the pinned stage, bottom right, and rises
   into place (motion.css) before the form arrives. On mobile the in-flow copy
   carries a second image between the words and the form instead. The aspect
   ratio gives the lazy image a box before it loads, so it can load at all. */
.hand {
  aspect-ratio: 1309 / 1979;
}

.hand-stage {
  position: absolute;
  right: 6vw;
  bottom: calc(var(--vh) * -.06);
  height: calc(var(--vh) * .92);
  width: auto;
}

.hand-flow {
  display: none;
}

/* The underwater copy: a quiet stretch while the koi swims, then the closing
   fills the last viewport and the page ends there, so the words, the form and
   the hand hold still together. */
.copy.under {
  display: flex;
  flex-direction: column;
}

.under .drift {
  flex: 1 0 auto;
}

.closing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--vh);
  padding: calc(var(--vh) * .1) 4vw calc(var(--vh) * .06) 8vw;
  max-width: 760px;
}

.closing h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.08;
  text-wrap: balance;
  color: var(--ivory);
}

.closing .sub {
  margin: 0 0 32px;
  max-width: 36ch;
  font-size: 21px;
  color: var(--ivory);
}

/* The closing words sit on light rays and bubbles; a soft pool of deep water
   behind them keeps every line readable. */
.closing .text {
  position: relative;
  isolation: isolate;
}

.closing .text::before,
.founder::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -24% -18% -20% -22%;
  background: radial-gradient(closest-side, rgba(8, 18, 13, 0.72) 45%, rgba(8, 18, 13, 0.4) 72%, rgba(8, 18, 13, 0) 100%);
  pointer-events: none;
}

.closing form.join label,
.closing form.join .note,
.closing footer p,
.closing footer a {
  color: #cfdcd5;
}

.closing footer {
  margin-top: calc(var(--vh) * .1);
}

.closing footer p {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--muted);
}

.closing footer a {
  font-size: 13px;
  color: var(--muted);
}

/* Forms: normal flow, never sticky or fixed, so the keyboard cannot move them. */
form.join {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
}

form.join label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

form.join input[type='email'] {
  height: 54px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(184, 217, 199, 0.3);
  background: rgba(20, 31, 26, 0.96);
  color: var(--ivory);
  font-size: 16px;
  font-family: var(--font-body);
}

form.join input[type='email']::placeholder {
  color: var(--muted);
}

form.join input[aria-invalid='true'] {
  border-color: #e0a6a6;
}

form.join .hp {
  position: absolute;
  left: -9999px;
}

form.join button {
  margin-top: 12px;
  height: 54px;
  border: none;
  border-radius: 12px;
  background: var(--jade);
  color: var(--deep);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
}

form.join button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

form.join .note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}

:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

/* Tablet and small laptops: keep the words and the hand apart. */
@media (min-width: 768px) and (max-width: 1199px) {
  .closing {
    max-width: 48vw;
  }

  .closing form.join {
    max-width: 340px;
  }

  .hand-stage {
    right: 2vw;
    height: calc(var(--vh) * .8);
  }
}

@media (max-width: 767px) {
  .layer,
  .layer.fg,
  .reveal,
  .band {
    --amp: 24px;
  }

  .copy .band {
    --amp: -24px;
  }

  .band.clouds {
    top: calc(var(--vh) * -.12);
  }

  .band.mist {
    top: calc(var(--vh) * -.24);
  }

  .band.fog {
    top: calc(var(--vh) * -.16);
  }

  .band.bubbles {
    left: 10%;
    width: 80%;
    opacity: .26;
  }

  .scene + .scene .stage {
    --join-strip: 22%;
  }

  #underwater .stage {
    --join-strip: 16%;
  }

  #underwater {
    --track: 2.5;
  }

  .brand,
  .status {
    top: 16px;
  }

  .brand {
    left: 16px;
  }

  .status {
    right: 16px;
    font-size: 11px;
  }

  .copy.hero,
  .copy.story,
  .closing {
    padding-left: 6vw;
    padding-right: 6vw;
    max-width: none;
  }

  .copy.hero {
    padding-top: calc(var(--vh) * .14);
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(40px, 11vw, 48px);
  }

  .copy.story {
    display: block;
    padding-top: calc(var(--vh) * .26);
  }

  .story .text::before {
    inset: -10% -10% -6% -10%;
  }

  .story h2 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .reveal {
    width: 62vw;
    margin: 36px auto 0;
  }

  .copy.hero .hero-phone {
    position: static;
    width: 58vw;
    margin: 40px auto 0;
    align-self: center;
  }

  .hero .sub,
  .story .body,
  .closing .sub {
    max-width: none;
  }

  form.join {
    max-width: none;
  }

  #mountains .stage .layer.bg {
    --fy: 30%;
  }

  #mountains .stage .layer.fg {
    --fy: 65%;
  }

  #riverbank .stage .layer.bg {
    --fy: 35%;
  }

  #underwater .stage .layer.bg {
    --fy: 10%;
  }

  #underwater .stage .layer.fg {
    --fy: 75%;
  }

  .koi {
    top: 16%;
    right: 8%;
    width: 43vw;
    max-width: none;
  }

  .hand-stage {
    display: none;
  }

  .hand-flow {
    display: block;
    width: 64vw;
    height: auto;
    margin: 0 auto 28px;
    /* The photo ends at the wrist; let it fade rather than stop on a line. */
    -webkit-mask-image: linear-gradient(#000 78%, transparent 100%);
    mask-image: linear-gradient(#000 78%, transparent 100%);
  }

  .closing {
    text-align: center;
    min-height: 0;
    padding-top: calc(var(--vh) * .08);
  }

  .closing h2 {
    font-size: clamp(34px, 9vw, 44px);
  }

  .closing form.join {
    margin: 0 auto;
    text-align: left;
  }
}

/* Header backing: a strip of blur that fades out downward, so copy scrolling
   under the brand and status stays out of their way. The words keep their
   difference blend on top of it. */
.veil {
  position: fixed;
  z-index: 49;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
  pointer-events: none;
}

/* Header pill: takes the status's place once no form is on screen (site.js sets
   html.show-cta), and takes the visitor to the closing form. */
.cta {
  position: fixed;
  z-index: 51;
  top: 16px;
  right: 20px;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--jade);
  color: var(--deep);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(6, 23, 17, 0.25);
  opacity: 0;
  visibility: hidden;
  translate: 0 -8px;
  transition: opacity .3s, translate .3s, visibility 0s .3s;
}

.status {
  transition: opacity .3s;
}

.show-cta .cta {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity .3s, translate .3s;
}

.show-cta .status {
  opacity: 0;
}

/* Demo rows: words and phone side by side, the phone switching sides each row. */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 520px) auto;
  justify-content: space-between;
  align-items: center;
  column-gap: 6vw;
  max-width: 1120px;
  margin: calc(var(--vh) * .22) auto 0;
}

#map .text {
  order: 2;
}

.demo .body,
.demos-cta .body {
  font-size: 19px;
}

.demos-cta {
  max-width: 460px;
  margin: calc(var(--vh) * .24) auto 0;
  text-align: center;
}

.demos-cta form.join {
  margin: 0 auto;
  text-align: left;
}

.demos-cta form.join label,
.demos-cta form.join .note {
  color: var(--ink-soft);
}

/* Goal gallery: app-style cards on the lake. Focus is ochre, next step teal,
   as in the map. */
.goals {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: calc(var(--vh) * .24) auto 0;
}

.goals .text {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.goal-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.goal-cards li {
  padding: 20px 20px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(11, 11, 12, 0.88);
  box-shadow: 0 18px 40px rgba(6, 23, 17, 0.28);
  color: #f4f4f2;
  transition: translate .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}

.goal-cards li:hover {
  translate: 0 -4px;
  box-shadow: 0 24px 48px rgba(6, 23, 17, 0.36);
}

.goal-cards b {
  display: block;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 500;
}

.goal-cards span {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.4;
}

.goal-cards span::before {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 500;
}

.goal-cards .f::before {
  content: '■  Focus here';
  color: #ddb575;
}

.goal-cards .n::before {
  content: '●  Next step';
  color: #8ccbbf;
}

/* Under the water: the founder's note and the questions, on deep-water pools
   and glass, before the closing. */
/* Stacked: the note first, then the questions, in one reading column. */
.deep {
  position: relative;
  z-index: 1;
  display: grid;
  row-gap: calc(var(--vh) * .14);
  max-width: calc(680px + 16vw);
  margin-top: calc(var(--vh) * .3);
  padding: 0 8vw;
  color: var(--ivory);
}

.deep h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
}

.founder {
  position: relative;
  isolation: isolate;
}

.founder p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #dbe6e0;
}

.founder .sign {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ivory);
}

.faq details {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(184, 217, 199, 0.18);
  background: rgba(8, 18, 13, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  color: var(--jade);
  font-weight: 400;
}

.faq details[open] summary::after {
  content: '–';
}

.faq details p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 16px;
  line-height: 1.55;
  color: #cfdcd5;
}

.faq a {
  color: var(--jade);
}

/* The phones. Drawn at the app's 393pt width: --u is one point at the phone's
   current size, so every length inside is a multiple of it. */
.phone {
  --pw: 300px;
  --u: calc(var(--pw) / 393);
  --fg: #f4f4f2;
  --mute: rgba(244, 244, 242, 0.55);
  --line: rgba(255, 255, 255, 0.09);
  --ochre: #cfa35c;
  --ochre-soft: #ddb575;
  --teal: #72b8ac;
  --teal-soft: #8ccbbf;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  position: relative;
  width: var(--pw);
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border-radius: calc(46 * var(--u));
  border: 1px solid rgba(184, 217, 199, 0.3);
  background: #0b0b0c;
  box-shadow: 0 30px 70px rgba(6, 23, 17, 0.45);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: calc(15 * var(--u));
  line-height: 1.35;
  isolation: isolate;
}

.phone p {
  margin: 0;
}

.phone em {
  font-style: normal;
}

.phone > *,
.phone [style*='--x'] {
  position: absolute;
}

.phone [style*='--x'] {
  left: calc(var(--x) * 10 * var(--u));
  top: calc(var(--y) * 10 * var(--u));
  width: calc(var(--w) * 10 * var(--u));
  height: calc(var(--h) * 10 * var(--u));
}

/* Closes each loop: a dark sheet fades over the screen while it resets. */
.phone::after {
  content: '';
  position: absolute;
  z-index: 9;
  inset: 0;
  background: #0b0b0c;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}

.phone.out::after {
  opacity: 1;
}

.phone .bar {
  z-index: 3;
  top: calc(14 * var(--u));
  left: calc(40 * var(--u));
  right: calc(40 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phone .bar span {
  font-size: calc(15 * var(--u));
  font-weight: 600;
}

.phone .bar b {
  font-size: calc(10 * var(--u));
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--mute);
}

.phone .bar i {
  width: calc(26 * var(--u));
  height: calc(12 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--fg);
}

.phone .art {
  inset: 0 0 auto;
  height: calc(240 * var(--u));
  background: url('art/mountains-1600.webp') 60% 30% / cover;
  filter: grayscale(1) brightness(.42) contrast(1.15);
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
}

.day .art {
  background: url('art/koi-800.webp') right calc(-30 * var(--u)) top calc(-40 * var(--u)) / calc(260 * var(--u)) auto no-repeat;
  filter: brightness(.55) saturate(.8);
}

.phone .tabs {
  z-index: 4;
  left: calc(19 * var(--u));
  right: calc(19 * var(--u));
  top: calc(761 * var(--u));
  height: calc(65 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: calc(33 * var(--u));
  border: 1px solid var(--line);
  background: rgba(28, 28, 30, 0.9);
}

.phone .tabs span {
  padding: calc(16 * var(--u)) calc(13 * var(--u));
  border-radius: calc(20 * var(--u));
  font-family: var(--mono);
  font-size: calc(10 * var(--u));
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mute);
}

.phone .tabs span.on {
  background: var(--fg);
  color: #0b0b0c;
}

.phone .tabs i {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  border: 1.5px solid var(--fg);
}

/* Assistant */
.assistant {
  background: radial-gradient(circle at 50% 78%, #17231f 0, #0b0b0c 62%);
}

.assistant .say {
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  font-size: calc(19 * var(--u));
}

.assistant .say.a {
  font-size: calc(17 * var(--u));
  color: rgba(244, 244, 242, 0.7);
}

.assistant .say.a::before {
  content: 'Thrive';
  display: block;
  margin-bottom: calc(4 * var(--u));
  font-family: var(--mono);
  font-size: calc(10 * var(--u));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute);
}

.assistant .u1 { top: calc(78 * var(--u)); }
.assistant .a1 { top: calc(214 * var(--u)); }
.assistant .u2 { top: calc(296 * var(--u)); }
.assistant .a2 { top: calc(346 * var(--u)); }

.assistant .notes {
  top: calc(412 * var(--u));
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  display: grid;
  gap: calc(8 * var(--u));
}

.phone .note {
  padding: calc(10 * var(--u)) calc(13 * var(--u));
  border-radius: calc(12 * var(--u));
  border: 1px solid var(--line);
  background: #1c1c1d;
  font-size: calc(14 * var(--u));
}

.phone em {
  display: block;
  margin-bottom: calc(3 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 500;
  color: var(--mute);
}

.phone .focus,
.phone .pin,
.phone .focusrow {
  border-color: rgba(207, 163, 92, 0.32);
  background: #33291c;
}

.phone .next {
  border-color: rgba(114, 184, 172, 0.32);
  background: #1b2b28;
}

.phone .focus em,
.phone .pin em,
.phone .focusrow em {
  color: var(--ochre-soft);
}

.phone .next em {
  color: var(--teal-soft);
}

.phone .focus em::before,
.phone .pin em::before,
.phone .focusrow em::before,
.phone .next em::before {
  content: '';
  display: inline-block;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  margin-right: calc(6 * var(--u));
  background: var(--ochre);
}

.phone .next em::before {
  border-radius: 50%;
  background: var(--teal);
}

.assistant .orb {
  left: 50%;
  top: calc(600 * var(--u));
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  margin-left: calc(-40 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(244, 244, 242, 0.85);
  box-shadow: 0 0 calc(40 * var(--u)) rgba(244, 244, 242, 0.12);
}

.assistant .orb span {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 50%;
  background: var(--fg);
}

.assistant .state {
  top: calc(700 * var(--u));
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: calc(11 * var(--u));
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Flow map */
.flow .back {
  z-index: 2;
  top: calc(62 * var(--u));
  left: calc(20 * var(--u));
  color: var(--mute);
}

.flow .title {
  z-index: 2;
  top: calc(94 * var(--u));
  left: calc(20 * var(--u));
  font-size: calc(27 * var(--u));
  font-weight: 300;
  white-space: nowrap;
}

.flow .subtitle {
  z-index: 2;
  top: calc(132 * var(--u));
  left: calc(20 * var(--u));
  color: var(--mute);
}

.flow .world {
  inset: 0;
}

.phone .card {
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  border: 1px solid var(--line);
  background: #1c1c1d;
}

.phone .card p {
  font-size: calc(15 * var(--u));
}

.phone .card small {
  display: block;
  margin-top: calc(6 * var(--u));
  font-size: calc(12 * var(--u));
  color: var(--mute);
}

.flow .start {
  display: block;
  margin-top: calc(8 * var(--u));
  height: calc(32 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--teal);
  color: #0b0b0c;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: calc(32 * var(--u));
  text-align: center;
}

.flow .card p.task {
  position: relative;
  margin-top: calc(9 * var(--u));
  padding-left: calc(26 * var(--u));
}

.flow .task::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(2 * var(--u));
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  border-radius: 50%;
  border: 1.5px solid var(--mute);
}

.flow .ln {
  width: calc(var(--w, 0) * 10 * var(--u));
  height: 2px;
}

.flow .ln.v {
  width: 2px;
  height: calc(var(--h) * 10 * var(--u));
}

.flow .ochre-ln { background: var(--ochre); }
.flow .teal-ln { background: var(--teal); }

.flow .dash {
  background: repeating-linear-gradient(to bottom, rgba(244, 244, 242, 0.4) 0 3px, transparent 3px 6px);
}

.flow .tag {
  width: auto;
  padding: calc(3 * var(--u)) calc(9 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--fg);
  color: #0b0b0c;
  font-size: calc(12 * var(--u));
  white-space: nowrap;
}

.flow .pin {
  z-index: 2;
  top: calc(100 * var(--u));
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  height: calc(48 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  border-width: 1px;
  border-style: solid;
  font-size: calc(14 * var(--u));
  line-height: calc(46 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow .pin em,
.day .focusrow em {
  display: inline;
  margin: 0 calc(8 * var(--u)) 0 0;
  font-size: calc(14 * var(--u));
}

.flow .sheet {
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(494 * var(--u));
  bottom: 0;
  padding: calc(29 * var(--u)) calc(23 * var(--u)) 0;
  border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
  background: #1b1b1c;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.55);
}

.flow .sheet::before {
  content: '';
  position: absolute;
  top: calc(11 * var(--u));
  left: calc(23 * var(--u));
  width: calc(36 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 2px;
  background: var(--mute);
}

.flow .sheet em {
  margin: calc(12 * var(--u)) 0 calc(4 * var(--u));
}

.flow .sheet em:first-child {
  margin-top: 0;
}

.flow .sheet .big {
  font-size: calc(20 * var(--u));
  font-weight: 300;
}

.flow .btns {
  display: flex;
  gap: calc(10 * var(--u));
  margin-top: calc(16 * var(--u));
}

.flow .btns span {
  flex: 1;
  height: calc(44 * var(--u));
  border-radius: calc(22 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: calc(14 * var(--u));
  line-height: calc(42 * var(--u));
  text-align: center;
}

/* Today */
.day .date {
  top: calc(76 * var(--u));
  left: calc(20 * var(--u));
  font-family: var(--mono);
  font-size: calc(11 * var(--u));
  letter-spacing: .2em;
  color: var(--mute);
}

.day .count {
  top: calc(94 * var(--u));
  left: calc(20 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 300;
  line-height: 1.1;
}

.day .count span {
  display: block;
  white-space: nowrap;
}

.day .count .n2 {
  position: absolute;
  top: 0;
}

.day .focusrow {
  top: calc(150 * var(--u));
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  height: calc(48 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  border-width: 1px;
  border-style: solid;
  font-size: calc(14 * var(--u));
}

.day .list {
  top: calc(212 * var(--u));
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  overflow: hidden;
  border-radius: calc(20 * var(--u));
  border: 1px solid var(--line);
  background: rgba(24, 24, 26, 0.92);
}

.day .sec {
  display: flex;
  justify-content: space-between;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u));
  font-family: var(--mono);
  font-size: calc(10 * var(--u));
  letter-spacing: .2em;
  color: var(--mute);
}

.day .sec span {
  letter-spacing: 0;
}

.day .row {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  height: calc(50 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-top: 1px solid var(--line);
  font-size: calc(15 * var(--u));
  white-space: nowrap;
}

.day .row span {
  margin-left: auto;
  font-family: var(--mono);
  font-size: calc(11 * var(--u));
  color: var(--mute);
}

.day .row i {
  flex: none;
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
  border-radius: calc(5 * var(--u));
  border: 1.5px solid rgba(244, 244, 242, 0.55);
}

.day .row b {
  position: absolute;
  right: calc(78 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(114, 184, 172, 0.18);
  color: var(--teal-soft);
  font-size: calc(11 * var(--u));
  font-weight: 500;
}

.day .row.add {
  color: var(--mute);
}

@media (max-width: 1023px) {
  .demo {
    column-gap: 4vw;
  }


  .phone {
    --pw: 270px;
  }
}

@media (max-width: 767px) {
  .veil {
    height: 64px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .cta {
    top: 10px;
    right: 12px;
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
  }

  .demo {
    display: block;
    margin-top: calc(var(--vh) * .16);
  }

  .phone {
    --pw: min(76vw, 320px);
    margin: 32px auto 0;
  }

  .demo .body,
  .demos-cta .body {
    font-size: 17px;
  }

  .demos-cta {
    margin-top: calc(var(--vh) * .18);
  }

  /* The cards become one row that swipes sideways. */
  .goal-cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 28px -6vw 0;
    padding: 0 6vw 12px;
    scrollbar-width: none;
  }

  .goal-cards li {
    scroll-snap-align: center;
  }

  .deep {
    padding: 0 6vw;
  }
}