.selfless-page{
  --selfless-paper:#eee6d2;
  --selfless-paper-deep:#d8cfb4;
  --selfless-ink:#3f3020;
  --selfless-terra:#c85f43;
  --selfless-terra-deep:#9f3223;
  --selfless-progress:0;
  --selfless-balance:.5;
  background:var(--selfless-paper);
  color:var(--selfless-ink);
}

/* Opening: one image, one question, one clear action. */
.selfless-page #intro-page{
  min-height:100svh;
  padding:0;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(238,230,210,.98) 0 43%,rgba(238,230,210,.62) 60%,rgba(238,230,210,.08)),url('/images/results/give-result-path-v2.webp') 64% center/cover no-repeat;
  text-align:left;
}
.selfless-page #intro-page>.inner{position:relative;width:100%;max-width:none;min-height:100svh;padding:clamp(5rem,10vh,8rem) 55vw 5rem clamp(2rem,7vw,7rem);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
.selfless-page #intro-page>.inner::before{content:"";position:absolute;z-index:0;right:-3vw;top:50%;width:min(61vw,54rem);aspect-ratio:1;background:url('/images/tests/selfless-balance-illustration-v4-800w.webp') center/contain no-repeat;transform:translateY(-50%);-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 75%);mask-image:radial-gradient(circle,#000 52%,transparent 75%);filter:saturate(.84);}
.selfless-page #intro-page>.inner>*{position:relative;z-index:2;}
.selfless-page #intro-page .prologue-lab-bar{order:-4;width:max-content;margin:0 0 1.8rem;padding:0 0 .55rem;border:0;border-bottom:1px solid rgba(159,50,35,.42);background:transparent;box-shadow:none;color:var(--selfless-terra-deep);}
.selfless-page #intro-page .prologue-lab-bar span,.selfless-page #intro-page .prologue-lab-bar strong{color:inherit;font-size:.63rem;letter-spacing:.16em;}
.selfless-page #intro-page .test-badge{order:-3;margin:0 0 1rem;padding:0;border:0;background:transparent;color:var(--selfless-terra-deep);font-size:.68rem;letter-spacing:.12em;}
.selfless-page #intro-page .test-title{order:-2;max-width:7em;margin:0;color:var(--selfless-ink);font-family:'Hahmlet',serif;font-size:clamp(3.4rem,6.4vw,6.8rem);font-weight:700;line-height:.96;letter-spacing:-.055em;text-align:left;}
.selfless-page #intro-page .test-subtitle{order:-1;display:block;max-width:30rem;margin:1.5rem 0 0;color:#6f5c47;font-size:clamp(.9rem,1.2vw,1.04rem);line-height:1.7;text-align:left;}
.selfless-page #intro-page .start-btn{width:min(100%,24rem);min-height:3.5rem;margin:2rem 0 0;border:1px solid #17130e;border-radius:0;background:#17130e;box-shadow:none;color:#eee5d2;font-family:'Hahmlet',serif;font-size:1rem;}
.selfless-page #intro-page .start-btn::after{content:"  →";}
.selfless-page #intro-page .start-btn:hover,.selfless-page #intro-page .start-btn:focus-visible{border-color:var(--selfless-terra);background:var(--selfless-terra);color:#17130e;transform:translateY(-2px);}
.selfless-page #intro-page .test-intro-image,.selfless-page #intro-page .test-intro-caption,.selfless-page #intro-page .prologue-metrics,.selfless-page #intro-page .prologue-start-card,.selfless-page #intro-page .quality-section{display:none!important;}

