/* ==========================================================================
   /industries/seo-for-healthcare: this page's own pictures
   (industries/seo/healthcare/*.blade.php). Loaded after ind-seox.css.
   Every rule is scoped to the page. Everything rests in its finished state
   without JS and under reduced motion; loops pause off screen (ind-wdp).
   ========================================================================== */

/* ---- the trade-off: the same week in two appointment books ---- */
main[data-seo-page="healthcare"] .sxvh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;height:auto;padding:22px}
main[data-seo-page="healthcare"] .sxvh-book{position:relative;display:grid;gap:14px;align-content:start;padding:16px 18px 18px;border-radius:18px;border:1px solid var(--edge);background:#0E1014}
main[data-seo-page="healthcare"] .sxvh-book.is-own{border-color:var(--gold-line);background:radial-gradient(90% 70% at 100% 0%,rgba(244,160,0,.07),transparent 70%),#0E1014}
main[data-seo-page="healthcare"] .sxvh .sx-vs__tag{position:static;justify-self:start}
main[data-seo-page="healthcare"] .sxvh-grid{display:grid;grid-template-columns:42px repeat(5,minmax(0,1fr));grid-template-rows:14px;grid-auto-rows:22px;gap:7px 8px}
main[data-seo-page="healthcare"] .sxvh-day{text-align:center;font:700 11px/14px var(--font-head);letter-spacing:.08em;color:var(--text-dim)}
main[data-seo-page="healthcare"] .sxvh-time{display:flex;align-items:center;font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.34)}
main[data-seo-page="healthcare"] .sxvh-slot{position:relative;display:block;height:100%;border-radius:6px;border:1px dashed rgba(255,255,255,.11)}
/* a booking: a patient chip on the slot */
main[data-seo-page="healthcare"] .sxvh-bk{position:absolute;inset:-1px;display:block;border-radius:6px;
  background:radial-gradient(circle at 11px 50%,var(--dot) 3.2px,transparent 3.6px),linear-gradient(var(--line),var(--line)) 21px 50% / 42% 2px no-repeat,var(--fill);
  box-shadow:inset 0 0 0 1px var(--edge-c)}
main[data-seo-page="healthcare"] .sxvh-bk.is-ref{--fill:rgba(255,122,107,.14);--edge-c:var(--coral-line);--dot:var(--coral);--line:rgba(255,122,107,.45)}
main[data-seo-page="healthcare"] .sxvh-bk.is-own{--fill:rgba(244,160,0,.2);--edge-c:var(--gold-line);--dot:var(--gold);--line:rgba(244,160,0,.55);box-shadow:inset 0 0 0 1px var(--edge-c),inset 3px 0 0 var(--gold)}
main[data-seo-page="healthcare"] .sxvh-bk.is-join{opacity:0}
main[data-seo-page="healthcare"] .sxvh-meter{position:relative;display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
main[data-seo-page="healthcare"] .sxvh-meter i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f) * 100%);border-radius:3px;background:var(--coral);transform-origin:left;transition:transform 1.4s var(--ease) .5s}
main[data-seo-page="healthcare"] .is-own .sxvh-meter i{background:linear-gradient(90deg,rgba(244,160,0,.5),var(--gold));box-shadow:0 0 12px rgba(244,160,0,.5)}
/* the own book fills slot by slot; the directories reshuffle; the next patient keeps landing */
main[data-seo-page="healthcare"] .sxvh .sxvh-bk.is-own{transition:opacity .4s ease,transform .5s var(--ease);transition-delay:calc(var(--o, 20) * .06s + .4s)}
html.el8-js main[data-seo-page="healthcare"] .sxvh:not(.is-in) .sxvh-bk.is-own{opacity:0;transform:scale(.7)}
html.el8-js main[data-seo-page="healthcare"] .sxvh:not(.is-in) .sxvh-meter i{transform:scaleX(0)}
main[data-seo-page="healthcare"] .sxvh.is-in .sxvh-bk.is-leave{animation:sxvhLeave 8s ease 2.4s infinite}
main[data-seo-page="healthcare"] .sxvh.is-in .sxvh-bk.is-join{animation:sxvhJoin 8s ease 2.4s infinite}
@keyframes sxvhLeave{0%,38%,100%{opacity:1}46%,88%{opacity:0}}
@keyframes sxvhJoin{0%,38%,100%{opacity:0}46%,88%{opacity:1}}
main[data-seo-page="healthcare"] .sxvh.is-in .sxvh-bk.is-next{animation:sxvhNext 4s var(--ease) 2.2s infinite backwards}
@keyframes sxvhNext{0%,14%{opacity:0;transform:scale(.55)}24%{opacity:1;transform:scale(1.08)}30%,100%{opacity:1;transform:none}}
main[data-seo-page="healthcare"] .sxvh.is-in .is-own .sxvh-meter i{animation:sxvhMeter 4s ease 2.2s infinite}
@keyframes sxvhMeter{0%,20%,100%{filter:none}28%{filter:brightness(1.35)}}

