/* How it works page only. Shared components live in styles.css (see src/SYSTEM.md). Never redefine shared classes here. */

/* ---------- page head: title left, the one call to action right; the story starts in the first screen ---------- */
.hiw-head { padding-bottom: 40px; }
.hiw-head-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.hiw-head .lede { max-width: 30em; }
.hiw-head .page-head-actions { margin-top: 0; padding-bottom: 8px; }

/* ---------- the story: sticky step list beside one panel per step ---------- */
.hiw-story { position: relative; padding-bottom: 0; }
.hiw { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 56px; align-items: start; }

.hiw-nav { position: sticky; top: calc(var(--nav-h) + 44px); z-index: 2; }
.hiw-nav ol { position: relative; display: grid; gap: 2px; margin: 0; padding: 0 0 0 18px; list-style: none; }
.hiw-nav ol::before, .hiw-nav ol::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; border-radius: 2px; }
.hiw-nav ol::before { bottom: 0; background: rgba(255,255,255,.1); }
.hiw-nav ol::after { height: var(--th, 62px); background: var(--tx); transform: translateY(var(--ty, 0px)); transition: transform .55s var(--expo), height .55s var(--expo); }
.hiw-nav a { display: block; padding: 11px 14px; border-radius: 14px; transition: background-color .2s var(--ease); }
.hiw-nav a:hover { background: rgba(255,255,255,.045); }
.hiw-nav a b { display: block; font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--tx3); transition: color .3s var(--ease); }
.hiw-nav a span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--tx3); transition: color .3s var(--ease); }
.hiw-nav a:hover b, .hiw-nav a[aria-current] b { color: var(--tx); }
.hiw-nav a[aria-current] span { color: var(--tx2); }

.hiw-steps { display: grid; gap: 20px; min-width: 0; }

/* one step: a dark panel, copy on the left, an iPhone on the right that bleeds off an edge.
   The glow color comes from the panel's .glow-* class; :where() keeps this fallback weaker than those classes. */
:where(.step) { --glow: rgba(255,255,255,.06); }
.step {
  --pad: 56px; --gap: 48px;
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap);
  min-height: 600px; padding: var(--pad);
  border-radius: var(--r-tile); background: var(--s2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.03);
}
.step::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(56% 70% at 80% 78%, var(--glow) 0%, rgba(0,0,0,0) 100%); }
.step-flip::before { background: radial-gradient(56% 70% at 80% 22%, var(--glow) 0%, rgba(0,0,0,0) 100%); }
.step-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.step-copy h2 { max-width: 12em; font-size: clamp(34px, 3.4vw, 50px); line-height: 1; letter-spacing: -0.047em; font-weight: 600; text-wrap: balance; }
.step-copy p { margin-top: 18px; max-width: 27em; font-size: 19px; line-height: 1.5; color: var(--tx2); text-wrap: pretty; }
.step-copy p + p { margin-top: 10px; }

/* the phone runs off the panel's edge with a hard crop, like the chosen comp */
.step-stage { position: relative; margin: calc(var(--pad) * -1) calc(var(--gap) * -1); min-height: 0; }
.step-stage .iphone { --w: 290; position: absolute; left: calc(50% - var(--w) * .5px); top: calc(var(--pad) + 8px); }
.step-flip .step-stage .iphone { top: auto; bottom: 24px; }
/* mirrored panels put the phone on the left, so the six steps don't repeat one layout */
@media (min-width: 901px) {
  .step-mirror { grid-template-columns: 340px minmax(0, 1fr); }
  .step-mirror .step-stage { order: -1; }
  .step-mirror::before { background: radial-gradient(56% 70% at 20% 78%, var(--glow) 0%, rgba(0,0,0,0) 100%); }
  .step-mirror.step-flip::before { background: radial-gradient(56% 70% at 20% 22%, var(--glow) 0%, rgba(0,0,0,0) 100%); }
}

/* motion: the phone rises as its panel arrives */
.js .step .step-stage .iphone { transform: translateY(44px); }
.js .step.in .step-stage .iphone { transform: none; transition: transform 1.3s var(--out) .08s; }
.js .step.in:hover .step-stage .iphone { transform: translateY(-8px); transition: transform .8s var(--expo); }
.js .step-flip.in:hover .step-stage .iphone { transform: translateY(8px); }

