/* ============================================================================
   Osseus — the memory-layer system map (/product/memory-layer/).

   Four kinds of work converge on one permissioned record, then fan back out
   into what that record enables. Lifted from the home page's "why" section so
   the graphic has one owner; scoped under .ml-map so it carries its own
   tokens rather than inheriting .why-section's.
   ========================================================================= */

.ml-map{--why-accent:#A9542C;--why-blue:#A9542C;--why-line:#E5E5E5}

/* corner marks */
.why-frame{position:relative}
.why-frame>.xh.c-tl{top:-7px;left:-7px}
.why-frame>.xh.c-br{bottom:-7px;right:-7px}

/* the card the whole map sits in */
.why-system-map{
  position:relative;overflow:hidden;
  border:1px solid rgba(10,10,10,.08);border-radius:16px;background:#FCFCFB;
  box-shadow:0 18px 47px rgba(0,0,0,.03),0 7.5px 19px rgba(0,0,0,.02),0 4px 10.5px rgba(0,0,0,.02);
}

/* ---- top row: the four kinds of work ---- */
.why-work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff}
.why-work{min-width:0;padding:clamp(19px,2.3vw,27px) clamp(15px,2vw,24px) clamp(17px,2.1vw,25px)}
.why-work + .why-work{border-left:1px solid var(--why-line)}
.why-work-index{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(43,38,32,.56)}
.why-work-index b{font:inherit;color:var(--why-blue)}
.why-work h3{font-family:var(--font-display);font-size:clamp(17px,1.7vw,21px);font-weight:500;line-height:1.16;letter-spacing:-.015em;margin:0 0 7px}
.why-work>p{font-size:11.75px;line-height:1.5;color:rgba(43,38,32,.57);margin:0;min-height:50px}

/* tool chips */
.why-source-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.why-source{display:inline-flex;align-items:center;gap:5px;min-width:0;border:1px solid rgba(43,38,32,.13);border-radius:100px;background:#fff;padding:4px 8px 4px 6px;font-size:9.5px;font-weight:700;line-height:1;white-space:nowrap;color:rgba(43,38,32,.78)}
.why-source img{width:13px;height:13px;object-fit:contain;display:block}
.why-work .why-source{border-color:rgba(10,10,10,.1);box-shadow:0 5px 16px -15px rgba(18,23,35,.8)}

/* ---- the converging / diverging connectors ---- */
.why-join{height:clamp(54px,5.4vw,76px);margin:0 4%;color:var(--why-blue)}
.why-join svg{display:block;width:100%;height:100%;overflow:visible}
.why-join path{fill:none;stroke:currentColor;stroke-width:1.15;vector-effect:non-scaling-stroke;opacity:.36}
.why-join circle{fill:#fff;stroke:currentColor;stroke-width:1.25;vector-effect:non-scaling-stroke}

/* ---- the memory core ---- */
.why-memory-wrap{display:flex;justify-content:center;padding:0 clamp(20px,4vw,56px)}
.why-memory-core{
  position:relative;width:min(430px,100%);
  padding:clamp(19px,2.1vw,25px) clamp(20px,2.8vw,32px);
  border:1px solid rgba(169,84,44,.24);border-radius:16px;
  background:
    radial-gradient(circle at 12% 0,rgba(173,216,242,.34),transparent 35%),
    radial-gradient(circle at 88% 0,rgba(211,190,233,.34),transparent 36%),
    rgba(255,255,255,.96);
  box-shadow:0 18px 47px rgba(0,0,0,.03),0 7.5px 19px rgba(0,0,0,.02),0 4px 10.5px rgba(0,0,0,.02);
  text-align:center;
}
.why-memory-mark{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 11px;border:1px solid rgba(169,84,44,.2);border-radius:50%;background:#fff;box-shadow:0 9px 22px -16px rgba(18,23,35,.75)}
.why-memory-mark img{display:block;width:23px;height:23px}
.why-memory-label{display:block;margin-bottom:6px;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--why-blue)}
.why-memory-core h3{font-family:var(--font-display);font-size:clamp(21px,2.3vw,28px);font-weight:500;line-height:1.05;letter-spacing:-.032em;margin:0 0 9px;text-wrap:balance}
.why-memory-core p{max-width:33em;margin:0 auto;font-size:12.25px;line-height:1.55;color:rgba(43,38,32,.64);text-wrap:pretty}
.why-memory-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:13px;font-size:9px;font-weight:750;letter-spacing:.04em;color:rgba(43,38,32,.5)}
.why-memory-meta span{display:inline-flex;align-items:center;gap:6px}
.why-memory-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--why-blue);opacity:.72}

/* ---- bottom row: what the record enables ---- */
.why-impact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--why-line);background:#fff}
.why-impact{min-width:0;padding:clamp(18px,2.2vw,26px) clamp(15px,2vw,24px) clamp(19px,2.3vw,28px)}
.why-impact + .why-impact{border-left:1px solid var(--why-line)}
.why-impact-index{display:block;margin-bottom:13px;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(43,38,32,.5)}
.why-impact h4{font-family:var(--font-display);font-size:clamp(15.5px,1.45vw,18px);font-weight:500;line-height:1.18;letter-spacing:-.01em;margin:0 0 7px}
.why-impact p{font-size:11.25px;line-height:1.5;color:rgba(43,38,32,.61);margin:0;text-wrap:pretty}

/* the closing rule-and-caption line */
.why-boundary{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:12px;line-height:1.5;font-weight:600;color:rgba(43,38,32,.56);margin:18px 0 0}
.why-boundary::before,.why-boundary::after{content:"";height:1px;flex:1;background:var(--why-line)}
.why-boundary span{padding:0 7px}

@media (max-width:900px){
  .why-work-grid,.why-impact-grid{grid-template-columns:1fr 1fr}
  .why-work:nth-child(odd),.why-impact:nth-child(odd){border-left:0}
  .why-work:nth-child(n+3),.why-impact:nth-child(n+3){border-top:1px solid var(--why-line)}
  /* the fan collapses to a single spine on narrow screens */
  .why-join{position:relative;height:70px;margin:0}
  .why-join svg{display:none}
  .why-join::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(169,84,44,.34)}
  .why-join::after{content:"";position:absolute;left:calc(50% - 4px);bottom:-1px;width:7px;height:7px;border:1px solid var(--why-blue);border-radius:50%;background:#fff}
  .why-join--out::after{top:-1px;bottom:auto}
}
@media (max-width:620px){
  .why-work-grid,.why-impact-grid{grid-template-columns:1fr}
  .why-work + .why-work,.why-impact + .why-impact,
  .why-work:nth-child(n+3),.why-impact:nth-child(n+3){border-left:0;border-top:1px solid var(--why-line)}
  .why-work>p{min-height:0}
  .why-boundary{font-size:11.5px}
  .why-boundary::before,.why-boundary::after{display:none}
}