/* Reset */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, video, svg { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button, input, textarea { font: inherit; }

  :root {
    --bg: #0b0b0b;
    --text: #ffffff;
    --text-dim: rgba(255,255,255,.72);
    --ink: #0f0f10; /* on white */
    --ink-dim: rgba(15,15,16,.72);

    --gutter: 40px;
    --maxcopy: 48ch;

    --radius-lg: 22px;
    --radius-md: 16px;

    --thin: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;

    --ease: cubic-bezier(.2,.8,.2,1);
  }   

  @media (max-width: 768px) {
    :root { --gutter: 20px; }
  }

  body {
    font-family: 'supreme_llregular', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #fff;
    color: var(--ink);
    letter-spacing: 0.85px;
  }

  /* Full-width content with gutters */
  .wrap {
    width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .row {
    display: grid;
    gap: 40px;
    align-items: start;
  }
  
  
  .mini-window {
	  background:#fff;
	  border-radius:4px;
	  width:240px;
	  height:50px;
      display: grid;
      grid-template-columns:1fr 4fr;
  	  grid-template-areas:"mini_image mini_copy";
	  position:absolute;
	  z-index:1000;
	  top:20px;
	  right:20px;
	  gap:10px;
  }
  
  .mini-image {
  	  		  grid-area:mini_image;
  }
  
  .mini-window img {
	  height:50px;
	  border-radius: 4px 0 0 4px;
  }
  
  .mini-copy {
  		  grid-area:mini_copy;
  }
  
  .mini-window p {
	  line-height:12px;
	  font-size:9px;
	  letter-spacing:0.85px;
	  color:#000;
	  padding-top:3px;
  }
  

  @media (max-width: 768px) {
	  .mini-window-container {
		  visibility:hidden;
	  }
	  

  }
  
  /*
  @media (max-width: 768px) {
	  .mini-window-container {
		  width:100%;
		    margin: 0 auto;
			position:absolute;
			bottom:25px;
	  }
	  
	  .mini-window {
		  width:90vw;
		  grid-template-columns:1fr 3fr;
		  top:auto;
		  right:auto;
		  position:relative;
		  margin: 0 auto;
		  gap:0px;
	  }
	  
	  .mini-window p {
		  line-height:12px;
		  font-size:10px;
		  letter-spacing:0.85px;
		  color:#000;
		  padding-top:8px;
		  padding-left:-10px;
	  }
	  
	
  }
  
  @media (max-width: 430px) {
	  .mini-window-container {
			bottom:20px;
	  }	 
	  .mini-window {	  
		  grid-template-columns:1fr 6fr;	 
	  }	  
  }
  
  @media (max-width: 414px) {
	  .mini-window-container {
			bottom:20px;
	  }	 
	  .mini-window p {
		  font-size:10px;
		  color:#000;
		  padding-top:2px;
		  padding-left:10px;
		  padding-right:30px;
	  }
	  
	 
  }
  
  @media (max-width: 375px) {
	  .mini-window-container {
			bottom:2.5%;
	  }	 
  }
  
  */

  /* =============================
    HERO
  ==============================*/
  .hero {
    position: relative;
    height: 100vh; /* requirement */
    min-height: 680px;
    background: var(--bg);
    color: var(--text);
    overflow: clip;
  }

  .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85) contrast(1.05) brightness(.85);
    transform: scale(1.02); /* hide edge seams */
  }

  .hero__overlay {
    position: absolute;
    inset: 0;
	
	
    background:
      radial-gradient(900px 480px at 50% 35%, rgba(255,255,255,.08), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 100%);
	
    pointer-events: none;
  }

  .hero__content {
    position: relative;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding-top: 26px;
    padding-bottom: 40px;
  }

  .hero__brand {
    display: grid;
    place-items: center;
    gap: 4px;
    text-transform: uppercase;
  }
  
  .hero__brand img {
    position: fixed;
    top: 33px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    height: 37px;
    width: auto;
	mix-blend-mode: difference;
  }

  .hero__brand .name {
    font-weight: var(--semibold);
    font-size: 14px;
  }

  .hero__headline {
    display: grid;
    place-items: center;
    text-align: center;
    align-content: center;
    gap: 14px;
    padding-bottom: 60px;
  }

  .hero__headline h1 {
    margin: 0;
	font-family: 'supreme_llthin';
    font-weight: var(--thin);
    letter-spacing: -2px;
    font-size: 80px;
    line-height: 1.05;
	-webkit-text-stroke: 1px white;
  }

  .hero__headline p {
	font-family: 'supreme_lllight';
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.85px;
	-webkit-text-stroke: 0.5px white;
    text-transform: none;
    white-space: nowrap;
  }
  
  .hero__headline p span {
	font-family: 'helvetica_neue_lt_com43LtEx';
	-webkit-text-stroke: 0.4px white;
  }

  .hero__meta {
    font-family: 'supreme_lllight';
    display: grid;
    place-items: center;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
	-webkit-text-stroke: 0.5px white;
	gap:3px;
  }


  .intro_copy p span {
	font-family: 'helvetica_neue_lt_com43LtEx';
	letter-spacing:1px;
	-webkit-text-stroke: 0.4px black;
  }
  
  .sub span {
	font-family: 'helvetica_neue_lt_com43LtEx';
	letter-spacing:1px;
	-webkit-text-stroke: 0.4px black;
  }
  
  .ingredientList span {
  	font-family: 'helvetica_neue_lt_com43LtEx';
  	letter-spacing:1px;
  	-webkit-text-stroke: 0.4px black;
  }
  
 @media (max-width: 1280px) {
  .hero__headline h1 {
    font-size: 60px;
	letter-spacing: -1px;
	-webkit-text-stroke: 1px white;
	
  }
}

