/* Global styles for the Gerrit Learns landing page (Figma MacBook Pro 16" - 1, 1728px wide) */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Off-screen but available to screen readers / SEO (e.g. the page H1). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

html, body { background: #01353e; }

/* Responsive wrapper: scales the fixed 1728px page to fit the viewport (see responsive.js) */
.page-fit {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.page {
  position: relative;
  width: 1728px;
  margin: 0;
  transform-origin: top left;
  will-change: transform;
  background: #f0efe2; /* cream base; sections paint their own bg on top */
  font-family: "Inter", system-ui, sans-serif;
  overflow: hidden;
}

/* Each converted section is a fixed-size relative block; children are absolute. */
.sec { position: relative; width: 1728px; }
.sec img { -webkit-user-drag: none; user-drag: none; }

/* Thin divider line between the CTA bar and the hero (Figma node 1:58, y190, h6) */
.divider { width: 1728px; height: 6px; background: #0b39ce; }

/* ============================================================
   MOBILE BASE (<= 768px): switch from scaled canvas to fluid reflow.
   Per-section stacking lives in each sections/*.css @media block.
   ============================================================ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .page { width: 100% !important; transform: none !important; }
  .page-fit { height: auto !important; overflow: visible; }
  .sec { width: 100% !important; }            /* width fluid; heights per-section */
  .divider { width: 100% !important; }

  /* Simple full-width blades that keep their design height (absolute content) */
  #sec-header, #sec-tickers { overflow: hidden; }
  #cta-btn { left: 24px !important; }
}

/* ============================================================
   Ticker marquee — seamless right-to-left scroll.
   Each .tk-track holds identical halves; animating to -50%
   shifts exactly one half, so the loop has no jump/gap.
   ============================================================ */
.tk-track {
  display: flex;
  flex: none;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: tk-marquee var(--tk-dur, 32s) linear infinite;
}
@keyframes tk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tk-track { animation: none; }
}