/* Sweet Help, look c, "Every order moment": a mint-and-cream conveyor studio. A parcel rides a track through four stations; at each one a chat
   message arrives on an HTML phone (an illustration) beside the real configuration screen. Markup: src/_includes/e2/sweethelp/story-c.njk;
   behaviour: e2-sweethelp-c.js (every state is derived from the scroll progress p alone). Everything inside the stage is sized in em on a
   1cqw base (the frame is an inline-size container) with a vw fallback first. Without JS, with reduced motion, on a short screen or a phone
   the story is static: `.is-live` (set by the script) is what pins it. Scoped under .sh-story--c. */

.sh-story--c { --sh-green: #25d366; --sh-green-deep: #1da851; --c-ink: #0f3a26; --c-ink-2: #3f6553; --c-spring: cubic-bezier(.34, 1.56, .64, 1); --head: 128px; --pad-b: 24px; position: relative; }
.sh-story--c .shc-col { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.shc-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow count" "title title" "note note";
  align-items: center; gap: 4px 16px;
}
.shc-eyebrow { grid-area: eyebrow; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
.shc-title { grid-area: title; font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.05em; }
.shc-note { grid-area: note; font-size: 14px; line-height: 1.4; color: var(--text-3); max-width: 70ch; }
.shc-count {
  grid-area: count; display: none; gap: .45em; align-items: baseline; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--text-3); border: 1px solid var(--border-strong);
}
.shc-count b { font-weight: 600; color: #fff; }

/* The stage */
.shc-frame { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; container-type: inline-size; background: #dff5e8; --tx: 12.5%; }
.shc-world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.shc-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 90% at 50% 50%, rgba(255,255,255,.5), rgba(236,252,242,.12)); }

/* The track: stations above the belt, names below it, the parcel on it */
.shc-track { position: relative; height: 9em; margin: 1.4em 3em 0; font-size: 1.4vw; font-size: 1cqw; }
.shc-belt {
  position: absolute; left: 0; right: 0; top: 6em; height: .9em; border-radius: 999px; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(15,58,38,.16) 0 .5em, rgba(255,255,255,.65) .5em 1em); background-position-x: var(--belt, 0);
  box-shadow: inset 0 0 0 1px rgba(15,58,38,.12), 0 .5em .9em -.5em rgba(15,58,38,.35);
}
.shc-belt__fill { display: block; height: 100%; width: var(--tx); background: linear-gradient(90deg, var(--sh-green-deep), var(--sh-green)); border-radius: 999px; }
.shc-st { position: absolute; left: var(--sx); top: 0; transform: translateX(-50%); width: 14em; height: 9em; display: flex; flex-direction: column; align-items: center; }
.shc-st__obj { height: 5.2em; width: auto; margin-top: .3em; opacity: .5; filter: saturate(.35) drop-shadow(0 .5em .5em rgba(15,58,38,.2)); transform: scale(.82); transform-origin: 50% 100%; transition: opacity .4s ease, filter .4s ease, transform .6s var(--c-spring); }
.shc-st.is-lit .shc-st__obj { opacity: 1; filter: drop-shadow(0 .6em .6em rgba(15,58,38,.3)); transform: scale(1); }
.shc-st.is-now .shc-st__obj { transform: scale(1.14); filter: drop-shadow(0 .5em .5em rgba(15,58,38,.3)) drop-shadow(0 0 1.1em rgba(37,211,102,.75)); }
.shc-st__name {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .55em; white-space: nowrap;
  padding: .3em .85em .3em .3em; border-radius: 999px; font-size: 1em; font-weight: 600; letter-spacing: -.01em; color: var(--c-ink); background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(15,58,38,.1); transition: background-color .3s ease, color .3s ease;
}
.shc-st__name b { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; font-size: .9em; background: rgba(15,58,38,.12); color: var(--c-ink); font-variant-numeric: tabular-nums; transition: background-color .3s ease, color .3s ease; }
.shc-st.is-now .shc-st__name { background: var(--c-ink); color: #fff; }
.shc-st.is-now .shc-st__name b { background: var(--sh-green); color: #fff; }
.shc-rider { position: absolute; left: var(--tx); top: 6.45em; height: 3.2em; transform: translate(-50%, -88%); display: none; pointer-events: none; filter: drop-shadow(0 .5em .4em rgba(15,58,38,.35)); }
.shc-rider img { display: block; height: 100%; width: auto; transform: rotate(var(--rot, 0deg)); }

/* The grid: the moment's words, the phone, the screen */
.shc-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 3.4em; align-items: center; font-size: 1.4vw; font-size: 1cqw; margin: 1.2em 3em 2.2em; }
.shc-info { position: relative; display: grid; align-self: center; color: var(--c-ink); padding: 2em 2.2em 2.2em; border-radius: 1.6em; background: rgba(255,255,255,.72); backdrop-filter: blur(1.2em); -webkit-backdrop-filter: blur(1.2em); box-shadow: 0 0 0 1px rgba(15,58,38,.08), 0 2em 3em -2em rgba(15,58,38,.4); }
.shc-info__item { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .8em; opacity: 0; transform: translateY(1em); transition: opacity .35s ease, transform .5s ease; pointer-events: none; }
.shc-info__item.is-on { opacity: 1; transform: none; }
.shc-info__k { display: inline-flex; align-self: flex-start; align-items: center; gap: .6em; padding: .3em .9em .3em .3em; border-radius: 999px; background: var(--c-ink); color: #fff; font-family: var(--mono); font-size: .9em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.shc-info__k b { width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center; background: var(--sh-green); color: #fff; font-variant-numeric: tabular-nums; }
.shc-info__t { font-weight: 600; font-size: 2.5em; line-height: 1; letter-spacing: -.05em; }
.shc-info__b { font-size: 1.3em; line-height: 1.4; color: var(--c-ink-2); max-width: 22em; }

/* The phone (an illustration: plain rounded bubbles, no third-party logo or glyph) */
.shc-phone { align-self: stretch; display: flex; justify-content: center; min-height: 0; }
.shc-phone__bezel { height: 100%; max-height: 41.6em; aspect-ratio: 9 / 18.6; padding: .6em; border-radius: 3.1em; background: #16241c; box-shadow: 0 0 0 .15em #2c4236, 0 2.6em 4em -1.4em rgba(15,58,38,.6); }
.shc-phone__screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 2.5em; background: #efe6d8; color: #1a1a1a; font-size: .95em; }
.shc-phone__bar { flex: none; display: flex; align-items: center; gap: .7em; padding: 2.6em 1em .8em .9em; background: var(--sh-green-deep); color: #fff; }
.shc-phone__back { width: .7em; height: 1.2em; flex: none; }
.shc-phone__av { flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9f2d9); box-shadow: 0 0 0 .12em rgba(255,255,255,.35); }
.shc-phone__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.shc-phone__who b { font-weight: 600; font-size: 1.05em; }
.shc-phone__who small { font-size: .78em; opacity: .85; }
.shc-phone__tag { margin-left: auto; flex: none; font-style: normal; font-family: var(--mono); font-size: .62em; letter-spacing: .08em; text-transform: uppercase; padding: .35em .75em; border-radius: 999px; background: rgba(255,255,255,.2); }
.shc-chat { position: relative; flex: 1; min-height: 0; padding: .9em .8em; background: radial-gradient(rgba(120,100,70,.09) 1px, transparent 1.4px) 0 0 / 1.1em 1.1em, #efe6d8; }
.shc-thread { position: absolute; inset: .9em .8em; display: flex; flex-direction: column; gap: .5em; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.shc-thread.is-on { opacity: 1; }
.shc-phone__input { flex: none; margin: .4em .7em .9em; padding: .75em 1em; border-radius: 999px; background: #fff; font-size: .9em; color: #8a8a8a; }
.shc-msg { display: none; flex-direction: column; gap: .35em; max-width: 86%; align-self: flex-start; }
.shc-msg.is-on { display: flex; animation: shc-pop .5s var(--c-spring); }
.shc-msg--out { align-self: flex-end; }
.shc-msg--chip { align-self: center; max-width: 100%; }
@keyframes shc-pop { from { opacity: 0; transform: translateY(.8em) scale(.94); } to { opacity: 1; transform: none; } }
.shc-bub { margin: 0; padding: .6em .8em; border-radius: .3em 1em 1em 1em; background: #fff; font-size: 1em; line-height: 1.35; box-shadow: 0 .06em .12em rgba(0,0,0,.14); }
.shc-msg--out .shc-bub { border-radius: 1em .3em 1em 1em; background: #d9fdd3; }
.shc-btns { display: flex; flex-direction: column; gap: .3em; }
.shc-qr { display: block; text-align: center; padding: .55em .8em; border-radius: .9em; background: #fff; color: #0a7d5c; font-weight: 600; font-size: .95em; box-shadow: 0 .06em .12em rgba(0,0,0,.14); transition: transform .18s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.shc-qr.is-press { transform: scale(.95); background: var(--sh-green); color: #fff; box-shadow: 0 0 0 .3em rgba(37,211,102,.3); }
.shc-card { display: flex; flex-direction: column; gap: .35em; min-width: 12em; }
.shc-card__row { display: flex; justify-content: space-between; gap: 1.2em; font-size: .95em; }
.shc-card__row:last-child { border-top: 1px solid #ececec; padding-top: .35em; }
.shc-stp { display: flex; gap: .9em; }
.shc-stp__i { display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: .85em; color: #8a8a8a; }
.shc-stp__i i { width: 1.1em; height: 1.1em; border-radius: 50%; box-shadow: inset 0 0 0 .15em #c9c9c9; }
.shc-stp__i.is-done { color: #0a7d5c; font-weight: 600; }
.shc-stp__i.is-done i { background: var(--sh-green); box-shadow: none; }
.shc-chip { display: inline-flex; align-items: center; gap: .4em; padding: .35em .9em .35em .6em; border-radius: 999px; background: rgba(15,58,38,.82); color: #fff; font-size: .85em; font-weight: 600; }
.shc-chip svg { width: 1.1em; height: 1.1em; color: var(--sh-green); }
.shc-typing .shc-bub { display: flex; gap: .3em; padding: .75em .9em; }
.shc-typing i { width: .55em; height: .55em; border-radius: 50%; background: #9a9a9a; animation: shc-dot 1s ease-in-out infinite; }
.shc-typing i:nth-child(2) { animation-delay: .15s; }
.shc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes shc-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-.35em); opacity: 1; } }

/* The window: a real screen in a browser-like frame, panned by --ty (% of the page) and ringed by --hy / --hh */
.shc-win { width: 29.4em; border-radius: 1em; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(15,58,38,.12), 0 2.4em 4em -1.6em rgba(15,58,38,.55); }
.shc-win__bar { display: flex; gap: .45em; align-items: center; height: 1.9em; padding: 0 1em; background: #f1f1f3; }
.shc-win__bar i { width: .65em; height: .65em; border-radius: 50%; background: #d4d4d8; }
.shc-win__view { position: relative; overflow: hidden; background: #f4f5f7; }
.shc-scr { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .4s ease; }
.shc-scr.is-on { opacity: 1; }
.shc-scr__page { display: grid; position: relative; transform: translateY(calc(var(--ty) * -1)); transition: transform .65s cubic-bezier(.3, .7, .2, 1); }
.shc-scr__img { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.shc-scr__img--on { opacity: 0; transition: opacity .4s ease; }
.shc-scr.is-filled .shc-scr__img--on { opacity: 1; }
.shc-ring {
  position: absolute; left: var(--hx); width: var(--hw); top: var(--hy); height: var(--hh); border-radius: .7em; pointer-events: none;
  box-shadow: 0 0 0 .22em var(--sh-green), 0 0 0 100vmax rgba(10,40,25,.12); transition: top .55s cubic-bezier(.3, .7, .2, 1), height .55s cubic-bezier(.3, .7, .2, 1);
}

/* ---------- Static story: the track shows all four stations lit, then the steps as a list ---------- */
.sh-story--c:not(.is-live) .shc-grid { display: none; }
.sh-story--c:not(.is-live) .shc-track { font-size: clamp(5px, 2.1vw, 14px); font-size: clamp(5px, 2.1cqw, 14px); margin: 1.6em 1.4em 1.4em; height: 8.4em; }
.sh-story--c:not(.is-live) .shc-belt__fill { width: 100%; }
@media (max-width: 699px) { .sh-story--c:not(.is-live) .shc-st__name { display: none; } .sh-story--c:not(.is-live) .shc-track { height: 7.2em; } }
.shc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.shc-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 14px; border-radius: 20px; background: var(--surface-1); border: 1px solid var(--border); }
.shc-step__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sh-green); color: #04230f; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.shc-step__obj { grid-column: 3; grid-row: 1 / span 1; height: 44px; width: auto; justify-self: end; margin: -6px 0 -6px; }
.shc-step__txt { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.4; color: var(--text-3); padding-top: 3px; grid-column: 2; }
.shc-step__txt b { color: #fff; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.shc-step__t { color: var(--text-2, #d4d4d8); font-weight: 500; }
.shc-step__chat { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: #efe6d8; color: #1a1a1a; font-size: 14px; position: relative; }
.shc-step__chat .shc-msg { display: flex; max-width: 92%; }
.shc-step__chat .shc-msg.is-on, .shc-step__chat .shc-msg { animation: none; }
.shc-tag { margin: 0 0 2px; align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6b6b73; background: rgba(255,255,255,.7); padding: 3px 9px; border-radius: 999px; }
.shc-crop { grid-column: 1 / -1; position: relative; display: block; overflow: hidden; border-radius: 12px; background: #f4f5f7; width: 100%; }
.shc-crop img { display: block; max-width: none; width: 100%; height: auto; }

/* ---------- Live (pinned) story ---------- */
.sh-story--c.is-live { height: 420vh; height: 420svh; }
.is-live.sh-story--c .sh-sticky { position: sticky; top: var(--header-h, 72px); height: calc(100vh - var(--header-h, 72px)); height: calc(100svh - var(--header-h, 72px)); display: flex; align-items: center; justify-content: center; }
.is-live.sh-story--c .shc-col { width: min(100%, calc((100vh - var(--header-h, 72px) - var(--head) - var(--pad-b)) * 16 / 9)); width: min(100%, calc((100svh - var(--header-h, 72px) - var(--head) - var(--pad-b)) * 16 / 9)); }
.is-live.sh-story--c .shc-count { display: inline-flex; }
.is-live.sh-story--c .shc-frame { aspect-ratio: 16 / 9; border-radius: 32px; display: flex; flex-direction: column; }
.is-live.sh-story--c .shc-grid { flex: 1; min-height: 0; }
.is-live.sh-story--c .shc-rider { display: block; }
.is-live.sh-story--c .shc-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 900px) and (max-height: 759px) {
  .sh-story--c { --head: 46px; }
  .is-live.sh-story--c .shc-head { grid-template-areas: "title count"; }
  .is-live.sh-story--c .shc-eyebrow, .is-live.sh-story--c .shc-note { display: none; }
}
@media (min-width: 700px) { .sh-story--c:not(.is-live) .shc-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 699px) { .shc-title { font-size: clamp(24px, 7vw, 30px); } .shc-note { font-size: 13px; } .shc-frame { border-radius: 20px; } }

/* ---------- Reduced motion: nothing springs, nothing bobs ---------- */
@media (prefers-reduced-motion: reduce) {
  .shc-msg.is-on, .shc-typing i { animation: none !important; }
  .shc-st__obj, .shc-info__item, .shc-scr, .shc-scr__page, .shc-scr__img--on, .shc-ring, .shc-thread, .shc-qr { transition: none !important; }
}

/* =====================================================================================================================================
   The app's own drawings (inline SVG from src/_data/sweethelpIll.json). Three custom properties on any ancestor drive them, all 0 to 1:
   --draw (the black outlines draw on, by stroke-dash), --fill (the beige fills fade in), --bd (the green badge pops). Unset = the finished drawing,
   so without JS and with reduced motion every drawing is final. --ill-line recolours the outlines (the blueprint), --so is the outline opacity.
   ===================================================================================================================================== */
.ill { display: block; width: 100%; height: auto; overflow: visible; }
.ill-o { stroke: var(--ill-line, #000); stroke-opacity: var(--so, 1); stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--draw, 1)); }
.ill-f { opacity: var(--fill, 1); }
.ill-fo { fill-opacity: var(--fill, 1); }
.ill-badge { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(var(--bd, 1)); transition: opacity .3s ease; }
.ill-badge--tpl { opacity: 0; }
.is-alt .ill-badge--cfg { opacity: 0; }
.is-alt .ill-badge--tpl { opacity: 1; }

/* ---------- "Drawn for every moment", the gallery after the story ---------- */
.shg { --sh-green: #25d366; --sh-green-deep: #1da851; margin-top: clamp(48px, 8vw, 120px); display: flex; flex-direction: column; gap: 32px; }
.shg-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.shg-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
.shg-note { font-size: 16px; line-height: 1.45; color: var(--text-3); max-width: 62ch; }
.shg-grid, .shg-empties { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.shg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shg-empties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shg-li { display: flex; }
.shg-card {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 22px; border-radius: 28px;
  background: linear-gradient(165deg, #f6fdf9, #dcf3e5); color: #0f3a26; box-shadow: 0 0 0 1px rgba(15,58,38,.08), 0 30px 50px -34px rgba(15,58,38,.6);
  transition: transform .35s cubic-bezier(.3, .7, .2, 1), box-shadow .35s ease;
}
.shg-card:hover { transform: translateY(-4px); }
.shg-card:focus-visible { outline: 3px solid var(--sh-green); outline-offset: 3px; }
.shg-art { position: relative; display: block; aspect-ratio: 1; width: 100%; }
.shg-art > span { position: absolute; inset: 0; display: block; transition: opacity .35s ease; }
.shg-art__b { opacity: 0; }
.shg-card--art.is-alt .shg-art__a { opacity: 0; }
.shg-card--art.is-alt .shg-art__b { opacity: 1; }
.shg-tag { position: relative; display: grid; align-self: flex-start; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.shg-tag > span { grid-area: 1 / 1; padding: 5px 11px; border-radius: 999px; background: var(--c-ink, #0f3a26); transition: opacity .3s ease; white-space: nowrap; }
.shg-tag__a { opacity: 1; } .shg-tag__b { opacity: 0; }
.shg-card.is-alt .shg-tag__a { opacity: 0; } .shg-card.is-alt .shg-tag__b { opacity: 1; }
.shg-name { margin-top: 6px; font-weight: 600; font-size: 22px; line-height: 1.05; letter-spacing: -.04em; }
.shg-body { font-size: 14px; line-height: 1.4; color: #3f6553; }
.shg-sub { margin: 16px 0 0; font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.04em; }
/* blueprint cards: outline only, on a faint grid */
.shg-bp { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; border-radius: 28px; color: #d9f7e4;
  background: linear-gradient(rgba(120,230,170,.09) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(120,230,170,.09) 1px, transparent 1px) 0 0 / 22px 22px, #0b2a20;
  box-shadow: 0 0 0 1px rgba(120,230,170,.2); }
.shg-art--bp { --ill-line: #9fe8bd; --fill: 0; }
.shg-bp__txt { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; color: #9cc9b2; }
.shg-bp__txt b { color: #fff; font-weight: 600; font-size: 20px; letter-spacing: -.03em; }
@media (max-width: 1099px) { .shg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .shg-grid { gap: 12px; } .shg-card { padding: 12px 12px 16px; border-radius: 22px; } .shg-name { font-size: 18px; } .shg-body { font-size: 13px; } .shg-empties { grid-template-columns: 1fr; } .shg-bp { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) { .shg-card, .shg-art > span, .shg-tag > span, .ill-badge { transition: none !important; } }