/* Sanchay website · v4 additions: pinned "How it works" phone, growing sprouts */
/* sprouts */
.spr{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;--lf:color-mix(in oklab,var(--accent) 20%,transparent)}
.spr path{vector-effect:non-scaling-stroke}
.spr .stem{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--g0,.1));transition:transform 1.6s cubic-bezier(.3,.6,.2,1)}
.in .spr .stem,.go .spr .stem,.spr.go .stem{transform:scaleY(var(--g,.1))}
.spr .lf{transform-box:fill-box;transform:scale(0) rotate(var(--rot,0deg));opacity:0;transition:transform 1.4s cubic-bezier(.2,.8,.25,1.1),opacity .9s}
.spr .lf.L{transform-origin:100% 100%;--rot:-24deg}.spr .lf.R{transform-origin:0 100%;--rot:24deg}
.spr .lf path:first-child{fill:var(--lf)}
.spr .lf.w0,.in .spr .lf.w,.go .spr .lf.w{transform:none;opacity:1}
.spr .lf.w0{transition:none}
.spr .lf.gh path{fill:none;stroke-dasharray:2 4;opacity:.8}
.ms{width:16px;height:16px;flex:none;align-self:flex-end;margin:0 0 2px}.ms .spr{stroke-width:1.25}.ms svg{width:100%;height:100%}
html:not(.js) .spr .stem{transform:scaleY(var(--g,.1))}html:not(.js) .spr .lf.w{transform:none;opacity:1}
/* logo without suffix */
.lk .w{font-size:22px}
/* pinned sequence */
.seq{padding:96px 0 40px;position:relative}
.seq .head{margin-bottom:8px}
.pin-o{height:600vh;position:relative}
.pin{position:sticky;top:64px;height:calc(100vh - 64px);overflow:clip;display:flex;align-items:center}
.pin-g{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.62fr);gap:56px;align-items:center;width:100%}
.st-wrap{display:grid}
.st{grid-area:1/1;opacity:0;transform:translateY(24px);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.st.on{opacity:1;transform:none;pointer-events:auto}
.sn{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.st h3{font-size:clamp(38px,4.4vw,62px);font-weight:800;letter-spacing:-.045em;line-height:1.02;margin-top:14px}
.st p{font-size:clamp(17px,1.5vw,20px);color:var(--sub);margin-top:20px;max-width:24em}
.st .fine{margin-top:18px;font-size:14px;padding-top:14px;border-top:1px solid var(--hair);max-width:28em}
.q-stage{position:relative;width:300px;height:626px;justify-self:center}
.glow{position:absolute;left:calc(50% - 300px);top:calc(50% - 300px);width:600px;height:600px;border-radius:50%;background:radial-gradient(closest-side,var(--mint),transparent);opacity:.9;transform:scale(.9);transition:transform .8s,background .8s}
.q-stage[data-s="3"] .glow{transform:scale(1.08)}.q-stage[data-s="4"] .glow{background:radial-gradient(closest-side,var(--amber-tint),transparent)}
.pscale{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--ps,1))}
.steps{list-style:none;display:grid;position:relative;padding-left:22px;justify-self:start}
.steps::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--hair)}
.steps .prog{position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--accent);transform-origin:top;transform:scaleY(var(--p,0))}
.steps button{min-height:44px;display:flex;align-items:center;gap:12px;background:none;border:0;color:var(--sub);font:600 16px/1 'Inter',sans-serif;cursor:pointer;padding:0;transition:color .3s}
.steps button span{font-size:12.5px;font-variant-numeric:tabular-nums;opacity:.7}
.steps button:hover,.steps button[aria-current="step"]{color:var(--ink)}.steps button[aria-current="step"] span{color:var(--accent-ink);opacity:1}
.track,.tnav{display:none}
@media (max-width:999px){.pin-o{display:none}.seq .head{margin-bottom:32px}
.track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 20px 12px;scrollbar-width:none;overscroll-behavior-x:contain}.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 86%;max-width:400px;scroll-snap-align:center;display:grid;justify-items:center;align-content:start;gap:22px;background:var(--surface-2);border-radius:28px;padding:28px 20px 26px;text-align:center}
:root[data-theme="dark"] .slide{background:var(--surface)}
.slide .st{grid-area:auto;opacity:1;transform:none;pointer-events:auto}.slide .st p{margin-inline:auto}.slide .st .fine{border:0;padding:0}.slide .st h3{font-size:32px}
.slot{width:calc(300px * var(--s,.8));height:calc(626px * var(--s,.8))}.slot .iph{transform:scale(var(--s,.8));transform-origin:0 0}
.tnav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px}
.tnav .ar{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer}
.dots{display:flex;gap:2px}.dots button{width:24px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center}.dots button::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--hair);transition:width .3s,background .3s}.dots button[aria-current="true"]::after{width:20px;border-radius:4px;background:var(--accent)}}
@media (min-width:1000px){.seq .head{text-align:center;margin-inline:auto}.seq .head .eyebrow{justify-content:center}}
/* sequence phone states (s1…s5 on [data-scr]) */
.odo{display:inline-grid;overflow:hidden;vertical-align:top}.odo>span{grid-area:1/1;transition:transform .7s cubic-bezier(.65,0,.2,1)}.odo .n{transform:translateY(110%)}
.s3 .odo .o{transform:translateY(-110%)}.s3 .odo .n{transform:none}
[data-scr] .bud .m i{width:56.4%;transition:width .9s cubic-bezier(.65,0,.2,1) .15s}.s3 .bud .m i{width:59.1%}
.pd{position:relative;border-radius:999px}
.pd::after{content:'';position:absolute;inset:-4px -8px;border-radius:999px;box-shadow:0 0 0 2px #FFD34D,0 0 18px 2px rgba(255,211,77,.6);opacity:0;transition:opacity .5s .5s}.s3:not(.s4) .pd::after{opacity:1}
.tx>.q-nw{display:grid;grid-template-rows:0fr;align-items:stretch;overflow:hidden;padding:0;gap:0;transition:grid-template-rows .6s cubic-bezier(.65,0,.2,1) .1s}
.q-nw>div{min-height:0;overflow:hidden}
.q-r{display:flex;align-items:center;gap:10px;padding:9px 11px;position:relative;border-radius:18px 18px 0 0}
.q-r::after{content:'';position:absolute;inset:0;border-radius:inherit;background:color-mix(in oklab,var(--p-teal) 18%,transparent);opacity:0;pointer-events:none}
.tx>.q-nw+div{border-top-color:transparent;transition:border-color .3s}
.s2 .tx>.q-nw{grid-template-rows:1fr}.s2 .tx>.q-nw+div{border-top-color:var(--p-hair)}
.s2:not(.s3) .q-r::after{animation:flash 1.6s ease .7s}
@keyframes flash{30%{opacity:1}100%{opacity:0}}
.q-ban{position:absolute;z-index:20;left:0;right:0;top:48px;height:96px;transform:translateY(-170px);transition:transform .6s cubic-bezier(.2,.9,.25,1.05)}
.q-ban .ntf{top:0;transition:opacity .4s}.q-ban .ntf+.ntf{opacity:0}
.s1 .q-ban{transform:none}.s2 .q-ban .ntf:first-child{opacity:0}.s2 .q-ban .ntf+.ntf{opacity:1}.s3 .q-ban{transform:translateY(-170px)}
.q-cel{position:absolute;inset:0;z-index:22;transform:translateY(102%);transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.q-cel .celeb{height:100%}
.s4 .q-cel{transform:none}
.q-ask{position:absolute;inset:0;z-index:24;background:var(--p-bg);transform:translateX(102%);transition:transform .6s cubic-bezier(.65,0,.2,1)}
.s5 .q-ask{transform:none}
/* story: what other apps ask for */
/* streak: one leaf per kept cycle */
.cyc-g{display:grid;gap:48px;margin-top:56px;align-items:end}
.cycles ol{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-items:end;border-bottom:1px solid var(--hair);padding-bottom:16px}
.cycles li{display:grid;justify-items:center;gap:4px;text-align:center}
.cycles li>span:first-child{width:100%;max-width:92px;aspect-ratio:80/266}.cycles li>span:first-child svg{width:100%;height:100%}
.cycles b{font-weight:700;font-size:15px;margin-top:8px}.cycles li>span:last-child{font-size:12.5px;color:var(--sub)}
.cycles .now>span:last-child{color:var(--amber-ink);font-weight:700}
.cycles figcaption{font-size:15px;color:var(--sub);margin-top:18px;max-width:30em}
/* Tiers sit in a card beside the pots, on a track that fills up to where you are. */
.tier-card{background:var(--surface);border-radius:24px;box-shadow:0 0 0 1px var(--hair);padding:24px 22px 26px}
.tc-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px}.tc-h b{font-weight:750}.tc-h span{font-size:13px;font-weight:650;color:var(--amber-ink)}
.streak .tiers{position:relative;margin-top:26px;max-width:none;gap:6px}
.streak .tiers::before{content:'';position:absolute;top:26px;left:12.5%;right:12.5%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--amber) 0 55.5%,var(--hair) 55.5%)}
.streak .tiers li{position:relative;color:var(--sub)}.streak .tiers li.cur{color:var(--ink)}
.streak .medal{width:56px;max-width:none}
/* Tiers still ahead are drawn in a pale solid colour, so the track doesn't show through them. */
.streak .tiers li:not(.done):not(.cur) .medal.t3{background:color-mix(in oklab,#E0A100 32%,var(--surface))}
.streak .tiers li:not(.done):not(.cur) .medal.t4{background:color-mix(in oklab,#7FB8B0 32%,var(--surface))}
.streak .tiers li:not(.done):not(.cur) .medal img{opacity:.55}
.streak .tiers li small{margin-top:-7px}
.streak .tiers li.cur .medal{box-shadow:0 0 0 3px var(--surface),0 0 0 5.5px var(--amber)}
@media (min-width:960px){.cyc-g{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;align-items:center}}
/* privacy wire: data dot travels to iCloud */
.link{position:relative}
.link::after{content:'';position:absolute;left:-5px;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0}
.diagram.in .link::after{animation:dotV 2.4s linear infinite}
@keyframes dotV{0%{opacity:0;transform:translateY(0)}15%,85%{opacity:1}100%{opacity:0;transform:translateY(48px)}}
@media (min-width:860px){.link::after{top:-5px;left:0}.diagram.in .link::after{animation-name:dotH}
@keyframes dotH{0%{opacity:0;transform:translateX(0)}15%,85%{opacity:1}100%{opacity:0;transform:translateX(var(--w,120px))}}}
html.preview .q-stage *,html.preview [data-scr] *{transition:none!important}
/* fluid: morphing blobs */
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit}
.blobs i{position:absolute;display:block;width:46vmax;height:46vmax;max-width:760px;max-height:760px;border-radius:42% 58% 63% 37%/45% 41% 59% 55%;opacity:.9;will-change:transform,border-radius}
.blobs i:nth-child(1){left:-12%;top:-30%;background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 22%,transparent),transparent 72%);animation:blobA 22s ease-in-out infinite alternate}
.blobs i:nth-child(2){right:-14%;top:10%;background:radial-gradient(closest-side,color-mix(in oklab,var(--surface) 75%,transparent),transparent 70%);animation:blobB 26s ease-in-out infinite alternate}
.blobs i:nth-child(3){left:30%;bottom:-40%;background:radial-gradient(closest-side,color-mix(in oklab,var(--amber-lt) 26%,transparent),transparent 70%);animation:blobC 30s ease-in-out infinite alternate}
:root[data-theme="dark"] .blobs i:nth-child(2){opacity:.25}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .blobs i:nth-child(2){opacity:.25}}
@keyframes blobA{0%{transform:translate(0,0) rotate(0);border-radius:42% 58% 63% 37%/45% 41% 59% 55%}50%{border-radius:58% 42% 38% 62%/52% 60% 40% 48%}100%{transform:translate(8%,10%) rotate(40deg);border-radius:37% 63% 52% 48%/61% 38% 62% 39%}}
@keyframes blobB{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-10%,-6%) rotate(-50deg);border-radius:60% 40% 45% 55%/40% 58% 42% 60%}}
@keyframes blobC{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-14%,-8%) scale(1.15);border-radius:50% 50% 34% 66%/58% 44% 56% 42%}}
.hero>.wrap,.final .box>*:not(.blobs){position:relative;z-index:1}
.final .box{position:relative;overflow:hidden}
/* fluid: moving wave edge under the hero */
.hwave{position:absolute;left:0;right:0;bottom:-1px;height:46px;overflow:hidden;pointer-events:none;z-index:1}
.hwave svg{position:absolute;left:0;bottom:0;width:200%;height:100%;fill:var(--bg)}
.hwave svg:first-child{opacity:.5;animation:wave 19s linear infinite}
.hwave svg:last-child{animation:wave 13s linear infinite reverse}
@keyframes wave{to{transform:translateX(-50%)}}
@media (max-width:700px){.hwave{height:30px}.blobs i:nth-child(3){display:none}.hwave svg:first-child{display:none}}
/* fluid: money streams in the Stats diagram */
.sankey .fl-s{fill:url(#sk-shine);pointer-events:none;mix-blend-mode:soft-light}
@media (prefers-reduced-motion:reduce){.blobs i,.hwave svg{animation:none!important}.sankey .fl-s{display:none}}
html.preview .blobs i,html.preview .hwave svg{animation:none!important}
@media (prefers-reduced-motion:reduce){.link::after{display:none}}

/* maker's note teaser, above the FAQ */