/* MIIN CARE v9 — visual storytelling, video carousel and mobile cleanup */
#media,.feeling-section,.quick-start-section{scroll-margin-top:58px}

/* Video/photo carousel */
.media-showcase{background:linear-gradient(180deg,#fffaf8 0%,#f8ecef 100%);overflow:hidden}
.media-carousel{position:relative}
.media-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,31%);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 18px;scrollbar-width:none}
.media-track::-webkit-scrollbar{display:none}
.media-slide{position:relative;scroll-snap-align:start;aspect-ratio:9/14;border-radius:28px;overflow:hidden;background:#241b1f;box-shadow:0 18px 46px rgba(65,26,41,.13)}
.media-slide video,.media-slide img{width:100%;height:100%;object-fit:cover}
.media-slide:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(22,10,15,.78));pointer-events:none}
.media-slide>span{position:absolute;left:18px;right:18px;bottom:17px;z-index:2;color:#fff;font-weight:850;font-size:15px;line-height:1.25}
.media-play{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;z-index:3;width:52px;height:52px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(35,20,26,.58);color:#fff;font-size:18px;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px)}
.media-slide.is-playing .media-play{opacity:.18}
.media-slide:hover .media-play{opacity:1}
.media-arrow{position:absolute;z-index:4;top:50%;translate:0 -50%;width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:var(--wine,#781638);box-shadow:0 10px 28px rgba(55,20,32,.18);font-size:23px;cursor:pointer}
.media-arrow.prev{left:-23px}.media-arrow.next{right:-23px}
.media-dots{display:flex;justify-content:center;gap:7px;margin-top:5px}
.media-dots i{display:block;width:7px;height:7px;border-radius:999px;background:#d9c4ca;transition:.2s}
.media-dots i.active{width:24px;background:var(--wine,#781638)}

/* Emotional photo cards */
.feeling-section{background:#fff}
.feeling-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feeling-card{min-width:0;border-radius:28px;overflow:hidden;background:#fff;border:1px solid rgba(75,40,51,.12);box-shadow:0 14px 40px rgba(72,30,45,.07)}
.feeling-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feeling-card>div{padding:23px}
.feeling-card h3{font-size:24px;line-height:1.12;margin:0 0 9px;letter-spacing:-.025em}
.feeling-card p{margin:0;color:var(--muted,#6d5b61);font-size:14px;line-height:1.6}

/* Quick scent direction */
.quick-start-section{background:linear-gradient(180deg,#fff,#faf3f5)}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.quick-card{position:relative;min-width:0;border-radius:24px;overflow:hidden;background:#fff;border:1px solid rgba(75,40,51,.12)}
.quick-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.quick-card>div{padding:18px}
.quick-card h3{font-size:21px;line-height:1.15;margin:0 0 6px}
.quick-card strong{display:block;color:var(--wine,#781638);font-size:13px;line-height:1.35}
.quick-card p{margin:7px 0 0;color:var(--muted,#6d5b61);font-size:13px;line-height:1.45}
.quick-actions{display:flex;justify-content:center;gap:10px;margin-top:28px}

/* Later usage section now uses photographs, since videos moved forward */
.how-photo-stack{position:relative;min-height:620px;border-radius:34px;overflow:hidden;background:#f3e7e9;box-shadow:0 18px 55px rgba(68,27,42,.11)}
.how-photo-main{width:100%;height:100%;min-height:620px;object-fit:cover}
.how-photo-small{position:absolute;right:18px;bottom:64px;width:38%;aspect-ratio:1/1;object-fit:cover;border:8px solid rgba(255,255,255,.92);border-radius:24px;box-shadow:0 15px 36px rgba(44,18,28,.2)}
.how-photo-stack>span{position:absolute;left:18px;right:18px;bottom:18px;padding:12px 15px;border-radius:14px;background:rgba(37,21,27,.72);color:#fff;font-size:12px;font-weight:800;backdrop-filter:blur(10px)}

/* Fix logo distortion in final CTA and footer */
.final-card>img,.footer-brand>img,.hub-footer .footer-brand>img{width:64px!important;height:64px!important;min-width:64px!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:50%!important}
.footer-brand>img,.hub-footer .footer-brand>img{width:42px!important;height:42px!important;min-width:42px!important}

/* Sticky CTA: quieter, visible only when useful */
.mobile-buybar{transition:transform .25s ease,opacity .25s ease!important}
.mobile-buybar.is-hidden{transform:translateY(150%)!important;opacity:0!important;pointer-events:none!important}

@media(max-width:980px){
  .media-track{grid-auto-columns:minmax(250px,43%)}
  .feeling-grid{grid-template-columns:1fr 1fr}
  .feeling-card:last-child{grid-column:1/-1}
  .quick-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:680px){
  /* The black network bar is enough on mobile. Remove the duplicate white header. */
  .site-header,.hub-header{display:none!important}
  body{padding-top:44px!important}
  .hero{padding-top:40px!important}
  .hub-hero{padding-top:46px!important}

  .media-showcase{padding-top:54px!important;padding-bottom:58px!important}
  .media-showcase .section-head{margin-bottom:22px!important}
  .media-track{grid-auto-columns:84%;gap:12px;margin-inline:-12px;padding-inline:12px;padding-bottom:14px}
  .media-slide{border-radius:23px;aspect-ratio:9/14}
  .media-slide>span{left:15px;bottom:14px;font-size:14px}
  .media-arrow{display:none}
  .media-play{width:48px;height:48px}

  .feeling-section{padding-top:58px!important;padding-bottom:58px!important}
  .feeling-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-12px;padding:0 12px 12px;scrollbar-width:none}
  .feeling-grid::-webkit-scrollbar{display:none}
  .feeling-card,.feeling-card:last-child{min-width:84%;grid-column:auto;scroll-snap-align:center;border-radius:23px}
  .feeling-card>div{padding:19px}
  .feeling-card h3{font-size:22px}

  .quick-start-section{padding-top:58px!important;padding-bottom:58px!important}
  .quick-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-12px;padding:0 12px 14px;scrollbar-width:none}
  .quick-grid::-webkit-scrollbar{display:none}
  .quick-card{min-width:76%;scroll-snap-align:center;border-radius:22px}
  .quick-actions{display:grid;grid-template-columns:1fr;margin-top:18px}
  .quick-actions .btn{width:100%;min-height:48px}

  .how-photo-stack{min-height:470px;border-radius:24px}
  .how-photo-main{min-height:470px}
  .how-photo-small{right:12px;bottom:62px;width:42%;border-width:5px;border-radius:18px}
  .how-photo-stack>span{left:12px;right:12px;bottom:12px}

  .final-card{grid-template-columns:46px 1fr!important;align-items:center!important}
  .final-card>img{width:46px!important;height:46px!important;min-width:46px!important}

  .mobile-buybar{left:12px!important;right:12px!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;padding:5px!important;border-radius:16px!important;box-shadow:0 10px 28px rgba(53,11,27,.18)!important}
  .mobile-buybar a{min-height:44px!important;border-radius:12px!important;font-size:12px!important}
  footer{padding-bottom:82px!important}
}

@media(max-width:390px){
  .miin-network-inner{width:calc(100% - 14px)!important}
  .miin-network-home{font-size:9px!important}
  .miin-network nav a{font-size:8.8px!important;padding-inline:6px!important}
  .media-track{grid-auto-columns:88%}
  .feeling-card{min-width:88%}
  .quick-card{min-width:82%}
}