/* HRCS Advisory Group: step slider with a phone preview, plus the create-group dialog */
.grp-stage{display:grid;gap:28px}
.grp-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grp-tab{position:relative;overflow:hidden;text-align:left;display:grid;gap:4px;padding:16px 18px 20px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#CFE5E3;cursor:pointer;font:500 14px/1.3 'Inter',sans-serif;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.grp-tab b{font:700 13px/1 'Poppins',sans-serif;letter-spacing:.1em;color:var(--cream);opacity:.7}
.grp-tab span{font:600 15px/1.3 'Poppins',sans-serif}
.grp-tab i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--cream);transform:scaleX(0);transform-origin:left}
.grp-tab:hover{background:rgba(255,255,255,.09)}
.grp-tab.on{background:rgba(255,255,255,.12);border-color:rgba(249,247,207,.45);color:#fff}
.grp-tab.on b{opacity:1}
.grp-tab.done i{transform:scaleX(1)}
.grp-tab:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.grp-stage.run .grp-tab.on i{animation:grpBar var(--grp-dur,6s) linear forwards}
.grp-stage.paused .grp-tab.on i{animation-play-state:paused}
@keyframes grpBar{to{transform:scaleX(1)}}

.grp-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:center}
.grp-slides{display:grid;min-width:0}
.grp-slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateX(48px);transition:opacity .55s var(--ease),transform .7s var(--ease),visibility 0s .7s}
.grp-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .1s,transform .75s var(--ease) .1s,visibility 0s}
.grp-slide.out{transform:translateX(-48px)}
.grp-n{font:600 13px/1 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.grp-slide h3{font-size:clamp(24px,2.6vw,32px);margin:10px 0 12px;text-wrap:balance}
.grp-slide>p{color:#CFE5E3;font-size:16.5px;max-width:36em}
.grp-slide>p b{color:#fff}
/* children of the active slide rise in one after another */
.grp-slide .grp-ceo,.grp-experts li,.grp-chips span,.grp-ticks li{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.grp-slide.on .grp-ceo,.grp-slide.on .grp-experts li,.grp-slide.on .grp-chips span,.grp-slide.on .grp-ticks li{opacity:1;transform:none;transition-delay:calc(.25s + var(--i,0)*.06s)}

.grp-ceo{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 16px;border-radius:var(--r-sm);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);max-width:520px}
.grp-ceo img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 25%;flex:none}
.grp-ceo div{min-width:0}
.grp-ceo b{display:block;color:#fff;font:600 15px/1.3 'Poppins',sans-serif}
.grp-ceo small{color:#CFE5E3;font-size:13px}
.grp-ceo a{margin-left:auto;color:var(--cream);font:600 16px/1 'Poppins',sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums}

.grp-experts{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
.grp-experts li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);min-width:0}
.grp-experts b{color:#fff;font:500 14px/1.3 'Inter',sans-serif}
.grp-experts a{color:var(--cream);font:600 14px/1 'Poppins',sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums}
.grp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.grp-chips span{padding:8px 14px;border-radius:99px;background:rgba(249,247,207,.14);color:var(--cream);font:500 14px/1 'Inter',sans-serif}
.grp-ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grp-ticks li{display:flex;gap:10px;align-items:center;color:#fff;font-size:15px}
.grp-ticks li::before{content:"";width:22px;height:22px;border-radius:50%;flex:none;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3B3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}

/* phone preview */
.grp-phone{width:300px;max-width:100%;aspect-ratio:300/560;border-radius:38px;padding:10px;background:#0a2224;box-shadow:0 30px 70px -25px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.08)}
.ph-scr{position:relative;height:100%;border-radius:29px;overflow:hidden;background:#ECE5DD;display:flex;flex-direction:column}
.ph-top{display:flex;gap:10px;align-items:center;padding:28px 14px 12px;background:#075E54;color:#fff}
.ph-top b{display:block;font:600 14px/1.2 'Inter',sans-serif}
.ph-top small{font-size:11.5px;opacity:.8}
.ph-av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.ph-av svg{width:18px;height:18px}
.ph-view{position:absolute;inset:78px 0 0;padding:14px 12px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateX(30px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.ph-view.on{opacity:1;transform:none}
.ph-view>*{opacity:0;transform:translateY(10px)}
.ph-view.on>*{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .5s var(--ease);transition-delay:calc(.2s + var(--i,0)*.35s)}
.ph-sys{align-self:center;background:#E1F2FB;color:#3b4a54;font-size:11.5px;padding:5px 10px;border-radius:8px;text-align:center}
.ph-sys b{color:#1E2A2A}
.ph-msg{max-width:85%;padding:7px 10px;border-radius:10px;font-size:12.5px;line-height:1.4;color:#1E2A2A;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.ph-msg b{display:block;font-size:11.5px;color:var(--teal-d);margin-bottom:2px}
.ph-msg.in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.ph-msg.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:2px}
.ph-list{list-style:none;margin:0;padding:6px 0;background:#fff;border-radius:10px}
.ph-list li{display:flex;gap:8px;align-items:center;padding:6px 10px;font-size:12px;color:#1E2A2A;opacity:0;transform:translateX(-10px)}
.ph-list li::before{content:"";width:22px;height:22px;border-radius:50%;flex:none;background:var(--teal-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7374' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center/13px no-repeat}
.ph-view.on .ph-list li{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease);transition-delay:calc(.45s + var(--i,0)*.14s)}

/* call to action */
.grp-cta{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:34px 38px;border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid rgba(249,247,207,.3)}
.grp-cta h3{font-size:clamp(20px,2.2vw,26px);text-wrap:balance}
.grp-cta p{color:#CFE5E3;margin-top:8px}
.grp-cta small{display:block;margin-top:10px;color:var(--cream);font-style:italic;font-size:13px}

@media (max-width:960px){
  .grp-body{grid-template-columns:minmax(0,1fr);gap:36px}
  .grp-phone{justify-self:center;width:270px}
}
@media (max-width:700px){
  .grp-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .grp-tab{padding:12px 8px 14px;text-align:center}
  .grp-tab span{display:none}
  .grp-experts,.grp-ticks{grid-template-columns:minmax(0,1fr)}
  .grp-ceo{flex-wrap:wrap}
  .grp-ceo div{flex:1 1 calc(100% - 70px)}   /* name gets the full row; the number drops below it */
  .grp-ceo a{margin-left:68px}
  .grp-cta{grid-template-columns:minmax(0,1fr);padding:26px 20px}
  .grp-cta .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .grp-slide,.grp-slide *,.ph-view,.ph-view *{transition:none!important}
  .grp-stage.run .grp-tab.on i{animation:none;transform:scaleX(1)}
}

/* emphasis: bigger steps and a strong Create my group button */
.grp-tab{padding:22px 22px 26px;gap:8px}
.grp-tab b{font-size:30px;letter-spacing:0;line-height:1}
.grp-tab span{font-size:18px}
.grp-tab i{height:4px}
.grp-tab.on{background:var(--cream);border-color:var(--cream);color:var(--teal-dd);box-shadow:0 18px 40px -18px rgba(0,0,0,.5);transform:translateY(-4px)}
.grp-tab.on b{color:var(--teal)}
.grp-tab.on i{background:var(--teal)}
.grp-tab{transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.grp-n{font-size:15px}
.grp-slide h3{font-size:clamp(28px,3.4vw,42px)}
.grp-big{margin-top:26px;background:var(--wa);color:#fff;padding:18px 34px;font-size:18px;gap:12px;box-shadow:0 14px 34px -12px rgba(37,211,102,.75)}
.grp-big svg{width:22px;height:22px}
.grp-big:hover{background:#1ebe5a;transform:translateY(-3px)}
.grp-big:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
/* pulse ring drawn by the button's own shadow so it always hugs the button shape */
.grp-big{animation:grpPulse 2.4s ease-out infinite}
@keyframes grpPulse{0%{box-shadow:0 14px 34px -12px rgba(37,211,102,.75),0 0 0 0 rgba(37,211,102,.55)}70%,100%{box-shadow:0 14px 34px -12px rgba(37,211,102,.75),0 0 0 16px rgba(37,211,102,0)}}
.grp-slide .grp-big{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .55s var(--ease),background .3s}
.grp-slide.on .grp-big{opacity:1;transform:none;transition-delay:.55s,.55s,0s}
.grp-big.xl{margin-top:0;padding:24px 44px;font-size:21px}
.grp-big.xl svg{width:26px;height:26px}
.grp-cta{background:var(--cream);border-color:var(--cream);padding:42px 46px}
.grp-cta h3{color:var(--teal-dd);font-size:clamp(22px,2.6vw,32px)}
.grp-cta p{color:var(--muted);font-size:16.5px}
.grp-cta small{color:var(--teal-d)}
@media (max-width:700px){
  .grp-tab{padding:14px 6px 16px}
  .grp-tab b{font-size:22px}
  .grp-big,.grp-big.xl{width:100%;justify-content:center;padding:18px 20px;font-size:18px}
  .grp-cta{padding:28px 20px}
}
@media (prefers-reduced-motion:reduce){.grp-big{animation:none}}