@charset "UTF-8";

/* ==========================================================================
   AVAVA — Checkout and the order confirmation
   Only what these two pages add. The light header, the page-header block and
   the shared buttons, chips and dots are the inner-page template and live in
   style.css.

   One page, no wizard: contact, delivery, date, fitting bay and payment are
   five cards in a column with the order summary sticky beside them, so the
   total is visible from the first field to the last. Nothing is priced here
   — the summary is the basket's sum read again, and the fitting card repeats
   the bay the basket already booked.

   The confirmation is the second route (order-confirmation.html): the paid
   panel, the three figures a buyer screenshots, and what happens next.

   Dark surfaces: the active step, the fitting card, the paid panel — three,
   which is the ceiling for one screen. The accent marks the active numeral,
   the chosen delivery option's tint, the spanner tile, Free delivery, the Pay
   arrow disc, the paid tick, the bay figure and the timeline's first dot.

   TABLE OF CONTENTS
   -----------------------------------------------------------------------
   01. Rhythm and layout
   02. Step rail
   03. Card
   04. Fields
   05. Choice panels, dates, checkboxes
   06. Fitting bay
   07. Payment methods
   08. Consent
   09. Order summary
   10. Paid panel
   11. What happens next
   12. Responsive
   13. Touch and reduced motion
   ========================================================================== */


/* ==========================================================================
   01. Rhythm and layout
   ========================================================================== */

.chkgap { height: 40px; }

.chkgap--near { height: 24px; }

.chksec { padding: 0 40px; }

/* The promise in the H1 is one line in the design; it may break only where
   the page header itself stacks. */
.chktitle { white-space: nowrap; }

.chkwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 26px;
  align-items: start;
}

.chkform { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* A real control, out of sight: the drawn box or ring beside it is what the
   buyer sees, and the outline lands on that when the control has focus. */
.chkhide {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   02. Step rail
   ========================================================================== */

.chksteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(20, 22, 26, .14);
  border-radius: 18px;
  background: var(--line);
  overflow: hidden;
}

.chkstep {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: #FFFFFF;
}

.chkstep--on { background: var(--ink); color: #FFFFFF; }

.chkstep__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

.chkstep--on .chkstep__n { background: var(--accent); }

.chkstep__k { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }

.chkstep__s {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .11em;
  color: var(--ink-2);
}

.chkstep--on .chkstep__s { color: rgba(255, 255, 255, .5); }


/* ==========================================================================
   03. Card
   ========================================================================== */

.chkcard {
  border: 1px solid rgba(20, 22, 26, .14);
  border-radius: 20px;
  overflow: hidden;
  background: #FFFFFF;
}

.chkcard__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}

.chkcard__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
}

.chkcard__h { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.022em; }

.chkcard__note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .11em;
  color: var(--ink-2);
  text-align: right;
}

.chkcard__body { padding: 22px 24px 24px; }


/* ==========================================================================
   04. Fields
   ========================================================================== */

.chkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.chkgrid--1 { grid-template-columns: 1fr; margin-top: 20px; }

.chkgrid--3 { grid-template-columns: 1fr 1fr 1fr; margin-top: 16px; }

.chkgrid--address { margin-top: 18px; }

.chkfield { display: block; min-width: 0; }

.chkfield__k {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .11em;
  color: var(--ink-2);
}

.chkin {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(20, 22, 26, .18);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  transition: border-color .18s ease;
}

.chkin:focus-visible { outline: 0; border-color: var(--accent); }

.chkin:invalid:not(:placeholder-shown) { border-color: #8A4A22; }

.chksign {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ink-3);
}

.chksign__a { font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: underline; }

.chksign__a:hover { color: var(--ink-3); }


/* ==========================================================================
   05. Choice panels, dates, checkboxes

   The chosen option is a state on the label; the script moves it with the
   control, and the page as shipped carries the design's default.
   ========================================================================== */

.chkpick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-radius: 14px;
  background: var(--line);
  overflow: hidden;
}

