/* ambient: the help page (/help). Load after /how-it-works.css, which draws the white page,
   the column, the steps, the field notes and the > access panel. This file adds only
   the two example asks and the list of clocks. */

/* ---- two example asks: a vague one (dashed) and a specific one (solid) ---- */
.product .asks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 24px}
.product .asks figure{margin:0;padding:20px 22px;border:1px solid var(--fg)}
.product .asks figure.vague{border-style:dashed;border-color:#9a9a9a}
.product .asks figcaption{margin:0 0 10px;font-size:12px;letter-spacing:.08em;line-height:1.4;font-weight:700;opacity:var(--dim)}
.product .asks blockquote{margin:0;font-size:16px;line-height:1.6}
.product .asks .vague blockquote{opacity:.7}

/* ---- clocks: what has to happen, and by when ------------------------------ */
.product ul.clocks{margin:8px 0 24px;border-top:1px solid var(--grid)}
.product ul.clocks li{display:grid;grid-template-columns:minmax(0,19ch) minmax(0,1fr);gap:0 24px;margin:0;padding:14px 0;text-indent:0;border-bottom:1px solid var(--grid)}
.product ul.clocks li::before{content:none}

@media (max-width:640px){
  .product .asks{grid-template-columns:1fr}
  .product ul.clocks li{grid-template-columns:1fr;gap:2px 0}
}