/* Chat: copy on top, the locked phone then the unlocked one */
.step-chat { display: block; min-height: 0; padding-bottom: 64px; }
.step-chat::before { background: radial-gradient(56% 46% at 50% 72%, var(--glow) 0%, rgba(0,0,0,0) 100%); }
.chat-top { display: grid; grid-template-columns: minmax(0, 1fr); }
.chat-top .step-copy { display: block; }
.chat-phones { margin-top: 56px; display: flex; justify-content: center; align-items: flex-start; gap: 64px; }
.chat-col { display: flex; flex-direction: column; align-items: center; }
.chat-fig { margin: 0; display: flex; flex-direction: column; align-items: center; }
.chat-fig .iphone { --w: 320; }
.chat-cap { margin-top: 18px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--tx); }
.js .step-chat .chat-fig .iphone { transform: translateY(40px); }
.js .step-chat.in .chat-fig .iphone { transform: none; transition: transform 1.3s var(--out) .1s; }
.js .step-chat.in .chat-col + .chat-col .iphone { transition-delay: .22s; }

/* party chat screen parts (inside the phones) */
.hiw-chat .chat-head { grid-template-columns: 64px 1fr 64px; }
.chat-head-end { display: flex; justify-content: flex-end; }
.hc-none { font-size: 13px; color: rgba(255,255,255,.5); white-space: nowrap; }
.hiw-chat .chat-body > *, .hiw-chat .chat-pin { transition: filter .9s var(--ease), opacity .9s var(--ease); }
.hiw-chat.is-locked .chat-body > :not(.chat-stamp), .hiw-chat.is-locked .chat-pin { filter: blur(7px); opacity: .5; }
.chat-lock {
  position: absolute; z-index: 5; left: 26px; right: 26px; top: 318px; padding: 30px 24px 28px; border-radius: 30px; text-align: center;
  background: rgba(30,30,33,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  transition: opacity .5s var(--ease), transform .7s var(--out);
}
.chat-lock-ic { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); }
.chat-lock-ic svg { width: 26px; height: 26px; }
.chat-lock b { display: block; margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }
.chat-lock > span:last-child { display: block; margin-top: 8px; font-size: 16px; line-height: 1.4; color: rgba(255,255,255,.66); }
.hiw-chat:not(.is-locked) .chat-lock { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }
.chat-compose span { gap: 8px; }
.cc-lock { width: 15px; height: 15px; flex: none; }
.hiw-chat .msg-me .bubble { max-width: 240px; }
.msg-new { animation: hiw-msg .6s var(--bounce) both; }
@keyframes hiw-msg { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.bubble.typing { display: flex; gap: 5px; align-items: center; height: 36px; padding: 0 14px; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); animation: hiw-dot 1.2s var(--ease) infinite; }
.bubble.typing i:nth-child(2) { animation-delay: .15s; }
.bubble.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hiw-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* Door: two cases under the copy; the phone shows the door staff's scan result */
.door-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.door-case { padding: 20px 20px 22px; border-radius: 20px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.door-case h3 { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.step-copy .door-case p { margin-top: 6px; font-size: 15px; line-height: 1.5; }

/* ---------- closing ---------- */
.close-panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: center;
  padding: 72px 80px 72px 72px; border-radius: var(--r-tile); background: var(--s1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.04);
}
.close-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(48% 90% at 82% 50%, rgba(239,106,31,.2) 0%, rgba(0,0,0,0) 100%); }
.close-copy .h2 { max-width: 12em; }
.close-copy .lede { margin-top: 22px; max-width: 30em; }
.close-cta { margin-top: 36px; display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.close-art { position: relative; margin: 0; }
.close-halo { position: absolute; z-index: -1; inset: 6% -8% 4%; width: 116%; height: 90%; max-width: none; object-fit: cover; filter: blur(60px) saturate(1.5); opacity: .55; pointer-events: none; }
.close-flyer { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-panel); overflow: hidden; background: #111; box-shadow: var(--sh-art); transform: rotate(2deg); transition: transform .9s var(--expo); }
.close-flyer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); pointer-events: none; }
.close-flyer img { width: 100%; height: 100%; object-fit: cover; }
.close-panel:hover .close-flyer { transform: rotate(0deg) translateY(-4px); }
.close-art figcaption { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.close-art figcaption b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.close-art figcaption span span { display: block; font-size: 15px; color: var(--tx2); }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .hiw { grid-template-columns: 176px minmax(0, 1fr); gap: 36px; }
  .hiw-nav a { padding: 10px 12px; }
  .hiw-nav a span { font-size: 13.5px; white-space: nowrap; }
  .step { --pad: 40px; --gap: 32px; grid-template-columns: minmax(0, 1fr) 280px; min-height: 560px; }
  .step-mirror { grid-template-columns: 280px minmax(0, 1fr); }
  .step-stage .iphone { --w: 260; }
  .door-cases { grid-template-columns: 1fr; }
  .step-chat { padding-bottom: 48px; }
  .chat-phones { gap: 36px; }
  .chat-fig .iphone { --w: 260; }
  .close-panel { grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; padding: 56px; }
}

