.fn-time { display: inline-flex; align-items: center; gap: .375rem; margin: 0; padding: .1875rem .6875rem .1875rem .5rem; border-radius: 999px; background: var(--raise); color: var(--text); font-size: .875rem; font-weight: 650; white-space: nowrap; }
.fn-time svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cab .fn-lead { margin: .875rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.cab .fn-lead b { color: var(--text); font-weight: 650; }
.cab .fn-alt { margin: 0 0 .75rem; color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.cab .fn-alt a { color: var(--text); font-weight: 600; }
.cab .fn-alt a:hover { color: var(--accent); }
.fn-phone { display: none; }

.bl-first .fn-task .nb-head { padding-top: 1.125rem; }
.cab .bl-first .fn-task .nb-head h1 { margin: 0; font-size: 1.625rem; font-stretch: 118%; font-weight: 750; letter-spacing: -.01em; }
.bl-first .fn-task .nb-scroll { padding: 0 1.125rem 1rem 1rem; }
.bl-first .bl-explain .nb-quote h2 { color: var(--muted); font-weight: 600; }
.fn-check { position: relative; display: grid; gap: 0; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.fn-check li { position: relative; display: grid; grid-template-columns: 1.625rem minmax(0, 1fr); column-gap: .875rem; padding: 0 0 1.125rem; }
.fn-check li::before { content: ""; position: relative; z-index: 1; grid-row: 1 / span 2; width: 1.375rem; height: 1.375rem; margin-top: .0625rem; border: 2px solid var(--line2); border-radius: 50%; background: var(--panel); }
.fn-check li:not(:last-child)::after { content: ""; position: absolute; left: .6875rem; top: 1.5rem; bottom: .0625rem; border-left: 2px dotted var(--line2); }
.fn-check li.now::before { border-color: var(--brass-line); background: radial-gradient(circle, var(--brass) 0 .3125rem, var(--panel) .34rem); }
.fn-check li.done::before { border-color: var(--up); background: var(--up); }
.fn-check li.done::after { border-left-style: solid; border-left-color: var(--up); }
.fn-check li.done > i { position: absolute; left: .4375rem; top: .3125rem; z-index: 2; width: .5rem; height: .75rem; border: solid var(--night); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.fn-check b { font-size: 1.0625rem; font-weight: 650; line-height: 1.4; }
.cab .fn-check span { color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.fn-check li.done b { color: var(--muted); font-weight: 600; }

.cab .fn-task button.primary.opening:disabled { background: var(--brass); border: 1px solid var(--brass); color: var(--brass-ink); }
.fn-spin { display: inline-block; flex: none; width: 1rem; height: 1rem; margin-right: .5rem; vertical-align: -.125rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: .75; animation: fn-turn .8s linear infinite; }
@keyframes fn-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fn-spin { animation: none; } }

@media (max-width: 600px) {
  .fn-desk { display: none !important; }
  .fn-phone { display: block; }
  .bl-first .fn-task .nb-head { padding: .75rem 1rem 0; }
  .cab .bl-first .fn-task .nb-head h1 { font-size: 1.75rem; }
  .fn-inner { order: 3; margin: 0 1rem; }
  .fn-inner > .fn-time { margin-top: .5rem; }
  .fn-check { margin-top: 1rem; }
  .cab .fn-alt.fn-phone { margin: .25rem 0 0; }
  .bl.bl-first > .bl-explain { margin-top: 1.5rem; }
}