/* how-it-works.html: giant numerals walking a dotted paper path, open-book preview, inside-the-book cards */
.path{position:relative}
.trail{position:absolute;left:50%;top:40px;bottom:40px;width:36%;height:calc(100% - 80px);translate:-50% 0;pointer-events:none}
.path ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,4vw,56px)}
.pstep{position:relative;width:min(58%,640px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:center}
.pstep:nth-child(even){margin-left:auto}
.pstep:nth-child(odd) .card{rotate:-1.2deg}.pstep:nth-child(even) .card{rotate:1.2deg}
.pn{font:400 clamp(6rem,11vw,10rem)/.85 "Lilita One",sans-serif;color:var(--cream);
  text-shadow:0 .035em 0 var(--terra),0 .07em 0 var(--plum),0 .12em .1em rgba(16,30,56,.3)}
.pstep:nth-child(2) .pn{color:var(--sage-l)}.pstep:nth-child(3) .pn{color:var(--terra-l)}.pstep:nth-child(4) .pn{color:var(--blue-l)}
.pstep .card{position:relative}
.pstep h3{font-size:clamp(1.7rem,2.6vw,2.2rem);color:var(--plum)}
.pstep .btn{margin-top:4px}
.ico{position:absolute;top:-26px;right:18px;width:64px;height:64px;padding:6px;border-radius:50%;background:var(--sun-l);box-shadow:var(--cut);animation:bob 4s ease-in-out infinite}
.ico svg{width:100%;height:100%}

.pv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.ticks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:44px;font-weight:600}
.ticks li::before{content:"\2713";position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:var(--plum);font:400 1rem/1 "Lilita One",sans-serif}
.openbook{position:relative;margin:0;display:grid;grid-template-columns:1fr 1fr;padding:14px;background:var(--terra);border-radius:18px;rotate:2deg;
  box-shadow:0 8px 0 var(--plum-d),0 30px 50px -20px rgba(0,0,0,.6)}
.openbook .pg{background:var(--tex),var(--cream);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.openbook .l{border-radius:10px 2px 2px 10px;box-shadow:inset -14px 0 18px -12px rgba(16,30,56,.45)}
.openbook .r{border-radius:2px 10px 10px 2px;box-shadow:inset 14px 0 18px -12px rgba(16,30,56,.45);padding:clamp(14px,2.4vw,30px)}
.openbook .l img{width:100%;height:100%;object-fit:cover}
.sample{font:400 clamp(1.15rem,2vw,1.7rem)/1.2 "Lilita One",sans-serif;color:var(--plum)!important;text-align:center;margin:0}
.sample mark{background:var(--sun-l);color:var(--terra-d);padding:0 .2em;border-radius:6px}
.openbook figcaption{grid-column:1/-1;padding:12px 6px 2px;font-size:.92rem;color:var(--plum);text-align:center}

.inbook{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.inbook li{text-align:center}
.inbook li:nth-child(odd){rotate:-1.5deg}.inbook li:nth-child(even){rotate:1.5deg;background:var(--tex),var(--sun-l)}
.inbook .big{display:block;font:400 clamp(3.4rem,5vw,4.6rem)/1 "Lilita One",sans-serif;color:var(--terra);text-shadow:0 4px 0 var(--plum);margin-bottom:12px}
.inbook h3{font-size:1.45rem;color:var(--plum)}
#questions .more{margin-top:32px}

@media (max-width:1099px){ .inbook{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:899px){
  .trail{display:none}
  .pstep,.pstep:nth-child(even){width:100%;max-width:640px;margin-inline:auto}
  .pv{grid-template-columns:1fr}
  .openbook{max-width:560px;width:100%;margin-inline:auto}
}
@media (max-width:599px){
  .inbook{grid-template-columns:1fr}
  .pstep{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pn{margin-bottom:-.2em}
  .ico{top:-30px;width:56px;height:56px}
  .pstep .card{padding-top:44px}
}
@media (max-height:520px) and (orientation:landscape){
  .pv{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pstep{grid-template-columns:auto minmax(0,1fr);text-align:left}
}