/* The Gruhamm story page: one day in her home, told in the app's own colours. */
@font-face{font-family:"Poppins";src:url(/assets/fonts/poppins-semibold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url(/assets/fonts/poppins-bold.ttf) format("truetype");font-weight:700;font-display:swap}

.story{
  --yellow:#FFC043; --yellow-soft:#FFF1C9; --paper:#FFFAEF;
  --ink:#2A1509; --ink-soft:#6B5444;
  --today:#D9402F; --today-soft:#FFE3DD;
  --care:#C92468;  --care-soft:#FFDCEA;
  --house:#0B7F7F; --house-soft:#D8F3F1;
  --money:#3D2FD6; --money-soft:#E7E5FD;
  --family:#9333C9;--family-soft:#F0E0FA;
  --friends:#1F6FD1;--friends-soft:#DCEBFF;
  --accent:var(--today); --accent-soft:var(--today-soft);
  background:var(--paper); color:var(--ink);
}
.story h1,.story h2,.story h3{font-family:"Poppins",system-ui,sans-serif;letter-spacing:-.02em;line-height:1.08}

/* the sky behind the page changes with the hour */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none}
.sky i{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.sky i[data-for="dawn"]{background:linear-gradient(180deg,#FFD36E 0%,#FFEFC2 45%,var(--paper) 100%)}
.sky i[data-for="today"]{background:linear-gradient(180deg,var(--today-soft) 0%,var(--paper) 70%)}
.sky i[data-for="care"]{background:linear-gradient(180deg,var(--care-soft) 0%,var(--paper) 70%)}
.sky i[data-for="house"]{background:linear-gradient(180deg,var(--house-soft) 0%,var(--paper) 70%)}
.sky i[data-for="money"]{background:linear-gradient(180deg,var(--money-soft) 0%,var(--paper) 70%)}
.sky i[data-for="family"]{background:linear-gradient(180deg,var(--family-soft) 0%,var(--paper) 70%)}
.sky i[data-for="friends"]{background:linear-gradient(180deg,var(--friends-soft) 0%,var(--paper) 70%)}
body[data-chapter="dawn"] .sky i[data-for="dawn"],
body[data-chapter="today"] .sky i[data-for="today"],
body[data-chapter="care"] .sky i[data-for="care"],
body[data-chapter="house"] .sky i[data-for="house"],
body[data-chapter="money"] .sky i[data-for="money"],
body[data-chapter="family"] .sky i[data-for="family"],
body[data-chapter="friends"] .sky i[data-for="friends"]{opacity:1}

/* the saree thread: one ribbon that is drawn as you scroll */
.story-body{position:relative;overflow-x:clip}
.thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.thread path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.thread .t1{stroke:var(--yellow);stroke-width:30}
.thread .t2{stroke:#FFF8E6;stroke-width:18}
.thread .t3{stroke:var(--accent);stroke-width:3;transition:stroke .8s}
.thread{opacity:.5}
.story-body>*:not(.thread){position:relative;z-index:1}

.wrap-s{max-width:1180px;margin:0 auto;padding:0 24px}

/* hero */
.s-hero{min-height:100svh;display:grid;align-items:center;padding:96px 0 56px}
.s-hero .wrap-s{min-width:0;width:100%;display:grid;gap:32px;grid-template-columns:1fr;align-items:center}
.eyebrow-s{display:inline-flex;align-items:center;gap:8px;font:600 .82rem/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.eyebrow-s::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--accent)}
.s-hero h1{font-size:clamp(2.3rem,7vw,4.6rem);margin:16px 0 18px;font-weight:700}
.s-hero h1 em{font-style:normal;color:var(--today);position:relative}
.s-lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--ink-soft);max-width:34rem;line-height:1.55}
.s-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 14px}
.btn-s{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font:600 1rem/1 "Poppins",sans-serif;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn-s--main{background:var(--ink);color:#FFF8E6;box-shadow:0 10px 24px rgba(42,21,9,.25)}
.btn-s--soft{background:#fff;color:var(--ink);box-shadow:0 6px 18px rgba(42,21,9,.12)}
.btn-s:hover{transform:translateY(-2px)}
.s-trust{font-size:.92rem;color:var(--ink-soft)}
.lady{position:relative;justify-self:center;width:min(86vw,500px);margin:0}
.lady__glow{position:absolute;inset:6% 6% 8% 6%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFE79A,#FFC043 62%,rgba(255,192,67,0) 72%);filter:blur(2px)}
.lady__media{position:relative;animation:ladyFloat 7s ease-in-out infinite;transform-origin:50% 90%;will-change:transform}
.lady__media img{position:relative;display:block;width:100%;height:auto}
.lady__media canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lady.is-live .lady__media img{opacity:0}
.lady__ribbon{position:absolute;left:78%;top:58%;width:78%;height:auto;overflow:visible;pointer-events:none}
.lady__ribbon path{fill:none;stroke-linecap:round}
@keyframes ladyFloat{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-10px) rotate(.8deg)}}
.cue{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:600 .9rem "Poppins",sans-serif;color:var(--ink-soft);text-decoration:none}
.cue span{display:inline-block;animation:cueBob 1.6s ease-in-out infinite}
@keyframes cueBob{50%{transform:translateY(5px)}}

/* the day, chapter by chapter */
.day{padding:24px 0 40px}
.day .wrap-s{display:grid;grid-template-columns:1fr;gap:0}
.chapter{padding:64px 0;display:flex;flex-direction:column;justify-content:center}
.time{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:#fff;border-radius:999px;padding:8px 16px 8px 10px;font:600 .95rem "Poppins",sans-serif;color:var(--accent);box-shadow:0 6px 16px rgba(42,21,9,.1)}
.time i{width:22px;height:22px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.chapter h2{font-size:clamp(1.9rem,4.6vw,3.1rem);margin:18px 0 14px;font-weight:700}
.chapter p{font-size:clamp(1.02rem,1.9vw,1.18rem);line-height:1.7;color:var(--ink-soft);max-width:33rem}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.tags span{background:var(--accent-soft);color:var(--accent);padding:8px 14px;border-radius:999px;font:600 .88rem "Inter",sans-serif}
.chapter[data-area="today"]{--accent:var(--today);--accent-soft:var(--today-soft)}
.chapter[data-area="care"]{--accent:var(--care);--accent-soft:var(--care-soft)}
.chapter[data-area="house"]{--accent:var(--house);--accent-soft:var(--house-soft)}
.chapter[data-area="money"]{--accent:var(--money);--accent-soft:var(--money-soft)}
.chapter[data-area="family"]{--accent:var(--family);--accent-soft:var(--family-soft)}
.chapter[data-area="friends"]{--accent:var(--friends);--accent-soft:var(--friends-soft)}

/* the phone */
.phone-s{position:relative;width:min(300px,74vw);aspect-ratio:540/1000;border-radius:44px;background:#2A1509;padding:10px;box-shadow:0 40px 70px -20px rgba(42,21,9,.45),0 0 0 2px rgba(255,255,255,.4) inset}
.phone-s::before{content:"";position:absolute;top:14px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:14px;background:#2A1509;z-index:3}
.phone-s .scr{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--paper)}
.phone-s .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.03);transition:opacity .6s ease,transform .8s ease}
.phone-s .scr img.is-on{opacity:1;transform:none}
.phone-inline{margin:30px auto 0;display:block}
.stage{display:none}

/* floating notes beside the phone */
.callout{position:absolute;display:flex;flex-direction:column;gap:2px;background:#fff;border-radius:18px;padding:12px 16px;box-shadow:0 18px 40px -12px rgba(42,21,9,.35);opacity:0;transform:translateY(14px) scale(.96);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);z-index:4;min-width:150px}
.callout b{font:700 1.15rem "Poppins",sans-serif;color:var(--accent)}
.callout small{font:500 .8rem "Inter",sans-serif;color:var(--ink-soft)}
.callout.is-on{opacity:1;transform:none}
.callout--a{left:-96px;top:18%}
.callout--b{right:-84px;bottom:20%}

/* recap grid */
.recap{padding:72px 0}
.recap h2{font-size:clamp(1.8rem,4vw,2.7rem);text-align:center;font-weight:700;margin:0 auto 10px;max-width:22ch}
.recap .s-lead{margin:0 auto 36px;text-align:center}
.grid-s{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tile{background:#fff;border-radius:22px;padding:20px;box-shadow:0 10px 26px -14px rgba(42,21,9,.3);transition:transform .25s}
.tile:hover{transform:translateY(-4px)}
.tile i{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--accent-soft);color:var(--accent);font:700 1.1rem "Poppins",sans-serif;margin-bottom:12px}
.tile b{display:block;font:600 1.02rem "Poppins",sans-serif}
.tile span{display:block;color:var(--ink-soft);font-size:.92rem;margin-top:4px;line-height:1.45}

/* the finale: night */
.finale{position:relative;background:#241437;color:#FFF3D6;text-align:center;padding:96px 0 104px;overflow:hidden}
.finale::before{content:"";position:absolute;inset:0;background:
  radial-gradient(2px 2px at 12% 22%,#FFE79A,transparent),radial-gradient(2px 2px at 28% 64%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 44% 18%,#fff,transparent),radial-gradient(2px 2px at 63% 40%,#FFE79A,transparent),
  radial-gradient(1.5px 1.5px at 78% 16%,#fff,transparent),radial-gradient(2px 2px at 90% 58%,#FFE79A,transparent),
  radial-gradient(1.5px 1.5px at 8% 78%,#fff,transparent),radial-gradient(1.5px 1.5px at 56% 82%,#fff,transparent);animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.55}}
.moon{position:relative;width:74px;height:74px;margin:0 auto 22px;border-radius:50%;background:#FFE79A;box-shadow:0 0 60px 14px rgba(255,231,154,.35)}
.moon::after{content:"";position:absolute;top:-6px;left:16px;width:74px;height:74px;border-radius:50%;background:#241437}
.finale .time{background:rgba(255,255,255,.1);color:var(--yellow);box-shadow:none;margin:0 auto}
.finale .time i{background:var(--yellow);box-shadow:0 0 0 5px rgba(255,192,67,.25)}
.finale h2{font-size:clamp(2rem,5vw,3.5rem);margin:18px auto 14px;max-width:18ch;font-weight:700}
.finale .s-lead{color:#EAD9BE;margin:0 auto 28px}
.finale .s-cta{justify-content:center}
.promises{display:grid;gap:14px;margin:42px auto 0;max-width:820px;grid-template-columns:1fr}
.promises div{background:rgba(255,255,255,.07);border-radius:20px;padding:18px 20px;text-align:left}
.promises b{display:block;font:600 1rem "Poppins",sans-serif;color:var(--yellow);margin-bottom:4px}
.promises span{color:#EAD9BE;font-size:.95rem;line-height:1.5}
.faq-wrap{background:var(--paper)}

/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media (min-width:640px){.grid-s{grid-template-columns:repeat(4,1fr)}.promises{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){
  .s-hero .wrap-s{grid-template-columns:1.05fr .95fr;gap:48px}
  .day .wrap-s{grid-template-columns:minmax(0,1fr) 400px;gap:7vw}
  .chapter{min-height:100svh;padding:0}
  .phone-inline{display:none}
  .stage{display:flex;position:sticky;top:0;height:100svh;align-items:center;justify-content:center;align-self:start}
  .stage .phone-s{width:320px}
  .thread{opacity:.6}
}
@media (max-width:899px){.thread{opacity:.28}.callout{display:none}}
@media (prefers-reduced-motion:reduce){
  .lady__media,.cue span,.finale::before{animation:none}
  .thread path{stroke-dashoffset:0!important}
  .js .reveal{opacity:1;transform:none;transition:none}
  .sky i,.phone-s .scr img,.callout{transition:none}
}