*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent
    }

    button {
      cursor: pointer;
      border: none;
      background: none;
      font-family: inherit
    }

    /* Pinch-zoom restored (user-scalable removed); suppress accidental double-tap zoom */
    button,
    a,
    .screen {
      touch-action: manipulation;
    }

    textarea,
    input {
      font-family: inherit;
    }

    @keyframes fake-caret-blink {

      0%,
      49% {
        opacity: 1;
      }

      50%,
      100% {
        opacity: 0;
      }
    }

    :root {
      --orange: #FEF8E8;
      --orange-d: #E8E0CC;
      --orange-light: #FEF8E8;
      --orange-lt: rgba(254, 248, 232, .18);
      --orange-glow: rgba(254, 248, 232, .35);

      --blue-focus-lt: #5C89F9;
      --blue-focus-60: #5C89F9;
      --blue-focus-30: #5C89F9;
      --purple-12: rgba(50, 48, 100, .12);
      --purple-06: rgba(50, 48, 100, .06);
      --lav: #D3E4FB;
      --lav-bg: #D3E4FB;
      --lav-lt: rgba(211, 228, 251, .22);
      --cream: #FEF8E8;
      --cream-2: #E8F0DC;
      --seashell: rgba(254, 248, 232, .18);
      --cap: 'Capriola', system-ui, sans-serif;

      /* ── Type scale (role-based) ── */
      --fs-caption: 12px;
      --fs-label: 14px;
      --fs-body: 16px;
      --fs-lead: 20px;
      --fs-title: 24px;
      --fs-heading: 32px;
      --fs-display: 44px;
      --fs-brand: 64px;
      /* legacy aliases → mapped onto the new scale */
      --fs-xs: var(--fs-caption);
      --fs-sm: var(--fs-body);
      --fs-md: var(--fs-title);
      --fs-lg: var(--fs-heading);

      /* ── Layout rhythm ── */
      --status-h: 60px;
      /* top status-bar spacer */
      --pad-x: 24px;
      /* screen + topbar horizontal padding */

      /* ── Radius + shadow ── */
      --r: 18px;
      --r-sm: 10px;
      --r-lg: 26px;
      --r-xl: 40px;
      --r-pill: 999px;
      /* fully-rounded pill CTAs */
      --sh: 0 4px 20px rgba(50, 48, 100, .08);
      --sh-md: 0 8px 30px rgba(50, 48, 100, .13);
      --sh-btn: 0 4px 12px rgba(50, 48, 100, .22);
      /* unified button shadow */
      --col-insight: rgba(255, 189, 48, .25);
      --col-situation: rgba(211, 228, 251, .9);
      --insight-dot: #E77302;
      --situation-dot: #69ACCC;

      /* New welcome palette */
      --yellow: #FFDC64;
      --yellow-drk: #FFCE66;




      --purple: #323064;
      --blue: #A0BBFF;
      --blue-focus: #5C89F9;
      --blue-lt: #A0BBFF;

      --col-activity: #D3E4FB;
    }

    html,
    body {
      height: 100%
    }

    html {
      overscroll-behavior: none
    }

    body {
      font-family: var(--cap);
      background: #D3E4FB;
      color: var(--purple);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      overflow: hidden;
      overscroll-behavior: none;
      padding: 0
    }

    /* Desktop: phone frame centered on screen */
    #app {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      background: var(--blue);
      display: flex;
      flex-direction: column;
    }

    /* Mobile: safe-area insets */
    @media (orientation: portrait) {
      .status {
        height: env(safe-area-inset-top, 0px);
        min-height: 12px
      }
    }

    .screen {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translateX(26px);
      transition: opacity .26s var(--ease-std), transform .26s var(--ease-std);
      will-change: opacity, transform
    }

    .screen.active {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0)
    }

    .screen.exit {
      opacity: 0;
      transform: translateX(-26px);
      transition-duration: .20s
    }

    .screen.slide-up {
      transform: translateY(26px)
    }

    .screen.slide-up.active {
      transform: translateY(0)
    }

    .screen.slide-up.exit {
      transform: translateY(-16px)
    }

    @keyframes screen-enter-x {
      from {
        transform: translateX(26px);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes screen-enter-y {
      from {
        transform: translateY(26px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .screen.entering {
      animation: screen-enter-x .26s var(--ease-std) both;
    }

    .screen.slide-up.entering {
      animation: screen-enter-y .26s var(--ease-std) both;
    }

    /* iOS app-launch: New Session ghost → Step 1 */
    @keyframes ios-expand-in {
      0% {
        transform: scale(var(--ios-origin-scale, 0.18));
        opacity: 0;
        border-radius: 50vw;
      }

      12% {
        opacity: 1;
      }

      76% {
        transform: scale(1.022);
        border-radius: 6px;
      }

      100% {
        transform: scale(1);
        opacity: 1;
        border-radius: 0px;
      }
    }

    @keyframes ios-shrink-out {
      from {
        transform: scale(1);
        opacity: 1;
      }

      to {
        transform: scale(1.06);
        opacity: 0;
      }
    }

    .screen.ios-expand-enter {
      animation: ios-expand-in 0.50s var(--ease-spring) both;
    }

    .screen.ios-shrink-exit {
      animation: ios-shrink-out 0.32s var(--ease-out) both;
    }

    /* ── Step 1 ↔ Step 2 cross-element transition ── */
    @keyframes step-el-exit-fwd {
      to {
        opacity: 0;
        transform: translateY(-10px);
      }
    }

    @keyframes step-el-exit-bwd {
      to {
        opacity: 0;
        transform: translateY(10px);
      }
    }

    @keyframes step-el-enter-fwd {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
    }

    @keyframes step-el-enter-bwd {
      from {
        opacity: 0;
        transform: translateY(-14px);
      }
    }

    @keyframes step-btn-pop-out {
      to {
        opacity: 0;
        transform: scale(0.76);
      }
    }

    @keyframes step-btn-pop-in {
      from {
        opacity: 0;
        transform: scale(0.76);
      }
    }

    .step-el-exit-fwd {
      animation: step-el-exit-fwd 0.17s var(--ease-std) both;
    }

    .step-el-exit-bwd {
      animation: step-el-exit-bwd 0.17s var(--ease-std) both;
    }

    .step-el-enter-fwd {
      animation: step-el-enter-fwd 0.32s var(--ease-spring) 0.06s both;
    }

    .step-el-enter-bwd {
      animation: step-el-enter-bwd 0.32s var(--ease-spring) 0.06s both;
    }

    .step-btn-pop-exit {
      animation: step-btn-pop-out 0.15s var(--ease-std) both;
    }

    .step-btn-pop-enter {
      animation: step-btn-pop-in 0.28s var(--ease-spring) 0.09s both;
    }

    /* ── Session-complete: iOS modal-dismissal style ── */
    @keyframes session-end-exit {
      from {
        transform: translateY(0) scale(1);
        opacity: 1;
      }

      to {
        transform: translateY(48px) scale(0.93);
        opacity: 0;
      }
    }

    @keyframes session-end-enter {
      from {
        transform: scale(0.95);
        opacity: 0;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .screen.session-end-exit {
      animation: session-end-exit 0.38s var(--ease-std) both;
      pointer-events: none;
    }

    .screen.session-end-enter {
      animation: session-end-enter 0.52s var(--ease-spring) both;
    }

    /* ── iOS app-close: screen shrinks back toward its launch origin ──
       Reverse of ios-expand-in. Origin + target scale are set inline
       (the trigger element), so it collapses into where it opened from. */
    @keyframes ios-collapse-out {
      0% {
        transform: scale(1);
        opacity: 1;
        border-radius: 0px;
      }

      18% {
        opacity: 1;
        border-radius: 8px;
      }

      100% {
        transform: scale(var(--ios-origin-scale, 0.18));
        opacity: 0;
        border-radius: 50vw;
      }
    }

    /* Journey reveal behind the closing screen — gentle scale + fade in. */
    @keyframes screen-dismiss-in {
      from {
        transform: scale(0.965);
        opacity: 0;
      }

      60% {
        opacity: 1;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .screen.ios-collapse-exit {
      animation: ios-collapse-out 0.46s var(--ease-spring) both;
      pointer-events: none;
      z-index: 30;
    }

    .screen.screen-dismiss-enter {
      animation: screen-dismiss-in 0.42s var(--ease-spring) both;
      z-index: 20;
    }

    /* ── Horizontal page slides — Apple-Notes-style push / pop ──
       Back → the overlay slides off to the right (carrying a soft edge shadow for depth)
       while the journey parallaxes in from the left, slightly dimmed, settling to full.
       The expo-out spring curve gives the smooth, weighty iOS deceleration. */
    @keyframes slide-out-to-right {
      from {
        transform: translateX(0);
        box-shadow: -14px 0 38px rgba(58, 44, 120, 0.18);
      }

      to {
        transform: translateX(100%);
        box-shadow: -14px 0 38px rgba(58, 44, 120, 0);
      }
    }

    @keyframes slide-in-from-left {
      from {
        transform: translateX(-26%);
        filter: brightness(0.9);
      }

      to {
        transform: translateX(0);
        filter: brightness(1);
      }
    }

    @keyframes slide-out-to-left {
      from {
        transform: translateX(0);
        filter: brightness(1);
      }

      to {
        transform: translateX(-26%);
        filter: brightness(0.9);
      }
    }

    @keyframes slide-in-from-right {
      from {
        transform: translateX(100%);
        box-shadow: -14px 0 38px rgba(58, 44, 120, 0.18);
      }

      to {
        transform: translateX(0);
        box-shadow: -14px 0 38px rgba(58, 44, 120, 0);
      }
    }

    .screen.slide-back-exit {
      animation: slide-out-to-right 0.52s var(--ease-spring) both;
      opacity: 1;
      pointer-events: none;
      z-index: 30;
    }

    .screen.slide-back-enter {
      animation: slide-in-from-left 0.52s var(--ease-spring) both;
      opacity: 1;
      z-index: 20;
    }

    .screen.slide-fwd-exit {
      animation: slide-out-to-left 0.52s var(--ease-spring) both;
      opacity: 1;
      pointer-events: none;
      z-index: 20;
    }

    .screen.slide-fwd-enter {
      animation: slide-in-from-right 0.52s var(--ease-spring) both;
      opacity: 1;
      z-index: 30;
    }

    /* ── Cream-button confirm / end-of-session → deflate ──
       The mirror image of the ios-expand-in app-launch: instead of inflating from the
       button, the finished screen gives a tiny anticipatory puff, then deflates — scaling
       down, rounding its corners and fading — to let the journey breathe back in behind it. */
    @keyframes screen-deflate-out {
      0% {
        transform: scale(1);
        opacity: 1;
        border-radius: 0px;
      }

      22% {
        transform: scale(1.015);
        opacity: 1;
        border-radius: 14px;
      }

      100% {
        transform: scale(0.80);
        opacity: 0;
        border-radius: 38px;
      }
    }

    .screen.screen-deflate-exit {
      animation: screen-deflate-out 0.50s var(--ease-out) both;
      transform-origin: 50% 44%;
      pointer-events: none;
      z-index: 30;
    }

    /* ── Account close → morph down onto the account button circle ──
       A FLIP-style collapse: after a tiny anticipatory puff, the screen translates toward
       the button while scaling non-uniformly so its final box is a square the exact size
       of the button, centred on it. border-radius runs 0% → 50%, so at the square endpoint
       it is a perfect circle mapped onto the button. The translate/scale targets are set
       inline (--ios-deflate-tx/ty/sx/sy); transform-origin stays at the screen centre. */
    @keyframes screen-deflate-circle-out {
      0% {
        transform: translate(0, 0) scale(1, 1);
        opacity: 1;
        border-radius: 0%;
      }

      16% {
        transform: translate(0, 0) scale(1.012, 1.012);
        opacity: 1;
        border-radius: 5%;
      }

      100% {
        transform: translate(var(--ios-deflate-tx, 0), var(--ios-deflate-ty, 0)) scale(var(--ios-deflate-sx, 0.13), var(--ios-deflate-sy, 0.06));
        opacity: 0;
        border-radius: 50%;
      }
    }

    .screen.screen-deflate-circle-exit {
      animation: screen-deflate-circle-out 0.52s var(--ease-out) both;
      transform-origin: 50% 50%;
      pointer-events: none;
      z-index: 30;
    }

    .scroll-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding-bottom: 96px
    }

    ::-webkit-scrollbar {
      width: 2px
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(211, 228, 251, .2);
      border-radius: 2px
    }

    .status {
      height: var(--status-h);
      flex-shrink: 0
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--pad-x) 30px;
      flex-shrink: 0;
      position: relative;
      z-index: 5;
      background: transparent;
    }

    /* Gradient blur that fades in on scroll: strong at top edge, transparent at bottom */
    /* .topbar-blur {
      position: absolute;
      inset: 0;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      mask-image: linear-gradient(to bottom, var(--cream) 40%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, var(--cream) 40%, transparent 100%);
      pointer-events: none;
    } */

    .brand {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--lav)
    }

    .back-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: var(--fs-body);
      color: var(--purple);
      opacity: .55;
      transition: opacity .15s;
      min-height: 44px;
      padding: 4px 8px 4px 0
    }

    .back-btn:hover {
      opacity: 1
    }

    .profile-circle {
      position: relative;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--blue-lt);
      color: var(--lav);
      font-family: var(--cap);
      font-size: var(--fs-body);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: box-shadow .18s;
      flex-shrink: 0
    }

    /* Invisible inset extends the tappable area to >=44px without
       enlarging the icon. */
    .profile-circle::before {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
    }

    .profile-circle:hover {
      box-shadow: 0 0 0 2px var(--lav)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 15px 28px;
      border-radius: var(--r-pill);
      font-family: var(--cap);
      font-size: var(--fs-body);
      transition: transform .12s, box-shadow .12s, background .15s, opacity .15s;
      text-decoration: none;
      white-space: nowrap;
      border: none
    }

    .btn:active {
      transform: scale(.96)
    }

    .btn-primary {
      background: var(--cream);
      color: var(--blue-focus);
      box-shadow: var(--sh-btn)
    }

    .btn-primary:hover {
      background: #f0ead8
    }

    .btn-outlined {
      background: transparent;
      color: var(--cream);
      border: 1.5px solid rgba(254, 248, 232, .5)
    }

    .btn-outlined:hover {
      background: rgba(254, 248, 232, .08)
    }

    .btn-ghost {
      background: transparent;
      color: var(--lav);
      opacity: .7
    }

    .btn-ghost:hover {
      opacity: .75
    }

    .btn-full {
      width: 100%
    }

    .btn-sm {
      padding: 9px 18px;
      font-size: var(--fs-caption)
    }

    .btn-lg {
      padding: 18px 34px;
      font-size: var(--fs-body)
    }

    .btn-disabled {
      opacity: .38;
      pointer-events: none
    }

    .progress-dots {
      display: flex;
      gap: 7px;
      align-items: center
    }

    .pdot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(254, 248, 232, .3);
      transition: background .3s, width .3s
    }

    .pdot.active {
      background: var(--cream);
      width: 20px;
      border-radius: 4px
    }

    .pdot.done {
      background: var(--cream);
      opacity: .5
    }

    .ta {
      width: 100%;
      background: var(--lav);
      border: none;
      border-radius: var(--r);
      padding: 16px 18px;
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: #323064;
      line-height: 1.65;
      resize: none;
      outline: none;
      transition: box-shadow .18s
    }

    .ta:focus {
      box-shadow: 0 0 0 3px rgba(100, 100, 200, .2)
    }

    .ta::placeholder {
      color: rgba(80, 80, 140, .5);
      font-style: italic
    }

    /* Let textareas in step screens fill available vertical space */
    .step-body .ta {
      flex: 1;
      min-height: 120px
    }

    .bottom-nav {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 40px 40px max(40px, env(safe-area-inset-bottom, 20px));
      background: transparent;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }

    .bottom-nav-blur {
      position: absolute;
      inset: 0;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      mask-image: linear-gradient(to bottom, transparent 0%, var(--cream) 40%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--cream) 40%);
      pointer-events: none;
    }

    .nav-pill {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: var(--lav);
      border-radius: 50px;
      box-shadow: 0 4px 4px rgba(50, 48, 100, 0.15);
    }

    .nav-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 76px;
      height: 76px;
      color: var(--purple);
      opacity: .35;
      transition: opacity .2s;
      font-size: var(--fs-caption);
      font-family: var(--cap);
      font-weight: 600;
      flex-shrink: 0;
    }

    .nav-tab:hover {
      opacity: .6
    }

    .nav-tab.active {
      opacity: 1;
      color: var(--purple);
      background: var(--cream);
      box-shadow: 0 4.67px 2.34px rgba(0, 0, 0, .25);
      border-radius: 50%;
    }

    .nav-tab svg,
    .nav-tab img {
      width: 28px;
      height: 28px;
      flex-shrink: 0
    }

    /* Active tab: no label, just icon */
    .nav-tab.active .nav-label {
      display: none
    }

    /* Inactive tabs always show label */
    .nav-tab .nav-label {
      display: block
    }


    #toast {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: var(--purple);
      color: #fff;
      padding: 12px 22px;
      border-radius: var(--r);
      font-size: var(--fs-caption);
      font-family: var(--cap);
      opacity: 0;
      transition: opacity .25s, transform .25s;
      pointer-events: none;
      white-space: nowrap;
      z-index: 200;
      box-shadow: var(--sh-md)
    }

    #toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    /* HOME CARD TOGGLE — segment control in account */
    .home-card-toggle {
      display: flex;
      background: rgba(211, 228, 251, .1);
      border-radius: 12px;
      padding: 3px;
      gap: 2px
    }

    .hct-btn {
      flex: 1;
      padding: 8px 10px;
      border-radius: 9px;
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--lav);
      opacity: .5;
      transition: background .18s, opacity .18s;
      text-align: center;
      cursor: pointer;
      border: none;
      background: none
    }

    .hct-btn.active {
      background: rgba(211, 228, 251, .18);
      opacity: 1
    }


    /* WELCOME TOPBAR DATE */
    .welcome-topbar-date {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      font-weight: 400;
      position: absolute;
      left: 50%;
      transform: translateX(-50%)
    }

    /* ACTIVITY CARD — welcome screen blue card */
    .w-act-card-wrap {
      background: #d3e4fb;
      border-radius: 24px;
      overflow: hidden;
      margin-bottom: 20px;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    }

    .w-act-card {
      background: #5c89f9;
      border-radius: 24px;
      padding: 24px 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      transition: transform .2s;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }

    .w-act-card::before {
      content: '';
      position: absolute;
      top: 40px;
      left: 16px;
      width: 100px;
      height: 100px;
      background: #d3e4fb;
      border-radius: 100% 100% 100% 0;
      filter: blur(40px);
      z-index: 0;
      pointer-events: none;
    }

    .w-act-card:active {
      transform: scale(.98)
    }

    .w-act-svg {
      flex-shrink: 0;
      width: 80px;
      height: 91px;
      position: relative;
      z-index: 1;
    }

    .w-act-text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      z-index: 1;
    }

    .w-act-title {
      font-family: var(--cap);
      font-size: var(--fs-heading);
      line-height: 1.1;
      color: #fef8e8;
      margin-bottom: 8px;
      font-weight: 500
    }

    .w-act-tag {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #fef8e8;
    }

    .w-act-feedback-row {
      padding: 20px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
    }

    .w-act-feedback-row:active {
      opacity: .7;
    }

    /* NEW SESSION CARD */
    .w-new-session-card {
      background: var(--lav);
      border-radius: 24px;
      overflow: hidden;
      cursor: pointer;
      transition: transform .2s;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 20px;
      box-shadow: 0 4px 16px rgba(50, 48, 100, .13);
    }

    .w-new-session-card:active {
      transform: scale(.985)
    }

    .w-new-session-card-header {
      background: var(--cream);
      border-radius: 24px;
      padding: 28px 28px 32px;
    }

    .w-new-session-card-title {
      font-family: var(--cap);
      font-size: var(--fs-display);
      line-height: 1.0;
      color: var(--purple);
      margin-bottom: 10px;
      font-weight: 500
    }

    .w-new-session-card-sub {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--purple);
      font-weight: 600;
      opacity: .8
    }

    .w-new-session-card-footer {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 14px 20px 16px;
    }

    .w-new-session-card-coach-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .w-new-session-card-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(50, 48, 100, .12);
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 500;
      /* color: var(--purple); */
    }

    .w-new-session-card-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .w-new-session-card-from {
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--purple);
      line-height: 1.3;
    }

    .w-new-session-card-from span {
      font-size: var(--fs-body);
      font-weight: 500;
    }

    .w-new-session-card-date {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--purple);
      opacity: .7;
      white-space: nowrap;
    }

    /* SESSION BOX */
    .w-session-box {
      background: rgba(255, 255, 255, 0.4);
      border-radius: 16px;
      padding: 20px 24px 18px;
      flex-shrink: 0;
    }

    .w-session-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px
    }

    .w-session-label {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--purple);
      font-weight: 600;
      opacity: .8
    }

    .w-session-date {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .1em;
      color: #323064;
      font-weight: 600;
      opacity: .6
    }

    .w-card {
      border-radius: 20px;
      padding: 18px 20px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 14px;
      border: none;
    }

    .w-card.insight-card {
      background: #ffce66;
    }

    .w-card.situation-card {
      background: #D3E4FB;
      margin-bottom: 0;
    }

    .w-card-dot {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
    }

    .w-card-dot.insight {
      background: none
    }

    .w-card-dot.situation {
      background: #69ACCC
    }

    .w-card-text {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      line-height: 1.45;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      transition: none;
    }

    .w-card.expandable {
      cursor: pointer;
      align-items: flex-start;
    }

    .w-card.expandable.expanded .w-card-text {
      -webkit-line-clamp: unset;
    }



    /* STEPS + FEEDBACK share the same blue gradient layout */
    #s-step1,
    #s-step2,
    #s-feedback {
      background: linear-gradient(180deg, #a0bbff 0%, #5c89f9 52%);
      display: flex;
      flex-direction: column;
    }

    /* Step 2 heading is one line shorter than step 1 — add ~1 line-height of
       extra bottom padding so the textarea starts at the same vertical position */
    #s-step2 .step-heading {
      padding-bottom: 87px;
    }

    .step-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px var(--pad-x) 16px;
      flex-shrink: 0;
    }

    .step-circle-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid var(--purple);
      cursor: pointer;
      flex-shrink: 0;
    }

    .step-circle-btn:active {
      background: #d3e4fb;
    }

    .step-circle-btn img {
      width: 22px;
      height: 22px;
    }

    .step-pill-btn img {
      width: 20px;
      height: 20px;
    }

    .step-circle-cream {
      background: #fef8e8;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      border-color: var(--cream);
    }

    .step-circle-cream.step-btn-secondary {
      background: transparent;
      box-shadow: none;
    }

    .step-pill-btn.step-btn-secondary {
      background: transparent;
      box-shadow: none;
      border: 3px solid var(--cream);
    }

    .step-pill-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 16px 24px;
      background: var(--cream);
      border-radius: var(--r-pill);
      border: none;
      cursor: pointer;
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 500;
      color: var(--purple);
      box-shadow: var(--sh-btn);
    }

    .step-heading {
      padding: 16px 24px 48px;
      flex-shrink: 0;
    }

    .step-q {
      font-family: var(--cap);
      font-size: var(--fs-heading);
      font-weight: 500;
      color: #fef8e8;
      line-height: 1.22;
      margin: 0;
    }

    .step-q-sm {
      font-size: var(--fs-heading);
    }

    .step-q-gold {
      color: #ffdc64;
    }

    /* Visitor/exhibition step-1 question is longer than the coach build's —
       scale with the viewport so its three-line break holds on any phone. */
    .step-q-gap {
      font-size: clamp(22px, 6.9vw, 32px);
    }

    .step-q-blue {
      color: #b4d6e6;
    }

    .step-q-icon {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      margin-right: 3px;
    }

    .step-q-icon img,
    .step-q-icon svg {
      height: 0.72em;
      width: auto;
      display: block;
    }

    .step-panel {
      flex: 1;
      background: #d3e4fb;
      border-radius: 26px 26px 0 0;
      border: 1.3px solid rgba(50, 48, 100, 0.12);
      border-bottom: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .ta-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      position: relative;
    }

    .rec-bar {
      display: none;
      align-items: center;
      flex-shrink: 0;
      padding: 14px 16px 12px;
      gap: 8px;
    }

    .rec-bar.active {
      display: flex;
    }

    .rec-wave-area {
      flex: 1;
      display: none;
      align-items: center;
      height: 28px;
      min-width: 0;
    }

    .rec-wave-area.active {
      display: flex;
    }

    .wavecanvas {
      display: block;
      flex: 1;
      height: 28px;
      min-width: 0;
    }

    .mic-idle-btn,
    .rec-cancel-btn,
    .rec-confirm-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform .12s;
    }

    .mic-idle-btn:active,
    .rec-cancel-btn:active,
    .rec-confirm-btn:active {
      transform: scale(.9);
    }

    .mic-idle-btn {
      position: absolute;
      top: 32px;
      right: 16px;
      width: 44px;
      height: 44px;
      background: transparent;
    }

    .mic-idle-btn img {
      width: 30px;
      height: 30px;
      display: block;
    }

    .mic-idle-btn:active {
      background: rgba(50, 48, 100, 0.1);
    }

    .rec-cancel-btn {
      background: #d3e4fb;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      display: none;
    }

    .rec-cancel-btn.active {
      display: flex;
    }

    .rec-confirm-btn {
      background: #fef8e8;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      display: none;
    }

    .rec-confirm-btn.active {
      display: flex;
    }

    .step-ta {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      font-family: var(--cap);
      font-size: var(--fs-title);
      color: #323064;
      caret-color: transparent;
      padding: 36px 76px 16px 36px;
      resize: none;
      line-height: 1.5;
      min-height: 0;
    }

    .step-ta::placeholder {
      color: rgba(50, 48, 100, 0.5);
      transition: opacity 0.15s;
    }

    .step-ta:focus::placeholder {
      opacity: 0;
    }

    .step-ta.recording::placeholder {
      opacity: 0;
    }

    .step-hint {
      flex-shrink: 0;
      margin: 0;
      padding: 0 36px 12px;
      font-family: var(--cap);
      font-size: var(--fs-label);
      line-height: 1.3;
      color: var(--purple);
      opacity: 0;
      transform: translateY(2px);
      pointer-events: none;
      transition: opacity .2s var(--ease-std), transform .2s var(--ease-std);
    }

    .step-hint.show {
      opacity: .55;
      transform: translateY(0);
    }

    .step-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 32px;
      flex-shrink: 0;
    }

    .step-dot {
      width: 7px;
      height: 7px;
      border-radius: 4px;
      background: #323064;
      opacity: 0.35;
      transition: width .2s;
    }

    .step-dot-active {
      width: 20px;
      opacity: 1;
    }

    /* GENERATING */
    #s-generating {
      background: var(--blue-focus-lt);
      align-items: center;
      justify-content: center;
      gap: 26px;
      padding: 40px 32px
    }

    .gen-drawing {
      position: relative;
      flex-shrink: 0;
    }

    .gen-drawing::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180px;
      height: 180px;
      background: white;
      border-radius: 50%;
      filter: blur(40px);
      z-index: 0;
      pointer-events: none;
    }

    .gen-drawing img {
      position: relative;
      z-index: 1;
      width: 220px;
      height: auto;
      display: block;
    }

    .gen-title {
      font-family: var(--cap);
      font-size: var(--fs-title);
      color: var(--purple);
      text-align: center
    }

    .gen-sub {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      opacity: .7;
      text-align: center;
      line-height: 1.5;
      max-width: 250px;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .gen-dots {
      display: flex;
      gap: 8px
    }

    .gen-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--purple);
      opacity: .35;
      animation: pulse 1.4s ease-in-out infinite
    }

    .gen-dot:nth-child(2) {
      animation-delay: .22s
    }

    .gen-dot:nth-child(3) {
      animation-delay: .44s
    }

    @keyframes pulse {

      0%,
      80%,
      100% {
        opacity: .22;
        transform: scale(1)
      }

      40% {
        opacity: 1;
        transform: scale(1.35)
      }
    }

    /* Generating screen cycling subtitle */
    @keyframes genSubFadeIn {
      from {
        opacity: 0;
        transform: translateY(6px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .gen-sub-cycling {
      animation: genSubFadeIn 0.45s var(--ease-out) both
    }

    /* Unobtrusive 'Cancel' control on the generating screen — keeps the wait from feeling trapped */
    .gen-cancel {
      margin-top: 4px;
      background: none;
      border: 0;
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--purple);
      opacity: .45;
      padding: 8px 16px;
      cursor: pointer;
      transition: opacity .2s var(--ease-out)
    }

    .gen-cancel:hover {
      opacity: .75
    }

    /* Coach modal avatar */
    .coach-avatar-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 20px 0 16px
    }

    .coach-avatar-circle {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(211, 228, 251, .15);
      border: 1.5px solid rgba(211, 228, 251, .22);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .coach-avatar-name {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--cream);
      opacity: .9;
      text-align: center
    }

    /* ACTIVITIES */
    #s-activities {
      background: #d3e4fb;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── BROWSE topbar ── */
    .act-topbar {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 20px 24px 32px;
      flex-shrink: 0;
      gap: 6px;
    }

    .act-screen-title {
      font-family: var(--cap);
      font-size: var(--fs-title);
      font-weight: 500;
      color: var(--purple);
      margin: 0;
    }

    .act-topbar .act-select-label {
      pointer-events: none;
    }

    /* .act-close-btn commented out
    .act-close-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #d3e4fb;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #323064;
      font-size: var(--fs-body);
      font-family: var(--cap);
    } */

    /* ── DETAIL topbar: ← | Reflect on this | ✓ ── */
    .act-detail-topbar {
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: 0px 24px 40px;
      gap: 12px;
      flex-shrink: 0;
    }

    .act-detail-back-btn,
    .act-detail-done-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.12s, background 0.12s;
    }

    .act-detail-back-btn {
      background: transparent;
      border: 3px solid var(--purple);
    }

    .act-detail-back-btn:active {
      background: #d3e4fb;
    }

    .act-detail-done-btn {
      background: var(--cream);
      border: none;
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    }

    .act-detail-done-btn:active {
      transform: scale(0.94);
    }

    .act-detail-done-btn.step-btn-secondary {
      background: transparent;
      border: 2px solid rgba(254, 248, 232, 0.6);
    }

    .act-detail-reflect-btn {
      flex: 1;
      padding: 16px 0;
      background: #fef8e8;
      color: #323064;
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 500;
      border: none;
      border-radius: 40px;
      cursor: pointer;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.15);
    }

    /* ── In detail mode: swap topbars, hide bottom label ── */
    #s-activities.act-in-detail .act-topbar {
      display: none;
    }

    /* Keep act-bottom as invisible spacer so stack ends at same y as browse mode */
    #s-activities.act-in-detail .act-bottom {
      opacity: 0;
      pointer-events: none;
    }

    #s-activities.act-in-detail .act-detail-topbar {
      display: none;
    }

    /* Non-selected cards vanish instantly */
    #s-activities.act-in-detail .act-stack-card:not(.act-selected) {
      opacity: 0;
      pointer-events: none;
    }

    /* Stack gets bottom breathing room in detail mode */
    #s-activities.act-in-detail .act-stack {
      margin-bottom: 0;
    }

    /* Selected card fills the stack container */
    #s-activities.act-in-detail .act-stack-card.act-selected {
      top: 0 !important;
      height: 100% !important;
      overflow: hidden;
      box-shadow: none;
      z-index: 20 !important;
      cursor: default;
    }

    /* Scrollable content wrapper — fills space between header and choose footer */
    .act-card-scroll {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    #s-activities.act-in-detail .act-card-scroll {
      overflow-y: auto;
    }

    /* Fade out check button when entering detail mode */
    #s-activities.act-in-detail .act-check-btn {
      opacity: 0;
      pointer-events: none;
    }

    @keyframes actHeaderIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes actFooterIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* Browse header — in-flow row holding the check button so the title
       can never overlap it. Collapses away when the card opens. */
    .act-browse-header {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 18px 18px 0;
      flex-shrink: 0;
      transition: opacity 0.18s ease;
    }

    #s-activities.act-in-detail .act-browse-header {
      opacity: 0;
      pointer-events: none;
      height: 0;
      padding: 0;
      overflow: hidden;
    }

    /* Detail header row: info btn left, collapse btn right.
       Transitions in via max-height + opacity — no jarring pop. */
    .act-detail-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      overflow: hidden;
      max-height: 0;
      padding: 0 20px;
      opacity: 0;
      pointer-events: none;
      transition: max-height 0.45s var(--ease-spring),
        opacity 0.3s ease,
        padding 0.45s var(--ease-spring);
    }

    #s-activities.act-in-detail .act-detail-header {
      max-height: 96px;
      padding: 20px 20px 4px;
      opacity: 1;
      pointer-events: auto;
    }

    /* Both buttons sit in the flex flow inside the header (override absolute base) */
    .act-detail-header .act-info-btn,
    .act-detail-header .act-collapse-btn {
      position: static;
      display: flex;
    }

    /* Collapse button */
    .act-collapse-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      min-width: 44px;
      min-height: 44px;
      border-radius: 50%;
      background: #fef8e8;
      border: none;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      cursor: pointer;
    }

    .act-collapse-btn img {
      width: 20px;
      height: 20px;
      transform: rotate(180deg);
      display: block;
    }

    /* "Choose this activity" footer — hidden in browse, always at bottom in detail */
    .act-choose-footer {
      display: none;
      flex-shrink: 0;
      padding: 16px 28px 32px;
    }

    #s-activities.act-in-detail .act-choose-footer {
      display: block;
    }

    .act-choose-btn {
      width: 100%;
      padding: 18px;
      background: var(--cream);
      color: var(--purple);
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 500;
      border: none;
      border-radius: var(--r-pill);
      cursor: pointer;
      box-shadow: var(--sh-btn);
    }

    /* ── Stack container ── */
    .act-stack {
      position: relative;
      flex: 1;
      margin: 0 24px;
      min-height: 0;
    }

    /* ── Card base ── */
    .act-stack-card {
      position: absolute;
      left: 0;
      right: 0;
      border-radius: 50px;
      height: 380px;
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
      transition: top 0.55s var(--ease-spring),
        height 0.55s var(--ease-spring),
        box-shadow 0.55s var(--ease-spring),
        opacity 0.3s ease;
      cursor: pointer;
    }

    .act-stack-card[data-idx="0"] {
      top: 0;
      background: #a0bbff;
    }

    .act-stack-card[data-idx="1"] {
      top: 100px;
      background: #7fa3fc;
    }

    .act-stack-card[data-idx="2"] {
      top: 200px;
      background: #5c89f9;
    }

    /* ── Card roll-in entrance (triggered by .act-entering on the stack) ── */
    @keyframes actCardRollIn {
      from {
        opacity: 0;
        transform: translateY(56px) scale(0.94);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .act-stack.act-entering .act-stack-card {
      animation: actCardRollIn 0.9s var(--ease-spring) both;
    }

    .act-stack.act-entering .act-stack-card[data-idx="0"] {
      animation-delay: 0ms;
    }

    .act-stack.act-entering .act-stack-card[data-idx="1"] {
      animation-delay: 110ms;
    }

    .act-stack.act-entering .act-stack-card[data-idx="2"] {
      animation-delay: 220ms;
    }

    /* Check button — in flow inside .act-browse-header */
    .act-check-btn {
      width: 52px;
      height: 52px;
      min-width: 44px;
      min-height: 44px;
      border-radius: 50%;
      border: 2.5px solid rgba(254, 248, 232, 0.7);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
      transition: opacity 0.2s ease;
    }

    /* DropDownIcon rotates 180° when card is selected (opening animation) */
    .act-check-icon {
      transition: transform 0.3s ease;
    }

    .act-stack-card.act-selected .act-check-icon {
      transform: rotate(180deg);
    }

    /* ⓘ info button — absolute top-right, shown only in detail mode */
    .act-info-btn {
      display: none;
      position: absolute;
      top: 22px;
      right: 22px;
      width: 52px;
      height: 52px;
      min-width: 44px;
      min-height: 44px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 10px;
      z-index: 2;
    }

    .act-info-btn img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .act-card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 10px 28px 0;
      min-height: 0;
    }

    /* In detail mode show title only — description stays hidden */
    #s-activities.act-in-detail .act-stack-card .act-card-body {
      flex: 0 0 auto;
      justify-content: flex-start;
    }

    #s-activities.act-in-detail .act-stack-card .act-card-desc {
      display: none;
    }

    #s-activities.act-in-detail .act-stack-card .act-card-steps {
      flex: 0 0 auto;
    }

    .act-card-title {
      font-family: var(--cap);
      font-size: var(--fs-title);
      font-weight: 400;
      color: #fef8e8;
      line-height: 1.3;
      padding: 0;
      margin-bottom: 10px;
    }

    /* When showing about: hide all content, show only about panel */
    #s-activities.act-in-detail .act-showing-about .act-card-body {
      display: none;
    }

    #s-activities.act-in-detail .act-showing-about .act-card-steps {
      display: none !important;
      flex: 0 !important;
    }

    #s-activities.act-in-detail .act-showing-about .act-card-footer {
      display: none;
    }

    #s-activities.act-in-detail .act-showing-about .act-card-about {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .act-card-desc {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: #fef8e8;
      line-height: 1.6;
      padding: 20px 20px 40px;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Steps — hidden in browse, shown in detail */
    .act-card-steps {
      display: none;
      flex-direction: column;
      gap: 16px;
      padding: 20px 20px 20px;
    }

    #s-activities.act-in-detail .act-card-steps {
      display: flex;
    }

    .act-card-step {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      text-align: left;
    }

    .act-card-step-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      color: #fef8e8;
      font-family: var(--cap);
      font-size: var(--fs-caption);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .act-card-step-text {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: #fef8e8;
      line-height: 1.55;
      flex: 1;
      padding-top: 4px;
    }

    /* Session expanded card — number above step, text centered */
    #s-activities .act-card-step {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
    }

    #s-activities .act-card-step-num {
      flex-shrink: unset;
    }

    #s-activities .act-card-step-text {
      text-align: center;
      flex: unset;
      padding-top: 0;
    }

    /* About content inside card — shown when ⓘ toggled */
    .act-card-about {
      display: none;
      flex-direction: column;
      padding: 16px 28px 24px;
    }

    /* (about-state selectors consolidated above) */

    .act-about-card-title {
      font-family: var(--cap);
      font-size: var(--fs-title);
      font-weight: 500;
      color: var(--cream);
      line-height: 1.3;
      margin-bottom: 8px;
    }

    .act-about-card-desc {
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--cream);
      opacity: 0.8;
      line-height: 1.5;
      margin-bottom: 20px;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Activity type eyebrow — moved off the browse card into the about panel */
    .act-about-type {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--cream);
      opacity: 0.6;
      margin-bottom: 8px;
    }

    /* Activity description — moved off the browse card into the about panel */
    .act-about-desc {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--cream);
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .act-about-heading {
      font-family: var(--cap);
      font-size: var(--fs-title);
      font-weight: 500;
      color: var(--cream);
      margin-bottom: 12px;
      margin-top: 0;
    }

    .act-about-body {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--cream);
      opacity: 0.85;
      line-height: 1.6;
      margin-bottom: 24px;
    }

    .act-about-config-label {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--cream);
      opacity: 0.6;
      margin-bottom: 10px;
    }

    .act-about-cfg-row {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 14px;
      padding: 13px 16px;
      margin-bottom: 8px;
      display: flex;
      gap: 14px;
    }

    .act-about-cfg-key {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--cream);
      opacity: 0.65;
      flex-shrink: 0;
      width: 76px;
    }

    .act-about-cfg-val {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--cream);
      flex: 1;
    }

    /* Footer: centered with card-body side padding */
    .act-card-footer {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 28px 40px;
    }

    .act-card-time {
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--cream);
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #s-activities.act-in-detail .act-card-footer {
      display: none;
    }

    /* Bottom label */
    .act-bottom {
      padding: 16px 24px 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .act-select-label {
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: #323064;
      opacity: 0.55;
      margin: 0;
    }

    /* About overlay removed — about now renders inside card */
    .act-about-overlay {
      display: none;
    }

    .act-about-overlay.active {
      pointer-events: all;
      transform: translateY(0);
    }

    .act-about-close {
      position: absolute;
      top: 18px;
      right: 22px;
      background: none;
      border: none;
      font-size: var(--fs-title);
      color: #fef8e8;
      opacity: 0.7;
      cursor: pointer;
      font-family: sans-serif;
    }

    .act-about-title {
      font-family: var(--cap);
      font-size: var(--fs-title);
      font-weight: 500;
      color: #fef8e8;
      margin-bottom: 16px;
    }

    .act-about-text {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: #fef8e8;
      opacity: 0.85;
      line-height: 1.6;
      margin-bottom: 32px;
    }

    .act-about-config-title {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #fef8e8;
      opacity: 0.55;
      margin-bottom: 12px;
    }

    .act-about-row {
      background: rgba(255, 255, 255, 0.12);
      border-radius: 14px;
      padding: 14px 16px;
      margin-bottom: 8px;
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .act-about-row-label {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: #fef8e8;
      opacity: 0.7;
      flex-shrink: 0;
      width: 80px;
    }

    .act-about-row-value {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: #fef8e8;
      flex: 1;
    }

    /* ACTIVITY DETAIL */
    #s-activity-detail {
      background: var(--blue-focus-lt)
    }

    /* FIX: added position:relative so the absolute orange icon anchors here */
    .detail-card-inner {
      background: var(--blue-lt);
      border-radius: var(--r-lg);
      padding: 76px 26px 26px;
      margin-bottom: 32px;
      box-shadow: none;
      position: relative
    }

    .detail-info-btn {
      position: absolute;
      top: 22px;
      left: 22px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .detail-info-btn img {
      width: 28px;
      height: 28px;
      display: block;
    }

    .detail-collapse-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #fef8e8;
      border: none;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
    }

    .detail-collapse-btn img {
      width: 20px;
      height: 20px;
      transform: rotate(180deg);
      display: block;
    }

    .detail-type {
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--cream);
      opacity: .7;
      font-family: var(--cap);
      margin-bottom: 10px;
      padding-right: 40px
    }

    /* FIX: added title element — previously a.body was shown without a.title */
    .detail-title {
      font-family: var(--cap);
      font-size: var(--fs-title);
      color: var(--lav);
      line-height: 1.3;
      margin-bottom: 8px
    }

    /* FIX: reduced from 19px, now serves as description under the title */
    .detail-question {
      font-family: var(--cap);
      font-size: var(--fs-body);
      line-height: 1.45;
      color: var(--purple);
      opacity: .72
    }

    .detail-bottom {
      flex: 1;
      overflow-y: auto;
      background: var(--blue-focus-lt) border-radius: 28px 28px 0 0;
      padding: 32px 26px 40px;
      display: flex;
      flex-direction: column
    }

    .detail-steps {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 32px;
      flex: 1
    }

    .detail-step {
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .detail-step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--cream);
      color: var(--purple);
      font-family: var(--cap);
      font-size: var(--fs-caption);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      box-shadow: 0 2px 5px rgba(50, 48, 100, 0.05)
    }

    .detail-step-text {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      opacity: .85;
      line-height: 1.5;
      flex: 1
    }

    /* FEEDBACK */
    /* Match step 1/2 heading rhythm so the panel starts at the same height */
    #s-feedback .act-detail-topbar {
      padding-bottom: 16px;
    }

    #s-feedback .step-heading {
      padding: 16px 24px 0;
      flex-shrink: 0;
    }

    /* Drawing in normal flow between title and panel, so it pushes the text
       field down and stays visible on every screen size. The square SVG has
       ~25% transparent padding around the artwork; the negative margins crop
       that dead space out of the layout. */
    .fb-drawing {
      position: relative;
      z-index: 1;
      width: 48%;
      align-self: center;
      margin: -10% 0 -11%;
      flex-shrink: 0;
      pointer-events: none;
    }

    .fb-drawing img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Panel fills remaining space and sits above the drawing */
    #s-feedback .step-panel {
      flex: 1;
      height: auto;
      position: relative;
      z-index: 2;
    }



    /* JOURNEY — zigzag snake layout */
    #s-journey {
      background: linear-gradient(180deg, #FEF8E8 0%, #FFDC64 42%, #F5E8A0 90%);
      /* Height of the status bar (60px) + topbar (44px) — the region the path
         scrolls behind */
      --j-chrome: calc(max(env(safe-area-inset-top, 0px), 60px) + 0px);

      /* ── Top blur circle (adjustable) ──────────────────────────────────
         A cream-coloured circle with a Gaussian blur, sitting between the
         scrolling path and the topbar. Its blurred edges feather softly so the
         path dissolves into it with no hard cut. Tune these three: */
      --j-blur-size: 2000px;
      /* diameter of the circle */
      --j-blur-amount: 20px;
      /* Gaussian blur radius */
      --j-blur-top: -1890px;
      /* vertical offset (more negative = sits higher) */
    }

    .j-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--pad-x) 10px;
      flex-shrink: 0;
      position: relative;
      z-index: 5;
    }

    /* A cream circle with a Gaussian blur, layered between the scrolling path
       (z-index 0) and the topbar (z-index 5). Its own blurred edges feather it
       softly into the background, so the path dissolves under it with no hard
       cut. Size / blur / vertical offset are controlled by the variables on
       #s-journey above. */
    .j-top-blur {
      position: absolute;
      top: var(--j-blur-top);
      left: 50%;
      transform: translateX(-50%);
      width: var(--j-blur-size);
      height: var(--j-blur-size);
      border-radius: 50%;
      background: #FEF8E8;
      filter: blur(var(--j-blur-amount));
      z-index: 4;
      pointer-events: none;
    }

    .j-brand {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      opacity: .4;
    }

    .j-topbar .profile-circle {
      margin-left: auto;
    }

    .j-session-count {
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--purple);
      opacity: .55;
      background: rgba(92, 137, 249, .12);
      padding: 6px 14px;
      border-radius: 20px;
    }

    /* ─── Snake Path ─── */
    /* Fills the whole screen so the path can scroll up behind the status bar +
       topbar, where the .j-top-blur circle dissolves it instead of a hard clip. */
    .j-scroll {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    .j-path {
      position: relative;
      /* Push the first node below the chrome + the blur circle's soft falloff so
         it starts fully sharp at rest */
      padding-top: calc(var(--j-chrome) + 40px);
    }

    /* Zero-sessions layout: the steps row collapses when closed so the anchor sits
       up just below the header, then expands to push the anchor down when opened. */
    .j-path--zero {
      display: grid;
      grid-template-rows: auto auto auto auto;
    }

    .j-path--zero .jz-steps {
      align-self: start;
    }

    @keyframes journeyScrollEnter {
      from {
        opacity: 0;
        transform: translateY(28px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .j-scroll.journey-scroll-enter {
      animation: journeyScrollEnter 0.52s var(--ease-spring) both;
    }

    /* SVG path — full-area overlay, redrawn by JS */
    .jz-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 0;
      transition: opacity .22s ease;
    }

    /* Coach banner (shown when ≥1 sessions) — matches .jz-start-header style */
    .jz-coach-banner {
      margin: 16px 20px;
      padding: 20px;
      border: 3px solid #ffce66;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 6px 18px rgba(50, 48, 100, 0.18);
    }

    .jz-coach-banner-title {
      font-family: var(--cap);
      font-size: var(--fs-heading);
      font-weight: 600;
      color: var(--purple);
      line-height: 1.15;
    }

    .jz-coach-banner-sub {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      opacity: .6;
    }

    .jz-coach-banner-msg {
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--purple);
      line-height: 1.55;
      margin-top: 10px;
      background: rgba(255, 255, 255, .45);
      border-radius: 16px;
      padding: 12px 16px;
    }

    /* Ghost row — centered, sits at the top of the snake */
    .jz-ghost-row {
      position: relative;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* Ghost circle */
    .jz-ghost {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: #E77302;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
      position: relative;
      box-shadow: 0 8px 22px rgba(50, 48, 100, .26), 0 2px 6px rgba(50, 48, 100, .18);
      transition: transform .16s, background .2s, box-shadow .2s;
    }

    .jz-ghost:active {
      transform: scale(.9);
    }

    .jz-ghost.coach-ready {
      background: white;
    }

    .jz-ghost.coach-ready .jz-ghost-text {
      color: var(--purple);
    }

    /* Exhibition/visitor: locked "Next Session" state — orange (the base fill),
       flat (no shadow) and un-tappable until the 60s cooldown lifts. */
    .jz-ghost.session-locked {
      box-shadow: none;
      pointer-events: none;
      cursor: default;
    }

    .jz-ghost.session-locked:active {
      transform: none;
    }

    .jz-ghost-text {
      font-family: var(--cap);
      font-size: 16px;
      font-weight: 600;
      color: var(--cream);
      text-align: center;
      line-height: 1.25;
      pointer-events: none;
    }

    /* Each session occupies a fixed-height row */
    .jz-session-outer {
      position: relative;
    }

    .jz-session-row {
      position: relative;
      height: 200px;
      flex-shrink: 0;
    }

    /* Anchor row — holds AnchorJourney.svg at the bottom of the snake */
    .jz-anchor-row {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      pointer-events: none;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .jz-anchor-img {
      width: 200px;
      display: block;
      pointer-events: none;
      /* Pivot at the top centre — where the anchor hangs from the New Session circle */
      transform-origin: 50% 0;
    }

    /* Damped pendulum — plays once: released from a tilt and decaying to rest at
       centre. Triggered by JS on screen entrance and on each header press. */
    .jz-anchor-img.anchor-swing {
      animation: anchorSwing 2.8s ease-in-out both;
    }

    @keyframes anchorSwing {
      0% {
        transform: rotate(9deg);
      }

      14% {
        transform: rotate(-6.5deg);
      }

      28% {
        transform: rotate(4.6deg);
      }

      42% {
        transform: rotate(-3.1deg);
      }

      56% {
        transform: rotate(2deg);
      }

      70% {
        transform: rotate(-1.2deg);
      }

      84% {
        transform: rotate(0.6deg);
      }

      100% {
        transform: rotate(0deg);
      }
    }

    /* Zero-sessions wrapper: anchor SVG with ghost overlaid on its top circle */
    .jz-anchor-zero-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      padding: 40px 24px 60px;
      flex-shrink: 0;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.38s var(--ease-spring) 0.1s, transform 0.38s var(--ease-spring) 0.1s;
    }

    .jz-anchor-zero-wrap.anchor-visible {
      opacity: 1;
      transform: none;
    }

    .jz-anchor-zero-wrap .jz-ghost {
      position: absolute;
      top: 30px;
      left: calc(50% - 48px);
    }

    .jz-ghost.locked {
      cursor: default;
      opacity: .72;
    }

    /* ── Zero-sessions start screen ── */
    .jz-start-header {
      margin: 16px 20px;
      padding: 20px;
      border: 3px solid #ffce66;
      border-radius: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 14px;
      cursor: pointer;
      user-select: none;
      box-shadow: 0 6px 18px rgba(50, 48, 100, 0.18);
      transition: opacity .15s, box-shadow 0.3s ease;
    }

    .jz-start-head-text {
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1 1 auto;
      min-width: 0;
    }

    .jz-start-chevron {
      flex-shrink: 0;
      color: var(--purple);
      opacity: .55;
      transition: transform 0.3s var(--ease-std), opacity 0.3s ease;
    }

    .jz-start-header.steps-open {
      box-shadow: none;
    }

    /* One-time reveal: once the steps are open they can't be closed, so the
       chevron fades out rather than rotating (a rotated chevron falsely reads
       as a "collapse again" affordance). */
    .jz-start-header.steps-open .jz-start-chevron {
      opacity: 0;
      pointer-events: none;
    }

    .jz-start-title {
      font-family: var(--cap);
      font-size: var(--fs-heading);
      font-weight: 600;
      color: var(--purple);
      line-height: 1.15;
    }

    .jz-start-sub {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      opacity: .6;
    }

    .jz-steps {
      margin: 0 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: hidden;
      max-height: 0;
      margin-top: 0;
      transition: max-height 0.38s ease 0.22s,
        margin-top 0.38s ease 0.22s,
        padding-bottom 0.38s ease 0.22s;
    }

    .jz-steps.open {
      max-height: 500px;
      margin-top: 4px;
      padding-bottom: 10px;
      transition: max-height 0.45s var(--ease-std),
        margin-top 0.45s ease,
        padding-bottom 0.45s ease;
    }

    .jz-step {
      background: var(--lav);
      border-radius: 20px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 18px;
      box-shadow: none;
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.28s ease, transform 0.28s ease;
    }

    .jz-step:nth-child(1) {
      transition-delay: 0.16s;
    }

    .jz-step:nth-child(2) {
      transition-delay: 0.08s;
    }

    .jz-step:nth-child(3) {
      transition-delay: 0s;
    }

    .jz-steps.open .jz-step {
      opacity: 1;
      transform: none;
    }

    .jz-steps.open .jz-step:nth-child(1) {
      transition-delay: 0.05s;
    }

    .jz-steps.open .jz-step:nth-child(2) {
      transition-delay: 0.18s;
    }

    .jz-steps.open .jz-step:nth-child(3) {
      transition-delay: 0.31s;
    }

    .jz-steps.no-transition,
    .jz-steps.no-transition .jz-step {
      transition: none !important;
    }

    /* Exhibition/visitor: the single "discuss with your coach" card revealed by
       the locked Next Session header. Reuses .jz-step (so it inherits the same
       reveal animation) but drops the number-row layout for full-width text. */
    .jz-next-card {
      display: block;
    }

    .jz-step-num {
      background: var(--cream);
      border-radius: 50%;
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--cap);
      font-size: var(--fs-label);
      font-weight: 600;
      color: var(--purple);
    }

    .jz-step-text {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      line-height: 1.4;
    }

    .jz-anchor-label {
      text-align: center;
      padding: 24px 24px 8px;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.38s var(--ease-spring), transform 0.38s var(--ease-spring);
    }

    .jz-anchor-label.anchor-visible {
      opacity: 1;
      transform: none;
    }

    .jz-anchor-label-title {
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 700;
      color: var(--purple);
    }

    .jz-anchor-label-sub {
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--purple);
      opacity: .5;
      margin-top: 4px;
    }

    /* Node circle */
    .j-node-circle {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 76px;
      height: 76px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
      transition: transform .16s;
    }

    .j-node-circle:active {
      transform: translateY(-50%) scale(.9);
    }

    /* Older nodes — light blue, purple icons */
    .j-node-circle {
      background: linear-gradient(145deg, #D3E4FB, #A0BBFF);
    }

    .j-node-circle img {
      filter: brightness(0) saturate(100%) invert(14%) sepia(50%) saturate(800%) hue-rotate(215deg) brightness(70%);
    }

    /* Newest node — focus blue, cream icons */
    .j-node-circle.is-latest {
      background: linear-gradient(145deg, #8DB5FF, #5C89F9);
    }

    .j-node-circle.is-latest img {
      filter: brightness(0) invert(1) sepia(0.15);
    }

    .j-node-circle.is-latest::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 3px solid rgba(92, 137, 249, .4);
      animation: pulseRing 2.2s ease-in-out infinite;
    }

    @keyframes pulseRing {

      0%,
      100% {
        transform: scale(1);
        opacity: .45;
      }

      50% {
        transform: scale(1.15);
        opacity: .15;
      }
    }

    .j-today-badge {
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--purple);
      color: var(--cream);
      font-family: var(--cap);
      font-size: var(--fs-caption);
      padding: 3px 9px;
      border-radius: 10px;
      white-space: nowrap;
    }

    .j-node-circle.node-new {
      animation: nodePop .5s var(--ease-pop) both,
        nodeHighlight 2.5s 0.6s ease both;
    }

    @keyframes nodePop {
      from {
        transform: translateY(-50%) scale(.3);
        opacity: 0;
      }

      to {
        transform: translateY(-50%) scale(1);
        opacity: 1;
      }
    }

    /* Fix 10: golden glow highlight fades in then out after session completion */
    @keyframes nodeHighlight {
      0% {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .2), 0 0 0 0px rgba(255, 189, 48, 0);
      }

      25% {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .2), 0 0 0 12px rgba(255, 189, 48, .35);
      }

      100% {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .2), 0 0 0 0px rgba(255, 189, 48, 0);
      }
    }

    .jz-label {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      max-width: 110px;
      cursor: pointer;
    }

    .jz-label.right {
      text-align: left;
    }

    .jz-label.left {
      text-align: right;
    }

    .j-node-date {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--purple);
      opacity: .5;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 2px;
    }

    .j-node-type {
      font-family: var(--cap);
      font-size: var(--fs-label);
      font-weight: 600;
      color: var(--purple);
    }

    /* ─── Detail card ─── */
    .j-detail-card {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height .48s var(--ease-spring), opacity .32s var(--ease-out),
        margin .32s var(--ease-out);
      margin: 0;
    }

    .j-detail-card.open {
      max-height: 700px;
      opacity: 1;
      margin: 12px 0 20px;
    }

    .j-detail-inner {
      background: rgba(211, 228, 251, .8);
      border-radius: 24px;
      padding: 22px;
    }

    .j-detail-section {
      margin-bottom: 18px;
    }

    .j-detail-section:last-child {
      margin-bottom: 0;
    }

    .j-detail-label {
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 500;
      color: var(--purple);
      opacity: .4;
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .j-detail-label svg {
      opacity: 1;
      flex-shrink: 0;
    }

    .j-detail-text {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      line-height: 1.55;
    }

    /* Activity pill inside detail */
    .j-act-pill {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      border-radius: 16px;
      cursor: pointer;
      transition: opacity .15s;
      background: linear-gradient(135deg, #A8C4FF, #6892F5);
    }

    .j-act-pill:active {
      opacity: .75;
    }

    .j-act-pill-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .28);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .j-act-pill-icon img {
      width: 18px;
      height: 18px;
    }

    .j-act-pill-text {
      flex: 1;
      min-width: 0;
    }

    .j-act-pill-type {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, .75);
      margin-bottom: 2px;
    }

    .j-act-pill-title {
      font-family: var(--cap);
      font-size: var(--fs-label);
      font-weight: 500;
      color: white;
      line-height: 1.3;
    }

    /* Feedback bubble */
    .j-feedback-bubble {
      background: rgba(255, 255, 255, .55);
      border-radius: 16px 16px 16px 4px;
      padding: 14px 16px;
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--purple);
      line-height: 1.55;
      font-style: italic;
    }

    .j-feedback-empty {
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--purple);
      opacity: .3;
      font-style: italic;
    }

    /* Fix 7: Add reflection button in journey detail card */
    .j-add-reflection-btn {
      display: inline-flex;
      align-items: center;
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 500;
      color: var(--purple);
      background: var(--cream);
      border: none;
      border-radius: 32px;
      padding: 18px 40px;
      cursor: pointer;
      letter-spacing: .01em;
      transition: opacity .15s, transform .12s;
    }

    .j-add-reflection-btn:active {
      opacity: .8;
      transform: scale(0.97);
    }


    /* LIBRARY DETAIL */
    .libdet-ctx-btns {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 18px
    }

    .libdet-ctx-btn {
      flex: 1;
      padding: 9px 12px;
      border-radius: var(--r-sm);
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--purple);
      cursor: pointer;
      border: none;
      text-align: center;
      opacity: .9;
      transition: opacity .15s, transform .12s
    }

    .libdet-ctx-btn:active {
      transform: scale(.96)
    }

    .libdet-ctx-btn.insight-btn {
      background: rgba(243, 141, 39, .18)
    }

    .libdet-ctx-btn.situation-btn {
      background: rgba(255, 89, 202, .14)
    }

    .libdet-ctx-panel {
      border-radius: var(--r-sm);
      padding: 13px 16px;
      margin-bottom: 14px;
      display: none
    }

    .libdet-ctx-panel.visible {
      display: block
    }

    .libdet-ctx-panel.insight-panel {
      background: rgba(243, 141, 39, .18)
    }

    .libdet-ctx-panel.situation-panel {
      background: rgba(255, 89, 202, .14)
    }

    .libdet-ctx-label {
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--purple);
      opacity: .5;
      font-family: var(--cap);
      margin-bottom: 5px
    }

    .libdet-ctx-text {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--purple);
      opacity: .82;
      line-height: 1.5
    }

    #s-lib-detail {
      background: var(--lav);
    }

    .ld-full-card {
      flex: 1;
      overflow-y: auto;
      background: #7FA3FC;
      border-radius: 50px;
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
      margin: 0 20px 24px;
      padding: 56px 32px 40px;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    #ld-card .detail-title {
      font-size: var(--fs-title);
      color: var(--cream);
      text-align: left;
      margin: 40px;
      margin-bottom: 60px;
    }

    .ld-type-label {
      display: inline-block;
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .09em;
      /* background: rgba(255, 255, 255, 0.25); */
      color: var(--cream);
      border-radius: 20px;
      padding: 4px 10px;
      margin-bottom: 10px;
    }

    .ld-about-tagline {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--cream);
      line-height: 1.5;
      margin-bottom: 4px;
    }

    #ld-card .act-card-step-num {
      width: 30px;
      height: 30px;
      background: var(--lav);
      color: var(--purple);
      font-size: var(--fs-label);
    }

    #ld-card .act-card-step-text {
      font-size: var(--fs-body);
    }

    /* Journey detail about toggle */
    #ld-card .ld-about-content {
      display: none;
    }

    #ld-card.ld-about .ld-about-content {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 8px;
    }

    #ld-card.ld-about .ld-main {
      display: none;
    }

    /* Reflect button row */
    .jd-reflect-row {
      display: flex;
      justify-content: center;
      margin-top: auto;
      padding-top: 20px;
      padding-bottom: 16px;
      flex-shrink: 0;
    }

    .ld-reflect-btn {
      background: var(--cream);
      color: var(--purple);
      border: none;
      border-radius: 32px;
      padding: 18px 40px;
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 500;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      cursor: pointer;
    }


    /* ABOUT LAYER */
    /* FIX: added backdrop to allow close-on-outside-tap */
    .about-backdrop {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: transparent
    }

    .about-backdrop.active {
      pointer-events: all
    }

    .about-modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      max-height: 88%;
      overflow-y: auto;
      background: var(--blue-focus);
      border-radius: 0 0 32px 32px;
      padding: 86px 24px 32px;
      z-index: 4;
      pointer-events: none;
      transform: translateY(-100%);
      transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease;
      box-shadow: none
    }

    /* ═══════════════════════════════════════════
       v22 FIXES
       ═══════════════════════════════════════════ */

    /* Fix 9 + Fix 2: Mic button wrapper, label, and unsupported notice */
    .mic-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      position: absolute;
      top: 32px;
      right: 16px;
    }

    /* Reset the absolute positioning that mic-idle-btn uses standalone */
    .mic-wrap .mic-idle-btn {
      position: static;
    }

    .mic-label {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--purple);
      opacity: .45;
      white-space: nowrap;
      pointer-events: none;
    }

    .mic-unsupported {
      display: none;
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--purple);
      opacity: .55;
      text-align: center;
      max-width: 140px;
      line-height: 1.3;
      white-space: normal;
    }

    /* When SR is unsupported, JS adds .sr-unsupported to body */
    body.sr-unsupported .mic-label {
      display: none;
    }

    body.sr-unsupported .mic-idle-btn {
      opacity: .32;
      pointer-events: none;
    }

    body.sr-unsupported .mic-unsupported {
      display: block;
    }

    /* Fix 9: Mic first-use tooltip */
    @keyframes micTooltipIn {
      from {
        opacity: 0;
        transform: scale(0.92) translateX(8px);
      }

      to {
        opacity: 1;
        transform: scale(1) translateX(0);
      }
    }

    @keyframes micTooltipOut {
      from {
        opacity: 1;
        transform: scale(1) translateX(0);
      }

      to {
        opacity: 0;
        transform: scale(0.92) translateX(8px);
      }
    }

    .mic-tooltip {
      position: absolute;
      right: calc(100% + 12px);
      top: 0;
      background: var(--cream);
      border-radius: 12px;
      padding: 10px 14px;
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--purple);
      line-height: 1.45;
      width: 148px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
      pointer-events: none;
      animation: micTooltipIn 0.22s ease both;
      z-index: 10;
    }

    .mic-tooltip.dismissing {
      animation: micTooltipOut 0.15s ease forwards;
    }

    /* Fix 6: Activity card peek affordance */
    @keyframes actCardPeekUp {
      0% {
        transform: translateY(0);
      }

      40% {
        transform: translateY(-16px);
      }

      100% {
        transform: translateY(0);
      }
    }

    .act-stack.act-peek .act-stack-card[data-idx="1"] {
      animation: actCardPeekUp 1000ms var(--ease-out) both;
    }

    .act-stack.act-peek .act-stack-card[data-idx="2"] {
      animation: actCardPeekUp 1000ms var(--ease-out) both;
      animation-delay: 120ms;
    }

    /* Fix 3: Landscape orientation warning overlay */
    #landscape-warning {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: var(--purple);
      color: var(--cream);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      padding: 32px;
      text-align: center;
    }

    #landscape-warning svg {
      opacity: .9;
      flex-shrink: 0;
    }

    #landscape-warning-text {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .landscape-warning-primary {
      font-family: var(--cap);
      font-size: var(--fs-lead);
      line-height: 1.3;
      color: var(--cream);
    }

    .landscape-warning-sub {
      font-family: var(--cap);
      font-size: var(--fs-label);
      line-height: 1.5;
      color: var(--cream);
      opacity: .55;
      letter-spacing: .02em;
    }

    /* Landscape warning visibility is controlled entirely by JS (updateLandscapeWarning)
       using screen.orientation / window.orientation so keyboard-shrunk viewports
       are never mistaken for physical landscape. No CSS media query needed here. */

    /* Fix 4: iPad / large-touch portrait — constrain + center */
    @media (pointer: coarse) and (min-width: 500px) and (orientation: portrait) {
      body {
        background: #C5D7F5;
        display: flex;
        align-items: flex-start;
        justify-content: center;
      }

      #app {
        position: relative;
        width: 390px;
        height: 100vh;
        height: 100dvh;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        border-radius: 0;
        box-shadow: 0 0 60px rgba(0, 0, 0, .25);
        flex-shrink: 0;
      }
    }

    /* Fix 4: iPad landscape — floating phone frame (min-height:501px excludes phones
       already covered by Fix 3 landscape warning which fires at max-height:500px) */
    @media (pointer: coarse) and (min-width: 500px) and (orientation: landscape) and (min-height: 501px) {
      body {
        background: #C5D7F5;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #app {
        position: relative;
        width: 390px;
        height: min(844px, 100vh);
        height: min(844px, 100dvh);
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        border-radius: 24px;
        box-shadow: 0 40px 80px rgba(0, 0, 0, .3);
        flex-shrink: 0;
        overflow: hidden;
      }
    }

    /* Fix 10: Enhanced toast — larger, longer-lived (duration set in JS), more prominent */
    #toast {
      font-size: var(--fs-label);
      padding: 14px 22px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      bottom: 56px;
      box-shadow: 0 8px 32px rgba(50, 48, 100, .28);
      transition: opacity .22s ease, transform .22s ease;
    }

    .about-modal-overlay.active {
      pointer-events: all;
      transform: translateY(0);
      box-shadow: 0 16px 40px rgba(50, 48, 100, 0.12)
    }

    .about-modal {
      width: 100%
    }

    .about-modal-title {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--lav);
      ;
      opacity: 1;
      margin-bottom: 12px
    }

    .about-modal-text {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--lav);
      opacity: 0.85;
      line-height: 1.6
    }

    .libdet-cat {
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--orange);
      font-family: var(--cap);
      margin-bottom: 10px
    }

    .libdet-title {
      font-family: var(--cap);
      font-size: var(--fs-title);
      color: var(--purple);
      line-height: 1.28;
      margin-bottom: 8px
    }

    .libdet-tagline {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--cream);
      opacity: .6;
      line-height: 1.45
    }

    .libdet-body {
      flex: 1;
      overflow-y: auto;
      padding: 22px 24px 32px
    }

    .libdet-section {
      margin-bottom: 22px
    }

    .libdet-section-label {
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--cream);
      opacity: 1;
      font-family: var(--cap);
      margin-bottom: 8px
    }

    .libdet-text {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      opacity: .78;
      line-height: 1.6
    }

    .libdet-steps {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .libdet-step {
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .libdet-step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--cream);
      color: var(--purple);
      font-family: var(--cap);
      font-size: var(--fs-caption);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      box-shadow: 0 2px 5px rgba(50, 48, 100, 0.05)
    }

    .libdet-step-text {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--cream);
      opacity: .85;
      line-height: 1.5;
      flex: 1
    }

    /* ACCOUNT */
    #s-account {
      background: var(--blue-focus)
    }

    .account-body {
      flex: 1;
      overflow-y: auto;
      padding: 0 24px 40px
    }

    .account-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 0 28px
    }

    .account-avatar {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      border: 2.5px solid var(--purple);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      box-shadow: 0 4px 20px rgba(197, 191, 217, .5)
    }

    .account-name {
      font-family: var(--cap);
      font-size: var(--fs-title);
      color: var(--cream);
      margin-bottom: 4px
    }

    .account-role {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--lav);
      opacity: .7
    }

    .account-section {
      margin-bottom: 22px
    }

    .account-section-label {
      font-size: var(--fs-caption);
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--purple);
      opacity: .32;
      font-family: var(--cap);
      margin-bottom: 10px
    }

    .account-row {
      background: rgba(211, 228, 251, .1);
      border-radius: var(--r);
      padding: 15px 17px;
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .account-row-label {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--cream)
    }

    .account-row-value {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--lav);
      opacity: .75;
      text-align: right
    }

    /* FIX: sessions nudge shown when count is 0 */
    .sessions-nudge {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--orange);
      opacity: .75;
      padding: 4px 17px 10px;
      line-height: 1.4
    }

    .toggle {
      width: 44px;
      height: 25px;
      border-radius: 13px;
      background: var(--purple-12);
      position: relative;
      cursor: pointer;
      transition: background .22s;
      flex-shrink: 0
    }

    .toggle.on {
      background: var(--cream)
    }

    .toggle::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: var(--seashell);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
      transition: left .22s var(--ease-std)
    }

    .toggle.on::after {
      left: 22px
    }

    /* ERROR */
    /* ErrorDrawing.svg is portrait (668x773) — size by height so it matches
       the generating drawing's footprint instead of ballooning at 220px wide */
    .gen-drawing-error img {
      width: auto;
      height: 200px;
    }

    .gen-error {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--purple);
      opacity: .65;
      text-align: center;
      max-width: 280px;
      line-height: 1.55
    }

    /* ═══ WALKTHROUGH TOUR ═══ */
    #wt-overlay {
      position: absolute;
      inset: 0;
      z-index: 100;
      pointer-events: all;
      background: transparent;
      transition: background 0.3s ease;
    }

    #wt-hole {
      position: absolute;
      background: transparent;
      box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55);
      border-radius: 16px;
      transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease, opacity .2s ease;
      pointer-events: none;
    }

    .wt-tooltip {
      position: absolute;
      background: var(--blue-focus);
      border-radius: 20px;
      padding: 20px 20px 16px;
      left: 24px;
      right: 24px;
      box-shadow: 0 8px 32px rgba(50, 48, 100, 0.18);
      z-index: 1;
      transition: top .3s ease, opacity .2s ease;
    }

    .wt-title {
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 700;
      color: var(--lav);
      margin: 0 0 8px;
    }

    .wt-text {
      font-family: var(--cap);
      font-size: var(--fs-body);
      color: var(--lav);
      opacity: 0.7;
      margin: 0 0 16px;
      line-height: 1.5;
    }

    .wt-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .wt-next-btn {
      background: var(--cream);
      color: var(--purple);
      border: none;
      border-radius: 50px;
      padding: 10px 22px;
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 600;
      cursor: pointer;
      flex-shrink: 0;
    }

    .wt-skip-btn {
      position: absolute;
      top: 16px;
      right: 20px;
      background: none;
      border: none;
      padding: 0;
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--lav);
      cursor: pointer;
    }

    #wt-overlay.wt-dim {
      background: rgba(0, 0, 0, 0.45);
    }

    @keyframes wt-card-appear {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .wt-card-appear {
      animation: wt-card-appear 0.45s var(--ease-out) forwards;
    }

    @keyframes wt-notif-enter {
      from {
        transform: translateY(-120%);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @keyframes wt-pulse-ring {

      0%,
      100% {
        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55), 0 0 0 0px rgba(255, 255, 255, 0);
      }

      55% {
        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55), 0 0 0 12px rgba(255, 255, 255, 0.85);
      }
    }

    #wt-hole.wt-hole-pulse {
      animation: wt-pulse-ring 1.5s ease-in-out infinite;
      pointer-events: auto;
      cursor: pointer;
    }

    .wt-notif {
      position: absolute;
      left: 16px;
      right: 16px;
      background: var(--cream);
      border-radius: 20px;
      padding: 14px 16px 16px;
      box-shadow: 0 8px 32px rgba(20, 30, 80, 0.35);
      z-index: 1;
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    .wt-notif.wt-notif-enter {
      animation: wt-notif-enter 0.45s var(--ease-out) forwards;
    }

    .wt-notif-app-row {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .wt-notif-app-label {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      font-weight: 600;
      color: var(--purple);
      opacity: 0.6;
      /* text-transform: uppercase; */
      letter-spacing: .07em;
      flex: 1;
    }

    .wt-notif-time {
      font-family: var(--cap);
      font-size: var(--fs-caption);
      color: var(--purple);
      opacity: 0.45;
    }

    .wt-notif-body-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .wt-notif-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 245, 228, 0.2);
      color: var(--purple);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 700;
      flex-shrink: 0;
      overflow: hidden;
    }

    .wt-notif-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
    }

    .wt-notif-title {
      font-family: var(--cap);
      font-size: var(--fs-body);
      font-weight: 700;
      color: var(--purple);
      margin: 0;
      line-height: 1.3;
    }

    .wt-notif-sub {
      font-family: var(--cap);
      font-size: var(--fs-label);
      color: var(--purple);
      opacity: 0.65;
      margin: 0;
      line-height: 1.3;
    }

    /* ── Small-device layout adjustments ─────────────── */

    /* Activity cards: tighter stack for screens ≤ 700px tall */
    @media (max-width:430px) and (max-height:700px) {
      .act-topbar {
        padding-top: 20px;
        padding-bottom: 20px;
      }

      .act-stack-card {
        height: 320px;
      }

      .act-stack-card[data-idx="1"] {
        top: 80px;
      }

      .act-stack-card[data-idx="2"] {
        top: 160px;
      }

      .act-bottom {
        padding-top: 10px;
        padding-bottom: 20px;
      }
    }