/* ==========================================================================
   my.headspace.com — Web onboarding (shortened flow)
   Figma: [my.headspace.com] Redesign '26
     Flow ........ node 3334:63829  "Web Onboarding [shortened flow]"
     States ...... node 3255:59146  mobile "Path One"
     Responsive .. node 3404:66027  "Responsiveness"
   Tokens come from _ds/colors_and_type.css (HSDS v0.1).
   ========================================================================== */

:root {
  /* Figma variable names → HSDS tokens */
  --fg:            var(--hs-color-foreground);        /* foreground/foreground #2D2C2B */
  --fg-weak:       var(--hs-color-foreground-weak);   /* foreground/foregroundweak #44423F */
  --fg-weaker:     var(--hs-warm-grey-500);           /* foreground/foregroundweaker #63605D */
  --fg-inverse:    var(--hs-white);
  --primary:       var(--hs-blue-200);
  --primary-hover: var(--hs-blue-300);
  --interactive-strong:   var(--hs-warm-grey-100);    /* chip / secondary button */
  --interactive-stronger: var(--hs-warm-grey-200);    /* hover */
  --interactive-inverse:  var(--hs-warm-grey-700);    /* selected chip */
  --border:        var(--hs-warm-grey-200);
  --border-strong: var(--hs-warm-grey-500);
  --critical:      var(--hs-red-300);
  --overlay-20:    rgba(20, 19, 19, 0.2);
  --shadow-default: var(--hs-shadow-default);

  /* Conversation column — follows the "Responsiveness" frames:
     393 → 345 · 768 → 327 · 1023 → 455 · 1024 → 452 · 1280 → 580 · 1440 → 546 · 1920 → 660 */
  --col: calc(100vw - 48px);
  --nav-h: 96px;
  --convo-top: 96px;
  --anchor: 112px;           /* where a new bot turn settles, from the top */
  --msg-lh: 27px;
  --tray-pb: 24px;
}
@media (min-width: 768px) {
  :root {
    --col: clamp(327px, 50vw - 60px, 580px);
    --nav-h: 112px;
    --convo-top: 152px;
    --anchor: 222px;
    --msg-lh: 30px;
    --tray-pb: 32px;
  }
}
@media (min-width: 1280px) { :root { --col: 580px; } }
@media (min-width: 1440px) { :root { --col: clamp(546px, 23.75vw + 204px, 660px); } }   /* 1440 → 546 · 1920 → 660 */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--hs-font-sans);
  color: var(--fg);
  background: var(--hs-white);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
img { display: block; }
a.link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
a.link:hover { color: var(--primary-hover); }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: none; }
body[data-screen="login"]   .screen--login,
body[data-screen="intro"]   .screen--intro,
body[data-screen="chat"]    .screen--chat,
body[data-screen="loading"] .screen--loading,
body[data-screen="upsell"]  .screen--upsell,
body[data-screen="app"]     .screen--app { display: flex; animation: screen-in var(--hs-duration-slower) var(--hs-easing-entrance); }
@keyframes screen-in { from { opacity: 0; } }

/* ---------- icons (HSDS icon SVGs used as masks so they take currentColor) ---------- */
.icon { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.icon--key   { --src: url(assets/icon-key.svg);   width: 20px; height: 20px; }
.icon--edit  { --src: url(assets/icon-edit.svg);  width: 16px; height: 16px; }
.icon--close { --src: url(assets/icon-close.svg); width: 16px; height: 16px; }

/* ---------- buttons (HSDS Button · M-Large 48) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; flex: none;
  border: 0; border-radius: var(--hs-border-radius-pill);
  font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--hs-duration-faster) var(--hs-easing-standard),
              box-shadow var(--hs-duration-faster) var(--hs-easing-standard),
              transform var(--hs-duration-fastest) var(--hs-easing-standard),
              opacity var(--hs-duration-faster) linear;
}
.btn--full { flex: 1 1 auto; width: 100%; }
.btn--primary { background: var(--primary); color: var(--fg-inverse); box-shadow: var(--shadow-default); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { background: var(--interactive-strong); color: var(--fg); }
.btn--secondary:hover { background: var(--interactive-stronger); }
.btn--raised { box-shadow: var(--shadow-default); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn:focus-visible, .chip:focus-visible, .btn-ghost:focus-visible, .social__btn:focus-visible, .topnav__close:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* Ghost · X-Small (24) — "Edit response" */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px; border: 0; border-radius: var(--hs-border-radius-pill);
  background: transparent; color: var(--primary); cursor: pointer;
  font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px;
}
.btn-ghost:hover { background: rgba(0, 97, 239, 0.08); }

