/* The "Less friction" and "Why HirePrism" sections. Each has its own visual idea:
   friction is a before/after ledger split by a beam of light; benefits are three figures set inside glowing prisms. */

/* Less friction: the usual way on the left, struck through; a spectrum beam; the HirePrism way on the right */
.friction{background:var(--cream)}
.fx{position:relative;margin-top:46px;border-top:1px solid rgba(196,184,168,.6)}
.fx-head,.fx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:110px}
.fx-head{padding:18px 0 14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#9A9186}
.fx-head span:last-child{color:var(--rust)}
.fx-row{align-items:center;padding:28px 0;border-top:1px solid rgba(196,184,168,.45)}
.fx-old{margin:0;font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;font-size:clamp(18px,1.7vw,22px);line-height:1.35;color:#A39A8E;
  text-decoration:line-through;text-decoration-color:rgba(181,98,42,.6);text-decoration-thickness:1.5px}
.fx-new{display:flex;gap:18px;align-items:flex-start}
.fx-new .orb.sm{width:34px;height:34px;flex:0 0 34px;margin-top:2px}
.fx-new .orb.sm::after{filter:blur(6px)}
.fx-new h3{margin:0 0 6px;font-size:18px;font-weight:600;color:var(--char)}
.fx-new p{margin:0;font-size:15px;line-height:1.65;color:var(--muted);max-width:52ch}
.fx-beam{position:absolute;top:0;bottom:0;left:calc((100% - 110px) / 2.3 + 55px);width:3px;transform:translateX(-50%);border-radius:3px;
  background:linear-gradient(180deg,rgba(79,195,247,0),#4FC3F7 12%,#7C6BF5 38%,#E05FA8 64%,#F0A030 88%,rgba(240,160,48,0))}
.fx-beam::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:70px;transform:translateX(-50%);filter:blur(26px);opacity:.22;mix-blend-mode:multiply;
  background:linear-gradient(180deg,transparent,#4FC3F7,#7C6BF5,#E05FA8,#F0A030,transparent)}
@media(max-width:760px){
  .fx-head,.fx-beam{display:none}
  .fx-row{grid-template-columns:1fr;row-gap:12px}
  .fx-old{font-size:16px}
  .fx-old::before{content:"Instead of: ";text-decoration:none;display:inline-block;margin-right:6px;font-family:ui-sans-serif,-apple-system,sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#9A9186}
}

/* Why HirePrism: three figures, each set inside a prism with a spectrum edge */
.benefits .eyebrow,.benefits h2{text-align:center;margin-left:auto;margin-right:auto}
.benefits h2{max-width:22ch}
.bn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:54px}
.bn-item{position:relative;padding:0 34px;text-align:center}
.bn-item+.bn-item::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;opacity:.45;
  background:linear-gradient(180deg,transparent,#4FC3F7,#7C6BF5,#E05FA8,#F0A030,transparent)}
.bn-fig{position:relative;width:min(230px,82%);aspect-ratio:220/200;margin:0 auto 28px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:9%}
.lens{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bn-fig>span{position:relative;display:flex;flex-direction:column;align-items:center;font-size:clamp(42px,4.4vw,56px);line-height:1;color:var(--cream)}
.bn-fig small{margin-top:10px;font-family:ui-sans-serif,-apple-system,"Segoe UI",sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#D89250}
.bn-item h3{margin:0 0 10px;font-size:clamp(21px,2vw,25px);line-height:1.2;font-weight:400;color:var(--cream)}
.bn-item p{margin:0 auto;max-width:32ch;font-size:15px;line-height:1.7;color:#B7AEA2}
.bn-note{margin:46px auto 0;max-width:78ch;text-align:center;font-size:12.5px;line-height:1.6;color:#8E867B}
@media(max-width:860px){
  .bn{grid-template-columns:1fr;row-gap:44px}
  .bn-item{padding:0}
  .bn-item+.bn-item::before{left:15%;right:15%;top:-22px;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,#4FC3F7,#7C6BF5,#E05FA8,#F0A030,transparent)}
}