/* The Hours Check, round 16 (September 28, 2026). Loaded last on hours.html.
   Opening: a diptych. The Ink half holds the headline and the first question; the photo holds the
   other half at full height. Picking a team size starts the check with that answer carried in.
   What you get: the Hour Snapshot shown as the document it is, modeled live from example answers.
   The check: an Ink rail that tracks all ten screens beside the question, the result on the same frame. */

.hours-main { padding-block: 0; }
.check-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.check-textlink {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 650; color: var(--ah-link);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em;
}
.ah-dark .check-textlink { color: var(--ah-emerald); }
.check-nowrap { white-space: nowrap; }

/* The nine-square mark: the photo's box, one compartment freed. */
.hours-grid { display: inline-grid; grid-template-columns: repeat(3, .5rem); gap: .2rem; flex: none; }
.hours-grid i { display: block; width: .5rem; height: .5rem; background: var(--v2-bone-soft); opacity: .4; }
.hours-grid i:nth-child(3) { background: var(--ah-emerald); opacity: 1; }

/* ---------- Opening ---------- */
.check-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(50%, 64rem));
  min-height: clamp(38rem, calc(100svh - 4.25rem), 62rem);
  background: var(--ah-ink);
}
.check-hero__panel {
  display: flex; align-items: center;
  padding: clamp(2.5rem, 7vh, 5rem) clamp(2rem, 4vw, 4rem) clamp(2.5rem, 7vh, 5rem) var(--v2-bleed);
}
.check-hero__inner { width: 100%; max-width: clamp(38rem, 29vw, 46rem); container-type: inline-size; }
.check-hero__label { gap: .9rem; color: var(--ah-emerald); }
.check-hero__title {
  margin-top: 1.1rem; font-size: clamp(2.5rem, 11.5cqi, 5.25rem);
  line-height: .98; letter-spacing: -.05em; text-wrap: balance;
}
.check-hero__title > span { display: block; }
.check-hero__title .w-light { color: var(--v2-bone-soft); letter-spacing: -.04em; }
.check-hero__lede {
  margin-top: 1.25rem; max-width: 34rem;
  font-size: var(--v2-t-lede); line-height: 1.5; letter-spacing: -.012em; color: var(--v2-bone-soft);
}
.check-start {
  margin-top: clamp(1.75rem, 4.5vh, 2.75rem); padding-top: 1.4rem;
  border-top: 1px solid var(--v2-ink-line); container-type: inline-size;
}
.check-start__step { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-emerald); }
.check-start__question {
  margin-top: .5rem; max-width: 34rem;
  font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); font-weight: 600; line-height: 1.35; letter-spacing: -.015em;
}
.check-start__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
@container (min-width: 29rem) { .check-start__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 35rem) { .check-start__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.check-chip {
  display: flex; align-items: center; justify-content: flex-start; min-height: 3rem; padding: .7rem .8rem;
  border: 1px solid rgb(243 236 227 / .22); border-radius: var(--ah-radius-control);
  background: rgb(243 236 227 / .04); color: var(--ah-bone); cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 650; line-height: 1.2; white-space: nowrap; text-align: left;
  transition: background-color 160ms var(--v2-ease), border-color 160ms var(--v2-ease), color 160ms var(--v2-ease), transform 120ms var(--v2-ease);
}
.check-chip:active { transform: scale(.97); }
.check-chip[aria-pressed="true"] { background: var(--ah-bone); border-color: var(--ah-bone); color: var(--ah-ink); }
.check-chip:focus-visible { outline: 3px solid var(--ah-emerald); outline-offset: 3px; }
.check-chip:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .check-chip:not([aria-pressed="true"]):hover { border-color: var(--ah-emerald); background: rgb(0 168 120 / .12); }
}
.check-hero__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-top: .9rem; }
.check-hero__more p { font-size: .9375rem; color: var(--v2-bone-soft); }
.check-hero .preview-disclosure { margin: .35rem 0 0; max-width: 34rem; font-size: .8125rem; line-height: 1.6; color: #8f928b; }
.check-hero__art { position: relative; margin: 0; overflow: hidden; background: var(--v2-sand); }
.check-hero__art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%;
}