/* Question stage: every answer grows a route instead of merely filling a bar. */
.selfless-page #test-page{position:fixed;inset:0;min-height:0;padding:0;overflow:hidden;isolation:isolate;background:linear-gradient(90deg,rgba(238,230,210,.98) 0 43%,rgba(238,230,210,.72) 65%,rgba(238,230,210,.3)),url('/images/results/give-result-path-v2.webp') 64% center/cover no-repeat;}
.selfless-page #test-page>.inner{position:relative;z-index:4;width:100%;max-width:none;height:100%;padding:clamp(4.5rem,10vh,7rem) clamp(2rem,7vw,7rem) 5rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,34rem);grid-template-rows:auto 1fr;column-gap:clamp(4rem,9vw,10rem);}
.selfless-page .progress-wrap{grid-column:1/-1;width:100%;margin:0 0 clamp(2rem,7vh,5rem);}
.selfless-page .progress-info{color:var(--selfless-ink);font-size:.67rem;font-weight:750;letter-spacing:.1em;}
.selfless-page .progress-bar{height:1px;border:0;border-radius:0;background:rgba(63,48,32,.18);overflow:visible;}
.selfless-page .progress-fill{height:2px;border-radius:0;background:var(--selfless-terra);transition:width .65s cubic-bezier(.2,.75,.2,1);}
.selfless-page .q-num-label{position:absolute;left:clamp(2rem,7vw,7rem);top:clamp(7.7rem,19vh,11.5rem);margin:0;color:var(--selfless-terra-deep);font-size:.64rem;font-weight:850;letter-spacing:.18em;}
.selfless-page .q-text{grid-column:1;align-self:center;max-width:10em;min-height:0;margin:0;color:var(--selfless-ink);font-family:'Hahmlet',serif;font-size:clamp(2.7rem,5vw,5.5rem);font-weight:650;line-height:1.14;letter-spacing:-.04em;text-align:left;}
.selfless-page .answer-list{grid-column:2;align-self:center;gap:0;border-top:1px solid rgba(63,48,32,.28);counter-reset:selfless-answer;}
.selfless-page .ans-btn{position:relative;width:100%;min-height:4.4rem;padding:1.1rem 3rem 1.1rem .3rem;border:0;border-bottom:1px solid rgba(63,48,32,.23);border-radius:0;background:transparent;color:#4f3e2b;font-size:clamp(.88rem,1.15vw,1rem);font-weight:590;text-align:left;box-shadow:none;counter-increment:selfless-answer;transition:padding .32s ease,background .32s ease,color .32s ease,opacity .25s ease;}
.selfless-page .ans-btn::after{content:"0" counter(selfless-answer);position:absolute;right:.3rem;top:50%;color:rgba(63,48,32,.38);font-family:'Hahmlet',serif;font-size:.72rem;transform:translateY(-50%);}
.selfless-page .ans-btn:hover,.selfless-page .ans-btn:focus-visible{padding-left:1rem;background:linear-gradient(90deg,rgba(200,95,67,.14),transparent);color:#17130e;transform:none;}
.selfless-page .ans-btn.is-chosen{padding-left:1rem;background:linear-gradient(90deg,rgba(159,50,35,.2),rgba(200,95,67,.03),transparent);color:var(--selfless-terra-deep);}
.selfless-page .answer-list.is-answering .ans-btn{pointer-events:none;}
.selfless-page .answer-list.is-answering .ans-btn:not(.is-chosen){opacity:.36;}

.selfless-balance-world{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;}
.balance-route{position:absolute;left:3%;right:3%;bottom:4%;width:94%;height:34%;overflow:visible;}
.balance-route path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;}
.balance-route-paper{stroke:rgba(63,48,32,.1);stroke-width:2;}
.balance-route-ink{stroke:rgba(200,95,67,.56);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--selfless-progress));transition:stroke-dashoffset .9s cubic-bezier(.2,.75,.2,1);filter:drop-shadow(0 2px 3px rgba(159,50,35,.1));}
.balance-leaf path{fill:rgba(159,50,35,.28);stroke:none;transform-box:fill-box;transform-origin:center;}
.balance-leaf-one{opacity:clamp(0,calc(var(--selfless-progress) * 5 - .8),1);}
.balance-leaf-two{opacity:clamp(0,calc(var(--selfless-progress) * 5 - 2.1),1);}
.balance-leaf-three{opacity:clamp(0,calc(var(--selfless-progress) * 5 - 3.5),1);}
.balance-seed{position:absolute;left:calc(7% + var(--selfless-balance) * 84%);bottom:calc(17% + var(--selfless-balance) * 3%);width:clamp(.8rem,1.4vw,1.15rem);aspect-ratio:1;border-radius:60% 40% 60% 40%;background:var(--selfless-terra-deep);box-shadow:0 0 0 clamp(.35rem,1vw,.75rem) rgba(200,95,67,.1);transform:translate(-50%,50%) rotate(35deg);transition:left .9s cubic-bezier(.2,.75,.2,1),bottom .9s ease,transform .9s ease;}
.balance-seed i{position:absolute;left:48%;top:50%;width:1px;height:clamp(1.4rem,3vw,2.5rem);background:rgba(63,48,32,.28);transform:rotate(-35deg);transform-origin:top;}
.balance-wash{position:absolute;bottom:-20%;width:46vw;height:58vh;border-radius:50%;filter:blur(12px);transition:opacity .9s ease,transform 1s ease;}
.balance-wash.is-self{left:-14%;background:radial-gradient(circle,rgba(159,50,35,.14),transparent 68%);opacity:calc(.1 + (1 - var(--selfless-balance)) * .48);transform:translateY(calc(var(--selfless-balance) * 12%));}
.balance-wash.is-other{right:-14%;background:radial-gradient(circle,rgba(216,207,180,.55),transparent 68%);opacity:calc(.12 + var(--selfless-balance) * .5);transform:translateY(calc((1 - var(--selfless-balance)) * 12%));}
.balance-word{position:absolute;bottom:9%;color:rgba(63,48,32,.075);font-family:'Hahmlet',serif;font-size:clamp(3rem,7vw,7rem);font-weight:760;letter-spacing:-.08em;transition:opacity .8s ease,transform .9s ease;}
.balance-word.is-self{left:4%;opacity:calc(.04 + (1 - var(--selfless-balance)) * .14);}
.balance-word.is-other{right:3%;opacity:calc(.04 + var(--selfless-balance) * .14);}
.balance-ink-drop{position:absolute;left:calc(7% + var(--drop-x) * 84%);bottom:18%;width:1rem;aspect-ratio:1;border:1px solid rgba(159,50,35,.48);border-radius:50%;transform:translate(-50%,50%);animation:selflessInkBloom .9s ease-out both;}
@keyframes selflessInkBloom{0%{opacity:.8;transform:translate(-50%,50%) scale(.35);}100%{opacity:0;transform:translate(-50%,50%) scale(6);}}