/* ==========================================================================
   SKY BACKGROUNDS (login + loader)
   ========================================================================== */
.sky {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  /* Figma's stop list is out of order (32% → 25% → 7%); browsers would clamp that into a hard
     edge, so the first two stops are folded into a monotonic ramp that matches the Figma render. */
  background-image: linear-gradient(0deg, rgb(0, 128, 247) 0%, rgb(0, 147, 251) 7.6037%, rgb(0, 164, 255) 25.322%, rgb(40, 178, 255) 38.611%, rgb(104, 201, 255) 62.974%, rgb(158, 220, 255) 82.907%, rgb(200, 235, 255) 105.06%, rgb(230, 246, 255) 122.77%, rgb(248, 252, 255) 138.28%, rgb(255, 255, 255) 149.35%);
}
.sky img { position: absolute; max-width: none; width: auto; height: auto; }
.sky__cloud { position: absolute; }
.sky__cloud img { width: auto; }

/* login (3301:81487) */
.sky--login .sky__mask {
  position: absolute; inset: 22.15% 21.25% 58.72% 60.28%; opacity: .3;
  -webkit-mask: url(assets/login-bg-cloud-group.svg) -155px -60px / 484px 292px no-repeat;
          mask: url(assets/login-bg-cloud-group.svg) -155px -60px / 484px 292px no-repeat;
  -webkit-mask-clip: no-clip; mask-clip: no-clip;
}
.sky--login .sky__mask img { inset: -42.57% -27.37%; width: calc(100% + 54.74%); height: calc(100% + 85.14%); }
.sky--login .sky__cloud--left  { inset: 13.76% 81.39% 63.31% -9.72%; }
.sky--login .sky__cloud--left img  { inset: -35.22% -17.7%; width: 135.4%; height: 170.44%; }
.sky--login .sky__cloud--right { inset: 57.49% -8.14% 16.4% 74.79%; }
.sky--login .sky__cloud--right img { inset: -28.37% -13.79%; width: 127.58%; height: 156.74%; }

/*
 * Loader Cloud BG (3334:63761)
 * Figma: blue gradient + left/right cloud images only (no hard vector pills).
 * Blur via CSS (Figma stdDeviation 36.1 / 33.1) so soft edges aren't clipped as <img>.
 */
.sky--loading {
  /* Match Figma BG stops; fold non-monotonic early stops into a smooth ramp */
  background-image: linear-gradient(
    0deg,
    rgb(0, 97, 239) 0%,
    rgb(0, 128, 247) 8%,
    rgb(0, 147, 251) 12%,
    rgb(0, 164, 255) 25.322%,
    rgb(40, 178, 255) 38.611%,
    rgb(104, 201, 255) 62.974%,
    rgb(158, 220, 255) 82.907%,
    rgb(200, 235, 255) 100%
  );
}
.sky--loading .sky__cloud--left {
  left: -9.72%;
  right: 81.39%;
  aspect-ratio: 408 / 206.376;
  top: calc(50% - 222.99px);
  transform: translateY(-50%);
  filter: blur(36px);
}
.sky--loading .sky__cloud--left img {
  inset: -34.98% -17.7%;
  width: 135.4%;
  height: 169.96%;
}
.sky--loading .sky__cloud--right {
  left: 74.79%;
  right: -8.14%;
  top: 57.49%;
  height: 234.969px;
  filter: blur(33px);
}
.sky--loading .sky__cloud--right img {
  inset: -28.18% -13.79%;
  width: 127.58%;
  height: 156.36%;
}