/* ---------- phones: the step list becomes a sticky bar of pills; every panel reads heading, copy, phone ---------- */
@media (max-width: 900px) {
  .hiw-head { padding-bottom: 28px; }
  .hiw-head-in { display: block; }
  .hiw-head .page-head-actions { margin-top: 24px; padding-bottom: 0; }
  .hiw { display: block; }
  .hiw-nav {
    position: sticky; top: var(--nav-h); z-index: 40;
    margin: 0 calc(var(--gut) * -1) 16px; padding: 8px 0;
    background: rgba(9, 8, 10, .82); border-bottom: 1px solid rgba(255,255,255,.06);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  }
  .hiw-nav ol { display: flex; justify-content: space-between; gap: 2px; padding: 0 var(--gut); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .hiw-nav ol::-webkit-scrollbar { display: none; }
  .hiw-nav ol::before, .hiw-nav ol::after { display: none; }
  .hiw-nav li { flex: none; }
  .hiw-nav a { padding: 9px 10px; border-radius: var(--r-pill); }
  /* the bar clips anything outside it, so the focus ring sits inside the pill */
  .hiw-nav a:focus-visible { outline-offset: -2px; }
  .hiw-nav a b { font-size: 15px; color: var(--tx2); }
  .hiw-nav a span { display: none; }
  .hiw-nav a[aria-current] { background: rgba(255,255,255,.13); }
  .step { scroll-margin-top: 66px; }

  .hiw-steps { gap: 12px; }
  .step { --side: 24px; display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 30px var(--side) 0; border-radius: var(--r-panel); }
  .step::before { background: radial-gradient(70% 40% at 50% 82%, var(--glow) 0%, rgba(0,0,0,0) 100%); }
  /* the Pay panel stops flipping here, so two cropped phones never face each other across a seam */
  .step-flip { padding: 30px var(--side) 0; }
  .step-flip::before { background: radial-gradient(70% 40% at 50% 82%, var(--glow) 0%, rgba(0,0,0,0) 100%); }
  .step-copy { gap: 26px; }
  .step-copy h2 { font-size: clamp(30px, 8.4vw, 38px); }
  .step-copy p { font-size: 17px; }
  .step-stage { height: 486px; margin: 30px calc(var(--side) * -1) 0; }
  .step-flip .step-stage { order: 0; margin: 30px calc(var(--side) * -1) 0; }
  .step-stage .iphone { --w: 252; top: 34px; }
  .step-flip .step-stage .iphone { top: 34px; bottom: auto; }

  .step-chat { display: block; padding: 30px 24px 36px; }
  .step-chat::before { background: radial-gradient(80% 50% at 50% 60%, var(--glow) 0%, rgba(0,0,0,0) 100%); }
  .chat-phones { margin-top: 36px; flex-direction: column; align-items: center; gap: 44px; }
  .chat-fig .iphone { --w: 252; }

  .door-cases { grid-template-columns: 1fr; }

  .close-panel { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 52px; padding: 40px 24px 32px; border-radius: var(--r-panel); }
  .close-panel::before { background: radial-gradient(90% 50% at 50% 26%, rgba(239,106,31,.2) 0%, rgba(0,0,0,0) 100%); }
  .close-art { width: min(260px, 78%); margin: 0 auto; }
  .close-cta { margin-top: 28px; }
}
@media (max-width: 600px) {
  .hiw-head .btn { width: 100%; }
  .step { --side: 20px; }
  .step-chat { padding: 28px 20px 32px; }
  .step-stage { height: 470px; }
  .step-stage .iphone { --w: 244; }
  .chat-fig .iphone { --w: 248; }
  .close-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .close-cta .btn { width: 100%; }
  .close-cta .link-arrow { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .js .step .step-stage .iphone, .js .step-chat .chat-fig .iphone { transform: none; }
  .bubble.typing i { animation: none; }
}