@media (max-width: 768px) {
  .hero__headline h1 {
    width:300px;
    font-size: 48px;
		letter-spacing: -0.5px;
	-webkit-text-stroke: 1px white;
  }
  .hero__headline p {
    font-size: 11.5px;
  }
}

@media (max-width: 430px) {
  .hero {
	  height:89vh;
  }
  .hero__brand img {

    height: 32px;
  }
}


  /* =============================
VIDEO 2
  
    ==============================*/

  .secondVideo {
      position: relative;

  	margin: 100px 40px;

  }

  /* Video card */
  
  
      .videoCard{
        position: relative;
        width: 100%;
          	border-radius: 7px;
        overflow: clip;
        background: #000;
        /* keeps a similar aspect ratio to screenshot */
        height: 90vh; /* requirement */
        min-height: 680px;
		aspect-ratio:16/9;
      }

      /* Background video */
      .videoCard video{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit: cover;
        filter: contrast(1.05) saturate(.9) brightness(.85);
        transform: scale(1.02); /* hides edge seams */
      }

      /* Optional darkening / vignette for readability */
      .videoCard::after{
        content:"";
        position:absolute;
        inset:0;
       /* background:
          radial-gradient(900px 420px at 50% 45%, rgba(0,0,0,.25), rgba(0,0,0,.62) 70%),
          linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.60));*/
        pointer-events:none;
      }

      /* Text overlay */
      .overlay2{
		  position:absolute;
		  inset:0;
		  display:grid;
		  grid-template-rows: auto 1fr; /* top + flexible center */
		  z-index:2;
		  pointer-events:none;
  		  mix-blend-mode: difference;
      }
	  .overlay__top{
	    display:flex;
	    justify-content:center;
	    padding-top: clamp(40px, 4vw, 48px);
	  }
	  
	  .overlay__center{
	    display:grid;
	    place-items:center; /* true vertical + horizontal centering */
	    padding-left: clamp(20px, 4vw, 56px);
	    padding-right: clamp(20px, 4vw, 56px);
	    padding-bottom: clamp(32px, 6vw, 72px);
	  }

      .overlay__inner2{
		  width: min(640px, 100%);
		  color: #fff;
		  text-align:left;
      }

      .eyebrowTop{
		text-align:center;
	  	font-family: 'helvetica_neue_lt_com43LtEx';
	  	-webkit-text-stroke: 0.3px #fff;
	    font-size: 10px;
	    letter-spacing: 2px;
	    text-transform: uppercase;
	    color: #fff;
	  	line-height:14.5px;
      }

      .scienceTitle{
        text-align:center;
	  	font-family: 'helvetica_neue_lt_com43LtEx';
	  	-webkit-text-stroke: 0.3px #fff;
	      font-size: 10px;
	      letter-spacing: 2px;
	      text-transform: uppercase;
	      color: #fff;
	  	line-height:14.5px;
        margin-bottom: 22px;
      }

      .scienceBody{
	      font-family: 'supreme_lllight';
	      font-size: 12px;
	      letter-spacing: 1px;
	      text-align: left;
	  	-webkit-text-stroke: 0.5px white;
        text-wrap: pretty;
      }

      .scienceBody p{
        margin: 0 0 16px;
      }

      .scienceBody p span{
	  	font-family: 'helvetica_neue_lt_com43LtEx';
	  	-webkit-text-stroke: 0.4px white;
      }

      /* Mobile tweaks */
      @media (max-width: 768px){
		 .secondVideo {margin: 100px 20px;}
        .videoCard{ height: 85vh; aspect-ratio: 3 / 4; }
		
        .overlay__inner2{ width: min(560px, 100%); }
        .scienceBody{ font-size: 12.5px; }
      }

  
  
  

  /* =============================
    WHITE INTRO STRIP
  ==============================*/
  .intro {
    background: #fff;
    padding: 56px 0 72px;
  }
  

  .intro__grid {
    display: grid;
    grid-template-columns:4fr 1fr 2fr 5fr;
	grid-template-areas:"copy . logo .";
    gap: 0px;
  }
  
  .intro_copy {
	  grid-area:copy;
  }
  
  .intro_logo {
	  grid-area:logo;
	  max-width:160px;
  	  margin: 0 auto;
  }

  .intro p {
    margin: 0 0 14px;
    color: #000;
    font-size: 12px;
    line-height: 1.35;
	text-wrap: pretty;
  }

  .beMark {
    width: min(220px, 100%);
    margin-left: auto;
    height: 110px;
  }

  .dividerLabel {
    text-align: center;
    margin-top: 150px;
	font-family: 'helvetica_neue_lt_com43LtEx';
	-webkit-text-stroke: 0.6px #000;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000;
	line-height:14.5px;
  }
  

  @media (max-width: 1240px) {
	  
	  .intro_logo {
		  width:240px;
		  margin: 0 auto;
		  
	  }
  }


  @media (max-width: 900px) {
	  .intro__grid {
	    grid-template-columns: 1fr;
	    grid-template-areas:
	      "copy"
		  "logo";
	    row-gap: 24px;
	  }
	  
	  .intro_logo {
		  width:200px;
		  margin: 0 auto;
		  margin-top:80px;
		  
	  }
	  
    .beMark { margin-left: 0; }
  }
  
  
  @media (max-width: 600px) {
	  .dividerLabel {
	    text-align: center;
		width:320px;
		margin:0 auto;
		margin-top:120px;
	  }
  }
  

  /* =============================
    PRODUCT SECTION
  ==============================*/
  .product {
    background: #fff;
    padding: 48px 0 76px;
  }

  .product__grid {
    display: grid;
    grid-template-columns: 6fr 6fr;
	grid-template-areas:"carousel product_copy";
    gap: 0px;
	align-items:end;
  }

  .frame {
    border-radius: 7px;
    background: #0d0f12;
    overflow: clip;
    min-height: 780px;
    position: relative;
	grid-area:carousel;
  }

  .frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 60% at 50% 75%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%);
    pointer-events: none;
  }

  /* Carousel */
  .carousel {
    width: 100%;
    height: 100%;
  }

  .carousel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.01);
    transition: opacity .5s var(--ease);
  }

  .carousel img.is-active { opacity: 1; }
  
  .product__copy {
	grid-area:product_copy;
	margin:0 auto;
   }	

  .product__copy h2 {
  	font-family: 'supreme_llthin';
  	-webkit-text-stroke: 0.5px #000;
      margin: 0;
      font-size: 22px;
      line-height: 1.4;
  	letter-spacing:1.25px;
  }

  .product__copy .sub {
    margin-top: 2px;
    font-size: 12px;
  }

  .product__copy p {
    margin: 18px 0 0;
    font-size: 12px;
    line-height: 1.35;
    max-width: 50ch;
	text-wrap: pretty;
  }

  .label {
    margin-top: 40px;
	font-family: 'helvetica_neue_lt_com43LtEx';
	-webkit-text-stroke: 0.6px #000;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000;
  }

  .pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .pill {
    font-size: 11px;
    padding: 0px 4px 2px 4px;
    border-radius: 3px;
    color: #fff;
    background: #000;
  }

  .list {
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;
    font-size: 12px;
    color: #000;
  }

  .list li {gap: 5px; }
  
  
  
  .clinicalsList {
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;
    font-size: 12px;
    color: #000;
  }
  .clinicalsList li {margin-bottom:15px;line-height:1.35;}
  
  .ingredientsModalList {
      margin: 20px 0 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 3px;
      font-size: 12px;
      color: #000;
  }
  
  .ingredientsModalList li {
	  margin-bottom:20px;
	  line-height:1.35;
	  font-size:11px;
  }
  
  .ingredientsModalList span {
  	font-family: 'helvetica_neue_lt_com43LtEx';
 
  }
  
 #ingredientsModal p {
	  line-height:1.35;
	  font-size:11px;
	  padding:0;
  }

  .twoCol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
    margin-top: 8px;
  }
  
  .ingredientList {
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
    line-height: 1.5;
  }
  
  @media (max-width: 1024px) {
	  .frame {
	    min-height: 680px;
	  }
	  
	  .product__copy {
		  margin: 0 20px;
	  }
	  
	  .product__copy p {
	    max-width: none;
		font-size: 11px;
	  }
	  .list {	   
	    font-size: 11px;
	  }
	  .intro p {
	  		    font-size: 11px;
	  }
	  
	  .product__copy .sub {
	    margin-top: 2px;
	    font-size: 11px;
	  }
	  
	  .ingredientList {
	  	 font-size: 11px;
	  }

	  
  }
  
    @media (max-width: 860px) {
	
  	  .product__grid { 
    	  	  grid-template-columns: 1fr;
    	   	  grid-template-areas:
    	      "carousel"
    		  "product_copy";
    	      row-gap: 40px;
  		  align-items:start;
		   
  	  }
	  .product__copy {
		  	grid-area:product_copy;
			margin:0px;
	   }
	   
 	  .product__copy p {
 	    max-width: none;
 		font-size: 12px;
 	  }
 	  .list {	   
 	    font-size: 12px;
 	  }
 	  .intro p {
 	  		    font-size: 12px;
 	  }
	  
 	  .product__copy .sub {
 	    margin-top: 2px;
 	    font-size: 12px;
 	  }
	  
 	  .ingredientList {
 	  	 font-size: 12px;
 	  }
	}

  @media (max-width: 768px) {
	  
	  .frame {
	    min-height: 600px;
	  }
	  
  }



  
  
  .link2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    border-bottom: 1px solid #000;
  }

  .link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    border-bottom: 1px solid #000;
  }

  /* =============================
    FOOTER STRIP
  ==============================*/
  .bottom {
    background: #fff;
    padding: 150px 0 40px;
  }

  .bottom__grid {
	  display: grid;
	  grid-template-columns: 3fr 3fr 1fr 5fr;
	  grid-template-areas:"be-logo signup . fineprint";
	  gap: 20px;
      align-items: end;
  }

  .bottom_logo {
  	  grid-area:be-logo;
  }
  
  .bottom_logo_video {
	  border-radius:7px;
  }
	
  .email-signup {
	  display: grid;
	  align-content:space-between;
	  grid-area:signup;
  }

  .email-signup h3 {
    margin: 0;
	font-family: 'supreme_llthin';
	-webkit-text-stroke: 0.5px #000;
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
	letter-spacing:1.25px;
  }

  .email-form {
  	  align-items:end;
	  padding-top:18px;
  }
  
  .success {
	  display: none;
  }
  
  .signup {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(420px, 100%);
    border-bottom: 1px solid #000;
  }

  .signup input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
	letter-spacing:0.4px;	
  }

  .signup input::placeholder {
    color: #000;
  }

  .signup button {
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    color: #000;
    transition: transform .2s ease, color .2s ease;
  }

  .signup button:hover {
    transform: translateX(2px);
    color: #333;
  }
  
  #signupMsg {
	  color:#000;
  }

  .fineprint-holder {
  	grid-area:fineprint;
	margin: 0 auto;
  }
  
  .fineprint-holder-mobile {
  	grid-area:fineprint;
	margin: 0 auto;
	visibility:hidden;
	display:none;
  }
  .fineprint_1, .fineprint_2, .fineprint_3,.fineprint_1_mobile {
    color: #000;
    font-size: 12px;
    line-height: 1.5;
    max-width: 70ch;
  }

  .fineprint b { color: rgba(15,15,16,.9); font-weight: var(--medium); }

  .nail {
    margin-top: 30px;
    color: #000;
    font-size: 12px;
    line-height: 1.6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
  }
  
  .instagram a {
	  border-bottom:1px solid black;
	  font-size: 12px;
  }
  
  .instagram a:hover {
  	   color: #333;
  }
  
  .copyright {
	      display: flex;
    color: #000;
    font-size: 12px;
    line-height: 1.6;
  }

  /* Accessibility */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  @media (max-width: 1330px) {
  .bottom__grid {
	  grid-template-columns: 3.5fr 3fr 1fr 5fr;
	
  }
}
  
    @media (max-width: 1200px) {
	  
		
	    .email-signup h3 {
	      font-size: 20px;
	    }
		
  } 
  
  @media (max-width: 1024px) {
   
    .email-signup h3 {
      font-size: 18px;
    }
	
} 
  
  @media (max-width: 768px) { 
	  
	  .bottom {
		  padding: 50px 0 10px 0;
	  }
	  
    .bottom__grid { 
   	   grid-template-columns: 1fr; 
	   grid-template-areas: "signup";
	   margin-top: 50px;
	   row-gap: 50px;
   	}


    .email-signup h3 {
      font-size: 22px;
    }
		
	.bottom_logo {
		visibility:hidden;
		height:0px;
		display:none;
		
	}
	
    
	
	
    .fineprint-holder {
    margin: 0;
  	visibility:hidden;
  	display:none;
    }
  
    .fineprint-holder-mobile {
  	margin: 0;
  	visibility:visible;
  	display:block;
    }
  	 
   }
 
   @media (max-width: 1024px) {   
	   .fineprint_1 {
	     font-size: 11.5px;
	     line-height: 1.5;
	     max-width: 7 0ch;
	   }
	   
	   .fineprint_2 {
	     font-size: 11.5px;
	     line-height: 1.5;
	     max-width: 40ch;
	   }
	   
	   .fineprint_3 {
	     font-size: 11.5px;
	     line-height: 1.5;
	     max-width: 70ch;
	   }
}
  
  
  
    /* TOENAIL LOGO */
  
  .toe {
	  visibility:hidden;
  }
  
  .toeLogo img {
	height: 0;
  }
  
  .toeLogo video {
	height: 0;
	border-radius:7px;
  }
  

  @media (max-width: 768px) {
  	/* Bottom sheet panel */
    .toe {
		margin-top:50px;
	    visibility:visible;
	    width:100%;
	
    }
	
	.toeLogo {
		width: 100%;
		margin-bottom:20px;
	}
	
	.toeLogo img {
		width: 100%;
		height:100%;
	}
	
	.toeLogo video {
		width: 100%;
		height:100%;
	}
  }
 

