/* fourteenerwebsites.com, part 2: how it works, the close, footer, the phone pill, motion. */
.how { padding: clamp(96px, 14vw, 180px) var(--edge); }
.how h2 { font: 850 clamp(40px, 6vw, 88px)/0.86 'Overpass', sans-serif; letter-spacing: -0.04em; text-transform: uppercase; }
.steps { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px clamp(24px, 3vw, 48px); }
.steps li { display: grid; gap: 10px; align-content: start; }
.steps h3 { font: 750 32px/1.1 'Overpass', sans-serif; letter-spacing: -0.015em; }
.steps p { max-width: 34ch; }
.who-line { margin-top: clamp(56px, 7vw, 96px); max-width: 46ch; font-size: 22px; line-height: 1.45; }
.who-line a { text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--sign); }

.close { padding: clamp(96px, 13vw, 170px) var(--edge); text-align: center; background: var(--granite); color: var(--snow); }
.close h2 { font: 850 clamp(48px, 9vw, 136px)/0.82 'Overpass', sans-serif; letter-spacing: -0.04em; text-transform: uppercase; }
.close p { margin: 26px auto 34px; max-width: 36ch; color: var(--lichen); font-size: 22px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 28px var(--edge) 40px; background: var(--granite); color: var(--lichen); font-size: 16px; }

/* Phones: the email sign floats above the safe area so the one action never hides. */
.dock { display: none; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; max-width: 40rem; } }
@media (max-width: 700px) {
  .where .clock { display: none; }
  .hero { min-height: auto; padding-bottom: 48px; }
  .hero-main { grid-template-columns: 1fr; align-self: start; margin-top: 28svh; gap: 36px; } /* the open band above is where the gear floats */
  .statement { font-size: 11.6vw; line-height: 0.88; }
  .bar-low { display: none; }
  .band { grid-template-columns: 1fr; min-height: auto; gap: 28px; padding: 72px 20px 80px; }
  .band:nth-child(even) { grid-template-columns: 1fr; }
  .band:nth-child(even) .band-copy { order: 0; }
  .screen { justify-self: center; width: min(78vw, 340px); border-radius: 26px; padding: 6px; }
  .screen .film { border-radius: 20px; }
  .screen-bar { display: none; }
  .film { aspect-ratio: 9 / 16; }
  .name { font-size: min(10.6vw, calc((100vw - 48px) / (var(--chars, 12) * 0.62))); overflow-wrap: normal; white-space: nowrap; }
  .steps { grid-template-columns: 1fr; gap: 72px; }
  .how h2 { margin-bottom: 24px; }
  /* iOS 26 tints its toolbar from the fixed dock (even through a transparent wrapper), so the dock is hidden outright while the
     sign steps aside: the toolbar is snow in the hero and close, and sign brown while the sign shows (on brand). */
  .dock { display: block; position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 20; background: transparent; }
  .pill {
    display: flex; width: 100%; justify-content: center; min-height: 56px; border-radius: 10px;
    transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out), background-color var(--t-hover) ease, visibility 0s;
  }
  /* The sign steps aside while a heading passes behind it, then comes back. Hidden for real once it has faded. */
  .dock { transition: visibility 0s; }
  .dock.is-away { visibility: hidden; transition: visibility 0s linear var(--t-ui); }
  .dock.is-away .pill { opacity: 0; visibility: hidden;
    transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui); }
  body { padding-bottom: 92px; }
  @media (prefers-reduced-motion: no-preference) { .dock.is-away .pill { transform: translateY(16px); } }
  .close .sign { font-size: 16px; padding: 0 18px; }
}

/* Motion: masked line rise on load (CSS only, nothing stays hidden), loops brighten and settle as bands arrive. */
@media (prefers-reduced-motion: no-preference) {
  .statement .mask > span { animation: rise var(--t-reveal) var(--ease-expo) both; }
  .statement .mask:nth-child(2) > span { animation-delay: 110ms; }
  .sub, .bar-low { animation: fade var(--t-reveal) var(--ease-out) both; animation-delay: 330ms; }
  @supports (animation-timeline: view()) {
    .screen { animation: arrive linear both; animation-timeline: --band; animation-range: entry 0% cover 40%; }
  }
}
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes arrive { from { opacity: 0.4; transform: translateY(48px) scale(0.96); } to { opacity: 1; transform: none; } }