/*
 * Hilive Homepage V3 — interaction accents
 * Intentionally scoped to the homepage and loaded after the V3 layout layer.
 * Visual language: teal square / northeast arrow for navigation,
 * warm yellow circle / dark-teal triangle for video.
 */
.hilive-home-v3{
  --hl-accent-teal:#278e99;
  --hl-accent-teal-dark:#115257;
  --hl-accent-yellow:#f2c84b;
  --hl-accent-yellow-pale:#fff6da;
}

/* Consistent micro-kickers across the page: one quiet brand dot per section. */
.hilive-home-v3 :is(
  .hl-start__head,
  .hl-manifesto__inner,
  .hl-programs-v3,
  .hl-work-v3,
  .hl-principles-v3,
  .hl-hisham-v3__copy,
  .hl-voices-v3,
  .hl-companies-v3,
  .hl-final-v3
) .hl-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.hilive-home-v3 :is(
  .hl-start__head,
  .hl-manifesto__inner,
  .hl-programs-v3,
  .hl-principles-v3,
  .hl-hisham-v3__copy,
  .hl-voices-v3
) .hl-eyebrow::before{
  content:"";display:block;flex:0 0 7px;width:7px;height:7px;
  border-radius:50%;background:var(--hl-accent-teal);
  box-shadow:0 0 0 4px rgba(39,142,153,.105);
}
.hilive-home-v3 :is(.hl-work-v3,.hl-companies-v3,.hl-final-v3) .hl-eyebrow::before{
  content:"";display:block;flex:0 0 7px;width:7px;height:7px;
  border-radius:50%;background:var(--hl-accent-yellow);
  box-shadow:0 0 0 4px rgba(242,200,75,.16);
}
/* Preserve centered Start Here heading and final CTA. */
.hilive-home-v3 .hl-final-v3 .hl-eyebrow{
  display:inline-flex;align-items:center;justify-content:center;
}

/* Small filled navigation square: use a text-presented arrow, not emoji fonts. */
.hilive-home-v3 :is(
  .hl-text-link b,
  .hl-router__item > b,
  .hl-program-v3__cta b,
  .hl-work-v3__motion-foot b
){
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:31px;
  height:31px;
  padding:0;
  border:1px solid rgba(17,82,87,.10);
  border-radius:8px;
  background:var(--hl-accent-teal);
  color:#ffffff!important;
  box-shadow:0 5px 12px rgba(17,82,87,.13);
  font-size:0!important;
  line-height:1!important;
  direction:ltr;
  text-align:center;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.hilive-home-v3 :is(
  .hl-text-link b,
  .hl-router__item > b,
  .hl-program-v3__cta b,
  .hl-work-v3__motion-foot b
)::before{
  content:"\2197\FE0E";
  font-family:Arial,Helvetica,sans-serif;
  font-size:18px!important;
  font-weight:700;
  line-height:1;
}
.hilive-home-v3 .hl-text-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
}
.hilive-home-v3 .hl-text-link b{margin-inline-start:5px}
.hilive-home-v3 .hl-text-link:hover b,
.hilive-home-v3 .hl-text-link:focus-visible b{
  transform:translate(-2px,-2px);
  background:#166b74;
}
.hilive-home-v3 .hl-text-link--light b{
  background:var(--hl-accent-yellow);color:#16484d!important;
}
.hilive-home-v3 .hl-text-link--light:hover b{
  background:#ffe17d;
}

