/* ==========================================================================
   Ultlock — advertorial.css (home page only)
   ========================================================================== */

/* Hero --------------------------------------------------------------------- */
.hero{
  padding:36px 0 44px;
  background:linear-gradient(180deg,#fff 0%,var(--paper-alt) 100%);
}
.hero__inner{
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:center;
  text-align:center;
}
.hero h1{max-width:820px;}
.hero__lede{
  font-size:clamp(1.02rem,2.4vw,1.2rem);
  color:var(--body-c);
  max-width:640px;
}
.hero__lede strong{color:var(--accent-ink);}

.hero__media{
  width:100%;
  max-width:640px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  aspect-ratio:4/3;
  background:#0d0f14;
}
.hero__media video{width:100%;height:100%;object-fit:cover;}

.hero__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
}
.hero__disclosure{
  font-size:.86rem;
  color:var(--mute);
  max-width:560px;
  margin:0 auto;
}

@media (min-width:768px){
  .hero__inner{text-align:center;}
}

/* Generic media block used through article --------------------------------- */
.media_frame{
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  aspect-ratio:4/3;
  background:#e9e7db;
}
.media_frame img{width:100%;height:100%;object-fit:cover;}
.media_frame--wide{aspect-ratio:16/9;}

/* Intro ---------------------------------------------------------------------*/
.intro{padding-top:8px;}
.intro p{font-size:1.05rem;}

/* Numbered list items -------------------------------------------------------*/
.article_section{scroll-margin-top:88px;}

.list_item{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:32px 0;
  border-top:1px solid var(--line);
}
.list_item:first-of-type{border-top:none;}
.list_item__head{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.list_item__num{
  flex:none;
  width:46px;height:46px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.15rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.list_item__body h3{margin-bottom:.3em;}
.list_item__media{width:100%;}
.list_item__caption{
  font-size:.85rem;
  color:var(--mute);
  margin-top:8px;
}

@media (min-width:768px){
  .list_item{
    flex-direction:row;
    align-items:flex-start;
    gap:36px;
    padding:40px 0;
  }
  .list_item__text{flex:1 1 52%;}
  .list_item__media{flex:1 1 40%;max-width:360px;}
  .list_item--media-left{flex-direction:row-reverse;}
}

/* Fact box / steps ---------------------------------------------------------*/
.fact_box{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  box-shadow:var(--shadow-soft);
}
.fact_box h3{margin-bottom:14px;}
.fact_box__grid{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.fact_box__item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  background:var(--paper-alt);
  border-radius:var(--radius-md);
}
.fact_box__icon{
  flex:none;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--accent-tint);
  color:var(--accent-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.9rem;
}
.fact_box__item p{margin:0;font-size:.95rem;}
@media (min-width:640px){
  .fact_box__grid{flex-direction:row;flex-wrap:wrap;}
  .fact_box__item{flex:1 1 260px;}
}

.steps{
  display:flex;
  flex-direction:column;
  gap:16px;
  list-style:none;
  padding:0;
  margin:0;
}
.steps li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin:0;
  padding:16px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.steps__num{
  flex:none;
  font-family:var(--font-head);
  font-weight:700;
  color:var(--accent-ink);
  font-size:1.05rem;
}

/* Pull note ----------------------------------------------------------------*/
.pull_note{
  border-left:4px solid var(--accent);
  padding:4px 0 4px 18px;
  font-family:var(--font-head);
  font-size:1.05rem;
  color:var(--ink);
  margin:0;
}

/* CTA band ------------------------------------------------------------------*/
.cta_band{
  background:var(--navy);
  color:#eef0f5;
  border-radius:var(--radius-lg);
  padding:32px 24px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.cta_band h3{color:#fff;margin-bottom:4px;}
.cta_band p{color:#c7cde0;max-width:520px;}
.cta_band--mid{margin:12px 0;}

/* Honest limits accordion (accent-borrowed FAQ styling) ---------------------*/
.limits{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.limits__item{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  overflow:hidden;
}
.limits__q{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:1rem;
  color:var(--ink);
  cursor:pointer;
  min-height:44px;
}
.limits__q:hover{background:var(--paper-alt);}
.limits__icon{
  flex:none;
  width:26px;height:26px;
  border-radius:50%;
  border:2px solid var(--accent);
  color:var(--accent-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  line-height:1;
  transition:transform .2s ease;
}
.limits__item[data-open="true"] .limits__icon{transform:rotate(45deg);}
.limits__a{
  padding:0 20px;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease, padding .25s ease;
  font-size:.95rem;
  color:var(--body-c);
}
.limits__item[data-open="true"] .limits__a{
  padding:0 20px 20px;
  max-height:280px;
}

/* Final CTA section ----------------------------------------------------------*/
.final_cta{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.final_cta__note{font-size:.86rem;color:var(--mute);max-width:560px;}

/* Table of contents chips (optional nav aid) ---------------------------------*/
.toc{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:28px 0 0;
  padding:0;
  list-style:none;
}
.toc a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
}
.toc a:hover{border-color:var(--accent);color:var(--accent-ink);}