/* ==========================================================================
   LOGIN (3301:81486)
   ========================================================================== */
.screen--login { flex-direction: column; }
/* Logo sits where it does on every onboarding screen (.topnav__logo): 48px in, 28px down */
.login-nav { position: absolute; top: 0; left: 0; right: 0; height: var(--nav-h); padding: 28px 48px 0; z-index: 2; pointer-events: none; }
.login-nav > * { pointer-events: auto; }
.login-nav__logo { width: 167px; height: 40px; display: block; }
@media (max-width: 767.98px) {
  .login-nav { padding: 16px 24px 0; }
}
/* Invisible wrapper so the logo looks unchanged but acts as a skip-to-Today shortcut */
.login-nav__skip {
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
}
.login-nav__skip:focus { outline: none; }
.login-nav__skip:focus-visible { outline: 2px solid var(--hs-blue-200, #0061ef); outline-offset: 4px; border-radius: 4px; }

.login-scroll {
  position: relative; z-index: 1; flex: 1; overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
  /* card sits 23px above true center in the 1440 frame */
  padding: 72px 16px 118px;
}
.login-card {
  width: 432px; max-width: 100%; margin: auto;
  background: var(--hs-color-background); border-radius: var(--hs-border-radius-largeX);
  padding: var(--hs-spacing-large3X) var(--hs-spacing-largeX);
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.login-card__main { width: 100%; display: flex; flex-direction: column; gap: 24px; }
.login-card__primary { display: flex; flex-direction: column; gap: 16px; }
.login-card__header { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.login-card__title { margin: 0; min-height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.72px; color: var(--fg); }
.login-card__sub { margin: 0; font-size: 16px; line-height: 1.5; color: var(--fg-weak); }

/* Text field (HSDS Text Field) */
.field {
  position: relative; display: block; height: 56px;
  border: 2px solid var(--border); border-radius: var(--hs-border-radius-small);
  background: var(--hs-white); cursor: text;
  transition: border-color var(--hs-duration-faster) var(--hs-easing-standard), margin var(--hs-duration-faster);
}
.field:hover { border-color: var(--border-strong); }
.field.is-focused { border-color: var(--primary); }
.field.is-error { border-color: var(--critical); margin-bottom: 18px; }
.field__label {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 16px; line-height: 1.5; color: var(--fg-weak); pointer-events: none;
  transition: all var(--hs-duration-faster) var(--hs-easing-standard);
}
.field.is-focused .field__label, .field.is-filled .field__label { top: 6px; transform: none; font-size: 12px; color: var(--fg-weaker); }
.field__input {
  position: absolute; inset: 0; width: 100%; border: 0; outline: 0; background: transparent;
  padding: 20px 14px 4px; font: 400 16px/1.5 var(--hs-font-sans); color: var(--fg); border-radius: inherit;
}
.field__helper { position: absolute; left: 0; top: calc(100% + 4px); font-size: 12px; line-height: 1.5; color: var(--critical); }

/* Checkbox + label */
.checkbox { display: flex; gap: var(--hs-spacing-small); align-items: flex-start; cursor: pointer; }
.checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkbox__box { position: relative; flex: none; width: 16px; height: 16px; margin-top: 1px; border: 2px solid var(--border-strong); border-radius: var(--hs-border-radius-small2X); }
.checkbox__box img { position: absolute; inset: -2px; width: 16px; height: 16px; opacity: 0; }
.checkbox input:checked + .checkbox__box { border-color: transparent; }
.checkbox input:checked + .checkbox__box img { opacity: 1; }
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--primary); outline-offset: 2px; }
.checkbox.is-error .checkbox__box { border-color: var(--critical); }
.checkbox__label { font-size: 12px; line-height: 1.5; color: var(--fg-weak); text-align: left; }

.divider { display: flex; align-items: center; height: 18px; }
.divider span { flex: 1; height: 0; border-top: 1px solid var(--border); }
.divider em { width: 37px; text-align: center; font-style: normal; font-size: 14px; line-height: 1.5; color: var(--fg-weaker); }

.login-card__alt { display: flex; flex-direction: column; gap: 16px; }
.social { display: flex; gap: 8px; }
.social__btn {
  position: relative; flex: 1; height: 44.147px; border: 0; border-radius: 32.107px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: filter var(--hs-duration-faster);
}
.social__btn:hover { filter: brightness(.94); }
.social__btn--apple    { background: #000; }
.social__btn--facebook { background: #4678e3; }
.social__btn--spotify  { background: #1ed760; }
.social__btn--google   { background: var(--interactive-strong); }
.social__apple { position: relative; width: 24.08px; height: 24.08px; }
.social__apple img { position: absolute; inset: 16.67% 16.67% 12.5% 20.83%; width: 62.5%; height: 70.83%; }
.social__icon  { width: 24.08px; height: 24.08px; }
.social__google { width: 20.067px; height: 20.067px; object-fit: cover; }

.support { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 16px var(--hs-spacing-medium); }
.support__title { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -0.54px; text-align: center; }
.support__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; align-items: flex-start; justify-content: center; }
.support__item { width: 94px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.support__label { font-size: 14px; line-height: 21px; color: var(--fg-weak); text-align: center; }

/* Spot illustrations — positions from Figma (3301:81544 / 81567 / 81587) */
.spot { position: relative; width: 60px; height: 60px; flex: none; }
.spot img, .spot span { position: absolute; }
.spot__ellipse { left: 0; top: 0; width: 60px; height: 60px; }
.support__item:nth-child(1) .spot { margin-left: -1.25px; }   /* group is 61.25 wide */
.support__item:nth-child(3) .spot { margin-left: -6.68px; }   /* group is 66.77 wide, ellipse hugs its left edge */
.spot__stress { left: 5.97px; top: 7.01px; width: 53.887px; height: 42.833px; }
.spot__stress .s28 { inset: 45.35% 27.6% 0 0;            width: 72.4%;  height: 54.65%; }
.spot__stress .g3  { inset: 63.47% 47.23% 13.14% 18.37%; width: 34.4%;  height: 23.39%; }
.spot__stress .s02 { inset: 21.43% -0.01% 31.49% 61.41%; width: 38.6%;  height: 47.08%; }
.spot__stress .v1  { inset: 8.72% 41.37% 57.33% 31.65%;  width: 26.98%; height: 33.95%; }
.spot__sleep { left: 10px; top: 10.43px; width: 39.283px; height: 40.013px; }
.spot__thoughts { left: 5.84px; top: 10.61px; width: 55.956px; height: 45.612px; }
.spot__thoughts .rect {
  inset: -0.06% 21.17% 4.56% -0.12%; overflow: hidden;
  -webkit-mask-image: url(assets/spot-thoughts-rect-mask.svg), url(assets/spot-thoughts-rect-mask1.svg);
          mask-image: url(assets/spot-thoughts-rect-mask.svg), url(assets/spot-thoughts-rect-mask1.svg);
  -webkit-mask-position: 1.5px 1.467px, 0.063px 0.031px; mask-position: 1.5px 1.467px, 0.063px 0.031px;
  -webkit-mask-size: 41.173px 40.559px, 44.05px 43.435px; mask-size: 41.173px 40.559px, 44.05px 43.435px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.spot__thoughts .rect img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.spot__thoughts .g4 { inset: 22.24% 47.2% 65.05% 31.75%; }
.spot__thoughts .g4 img { inset: -9.92% -4.86% -9.91% -4.88%; width: 109.74%; height: 119.83%; }
.spot__thoughts .g5 {
  inset: 51.06% 13.07% -0.01% 48.21%; width: 38.72%; height: 48.95%;
  -webkit-mask: url(assets/spot-thoughts-rect-mask.svg) -25.539px -21.854px / 41.173px 40.559px no-repeat;
          mask: url(assets/spot-thoughts-rect-mask.svg) -25.539px -21.854px / 41.173px 40.559px no-repeat;
}
.spot__thoughts .v2 { inset: 47.61% 8.42% 3.45% 52.86%;   width: 38.72%; height: 48.94%; }
.spot__thoughts .v3 { inset: 62.84% 18.69% 15.6% 66.18%;  width: 15.13%; height: 21.56%; }
.spot__thoughts .v4 { inset: 19.74% 0 52.21% 78.87%;      width: 21.13%; height: 28.05%; }

/* ==========================================================================
   CONVERSATION (3255:66419 … 3307:62913)
   ========================================================================== */
.screen--chat { flex-direction: column; background: var(--hs-white); }

.topnav {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: var(--nav-h);
  overflow: hidden; pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(0, 164, 255, 0.9) 20%, rgba(0, 97, 239, 0.2) 66.583%, rgba(255, 255, 255, 0));
}
.topnav > * { pointer-events: auto; }
/*
 * Figma Top Nav Cloud (3403:64873)
 * Nest position → rotate → blur/opacity like Figma so layer blur actually softens
 * the circular blobs into mist (transform+filter on one node left hard edges).
 */
.topnav__sky {
  position: absolute;
  left: 50%;
  top: -60px;
  width: 1440px;
  height: 344px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.topnav__sky-rot {
  flex: none;
  transform: rotate(180deg);
}
.topnav__sky-cloud {
  position: relative;
  width: 1440px;
  height: 344px;
  filter: blur(15px);
  opacity: .4;
}
.topnav__sky-cloud img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: bottom;
}
.topnav__logo { position: absolute; transition: opacity var(--hs-duration-slow) var(--hs-easing-standard); }
/* Same spot on every onboarding screen (Figma Top Nav 3497:153650): 48px in, 28px down */
.topnav__logo--full { left: 48px; top: 28px; width: 167px; height: 40px; }
.topnav__logo--dot  { left: 24px; top: 16px; width: 40px; height: 40px; display: none; }

.progress { position: absolute; right: 48px; top: 41px; display: flex; align-items: center; gap: 12px; }
.progress__track { position: relative; width: 240px; height: 8px; border-radius: var(--hs-border-radius-pill); background: var(--overlay-20); overflow: hidden; }
.progress__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 12.5%; border-radius: inherit; background: var(--fg); transition: width var(--hs-duration-slower) var(--hs-easing-standard); }
.progress__label { min-width: 28px; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -0.54px; color: var(--fg); }

.topnav__close {
  position: absolute; right: 24px; top: 16px; width: 40px; height: 40px; display: none;
  align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: var(--hs-white); color: var(--fg); cursor: pointer;
}

@media (max-width: 767.98px) {
  .topnav__sky,
  .topnav__sky-cloud { width: 469.943px; height: 343.5px; }
  .topnav__logo--full, .progress { display: none; }
  .topnav__logo--dot { display: block; }
  .topnav__close { display: flex; }
}

.col { width: var(--col); margin-inline: auto; }

.convo { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.convo::-webkit-scrollbar { display: none; }
.convo__inner { display: flex; flex-direction: column; gap: 24px; padding-top: var(--convo-top); }
.convo__spacer { height: 0; }

.msg { margin: 0; max-width: 100%; font-size: 18px; line-height: var(--msg-lh); color: var(--fg); }
@media (min-width: 768px) { .msg { max-width: max(327px, 76%); } }
.msg .w { opacity: 0; transition: opacity 260ms linear; }
.msg .w.on, .msg.is-static .w { opacity: 1; }

.answer { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; animation: rise var(--hs-duration-slow) var(--hs-easing-entrance) both; }
.answer.is-static { animation: none; }
.answer__chips { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- selection chips (HSDS Selection Chip · Multi / Single) ---------- */
.chip {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--hs-spacing-small);
  padding: var(--hs-spacing-small) var(--hs-spacing-medium); border: 0; border-radius: var(--hs-border-radius-pill);
  background: var(--interactive-strong); color: var(--fg); text-align: right;
  font-weight: 700; font-size: 16px; line-height: 19.2px; letter-spacing: -0.48px; white-space: nowrap;
  transition: background-color var(--hs-duration-faster) var(--hs-easing-standard), color var(--hs-duration-faster) var(--hs-easing-standard), transform var(--hs-duration-fastest);
}
button.chip { cursor: pointer; }
button.chip:hover:not(.is-selected) { background: var(--interactive-stronger); }
button.chip:active { transform: scale(.98); }
.chip.is-selected { background: var(--interactive-inverse); color: var(--fg-inverse); }
.chip.is-shake { animation: shake 320ms var(--hs-easing-standard); }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.chip__icon { position: relative; width: 20px; height: 20px; flex: none; }
.chip__icon img { position: absolute; }
.chip__icon .i-full   { inset: 0; width: 20px; height: 20px; }
.chip__icon .i-calm   { left: 2px; top: 2px; width: 16px; height: 16px; }
.chip__icon .i-mindful{ left: 2px; top: 3px; width: 16px; height: 14.769px; }
.chip__check { position: absolute; inset: 0; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; }
.chip__check img { position: static; width: 14px; height: 14px; }

/* ---------- Tools Accordion (3430:109080 collapsed · 3430:116750 expanded) ---------- */
.tools {
  display: flex; flex-direction: column; gap: 12px; padding: 12px 0;
  border-radius: 16px; background: var(--hs-warm-grey-100);             /* surface/surfacestrong #F9F4F2 */
  animation: rise var(--hs-duration-slow) var(--hs-easing-entrance) both;
}
.tools.is-static { animation: none; }
.tools__divider { height: 1px; background: var(--hs-warm-grey-200); }  /* surface/surfacestronger #E2DED9 */
.tools__head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 0 16px; border: 0; background: none; text-align: left; cursor: pointer;
}
.tools__head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 8px; }
.tools__icon { position: relative; flex: none; width: 40px; height: 40px; overflow: hidden; }
.tools__icon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; }
.tools__art--full    { width: 40px; height: 40px; object-fit: cover; }
.tools__art--sleep   { width: 30.433px; height: 23.708px; }
.tools__art--therapy { width: 45.313px; height: 30.208px; object-fit: contain; }
.tools__title { flex: 1 1 0; min-width: 0; font-weight: 700; font-size: 16px; line-height: 19.2px; letter-spacing: -0.48px; color: var(--fg); }
/* Caret points down when collapsed and flips up when open */
.tools__caret { flex: none; width: 24px; height: 24px; transform: rotate(180deg); transition: transform var(--hs-duration-fast) var(--hs-easing-standard); }
.tools__item.is-open .tools__caret { transform: none; }
.tools__body { padding: 0 16px 0 64px; font-size: 14px; line-height: 1.5; color: var(--fg-weak); }
.tools__body p { margin: 0; }
/* Extra copy expands smoothly by animating the grid row from 0 to its natural height */
.tools__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--hs-duration-slow) var(--hs-easing-standard); }
.tools__more > div { min-height: 0; overflow: hidden; }
.tools__more p { padding-top: 8px; }
.tools__item.is-open .tools__more { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .tools__more, .tools__caret { transition: none; } }

