/* /how-it-works/: the store owner's and the customer's screens on WooCommerce and Shopify.
   The screens are real: the Woo plugin captured in a WordPress install, the Shopify app rendered with Shopify's own
   Polaris components following the app's code, the email from the email renderer, and the activation screen
   snapshotted from the JUCE kit, all with sample data. How to redo them: site/README.md.
   The platform switch is two radios, so it works without JS; how-it-works.js adds #shopify / #woocommerce links and
   the full-size viewer (without JS each screen is a plain link to its image). */
/* ---- platform switch ---- */
.hw { position: relative; }
.hw-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hw-bar { position: sticky; top: 4.4rem; z-index: 30; display: flex; justify-content: center; padding: 0.5rem 0; pointer-events: none; }
.hw-bar-in { display: flex; align-items: center; gap: 0.8rem; width: auto; padding: 0.3rem 0.3rem 0.3rem 1.2rem; border: 1px solid var(--hair-strong); border-radius: 999px; background: rgba(14, 16, 21, 0.82); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9); pointer-events: auto; }
.hw-bar-lb { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.hw-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 0.25rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); }
.hw-switch::before { content: ""; position: absolute; inset: 0.25rem auto 0.25rem 0.25rem; width: calc(50% - 0.25rem); border-radius: 999px; background: var(--grad); box-shadow: 0 6px 22px -8px rgba(111, 168, 255, 0.6); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
#hw-shop:checked ~ .hw-bar .hw-switch::before { transform: translateX(100%); }
.hw-switch label { position: relative; z-index: 1; min-width: 8.2rem; padding: 0.6rem 1.1rem; border-radius: 999px; text-align: center; font: 600 0.9rem/1 var(--font); color: var(--text-3); cursor: pointer; transition: color 0.25s ease; }
.hw-switch label:hover { color: var(--text); }
#hw-woo:checked ~ .hw-bar label[for="hw-woo"], #hw-shop:checked ~ .hw-bar label[for="hw-shop"] { color: #0a0b10; }
#hw-woo:focus-visible ~ .hw-bar label[for="hw-woo"], #hw-shop:focus-visible ~ .hw-bar label[for="hw-shop"] { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
#hw-woo:checked ~ .hw-part [data-p="shop"], #hw-shop:checked ~ .hw-part [data-p="woo"] { display: none; }

/* ---- steps ---- */
.hw-part.section { padding-top: 5.5rem; }
.hw-step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3.5rem; align-items: center; }
.hw-step + .hw-step { margin-top: 5.5rem; }
.hw-step.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.hw-step.flip .hw-copy { order: 2; }
.hw-n { display: inline-block; font: 600 0.8rem/1 var(--mono); letter-spacing: 0.08em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hw-copy h3 { margin-top: 0.7rem; color: var(--text); font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.2; letter-spacing: -0.02em; }
.hw-copy p { margin-top: 0.9rem; max-width: 34rem; }
.hw-copy b { color: var(--text); font-weight: 600; }
.hw-shot { position: relative; }
.hw-shot::before { content: ""; position: absolute; inset: 12% 6% -4%; z-index: -1; border-radius: 40px; background: radial-gradient(60% 60% at 50% 50%, rgba(123, 108, 255, 0.22), rgba(79, 227, 200, 0.06) 60%, transparent 75%); filter: blur(30px); }
.hw-real { max-width: 44rem; margin-top: 1.1rem; color: var(--text-3); font-size: 0.92rem; }

/* ---- screens ---- */
.hw-shot { margin: 0; }
.hw-shot.hw-narrow { justify-self: center; width: 100%; max-width: 34rem; }
.hw-zoom { display: block; border-radius: 14px; cursor: zoom-in; }
.hw-zoom:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 4px; }
.hw-win { display: block; overflow: hidden; border: 1px solid var(--hair-strong); border-radius: 14px; background: #15171d; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.4); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease; }
.hw-zoom:hover .hw-win { transform: translateY(-3px); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hw-chrome { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; background: #15171d; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.hw-chrome i { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.hw-chrome span { flex: 1; min-width: 0; margin-left: 0.6rem; overflow: hidden; padding: 0.22rem 0.7rem; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--text-3); font: 500 0.68rem/1.3 var(--font); white-space: nowrap; text-overflow: ellipsis; }
.hw-win img { display: block; width: 100%; height: auto; }
.hw-shot figcaption { margin-top: 0.85rem; color: var(--text-3); font-size: 0.82rem; text-align: center; }
.hw-shot figcaption b { color: var(--text-2); font-weight: 600; }

/* ---- full-size viewer ---- */
.hw-lb { width: min(96vw, 112rem); max-width: none; max-height: 94vh; margin: auto; padding: 0; border: 1px solid var(--hair-strong); border-radius: 14px; background: #15171d; color: var(--text); overflow: auto; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.9); }
.hw-lb::backdrop { background: rgba(5, 6, 9, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hw-lb[open] { animation: hw-lb-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes hw-lb-in { from { opacity: 0; transform: scale(0.97); } }
.hw-lb img { display: block; width: 100%; height: auto; cursor: zoom-out; }
.hw-lb-x { position: sticky; top: 0.6rem; float: right; z-index: 1; width: 2.4rem; height: 2.4rem; margin: 0.6rem 0.6rem -3rem 0; border: 1px solid var(--hair-strong); border-radius: 999px; background: rgba(14, 16, 21, 0.85); color: var(--text); font: 400 1.4rem/1 var(--font); cursor: pointer; }
.hw-lb-x:hover { background: rgba(30, 33, 42, 0.95); }
.hw-lb-x:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* ---- layout ---- */
@media (max-width: 62rem) {
  .hw-step, .hw-step.flip { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hw-step.flip .hw-copy { order: 0; }
  .hw-step + .hw-step { margin-top: 4.5rem; }
  .hw-shot { max-width: 44rem; }
  .hw-shot.hw-narrow { justify-self: start; }
}
@media (max-width: 40rem) {
  .hw-bar-lb { display: none; }
  .hw-bar-in { padding-left: 0.3rem; }
  .hw-switch label { min-width: 0; padding-inline: 1rem; }
  .hw-win, .hw-zoom { border-radius: 10px; }
  /* On a phone a screen shrunk to fit is unreadable, so the viewer shows it at its real size and you pan. */
  .hw-lb { width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  .hw-lb img { width: var(--cw, 100%); max-width: none; }
  .hw-lb-x { position: fixed; top: 0.8rem; right: 0.8rem; float: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-switch::before, .hw-switch label, .hw-win { transition: none; }
  .hw-zoom:hover .hw-win { transform: none; }
  .hw-lb[open] { animation: none; }
}
@media print { .hw-bar, .hw-lb { display: none; } .hw-step { break-inside: avoid; } }