/* Penny Logic site styles. Generated by tools/build.py from the canvas artboards. */
@font-face {
  font-family: "Inter";
  src: url(/assets/fonts/Inter-Variable.ttf) format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fafafa; min-height: 100vh; }
a { color: #000000; text-decoration: none; }
a:hover { color: #000000; opacity: 0.8; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #000000; outline-offset: 2px; }
.pl-dark a { color: #fafafa; }
.pl-dark a:hover { color: #fafafa; }
.pl-dark a:focus-visible { outline-color: #fafafa; }
.svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 64px; max-width: 1280px; margin: 0 auto; padding: 96px 64px 112px; box-sizing: border-box; }
img { max-width: 100%; }

/* Tablet and below: each service stacks, image first, then its text. */
@media (max-width: 1024px) {
  .svc { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 24px; padding-top: 64px; padding-bottom: 80px; }
  .svc > * { grid-column: 1 / -1 !important; align-self: start !important; min-width: 0; }
  .svc > .svc-img { height: auto !important; aspect-ratio: 16 / 10; margin-top: 56px; }
  .svc > :nth-child(1) { order: 2; }
  .svc > :nth-child(2) { order: 1; margin-top: 0; }
  .svc > :nth-child(3) { order: 3; }
  .svc > :nth-child(4) { order: 4; }
  .svc > :nth-child(5) { order: 6; }
  .svc > :nth-child(6) { order: 5; }
  .svc h2 { font-size: 3rem !important; }
  .svc p { max-width: 36em !important; }
}

/* Phones: tighter gutters and shorter bands. */
@media (max-width: 640px) {
  header, section, footer, .svc { padding-left: 24px !important; padding-right: 24px !important; }
  header { padding-top: 16px !important; padding-bottom: 16px !important; }
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .svc { padding: 48px 0 64px !important; }
  .svc > .svc-img { aspect-ratio: 4 / 3; margin-top: 48px; border-radius: 8px !important; }
  .svc > :nth-child(2) { margin-top: 0; }
  .svc h2 { font-size: 2.5rem !important; }
  footer { padding: 48px 24px 32px !important; }
  h1 { font-size: 2.5rem !important; }
  h1 + p, section p[style*="font-size: 1.5rem"] { font-size: 1.25rem !important; }
}