/* ==========================================================================
   Shared section components (homepage, Resources, business profile,
   Applications). Loaded after style.css, before any page stylesheet.
   Spec: docs/DESIGN.md. All motion sits inside prefers-reduced-motion:
   no-preference; without it everything renders at rest.
   ========================================================================== */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 96px 0; }
.sec h2 { margin: 0 0 40px; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.15; color: var(--ink); }
.note { margin: 32px auto 0; color: var(--ink-2); font-size: 15px; }
.all-link { margin: 32px 0 0; }
main .ic, main .arr { fill: currentColor; }
.arr { width: 16px; height: 16px; vertical-align: -2px; transition: transform var(--dur-fast) var(--ease-out); }
a:hover .arr, a:focus .arr { transform: translateX(4px); }
/* Anchored sections clear the sticky header when linked to directly */
[id] { scroll-margin-top: 96px; }

/* Link underline draws left to right (M7) */
.cell-links a, .all-link a, .partner .ext, .u-link {
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cell-links a:hover, .cell-links a:focus, .all-link a:hover, .all-link a:focus,
.partner .ext:hover, .partner .ext:focus, .u-link:hover, .u-link:focus { background-size: 100% 1px; }

/* Standard badge */
.chips, .badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .02em;
  padding: 5px 8px; border-radius: 4px; border: 1px solid transparent;
  background: var(--steel-100); color: var(--ink-2);
}
.chip.fire { background: var(--paper); border-color: var(--fire); color: var(--ink); }

/* MAPURA logo: official file, never recoloured; clear space via padding */
.mapura-logo { display: inline-block; padding: 8px; line-height: 0; }
.mapura-logo img { display: block; height: 40px; width: auto; }

/* Testimonial quote */
.quote { margin: 0; padding: 28px; border: 1px solid var(--steel-200); border-radius: 8px; background: var(--paper); }
.quote::before { content: "\201C"; display: block; height: 40px; font-size: 64px; font-weight: 700; line-height: 1; color: var(--brand-magenta); opacity: .4; }
.quote.featured { grid-row: span 2; padding: 40px; border-color: transparent; background: var(--steel-100); display: flex; flex-direction: column; justify-content: space-between; }
.quote blockquote { margin: 0 0 20px; font-size: 1.125rem; line-height: 1.5; color: var(--ink); }
.quote.featured blockquote { font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); line-height: 1.35; font-weight: 500; }
.quote figcaption strong { display: block; color: var(--ink); }
.quote figcaption span { display: block; font-size: 15px; color: var(--ink-2); }

/* Demo request band + form */
.cta-demo { background: var(--steel-100); border-top: 1px solid var(--steel-200); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.cta-copy h2 { margin-bottom: 16px; }
.cta-copy p { margin: 0 0 24px; max-width: 40ch; font-size: 1.125rem; color: var(--ink-2); }
.demo-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; padding: 32px; border: 1px solid var(--steel-200); border-radius: 8px; background: var(--paper); }
.demo-form label { margin-bottom: 20px; font-size: 15px; font-weight: 500; color: var(--ink); }
.demo-form input[type="text"], .demo-form input[type="tel"], .demo-form select {
  margin-top: 6px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--steel-500); border-radius: 4px;
}
.demo-form input:focus, .demo-form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.demo-form .btn { grid-column: 1 / -1; justify-self: start; }
.form-terms { grid-column: 1 / -1; margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }
.form-status { grid-column: 1 / -1; margin: 0; padding: 16px; border-radius: 8px; font-size: 1.0625rem; }
form [hidden], .form-status[hidden] { display: none !important; }
.form-status.ok { background: #eaf4ee; color: #1f5a37; border: 1px solid #b7d8c3; }
.form-status.err { background: #fbeceb; color: #8a2a1d; border: 1px solid #ecc2bc; }

/* Section reveal (M3): fade-up once, only when JS and motion are available */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .rv { opacity: 0; transform: translateY(var(--rise)); }
  .js [data-reveal].is-in .rv {
    opacity: 1; transform: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
}

@media (max-width: 1023px) {
  .cta-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .quote.featured { grid-row: auto; }
}
@media (max-width: 767px) {
  .wrap { padding: 0 16px; }
  .sec { padding: 64px 0; }
  .sec h2 { margin-bottom: 28px; }
  .quote, .quote.featured { padding: 24px; }
  .demo-form { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .demo-form .btn { justify-self: stretch; text-align: center; }
}

/* ---- Cutaway hotspot markers: homepage hero, /resources/, /applications/ ----
   Numbered circles over the cutaway still, placed in % from
   assets/data/cutaway-markers.json. Labels show on hover and focus. */
.hs-list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.hs { position: absolute; left: var(--x, -100px); top: var(--y, -100px); width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: auto; color: var(--paper); text-decoration: none; }
.hs-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 2px 6px rgb(17 20 24 / .25); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.hs.fire .hs-n { background: var(--fire); }
.hs-l { position: absolute; left: 38px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 4px 8px; border-radius: 4px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); }
.hs.left .hs-l { left: auto; right: 38px; }
.hs:hover .hs-l, .hs:focus-visible .hs-l { opacity: 1; }
.hs:hover, .hs:focus-visible { z-index: 3; } /* its label sits above the other numbers */
.hs:hover, .hs:focus { color: var(--paper); }
.hs:focus-visible { outline: none; }
.hs:focus-visible .hs-n { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
@media (max-width: 767px) {
  .hs { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .hs-n { width: 24px; height: 24px; font-size: 13px; box-shadow: 0 0 0 1.5px var(--paper), 0 1px 4px rgb(17 20 24 / .25); }
  .hs-l { display: none; }
}