/* ---- approach pillar 3: the practice's shelf of patient guides ---- */
main[data-seo-page="healthcare"] .sxvh-shelf{position:relative;display:flex;align-items:flex-end;gap:14px;height:170px;padding:20px 22px 22px;border-bottom:1px solid var(--edge);background:#0E1115}
main[data-seo-page="healthcare"] .sxvh-shelf__board{position:absolute;left:14px;right:14px;bottom:14px;height:8px;border-radius:3px;background:linear-gradient(180deg,#2A2F38,#1A1E25);box-shadow:0 8px 16px -6px rgba(0,0,0,.8)}
main[data-seo-page="healthcare"] .sxvh-guide{position:relative;z-index:1;flex:0 0 auto;display:grid;justify-items:center;align-content:start;gap:6px;width:92px;height:118px;margin-bottom:0;padding:16px 12px 0;
  border-radius:6px 10px 10px 6px;background:linear-gradient(90deg,rgba(0,0,0,.28) 0 5px,transparent 5px),#181C23;border:1px solid var(--edge-2);border-top:3px solid var(--tone);
  box-shadow:0 12px 22px -12px rgba(0,0,0,.9)}
main[data-seo-page="healthcare"] .sxvh-guide.is-teal{--tone:var(--teal);--tone-soft:var(--teal-soft)}
main[data-seo-page="healthcare"] .sxvh-guide.is-gold{--tone:var(--gold);--tone-soft:var(--gold-soft)}
main[data-seo-page="healthcare"] .sxvh-guide:nth-child(2){height:126px}
main[data-seo-page="healthcare"] .sxvh-guide__pic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:4px;border-radius:50%;background:var(--tone-soft);color:var(--tone)}
main[data-seo-page="healthcare"] .sxvh-guide__pic svg{width:30px;height:30px}
main[data-seo-page="healthcare"] :is(.sxvh-guide__pic,.sxvh-topic > i) svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
main[data-seo-page="healthcare"] :is(.sxvh-guide__pic,.sxvh-topic > i) svg .is-soft{opacity:.55}
main[data-seo-page="healthcare"] .sxvh-guide b{display:block;width:72%;height:4px;border-radius:2px;background:rgba(255,255,255,.2)}
main[data-seo-page="healthcare"] .sxvh-guide b:nth-of-type(2){width:86%;background:rgba(255,255,255,.12)}
main[data-seo-page="healthcare"] .sxvh-guide b:nth-of-type(3){width:58%;background:rgba(255,255,255,.12)}
main[data-seo-page="healthcare"] .sxvh-guide__mark{position:absolute;top:-10px;right:-9px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--tone);color:#0A1512;box-shadow:0 0 0 3px #0E1115}
main[data-seo-page="healthcare"] .sxvh-guide__mark svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
main[data-seo-page="healthcare"] .sxvh-guide.is-gold .sxvh-guide__mark svg{stroke-width:1.6}
main[data-seo-page="healthcare"] .sxvh-spines{display:flex;align-items:flex-end;gap:4px;margin-left:auto}
main[data-seo-page="healthcare"] .sxvh-spines i{display:block;width:var(--w);height:var(--h);border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));border:1px solid var(--edge);transform:rotate(var(--r));transform-origin:0 100%}
main[data-seo-page="healthcare"] .sxvh-spines i:nth-child(2){background:linear-gradient(180deg,rgba(79,191,160,.22),rgba(79,191,160,.08))}
main[data-seo-page="healthcare"] .sxvh-topic{display:inline-flex;align-items:center;gap:11px}
main[data-seo-page="healthcare"] .sxvh-topic > i{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.05);color:var(--text-mid)}
main[data-seo-page="healthcare"] .sxvh-topic > i svg{width:20px;height:20px}
main[data-seo-page="healthcare"] .sxvh-topics .wdp-panel__row{border-radius:10px}
/* patients take a guide down in turn; its row lights with it */
main[data-seo-page="healthcare"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvh-guide{animation:sxvhLift 9s var(--ease) infinite;animation-delay:calc(var(--i) * 3s + .6s)}
@keyframes sxvhLift{0%,3%,34%,100%{transform:none;border-color:var(--edge-2);box-shadow:0 12px 22px -12px rgba(0,0,0,.9)}
  9%,27%{transform:translateY(-12px) rotate(-2deg);border-color:var(--tone);box-shadow:0 22px 28px -14px rgba(0,0,0,.95),0 0 24px -6px var(--tone)}}
main[data-seo-page="healthcare"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvh-topics .wdp-panel__row{animation:sxvhRow 9s ease infinite;animation-delay:calc(var(--i) * 3s + .6s)}
@keyframes sxvhRow{0%,3%,34%,100%{background:transparent}9%,27%{background:rgba(255,255,255,.04)}}
main[data-seo-page="healthcare"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvh-topics .wdp-panel__row .sxvh-topic > i{animation:sxvhIc 9s ease infinite;animation-delay:inherit}
@keyframes sxvhIc{0%,3%,34%,100%{color:var(--text-mid);background:rgba(255,255,255,.05)}9%,27%{color:var(--gold);background:var(--gold-soft)}}

@media (max-width:700px){
  main[data-seo-page="healthcare"] .sxvh{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
  main[data-seo-page="healthcare"] .sxvh-book{gap:10px;padding:12px 12px 13px;border-radius:14px}
  main[data-seo-page="healthcare"] .sxvh-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:11px;grid-auto-rows:12px;gap:3px 6px}
  main[data-seo-page="healthcare"] .sxvh-corner,main[data-seo-page="healthcare"] .sxvh-time{display:none}
  main[data-seo-page="healthcare"] .sxvh-day{font-size:10px;line-height:11px}
  main[data-seo-page="healthcare"] .sxvh-slot,main[data-seo-page="healthcare"] .sxvh-bk{border-radius:4px}
  main[data-seo-page="healthcare"] .sxvh-bk{background:radial-gradient(circle at 8px 50%,var(--dot) 2.4px,transparent 2.8px),linear-gradient(var(--line),var(--line)) 15px 50% / 40% 1.5px no-repeat,var(--fill)}
  main[data-seo-page="healthcare"] .sxvh-meter{height:4px}
  /* the phone stage is short: like the other pillars it drops the picture above the panel; the rows keep their pictures */
  main[data-seo-page="healthcare"] .sx-appr .wdp-story__stage .sxvh-shelf{display:none}
  main[data-seo-page="healthcare"] .sxvh-topic{gap:9px}
  main[data-seo-page="healthcare"] .sxvh-topic > i{width:24px;height:24px;border-radius:8px}
  main[data-seo-page="healthcare"] .sxvh-topic > i svg{width:17px;height:17px}
}