.chkpick__opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 20px;
  background: #FFFFFF;
  cursor: pointer;
  transition: background .18s ease;
}

.chkpick__opt--on { background: rgba(198, 230, 59, .2); }

.chkpick__k { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.018em; }

.chkpick__t { display: block; margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }

.chkradio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border: 1.5px solid rgba(20, 22, 26, .28);
  border-radius: 50%;
}

.chkradio--18 { width: 18px; height: 18px; margin-top: 0; }

.chkradio__dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

.chkradio--18 .chkradio__dot { width: 6px; height: 6px; }

.chkpick__opt--on .chkradio,
.chkdate--on .chkradio { border: 0; background: var(--accent); }

.chkpick__opt--on .chkradio__dot,
.chkdate--on .chkradio__dot { display: block; }

.chkhide:focus-visible + .chkradio,
.chkhide:focus-visible + .chkbox { outline: 2px solid var(--ink); outline-offset: 2px; }

.chkdates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.chkdate {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  border: 1.5px solid rgba(20, 22, 26, .16);
  border-radius: 13px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.chkdate:hover { border-color: var(--ink); }

.chkdate--on { border-color: var(--ink); background: var(--surface); }

.chkdate__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.chkdate__d { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }

.chkdate__m {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .11em;
  color: var(--ink-2);
}

.chkcheck {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  font-size: 13.5px;
  cursor: pointer;
}

.chkcheck--top { align-items: flex-start; gap: 12px; margin-top: 0; line-height: 1.6; }

.chkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border: 1.5px solid rgba(20, 22, 26, .28);
  border-radius: 6px;
  color: var(--ink);
}

.chkcheck--top .chkbox { margin-top: 1px; }

.chkbox svg { visibility: hidden; }

.chkbox--on { border: 0; background: var(--accent); }

.chkbox--on svg { visibility: visible; }


/* ==========================================================================
   06. Fitting bay
   ========================================================================== */

.chkbay {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ink);
  color: #FFFFFF;
}

.chkbay__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--ink);
}

.chkbay__main { flex: 1 1 auto; min-width: 0; }

.chkbay__d { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }

.chkbay__t { display: block; margin-top: 5px; font-size: 13px; color: rgba(255, 255, 255, .62); }

.chkbay__end { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.chkbay__p { font-size: 16px; font-weight: 800; letter-spacing: -.022em; }

.chkbay__btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  transition: border-color .18s ease;
}

.chkbay__btn:hover { border-color: #FFFFFF; color: #FFFFFF; }

.chkvow { display: flex; align-items: flex-start; gap: 11px; margin: 14px 0 0; }

.chkvow__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}

.chkvow__t { font-size: 13px; line-height: 1.55; color: var(--ink-3); }


/* ==========================================================================
   07. Payment methods
   ========================================================================== */

.chkpay { display: flex; gap: 9px; flex-wrap: wrap; }

.chkpay__m {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 13px 18px;
  border: 1.5px solid rgba(20, 22, 26, .16);
  border-radius: 13px;
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.chkpay__m:hover { border-color: var(--ink); }

.chkpay__m:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.chkpay__m--on { border-color: var(--ink); background: var(--surface); }

.chkpay__k { font-size: 14.5px; font-weight: 600; letter-spacing: -.018em; }

.chkpay__m--on .chkpay__k { font-weight: 800; }

.chkpay__s {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-2);
}

.chkpay__note {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
}


/* ==========================================================================
   08. Consent
   ========================================================================== */

.chkconsent {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.6;
}

.chkconsent__t { color: var(--ink); }

.chkconsent__t--soft { color: var(--ink-3); }

.chkconsent__a { color: var(--ink); text-decoration: underline; }

.chkconsent__a:hover { color: var(--ink-3); }


/* ==========================================================================
   09. Order summary
   ========================================================================== */

.chksum {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chkorder {
  border: 1px solid rgba(20, 22, 26, .14);
  border-radius: 22px;
  overflow: hidden;
  background: #FFFFFF;
}

.chkorder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.chkorder__k {
  margin: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--ink-2);
}