@media(max-width:719px){
  .selfless-page #intro-page{background:linear-gradient(180deg,rgba(238,230,210,.97) 0 48%,rgba(238,230,210,.42) 72%,rgba(238,230,210,.08)),url('/images/results/give-result-path-v2.webp') 67% center/auto 100% no-repeat;}
  .selfless-page #intro-page>.inner{padding:4.6rem 1.25rem 52vh;justify-content:flex-start;}
  .selfless-page #intro-page>.inner::before{right:-23vw;top:auto;bottom:-8vh;width:140vw;transform:none;}
  .selfless-page #intro-page .prologue-lab-bar{margin-bottom:1.5rem;}
  .selfless-page #intro-page .test-badge,.selfless-page #intro-page .test-subtitle{display:none!important;}
  .selfless-page #intro-page .test-title{font-size:clamp(2.7rem,12vw,3.5rem);line-height:.98;}
  .selfless-page #intro-page .start-btn{width:100%;margin:1.8rem 0 0;}
  .selfless-page #test-page{background:linear-gradient(180deg,rgba(238,230,210,.98) 0 63%,rgba(238,230,210,.45)),url('/images/results/give-result-path-v2.webp') 68% center/auto 100% no-repeat;}
  .selfless-page #test-page>.inner{padding:2rem 1.25rem 2.2rem;display:flex;flex-direction:column;}
  .selfless-page .progress-wrap{margin-bottom:3.2rem;}
  .selfless-page .progress-info{display:none;}
  .selfless-page .q-num-label{position:static;margin-bottom:1.2rem;}
  .selfless-page .q-text{align-self:flex-start;width:100%;max-width:12em;margin:0 0 clamp(2.4rem,8vh,4.8rem);font-size:clamp(1.75rem,7.7vw,2.35rem);line-height:1.16;}
  .selfless-page .answer-list{width:100%;margin-top:auto;background:rgba(238,230,210,.58);backdrop-filter:blur(2px);}
  .selfless-page .ans-btn{min-height:3.65rem;padding:.8rem 2.2rem .8rem .2rem;font-size:.8rem;}
  .balance-route{left:-17%;bottom:14%;width:134%;height:25%;opacity:.72;}
  .balance-seed{bottom:27%;}
  .balance-word{display:none;}
  .balance-wash{bottom:-12%;width:80vw;height:44vh;}
  .balance-ink-drop{bottom:27%;}
}

@media(prefers-reduced-motion:reduce){
  .selfless-page .progress-fill,.balance-route-ink,.balance-seed,.balance-wash,.balance-word{transition:none;}
  .balance-ink-drop{display:none;animation:none;}
}