.options { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding: 16px 0 20px; }
.options .chip { animation: rise var(--hs-duration-slow) var(--hs-easing-entrance) both; animation-delay: calc(var(--i, 0) * 60ms); }
.options:empty { padding: 0; }

.dock { flex: none; background: var(--hs-color-background); position: relative; z-index: 2; }
.tray { display: flex; gap: 16px; align-items: center; justify-content: center; padding: var(--hs-spacing-medium) 0 calc(var(--tray-pb) + env(safe-area-inset-bottom, 0px)); transition: opacity var(--hs-duration-fast) linear; }
.tray.is-hidden { opacity: 0; visibility: hidden; }

/* ==========================================================================
   PERSONALIZATION LOADER (3334:63760)
   ========================================================================== */
.screen--loading { align-items: center; justify-content: center; }
.hero-wrap { position: relative; z-index: 1; width: calc(660.68px * var(--s, 1)); height: calc(618px * var(--s, 1)); }
.hero {
  position: absolute; left: 0; top: 0; width: 660.68px; height: 618px; overflow: hidden;
  border-radius: var(--hs-border-radius-largeX); background: var(--hs-white);
  transform: scale(var(--s, 1)); transform-origin: 0 0;
}
.hero img, .hero > div { position: absolute; max-width: none; }
.hero__grad { left: 0; top: -4.44px; width: 781.882px; height: 421.298px; background-image: linear-gradient(178.83deg, var(--hs-blue-200) 4.6263%, var(--hs-blue-100) 31.168%, var(--hs-warm-grey-100) 79.051%); }
/* Figma hero cloud: opacity 0.71 + layer blur ~15 (stdDeviation 11.85) via CSS so
   soft edges aren't clipped the way SVG <img> filters are. */
