/*
 * How it works (/technology): the landing's film, slowed down and labelled.
 * Steps on the left, each beside its frame of the film (the pictures are the
 * landing's own planes, styled by /react/landing-film.css inside `.fm`), with
 * the parts named: an ink pin on the part and the same number in the legend.
 * Tokens only (marketing-tokens.css); no motion beyond the pins arriving once.
 */

.how { max-width: 1240px; margin: 0 auto; padding: 64px 40px 24px; box-sizing: border-box; }
.how-head { max-width: 740px; margin: 0 0 8px; }
.how-head .section-title { margin-bottom: 12px; }
.how-head .section-body { margin-bottom: 0; }

.how-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; }
.how-step {
  display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 56px; align-items: start;
  padding: 56px 0; border-top: 1px solid var(--ri-ink-100);
}
.how-step:first-child { border-top: 0; }

/* the words stay beside a tall picture while it scrolls past */
.how-words { position: sticky; top: 104px; }
.how-n { margin: 0 0 10px; font: 500 var(--ri-text-eyebrow)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ri-ink-600); }
.how-words h3 { margin: 0 0 14px; font: italic 400 var(--ri-text-display)/1.2 var(--font-display); color: var(--ri-ink-900); text-wrap: balance; }
.how-body { margin: 0 0 20px; font-size: var(--ri-text-body); line-height: 1.7; color: var(--ri-ink-700); }
.how-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.how-bullets li { position: relative; padding-left: 20px; font-size: var(--mk-text-phone); line-height: 1.6; color: var(--ri-ink-700); }
.how-bullets li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ri-ink-400); }
.how-bullets strong { color: var(--ri-ink-900); font-weight: 600; }

/* the picture: a frame of the film, on the stage's paper shade. The film draws its planes at fixed widths (the memo
   is 780 px), wider than this column at 1440 and wider than the page at 1200-1280, so a figure may not grow past its
   column: figure-play.js zooms the still to fit it, and without a script the frame clips rather than scroll the page. */
.how-figcol { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.how-fig { margin: 0; min-width: 0; max-width: 100%; padding: 28px; border-radius: 22px; background: var(--mk-paper-shade); box-sizing: border-box; overflow: clip; }
.how-stage { position: relative; }
.how-fig .still { position: relative; }
.how-fig .still .pl-phone { margin-bottom: 0; }
/* the phone is the one narrow picture: its legend sits beside it, the way the film writes a margin note */
@media (min-width: 1200px) {
  .how-figcol--beside { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 36px; }
}

/* a pin on the part a legend line names */
.how-pin {
  position: absolute; left: 0; top: 0; z-index: 3; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mk-pen); color: var(--ri-bg-card);
  font: 600 var(--ri-text-meta)/1 var(--font-body); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px var(--ri-bg-card), 0 6px 14px -6px color-mix(in oklab, var(--mk-night) 45%, transparent);
  visibility: hidden;
}
.how-pin[data-placed] { visibility: visible; }
/* the pin's leader to the part it names (figure-play.js): the pin sits beside the words, never on them */
.how-pin-lead { position: absolute; left: 0; top: 0; z-index: 2; height: 1px; background: var(--ri-ink-300); transform-origin: 0 50%; pointer-events: none; visibility: hidden; }
.how-pin-lead[data-placed] { visibility: visible; }

/* the legend: the parts, named in ink, the way the film writes its margin notes */
.how-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.how-parts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: baseline; font: italic 400 var(--ri-text-lead)/1.35 var(--font-display); color: var(--ri-ink-700); }
.how-pn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--mk-pen) inset; font: normal 600 var(--ri-text-eyebrow)/1 var(--font-body); color: var(--mk-pen); transform: translateY(-1px); }


/* You stay in charge: the dial beside what reaches your phone */
.how-charge { max-width: 1240px; margin: 0 auto; padding: 48px 40px 80px; box-sizing: border-box; }
.how-charge > .section-body { max-width: 740px; }
.how-charge .result-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.how-charge .result-item { padding: 20px 22px; border-radius: 16px; background: var(--ri-bg-card); box-shadow: var(--ri-raise-shadow); }
.how-charge .result-item strong { display: block; margin-bottom: 6px; font-size: var(--mk-text-phone); color: var(--ri-ink-900); }
.how-charge .result-item span { font-size: var(--ri-text-ui); line-height: 1.6; color: var(--ri-ink-600); }
.how-dial { margin: 32px 0 0; padding: 28px; border-radius: 22px; background: var(--mk-paper-shade); overflow: hidden; }
.how-dial .still { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.how-dial-cap { margin: 12px 0 0; font: italic 400 var(--ri-text-lead)/1.4 var(--font-display); color: var(--ri-ink-700); }

@media (max-width: 1199px) {
  .how-step { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .how-words { position: static; max-width: 640px; }
}
@media (max-width: 899px) {
  .how { padding: 40px 16px 8px; }
  /* At 390 the film cuts its phone to fit a pinned, 100vh stage and anchors the thread to its foot, so in a still the
     first message sat under the phone's own header. A still on a scrolling page has no such limit: the phone grows to
     the whole conversation. */
  .how-fig .dev { height: auto; }
  .how-fig .th { flex: none; }
  .how-fig .th-scroll[data-still] { position: relative; bottom: auto; }
  /* the film drops the board's rule at 390 to save a line; here the legend names it, so the picture keeps it, on a
     line of its own (the break is the row's own flex item, ordered between the checklist and the rule) */
  .how-fig .bd-rules::after { content: ''; flex-basis: 100%; height: 0; order: 1; }
  .how-fig .bd-rl--rule { display: inline; margin-left: 0; order: 2; }
  .how-fig .rchip--rule { display: inline-flex; order: 2; }
  .how-charge { padding: 32px 16px 56px; }
  .how-step { padding: 40px 0; }
  .how-words h3 { font-size: var(--ri-text-title); }
  /* a picture at 390 is the phone-width plane the film draws there: it takes the column's full width */
  .how-fig, .how-dial { padding: 0; border-radius: 0; background: none; width: 100%; overflow: visible; }
  .how-fig .still, .how-dial .still { justify-content: center; }
  .how-fig .still { display: flex; justify-content: center; }
  .how-parts li { font-size: var(--ri-text-body); }
  .how-charge .result-items { grid-template-columns: minmax(0, 1fr); }
}