/* ============================================================
   Why HBIMS-NAF&SA — page extras (loads after about.css system)
   ============================================================ */

/* — four principles: 2×2 struck plates — */
.wy-prin{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1020px;margin:22px auto 0}
.wy-prin div{position:relative;padding:18px 16px 16px;border-radius:16px;text-align:center;
  border:1px solid var(--hb-border);background:linear-gradient(180deg,#FFFDF6,#F6EEDB);
  box-shadow:0 16px 32px -20px rgba(29,22,28,.3),inset 0 1px 0 #fff}
.wy-prin img{width:44px;margin:0 auto 10px;filter:drop-shadow(0 6px 10px rgba(74,55,20,.3))}
.wy-prin b{display:block;font:700 14px/1.4 var(--hb-display);color:var(--hb-ink)}

/* — comparison ledger: Agent Route vs NAF&SA Route — */
.wy-cmp{width:100%;max-width:980px;margin:0 auto;border-collapse:separate;border-spacing:0;
  border:1.5px solid #D9A64C;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 58px -30px rgba(29,22,28,.38)}
.wy-cmp th{padding:16px 18px;font:700 15px/1.2 var(--hb-display);letter-spacing:.02em}
.wy-cmp th:first-child{background:linear-gradient(180deg,#8C3B32,var(--hb-burg) 58%,#5A1F1A);
  color:#FCF7EA;border-right:1px solid rgba(255,255,255,.14)}
.wy-cmp th:last-child{background:linear-gradient(180deg,#35815B,var(--hb-green) 58%,#224F38);color:#fff}
.wy-cmp th img{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:8px}
.wy-cmp td{padding:13px 18px;font:500 14px/1.55 var(--hb-text);vertical-align:top;
  border-top:1px solid var(--hb-border)}
.wy-cmp td:first-child{color:#5A2620;background:#FBF1EC;border-right:1px solid var(--hb-border);
  position:relative;padding-left:40px}
.wy-cmp td:last-child{color:var(--hb-ink);background:#FCFBF2;position:relative;padding-left:40px}
.wy-cmp tr:nth-child(even) td:first-child{background:#F7E7DF}
.wy-cmp tr:nth-child(even) td:last-child{background:#F6F2E1}
.wy-cmp td::before{content:"";position:absolute;left:16px;top:1.05em;width:12px;height:12px}
.wy-cmp td:first-child::before{background:
  linear-gradient(45deg,transparent 42%,var(--hb-burg) 42%,var(--hb-burg) 58%,transparent 58%),
  linear-gradient(-45deg,transparent 42%,var(--hb-burg) 42%,var(--hb-burg) 58%,transparent 58%)}
.wy-cmp td:last-child::before{width:12px;height:7px;border-left:2.4px solid var(--hb-green);
  border-bottom:2.4px solid var(--hb-green);transform:rotate(-45deg);top:1.15em}
@media (max-width:720px){
  .wy-cmp,.wy-cmp tbody{display:block}
  .wy-cmp thead{display:none}
  .wy-cmp tr{display:grid;grid-template-columns:1fr;border-top:2px solid #D9A64C}
  .wy-cmp tr:first-of-type{border-top:0}
  .wy-cmp td{border-top:0}
  .wy-cmp td:first-child{border-right:0}
  .wy-cmp td:first-child::after{content:"Agent Route";display:block;margin-top:3px;
    font:700 10px/1 var(--hb-text);letter-spacing:.14em;text-transform:uppercase;color:#8C3B32;opacity:.75}
  .wy-cmp td:last-child::after{content:"HBIMS-NAF\0026SA Route";display:block;margin-top:3px;
    font:700 10px/1 var(--hb-text);letter-spacing:.14em;text-transform:uppercase;color:var(--hb-green);opacity:.8}
}

/* — 10 waypoints ramp strip (homepage colour ramp) — */
.wy-way{list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;
  grid-template-columns:repeat(5,1fr);gap:14px}
.wy-way li{position:relative;padding:16px 14px 14px 14px;border-radius:16px;text-align:center;
  border:1px solid var(--hb-border);background:linear-gradient(180deg,#FFFDF6,#F7EFDC);
  box-shadow:0 14px 28px -18px rgba(29,22,28,.3),inset 0 1px 0 #fff}
.wy-way .n{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;
  font:800 16px/1 var(--hb-display);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.45),inset 0 -2px 3px rgba(0,0,0,.35),
    0 8px 14px -7px rgba(29,22,28,.5)}
.wy-way li:nth-child(-n+3) .n{color:#4A3714;background:radial-gradient(circle at 35% 30%,#F3DA9A,#ECCE77 55%,#C9A44E)}
.wy-way li:nth-child(n+4):nth-child(-n+6) .n{color:#FCF7EA;background:radial-gradient(circle at 35% 30%,#8A6A38,#6E5327 55%,#4A3714)}
.wy-way li:nth-child(n+7):nth-child(-n+8) .n{color:#FCF7EA;background:radial-gradient(circle at 35% 30%,#8C3B32,#7B2D26 55%,#5A1F1A)}
.wy-way li:nth-child(n+9) .n{color:#FCF7EA;background:radial-gradient(circle at 35% 30%,#35815B,#2C6A47 55%,#1E4732)}
.wy-way h3{margin:0;font:700 13px/1.35 var(--hb-display);color:var(--hb-ink)}
.wy-waymore{text-align:center;margin:24px 0 0;font:700 14px/1 var(--hb-text)}
.wy-waymore a{color:var(--hb-burg);text-decoration:none;border-bottom:2px solid rgba(123,45,38,.4)}
.wy-waymore a:hover{border-color:var(--hb-burg)}

/* — waypoints full rail (restored bodies) — */
.wy-tl{list-style:none;margin:0 auto;padding:0;position:relative;max-width:900px}
.wy-tl::before{content:"";position:absolute;left:23px;top:12px;bottom:12px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#ECCE77 0%,#B08542 30%,#6E5327 55%,#7B2D26 78%,#2C6A47 100%)}
.wy-tl li{position:relative;padding:0 0 26px 74px}
.wy-tl li:last-child{padding-bottom:0}
.wy-tl .n{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font:800 17px/1 var(--hb-display);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.45),inset 0 -2px 3px rgba(0,0,0,.35),
    0 9px 16px -8px rgba(29,22,28,.5)}
.wy-tl li:nth-child(-n+3) .n{color:#4A3714;background:radial-gradient(circle at 35% 30%,#F3DA9A,#ECCE77 55%,#C9A44E)}
.wy-tl li:nth-child(n+4):nth-child(-n+6) .n{color:#FCF7EA;background:radial-gradient(circle at 35% 30%,#8A6A38,#6E5327 55%,#4A3714)}
.wy-tl li:nth-child(n+7):nth-child(-n+8) .n{color:#FCF7EA;background:radial-gradient(circle at 35% 30%,#8C3B32,#7B2D26 55%,#5A1F1A)}
.wy-tl li:nth-child(n+9) .n{color:#FCF7EA;background:radial-gradient(circle at 35% 30%,#35815B,#2C6A47 55%,#1E4732)}
.wy-tl h3{margin:4px 0 8px;font:700 17px/1.3 var(--hb-display);color:var(--hb-ink)}
.wy-tl p{margin:0 0 10px;font:500 14.5px/1.65 var(--hb-text);max-width:66ch}
.wy-tl p:last-child{margin-bottom:0}
.wy-tl .ab-checks{margin-top:10px;margin-bottom:12px;max-width:640px}

/* — pillar & trust grids — */
.wy-pillars{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.wy-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.wy-pillars .ab-card,.wy-trio .ab-card{display:flex;flex-direction:column}
.wy-cardmed{width:72px;margin:0 auto 12px;
  filter:drop-shadow(0 10px 16px rgba(74,55,20,.32))}
.wy-cardmed img{width:100%}
.wy-pillars h3,.wy-trio h3{justify-content:center;text-align:center}

@media (max-width:1020px){
  .wy-prin{grid-template-columns:repeat(2,1fr)}
  .wy-way{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .wy-pillars,.wy-trio{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wy-tl::before{left:19px}
  .wy-tl li{padding-left:62px}
  .wy-tl .n{width:40px;height:40px;font-size:15px}
}