.hero__cloud {
  inset: -4.97% -5.7% 83.87% 75.63%;
  transform: scaleX(-1);
  opacity: .71;
  filter: blur(12px);
}
.hero__cloud img { inset: -18.17% -11.93%; width: 123.86%; height: 136.34%; }
.hero__sun { left: calc(50% - 0.21px); top: 19.28%; bottom: 39.05%; width: 257.633px; height: 41.67%; transform: translateX(-50%); }
.hero__v3 { inset: -8.88% 20.36% 48.67% 23.15%; width: 56.49%; height: 60.21%; }
.hero__hills-back { inset: 14.08% -25.27% 6.46% -34.96%; transform: scaleX(-1); }
.hero__hills-back img { inset: 0; width: 100%; height: 100%; }
.hero__tree-left  { inset: 47.75% 73.6% 33.44% 15.13%; width: 11.27%; height: 18.81%; }
.hero__tree-right { inset: 33.52% 11.87% 56.98% 82.44%; width: 5.69%; height: 9.5%; }
.hero__hill-a { inset: 20.58% -63.93% -75.9% -25.97%; display: flex; align-items: center; justify-content: center; }
.hero__hill-a img { position: relative !important; width: 1167.4px; height: 832.3px; transform: rotate(6.54deg); }
.hero__hill-b { left: -1894.03px; top: 66.84px; width: 3786.839px; height: 2731.405px; display: flex; align-items: center; justify-content: center; }
.hero__hill-b > div { position: relative; width: 3405.764px; height: 1797.289px; transform: rotate(-17.36deg); flex: none; }
.hero__hill-b img { inset: -3.47% -1.75% -3.54% -1.76%; width: 103.51%; height: 107.01%; }
.hero__sparkle-sm { inset: 22.01% 25.39% 73.33% 71.27%; width: 3.34%; height: 4.66%; }
.hero__sparkle    { inset: 10.24% 72.74% 84.65% 22.46%; width: 4.8%;  height: 5.11%; }
.hero__path { left: -152.77px; top: 224.15px; width: 809.811px; height: 1513.917px; }
.hero__path img { inset: 0 -0.34% 0 0; width: 100.34%; height: 100%; }
.hero__loader { left: calc(50% + 0.27px); top: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero__text { left: 0; top: 360px; width: 661px; padding: 10px var(--hs-spacing-large3X); display: flex; justify-content: center; }
.hero__text p {
  margin: 0; flex: 1; text-align: center; color: var(--fg-inverse);
  font-weight: 700; font-size: 32px; line-height: 38.4px; letter-spacing: -0.96px;
  transition: opacity var(--hs-duration-slow) linear;
}
.hero__text p.is-out { opacity: 0; }

.restart { position: absolute; z-index: 2; left: 50%; bottom: 32px; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity var(--hs-duration-slow) linear; }
.restart.is-visible { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   INTRO VIDEO (Figma 3497:153326, LargeX 1440 × 896)
   888 × 620 video card centered in the viewport (138px above and below at 1440 × 896),
   Continue right-aligned 25px below it. On shorter or narrower windows the card scales
   down with the same aspect ratio so it always clears the top nav and the button.
   ========================================================================== */
.screen--intro { flex-direction: column; background: var(--hs-white); }
.intro {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.intro__stage {
  position: relative;
  width: clamp(280px, min(888px, 100vw - 48px, (100dvh - 276px) * 888 / 620), 888px);
}
.intro-video {
  position: relative;
  isolation: isolate;
  aspect-ratio: 888 / 620;
  border-radius: 17.86px;
  overflow: hidden;
  background: rgba(20, 19, 19, 0.6);
}
.intro-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-video__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 19, 19, 0), rgba(20, 19, 19, 0.6));
  pointer-events: none;
  transition: opacity var(--hs-duration-slow) var(--hs-easing-standard);
}
/*
 * Equal 1fr rows above and below Play keep it centered on the card. A fr row
 * never shrinks below its content, so when the copy is taller than the bottom
 * half the top row gives up space and Play moves up instead of overlapping.
 */
