/* Help article story (/help/<slug>). Ported from docs/superpowers/mocks/2026-10-16-help-story.html.
   help-story.js adds .js to main.hs: one card at a time. Without it, every card shows stacked. */
.hs { --app: #F4F2EC; --pine: #3F4021; --green: #5a7a1f; --green-text: #4f6b1b; --lime: #c9d98f; --ink: #1d1d16; --text: #2B2A24; --mute: #6E6A60; --line: #e2dfd4; --danger: #A4462F; --bg: #F2F0EA;
  padding: 78px 16px 0; display: flex; flex-direction: column; min-height: 100svh; color: var(--ink); }
.hs > * { max-width: 440px; width: 100%; margin-inline: auto; }
.hs .stage { flex: 1; }
@media (min-width: 760px) { .hs { padding-top: 96px; } }
/* before the module loads: first card only (build-help.mjs head script sets hs-pre) */
.hs-pre .hs:not(.js) .card + .card { display: none; }

.hs .top { padding: 8px 2px 0; }
.hs .top a { font-size: 16px; text-decoration: none; color: var(--green-text); }

/* progress (filled by JS) */
.hs .prog { display: flex; gap: 5px; padding: 14px 2px 0; }
.hs .prog:empty { display: none; }
.hs .prog i { flex: 1; height: 4px; border-radius: 2px; background: rgba(63, 64, 33, .16); overflow: hidden; }
.hs .prog i b { display: block; height: 100%; width: 0; background: var(--pine); transition: width .35s ease; }
.hs .prog i.done b { width: 100%; }

