/* How it works page. Tokens and kit classes only.
   1. connection.html is placed with its ids suffixed (instance 5), because systems.html on the same page keeps id="access".
      systems.css positions connection's access record by that id; these lines repeat those position rules, in the
      same order and media conditions, for the suffixed id. Positions only. */
.sy-scene--connection #access-5 { z-index: 7; }
.sy-scene--connection #access-5 { left: 286px; top: 516px; width: 548px; height: 600px; }
@media (max-width: 899px) { .sy-scene--connection #access-5 { left: 16px; top: 488px; width: 326px; height: 600px; } }
@media (min-width: 900px) { .sy-scene--connection #access-5 { left: 200px; } }

/* 2. The handover pack's closed cover as the margin figure of "At handover you hold what it takes to run it". */
.site-pack-doc { position: relative; padding: 8px 0 0 24px; }
.site-pack { position: relative; width: 240px; height: 300px; }

/* 3. The nine-part register is a frame stage that carries its own f-wrap; under a section it takes that width once. */
.site-wide > .f-register-stage.f-wrap { width: 100%; }

/* 4. Pictures placed one after another under one section: each starts 64 px (40 px on a phone) below the one before,
      or below its fiction line, the spacing site.css gives a picture under a section's text. */
.site-wide > :is(.k-fiction, .f-register-stage) + :is(.aw-scene, .sy-scene) { margin-top: 64px; }
@media (max-width: 767px) { .site-wide > :is(.k-fiction, .f-register-stage) + :is(.aw-scene, .sy-scene) { margin-top: 40px; } }

/* 5. The sub-heading "We integrate with your tools." stands apart from the paragraph above it. */
.f-body > .site-subhead + p { margin-top: 8px; }

/* 6. At 1440 the pack cover's fiction line (y 15087) repeats the trace scene's (y 14525) within one screen; it is kept on
      the phone, where the two are more than a screen apart (y 26276 and y 27541 at 390). Review 1, 13 November. */
@media (min-width: 768px) {
  [aria-labelledby="s-at-handover-you-hold-what-it-takes-to-run-it"] .f-margin .k-fiction { display: none; }
}

/* TYPESET-SPEC 2.7. */
h3.site-subhead { font-family: var(--p-font-family-working); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--color-text-primary); }

/* See-and-fix finish1: give phone text clearance from the existing tenancy bracket.
   The bracket, section columns, icons and picture boxes keep their own positions. */
@media (max-width: 767px) {
  .site-page-how-it-works .technical-inside > .technical-label,
  .site-page-how-it-works .technical-inside > .f-section > .f-hanging:not(.site-icon-head) > h2,
  .site-page-how-it-works .technical-inside > .f-section > .f-body > :is(p, h3),
  .site-page-how-it-works .technical-inside > .f-section > .f-body > .f-list-rows > li { padding-left: 16px; }
}