.chkorder__edit {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  color: var(--ink);
  text-decoration: underline;
}

.chkorder__edit:hover { color: var(--ink-3); }

.chkitems { padding: 16px 24px 4px; }

.chkitem {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 9px 0;
}

.chkitem__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  overflow: hidden;
  background: var(--image-bed);
}

.chkitem__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chkitem__main { min-width: 0; }

.chkitem__n { display: block; margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.018em; line-height: 1.15; }

.chkitem__s {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-2);
}

.chkitem__p { font-size: 14px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }

.chktotals { padding: 12px 24px 20px; }

.chkrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line-10);
}

.chkrow__main { min-width: 0; }

.chkrow__k { display: block; font-size: 14px; color: var(--ink-3); }

.chkrow__s {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-2);
}

.chkrow__v { flex: 0 0 auto; font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; }

.chkrow__v--free { color: var(--accent); }

.chkrow--vat .chkrow__k { color: var(--ink-2); }

.chkrow--vat .chkrow__v { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }

.chkdue {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1.5px solid var(--ink);
}

.chkdue__k { display: block; font-size: 15px; font-weight: 700; }

.chkdue__s {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-2);
}

.chkdue__n { flex: 0 0 auto; font-size: 32px; font-weight: 800; letter-spacing: -.036em; line-height: 1; }

.chkpaybtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 18px;
  padding: 16px 16px 16px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}

.chkpaybtn:hover { filter: brightness(1.14); transform: translateY(-1px); }

.chkpaybtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.chkpaybtn--off { opacity: .45; pointer-events: none; }

.chkdisc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}

.chksecure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .11em;
  color: var(--ink-2);
}

.chkorder__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.chkorder__foot .chkorder__k { font-size: 8.5px; font-weight: 600; letter-spacing: .11em; }

.chkmarks { display: flex; gap: 6px; }

.chkmark {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #FFFFFF;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-2);
}

.chkvows {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--surface);
}

.chkvows__row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.chkvows__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}


/* ==========================================================================
   10. Paid panel
   ========================================================================== */

.chkpaid {
  position: relative;
  padding: 44px 44px 40px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--ink);
  color: #FFFFFF;
}

.chkpaid__mark {
  position: absolute;
  right: -24px;
  bottom: -64px;
  font-family: var(--display);
  font-size: 190px;
  font-weight: 400;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, .09);
  pointer-events: none;
  user-select: none;
}

.chkpaid__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
}

.chkpaid__main { min-width: 0; }

.chkpaid__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}

.chkpaid__h {
  margin: 22px 0 0;
  font-size: clamp(28px, 2.8vw, 44px);
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: 1.04;
}

.chkpaid__t { margin: 14px 0 0; max-width: 560px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .68); }

.chkpaid__side { flex: 0 0 auto; text-align: right; }

.chkpaid__k {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  color: rgba(255, 255, 255, .44);
}

.chkpaid__n { display: block; margin-top: 10px; font-size: 34px; font-weight: 800; letter-spacing: -.038em; line-height: 1; }

.chkpaid__card {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .11em;
  color: rgba(255, 255, 255, .44);
}

.chkcells {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 32px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
}

.chkcell { padding: 22px 24px 24px; background: var(--ink); }

.chkcell__k {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .44);
}

.chkcell__v { display: block; margin-top: 11px; font-size: 21px; font-weight: 800; letter-spacing: -.028em; }

.chkcell__v--accent { color: var(--accent); }

.chkcell__s { display: block; margin-top: 7px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .6); }

.chkacts {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.chkact {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 22px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  transition: border-color .18s ease, background .18s ease;
}

.chkact:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .06); color: #FFFFFF; }

.chkact--main {
  gap: 12px;
  padding: 15px 15px 15px 24px;
  border: 0;
  background: var(--accent);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  transition: filter .18s ease;
}