.intro-video__overlay {
  --copy-inset: 24px;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  row-gap: 16px;
  padding: 31px var(--copy-inset);
  pointer-events: none;
}
.intro-video__play {
  grid-row: 2;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity var(--hs-duration-slow) var(--hs-easing-standard),
              transform var(--hs-duration-faster) var(--hs-easing-standard);
}
.intro-video__play img { display: block; width: 80px; height: 80px; }
.intro-video__play:hover { transform: scale(1.04); }
.intro-video__play:focus-visible { outline: 2px solid var(--hs-white); outline-offset: 4px; }
.intro-video.is-playing .intro-video__scrim,
.intro-video.is-playing .intro-video__play { opacity: 0; pointer-events: none; }

.intro-video__copy {
  grid-row: 3;
  align-self: end;
  width: min(660px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--hs-white);
  text-align: center;
}
/*
 * Always one line: the title is about 15.2em wide, so the font size follows
 * the card's width (cqi) and caps at the Figma 40px.
 */
.intro-video { container-type: inline-size; }
.intro-video__title {
  margin: 0; color: var(--hs-white); font-weight: 700; white-space: nowrap;
  font-size: min(40px, (100cqi - 2 * var(--copy-inset)) / 15.6);
  line-height: 1.2; letter-spacing: -0.03em;
}
.intro-video__body { margin: 0; font-weight: 400; font-size: 18px; line-height: 27px; }

/* Pinned to the bottom like the questions' tray, so the card stays centered in the viewport */
.intro__dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (max-width: 1023px) {
  .intro-video__body { font-size: 16px; line-height: 24px; }
}
/* Small: a taller card so the copy fits under the Play button; the video crops to fill it */
@media (max-width: 767px) {
  .intro__stage { width: calc(100vw - 48px); }
  .intro-video { aspect-ratio: auto; height: min(560px, 100dvh - 2 * var(--nav-h) - 16px); }
  .intro-video__overlay { --copy-inset: 16px; padding-block: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}