/* ---------- What you get: the Hour Snapshot as a document ---------- */
.check-snapshot { padding-block: var(--v2-section); background: var(--ah-bone); }
.check-snapshot__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem); row-gap: 3rem; align-items: center;
}
.check-snapshot__head { grid-column: 1 / span 5; }
.check-snapshot__head .v2-label { color: var(--ah-link); }
.check-snapshot__head .h2 { margin-top: 1.25rem; max-width: 9ch; }
.check-snapshot__lede { margin-top: 1.25rem; max-width: 26rem; font-size: 1.125rem; line-height: 1.6; color: var(--v2-text-soft); }
.check-snapshot__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.check-snapshot__alt { font-size: .9375rem; color: var(--ah-muted); }
.check-snapshot__alt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ah-link); font-weight: 700; text-underline-offset: .28em; }

.snap-sheet {
  grid-column: 7 / -1; margin: 0; position: relative; container-type: inline-size;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--ah-radius-media);
  box-shadow: var(--v2-edge), 0 56px 96px -56px rgb(11 13 14 / .8), 0 18px 36px -24px rgb(46 32 16 / .35);
}
.snap-sheet__top { display: flex; align-items: center; gap: .7rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--v2-ink-line); }
.snap-sheet__top img { display: block; width: auto; height: 1.6rem; margin: -.3rem; }
.snap-sheet__name { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.snap-sheet__who { margin-left: auto; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-bone-soft); text-align: right; }
.snap-sheet__parts { list-style: none; }
.snap-part {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem;
  padding-block: 1.5rem; border-bottom: 1px solid var(--v2-ink-line);
}
.snap-part__num { font-size: 1.5rem; font-weight: 300; line-height: 1.05; letter-spacing: -.04em; color: var(--ah-emerald); }
.snap-part h3 { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; color: var(--v2-bone-soft); }
.snap-part__value {
  margin-top: .4rem; font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.125rem); font-weight: 650;
  line-height: 1.12; letter-spacing: -.035em; color: var(--ah-bone);
}
.snap-part__unit { font-weight: 300; color: var(--v2-bone-soft); letter-spacing: -.02em; }
.snap-part__note { margin-top: .6rem; max-width: 34rem; font-size: .9375rem; line-height: 1.6; color: var(--v2-bone-soft); }
.snap-sheet__caption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.25rem;
  padding-top: .9rem; font-size: .8125rem; line-height: 1.5; color: #8f928b;
}
.snap-sheet__caption .check-textlink { font-size: .9375rem; }
@container (max-width: 24rem) {
  .snap-sheet__top { flex-wrap: wrap; row-gap: .35rem; }
  .snap-sheet__who { flex-basis: 100%; margin-left: 0; text-align: left; }
  .snap-part { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
}

/* The five-stage path: past stages filled, the current one Emerald, the rest still ahead. */
.stage-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; margin-top: 1rem; container-type: inline-size; }
.stage-track span {
  position: relative; padding-top: .8rem; min-width: 0;
  font-size: .6875rem; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: rgb(243 236 227 / .42);
}
.stage-track span::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .3rem; background: rgb(243 236 227 / .16); }
.stage-track .is-past::before { background: var(--v2-bone-soft); }
.stage-track .is-current { color: var(--ah-bone); font-weight: 700; }
.stage-track .is-current::before { background: var(--ah-emerald); }
/* Too narrow for five names (phones): the bars alone show the position; the stage is named above. */
@container (max-width: 27rem) { .stage-track span { font-size: 0; padding-top: .3rem; } }
.stage-track--light span { color: var(--ah-muted); }
.stage-track--light span::before { background: var(--ah-border); }
.stage-track--light .is-past::before { background: var(--ah-ink); }
.stage-track--light .is-current { color: var(--ah-ink); }
.stage-track--light .is-current::before { background: var(--ah-emerald); }

