/* ==========================================================================
   Unit Match - unitmatch.app

   The visual language is carried over from the app, and the app takes it from
   the artifacts of the job: the CMS-1500 claim form, the ledger, and above all
   the carbonless multipart form, whose copies are stocked in white, canary,
   goldenrod and pink. A daily-rate authorization physically *is* one of those
   forms, so the palette has real provenance rather than being chosen off a
   mood board. Keep it that way.

   Two rules inherited from the app, worth not breaking:
   1. No monospace. Nothing here needs one, and a mono setting whole sentences
      reads as a typewriter rather than as data. `tabular-nums` covers the few
      places figures must hold their width.
   2. One sheet, not a stack of cards. Sections are divided by hairline seams,
      the way a claim form divides its blocks. No floating rounded panels.
   ========================================================================== */

:root {
  /* The multipart form stock */
  --paper: #ffffff;
  --canary: #fbf4d0;
  --canary-edge: #e8dca0;
  --goldenrod: #f6e3b0;
  --pink: #fadfdc;

  /* The blue copy of the set, deepened to carry white text. Chrome only:
     red and green both mean something specific here, so the masthead needs a
     colour that carries no reading. */
  --masthead: #1c3f66;
  --masthead-deep: #14304f;

  /* The desk the form sits on */
  --desk: #d8dde4;
  --desk-deep: #c6ccd5;

  --ink: #14171c;
  --graphite: #616b78;
  --faint: #95a0ad;

  --rule: #d3d7dd;
  --rule-strong: #14171c;

  /* Covered / authorized. Deep enough to read as printed ink rather than
     highlighter - a page of saturated green competes with the shortfall red,
     and only the shortfall should raise its voice. */
  --ledger: #14584a;
  --ledger-soft: #e4f0ec;

  /* OCR dropout red: the ink CMS-1500 forms are printed in. Shortfall only,
     never decorative. */
  --form-red: #d93a21;
  --form-red-ink: #a32b17;

  --amber: #8a6410;

  --display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* The app uses 3px and 6px. Tight corners read as a printed form; anything
     softer reads as a consumer app. */
  --r-sm: 3px;
  --r-md: 6px;

  --sheet: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing: the width/height attributes on the screenshots
   are there to reserve layout space, and without this the height attribute
   wins over the shrunk width and stretches them. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--masthead); }

:focus-visible {
  outline: 3px solid var(--masthead);
  outline-offset: 2px;
}

.tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  background: var(--masthead);
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--masthead-deep);
}

.masthead__inner {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.4px;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--paper);
}

.masthead__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.masthead__nav a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-sm);
}

.masthead__nav a:hover { color: var(--paper); background: rgba(255, 255, 255, 0.09); }

/* The one button in the chrome. White on the masthead blue is the cleanest
   high-contrast pairing available here: red and green both carry a specific
   reading in this palette (shortfall, covered), and the canary belongs to the
   count rather than to navigation. */
.masthead__nav a.chip {
  background: var(--paper);
  color: var(--masthead);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  padding: 9px 18px;
  margin-left: 8px;
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(10, 24, 40, 0.28);
  transition: background 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.masthead__nav a.chip:hover {
  background: var(--paper);
  color: var(--masthead-deep);
  box-shadow: 0 3px 8px rgba(10, 24, 40, 0.34);
  transform: translateY(-1px);
}

.masthead__nav a.chip:active {
  box-shadow: 0 1px 1px rgba(10, 24, 40, 0.3);
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .masthead__nav a.chip { transition: none; }
  .masthead__nav a.chip:hover,
  .masthead__nav a.chip:active { transform: none; }
}

.masthead__toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  cursor: pointer;
}
.masthead__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--paper);
  margin: 3px 0;
}

/* ------------------------------------------------------------------- sheet */

/* One sheet. Every section below sits on it and is divided from the next by a
   hairline seam, the way a claim form divides its blocks. */
.sheet {
  max-width: var(--sheet);
  margin: 0 auto;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

.block {
  padding: 64px 56px;
  border-bottom: 1px solid var(--rule);
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 14px;
}

.block__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.8px;
  line-height: 1.12;
  margin: 0 0 12px;
}

.block__lead {
  max-width: 62ch;
  color: var(--graphite);
  font-size: 17px;
  margin: 0 0 36px;
}

/* --------------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
  padding: 60px 56px 64px;
  border-bottom: 1px solid var(--rule);
}

.hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -1.6px;
  margin: 0 0 20px;
}

/* The count is the product, so it gets the one flourish on the page: the
   number sits on the canary copy, the sheet a biller keeps. */
.hero__title .count {
  background: var(--canary);
  box-shadow: 0 0 0 1px var(--canary-edge);
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}

.hero__title .not {
  color: var(--form-red-ink);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  font-variant-numeric: tabular-nums;
}

.hero__sub {
  font-size: 18px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 18px;
}

.hero__note {
  font-size: 15px;
  color: var(--graphite);
  max-width: 48ch;
  margin: 0 0 30px;
}

