.wt .demo {position: relative; max-width: 400px; width: 100%; margin: 0 auto;}
.wt .stack {position: relative;}
.wt .sheet {position: absolute; inset: 0; border-radius: var(--r-card);
    background: var(--paper); border: 1px solid var(--line);}
.wt .sheet-3 {transform: rotate(-5deg) translate(-10px, 14px); opacity: .55;}
.wt .sheet-2 {transform: rotate(3deg) translate(8px, 7px); opacity: .85;}
.wt .card {position: relative; min-height: 330px; display: flex; flex-direction: column;
    padding: 22px 22px 20px; border-radius: var(--r-card);
    background:
      repeating-linear-gradient(to bottom, transparent 0 31px, rgba(61, 122, 111, .045) 31px 32px),
      var(--paper);
    border: 1px solid var(--line); box-shadow: var(--shadow);
    touch-action: pan-y; user-select: none; -webkit-user-select: none;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s ease,
      translate .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
    cursor: grab;}
.wt .card.dragging {transition: none; cursor: grabbing;}
.wt .card.enter {animation: enter .32s cubic-bezier(.2, .8, .2, 1);}
@keyframes enter { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.wt .card::after {content: ""; position: absolute; top: 18px; padding: 6px 10px; border-radius: 8px;
    font: 700 12px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase;
    opacity: 0; transition: opacity .12s ease; pointer-events: none;}
.wt .card[data-lean="yes"]::after {content: "A whim"; right: 18px; color: var(--clay-deep); border: 2px solid var(--clay); opacity: 1; transform: rotate(6deg);}
.wt .card[data-lean="no"]::after {content: "All good"; left: 18px; color: var(--sage-deep); border: 2px solid var(--sage); opacity: 1; transform: rotate(-6deg);}
.wt .card-top > * {transition: opacity .15s ease;}
.wt .card[data-lean="yes"] .level, .wt .card[data-lean="no"] .when {opacity: 0;}
.wt .swipe-hint {position: absolute; z-index: 3; left: 50%; top: 42%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border-radius: 50%; background: rgba(43, 42, 40, .18); border: 2px solid rgba(255, 255, 255, .95);
    box-shadow: 0 2px 8px rgba(43, 42, 40, .25); opacity: 0; transform: scale(.7); pointer-events: none;
    transition: opacity .25s ease, transform .6s cubic-bezier(.4, 0, .2, 1);}
.wt .swipe-hint.on {opacity: 1; transform: scale(1);}
.wt .swipe-hint.on.right {transform: translateX(44px);}
.wt .swipe-hint.on.left {transform: translateX(-44px);}
.wt .card.hinting {transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .28s ease,
      translate .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;}
@media (min-width: 900px) {
  .wt .swipe-hint {width: 52px; height: 52px; margin: -26px 0 0 -26px; background: rgba(43, 42, 40, .24); box-shadow: 0 4px 14px rgba(43, 42, 40, .3);}
  .wt .swipe-hint.on.right {transform: translateX(72px);}
  .wt .swipe-hint.on.left {transform: translateX(-72px);}
}
.wt .sheet {transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wt .stack:hover .sheet {transition: transform .6s cubic-bezier(.3, 1.35, .5, 1), opacity .4s ease;}
  .wt .stack:hover .sheet-3 {transform: rotate(-12deg) translate(-30px, -13px); opacity: .75;}
  .wt .stack:hover .sheet-2 {transform: rotate(10deg) translate(27px, -20px); opacity: .95;}
  .wt .stack:hover .card {translate: 0 -8px;
      box-shadow: 0 2px 4px rgba(43, 42, 40, .06), 0 30px 54px -22px rgba(43, 42, 40, .34);}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (max-width: 1099px) {
  .wt .stack:hover .sheet-2 {transform: rotate(6.5deg) translate(20px, -6px);}
}
.wt .card-top {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.wt .when {font-size: 13px; font-weight: 500; color: var(--muted-text);}
.wt .level {font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap;}
.wt .level-likely {background: var(--clay-tint); color: var(--clay-deep);}
.wt .level-maybe {background: #F9EEEA; color: #9A4D3B;}
.wt .level-possibly {background: transparent; color: #9A4D3B; box-shadow: inset 0 0 0 1px #E3C4BA;}
.wt .merchant-row {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px;}
.wt .merchant {font-family: var(--display); font-weight: 650; font-size: 24px; letter-spacing: -.01em; line-height: 1.15;}
.wt .amount {font-family: var(--display); font-weight: 650; font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.01em;}
.wt .category {margin-top: 3px; font-size: 13.5px; color: var(--muted-text);}
.wt .flags {margin-top: 16px;}
.wt .flags-label {display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-text);}
.wt .flags ul {list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px;}
.wt .flags li {display: flex; align-items: center; gap: 9px; font-size: 15px; line-height: 1.4; color: var(--ink-soft);}
.wt .flags li svg {flex: none; color: var(--clay-deep);}
.wt .flags b {color: var(--clay-deep); font-weight: 650;}
.wt .ask {margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 15px;}
.wt .ask .opt {display: block; margin-top: 2px; font-weight: 400; font-size: 13.5px; color: var(--muted-text);}
.wt .choices {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;}
.wt .choice {padding: 13px 12px; border-radius: var(--r-btn); border: 1px solid var(--line);
    background: var(--bg); font-weight: 600; font-size: 15px; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;}
.wt .choice:hover {border-color: var(--muted);}
.wt .choice.yes {background: var(--ink); color: #fff; border-color: var(--ink);}
.wt .choice.yes:hover {background: #000;}
.wt .chips {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;}
.wt .chip {padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--paper); font-size: 14px; font-weight: 500; cursor: pointer;}
.wt .chip[aria-pressed="true"] {background: var(--clay-tint); border-color: var(--clay); color: var(--clay-deep);}
.wt .done {margin: auto 0; text-align: center; padding: 8px;}
.wt .done .check {width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
    display: grid; place-items: center; background: #FBEBD2; color: #9A6417;
    font-size: 26px; font-weight: 700;}
.wt .done h3 {font-family: var(--display); font-size: 24px; margin: 0 0 6px; letter-spacing: -.01em;}
.wt .done p {margin: 0 0 16px; color: var(--ink-soft);}
.wt .linklike {background: none; border: 0; padding: 4px; color: var(--sage-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;}
.wt .demo-foot {display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; min-height: 24px;}
.wt .hint {font-size: 13px; color: var(--muted-text);}
.wt .counter {font-size: 13px; color: var(--muted-text); font-variant-numeric: tabular-nums;}
.wt .toast {position: absolute; left: 0; right: 0; top: 100%; margin: 8px 0 0; min-height: 22px;
    font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--sage-deep);
    opacity: 0; transition: opacity .2s ease; text-wrap: pretty;}
.wt .toast.show {opacity: 1;}
.wt .story {position: relative;}
.wt .story-steps {list-style: none; margin: 0; padding: 0;}
.wt .story-step {position: relative; padding: 8px 0 72px;}
.wt .story-step:last-child {padding-bottom: 8px;}
.wt .story-text {position: relative;}
.wt .story-num {width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sage-tint); color: var(--sage-deep); font-weight: 700; font-size: 14px;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;}
.wt .story-when {display: block; margin-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sage);}
.wt .story-text h3 {font-family: var(--display); font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.02em; margin: 8px 0 14px;}
.wt .story-text p {margin: 0; max-width: 30em; font-size: 17px; color: var(--ink-soft);}
.wt .story-text .story-note {margin-top: 14px; font-size: 15px; color: var(--muted-text);}
.wt .story-text .story-safe {display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--sage-deep);}
.wt .story-safe svg {flex: none; margin-top: 3px;}
.wt .story-safe b {font-weight: 650;}
.wt .story-slot {margin-top: 32px; display: flex; flex-direction: column; align-items: center;}
.wt .story-stage-col {display: none;}
.wt .story-caption {margin: 14px 0 0; font-size: 13px; color: var(--muted-text); text-align: center;}
@media (min-width: 900px) {
  .wt .story {display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 72px;}
  .wt .story-steps {position: relative; padding-left: 64px;}
  .wt .story-steps::before, .wt .story-steps::after {content: ""; position: absolute; left: 15px; width: 2px; border-radius: 2px;
      top: var(--rt, 0px); height: var(--rh, 0px);}
  .wt .story-steps::before {background: var(--line);}
  .wt .story-steps::after {background: var(--sage); transform-origin: top; transform: scaleY(var(--p, 0));}
  .wt .story-step, .wt .story-step:last-child {min-height: 86vh; display: flex; align-items: center; padding: 0;}
  .wt .story-num {position: absolute; z-index: 1; left: -64px; top: -6px;
      background: var(--bg); color: var(--muted-text); box-shadow: inset 0 0 0 2px var(--line);}
  .wt .story-step.is-active .story-num {background: var(--sage); color: #fff; box-shadow: none;}
  .wt .story-num + .story-when {margin-top: 0;}
  .wt .story-text > :not(.story-num) {transition: opacity .45s ease;}
  .wt .story-step:not(.is-active) .story-text > :not(.story-num) {opacity: .3;}
  .wt .story-slot {display: none;}
  .wt .story-stage-col {display: block;}
  .wt .story-stage {position: sticky; top: calc(50vh - 330px); display: flex; flex-direction: column; align-items: center;}
}
@media (min-width: 900px) and (max-height: 780px) {
  .wt .story-stage .phone {font-size: 11.5px;}
  .wt .story-stage {top: calc(50vh - 295px);}
}
.wt .phone {position: relative; font-size: 13px; width: 23em; height: 47.5em; padding: .62em;
    border-radius: 3.3em; background: #1F1E1C;
    box-shadow: 0 2px 4px rgba(43, 42, 40, .12), 0 34px 60px -28px rgba(43, 42, 40, .5);}
@media (max-width: 899px) {
  .wt .phone {font-size: 11.5px;}
}
@media (max-width: 340px) {
  .wt .phone {font-size: 10.6px;}
}
.wt .phone-screen {position: relative; height: 100%; border-radius: 2.7em; overflow: hidden; background: var(--bg);}
.wt .island {position: absolute; z-index: 9; top: 1.25em; left: 50%; width: 6.6em; height: 1.85em; margin-left: -3.3em; border-radius: 1em; background: #1F1E1C;}
.wt .screen {position: absolute; inset: 0; display: flex; flex-direction: column;
    color: var(--ink); line-height: 1.4; transition: opacity .5s ease, transform .5s ease;}
.wt .story-stage .screen {opacity: 0; transform: translateY(14px) scale(.985);}
.wt .story-stage .screen.is-active {opacity: 1; transform: none;}
.wt .no-tr *, .wt .no-tr *::before, .wt .no-tr *::after {transition: none !important; animation: none !important;}
.wt .sb {flex: none; height: 3.6em; padding: .35em 1.7em 0 2.15em;
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; font-variant-numeric: tabular-nums;}
.wt .sb svg {display: block; width: 2.6em; height: .95em;}
.wt .app {position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .55em;
    padding: .2em 1.15em 1.2em; transition: opacity .35s ease;}
.wt .screen[data-state~="out"] .app {opacity: 0;}
.wt .app-head {flex: none; display: flex; align-items: center; justify-content: space-between; height: 2.4em;}
.wt .app-logo {font-family: var(--display); font-weight: 500; font-size: 1.2em; letter-spacing: -.015em;}
.wt .app-logo b {font-weight: 750; color: var(--sage);}
.wt .pill {font-size: .8em; font-weight: 600; padding: .38em .75em; border-radius: 1em;
    background: var(--sage-tint); color: var(--sage-deep); font-variant-numeric: tabular-nums;
    transition: background .3s ease, color .3s ease;}
.wt .screen::after {content: ""; position: absolute; z-index: 6; left: 50%; bottom: .55em; width: 8.2em; height: .32em; margin-left: -4.1em;
    border-radius: 1em; background: rgba(43, 42, 40, .82); transition: background .45s ease;}
.wt .s-morning[data-state~="lock"]::after {background: rgba(255, 255, 255, .85);}
.wt .tabs {flex: none; display: flex; justify-content: space-around; padding: .55em .6em 2.1em;
    border-top: 1px solid var(--line); background: var(--paper);}
.wt .tab {display: flex; flex-direction: column; align-items: center; gap: .15em; font-size: .7em; font-weight: 600; color: var(--muted);}
.wt .tab svg {display: block; width: 2em; height: 2em;}
.wt .tab.is-on {color: var(--sage);}
.wt .finger {position: absolute; z-index: 8; left: 0; top: 0; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em;
    border-radius: 50%; background: rgba(43, 42, 40, .18); border: 2px solid rgba(255, 255, 255, .95);
    box-shadow: 0 2px 8px rgba(43, 42, 40, .25); opacity: 0; transform: scale(.7); pointer-events: none;
    transition: opacity .2s ease, transform .45s cubic-bezier(.3, .7, .3, 1);}
.wt .finger::after {content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid rgba(61, 122, 111, .6); opacity: 0;}
.wt .finger.on {opacity: 1; transform: scale(1);}
.wt .finger.press {animation: press .4s ease;}
.wt .finger.press::after {animation: ripple .55s ease-out;}
.wt .finger.drag-r {transform: translateX(2.2em); transition: opacity .2s ease, transform .55s cubic-bezier(.4, 0, .2, 1);}
.wt .finger.drag-l {transform: translateX(-2.2em); transition: opacity .2s ease, transform .55s cubic-bezier(.4, 0, .2, 1);}
@keyframes press { 40% { transform: scale(.78); } 100% { transform: scale(1); } }
@keyframes ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
.wt .m-scan {position: absolute; left: 1.15em; right: 1.15em; top: 3.2em;
    opacity: 0; transform: translateY(.6em); transition: opacity .35s ease, transform .35s ease; pointer-events: none;}
.wt .s-mirror[data-state~="scan"] .m-scan {opacity: 1; transform: none;}
.wt .m-kick {font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sage);}
.wt .m-title {font-family: var(--display); font-weight: 650; font-size: 1.5em; line-height: 1.2; letter-spacing: -.01em; margin-top: .4em;}
.wt .m-bar {margin-top: 1.2em; height: .55em; border-radius: 1em; background: var(--line); overflow: hidden;}
.wt .m-bar i {display: block; height: 100%; border-radius: inherit; background: var(--sage); transform-origin: left;}
.wt .s-mirror[data-state~="scan"] .m-bar i {transform: scaleX(0);}
.wt .s-mirror[data-state~="go"] .m-bar i {transform: scaleX(1); transition: transform 2s cubic-bezier(.45, .05, .3, 1);}
.wt .m-count {margin-top: .75em; font-size: .9em; color: var(--muted-text); font-variant-numeric: tabular-nums;}
.wt .m-count b {color: var(--ink); font-weight: 650;}
.wt .m-ghost {margin-top: 1.3em; display: grid; gap: .55em;}
.wt .m-ghost i {display: block; height: 2.7em; border-radius: .8em;
    background: linear-gradient(90deg, #F1ECE3 0, #F9F5EF 45%, #F1ECE3 90%); background-size: 200% 100%;}
.wt .s-mirror[data-state~="scan"] .m-ghost i {animation: shimmer 1.3s linear infinite;}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.wt .m-found {display: flex; flex-direction: column; gap: .62em;}
.wt .m-found > * {transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .2, 1);}
.wt .m-found > :nth-child(2) {transition-delay: .06s;}
.wt .m-found > :nth-child(3) {transition-delay: .16s;}
.wt .m-found > :nth-child(4) {transition-delay: .28s;}
.wt .m-found > :nth-child(5) {transition-delay: .4s;}
.wt .s-mirror[data-state~="scan"] .m-found > * {opacity: 0; transform: translateY(1em);}
.wt .m-h {font-family: var(--display); font-weight: 650; font-size: 1.5em; line-height: 1.15; letter-spacing: -.01em; margin: .15em 0 0;}
.wt .m-sub {margin: -.3em 0 .1em; font-size: .88em; color: var(--muted-text);}
.wt .m-card {background: var(--paper); border: 1px solid var(--line); border-radius: 1.1em; padding: .85em .95em; box-shadow: 0 1px 2px rgba(43, 42, 40, .05);}
.wt .m-top {display: flex; justify-content: space-between; align-items: baseline; gap: .6em;}
.wt .m-name {font-weight: 650;}
.wt .m-amt {font-family: var(--display); font-weight: 650; font-size: 1.15em; color: var(--clay-deep); font-variant-numeric: tabular-nums;}
.wt .m-card p {margin: .2em 0 0; font-size: .88em; line-height: 1.4; color: var(--ink-soft);}
.wt .m-card .m-research {margin-top: .3em; font-size: .78em; color: var(--muted-text); font-style: italic;}
.wt .m-ask {display: flex; align-items: center; justify-content: space-between; gap: .5em;
    margin-top: .75em; padding-top: .7em; border-top: 1px dashed var(--line); font-size: .86em; font-weight: 600;}
.wt .m-btns {display: flex; gap: .4em;}
.wt .m-btn {padding: .42em .8em; border-radius: .7em; border: 1px solid var(--line); background: var(--bg); transition: background .25s ease, color .25s ease, border-color .25s ease;}
.wt .s-mirror[data-state~="tap"] .m-yes {background: var(--sage); border-color: var(--sage); color: #fff;}
.wt .s-mirror .app {padding-bottom: 1.9em;}
.wt .m-next {margin-top: auto; padding: .9em; border-radius: .9em; background: var(--sage); color: #fff;
    text-align: center; font-weight: 600; font-size: .95em;
    transition: opacity .5s ease .5s, transform .55s cubic-bezier(.2, .8, .2, 1) .5s;}
.wt .s-mirror[data-state~="scan"] .m-next {opacity: 0; transform: translateY(1em); transition-delay: 0s;}
.wt .toast-ph {position: absolute; left: 1.15em; right: 1.15em; bottom: 5.6em; padding: .8em .95em; border-radius: .95em;
    background: var(--ink); color: #fff; font-size: .88em; font-weight: 500;
    opacity: 0; transform: translateY(.8em); transition: opacity .3s ease, transform .35s ease;}
.wt .s-mirror[data-state~="tap"] .toast-ph {opacity: 1; transform: none;}
.wt .d-greet {font-family: var(--display); font-weight: 650; font-size: 1.35em; line-height: 1.2; letter-spacing: -.01em; margin-top: .1em;}
.wt .d-greet span {color: var(--muted-text); font-weight: 500;}
.wt .d-stack {position: relative; height: 19.5em; margin-top: .6em; flex: none;}
.wt .d-card {position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1em 1.05em 1em;
    border-radius: 1.2em; border: 1px solid var(--line);
    background: repeating-linear-gradient(to bottom, transparent 0 1.95em, rgba(61, 122, 111, .045) 1.95em 2em), var(--paper);
    box-shadow: 0 1px 2px rgba(43, 42, 40, .06), 0 14px 30px -16px rgba(43, 42, 40, .35);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;}
.wt .d-c2 {transform: translateY(1.1em) scale(.94); opacity: .55;}
.wt .s-morning[data-state~="c2"] .d-c2 {transform: none; opacity: 1;}
.wt .s-morning[data-state~="lean1"] .d-c1 {transform: translateX(8%) rotate(4deg);}
.wt .s-morning[data-state~="fly1"] .d-c1 {transform: translateX(140%) rotate(16deg); opacity: 0;
    transition: transform .55s cubic-bezier(.55, 0, .75, .2), opacity .45s ease .12s;}
.wt .s-morning[data-state~="lean2"] .d-c2 {transform: translateX(-8%) rotate(-4deg);}
.wt .s-morning[data-state~="fly2"] .d-c2 {transform: translateX(-140%) rotate(-16deg); opacity: 0;
    transition: transform .55s cubic-bezier(.55, 0, .75, .2), opacity .45s ease .12s;}
.wt .d-top {display: flex; align-items: center; justify-content: space-between; gap: .6em;}
.wt .d-when {font-size: .82em; font-weight: 500; color: var(--muted-text);}
.wt .lvl {font-size: .74em; font-weight: 700; padding: .35em .7em; border-radius: 1em; white-space: nowrap;}
.wt .lvl-likely {background: var(--clay-tint); color: var(--clay-deep);}
.wt .lvl-maybe {background: #F9EEEA; color: #9A4D3B;}
.wt .d-row {display: flex; align-items: baseline; justify-content: space-between; gap: .6em; margin-top: 1.1em;}
.wt .d-merch {font-family: var(--display); font-weight: 650; font-size: 1.35em; line-height: 1.15; letter-spacing: -.01em;}
.wt .d-amt {font-family: var(--display); font-weight: 650; font-size: 1.45em; font-variant-numeric: tabular-nums;}
.wt .d-why {margin: .6em 0 0; font-size: .95em; line-height: 1.45; color: var(--ink-soft);}
.wt .d-why b {color: var(--clay-deep); font-weight: 600;}
.wt .d-bottom {position: relative; margin-top: auto; min-height: 6.6em;}
.wt .d-ask, .wt .d-feel {position: absolute; left: 0; right: 0; bottom: 0; transition: opacity .3s ease, transform .3s ease;}
.wt .d-feel {opacity: 0; transform: translateY(.5em);}
.wt .s-morning[data-state~="feel"] .d-c1 .d-ask {opacity: 0;}
.wt .s-morning[data-state~="feel"] .d-c1 .d-feel {opacity: 1; transform: none;}
.wt .d-q {font-weight: 600; font-size: .92em;}
.wt .d-q span {font-weight: 400; color: var(--muted-text);}
.wt .d-q .d-q-sub {display: block; margin-top: .15em; font-size: .88em;}
.wt .d-choices {display: grid; grid-template-columns: 1fr 1fr; gap: .55em; margin-top: .6em;}
.wt .d-choice {padding: .8em .5em; border-radius: .8em; border: 1px solid var(--line); background: var(--bg); text-align: center; font-weight: 600; font-size: .9em;}
.wt .d-choice.yes {background: var(--ink); border-color: var(--ink); color: #fff;}
.wt .d-chips {display: flex; flex-wrap: wrap; gap: .45em; margin-top: .6em;}
.wt .d-chip {padding: .45em .8em; border-radius: 1em; border: 1px solid var(--line); background: var(--paper); font-size: .86em; font-weight: 500; transition: background .25s ease, color .25s ease, border-color .25s ease;}
.wt .s-morning[data-state~="picked"] .d-stressed {background: var(--clay-tint); border-color: var(--clay); color: var(--clay-deep);}
.wt .stamp {position: absolute; top: .9em; padding: .4em .6em; border-radius: .5em; background: var(--paper);
    font-weight: 700; font-size: .76em; letter-spacing: .06em; text-transform: uppercase;
    opacity: 0; transition: opacity .15s ease;}
.wt .stamp-yes {right: 1.6em; color: var(--clay-deep); border: 2px solid var(--clay); transform: rotate(6deg);}
.wt .stamp-no {left: 1.6em; color: var(--sage-deep); border: 2px solid var(--sage); transform: rotate(-6deg);}
.wt .s-morning[data-state~="lean1"] .d-c1 .stamp-yes {opacity: 1;}
.wt .s-morning[data-state~="lean2"] .d-c2 .stamp-no {opacity: 1;}
.wt .d-top > * {transition: opacity .15s ease;}
.wt .s-morning[data-state~="lean1"] .d-c1 .lvl, .wt .s-morning[data-state~="lean2"] .d-c2 .d-when {opacity: 0;}
.wt .d-done {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    opacity: 0; transform: translateY(.6em) scale(.98); transition: opacity .4s ease .2s, transform .45s ease .2s;}
.wt .s-morning[data-state~="done"] .d-done {opacity: 1; transform: none;}
.wt .d-check {width: 3.6em; height: 3.6em; border-radius: 50%; display: grid; place-items: center; background: var(--gold-tint); color: var(--gold-deep); font-size: 1.3em; font-weight: 700;}
.wt .d-done b {margin-top: .7em; font-family: var(--display); font-weight: 650; font-size: 1.4em; letter-spacing: -.01em;}
.wt .d-done span:last-child {margin-top: .2em; font-size: .92em; color: var(--muted-text);}
.wt .s-morning[data-state~="done"] .timer {background: var(--gold-tint); color: var(--gold-deep);}
.wt .d-hint {display: flex; justify-content: space-between; margin-top: 1.1em; font-size: .82em; color: var(--muted-text); transition: opacity .3s ease;}
.wt .s-morning[data-state~="done"] .d-hint {opacity: 0;}
.wt .d-lock {position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(165deg, #3D7A6F 0%, #2A5951 55%, #1F433D 100%); color: #fff;
    opacity: 0; transition: opacity .45s ease; pointer-events: none;}
.wt .d-lock .sb {align-self: stretch; color: #fff;}
.wt .s-morning[data-state~="lock"] .d-lock {opacity: 1;}
.wt .d-date {margin-top: 1.6em; font-size: 1em; font-weight: 500; opacity: .85;}
.wt .d-time {font-family: var(--display); font-weight: 600; font-size: 4.6em; line-height: 1; letter-spacing: -.03em; margin-top: .05em; font-variant-numeric: tabular-nums;}
.wt .d-notif {width: calc(100% - 1.6em); margin-top: 2em; padding: .8em .95em .85em; border-radius: 1.25em;
    background: rgba(255, 253, 249, .95); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(-1.2em) scale(.96); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1);}
.wt .s-morning[data-state~="notif"] .d-notif {opacity: 1; transform: none;}
.wt .d-notif-top {display: flex; align-items: center; gap: .5em; font-size: .8em; color: var(--muted-text);}
.wt .d-notif-icon {width: 1.7em; height: 1.7em; border-radius: .45em; background: var(--sage); display: grid; place-items: center;}
.wt .d-notif-icon svg {width: 1.1em; height: 1.1em; display: block;}
.wt .d-notif-when {margin-left: auto;}
.wt .d-notif b {display: block; margin-top: .45em; font-weight: 650;}
.wt .d-notif-sub {display: block; margin-top: .1em; font-size: .9em; color: var(--ink-soft);}
.wt .r-in {transition: opacity .5s ease var(--d, 0s), transform .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0s);}
.wt .s-recap[data-state~="pre"] .r-in {opacity: 0; transform: translateY(1em);}
.wt .r-title {font-family: var(--display); font-weight: 650; font-size: 1.45em; letter-spacing: -.01em; line-height: 1.2;}
.wt .r-label {display: block; font-size: .74em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-text);}
.wt .r-hero {padding: .95em 1.05em; border-radius: 1.2em; background: var(--sage); color: #fff;}
.wt .r-hero .r-label {color: rgba(255, 255, 255, .78);}
.wt .r-big {font-family: var(--display); font-weight: 700; font-size: 2.8em; line-height: 1.05; letter-spacing: -.02em; margin-top: .12em; font-variant-numeric: tabular-nums;}
.wt .r-hero-sub {display: flex; justify-content: space-between; align-items: center; gap: .5em; margin-top: .3em; font-size: .86em;}
.wt .r-delta {padding: .25em .6em; border-radius: 1em; background: rgba(255, 255, 255, .16); font-weight: 600; white-space: nowrap;}
.wt .r-block {padding: .8em 1em; border-radius: 1.1em; background: var(--paper); border: 1px solid var(--line);}
.wt .r-row {display: grid; grid-template-columns: 6.4em 1fr 1.2em; align-items: center; gap: .6em; margin-top: .5em; font-size: .88em;}
.wt .r-row b {text-align: right; font-variant-numeric: tabular-nums;}
.wt .r-bar {height: .55em; border-radius: 1em; background: #F1ECE3; overflow: hidden;}
.wt .r-bar i {display: block; height: 100%; border-radius: inherit; background: var(--clay); transform-origin: left;
    transform: scaleX(var(--w, 1)); transition: transform .8s cubic-bezier(.2, .8, .2, 1) var(--bd, .6s);}
.wt .s-recap[data-state~="pre"] .r-bar i {transform: scaleX(0);}
.wt .r-block p {margin: .35em 0 0; font-size: .92em; line-height: 1.45;}
.wt .r-cite {display: inline-flex; align-items: center; gap: .35em; margin-top: .55em; padding: .28em .65em; border-radius: 1em;
    background: var(--sage-tint); color: var(--sage-deep); font-size: .78em; font-weight: 600;}
.wt .s-recap[data-state~="cite"] .r-cite {animation: citeflash 1.3s ease;}
@keyframes citeflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 122, 111, 0); } 35% { box-shadow: 0 0 0 .4em rgba(61, 122, 111, .22); } }
.wt .r-focus {background: var(--gold-tint); border-color: #F1D7AE;}
.wt .r-focus .r-label {color: var(--gold-deep);}
@media (max-width: 899px) {
  .wt .story-num {display: inline; width: auto; height: auto; border-radius: 0; background: none; color: var(--sage); font-size: 13px; letter-spacing: .08em;}
  .wt .story-num::after {content: "\00a0\00b7\00a0";}
  .wt .story-when {display: inline; margin-top: 0;}
  .wt .story-text h3 {margin-top: 10px;}
  .wt .story-step {padding-bottom: 56px;}
  .wt .story-slot {margin-top: 24px;}
  .wt .phone {font-size: 9.8px;}
}
@media (max-width: 340px) {
  .wt .phone {font-size: 9px;}
}
@media (max-width: 560px) {
  .wt .sheet {transform-origin: 50% 100%;}
  .wt .sheet-3 {transform: translateY(16px) scale(.9); opacity: .55;}
  .wt .sheet-2 {transform: translateY(8px) scale(.95); opacity: .85;}
  .wt .demo-foot {margin-top: 30px;}
}
@media (prefers-reduced-motion: reduce) {
  .wt .card, .wt .card.enter {transition: none; animation: none;}
  .wt .screen, .wt .story-text > * {transition: none !important;}
}