/* ---------- The check: Ink rail beside the question ---------- */
#hours-app { background: var(--ah-bone); }
.check {
  display: grid; grid-template-columns: minmax(15.5rem, 20.5rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem); align-items: start;
  padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(3.5rem, 6vw, 6rem);
}
.check__rail {
  position: sticky; top: 5.5rem; max-height: calc(100svh - 6.75rem); overflow-y: auto; scrollbar-width: thin;
  padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--ah-radius-card);
  box-shadow: var(--v2-edge), 0 40px 80px -48px rgb(11 13 14 / .65);
}
.check__label { display: flex; align-items: center; gap: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-emerald); }
.check__steps { list-style: none; display: grid; margin-top: 1.1rem; }
.check__row {
  display: grid; grid-template-columns: .75rem 1.5rem minmax(0, 1fr); align-items: center; gap: .55rem;
  width: calc(100% + 1rem); min-height: 2.25rem; margin-inline: -.5rem; padding: .2rem .5rem;
  border: 0; border-radius: 6px; background: none; color: rgb(243 236 227 / .5);
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.25; text-align: left;
}
button.check__row { cursor: pointer; }
.check__sq { justify-self: center; width: .6rem; height: .6rem; box-shadow: inset 0 0 0 1px rgb(243 236 227 / .4); }
.check__num { font-size: .75rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: rgb(243 236 227 / .4); }
.is-done .check__row, .is-visited .check__row { color: rgb(243 236 227 / .82); }
.is-done .check__sq, .is-visited .check__sq { background: var(--v2-bone-soft); box-shadow: none; }
.is-current .check__row { color: var(--ah-bone); font-weight: 750; }
.is-current .check__num { color: var(--ah-emerald); }
/* The current step wears the colon: the mark's two Emerald squares. */
.is-current .check__sq {
  width: .34rem; height: 1.1rem; box-shadow: none;
  background: linear-gradient(var(--ah-emerald) 0 .34rem, transparent .34rem calc(100% - .34rem), var(--ah-emerald) calc(100% - .34rem));
}
.check__snap .check__sq { box-shadow: inset 0 0 0 1px var(--ah-emerald); }
.check__snap.is-current .check__sq { box-shadow: none; }
.check__snap.is-done .check__sq { background: var(--ah-emerald); box-shadow: none; }
.check__snap .check__row { margin-top: .35rem; }
@media (hover: hover) and (pointer: fine) { button.check__row:hover { background: rgb(243 236 227 / .07); color: var(--ah-bone); } }
button.check__row:focus-visible { outline: 3px solid var(--ah-emerald); outline-offset: 0; }
.check__why { margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid var(--v2-ink-line); }
.check__why-label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-emerald); }
.check__why-label + p { margin-top: .45rem; font-size: .9375rem; line-height: 1.55; color: var(--v2-bone-soft); }

.check__main { min-width: 0; max-width: 50rem; }
.check__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 1.5rem; }
.check__count { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-link); }
.check__meter { display: none; gap: 3px; }
.check__meter i { display: block; width: .5rem; height: .5rem; background: var(--ah-border); }
.check__meter i.is-done { background: var(--ah-ink); }
.check__meter i.is-current { background: var(--ah-emerald); }
.check__meter i.is-snap { background: transparent; box-shadow: inset 0 0 0 1px var(--ah-link); }
.check__meter i.is-snap.is-current, .check__meter i.is-snap.is-done { background: var(--ah-emerald); box-shadow: none; }
#hours-app h1 {
  margin: .7rem 0 clamp(1.5rem, 3vw, 2.25rem); overflow-wrap: anywhere;
  font-size: clamp(2.25rem, 1.2rem + 2.7vw, 3.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -.045em;
}
#hours-app h1 .w-light { font-weight: 300; letter-spacing: -.04em; }
#hours-app [tabindex="-1"]:focus { outline: none; }