/* stage + cards. style.css has a desktop .stage rule for the home page: reset it here. */
.hs .stage { position: relative; inset: auto; width: auto; height: auto; opacity: 1; transition: none; overflow-x: clip; }
.hs .card { display: flex; flex-direction: column; padding: 18px 2px 8px; }
.hs .kick { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-text); }
.hs .card h1, .hs .card h2 { margin: 6px 0; font-size: 30px; font-weight: 600; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; color: var(--ink); text-align: left; }
.hs .card .big { font-size: 38px; }
.hs .card h1:focus, .hs .card h2:focus { outline: none; }
.hs .one { margin: 0; font-size: 18px; line-height: 1.4; color: #3d3d33; }
.hs .one b { color: var(--pine); }
.hs .vis { flex: 1; display: grid; place-items: center; gap: 18px; padding-top: 12px; }
/* Story pages drop the announce bar so the story gets the height; help-story.js sets --z so the
   whole drawn phone fits between the header and the Next button on any screen height. */
body:has(main.hs) .announce { display: none; }
.hs .vis > * { zoom: var(--z, 1); }

/* one card at a time */
.hs.js .card { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateX(24px); visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; }
.hs.js .card.on { position: relative; opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.hs.js .card.left { transform: translateX(-24px); }

/* no JS: everything in order, divided; the phone choice and nav need JS */
.hs:not(.js) .card + .card { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.hs:not(.js) .plat, .hs:not(.js) .meta, .hs:not(.js) .nav { display: none; }
.hs:not(.js) .one [data-only] { display: block; margin-top: 10px; }

/* start card */
.hs .plat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.hs .plat button { height: 64px; border-radius: 20px; border: 2px solid transparent; background: #fff; font: inherit; font-size: 18px; font-weight: 600; color: var(--pine); cursor: pointer; }
.hs .plat button[aria-pressed="true"] { border-color: var(--pine); background: #fbfaf6; }
.hs .plat button span { display: block; font-size: 12px; font-weight: 500; color: var(--mute); margin-top: 2px; }
.hs .meta { margin: 14px 0 0; font-size: 15px; color: var(--mute); }

/* "Did it work?" fixes */
.hs .fixes { display: grid; gap: 10px; margin-top: 20px; }
.hs .fixes a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px; border-radius: 20px; background: #fff; font-size: 18px; font-weight: 600; color: var(--pine); text-decoration: none; }
.hs .fixes a::after { content: "→"; color: var(--green); }
.hs .fixes a.else { display: block; padding: 6px; background: none; text-align: center; font-size: 16px; font-weight: 700; color: var(--green-text); text-decoration: underline; }
.hs .fixes a.else::after { content: none; }

/* nav: sticky inside main, so it rides the bottom of the screen while the story is in view and
   stops at the end of main instead of covering the site footer. */
.hs .nav { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 6px; padding: 16px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(242, 240, 234, 0), var(--bg) 30%); }
.hs .nav:empty { display: none; }
.hs .nav .row { display: flex; gap: 10px; }
.hs .nav button, .hs .nav a { height: 58px; border-radius: 30px; border: 0; font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; display: grid; place-items: center; text-decoration: none; }
.hs .nav .back { flex: 0 0 58px; background: #fff; color: var(--pine); }
.hs .nav .next { flex: 1; background: var(--pine); color: #fff; }
.hs .nav .stuck { align-self: center; height: auto; padding: 4px 10px; background: none; color: var(--green-text); font-size: 16px; }
.hs .nav button:focus-visible, .hs .nav a:focus-visible, .hs .plat button:focus-visible, .hs .fixes a:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; }


.hs .nav .stuck.ph { visibility: hidden; pointer-events: none; }

/* ---------- drawn phone + app screens ---------- */
.hs .dphone { width: 212px; height: 436px; border-radius: 36px; background: #1d1d16; padding: 9px; box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .5); position: relative; }
.hs .scr { width: 100%; height: 100%; border-radius: 28px; background: var(--app); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 50px 16px 18px; color: var(--text); }
.hs .scr::before { content: ""; position: absolute; top: 11px; left: 50%; width: 56px; height: 15px; margin-left: -28px; border-radius: 8px; background: #1d1d16; z-index: 3; }
.hs .scr h4 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.hs .scr p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--mute); }
.hs .scr .cta { margin-top: auto; width: 100%; min-height: 40px; padding: 4px 10px; border-radius: 20px; background: var(--pine); color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; position: relative; }
.hs .scr .cta + .cta { margin-top: 6px; }
.hs .scr .cta.light { background: transparent; color: var(--pine); min-height: 30px; }
.hs .scr .cta.outline { background: #fff; color: var(--pine); border: 1.5px solid var(--pine); }
.hs .scr.tabbed { padding-bottom: 56px; }
.hs .scr.dark { background: #2b2a24; color: #fff; padding-top: 40px; }
.hs .scr.dark p { color: #cfcbbf; }
.hs .scr .tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; border-top: 1px solid var(--line); display: flex; justify-content: space-around; align-items: center; font-size: 9px; color: var(--mute); background: #fff; }
.hs .scr .tabs i { font-style: normal; }
.hs .scr .tabs i.on { color: var(--pine); font-weight: 700; }
.hs .tapdot { position: absolute; width: 40px; height: 40px; left: 50%; top: 50%; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(201, 217, 143, .55); border: 2px solid var(--green); animation: hs-tap 1.4s ease-out infinite; pointer-events: none; z-index: 2; }
@keyframes hs-tap { 0% { transform: scale(.5); opacity: 1 } 70% { opacity: .9 } 100% { transform: scale(1.35); opacity: 0 } }
.hs .ring { width: 104px; height: 104px; border-radius: 50%; margin: 28px auto 0; display: grid; place-items: center; position: relative; flex: none; }
.hs .ring::before, .hs .ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--lime); animation: hs-pulse 2s ease-out infinite; }
.hs .ring::after { animation-delay: 1s; }
.hs .ring.still::before, .hs .ring.still::after { animation: none; opacity: 0; }
@keyframes hs-pulse { 0% { transform: scale(.6); opacity: 1 } 100% { transform: scale(1.3); opacity: 0 } }
.hs .puck { width: 60px; height: 60px; border-radius: 18px; background: #fbfaf6; border: 2px solid var(--pine); display: grid; place-items: center; font-weight: 800; font-size: 24px; color: var(--pine); flex: none; }
.hs .tick { width: 68px; height: 68px; border-radius: 50%; background: var(--pine); color: #fff; display: grid; place-items: center; margin: 34px auto 0; flex: none; animation: hs-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.hs .tick + h4 { margin-top: 18px; }
@keyframes hs-pop { from { transform: scale(.4); opacity: 0 } }
.hs .list { width: 100%; margin-top: 10px; background: #fff; border-radius: 14px; text-align: left; overflow: hidden; flex: none; }
.hs .list div { padding: 10px 12px; font-size: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; position: relative; color: var(--text); }
.hs .list div:first-child { border-top: 0; }
.hs .list div span { color: var(--mute); text-align: right; white-space: nowrap; } /* short values stay on one line */
.hs .list div span.wrap { white-space: normal; }
.hs .list div em { font-style: normal; }
.hs .list div em small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; color: var(--mute); }
.hs .list div.hi { background: #f3f5e8; font-weight: 700; color: var(--pine); }
.hs .list .sw { flex: none; width: 30px; height: 18px; border-radius: 9px; background: #d6d3c8; position: relative; }
.hs .list .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.hs .list .sw.on { background: var(--pine); }
.hs .list .sw.on::after { left: 14px; }
.hs .list .sw ~ .tapdot { left: auto; right: 7px; margin: -20px 0 0; } /* centred on the switch */
.hs .gap { flex: none; height: 14px; }
.hs .list + .gap { display: none; } /* a gap between rows starts a new list group; the lists' own margin is the space */
.hs .scr.left { padding-top: 44px; } /* `left`: title top-left, like a settings screen */
.hs .scr.left h4 { align-self: flex-start; text-align: left; }
.hs .scr.left > p { align-self: stretch; text-align: left; padding: 0 2px; }
.hs .dsheet { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2; background: #fff; border-radius: 22px; padding: 16px 14px 12px; box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .35); text-align: center; display: flex; flex-direction: column; color: var(--text); animation: hs-up .45s ease both; }
.hs .dsheet .cta:first-of-type { margin-top: 12px; }
@keyframes hs-up { from { transform: translateY(40px); opacity: 0 } }
.hs .dim { position: absolute; inset: 0; z-index: 1; background: rgba(29, 29, 22, .35); }
.hs .dpill { margin: 16px auto 0; padding: 8px 14px; border-radius: 20px; background: #fbeee9; color: var(--danger); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hs .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.hs .tiles div { position: relative; height: 52px; border-radius: 16px; background: #4a493f; color: #ddd; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 2px; overflow-wrap: break-word; }
.hs .tiles div.on { background: var(--lime); color: var(--ink); }
.hs .blocked { margin: auto 0; display: flex; flex-direction: column; align-items: center; }
.hs .blocked .lockico, .hs .blocked .puck { margin-bottom: 14px; }
.hs .lockico { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--pine); display: grid; place-items: center; }
.hs .blocked + .cta { margin-top: 0; }
.hs .notif { position: absolute; z-index: 3; top: 34px; left: 8px; right: 8px; padding: 9px 11px; border-radius: 14px; background: #fff; text-align: left; font-size: 11px; line-height: 1.3; color: var(--mute); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .4); animation: hs-down .45s ease both; }
.hs .notif b { display: block; color: var(--ink); font-size: 11.5px; }
@keyframes hs-down { from { transform: translateY(-20px); opacity: 0 } }
.hs .bubble { position: absolute; z-index: 2; right: 8px; top: 58%; width: 44px; height: 44px; border-radius: 50%; background: #fbfaf6; border: 2px solid var(--pine); display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--pine); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.hs .photo { width: 100%; height: auto; border-radius: 22px; }

/* phone-on-device scene. Resting pose = the end of the animation (reduced motion shows this). */
.hs .scene { position: relative; width: 260px; height: 340px; }
.hs .scene .dev { position: absolute; left: 70px; top: 150px; width: 120px; height: 120px; border-radius: 34px; background: #fbfaf6; border: 3px solid var(--pine); display: grid; place-items: center; font-weight: 800; font-size: 44px; color: var(--pine); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .4); }
.hs .scene .ph { position: absolute; left: 84px; top: 40px; width: 92px; height: 180px; border-radius: 20px; background: var(--pine); border: 5px solid #1d1d16; animation: hs-slide 3.2s ease-in-out infinite; }
.hs .scene .ph::after { content: ""; position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 7px; background: #2c2d17; border: 2px solid #6b6d3d; }
.hs .scene.ios .ph { top: -24px; transform: rotate(180deg); animation: hs-dip 3.2s ease-in-out infinite; }
.hs .scene.ios .ph::after { left: 50%; margin-left: -12px; width: 24px; height: 7px; border-radius: 4px; top: 8px; border: 0; }
@keyframes hs-slide { 0% { top: 150px; opacity: 0 } 12% { top: 140px; opacity: 1 } 30% { top: 140px } 80%, 100% { top: 40px } }
@keyframes hs-dip { 0%, 10% { top: -50px; transform: rotate(180deg); opacity: 0 } 25% { opacity: 1 } 60%, 100% { top: -24px; transform: rotate(180deg) } }
.hs .scene .glow { position: absolute; left: 60px; top: 140px; width: 140px; height: 140px; border-radius: 44px; border: 2px solid var(--lime); opacity: 0; animation: hs-glow 3.2s ease-out infinite; }
@keyframes hs-glow { 0%, 72% { opacity: 0; transform: scale(.9) } 85% { opacity: 1 } 100% { opacity: 0; transform: scale(1.15) } }
/* the scene is drawn upward from the device; keep its top clear of the text above */
.hs .vis > .scene, .hs .vis > [data-only] > .scene { margin-top: 40px; }

@media (prefers-reduced-motion: reduce) {
  .hs *, .hs *::before, .hs *::after { animation: none !important; transition: none !important; }
}

/* ---------- done card: related articles ---------- */
.hs .next-up { margin-top: 26px; display: grid; gap: 6px; }
.hs .next-up .kick { margin-bottom: 4px; }
.hs .next-up a { display: block; padding: 12px 4px; border-top: 1px solid var(--line); text-decoration: none; }
.hs .next-up b { display: block; font-size: 17px; font-weight: 600; color: var(--pine); }
.hs .next-up span { display: block; margin-top: 2px; font-size: 15px; color: var(--mute); }