/* Hey U — How It Works. Prefix "hyu-" (clear of the -card/-tile/-tag/hero traps). */
/* This section sits directly under "How to use Habitually U", whose own bottom padding
   already provides the separation. Its top padding is removed so the two don't stack
   (56 + 56 + 64 = 176px of dead space before this fix). */
/* Top AND bottom padding removed: the neighbouring sections ("How to use Habitually U"
   above, "Manage your Habitually U" below) already carry their own 56px, and stacking
   them gave 176px of dead space at each seam. */
#page-subscription #how-hey-u-works{
  background:#FFFCF7; padding-top:0 !important; padding-bottom:0 !important;
}
.hyu-wrap{ max-width:1440px; margin:0 auto; padding:8px 24px; }
.hyu-intro{ display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:start; margin-bottom:40px; }
.hyu-eb{
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:0 0 12px;
  color:#7d9e77 !important; -webkit-text-fill-color:#7d9e77 !important;
}
#page-subscription h2.hyu-h{
  font-family:'Playfair Display',serif; font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1.16; margin:0 0 16px;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.hyu-body{
  font-size:1.05rem; line-height:1.75; margin:0 0 14px;
  color:#5b5950 !important; -webkit-text-fill-color:#5b5950 !important;
}
.hyu-supp{
  font-family:'Caveat',cursive; font-size:1.35rem; margin:0 0 22px;
  color:#7d9e77 !important; -webkit-text-fill-color:#7d9e77 !important;
}
.hyu-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.hyu-btn{
  background:#243447; border:2px solid #243447; border-radius:999px;
  padding:13px 26px; min-height:48px; font:inherit; font-weight:800; font-size:.95rem;
  color:#fff !important; -webkit-text-fill-color:#fff !important; cursor:pointer;
  transition:background .16s ease, transform .12s ease;
}
.hyu-btn:hover{ background:#31465F; }
.hyu-btn:active{ transform:scale(.97); }
.hyu-btn--soft{
  background:#fff; border-color:#EAE2D4;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.hyu-btn--soft:hover{ border-color:#7d9e77; background:#FBF6EC; }
.hyu-btn:focus-visible,.hyu-shot:focus-visible,.hyu-x:focus-visible{ outline:3px solid #CF9E3F; outline-offset:3px; }

.hyu-ctx{ display:grid; gap:12px; }
.hyu-c{
  background:#fff; border:1px solid #EAE2D4; border-radius:20px; padding:18px;
  display:flex; gap:14px; align-items:flex-start;
  box-shadow:0 4px 14px rgba(51,64,47,.04);
}
.hyu-c svg{ flex:none; width:26px; height:26px; stroke:#7d9e77; }
.hyu-c b{ display:block; margin-bottom:4px; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.hyu-c span{ font-size:.9rem; line-height:1.6; color:#78766c !important; -webkit-text-fill-color:#78766c !important; }

.hyu-shell{
  background:#fff; border:1px solid #EAE2D4; border-radius:28px; padding:26px;
  box-shadow:0 6px 22px rgba(51,64,47,.05);
}
.hyu-lb{
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px;
  color:#a8a496 !important; -webkit-text-fill-color:#a8a496 !important;
}
.hyu-shot{
  display:block; width:100%; padding:0; border:none; background:none; cursor:zoom-in; border-radius:18px;
}
.hyu-shot img{ display:block; width:100%; height:auto; border-radius:18px; }
.hyu-hold{
  aspect-ratio:16/10; display:grid; place-items:center; text-align:center; padding:24px; border-radius:18px;
  background:repeating-linear-gradient(45deg,#FBF6EC,#FBF6EC 12px,#F5EFE2 12px,#F5EFE2 24px);
  border:1px dashed #EAE2D4;
}
.hyu-hold p{ margin:0; font-weight:700; color:#a8a496 !important; -webkit-text-fill-color:#a8a496 !important; }
.hyu-tap{
  text-align:center; font-size:.84rem; margin:12px 0 0;
  color:#a8a496 !important; -webkit-text-fill-color:#a8a496 !important;
}
/* "Coming soon" markers sit over the CarPlay / Android Auto panels in the artwork.
   Positioned as PERCENTAGES of the image box, so they scale with the responsive
   image and stay correct in the lightbox too. Coordinates measured from the source
   (1536x1024): CarPlay 43.6-62.3% x, 54.7-76.4% y; Android Auto 66.2-84.0%, 54.7-78.8%. */
.hyu-shot, .hyu-figure{ position:relative; }
.hyu-soon{
  position:absolute; z-index:3; display:flex; align-items:center; justify-content:center;
  background:rgba(36,52,71,.72); border-radius:10px; pointer-events:none;
}
.hyu-soon span{
  background:#CF9E3F; border-radius:12px; padding:5px 10px;
  font-family:'Nunito',system-ui,sans-serif; font-weight:800; letter-spacing:.04em;
  /* never below 11px — an 8px badge is unreadable and breaks the no-tiny-text rule.
     Wraps to two lines inside the panel instead of shrinking. */
  font-size:clamp(.69rem, 1vw, .78rem); line-height:1.25;
  text-transform:uppercase; white-space:normal; text-align:center; max-width:92%;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
.hyu-soon.carplay{ left:43.55%; top:54.69%; width:18.75%; height:21.68%; }
.hyu-soon.android{ left:66.21%; top:54.69%; width:17.77%; height:24.12%; }

/* lightbox */
.hyu-modal{
  position:fixed; inset:0; z-index:4000; background:rgba(20,26,34,.86);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.hyu-modal.on{ display:flex; }
.hyu-figure{
  position:relative; max-width:96vw; max-height:92vh; overflow:auto;
  background:#fff; border-radius:20px; padding:12px;
  -webkit-overflow-scrolling:touch;
}
.hyu-figure img{ display:block; max-width:none; width:auto; height:auto; border-radius:12px; }
.hyu-x{
  position:fixed; top:18px; right:18px; z-index:4010;
  background:#fff; border:none; border-radius:999px; width:48px; height:48px;
  font-size:1.3rem; font-weight:800; cursor:pointer;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}

/* examples */
.hyu-ex{ margin-top:48px; }
.hyu-bubbles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.hyu-b{
  background:#fff; border:1px solid #EAE2D4; border-radius:22px 22px 22px 6px; padding:18px;
}
.hyu-b .cat{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  border-radius:999px; padding:4px 10px; margin-bottom:10px;
  background:#EAF1E4; color:#4d6a47 !important; -webkit-text-fill-color:#4d6a47 !important;
}
.hyu-b p{
  margin:0; font-size:1rem; line-height:1.6;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.hyu-fine{
  margin:18px 0 0; font-size:.88rem; line-height:1.7;
  color:#78766c !important; -webkit-text-fill-color:#78766c !important;
}

/* driving */
.hyu-drive{
  margin-top:40px; background:#F2F6FA; border:1px solid #D6E3EF; border-radius:26px; padding:30px;
}
#page-subscription h3.hyu-h3{
  font-family:'Playfair Display',serif; font-size:1.45rem; margin:0 0 12px;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.hyu-drive p{ color:#41628a !important; -webkit-text-fill-color:#41628a !important; line-height:1.75; margin:0 0 18px; }
.hyu-steps{ list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.hyu-steps li{
  background:#fff; border:1px solid #D6E3EF; border-radius:16px; padding:14px;
  display:flex; gap:10px; align-items:flex-start;
  color:#41628a !important; -webkit-text-fill-color:#41628a !important; font-size:.92rem; line-height:1.6;
}
.hyu-steps li b{
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:#243447; font-size:.74rem;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.hyu-safe{
  background:#fff; border:1px solid #D6E3EF; border-left:4px solid #5b7fa6; border-radius:12px;
  padding:14px 16px; font-size:.87rem; line-height:1.7; margin:0;
  color:#41628a !important; -webkit-text-fill-color:#41628a !important;
}

/* final CTA */
.hyu-final{
  margin-top:40px; text-align:center; background:#fff;
  border:1px solid #EAE2D4; border-radius:26px; padding:40px 26px;
}
.hyu-final p{
  max-width:560px; margin:0 auto 22px;
  color:#5b5950 !important; -webkit-text-fill-color:#5b5950 !important; line-height:1.75;
}
.hyu-final .hyu-cta{ justify-content:center; }

@media (max-width:900px){
  .hyu-intro{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:600px){
  .hyu-wrap{ padding:6px 15px; }
  .hyu-shell{ padding:16px; border-radius:22px; }
  .hyu-cta{ flex-direction:column; }
  .hyu-cta .hyu-btn{ width:100%; }
  .hyu-figure{ padding:8px; max-width:100vw; }
}
@media (prefers-reduced-motion:reduce){
  .hyu-btn{ transition:none !important; }
  html{ scroll-behavior:auto !important; }
}