#hours-app fieldset { border: 0; min-width: 0; padding: 0; margin: 0 0 2.25rem; }
#hours-app legend, #hours-app fieldset > label {
  display: block; padding: 0; margin-bottom: .9rem; max-width: 46ch;
  font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); font-weight: 600; line-height: 1.35; letter-spacing: -.015em;
}
.field-hint { margin: -.35rem 0 1.1rem; max-width: 62ch; font-size: .9375rem; line-height: 1.55; color: var(--ah-muted); }
.answer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.answer-option {
  display: flex; align-items: flex-start; gap: .85rem; min-height: 3.5rem; padding: 1rem 1.1rem;
  border: 1px solid var(--ah-border); border-radius: var(--ah-radius-control); background: var(--ah-surface);
  font-size: 1rem; line-height: 1.45; cursor: pointer;
  transition: background-color 160ms var(--v2-ease), border-color 160ms var(--v2-ease), color 160ms var(--v2-ease);
}
.answer-option input {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center;
  width: 1.125rem; height: 1.125rem; margin: .14rem 0 0; border: 1.5px solid var(--ah-control-border); border-radius: 3px;
  background: transparent; cursor: pointer;
}
.answer-option input::before {
  content: ""; width: .5rem; height: .5rem; background: var(--ah-emerald);
  transform: scale(0); transition: transform 180ms var(--v2-ease);
}
.answer-option input:checked::before { transform: scale(1); }
.answer-option input[type="checkbox"]::before {
  width: .62rem; height: .34rem; background: none;
  border-left: 2px solid var(--ah-emerald); border-bottom: 2px solid var(--ah-emerald);
  transform: translateY(-1px) rotate(-45deg) scale(0);
}
.answer-option input[type="checkbox"]:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
/* Where order matters (your biggest time sinks), the box shows 1 or 2. */
.answer-option input[type="checkbox"][data-order] { background: var(--ah-emerald); border-color: var(--ah-emerald); }
.answer-option input[type="checkbox"][data-order]::before, .answer-option input[type="checkbox"][data-order]:checked::before {
  content: attr(data-order); width: auto; height: auto; border: 0; transform: none;
  font-size: .75rem; font-weight: 800; line-height: 1; color: var(--ah-ink);
}
.answer-option:has(input:checked) { background: var(--ah-ink); border-color: var(--ah-ink); color: var(--ah-bone); }
.answer-option:has(input:checked) input { border-color: var(--ah-emerald); }
.answer-option:has(input:focus-visible) { outline: 3px solid var(--ah-focus); outline-offset: 3px; }
.answer-option input:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) { .answer-option:not(:has(input:checked)):hover { border-color: var(--ah-ink); } }
.exact-number { max-width: 17.5rem; min-height: 3.25rem; }
.field-error { margin-top: .75rem; font-size: .9375rem; line-height: 1.45; color: var(--ah-error); }
.priority-preview { margin-top: .9rem; font-size: .875rem; color: var(--ah-link); }

.check__why-inline { display: none; }
.survey-actions {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ah-border);
}
.survey-actions .ah-action { min-height: 3.25rem; padding-inline: 1.25rem; }
.survey-actions .ah-action-primary { padding-inline: 1.5rem; }

/* Contact step */
.survey-lede { margin: -.75rem 0 2rem; max-width: 56ch; color: var(--ah-muted); }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
#contact-form .contact-field { display: grid; align-content: start; gap: .5rem; }
#contact-form .contact-field label { margin: 0; font-size: .9375rem; font-weight: 650; }
#contact-form input, #contact-form select { width: 100%; min-height: 3.25rem; }
#contact-form input::placeholder { color: #8c8f88; }
#contact-form .contact-role { max-width: 25rem; margin-bottom: 1.5rem; }
#contact-form .field-error { margin: 0; font-size: .9375rem; line-height: 1.4; }
#contact-form .consent-note { margin: 0 0 1rem; max-width: 64ch; font-size: .875rem; line-height: 1.6; color: var(--ah-muted); }
#contact-form .consent-note a { color: var(--ah-link); }
#hours-app .preview-disclosure { margin-block: 1rem; max-width: 65ch; font-size: .875rem; line-height: 1.6; color: var(--ah-muted); }

