/* TidyCheck public shell — the homepage Step 1 visual language, shared. */

:root {
  --site-paper: #F0F0EC;
  --site-ink: #080808;
  --site-ink-2: #222222;
  --site-muted: #5A5A5A;
  --site-line: #B8B8B0;
  --site-accent: #3A6B94;
  --site-max: 1120px;
}

body {
  background: var(--site-paper);
  color: var(--site-ink);
  font-family: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4 {
  font-family: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html body .site-hero-title,
html body .home-display {
  color: var(--site-ink);
  font-family: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(2.4rem, 1.25rem + 3.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.03;
  max-width: 24ch;
  text-wrap: balance;
}

/* Keep the homepage hero on the ledger display face. The public shell body and
   interior headings remain Switzer; only this approved hero treatment changes. */
html body.home .site-hero-title,
html body.home .home-display {
  font-family: var(--font-display);
}

#checklist-print .care-break h2 {
  font-family: Georgia, "Times New Roman", serif;
}

/* Every public header follows the homepage's quiet document bar. */
.doc-header,
.home-nav {
  background: var(--site-paper);
  border-bottom: 1px solid var(--site-line);
}

.doc-header {
  min-height: 74px;
  padding: 0 40px;
}

.doc-header .doc-home-link,
.doc-header .doc-nav-link,
.home-nav a {
  color: var(--site-ink);
}

.doc-header .doc-nav-link:hover,
.home-nav a:hover {
  color: var(--site-accent);
}

/* The homepage footer is the only public footer pattern. */
.home-footer,
footer.doc-footer,
footer.site-footer {
  border-top: 1px solid var(--site-line);
  background: var(--site-paper);
  color: var(--site-ink);
  margin-top: 0;
  padding: 0;
  text-align: left;
}

.home-footer .home-foot-top,
.home-footer .home-foot-bottom {
  max-width: var(--site-max);
  margin: 0 auto;
}

.home-footer .home-foot-top {
  align-items: flex-start;
  display: flex;
  gap: 48px;
  justify-content: space-between;
  padding: 56px 40px 40px;
}

.home-footer .home-wordmark {
  color: var(--site-ink);
  font-size: 17px;
  font-weight: 600;
}

.home-footer .home-wordmark i {
  color: var(--site-accent);
  font-style: normal;
}

.home-footer .home-foot-cols {
  display: grid;
  gap: 48px;
  grid-template-columns: repeat(3, minmax(0, max-content));
}

.home-footer .home-foot-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-footer .home-foot-label {
  color: var(--site-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-footer .home-foot-col a {
  color: var(--site-ink-2);
  font-size: 14px;
  text-decoration: none;
}

.home-footer .home-foot-col a:hover { color: var(--site-accent); }

.home-footer .home-foot-bottom {
  border-top: 1px solid var(--site-line);
  color: var(--site-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  padding: 20px 40px 40px;
}

footer.doc-footer .doc-footer-cert { display: none; }

.home-foot-top,
footer.doc-footer .doc-footer-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 56px 40px 40px;
}

footer.doc-footer .doc-footer-grid {
  display: grid;
  grid-template-columns: 1fr repeat(2, max-content);
  gap: 48px;
  padding: 0;
}

footer.doc-footer .footer-heading,
footer.doc-footer .footer-list a,
footer.doc-footer .footer-desc {
  font-family: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

footer.doc-footer .doc-footer-grid > div:first-child .footer-heading {
  color: var(--site-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: none;
}

footer.doc-footer .footer-desc { display: none; }

footer.doc-footer .footer-heading {
  color: var(--site-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

footer.doc-footer .footer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

footer.doc-footer .footer-list li { margin: 0; }

footer.doc-footer .footer-list a {
  color: var(--site-ink-2);
  font-size: 14px;
  text-decoration: none;
}

footer.doc-footer .footer-list a:hover { color: var(--site-accent); }

footer.doc-footer .footer-bar {
  border-top: 1px solid var(--site-line);
  color: var(--site-muted);
  font-size: 11px;
  margin: 0;
  padding: 20px 40px 40px;
}

footer.doc-footer .footer-bar p { margin: 0; }

footer.site-footer .footer-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 56px 40px 40px;
}

footer.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr repeat(2, max-content);
  gap: 48px;
}

footer.site-footer .footer-heading {
  color: var(--site-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

footer.site-footer .footer-grid > div:first-child .footer-heading {
  color: var(--site-ink);
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: none;
}

footer.site-footer .footer-desc { display: none; }

footer.site-footer .footer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

footer.site-footer .footer-list li { margin: 0; }

footer.site-footer .footer-list a {
  color: var(--site-ink-2);
  font-size: 14px;
  text-decoration: none;
}

footer.site-footer .footer-list a:hover { color: var(--site-accent); }

footer.site-footer .footer-bar {
  border-top: 1px solid var(--site-line);
  color: var(--site-muted);
  font-size: 11px;
  margin-top: 40px;
  padding-top: 20px;
}

/* App and marketplace tabs use the same ruled, square interaction language. */
.tab-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--site-muted);
  cursor: pointer;
  font: 600 11px/1.4 "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.12em;
  padding: 12px 4px;
  text-transform: uppercase;
}

.tab-btn:hover,
.tab-btn.active { border-bottom-color: var(--site-ink); color: var(--site-ink); }

/* Blog pages keep their content layout but inherit the same surfaces. */
.blog-grid .card,
.blog-post .card,
.cta-box {
  border-radius: 0;
  box-shadow: none;
}

.cta-box {
  background: var(--site-paper);
  border: 1px solid var(--site-line);
  color: var(--site-ink);
}

.cta-box p { color: var(--site-ink-2); }

.cta-box .btn {
  background: var(--site-ink);
  border-radius: 0;
  color: var(--site-paper);
}

@media (max-width: 768px) {
  html body .site-hero-title,
  html body .home-display {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.05;
  }

  .doc-header { padding: 0 24px; }

  .home-foot-top,
  footer.doc-footer .doc-footer-inner {
    padding: 40px 24px 28px;
  }

  footer.doc-footer .doc-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }

  footer.doc-footer .doc-footer-grid > div:first-child { grid-column: 1 / -1; }

  footer.doc-footer .footer-bar { padding: 20px 24px 36px; }

  footer.site-footer .footer-inner { padding: 40px 24px 28px; }
  footer.site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  footer.site-footer .footer-grid > div:first-child { grid-column: 1 / -1; }
  footer.site-footer .footer-bar { margin-top: 28px; padding: 20px 0 8px; }

  .home-footer .home-foot-top {
    flex-direction: column;
    gap: 32px;
    padding: 40px 24px 28px;
  }

  .home-footer .home-foot-cols {
    gap: 28px 24px;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .home-footer .home-foot-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    line-height: 1.5;
    padding: 20px 24px 36px;
  }
}

/* ── Brand lockup ───────────────────────────────────────────────────────────
   One mark and one wordmark size on every page. Defined here, and only here,
   because site.css is the last stylesheet in the cascade on all 23 pages that
   render a lockup — so no page markup carries the brand, and no page can drift.

   The mark is a drawn shape, not the ✓ character. The character was a font
   substitution the site did not control (Switzer has no U+2713), so the mark
   changed shape between devices. Applied as a mask over currentColor so it is
   ink on paper in the public shell and paper on ink in the app's dark footer.
   Spec: docs/specs/2026-08-20-tidycheck-brand-lockup.md
*/
:root {
  --tc-mark-size: 26px;
  --tc-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23000'%3E%3Crect x='1' y='1' width='24' height='24' rx='6' stroke-width='2'/%3E%3Cpath d='M9 13.2L11.8 16L17 9.9' stroke-width='2.2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

header .home-link::before,
.home-wordmark::before,
.doc-home-link::before {
  content: "";
  display: block;
  flex: 0 0 var(--tc-mark-size);
  width: var(--tc-mark-size);
  height: var(--tc-mark-size);
  background-color: currentColor;
  /* Spacing belongs to the mark, not to the lockup: `gap` would also push
     apart the name and its ® in the footer. */
  margin-right: 10px;
  -webkit-mask: var(--tc-mark) center / contain no-repeat;
  mask: var(--tc-mark) center / contain no-repeat;
}

/* One wordmark: 20px / 700 everywhere. The app already used these values, so
   the app header is unchanged and the rest of the site comes up to meet it. */
header .home-link h1,
.home-wordmark,
.home-wordmark .home-wordmark-name,
.doc-home-link {
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Only the app lockup has a second element after the name ("for Cleaners"). */
header .home-link h1 {
  gap: 10px;
}

/* The footer wordmark is a plain <div>, so it needs a flex context or the mark
   stacks above the name instead of sitting beside it. */
.home-wordmark {
  display: inline-flex;
}

.home-footer .home-wordmark {
  font-size: 20px;
  font-weight: 700;
}

/* Never worse than today: if a browser cannot mask, it gets the previous
   character treatment rather than an empty box. This is the only place the
   ✓ character is allowed to remain. */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  header .home-link::before,
  .home-wordmark::before,
  .doc-home-link::before {
    content: "✓";
    background: none;
    border: 2px solid currentColor;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
  }
}

/* ---------- Prose type ------------------------------------------------------
   Running body copy across the public pages is set in the serif (--font-copy).
   An explicit allowlist, scoped to page wrappers, because site.css is also
   loaded by the cleaner app and the marketplace, whose text is interface and
   must stay on --font-body.                                                 */
.legal p, .legal li, .legal blockquote,
.about-page p, .about-page li,
.pricing-page p, .pricing-page li,
.pro-page p, .pro-page li,
.notfound p {
  font-family: var(--font-copy);
}

/* Eyebrows, seals and metadata are labels, not prose. They stay on the
   interface face, matching .home-seal and .home-micro on the homepage. */
.about-page .about-seal,
.about-page .founder-name,
.pro-page .pro-seal,
.legal .updated,
.notfound .eyebrow {
  font-family: var(--font-body);
}

/* The report specimen imitates a printed TidyCheck report, so it keeps the
   interface face rather than the page's prose face. */
.pro-page .pro-report p,
.pro-page .pro-report li,
.pro-page .pro-report-eyebrow,
.pro-page .pro-report-sub,
.pro-page .pro-report-room-name {
  font-family: var(--font-body);
}