/* Ingedients Modal*/
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* instead of display:none */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.2,.8,.2,1),
              visibility 0s linear 220ms; /* delay hiding until after fade */
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms cubic-bezier(.2,.8,.2,1),
              visibility 0s linear 0s;
}

/* Backdrop */
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.50);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(.2,.8,.2,1);
}

.modal.is-open .modal__backdrop {
  opacity: 1;
}

/* Bottom sheet panel */
.modal__panel {
  position: absolute;
  right: 0;
  top:0;
  height:100%;
  width:460px;
  background: #fff;
  color: 000;
  padding: 30px;
  overflow-y:auto;
  /* start off-screen */
  transform: translate(100%, 0);
  opacity: 1;

  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}



.modal__panel h3 {
  margin: 0 0 16px;
  font-family: 'helvetica_neue_lt_com43LtEx';
      -webkit-text-stroke: 0.2px #000;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #000;
}

.modal__panel p {
  padding: 10px 0 0 0;
font-family: 'supreme_llregular';
  font-size: 12px;
  letter-spacing: .85px;
  text-transform: none;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color:#000;
}
.modal__close:hover {
  color: rgba(15,15,16,.6);
}

.modal.is-open .modal__panel {
  transform: translate(0, 0);
}

@media (max-width: 768px) {
	/* Bottom sheet panel */
	.modal__panel {
	  width:375px;
	  
	} 
}