/* Result: the same 01, 02, 03 as the document on the opening. */
.result-heading p:not(.check__count) { margin-top: -1rem; color: var(--ah-muted); }
.result-block { padding-block: 1.75rem 2rem; border-top: 1px solid var(--ah-border); }
.result-block .result-block__label, .first-workflow .result-block__label {
  display: flex; align-items: baseline; gap: .7rem; margin: 0; max-width: none;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-link);
}
.result-block__label span { font-size: 1.25rem; font-weight: 300; letter-spacing: -.03em; }
.result-heading + .result-block { margin-top: 1.75rem; }
.stage-result h2 { margin-top: .6rem; font-size: clamp(2rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.05; letter-spacing: -.04em; }
.stage-result .stage-track { max-width: 34rem; }
.stage-result p { margin-top: 1rem; max-width: 55ch; color: var(--ah-muted); }
.score-label { display: inline-block; margin-top: .75rem; font-size: .875rem; color: var(--ah-link); }
.snapshot-stats { margin: 0 0 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-block: 1.5rem; border-top: 1px solid var(--ah-border); }
.snapshot-stats dt { min-height: 2.75rem; font-size: .875rem; color: var(--ah-muted); }
.snapshot-stats dd { margin: .6rem 0 0; font-size: 2rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.snapshot-stats .stat-description { font-size: .875rem; line-height: 1.6; font-weight: 400; color: var(--ah-muted); max-width: 24ch; }
.hours-result .page-label { display: block; margin-top: 1rem; color: var(--ah-muted); }
.hours-result h2 { margin-top: .6rem; font-size: clamp(2.25rem, 1.2rem + 2.8vw, 4rem); line-height: 1.04; letter-spacing: -.045em; }
.hours-result p { margin-top: 1rem; max-width: 55ch; font-size: 1.125rem; color: var(--ah-muted); }
.hours-result .optimistic { font-size: 1rem; }
.first-workflow { margin-bottom: 2rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--ah-radius-card); }
.first-workflow .result-block__label { color: var(--ah-emerald); }
.first-workflow h2 { margin: .7rem 0 1.25rem; font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); line-height: 1.15; letter-spacing: -.03em; }
.first-workflow p { margin-bottom: 1.1rem; max-width: 55ch; font-size: 1rem; color: var(--v2-bone-soft); }
.first-workflow p strong { color: var(--ah-bone); }
.first-workflow a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ah-emerald); }
.result-details { border-bottom: 1px solid var(--ah-border); }
.result-details summary { display: flex; align-items: center; min-height: 3.5rem; padding-block: 1rem; font-size: 1.125rem; cursor: pointer; }
.result-details p, .result-details li { margin-bottom: 1rem; font-size: 1rem; color: var(--ah-muted); }
.result-details ol, .result-details ul { padding-left: 1.2rem; }
.result-details button {
  min-height: 48px; padding: .5rem 0; border: 0; background: none; color: var(--ah-link); cursor: pointer;
  font: inherit; font-size: 1rem; text-align: left; text-decoration: underline; text-underline-offset: .25em;
}
#copy-status { margin-top: 1.25rem; font-size: .875rem; color: var(--ah-link); }
#snapshot-copy { width: 100%; margin-top: 1.25rem; font: inherit; font-size: 1rem; }

