/* survpic-www — shared styles.
   Hover colors below are the style-hover values from the Claude Design export;
   .bill-btn styles are the DCLogic toggle styles from the Pricing export.
   The 768px block reflows the desktop artboards for small screens: stacked
   grids, 24px side padding, scaled display headings. No other restyling. */

img { max-width: 100%; }

/* hover states (from style-hover attributes; !important to beat inline styles) */
.hov-cta:hover { background: #d94e06 !important; color: #fff !important; }
.hov-dark:hover { background: #0E1620 !important; color: #fff !important; }
.hov-outline:hover { border-color: #FD5D0A !important; color: #FD5D0A !important; }

/* pricing billing toggle (ported from the export's DCLogic component) */
.bill-btn {
  font-family: Barlow, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #B8C4D2;
}
.bill-btn.active { background: #FD5D0A; color: #fff; }

/* early-access form states (design tokens from the export) */
.notify-ok {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: .1em;
  color: #FD5D0A;
  line-height: 1.6;
}
.notify-err {
  font-size: 14px;
  color: #FD5D0A;
  line-height: 1.55;
}

/* content container: on wide viewports each section's side padding grows so
   its content sits centered in a 1440px column (content box 1440 - 2*64 =
   1312px). Backgrounds stay full-bleed because they live on the section
   div itself. .self-capped marks sections that already carry their own
   inline max-width + auto margins (pricing tiers/rows, early-access grid);
   those keep the plain 64px padding so the growing padding can't crush
   their narrower fixed columns. */
.sec {
  padding-left: max(64px, calc(50% - 656px)) !important;
  padding-right: max(64px, calc(50% - 656px)) !important;
}
.sec.self-capped {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

/* small screens: reflow only */
@media (max-width: 768px) {
  /* .sec.self-capped listed explicitly: its 64px rule above has higher
     specificity, so a bare .sec here would lose the !important tie */
  .sec, .sec.self-capped { padding-left: 24px !important; padding-right: 24px !important; }
  .grid-stack { grid-template-columns: 1fr !important; }
  .flex-stack { flex-direction: column !important; align-items: flex-start !important; }
  .nav-row { flex-wrap: wrap; row-gap: 10px; }
  .nav-links { flex-wrap: wrap; row-gap: 10px; }
  .foot { flex-wrap: wrap; row-gap: 12px; }
  .fs-l { font-size: 44px !important; }
  .fs-m { font-size: 40px !important; }
  .fs-s { font-size: 36px !important; }
  .share-pop { right: 8px !important; }
}