@media (max-width: 430px) {
	/* Bottom sheet panel */
	.modal__panel {
	  width:100%;
	  padding:30px 20px;
	} 
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal__backdrop,
  .modal__panel {
    transition: none;
  }
}
  
  
/* ===== Password Gate Overlay ===== */

body.is-locked {
  overflow: hidden;
  height: 100vh;
    touch-action: none;
}

.gate-logo {
	display:block;
}

.gate-logo img {
    position: fixed;
    top: 33px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    height: 37px;
    width: auto;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
}

.gate[aria-hidden="true"] {
  display: none;
}

.gate__backdrop {
  position: absolute;
  inset: 0;
  /* blur + dim */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background: rgba(0,0,0,.55);
}

.gate__panel {
  position: relative;
  width: min(520px, calc(100% - 40px));
  background: transparent;
  margin:0 auto;
}

.gate__title {
  margin: 0 auto;
  font-size: 12px;
  color: #fff;
  letter-spacing:0.85px;
  text-align:center;
}

.gate__form {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px 0;
}

.gate__form input {
  flex: 1;
  border-bottom: 1px #fff solid!important;
  padding:6px 0;
  outline: none;
  border:none;
  background: transparent;
  font-size: 12px;
  color:#fff;
}

.gate__form input::placeholder {
  color: #fff;
   letter-spacing:0.85px;
}

.gate__form button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: #fff;
  letter-spacing:0.85px;
  transition: transform .2s ease, color .2s ease;
}

.gate__form button:hover {
  transform: translateX(2px);
  color: #888;
}

.gate__error {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(200, 30, 30, .9);
  min-height: 16px;
}

@media (max-width: 720px) {
  .gate__panel { width: min(520px, calc(100% - 20px)); }
}