.app-site {
  --product-accent: var(--accent);
  --product-accent-hover: var(--accent-hover);
  --product-accent-contrast: var(--accent-contrast);
  margin: 0;
  background: var(--canvas) !important;
  color: var(--ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  line-height: 1.65;
  transition: background-color 180ms ease, color 180ms ease;
}

.app-site.app-inhaleapp { --product-accent: #18393e; --product-accent-hover: #102c30; }
.app-site.app-leaselog { --product-accent: #29351a; --product-accent-hover: #1e2812; }
.app-site.app-card-notebook { --product-accent: #4a281d; --product-accent-hover: #371d15; }
.app-site.app-hoa-notebook { --product-accent: #223746; --product-accent-hover: #172833; }
.app-site.app-florida-bills { --product-accent: #223746; --product-accent-hover: #172833; }
.app-site.app-skinlog { --product-accent: #223746; --product-accent-hover: #172833; }
.app-site.app-menolog { --product-accent: #4a281d; --product-accent-hover: #371d15; }
.app-site.app-hofstmap {
  --product-accent: #223746;
  --product-accent-hover: #172833;
  --bg: var(--canvas);
  --surface: var(--paper);
  --border: var(--line);
  --text: var(--muted);
  --text-hi: var(--ink);
  --dim: var(--muted);
  --map-sphere: #aab0a7;
  --map-land: #c0c5bb;
  --map-land-active: #c5b58b;
  --map-border: #526d83;
  --map-grid: rgb(82 109 131 / 28%);
}

html[data-theme='evening'] .app-site {
  --product-accent: var(--accent);
  --product-accent-hover: var(--accent-hover);
  --product-accent-contrast: var(--accent-contrast);
}

html[data-theme='evening'] .app-site.app-inhaleapp { --product-accent: #b2d0d0; --product-accent-hover: #d0e1df; }
html[data-theme='evening'] .app-site.app-leaselog { --product-accent: #cfd6b5; --product-accent-hover: #e0e4cc; }
html[data-theme='evening'] .app-site.app-card-notebook { --product-accent: #e5b8a4; --product-accent-hover: #f0d0c1; }
html[data-theme='evening'] .app-site.app-hoa-notebook { --product-accent: #c1d2e0; --product-accent-hover: #d9e4ec; }
html[data-theme='evening'] .app-site.app-florida-bills { --product-accent: #c1d2e0; --product-accent-hover: #d9e4ec; }
html[data-theme='evening'] .app-site.app-skinlog { --product-accent: #c1d2e0; --product-accent-hover: #d9e4ec; }
html[data-theme='evening'] .app-site.app-menolog { --product-accent: #e5b8a4; --product-accent-hover: #f0d0c1; }
html[data-theme='evening'] .app-site.app-hofstmap {
  --product-accent: #c1d2e0;
  --product-accent-hover: #d9e4ec;
  --map-sphere: #223438;
  --map-land: #344c5c;
  --map-land-active: #526d83;
  --map-border: #6d879a;
  --map-grid: rgb(193 210 224 / 18%);
}

.app-site *,
.app-site *::before,
.app-site *::after {
  box-sizing: border-box;
}

.app-site ::selection {
  color: var(--product-accent-contrast);
  background: var(--product-accent);
}

.app-site .site-backlink {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink) !important;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-decoration: none !important;
  box-shadow: none;
}

.app-site .site-backlink:hover {
  border-color: var(--product-accent);
  color: var(--product-accent) !important;
}

.app-site :is(.hero, body > header) {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}

.app-site.app-product .hero,
.app-site.app-product > header {
  padding: clamp(6rem, 11vw, 9rem) 1.5rem clamp(4rem, 8vw, 7rem) !important;
}

.app-site :is(h1, h2, h3, h4) {
  color: var(--ink) !important;
}

.app-site :is(h1, h2) {
  background: none !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  -webkit-text-fill-color: currentColor !important;
}

.app-site h1 {
  font-size: clamp(3rem, 7vw, 4.75rem) !important;
  line-height: 1.04 !important;
}

.app-site h2 {
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  line-height: 1.08 !important;
}

.app-site :is(p, li, .subtitle, .muted, .updated) {
  color: var(--muted) !important;
}

.app-site a {
  color: var(--product-accent);
  text-underline-offset: 0.18em;
}

.app-site a:focus-visible,
.app-site button:focus-visible,
.app-site input:focus-visible,
.app-site select:focus-visible {
  outline: 2px solid var(--product-accent) !important;
  outline-offset: 3px;
}

.app-site :is(.feature-card, .feature, .card, .contact-card, .pdf-card, .requirements, .privacy-strip, .support, .disclaimer) {
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.app-site :is(.feature-grid, .features, .steps, .pdf-cards) {
  border-color: var(--line) !important;
}

.app-site :is(.icon, .num, .tag, .price, .no-sub, .eyebrow) {
  border-color: var(--line) !important;
  background: var(--line-soft) !important;
  color: var(--product-accent) !important;
}

.app-site :is(.tag, .no-sub, .eyebrow) {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.app-site :is(.cta, .coming-soon) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--product-accent) !important;
  color: var(--product-accent-contrast) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
}

.app-site :is(.cta, .coming-soon):hover {
  background: var(--product-accent-hover) !important;
}

.app-site :is(.features, .how-it-works, .symptoms, .pdf-spotlight, .support) {
  background-color: transparent !important;
  color: var(--ink) !important;
}

.app-site :is(footer, .links, .more-apps) {
  border-color: var(--line) !important;
  background: var(--canvas) !important;
  color: var(--muted) !important;
}

.app-site.app-legal .container {
  width: min(100% - 2rem, 48rem) !important;
  max-width: 48rem !important;
  margin-inline: auto !important;
  padding: 6rem 0 4rem !important;
}

.app-site.app-legal h1 {
  font-size: clamp(2.7rem, 8vw, 4rem) !important;
}

.app-site.app-legal :is(h2, h3) {
  margin-top: 2.5rem;
}

.app-site.app-legal :is(p, li) {
  max-width: 72ch;
}

.app-site.app-hofstmap .site-backlink {
  position: static;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 9px;
  line-height: 1.2;
}

.app-site.app-hofstmap .header {
  min-height: 64px;
  height: auto;
  padding-block: 8px;
  border-color: var(--line) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.app-site.app-hofstmap .country-select {
  max-width: 11rem;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink);
  padding: 0 2rem 0 0.75rem;
  font: inherit;
  font-size: 12px;
}

.app-site.app-hofstmap :is(.logo, .logo-sub, .country-display, .status-label, .fader-label, .fader-num) {
  color: var(--ink) !important;
}

.app-site.app-hofstmap #faders-panel {
  border-color: var(--line) !important;
  background: var(--paper) !important;
}

.app-site.app-hofstmap #map-container {
  background: var(--canvas) !important;
}

.app-site.app-hofstmap .sphere-bg {
  fill: var(--map-sphere) !important;
}

.app-site.app-hofstmap .land {
  fill: var(--map-land) !important;
  stroke: var(--map-border) !important;
}

.app-site.app-hofstmap .land.lit {
  fill: var(--map-land-active) !important;
  stroke: var(--product-accent) !important;
}

.app-site.app-hofstmap .graticule {
  stroke: var(--map-grid) !important;
}

.app-site.app-hofstmap .border-mesh {
  stroke: var(--map-border) !important;
}

.app-site.app-hofstmap :is(.c-ring, .c-ring-outer) {
  border-color: var(--product-accent) !important;
}

.app-site.app-hofstmap :is(.c-dot, .status-dot) {
  background: var(--product-accent) !important;
}

.app-site.app-hofstmap .c-h {
  background: linear-gradient(to right, transparent, var(--product-accent), transparent) !important;
}

.app-site.app-hofstmap .c-v {
  background: linear-gradient(to bottom, transparent, var(--product-accent), transparent) !important;
}

.app-site.app-hofstmap .fader-track {
  background: var(--line) !important;
}

.app-site.app-hofstmap :is(.fader-name, .fader-scale) {
  color: var(--muted) !important;
  opacity: 1 !important;
}

.app-site.app-hofstmap .fader-name {
  font-size: 11px;
}

.app-site.app-hofstmap .fader-scale {
  font-size: 10px;
}

@media (max-width: 640px) {
  .app-site .site-backlink {
    top: 10px;
    left: 10px;
    min-height: 34px;
    padding-inline: 11px;
    font-size: 12px;
  }

  .app-site.app-hofstmap .header {
    min-height: 76px;
    height: auto;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    padding: 8px 12px;
  }

  .app-site.app-hofstmap .country-select {
    max-width: 8.75rem;
  }

  .app-site.app-hofstmap .country-display {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    font-size: 14px;
  }

  .app-site.app-hofstmap .header-right {
    grid-column: 2;
    grid-row: 1;
  }

  .app-site.app-hofstmap #faders-panel {
    height: 300px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
    grid-auto-flow: row;
  }

  .app-site.app-hofstmap .fader-row {
    gap: 8px;
    padding: 0 12px;
    border-left: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .app-site.app-hofstmap .fader-row:last-child {
    border-bottom: 0 !important;
  }

  .app-site.app-hofstmap .fader-label {
    width: 96px;
  }

  .app-site.app-hofstmap .fader-num {
    width: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-site *,
  .app-site *::before,
  .app-site *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}