@media (max-width: 1100px) {
  .detail-c { grid-template-columns: minmax(0, 1fr); }
  .detail-c-figure { justify-self: center; }
}

@media (max-width: 960px) {
  .hero h1 { max-width: 15ch; }
  .drawing { --up: 30px; --gap: 10px; --down: 0px; padding-top: calc(var(--up) + var(--gap)); padding-bottom: 0; }
  .drawing { --track-h: 88px; }
  .callouts { display: block; }
  .balloon {
    position: absolute;
    left: calc(var(--s) / 600 * 100%);
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border: 1px solid var(--pencil);
    border-radius: 50%;
    background: var(--film);
    font: 500 0.75rem/1 var(--lettering);
    color: var(--pencil-text);
  }
  .balloon.up { top: calc(-1 * var(--up) - var(--gap)); }
  .balloon.up::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    height: calc(var(--up) + var(--gap) - 20px + var(--track-h) * 0.3);
    border-left: 1px solid var(--pencil);
  }
  .balloon.down { top: calc(var(--track-h) + var(--scale-h) + 6px); }
  .balloon.down::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    height: calc(var(--scale-h) + 6px + var(--track-h) * 0.3);
    border-left: 1px solid var(--pencil);
  }
  .drawing .ribbon { margin-bottom: 30px; }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "approve" "draw" "foot";
  }
  .titleblock { justify-self: start; max-width: 640px; }
  .ribbon .blk.ask::after { top: 5px; }
  .notes-list {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
  }
  .notes-list li,
  .notes-list li.up,
  .notes-list li.down,
  .notes-list li.end {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    height: auto;
    display: block;
    padding: 0;
    text-align: left;
  }
  .notes-list li.end b { justify-content: flex-start; }
  .notes-list li::after, .notes-list li::before,
  .notes-list li.up::before, .notes-list li.down::before { display: none; }
  .sample { position: static; width: auto; max-width: none; text-align: left; margin-top: 16px; }
  .details { grid-template-columns: minmax(0, 1fr); }
  .detail-a { border-right: 0; border-bottom: 1px solid var(--ink); }
  .detail-d { grid-template-columns: minmax(0, 1fr); }
  .detail-d .export { grid-column: 1; grid-row: auto; margin-top: 22px; }
  .privacy-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  :root { --band: 0px; --pad: 16px; }
  .sheet { margin: 0; border: 0; padding: 0; }
  .sheet::before, .zones, main > section::before, main > section::after { display: none; }
  .masthead { padding: 14px var(--pad); }
  .nav a:not(.nav-cta) { display: none; }
  .nav .nav-cta { padding: 8px 12px; font-size: 0.875rem; }
  .hero h1 { font-size: clamp(2.375rem, 9.6vw, 3rem); }
  .drawing { --track-h: 72px; }
  .hours span:nth-child(even) { visibility: hidden; }
  .hours::after { content: "8 h 28 m recorded"; }
  .notes-list { grid-template-columns: minmax(0, 1fr); }
  .detail { padding: 22px 16px; }
  .details { border-inline: 0; margin-inline: calc(-1 * var(--pad)); }
  .detail-c-figure { width: 100%; max-width: 392px; }
  .panel, .notif { width: 100%; }
  .notif { margin-inline: 0; }
  .schedule div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .parts-list thead { display: none; }
  .parts-list, .parts-list tbody, .parts-list tr, .parts-list th, .parts-list td { display: block; width: auto !important; }
  .parts-list tr { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); border-bottom: 1px solid var(--ink); }
  .parts-list tr:last-child { border-bottom: 0; }
  .parts-list th, .parts-list td { border: 0; padding: 12px 14px 4px 0; }
  .parts-list tbody td:first-child { grid-row: 1 / span 2; padding: 14px 0 0; }
  .parts-list tbody td:last-child { grid-column: 2; padding-top: 0; padding-bottom: 14px; }
  .revisions thead { display: none; }
  .revisions, .revisions tbody, .revisions tr, .revisions th, .revisions td { display: block; width: auto !important; }
  .revisions tr { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; border-bottom: 1px solid var(--ink); }
  .revisions tr:last-child { border-bottom: 0; }
  .revisions th, .revisions td { border: 0 !important; padding: 12px 12px 4px 0; }
  .revisions tbody td:first-child { grid-row: 1 / span 2; padding-left: 0; padding-top: 14px; }
  .revisions tbody td:nth-child(3) { grid-column: 2 / -1; padding-top: 0; padding-bottom: 14px; }
  .revisions tbody td:last-child { grid-column: 3; grid-row: 1; background: none !important; }
  .foot { flex-direction: column; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock > .tb-cell, .titleblock > .tb-cell:nth-child(n) { grid-column: auto; grid-row: auto; border-right: 0; border-bottom: 1px solid var(--ink); }
  .tb-title, .tb-desc, .tb-status { grid-column: 1 / -1 !important; }
  .titleblock > .tb-cell:nth-child(3) { border-right: 1px solid var(--ink); }
  .titleblock > .tb-cell:nth-child(5) { grid-column: 1 / -1 !important; }
  .tb-cta { grid-column: 1 / -1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blk.sure::before {
    clip-path: none;
    opacity: 0;
    transition: opacity 0.15s linear;
    transition-delay: 0s;
  }
  .is-approved .blk.sure::before { opacity: 1; }
}

@media (prefers-contrast: more) {
  :root { --pencil: var(--pencil-text); --ink-2: var(--ink); }
  .blk { border-width: 2.5px; }
  .is-approved .blk.sure::before { box-shadow: 0 0 0 1.5px var(--ink); }
}