/* Homepage refresh (Rurik, 2026-10-11): a more modern feel within the brand.
   Scoped to <body class="modern">, loaded last (after buttons.css), so other
   pages opt in later by adding the class and this file.

   1. Headlines: Synapse Medium, -3% tracking, 1.08 line height (the brand
      hub's Headline style is Medium at -3%).
   2. Ledes: 17px on desktop; 70% ink on light sections, softer white on dark.
   3. Figures: tabular numerals wherever numbers line up.
   4. One radius scale and one hairline: 12px cards and panels, 1px borders
      at 12% ink (14% cyan on dark). The hero's Figma cards and the platform
      diagram's nested shell keep theirs.
   5. Section rhythm: 128px above and below every section on desktop.
   6. Header: now in css/header.css (hairline + 80->64px trim on scroll,
      smaller logo, closer nav), so every SiteHeader page gets it.
   (7. Scroll-in was tried and dropped: too busy next to the highlight text.)
   8. Hover: a small arrow on the main page buttons that nudges right; the
      linked proof tiles rise 2px with a firmer edge. */

/* ---------- 1. Headlines ---------- */

.modern :is(.hero-title, .section-heading, .mcp-heading, .demo-heading) {
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.08;
}

.modern :is(.ind-title, .mosaic-heading) {
  font-weight: 500;
  letter-spacing: -.02em;
}

/* Highlighted words keep their headline's weight (Sonia, 2026-10-13: the
   heavier 560/600 optical compensation read as bold). */

/* ---------- 2. Ledes ---------- */

@media (min-width: 1024px) {
  .modern :is(.section-body, .proof-lede, .hero-desc, .mcp-desc, .demo-desc) {
    font-size: 17px;
  }
}

.modern :is(.section-body, .proof-lede) { color: rgba(32, 31, 29, .7); }
.modern :is(.hero-section--sandbox .hero-desc, .mcp-desc) { color: rgba(255, 255, 255, .78); }
.modern .demo-desc { color: rgba(255, 255, 255, .74); }

/* ---------- 3. Figures ---------- */

.modern :is(.stat-number, .pd-num, .rg-mono, .ph-checks, .tl-legal) {
  font-variant-numeric: tabular-nums;
}

/* ---------- 4. Radius and hairlines ---------- */

/* The platform diagram keeps its own nested radii (an outer shell wrapping
   the gold card), so it isn't part of this scale. */
.modern :is(.rg-frame, .ind-frame, .fig-panel) {
  border-radius: 12px;
  border-color: rgba(32, 31, 29, .12);
}

.modern .mcp-frame {
  border-radius: 12px;
  border-color: rgba(201, 254, 255, .14);
}

/* ---------- 5. Section rhythm (desktop) ---------- */

@media (min-width: 1024px) {
  .modern :is(.proof-inner, .rg-inner, .mcp-inner, .industries-inner, .stops-inner, .demo-inner, .connect-embed .hero-inner) {
    padding-top: 128px;
    padding-bottom: 128px;
  }

  /* "The enterprise-grade harness" is two blocks: intro, then the diagram. */
  .modern .problem-section { padding-top: 128px; }
  .modern .compare-section { padding-bottom: 128px; }
}

/* ---------- 6. Header ---------- */
/* Moved to css/header.css (2026-10-11): the homepage header is the standard
   for every page that uses SiteHeader, with or without this class. */

/* The MCP section's soft glow reaches 10% past its video frame, which at
   ~1100-1150px wide runs off the page and adds a sideways scroll; clip it
   at the section's edge. */
.modern .mcp-section { overflow-x: clip; }

/* Footer: between 1024 and 1199px its link columns plus the social icons
   ran ~18px past the page edge; closer columns keep them inside. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .modern .sf-nav { gap: 40px; }
}

/* ---------- 8. Hover ---------- */

.modern :is(.btn-citron, .btn-gradient, .btn-demo-white)::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: -2px; /* the button's 8px gap is a touch wide for an arrow */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h7.5M6.5 2.8 9.7 6l-3.2 3.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h7.5M6.5 2.8 9.7 6l-3.2 3.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate .2s ease;
}

.modern :is(.btn-citron, .btn-gradient, .btn-demo-white):is(:hover, :focus-visible)::after {
  translate: 3px 0;
}

.modern .proof-cols a.proof-cell--link {
  transition: box-shadow .2s ease, translate .2s ease, border-color .2s ease;
}

.modern .proof-cols a.proof-cell--link:hover {
  translate: 0 -2px;
  border-color: rgba(32, 31, 29, .22);
}

@media (prefers-reduced-motion: reduce) {
  .modern :is(.btn-citron, .btn-gradient, .btn-demo-white):is(:hover, :focus-visible)::after { translate: none; }
  .modern .proof-cols a.proof-cell--link:hover { translate: none; }
}