.chkact--main:hover { filter: brightness(1.08); background: var(--accent); color: var(--ink); }

.chkact__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
}


/* ==========================================================================
   11. What happens next
   ========================================================================== */

.chknext {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.chktl {
  border: 1px solid rgba(20, 22, 26, .14);
  border-radius: 22px;
  overflow: hidden;
  background: #FFFFFF;
}

.chktl__head { padding: 18px 24px; border-bottom: 1px solid var(--line); }

.chktl__k {
  margin: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .13em;
  color: var(--ink-2);
}

.chkstage {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 18px 24px;
}

.chkstage + .chkstage { border-top: 1px solid var(--line-10); }

.chkdot {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5.5px rgba(20, 22, 26, .22);
}

.chkdot--on { background: var(--accent); box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5.5px var(--accent); }

.chkstage__main { min-width: 0; }

.chkstage__row { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }

.chkstage__h { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }

.chkstage__d {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
}

.chkstage__t { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

.chkhelpcol { display: flex; flex-direction: column; gap: 14px; }

.chkhelp {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 24px 26px 26px;
  border-radius: 22px;
  background: var(--surface);
}

.chkhelp__t { margin: 0; font-size: 14.5px; line-height: 1.6; }

.chkhelp__list { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }

.chkpill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 20px;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: box-shadow .18s ease;
}

.chkpill:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }

.chkpill__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
}

.chkback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 18px 24px;
  border: 1px solid rgba(20, 22, 26, .16);
  border-radius: 22px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .18s ease;
}

.chkback:hover { border-color: var(--ink); color: var(--ink); }

.chkback__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #FFFFFF;
}


/* ==========================================================================
   12. Responsive

   The prototype is desktop only. The summary stops being sticky before it
   stops fitting; the grids fold in the order the eye reads them.
   ========================================================================== */

@media (max-width: 1180px) {
  .chktitle { white-space: normal; }

  .chkwrap { grid-template-columns: minmax(0, 1fr); }

  .chksum { position: static; }

  .chknext { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .chksteps { grid-template-columns: minmax(0, 1fr); }

  .chkgrid, .chkgrid--3 { grid-template-columns: minmax(0, 1fr); }

  .chkpick { grid-template-columns: minmax(0, 1fr); }

  .chkdates { grid-template-columns: minmax(0, 1fr); }

  .chkcells { grid-template-columns: minmax(0, 1fr); }

  .chkbay { flex-wrap: wrap; }

  .chkbay__end { width: 100%; justify-content: space-between; }

  .chkpaid__side { text-align: left; }
}

@media (max-width: 760px) {
  .chksec { padding: 0 20px; }

  .chkcard__head { flex-wrap: wrap; }

  .chkcard__note { margin-left: 0; width: 100%; text-align: left; }

  .chkcard__body { padding: 18px 18px 20px; }

  .chkpaid { padding: 28px 22px 26px; }

  .chkpaid__mark { font-size: 120px; right: -12px; bottom: -40px; }

  .chkacts .chkact, .chkacts .chkact--main { width: 100%; justify-content: space-between; }

  .chkhelp { padding: 20px 18px 20px; }
}

@media (max-width: 430px) {
  .chksec { padding: 0 16px; }

  .chkpay__m { width: 100%; }

  .chkorder__foot { flex-wrap: wrap; row-gap: 8px; }

  .chkmarks { flex-wrap: wrap; }

  .chkdue__n { font-size: 28px; }
}


/* ==========================================================================
   13. Touch and reduced motion
   ========================================================================== */

@media (hover: none) {
  .chkpaybtn:hover { filter: none; transform: none; }

  .chkdate:hover { border-color: rgba(20, 22, 26, .16); }

  .chkdate--on:hover { border-color: var(--ink); }

  .chkpay__m:hover { border-color: rgba(20, 22, 26, .16); }

  .chkpay__m--on:hover { border-color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .chkpaybtn { transition: filter .18s ease; }

  .chkpaybtn:hover { transform: none; }
}