/* MapMend-specific content; shared detail-page styles provide the site theme. */
section[id], #main { scroll-margin-top:150px; }
.hero { grid-template-columns:1.2fr 1fr; align-items:center; padding-top:40px; padding-bottom:36px; }
.hero h1 span { color:var(--green); }
.product-tagline { font-size:clamp(22px,2.7vw,34px); margin:0; line-height:1.3; }
.alignment-figure { margin:0; padding:26px; border:1px solid #ccdee5; border-radius:20px; background:#ffffffc9; box-shadow:0 20px 60px #073b5c09; }
.figure-label { font-size:12px; line-height:1.6; margin-bottom:20px; color:var(--muted); }
.alignment-figure svg { display:block; width:100%; height:auto; }
figcaption { display:flex; flex-wrap:wrap; gap:12px; font-size:11px; margin-top:20px; color:var(--muted); }
figcaption span { display:flex; align-items:center; gap:6px; }
figcaption i { width:18px; display:inline-block; }
.source-key { border-top:3px dashed #1686c7; }
.reference-key { border-top:3px solid #2e8b57; }
figcaption small { flex-basis:100%; }
.product-nav { display:flex; margin:0; padding:24px clamp(22px,8vw,132px); gap:32px; flex-wrap:wrap; background:white; border-bottom:1px solid var(--line); font-size:13px; }
.product-nav a { opacity:1; }
.supporting-copy { margin-top:18px; }
.benefit-number { display:block; color:var(--green); font-size:12px; margin-bottom:28px; }
.example { margin:32px 0 0; padding:24px 0 0; border-top:1px solid #c7dbd0; color:var(--muted); line-height:1.8; }
.process .steps { grid-template-columns:repeat(4,minmax(0,1fr)); }
.process-note { margin:30px 0 0; border-top:1px solid #456b82; padding-top:24px; line-height:1.7; font-size:14px; }
.cta > p:not(.label) { color:var(--muted); line-height:1.7; margin-bottom:28px; }
.mapmend-cta-actions { align-items:center; gap:20px 28px; }
.conflation-link { display:inline-block; margin:0; font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.mapmend-benefits { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:850px) { .hero { grid-template-columns:1fr; } .alignment-figure { width:100%; max-width:520px; } .mapmend-benefits { grid-template-columns:1fr; } .process .steps { grid-template-columns:1fr 1fr; } }
@media(max-width:560px) { .product-nav { flex-direction:column; gap:18px; } .process .steps { grid-template-columns:1fr; } .alignment-figure { padding:20px; } }
@media(max-width:850px) { .hero { padding-top:46px; padding-bottom:42px; } }
@media(max-width:560px) { .hero { padding-top:38px; padding-bottom:34px; } .alignment-showcase h2 { margin-top:14px; } }

/* Keep the comparison split fixed so the two states remain visible at once. */
.alignment-map { --comparison:50%; background:#eaf2f3; }
.alignment-map > svg .reference-geometry, .alignment-map > svg .reference-geometry path { stroke:#2e8b57 !important; stroke-width:5 !important; fill:none; stroke-linejoin:round; opacity:.45; }
.alignment-map > svg .source-geometry, .alignment-map > svg .source-geometry path { stroke:#006da8 !important; stroke-width:8 !important; stroke-dasharray:12 8 !important; fill:none; stroke-linejoin:round; opacity:1; }
.alignment-before .source-geometry { stroke:#087dc1; stroke-width:3; stroke-dasharray:7 5; fill:none; }
.map-divider b { min-width:78px; }

/* Interactive map comparison, framed as a product banner. */
.alignment-showcase { --comparison:50%; padding:28px; background:linear-gradient(145deg,#fff,#f1f8f5); border:1px solid #c5dcd8; border-radius:24px; box-shadow:0 24px 60px #073b5c16; }
.alignment-showcase { padding:20px; }
.alignment-showcase h2 { margin-top:12px; margin-bottom:8px; }
.alignment-intro { margin-bottom:12px; }
.alignment-map > svg { height:220px; object-fit:cover; }
.alignment-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.alignment-eyebrow { font-size:9px; font-weight:700; letter-spacing:.15em; color:#52756c; }
.alignment-badge { padding:6px 10px; border:1px solid #c0dbc9; border-radius:20px; color:#286842; font-size:10px; background:#e7f4eb; }
.alignment-showcase h2 { margin:20px 0 12px; font-size:clamp(26px,2.5vw,36px); line-height:1.15; letter-spacing:-.04em; font-weight:500; }
.alignment-showcase h2 span { color:#2e8b57; }
.alignment-intro { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 20px; }
.alignment-tabs { display:flex; gap:6px; margin-bottom:16px; padding:4px; border:1px solid #d4e4e4; border-radius:10px; background:#e8f0f1; }
.alignment-tabs button { flex:1; padding:11px 8px; border:0; border-radius:7px; color:#526f7d; background:transparent; font:600 12px Inter,sans-serif; cursor:pointer; }
.alignment-tabs button[aria-pressed="true"] { background:#073b5c; color:#fff; box-shadow:0 3px 8px #073b5c20; }
.alignment-map { position:relative; overflow:hidden; border:2px solid #b7d0d3; border-radius:12px; isolation:isolate; }
.alignment-map::before, .alignment-map::after { content:""; position:absolute; top:0; bottom:0; z-index:1; pointer-events:none; }
.alignment-map::before { left:0; width:var(--comparison); background:transparent; border-right:1px dashed rgba(7,59,92,.35); }
.alignment-map::after { left:var(--comparison); right:0; background:transparent; }
.alignment-map > svg { display:block; width:100%; position:relative; z-index:0; }
.alignment-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--comparison)) 0 0); z-index:2; }
.alignment-before svg { width:100%; height:100%; }
.map-label { position:absolute; top:14px; z-index:3; display:flex; flex-direction:column; gap:4px; width:42%; border-radius:8px; background:transparent; padding:10px 12px; font-size:11px; font-weight:600; line-height:1.25; text-shadow:0 1px 3px #fff, 0 0 5px #fff; }
.map-label small { font-size:9px; font-weight:400; color:#526f7d; }
.before-label { left:12px; color:#087dc1; }.after-label { right:12px; color:#286842; text-align:right; }
.map-divider { position:absolute; top:0; bottom:0; left:var(--comparison); width:3px; z-index:4; background:#fff; box-shadow:0 0 8px #073b5c60; pointer-events:none; }
.map-divider b { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; min-width:66px; height:30px; padding:0 8px; border-radius:20px; background:#073b5c; color:#fff; font-size:9px; letter-spacing:.06em; box-shadow:0 2px 12px #073b5c40; }
.map-legend { position:absolute; z-index:3; bottom:12px; display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:5px; background:#fffffff2; color:#526f7d; font-size:9px; box-shadow:0 2px 8px #073b5c18; }
.source-legend { left:12px; }.reference-legend { right:12px; }
.map-legend i { width:16px; display:inline-block; }
.map-legend .source-key { border-top:3px dashed #006da8; }.map-legend .reference-key { border-top:3px solid #2e8b57; }
.alignment-example-copy { min-height:3.2em; font-size:12px; line-height:1.6; color:#526f7d; margin:12px 0 0; }
.alignment-showcase figcaption { align-items:center; border-top:1px solid #d7e6e4; padding-top:14px; margin-top:16px; }
.alignment-play { margin-left:auto; border:0; border-bottom:1px solid #a4bfb9; background:transparent; color:#356452; font:inherit; padding:8px 0; min-height:32px; cursor:pointer; }
.alignment-showcase figcaption small { color:#70888c; font-size:10px; }
@media(max-width:560px) { .alignment-showcase { padding:20px; }.alignment-heading { gap:8px; }.alignment-badge { font-size:9px; } }