.facts {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.facts li {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 5px 11px;
}

/* A specimen of the appeal wording. Quiet by design: the loud thing on this
   screen is the torn day, and two loud things is none. */
.statement {
  margin: 0 0 26px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--canary-edge);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  max-width: 52ch;
  background: var(--paper);
}

.statement figcaption {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
}

.statement blockquote {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--graphite);
}

/* --------------------------------------------------- the signature: the grid */

/* The dispute is whether the first day counts, so the page renders every
   covered day as a cell you can literally count. The variance stops being a
   number and becomes a picture of unpaid days. */

.auth {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--desk-deep);
}

.auth__head {
  background: var(--masthead);
  color: var(--paper);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.auth__head strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.auth__head span {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.auth__terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}

.auth__term {
  padding: 12px 16px;
}
.auth__term + .auth__term { border-left: 1px solid var(--rule); }

.auth__term dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 3px;
}

.auth__term dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cal { padding: 16px; }

.cal__month {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0 0 10px;
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal__dow {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 2px;
}

.cal__day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  color: var(--faint);
}

.cal__day.is-covered {
  background: var(--ledger-soft);
  border-color: rgba(20, 88, 74, 0.22);
  color: var(--ledger);
}

.cal__day.is-endpoint {
  background: var(--ledger);
  border-color: var(--ledger);
  color: var(--paper);
  font-weight: 700;
}

/* The day past the units approved. The edge carries the meaning - solid
   hairline vs. perforated - so the grid still reads without colour. This is
   the part torn off past what was approved, and it is the one place on the
   page allowed to raise its voice. */
.cal__day.is-torn {
  background: var(--pink);
  border: 1px dashed var(--form-red);
  color: var(--form-red-ink);
  font-weight: 700;
}

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--graphite);
}

.cal__legend span { display: flex; align-items: center; gap: 6px; }

.swatch {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  flex: none;
}
.swatch--covered { background: var(--ledger-soft); border: 1px solid rgba(20, 88, 74, 0.35); }
.swatch--torn { background: var(--pink); border: 1px dashed var(--form-red); }

/* The tape: the count and the variance, right-aligned the way an adding
   machine prints them. */
.tape {
  background: var(--canary);
  border-top: 1px solid var(--canary-edge);
  padding: 16px;
}

.tape__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.tape__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
}

.tape__label {
  font-size: 17px;
  font-weight: 600;
}

.tape__rows { font-size: 13.5px; }

.tape__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}

.tape__row + .tape__row { border-top: 1px solid var(--canary-edge); }

.tape__row--total {
  border-top: 2px solid var(--ink) !important;
  margin-top: 2px;
  padding-top: 7px;
  font-weight: 700;
  color: var(--form-red-ink);
}

/* ------------------------------------------------------------- the argument */

.argument { background: var(--paper); }

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 26px;
}

.method {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 20px 22px;
}

.method--right { background: var(--ledger-soft); border-color: rgba(20, 88, 74, 0.3); }
.method--wrong { background: var(--pink); border: 1px dashed var(--form-red); }

.method__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.method__name {
  font-weight: 600;
  font-size: 15.5px;
  margin: 0;
}

.method__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.method--right .method__num { color: var(--ledger); }
.method--wrong .method__num { color: var(--form-red-ink); text-decoration: line-through; text-decoration-thickness: 3px; }

.method p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--graphite);
}
.method--wrong p { color: var(--form-red-ink); }

.consequence {
  border-left: 3px solid var(--masthead);
  padding: 4px 0 4px 18px;
  max-width: 66ch;
  font-size: 16.5px;
}
.consequence p { margin: 0; }

/* ---------------------------------------------------------------- features */

/* Rows on one sheet, divided by seams. Not cards. */
.features { list-style: none; padding: 0; margin: 0; }

.feature {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.feature:last-child { border-bottom: 1px solid var(--rule); }

/* Block numbers, the way a claim form numbers its boxes. These are references,
   not a sequence to work through. */
.feature__no {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

.feature h3 {
  font-size: 16.5px;
  font-weight: 600;
  margin: 0 0 3px;
}

.feature p {
  margin: 0;
  color: var(--graphite);
  font-size: 15px;
  max-width: 68ch;
}

/* ------------------------------------------------------------- screenshots */

.shots { background: var(--desk); }


.shot-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.shot-row img {
  border-radius: var(--r-md);
  border: 1px solid var(--desk-deep);
}

/* ------------------------------------------------------------------- trust */

.trust { background: var(--masthead); color: var(--paper); border-bottom: none; }
.trust .eyebrow { color: rgba(255, 255, 255, 0.6); }
.trust .block__title { color: var(--paper); }
.trust .block__lead { color: rgba(255, 255, 255, 0.75); }

.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  overflow: hidden;
}

.trust__item {
  background: var(--masthead);
  padding: 22px 20px;
}

.trust__item h3 {
  font-size: 15.5px;
  font-weight: 600;
  margin: 0 0 5px;
  color: var(--paper);
}

.trust__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------- faq */

.faq-item {
  border-top: 1px solid var(--rule);
  padding: 0;
}
.faq-item:last-of-type { border-bottom: 1px solid var(--rule); }

.faq-item summary {
  cursor: pointer;
  padding: 16px 34px 16px 0;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--graphite);
  line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; }

