/* =========================================================
   Small Wonders Kaizen - One fold at a time
   Page styles. Mobile first: base = phone; min-width adds the rest.
   ========================================================= */
.page-kaizen{--washi:#FBF1EC;--kz:var(--kaizen);--kzi:var(--kaizen-ink)}
.kz-hero-canvas{aspect-ratio:5/4}
.page-kaizen .cp-note{top:4%;right:4%}

/* ---------- the folds ---------- */
.folds{padding:3rem 1.2rem 2.5rem}
.folds-head{max-width:46rem;margin:0 auto}
.fd-wrap{max-width:1180px;margin:1.8rem auto 0;display:grid;gap:1rem}
.fd-stage{position:relative;border-radius:24px;padding:.8rem .7rem .9rem;background:
  radial-gradient(90% 70% at 50% 40%,#fff,rgba(255,255,255,0) 72%),
  radial-gradient(rgba(156,54,54,.1) 1px,transparent 1.2px) 0 0/16px 16px,var(--washi);
  box-shadow:inset 0 0 0 1px rgba(156,54,54,.1),0 24px 50px -38px rgba(22,41,74,.45)}
.fd-canvas{display:block;width:100%;aspect-ratio:1/.86;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.fd-years{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem}
.fd-years li{display:grid;justify-items:center;padding:.4rem .1rem;border-radius:10px;color:var(--muted);transition:background .45s var(--ease),color .45s}
.fd-years b{font-size:.74rem;font-weight:600;line-height:1.1;color:var(--ink);transition:color .45s}
.fd-years small{font-size:.62rem;line-height:1.2}
.fd-years li::before{content:'';width:100%;height:3px;border-radius:3px;margin-bottom:.35rem;background:rgba(156,54,54,.12);transition:background .45s}
.fd-years li.past::before{background:rgba(198,90,85,.55)}
.fd-years li.on{background:#fff;box-shadow:0 6px 16px -10px rgba(156,54,54,.5)}
.fd-years li.on::before{background:var(--kz)}
.fd-years li.on b{color:var(--kzi)}
.fd-years .fd-g1.on::before,.fd-years .fd-g1.on{--kz:#A9823C}
.fd-years .fd-g1.on b{color:#876830}
.fd-dots{display:flex;justify-content:center;gap:.35rem;margin-top:.2rem}
.fd-dots button{width:26px;height:26px;border:0;padding:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center}
.fd-dots button::before{content:'';width:8px;height:8px;border-radius:50%;background:rgba(156,54,54,.18);transition:background .35s,transform .35s var(--ease)}
.fd-dots button.done::before{background:var(--kz)}
.fd-dots button[aria-current="step"]::before{background:var(--kzi);transform:scale(1.45)}

.fd-panel{position:relative;padding:1.2rem 1.2rem 1.3rem;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(22,41,74,.07),0 24px 50px -38px rgba(22,41,74,.5)}
.fd-step{min-height:10.5rem}
.fd-step.fd-in{animation:fdIn .6s var(--ease)}
@keyframes fdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fd-k{display:flex;align-items:baseline;gap:.7rem;font-size:.66rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#876830}
.fd-k b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--kzi)}
.fd-step h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.05;margin-top:.4rem;text-wrap:balance}
.fd-step h3 em{font-style:italic;color:var(--kzi)}
.fd-step>p:not(.fd-k){margin-top:.6rem;font-size:1rem;line-height:1.7}
.fd-step .fd-one{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;margin-top:.9rem;padding:.7rem .9rem;border-radius:12px;background:var(--washi);font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.35}
.fd-one span{font-family:var(--sans);font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--kzi)}
.fd-one a{color:var(--ink);text-decoration-color:rgba(169,130,60,.6);text-underline-offset:3px}
.fd-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.1rem}
.fd-ctrl button{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;font:inherit;font-size:.88rem;font-weight:500;transition:background .3s,color .3s,transform .3s var(--ease),opacity .3s}
.fd-ctrl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fd-prev{width:44px;height:44px;justify-content:center;background:#fff;color:var(--kzi);box-shadow:inset 0 0 0 1px rgba(156,54,54,.25)}
.fd-next{height:44px;padding:0 1.2rem 0 1.4rem;background:var(--kzi);color:#fff}
.fd-play{height:44px;padding:0 1rem;background:none;color:var(--kzi);text-decoration:underline;text-decoration-color:rgba(156,54,54,.35);text-underline-offset:4px}
.fd-ctrl button:disabled{opacity:.35;cursor:default}
@media(hover:hover){.fd-next:not(:disabled):hover{background:#7E2A2A}.fd-prev:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--kzi)}}
.fd-ctrl button:not(:disabled):active{transform:scale(.97)}

/* ---------- one per cent: a small aside after the folds ---------- */
.pct{padding:0 1.2rem 3rem}
.pct-card{max-width:1180px;margin:0 auto;display:grid;gap:.9rem;padding:1.2rem 1.2rem 1.3rem;border-radius:20px;background:var(--washi);box-shadow:inset 0 0 0 1px rgba(156,54,54,.1)}
.pct-k{font-size:.6rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#876830}
.pct-h{margin-top:.35rem;font-family:var(--serif);font-weight:500;font-size:1.55rem;line-height:1.1}
.pct-h em{font-style:italic;color:var(--kzi)}
.pct-big{display:flex;align-items:baseline;margin-top:.6rem;font-family:var(--serif);font-weight:500;font-size:clamp(3rem,15vw,4.4rem);line-height:.9;color:var(--kzi);font-variant-numeric:lining-nums tabular-nums}
.pct-big span{font-size:.55em;margin-left:.08em;color:var(--kz)}
.pct-sub{font-size:.9rem;color:var(--muted)}
.pct-sub b{color:var(--ink);font-weight:600}
.pct-tip{margin-top:.3rem;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.3}
.pct-chart{position:relative;aspect-ratio:5/2;border-radius:12px;background:linear-gradient(rgba(22,41,74,.05) 1px,transparent 1px) 0 0/100% 25%,#fff}
.pct-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pct-line{fill:none;stroke:var(--kz);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pct-flat{fill:none;stroke:rgba(22,41,74,.35);stroke-width:1.5;stroke-dasharray:5 6;vector-effect:non-scaling-stroke}
.pct-dot{fill:#fff;stroke:var(--kzi);stroke-width:3;vector-effect:non-scaling-stroke}
.pct-lab{position:absolute;font-size:.68rem;color:var(--muted)}
.pct-lab-flat{left:.7rem;bottom:.5rem}
.pct-range{display:grid;gap:.35rem}
.pct-range .micro{color:var(--muted);font-size:9.6px}
.pct-range input{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:none;cursor:pointer}
.pct-range input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--kz),#E9B0AA)}
/* the rail is 4px but the control has to be thumb-sized to touch */
.pct-range input{height:28px;padding:0;background:none}
.pct-range input::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--kz),#E9B0AA)}
.pct-range input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--kzi),0 6px 14px -4px rgba(156,54,54,.5)}
.pct-range input::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--kzi),0 6px 14px -4px rgba(156,54,54,.5)}
.pct-range input:focus-visible{outline:2px solid var(--kzi);outline-offset:4px;border-radius:8px}
.pct-note{font-size:.84rem;line-height:1.6;color:var(--muted)}

/* ---------- the kaizen loop (in the bridge) ---------- */
.kz-loop{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:1.5rem;counter-reset:k}
.kz-loop li{position:relative;padding:.5rem .95rem;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:.86rem;font-weight:500;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);animation:kzLoop 6s infinite}
.kz-loop li:nth-child(2){animation-delay:1.5s}.kz-loop li:nth-child(3){animation-delay:3s}.kz-loop li:nth-child(4){animation-delay:4.5s}
.kz-loop li:not(:last-child)::after{content:'\2192';position:absolute;right:-.85rem;top:50%;transform:translateY(-50%);font-size:.8rem;color:#fff;opacity:.6}
.kz-loop li{margin-right:.5rem}
.kz-loop li:last-child::after{content:' \21BA';color:inherit}
@keyframes kzLoop{0%,22%{background:#fff;color:var(--kzi);box-shadow:none}27%,100%{background:rgba(255,255,255,.1);color:#fff}}

/* ---------- tablet and up ---------- */
@media(min-width:769px){
  .folds,.pct{padding-left:2rem;padding-right:2rem}
  .pct-card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;column-gap:2rem;padding:1.5rem 1.8rem}
  .pct-range,.pct-note{grid-column:1/-1}
}
@media(min-width:1000px){
  .folds,.pct{padding-left:3rem;padding-right:3rem}
  
  .fd-wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:2rem;align-items:center}
  .fd-stage{padding:1.2rem 1.2rem 1.1rem}
  .fd-panel{padding:2rem 2rem 1.8rem}
  .fd-step{min-height:15rem}
  .pct{padding-bottom:4rem}
  .pct-card{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"read chart side";column-gap:2.2rem}
  .pct-read{grid-area:read}.pct-chart{grid-area:chart}
  .pct-range{grid-column:3;grid-row:1;align-self:end}.pct-note{grid-column:3;grid-row:1;align-self:start}
}
@media(prefers-reduced-motion:reduce){.kz-loop li{animation:none}.fd-step.fd-in{animation:none}}