/* Start Here directional cards: teal for Max, gold for AI, mint for Help. */
.hilive-home-v3 .hl-router__item{
  border-color:#dae4e4;
  box-shadow:0 3px 12px rgba(14,65,68,.025);
}
.hilive-home-v3 .hl-router__item > b{
  width:33px;height:33px;
  border-radius:9px;
}
.hilive-home-v3 .hl-router__item--ai > b{
  background:var(--hl-accent-yellow);
  color:#16484d!important;
  border-color:#e9c445;
}
.hilive-home-v3 .hl-router__item--help > b{
  background:#ddf4ee;
  color:#19705c!important;
  border-color:#cae7df;
}
.hilive-home-v3 .hl-router__item--ai{
  border-color:#eddfb7;
  background:linear-gradient(120deg,#fff,#fffaf0);
}
.hilive-home-v3 .hl-router__item:first-child{
  border-color:#cde5e4;
  background:linear-gradient(120deg,#fff,#f5fbfb);
}
@media(hover:hover) and (pointer:fine){
  .hilive-home-v3 .hl-router__item:hover > b{
    transform:translate(-2px,-2px);
    box-shadow:0 8px 15px rgba(21,75,76,.16);
  }
}
.hilive-home-v3 .hl-start__video{
  box-shadow:0 22px 60px rgba(16,59,60,.19),0 0 0 3px rgba(242,200,75,.16);
}

/* Course cards: identify both paths at a glance. */
.hilive-home-v3 .hl-program-v3__top > span{
  display:grid;
  place-items:center;
  width:52px;height:52px;flex:0 0 52px;
  border-radius:50%;
  background:#e0f3f2;
  color:#176c70;
  font-size:20px;
  font-weight:900;
  letter-spacing:-.02em;
}
.hilive-home-v3 .hl-program-v3--ai .hl-program-v3__top > span{
  background:#fff0b5;
  color:#775600;
}
.hilive-home-v3 .hl-program-v3__cta{
  border-top:1px solid rgba(20,69,70,.10);
  padding-top:17px;
  min-height:50px;
}
.hilive-home-v3 .hl-program-v3__cta b{
  margin-inline-start:auto;
  width:34px;height:34px;
}
.hilive-home-v3 .hl-program-v3--ai .hl-program-v3__cta b{
  background:var(--hl-accent-yellow);
  color:#154b4f!important;
  border-color:#eac548;
}
@media(hover:hover) and (pointer:fine){
  .hilive-home-v3 .hl-program-v3:hover .hl-program-v3__cta b{
    transform:translate(-2px,-2px);
  }
}

/* Selected images are links too: subtle corner arrow, no caption clutter. */
.hilive-home-v3 .hl-work-v3__item:not(.hl-work-v3__item--motion) .hl-work-v3__media::after{
  content:"\2197\FE0E";
  font-family:Arial,Helvetica,sans-serif;
  font-size:17px;
  font-weight:700;
  direction:ltr;
  color:#153c42;
  position:absolute;
  top:14px;left:14px;
  z-index:4;
  display:grid;place-items:center;
  width:31px;height:31px;
  border-radius:8px;
  background:var(--hl-accent-yellow);
  box-shadow:0 5px 18px rgba(0,0,0,.13);
  pointer-events:none;
  transition:transform .25s ease,background .25s ease;
}
@media(hover:hover) and (pointer:fine){
  .hilive-home-v3 .hl-work-v3__item:hover .hl-work-v3__media::after{
    transform:translate(-2px,-2px);
    background:#ffe17b;
  }
}

/* Play control: explicit CSS triangle ensures the icon never becomes a blue emoji. */
.hilive-home-v3 :is(.hl-voice-v3__play,.hl-work-v3__motion-play){
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--hl-accent-yellow);
  color:transparent;
  font-size:0!important;
  line-height:0!important;
  transition:transform .22s ease,box-shadow .22s ease;
}
.hilive-home-v3 :is(.hl-voice-v3__play,.hl-work-v3__motion-play)::before{
  content:"";
  display:block;
  width:0;height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid var(--hl-accent-teal-dark);
  margin-left:3px;
}
.hilive-home-v3 .hl-work-v3__motion-play::before{
  border-top-width:10px;
  border-bottom-width:10px;
  border-left-width:15px;
}
.hilive-home-v3 .hl-voice-v3{
  border-color:#dce5e5;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.hilive-home-v3 .hl-voice-v3__play{
  width:47px;height:47px;
  box-shadow:0 7px 17px rgba(194,153,32,.12);
}
.hilive-home-v3 .hl-voice-v3__top small{color:#738788;letter-spacing:.08em}
@media(hover:hover) and (pointer:fine){
  .hilive-home-v3 .hl-voice-v3:hover{
    transform:translateY(-5px);
    border-color:#efce69;
    box-shadow:0 18px 38px rgba(22,63,66,.085);
  }
  .hilive-home-v3 .hl-voice-v3:hover .hl-voice-v3__play,
  .hilive-home-v3 .hl-work-v3__motion:hover .hl-work-v3__motion-play{
    transform:scale(1.08);
    box-shadow:0 10px 22px rgba(188,150,31,.22);
  }
}
.hilive-home-v3 .hl-work-v3__motion-foot b{
  background:var(--hl-accent-yellow);
  color:#173f44!important;
  border-color:#daba4f;
}

/* Reasons to choose Hilive: quieter numbered chips rather than full color blocks. */
.hilive-home-v3 .hl-principle-v3{
  border-color:#dde7e7;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.hilive-home-v3 .hl-principle-v3 > span{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  border-radius:50%;
  background:#e0f2f0;
  color:#176c71;
  font-size:16px;
  font-weight:900;
}
.hilive-home-v3 .hl-principle-v3:nth-child(2) > span{
  background:#fff0b5;color:#785700;
}
.hilive-home-v3 .hl-principle-v3 h3{margin-top:30px}
@media(hover:hover) and (pointer:fine){
  .hilive-home-v3 .hl-principle-v3:hover{
    transform:translateY(-3px);
    border-color:#bcdedb;
    box-shadow:0 12px 24px rgba(22,63,66,.055);
  }
}

/* Founder proof and B2B: very small accent details. */
.hilive-home-v3 .hl-hisham-v3__proof div::before{
  content:"";display:block;width:26px;height:3px;
  margin-bottom:10px;border-radius:3px;background:#41b8b4;
}
.hilive-home-v3 .hl-hisham-v3__proof div:nth-child(2)::before{
  background:var(--hl-accent-yellow);
}
.hilive-home-v3 .hl-companies-v3__panel .hl-btn--dark,
.hilive-home-v3 .hl-student-portal-v3__panel .hl-btn--portal-v3{
  display:inline-flex;align-items:center;gap:12px;
}
.hilive-home-v3 .hl-companies-v3__panel .hl-btn--dark::after,
.hilive-home-v3 .hl-student-portal-v3__panel .hl-btn--portal-v3::after{
  content:"\2197\FE0E";
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1;
  font-weight:700;
  direction:ltr;
  display:grid;place-items:center;flex:0 0 28px;
  width:28px;height:28px;border-radius:50%;
  color:#16494c;background:var(--hl-accent-yellow);
}
.hilive-home-v3 .hl-student-portal-v3__panel .hl-btn--portal-v3::after{
  border-radius:7px;background:var(--hl-accent-teal);color:#fff;
}

/* Accessible interaction patterns: consistent focus, no forced motion. */
.hilive-home-v3 :is(
  .hl-router__item,.hl-voice-v3,.hl-text-link,
  .hl-work-v3__media,.hl-companies-v3__panel .hl-btn,
  .hl-student-portal-v3__panel .hl-btn
):focus-visible{
  outline:3px solid #258e96;outline-offset:3px;
}
@media(max-width:560px){
  .hilive-home-v3 .hl-program-v3__top > span{width:45px;height:45px;flex-basis:45px;font-size:17px}
  .hilive-home-v3 .hl-voice-v3__play{width:43px;height:43px}
  .hilive-home-v3 .hl-work-v3__item .hl-work-v3__media::after{width:28px;height:28px;top:11px;left:11px}
  .hilive-home-v3 .hl-companies-v3__panel .hl-btn--dark{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .hilive-home-v3 :is(
    .hl-router__item > b,.hl-text-link b,.hl-program-v3__cta b,
    .hl-voice-v3,.hl-voice-v3__play,.hl-work-v3__motion-play,
    .hl-principle-v3
  ){transition:none!important;transform:none!important}
  .hilive-home-v3 .hl-work-v3__item:not(.hl-work-v3__item--motion) .hl-work-v3__media::after{
    transition:none!important;transform:none!important
  }
}