/* Screen stylesheet - produced by apply-assignment.py.
   Source: .claude/claude-design-extractions/fitforce/design.css

   This is design.css in the design's own order, with the selector roots
   marked `drop` in css-assignment.json removed. Nothing is reordered or
   regrouped: the cascade is the design's cascade, which is the only reason
   the responsive layer still resolves the way it was authored.

   Do not edit by hand. Change design.css or the assignment and re-run. */

/* The @media blocks from the file above, loaded after every page
   stylesheet so they still override the base rules they were written
   against - see split-responsive.py for why that is not automatic. */

@media (max-width: 1200px) {
  #ffroot {
  width: 100%;
    min-width: 0;
    transform: none;
    position: static;
  }

  #ffroot h1 {
  font-size: 3rem;
  }

  #ffroot h2 {
  font-size: 2rem;
  }

  .pad {
  padding-left: 32px;
    padding-right: 32px;
  }

  .w1146 {
  width: auto;
    max-width: 100%;
  }

  .herobar {
  grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #DDDDDD;
  }

  .herocell {
  flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 26px;
    padding: 44px 20px 48px;
    border-left: none;
    background: #FBF7F0;
  }

  .herocell img {
  width: 56px;
    height: 56px;
  }

  .herocell div {
  font-size: 1.1875rem;
    line-height: 1.35;
  }

  .g3, .g2, .res, .faq, .chips-row {
  grid-template-columns: 1fr;
    gap: 32px;
  }

  .hdr {
  flex-wrap: wrap;
    gap: 20px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .nav {
  order: 3;
    width: 100%;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 0.875rem;
  }

  .footgrid {
  grid-template-columns: 1fr 1fr;
    gap: 48px 24px;
  }

  .footbar {
  flex-direction: column;
    gap: 8px;
  }

  .marquee-sm {
  font-size: 3.125rem;
  }
}

@media (max-width: 768px) {
  #ffroot h1 {
  font-size: 2.25rem;
  }

  #ffroot h2 {
  font-size: 1.875rem;
  }

  .pad {
  padding-left: 20px;
    padding-right: 20px;
  }

  .nav {
  display: none;
  }

  .phoneblk {
  display: none;
  }

  .burger {
  display: flex;
  }

  .hdr {
  padding: 16px 20px;
    align-items: center;
    height: 64px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    gap: 16px;
  }

  .hdr > * {
  height: 32px;
    max-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    align-self: center;
  }

  .logo {
  height: 32px;
  }

  .burger {
  width: 36px;
    height: 32px;
    max-height: 32px;
    gap: 6px;
  }

  .burger span {
  width: 30px;
    height: 2.5px;
  }

  #ffroot .hero-copy h1 {
  font-size: 3.125rem;
    line-height: 1.1;
    margin-left: auto;
    margin-right: auto;
  }

  .footgrid {
  grid-template-columns: 1fr;
  }

  .res {
  display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 70px;
  }

  [data-ba-track] {
  scrollbar-width: thin;
    scrollbar-color: #101010 #E4E0D5;
    padding-bottom: 16px;
  }

  .btn-blue {
  font-size: 0.9375rem;
  }

  [data-hide-mob="1"] {
  display: none;
  }

  [data-prob-track] {
  display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: #101010 #E4E0D5;
  }

  [data-prob-track] {
  border-radius: 0;
  }

  .marquee-sm {
  font-size: 2rem;
  }
}

@media (max-width: 450px) {
  #ffroot .hero-copy h1 {
  font-size: 2.625rem;
  }

  .marquee-sm {
  font-size: 1.625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] {
  opacity: 1;
    transform: none;
    transition: none;
  }

  [data-photo] img {
  transform: none;
    transition: none;
  }

  [data-hl] > span, [data-fu] {
  animation: none;
    transform: none;
    opacity: 1;
  }

  .marquee-sm {
  animation: none;
  }
}

@media (max-width: 768px) {
  [data-ba-track]::-webkit-scrollbar, [data-prob-track]::-webkit-scrollbar {
  display: block;
    height: 7px;
  }

  [data-ba-track]::-webkit-scrollbar-track, [data-prob-track]::-webkit-scrollbar-track {
  background: #E4E0D5;
    border-radius: 4px;
  }

  [data-ba-track]::-webkit-scrollbar-thumb, [data-prob-track]::-webkit-scrollbar-thumb {
  background: #101010;
    border-radius: 4px;
  }
}