.faq-item p {
  margin: 0 0 18px;
  color: var(--graphite);
  max-width: 72ch;
  font-size: 15.5px;
}

/* --------------------------------------------------------------------- get */

.get { background: var(--canary); border-bottom: 1px solid var(--canary-edge); text-align: center; }
.get .block__lead { margin-left: auto; margin-right: auto; }

.get__icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 14px;
  border: 1px solid var(--canary-edge);
  background: var(--paper);
}

.stores {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

/* Pre-launch. When the listings go live, swap each .store--soon <span> for an
   <a class="store" href="..."> and delete the .store__soon line inside it.
   The store links appear here and nowhere else. */
.store {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border: 1px solid var(--ink);
  min-width: 208px;
  text-align: left;
}

.store svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

.store__text { display: flex; flex-direction: column; line-height: 1.15; }
.store__text small { font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.75; }
.store__text b { font-size: 16px; font-weight: 600; }

.store--soon {
  background: transparent;
  color: var(--ink);
  border: 1px dashed var(--graphite);
}
.store--soon .store__text small { opacity: 0.7; }

.notify {
  display: inline-block;
  font-weight: 600;
  color: var(--masthead);
}

.disclaimer {
  max-width: 70ch;
  margin: 30px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--canary-edge);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--amber);
}

/* ------------------------------------------------------------------ footer */

.footer {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 26px 56px 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  font-size: 14px;
  color: var(--graphite);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
}
.footer__brand img { width: 26px; height: 26px; border-radius: var(--r-sm); }

.footer__links { display: flex; gap: 18px; margin-left: auto; }
.footer__links a { color: var(--masthead); text-decoration: none; font-weight: 500; }
.footer__links a:hover { text-decoration: underline; }

.footer__legal { width: 100%; margin: 0; font-size: 13px; color: var(--faint); }

/* ---------------------------------------------------- document pages */

/* privacy.html and support.html. Same sheet, one column, no ornament. */

.doc { padding: 56px 56px 64px; }

.doc__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin: 0 0 6px;
}

.doc__updated {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--graphite);
  background: var(--canary);
  border: 1px solid var(--canary-edge);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  margin: 0 0 30px;
}

.doc h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 34px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.doc h2:first-of-type { margin-top: 26px; }

.doc p, .doc li { max-width: 72ch; font-size: 16px; }
.doc p { margin: 0 0 14px; }
.doc ul { padding-left: 20px; margin: 0 0 14px; }
.doc li { margin-bottom: 7px; }

.doc__callout {
  background: var(--canary);
  border: 1px solid var(--canary-edge);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 0 0 22px;
  max-width: 72ch;
}
.doc__callout p:last-child { margin-bottom: 0; }
.doc__callout strong { font-weight: 700; }

.doc__mail {
  display: inline-block;
  background: var(--masthead);
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--r-md);
  margin: 4px 0 8px;
}
.doc__mail:hover { background: var(--masthead-deep); }

/* ------------------------------------------------------------------ motion */

/* One moment, and only one: the covered cells fill in sequence so the grid
   performs the count. Capped short, and off entirely under reduce-motion. */
.cal__day.is-covered,
.cal__day.is-endpoint,
.cal__day.is-torn {
  animation: fill 240ms ease-out both;
}

@keyframes fill {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cal__day.is-covered,
  .cal__day.is-endpoint,
  .cal__day.is-torn { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 44px 32px 48px; }
  .block { padding: 44px 32px; }
  .doc { padding: 40px 32px 52px; }
  .footer { padding: 24px 32px 52px; }
  .compare { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: 1fr; }
  .shot-row { grid-template-columns: repeat(2, 1fr); }

  .masthead__toggle { display: block; }
  .masthead__nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 10px;
    margin-left: 0;
  }
  .masthead__inner { flex-wrap: wrap; }
  .masthead.open .masthead__nav { display: flex; }
  .masthead__nav a { padding: 11px 12px; }
  /* Full width in the drawer, where a lift and a drop shadow stop meaning
     anything. */
  .masthead__nav a.chip {
    text-align: center;
    margin-left: 0;
    margin-top: 8px;
    padding: 13px 16px;
    box-shadow: none;
  }
  .masthead__nav a.chip:hover { transform: none; box-shadow: none; }
}

@media (max-width: 560px) {
  .block { padding: 36px 20px; }
  .doc { padding: 32px 20px 44px; }
  .hero { padding: 34px 20px 40px; }
  .footer { padding: 22px 20px 48px; }
  .sheet { border-left: none; border-right: none; }
  .shot-row { grid-template-columns: 1fr; gap: 20px; }
  .tape__num { font-size: 46px; }
  .cal__day { font-size: 12.5px; }
  .store { width: 100%; }
}