/* 26 Sep screen-recording review: full-bleed catalogue hero and existing topic art. */
@media(min-width:761px){
  .page-directions .brand-directions-hero-stage{
    width:100vw;
    min-height:clamp(680px,calc(100svh - 88px),900px);
    margin-left:calc(50% - 50vw);
    margin-top:0;
    background:#f3f9fe;
  }
  .page-directions .brand-directions-hero-stage>img{
    object-fit:cover;
    object-position:right 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 45%);
  }
  .page-directions .brand-directions-hero-stage::before{
    background:linear-gradient(90deg,#f3f9fe 0%,rgba(243,249,254,.94) 22%,rgba(243,249,254,0) 70%);
  }
  .page-directions .brand-directions-hero-stage::after{
    content:'';
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,transparent 78%,rgba(255,255,255,.2) 86%,#fff 100%);
  }
  .page-directions .brand-directions-hero-copy{
    width:var(--hero-copy-width);
    padding-left:max(var(--space),calc((100vw - 1640px)/2 + var(--space)));
    padding-right:0;
  }
  .page-directions .brand-directions-hero-copy>.brand-v4-cta{margin-top:auto}
}
@media(min-width:901px) and (max-width:1599px){
  .page-directions .brand-directions-hero-stage>img{
    transform:scale(1.12);
    transform-origin:right bottom;
  }
}
@media(min-width:1600px){
  .page-directions .brand-directions-hero-stage>img{object-position:right 46%}
}
@media(min-width:901px){
  .page-directions .brand-directions-hero h1{font-size:var(--hero-h1-size);line-height:1.08}
}
@media(min-width:761px) and (max-width:900px){
  .page-directions .brand-directions-hero-stage{display:flex;flex-direction:column;min-height:0}
  .page-directions .brand-directions-hero-stage::before{display:none}
  .page-directions .brand-directions-hero-stage::after{
    inset:auto 0 0;
    height:90px;
    background:linear-gradient(180deg,transparent,#fff);
  }
  .page-directions .brand-directions-hero-copy{
    order:1;
    width:100%;
    min-height:0;
    padding:44px var(--space) 38px;
  }
  .page-directions .brand-directions-hero h1{margin-top:36px}
  .page-directions .brand-directions-hero-copy>.brand-v4-cta{margin-top:30px}
  .page-directions .brand-directions-hero-stage>img{
    position:relative;
    order:2;
    width:100%;
    height:auto;
    aspect-ratio:3/2;
    object-fit:cover;
    -webkit-mask-image:none;
    mask-image:none;
  }
}
@media(max-width:760px){
  .page-directions .brand-directions-close h2{font-size:clamp(26px,7vw,32px)}
  .page-directions .brand-directions-hero-stage::after{
    content:'';
    position:absolute;
    z-index:1;
    inset:auto 0 0;
    height:75px;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,#fff);
  }
}

/* The card title remains the accessible name; artwork is decorative. */
.page-directions .catalog-status-grid>a,
.page-directions .catalog-status-grid>div{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  column-gap:14px;
  align-items:center;
}
.page-directions .catalog-status-grid>a::before,
.page-directions .catalog-status-grid>div::before{
  content:'';
  grid-column:1;
  grid-row:1/3;
  width:76px;
  height:76px;
  background-image:var(--catalog-icon);
  background-position:center;
  background-size:110%;
  background-repeat:no-repeat;
}
.page-directions .catalog-status-grid>a span,
.page-directions .catalog-status-grid>div span{
  grid-column:2;
  grid-row:2;
  justify-self:start;
}
.page-directions .catalog-status-grid--future>div::before{filter:grayscale(1) brightness(.88) contrast(1.25);opacity:.82}
.page-directions .catalog-status-grid--future>div span{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:4px 9px;
  border:1px solid #67aafc;
  border-radius:999px;
  background:rgba(103,170,252,.08);
  color:#3f83c2;
  line-height:1.15;
}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(1){--catalog-icon:url('assets/help-implantation-v6.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(2){--catalog-icon:url('assets/help-full-arch-v6.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(3){--catalog-icon:url('assets/help-prosthetics-v6.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(4){--catalog-icon:url('assets/help-veneers-v6.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(5){--catalog-icon:url('assets/help-braces-v7.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(6){--catalog-icon:url('assets/help-dental-treatment-v7.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(7){--catalog-icon:url('assets/help-blepharoplasty-v6.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(8){--catalog-icon:url('assets/help-face-lift-v6.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(9){--catalog-icon:url('assets/help-face-contouring-v6.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(10){--catalog-icon:url('assets/help-manual-therapy-v6.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(11){--catalog-icon:url('assets/help-orthopedics-v6.png')}
.page-directions .catalog-status-grid:not(.catalog-status-grid--future)>:nth-child(12){--catalog-icon:url('assets/help-rehabilitation-v7.png')}
.page-directions .catalog-status-grid--future>:nth-child(1){--catalog-icon:url('assets/help-breast-surgery-v6.png')}
.page-directions .catalog-status-grid--future>:nth-child(2){--catalog-icon:url('assets/help-liposuction-v7.png')}
.page-directions .catalog-status-grid--future>:nth-child(3){--catalog-icon:url('assets/help-abdominoplasty-v6.png')}
.page-directions .catalog-status-grid--future>:nth-child(4){--catalog-icon:url('assets/help-gluteoplasty-v6.png')}
.page-directions .catalog-status-grid--future>:nth-child(5){--catalog-icon:url('assets/help-rhinoplasty-v6.png')}
.page-directions .catalog-status-grid--future>:nth-child(6){--catalog-icon:url('assets/help-hair-transplant-v8.png')}
.page-directions .catalog-status-grid--future>:nth-child(7){--catalog-icon:url('assets/help-acupuncture-v6.png')}
.page-directions .catalog-status-grid--future>:nth-child(8){--catalog-icon:url('assets/help-ophthalmology-v9.png')}
.page-directions .catalog-status-grid--future>:nth-child(9){--catalog-icon:url('assets/help-laser-vision-v8.png')}
.page-directions .catalog-status-grid--future>:nth-child(10){--catalog-icon:url('assets/help-checkup-v6.png')}
.page-directions .catalog-status-grid--future>:nth-child(11){--catalog-icon:url('assets/help-dermatology-v6.png')}
.page-directions .catalog-status-grid--future>:nth-child(12){--catalog-icon:url('assets/help-other-v6.png')}
@media(max-width:760px){
  .page-directions .catalog-status-grid>a,
  .page-directions .catalog-status-grid>div{grid-template-columns:68px minmax(0,1fr);column-gap:12px}
  .page-directions .catalog-status-grid>a::before,
  .page-directions .catalog-status-grid>div::before{width:68px;height:68px}
}