/* ---------- Motion (arrival once; skipped for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .check-hero__inner > * { animation: check-rise .9s var(--v2-ease) both; }
  html:not(.motion-off) .check-hero__inner > :nth-child(2) { animation-delay: .06s; }
  html:not(.motion-off) .check-hero__inner > :nth-child(3) { animation-delay: .12s; }
  html:not(.motion-off) .check-hero__inner > :nth-child(n+4) { animation-delay: .2s; }
  html:not(.motion-off) .check-hero__art { animation: check-seam 1.25s var(--v2-ease) .05s both; }
  html:not(.motion-off) .check-hero__art img { animation: check-settle 2.4s var(--v2-ease) both; }
  /* The nine-square mark replays every 8 seconds: the squares arrive in order, the freed hour turns
     Emerald and holds, then the squares fold away in the same order and it starts again. The first
     pass is the arrival. The copy in the check's rail stays still so it never competes with a question. */
  html:not(.motion-off) .check-hero__label .hours-grid i { animation: check-cycle 8s var(--v2-ease) infinite both; }
  html:not(.motion-off) .check-hero__label .hours-grid i:nth-child(1) { animation-delay: .1s; }
  html:not(.motion-off) .check-hero__label .hours-grid i:nth-child(2) { animation-delay: .16s; }
  html:not(.motion-off) .check-hero__label .hours-grid i:nth-child(3) { animation-name: check-cycle-freed; animation-delay: .22s; }
  html:not(.motion-off) .check-hero__label .hours-grid i:nth-child(4) { animation-delay: .28s; }
  html:not(.motion-off) .check-hero__label .hours-grid i:nth-child(5) { animation-delay: .34s; }
  html:not(.motion-off) .check-hero__label .hours-grid i:nth-child(6) { animation-delay: .4s; }
  html:not(.motion-off) .check-hero__label .hours-grid i:nth-child(7) { animation-delay: .46s; }
  html:not(.motion-off) .check-hero__label .hours-grid i:nth-child(8) { animation-delay: .52s; }
  html:not(.motion-off) .check-hero__label .hours-grid i:nth-child(9) { animation-delay: .58s; }
  html:not(.motion-off) .check__steps .is-just-done .check__sq { animation: check-fill .5s var(--v2-ease) both; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.motion-off) .snap-sheet { animation: check-sheet linear both; animation-timeline: view(); animation-range: entry 5% entry 75%; }
  }
}
@keyframes check-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes check-seam { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes check-settle { from { transform: scale(1.08); } to { transform: none; } }
/* One 8 s cycle: arrive in .45 s (5.6%), hold, fold away in .4 s (92.5% to 97.5%). The freed
   square turns Emerald from .83 s to 1.43 s after its own start (10.4% to 17.9%), as the arrival did. */
@keyframes check-cycle {
  0% { opacity: 0; transform: scale(.3); }
  5.6% { opacity: .4; transform: none; }
  92.5% { opacity: .4; transform: none; animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  97.5%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes check-cycle-freed {
  0% { opacity: 0; transform: scale(.3); background: var(--v2-bone-soft); }
  5.6%, 10.4% { opacity: .4; transform: none; background: var(--v2-bone-soft); }
  17.9% { opacity: 1; transform: none; background: var(--ah-emerald); }
  92.5% { opacity: 1; transform: none; background: var(--ah-emerald); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  97.5% { opacity: 0; transform: scale(.3); background: var(--ah-emerald); }
  98%, 100% { opacity: 0; transform: scale(.3); background: var(--v2-bone-soft); }
}
@keyframes check-fill { from { transform: scale(.2); } to { transform: none; } }
@keyframes check-sheet { from { opacity: 0; transform: translateY(3rem) rotate(-1.25deg); } to { opacity: 1; transform: none; } }

/* The start of the check: the Ink panel folds into the rail, and the size you picked lands in its box.
   The panel keeps its Ink the whole way; its old text leaves first and the new text arrives once it lands. */
::view-transition-group(check-panel), ::view-transition-group(check-choice) { animation-duration: 560ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-group(check-panel) { background: var(--ah-ink); border-radius: var(--ah-radius-card); overflow: clip; }
::view-transition-old(check-panel), ::view-transition-new(check-panel) { width: 100%; height: 100%; object-fit: none; object-position: left top; }
::view-transition-old(check-panel) { animation: check-vt-out 200ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(check-panel) { animation: check-vt-in 300ms cubic-bezier(.16, 1, .3, 1) 260ms both; }
@keyframes check-vt-out { to { opacity: 0; } }
@keyframes check-vt-in { from { opacity: 0; } }

/* ---------- Tablets and phones ---------- */
@media (max-width: 899px) {
  .check-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .check-hero__panel { padding: clamp(2rem, 6vw, 3rem) var(--ah-gutter) clamp(2.25rem, 7vw, 3.25rem); }
  .check-hero__inner { max-width: 40rem; }
  /* Full width always; square on portrait screens, a band on a phone held sideways. */
  .check-hero__art { height: min(100vw, 78svh); }
  .check-snapshot__head, .snap-sheet { grid-column: 1 / -1; }
  .check-snapshot__head .h2 { max-width: 12ch; }
  .check { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 1.5rem; }
  .check__rail { display: none; }
  .check__meter { display: flex; }
  .check__why-inline { display: block; padding-top: 1.25rem; border-top: 1px solid var(--ah-border); }
  .check__why-inline strong { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-link); }
  .check__why-inline p { margin-top: .4rem; max-width: 64ch; font-size: .9375rem; color: var(--ah-muted); }
  .check__main { max-width: none; }
  .answer-options { grid-template-columns: minmax(0, 1fr); }
  .contact-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .snapshot-stats { gap: 1rem; }
  .snapshot-stats dd { font-size: 1.75rem; }
  .snapshot-stats dt { min-height: 4rem; }
}
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  .check-hero__title { font-size: clamp(2.25rem, 9vh, 3.25rem); }
}
@media (max-width: 480px) {
  .check-hero__art { height: min(104vw, 78svh); }
  .answer-option { padding: .95rem 1rem; }
  .survey-actions { flex-wrap: nowrap; gap: .75rem; }
  .survey-actions .ah-action-primary { flex: 1; justify-content: center; }
  .survey-actions--stack { flex-wrap: wrap; }
  .survey-actions--stack .ah-action { flex: 1 1 100%; justify-content: center; }
  .snapshot-stats { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .snapshot-stats > div { padding-bottom: 1rem; border-bottom: 1px solid var(--ah-border); }
  .snapshot-stats > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .snapshot-stats dt { min-height: 0; }
  .snapshot-stats .stat-description { max-width: none; }
}
/* Short landscape screens: the opening sizes to its content instead of the screen height. */
@media (min-width: 900px) and (max-height: 620px) {
  .check-hero { min-height: 0; }
}