/* Post 1, "the storefront": a daytime scrollytelling layout. A split editorial hero with a serif display headline,
   oversized chapter numbers, a sticky shop window whose chat changes with each chapter, and a spam vs helpful block.
   Warm-neutral light palette (mint, lilac, ink). No hue 20 to 65. */
.p-story {
  --paper: #FAFAF7; --mint: #E4F4EB; --mint-2: #C9ECD9; --lilac: #ECE8FF; --lilac-2: #D9D2FF; --ink: #15141F;
  --green: #11815A; --purple: #5A47FF; --bubble: #FFFFFF; --bubble-me: #D3F1E1;
  background: var(--paper);
}
:root[data-theme="dark"] .p-story {
  --paper: #0D0E12; --mint: #11231B; --mint-2: #173426; --lilac: #1A1830; --lilac-2: #2A2650; --ink: #F1F0F6;
  --green: #3CCB8F; --purple: #9C8CFF; --bubble: #1C1C26; --bubble-me: #134A33;
}
.p-story .bhdr { background: color-mix(in srgb, var(--paper) 84%, transparent); }

/* split hero */
.s-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 72px 16px 56px; }
.s-kicker { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 22px; font: 600 .78rem/1.4 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.s-kicker .cat { color: var(--purple); }
.s-hero h1 { margin: 0; font: 400 clamp(2.7rem, 5.6vw, 5rem)/.98 var(--serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.s-hero h1 em { font-style: italic; color: var(--purple); }
.s-dek { margin: 24px 0 28px; max-width: 34em; font-size: 1.2rem; line-height: 1.55; color: var(--fg-2); }
.s-hero__art { border-radius: 32px; overflow: hidden; background: linear-gradient(150deg, var(--mint), var(--lilac)); box-shadow: 0 40px 80px -50px rgba(21, 20, 31, .45); }
.s-hero__art svg { display: block; width: 100%; height: auto; }

/* key takeaways */
.s-take { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.s-take__in { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 28px 32px; border-radius: 24px; background: var(--mint); }
.s-take h2 { margin: 0; font: 400 1.7rem/1.1 var(--serif); color: var(--green); }
.s-take ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.s-take li { font-size: .95rem; line-height: 1.5; color: var(--fg-2); }
.s-take li b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }

/* plain reading sections */
.s-col { max-width: 680px; margin: 0 auto; padding: 0 16px; }
.s-col p, .s-ch p { margin: 0 0 1.3em; }
.s-sec { padding-top: 72px; }
.s-sec h2 { margin: 0 0 .6em; font: 400 clamp(2rem, 4vw, 2.9rem)/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.s-sec ul { margin: 0 0 1.4em; padding-left: 1.2em; }
.s-sec li { margin: .4em 0; }
.s-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 2em 0; }
.s-stats div { padding: 24px; border-radius: 20px; background: var(--lilac); }
.s-stats b { display: block; font: 400 clamp(2.8rem, 6vw, 4rem)/1 var(--serif); color: var(--purple); }
.s-stats span { display: block; margin-top: 8px; font-size: .9rem; line-height: 1.45; color: var(--fg-2); }
.s-pull { margin: 2.4em 0; font: 400 italic clamp(1.9rem, 4vw, 2.6rem)/1.15 var(--serif); color: var(--ink); }
.s-pull p { margin: 0; }

/* scrollytelling: sticky shop window on the left, numbered chapters on the right */
.s-scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; max-width: 1240px; margin: 72px auto 0; padding: 0 16px; }
.s-stage { position: sticky; top: 96px; height: calc(100vh - 128px); max-height: 680px; display: grid; place-items: center; border-radius: 32px; background: linear-gradient(160deg, var(--mint), var(--lilac)); overflow: hidden; }
.s-shop { position: relative; width: min(360px, 82%); }
.s-awning { height: 46px; border-radius: 14px 14px 0 0; background: repeating-linear-gradient(90deg, var(--purple) 0 36px, var(--green) 36px 72px); -webkit-mask: radial-gradient(18px 12px at 18px 100%, transparent 98%, #000) 0 0 / 36px 100%; mask: radial-gradient(18px 12px at 18px 100%, transparent 98%, #000) 0 0 / 36px 100%; }
.s-sign { margin: 0 0 6px; padding: 8px 12px; border-radius: 10px; background: var(--purple); color: #fff; text-align: center; font: 600 .78rem/1.2 var(--font); letter-spacing: .14em; }
.s-window { position: relative; padding: 0 0 16px; border-radius: 0 0 22px 22px; background: var(--bubble); box-shadow: 0 30px 60px -40px rgba(21, 20, 31, .5); }
.s-chathead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.s-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; font: 700 .8rem/1 var(--font); }
.s-chathead b { display: block; font-size: .92rem; color: var(--ink); line-height: 1.2; }
.s-chathead small { color: var(--green); font-size: .75rem; }
.s-states { position: relative; min-height: 270px; margin: 0 12px; padding-top: 12px; background: var(--mint); border-radius: 0 0 14px 14px; }
.s-state { position: absolute; inset: 12px 10px 10px; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.s-stage[data-step="1"] .s-state[data-state="1"], .s-stage[data-step="2"] .s-state[data-state="2"], .s-stage[data-step="3"] .s-state[data-state="3"] { opacity: 1; transform: none; }
.bub { max-width: 86%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--bubble); color: var(--ink); font-size: .88rem; line-height: 1.4; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
.bub--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--bubble-me); }
.bub small { display: block; margin-top: 2px; font-size: .7rem; color: var(--muted); text-align: right; }
.bub .tag { display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 600; color: var(--green); letter-spacing: .02em; }
.slots { display: flex; gap: 6px; margin-top: 8px; }
.slots span { padding: 4px 10px; border-radius: 999px; background: var(--lilac); color: var(--purple); font: 600 .78rem/1.3 var(--mono); }
.slots .on { background: var(--purple); color: #fff; }
.s-progress { position: absolute; left: 50%; bottom: 18px; display: flex; gap: 6px; transform: translateX(-50%); }
.s-progress i { width: 22px; height: 4px; border-radius: 2px; background: var(--lilac-2); transition: background-color .3s, width .3s; }
.s-stage[data-step="1"] .s-progress i:nth-child(1), .s-stage[data-step="2"] .s-progress i:nth-child(2), .s-stage[data-step="3"] .s-progress i:nth-child(3) { width: 40px; background: var(--purple); }
.s-chapters { padding: 4vh 0 10vh; }
.s-ch { min-height: 78vh; padding: 8vh 0; }
.s-ch__num { display: block; margin: 0 0 6px; font: 400 clamp(5rem, 11vw, 9rem)/.85 var(--serif); color: transparent; -webkit-text-stroke: 1.5px var(--purple); letter-spacing: -.03em; }
.s-ch.is-on .s-ch__num { color: var(--purple); }
.s-ch h2 { margin: 0 0 .5em; font: 400 clamp(2rem, 3.6vw, 2.8rem)/1.05 var(--serif); color: var(--ink); }
.s-ch__mini { display: none; }

/* spam vs helpful */
.s-vs { max-width: 1040px; margin: 80px auto 0; padding: 0 16px; }
.s-vs__head { max-width: 680px; margin: 0 auto 28px; }
.s-vs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.s-vs__col { padding: 22px; border-radius: 26px; }
.s-vs__col h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; font: 600 .8rem/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.s-vs__col h3 span { font: 500 .78rem/1 var(--mono); letter-spacing: 0; text-transform: none; }
.s-vs__col .bub { max-width: 92%; margin-bottom: 8px; }
.s-vs__bad { background: #EEEDF2; color: #5E5D6D; }
.s-vs__bad .bub { background: #FFFFFF; color: #4A4958; }
.s-vs__bad h3 { color: #6A6979; }
.s-vs__good { background: var(--mint); }
.s-vs__good h3 { color: var(--green); }
:root[data-theme="dark"] .s-vs__bad { background: #17171E; color: #9C9BAD; }
:root[data-theme="dark"] .s-vs__bad .bub { background: #22222C; color: #B9B8C6; }
.s-vs__note { margin: 10px 0 0; font-size: .82rem; }

@media (max-width: 900px) {
  .s-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .s-take__in { grid-template-columns: 1fr; padding: 22px; }
  .s-take ul { grid-template-columns: 1fr; gap: 12px; }
  .s-scrolly { grid-template-columns: 1fr; gap: 0; margin-top: 48px; }
  .s-stage { display: none; }
  .s-ch { min-height: 0; padding: 32px 0; }
  .s-ch__num { font-size: 4.6rem; color: var(--purple); }
  .s-ch__mini { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 20px; padding: 14px; border-radius: 20px; background: var(--mint); }
  .s-vs__grid { grid-template-columns: 1fr; }
  .s-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .s-state { transition: none; } }
.s-vs__head h2 { margin: 0 0 .5em; font: 400 clamp(2rem, 4vw, 2.9rem)/1.05 var(--serif); color: var(--ink); }