/* ==========================================================================
   Motion layer styles (js/marshal-motion.js) — shared by all three sites.
   ========================================================================== */

/* Headlines are split into masked lines; marks hang off the last line */
.h2, .closing__title, .hw-contact__title, .pricing__title { position: relative; }
.mline { padding-bottom: .04em; }
.mline-mask { padding-bottom: .16em; margin-bottom: -.16em; padding-right: .06em; }
.mo-u { position: absolute; height: .34em; overflow: visible; pointer-events: none; }
.mo-u path, .mo-c path, .mo-t path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mo-u--pen path { stroke: var(--pen, var(--accent)); stroke-width: 3; }
.mo-u--marker path { stroke: var(--marker, var(--accent)); stroke-width: 7; opacity: .82; }
.mo-u--marker path + path { stroke-width: 4; opacity: .55; }

/* Red pen / marker circles around figures, ticks in lists */
.stat { position: relative; }
.stat__value { justify-self: start; }
.mo-c { position: absolute; pointer-events: none; overflow: visible; }
.mo-c--pen path { stroke: var(--pen, var(--accent)); stroke-width: 2.6; }
.mo-c--marker path { stroke: var(--marker, var(--accent)); stroke-width: 4.5; opacity: .8; }
.chapter__bullets li.has-tick::before { content: none !important; }
.chapter__bullets li.has-tick { align-items: flex-start; }
.mo-t { width: 20px; height: 18px; flex: none; margin-top: 3px; overflow: visible; }
.mo-t path { stroke: var(--pen, var(--marker, var(--accent))); stroke-width: 2.6; }

/* Schools: the red margin line is drawn down the page */
body.product-schools::before { transform: scaleY(var(--margin-scale, 1)); transform-origin: 50% 0; }

/* Ridge line in the Headway hero */
.mo-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 12vw, 170px); pointer-events: none; z-index: 0; overflow: visible; }
.mo-ridge path { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.mo-ridge path:first-child { stroke: var(--text); opacity: .25; }
.mo-ridge path:last-child { stroke: #f48129; stroke-width: 2.2; }

/* Business Suite: the barcode scanner on the till screen */
.frame--hero { outline: 3px solid transparent; outline-offset: 4px; }
.mo-scan {
    position: absolute; left: 0; right: 0; top: 40px; height: 2px; z-index: 4; opacity: 0; pointer-events: none;
    background: #ff3b30; box-shadow: 0 0 14px 3px rgba(255, 59, 48, .55);
}

/* Fields: the GPS track and the coordinates on the map collar */
.mo-track { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; overflow: visible; }
.mo-track__path { fill: none; stroke: var(--contour, #93633a); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.mo-track__pin circle { fill: var(--accent, #3f6e21); }
.mo-track__pin .mo-track__ring { fill: none; stroke: var(--accent, #3f6e21); stroke-width: 2; }
body.has-coords::after { content: none !important; }
.mo-coords {
    position: fixed; z-index: 2; left: 22px; bottom: 28px; margin: 0; pointer-events: none;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font: 500 12px/1 var(--sans); letter-spacing: .04em; color: var(--text-dim);
    font-variant-numeric: tabular-nums; white-space: pre;
}
@media (max-width: 700px) { .mo-coords { display: none; } }

/* Page transition: woven strips, then the destination's paper */
.pt__strip { position: absolute; left: 0; right: 0; }
.pt__name .pt__c { display: inline-block; white-space: pre; }

@media (prefers-reduced-motion: reduce) { .mo-scan, .mo-track, .mo-ridge { display: none; } }