/** Shopify CDN: Minification failed

Line 479:18 Expected ":"
Line 3322:0 Expected ")" to go with "("

**/
/* JapanSolved™ How It Works vNext — V4.4 TRUE QUIET-LUX FIX
   No Liquid placeholder tags. No __ASSIGNS__. Baked assets. */
#js-hiw-final  {
  
  --hiw-gold:#b98232;
   --hiw-gold-soft:#d1a35b;
   --hiw-gold-bright:#d9af63;
  
  --hiw-ink:#15120d;
   --hiw-cream:#fbf7ef;
   --hiw-muted:rgba(21,18,13,.70);
  
  --hiw-line:rgba(185,130,50,.28);
   --hiw-line-strong:rgba(185,130,50,.44);
  
  --hiw-dark:#050505;
   --hiw-dark-text:rgba(255,252,244,.96);
   --hiw-dark-muted:rgba(255,250,240,.74);
   --hiw-dark-soft:rgba(255,250,240,.58);
  
  --hiw-radius:18px;
   --hiw-radius-small:14px;
   --hiw-max:1180px;
   --hiw-wide:1440px;
  
  background:var(--hiw-cream);
   color:var(--hiw-ink);
   overflow-x:hidden;
   isolation:isolate;

}

html[data-js-theme="dark"] #js-hiw-final {
  background:var(--hiw-dark);
  color:var(--hiw-dark-text)
}

#js-hiw-final,#js-hiw-final * {
  box-sizing:border-box
}

#js-hiw-final a {
  text-decoration:none;
  color:inherit
}

#js-hiw-final .hiw-shell {
  width:min(calc(100% - 40px),var(--hiw-max));
  max-width:var(--hiw-max);
  margin:0 auto
}

#js-hiw-final .hiw-shell-wide {
  width:min(calc(100% - 40px),var(--hiw-wide));
  max-width:var(--hiw-wide);
  margin:0 auto
}

#js-hiw-final .hiw-section {
  padding:clamp(58px,6.6vw,96px) 0
}

#js-hiw-final .hiw-section-tight {
  padding:clamp(38px,4.8vw,68px) 0
}

#js-hiw-final .hiw-section-reduce-30 {
  padding-top:clamp(24px,3.1vw,44px);
  padding-bottom:clamp(24px,3.1vw,44px)
}

#js-hiw-final .hiw-section-reduce-18 {
  padding-top:clamp(44px,5.1vw,74px);
  padding-bottom:clamp(44px,5.1vw,74px)
}

#js-hiw-final .hiw-section-head {
  text-align:center;
  margin-left:auto;
  margin-right:auto
}

#js-hiw-final .hiw-eyebrow {
  margin:0 0 14px;
  color:var(--hiw-gold);
  font-size:clamp(15px,1.15vw,20px);
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1.35
}

html[data-js-theme="dark"] #js-hiw-final .hiw-eyebrow {
  color:var(--hiw-gold-bright)
}

#js-hiw-final .hiw-heading {
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,4.2vw,58px);
  line-height:1.05;
  font-weight:400;
  letter-spacing:-.045em;
  color:var(--hiw-ink)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-heading {
  color:var(--hiw-dark-text)
}

#js-hiw-final .hiw-copy {
  margin:18px auto 0;
  max-width:980px;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.82;
  color:var(--hiw-muted)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-copy {
  color:var(--hiw-dark-muted)
}

#js-hiw-final .hiw-copy-centered {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  max-width:980px
}

#js-hiw-final .hiw-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:13px 22px;
  border:1px solid var(--hiw-gold);
  background:var(--hiw-gold);
  color:#fffaf0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
  transition:transform .18s ease,background-color .18s ease,box-shadow .28s ease;
  position:relative;
  overflow:hidden
}

#js-hiw-final .hiw-btn:hover {
  transform:translateY(-1px);
  background:#a9762d;
  color:#fffaf0;
  box-shadow:0 12px 32px rgba(185,130,50,.18)
}

#js-hiw-final .hiw-btn-ghost {
  background:transparent;
  color:var(--hiw-ink)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-btn-ghost {
  color:var(--hiw-dark-text)
}

/* Hero */
#js-hiw-final .hiw-hero {
  position:relative;
  min-height:clamp(520px,54vw,720px);
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--hiw-line);
  background-image:url('/cdn/shop/files/26-js-how-it-works-vnext-hero-structured-gateway-light-desktop-26.webp?v=1778971160'),radial-gradient(circle at 72% 42%,rgba(185,130,50,.10),transparent 30%),linear-gradient(135deg,#fffdf7 0%,#eee4d6 45%,#d9c8af 100%);
  background-size:cover,cover,cover;
  background-position:center right,center,center
}

html[data-js-theme="dark"] #js-hiw-final .hiw-hero {
  border-bottom-color:rgba(185,130,50,.32);
  background-image:url('/cdn/shop/files/25-js-how-it-works-vnext-hero-structured-gateway-dark-desktop-25.webp?v=1778971159'),radial-gradient(circle at 72% 42%,rgba(185,130,50,.13),transparent 30%),linear-gradient(135deg,#030303 0%,#11100d 45%,#382615 100%)
}

#js-hiw-final .hiw-hero-content {
  position:relative;
  z-index:2;
  max-width:660px;
  padding:clamp(58px,7vw,102px) 0;
  isolation:isolate;
  opacity:0;
  transform:translateY(18px);
  filter:blur(4px);
  animation:hiw-hero-reveal 2700ms cubic-bezier(.22,.72,.22,1) 180ms forwards
}

#js-hiw-final .hiw-hero-content:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:clamp(-18px,-2vw,-26px) clamp(-20px,-2.4vw,-36px);
  border-radius:24px;
  pointer-events:none;
  background:radial-gradient(circle at 20% 18%,rgba(185,130,50,.08),transparent 38%),linear-gradient(90deg,rgba(255,250,240,.78),rgba(255,250,240,.44),rgba(255,250,240,.10));
  box-shadow:0 26px 80px rgba(87,60,28,.08),0 0 0 1px rgba(185,130,50,.06) inset;
  backdrop-filter:none
}

html[data-js-theme="dark"] #js-hiw-final .hiw-hero-content:before {
  background:radial-gradient(circle at 20% 18%,rgba(185,130,50,.11),transparent 38%),linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.48),rgba(0,0,0,.10));
  box-shadow:0 28px 88px rgba(0,0,0,.34),0 0 0 1px rgba(209,163,91,.07) inset
}

@keyframes hiw-hero-reveal {
  0% {
  opacity:0;
  transform:translateY(18px);
  filter:blur(4px)
}
100% {
  opacity:1;
  transform:translateY(0);
  filter:none
}

}

#js-hiw-final .hiw-hero-title {
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(52px,6.2vw,92px);
  line-height:.96;
  font-weight:400;
  letter-spacing:-.055em;
  color:var(--hiw-ink)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-hero-title {
  color:var(--hiw-dark-text)
}

#js-hiw-final .hiw-hero-text {
  margin:22px 0 0;
  max-width:600px;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.82;
  color:var(--hiw-muted)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-hero-text {
  color:var(--hiw-dark-muted)
}

#js-hiw-final .hiw-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px
}

#js-hiw-final .hiw-note {
  margin-top:16px;
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  line-height:1.6;
  color:var(--hiw-muted)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-note {
  color:var(--hiw-dark-soft)
}

#js-hiw-final .hiw-note:before {
  content:"";
  width:28px;
  height:1px;
  background:var(--hiw-gold)
}

/* Icons */
#js-hiw-final .hiw-icon {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  overflow:hidden!important;
  line-height:1!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  margin:0 auto 14px!important;
  width:54px!important;
  height:54px!important;
  max-width:54px!important;
  max-height:54px!important
}

#js-hiw-final .hiw-icon--large {
  width:86px!important;
  height:86px!important;
  max-width:86px!important;
  max-height:86px!important;
  margin:0 auto!important
}

#js-hiw-final .hiw-icon img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  min-width:0!important;
  min-height:0!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  transform:none!important;
  transition:transform .28s ease,filter .28s ease
}

html[data-js-theme="light"] #js-hiw-final .hiw-icon img {
  filter:contrast(1.08) saturate(.92) brightness(.96)!important;
  mix-blend-mode:multiply!important;
  opacity:.94!important
}

html[data-js-theme="dark"] #js-hiw-final .hiw-icon img {
  filter:invert(77%) sepia(38%) saturate(680%) hue-rotate(351deg) brightness(98%) contrast(94%)!important;
  mix-blend-mode:normal!important;
  opacity:.98!important
}

/* Panels */
#js-hiw-final .hiw-panel {
  border:1px solid var(--hiw-line);
  border-radius:var(--hiw-radius);
  background:rgba(255,255,255,.66);
  box-shadow:0 18px 48px rgba(87,60,28,.06),0 0 0 1px rgba(255,255,255,.13) inset;
  position:relative;
  overflow:hidden
}

html[data-js-theme="dark"] #js-hiw-final .hiw-panel {
  border-color:rgba(185,130,50,.36);
  background:rgba(8,8,7,.86);
  box-shadow:0 22px 70px rgba(0,0,0,.32),0 0 0 1px rgba(209,163,91,.10) inset
}

#js-hiw-final .hiw-intro {
  display:grid;
  grid-template-columns:120px 1fr 310px;
  gap:clamp(22px,4vw,52px);
  align-items:center;
  padding:clamp(28px,4vw,52px)
}

#js-hiw-final .hiw-intro-body {
  border-left:1px solid var(--hiw-line);
  padding-left:clamp(24px,4vw,48px)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-intro-body {
  border-left-color:rgba(185,130,50,.32)
}

#js-hiw-final .hiw-stack {
  border-left:1px solid var(--hiw-line);
  padding-left:clamp(22px,3vw,38px);
  font-family:Georgia,"Times New Roman",serif;
  color:var(--hiw-gold);
  font-size:clamp(18px,1.8vw,29px);
  line-height:1.36;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center
}

html[data-js-theme="dark"] #js-hiw-final .hiw-stack {
  border-left-color:rgba(185,130,50,.32);
  color:var(--hiw-gold-bright)
}

/* Pauses */
#js-hiw-final .hiw-pause {
  padding:clamp(44px,6vw,86px) 0;
  text-align:center;
  border-top:1px solid var(--hiw-line);
  border-bottom:1px solid var(--hiw-line);
  background:radial-gradient(circle at 50% 0%,rgba(185,130,50,.10),transparent 36%),linear-gradient(90deg,transparent,rgba(185,130,50,.07),transparent)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-pause {
  border-color:rgba(185,130,50,.28);
  background:radial-gradient(circle at 50% 0%,rgba(185,130,50,.12),transparent 36%),linear-gradient(90deg,transparent,rgba(185,130,50,.055),transparent)
}

#js-hiw-final .hiw-pause-title {
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,4.2vw,58px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-style:italic;
  color:var(--hiw-ink)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-pause-title {
  color:var(--hiw-dark-text)
}

#js-hiw-final .hiw-pause-copy {
  margin:16px auto 0;
  max-width:860px;
  color:var(--hiw-muted);
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.82
}

html[data-js-theme="dark"] #js-hiw-final .hiw-pause-copy {
  color:var(--hiw-dark-muted)
}

#js-hiw-final .hiw-pause--first .hiw-pause-title {
  animation:hiw-gold-glow 5600ms ease-in-out infinite
}

@keyframes hiw-gold-glow {
  0%,100% {
  text-shadow:0 0 0 rgba(185,130,50,0)
}
50% {
  text-shadow:0 0 18px rgba(185,130,50,.28),0 0 42px rgba(185,130,50,.10)
}

}

#js-hiw-final .hiw-pause--review .hiw-pause-copy,#js-hiw-final .hiw-pause--no-unpaid .hiw-pause-copy {
  font-size:clamp(18px,1.45vw,22px)
}

/* Mosaic process rows */
#js-hiw-final .hiw-process-set {
  margin-top:clamp(30px,4vw,48px)
}

#js-hiw-final .hiw-process-row {
  display:grid;
  gap:14px;
  margin:14px auto 0;
  max-width:1180px
}

#js-hiw-final .hiw-process-row--four {
  grid-template-columns:repeat(4,minmax(0,1fr))
}

#js-hiw-final .hiw-process-row--three {
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:900px
}

#js-hiw-final .hiw-step {
  position:relative;
  padding:22px 16px;
  min-height:220px;
  text-align:center;
  border:1px solid var(--hiw-line);
  border-radius:var(--hiw-radius-small);
  background:rgba(255,255,255,.52);
  transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease;
  background-color .26s ease;
  overflow:hidden
}

html[data-js-theme="dark"] #js-hiw-final .hiw-step {
  border-color:rgba(185,130,50,.34);
  background:rgba(0,0,0,.20)
}

#js-hiw-final .hiw-step-num {
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid var(--hiw-gold);
  border-radius:999px;
  color:var(--hiw-gold);
  font-size:12px;
  font-weight:800;
  margin-bottom:14px
}

html[data-js-theme="dark"] #js-hiw-final .hiw-step-num {
  color:var(--hiw-gold-bright);
  border-color:var(--hiw-gold-bright)
}

#js-hiw-final .hiw-step h3 {
  margin:0 0 10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(20px,1.7vw,25px);
  line-height:1.14;
  font-weight:400;
  color:var(--hiw-ink)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-step h3 {
  color:var(--hiw-dark-text)
}

#js-hiw-final .hiw-step p {
  margin:0;
  color:var(--hiw-muted);
  font-size:13px;
  line-height:1.62
}

html[data-js-theme="dark"] #js-hiw-final .hiw-step p {
  color:var(--hiw-dark-muted)
}

/* Expanders */
#js-hiw-final .hiw-expander {
  margin:clamp(32px,4vw,48px) auto 0!important;
  width:100%!important;
  max-width:1180px!important;
  border:1px solid var(--hiw-line);
  border-radius:var(--hiw-radius);
  overflow:hidden;
  background:rgba(255,255,255,.52)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-expander {
  border-color:rgba(185,130,50,.36);
  background:rgba(8,8,7,.82)
}

#js-hiw-final .hiw-expander summary {
  list-style:none;
  cursor:pointer;
  text-align:center;
  padding:clamp(30px,4vw,54px)
}

#js-hiw-final .hiw-expander summary::-webkit-details-marker {
  display:none
}

#js-hiw-final .hiw-expander-eyebrow {
  display:block;
  margin-bottom:10px;
  color:var(--hiw-gold);
  font-size:clamp(15px,1.15vw,20px);
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase
}

html[data-js-theme="dark"] #js-hiw-final .hiw-expander-eyebrow {
  color:var(--hiw-gold-bright)
}

#js-hiw-final .hiw-expander-title {
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(30px,3.5vw,52px);
  line-height:1.05;
  letter-spacing:-.04em
}

#js-hiw-final .hiw-expander-hint {
  display:inline-flex;
  margin-top:22px;
  padding:11px 22px;
  border:1px solid rgba(185,130,50,.46);
  border-radius:999px;
  color:var(--hiw-gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase
}

html[data-js-theme="dark"] #js-hiw-final .hiw-expander-hint {
  color:var(--hiw-gold-bright)
}

#js-hiw-final .hiw-expander-content {
  border-top:1px solid var(--hiw-line);
  padding:clamp(30px,4vw,52px)
}

#js-hiw-final .hiw-expander-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px
}

#js-hiw-final .hiw-expander-card {
  border:1px solid var(--hiw-line);
  border-radius:var(--hiw-radius-small);
  padding:24px;
  background:rgba(255,255,255,.52);
  position:relative;
  overflow:hidden
}

html[data-js-theme="dark"] #js-hiw-final .hiw-expander-card {
  border-color:rgba(185,130,50,.32);
  background:rgba(0,0,0,.18)
}

#js-hiw-final .hiw-expander-card h3 {
  margin:0 0 12px;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--hiw-gold);
  font-size:clamp(22px,2vw,28px)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-expander-card h3 {
  color:var(--hiw-gold-bright)
}

#js-hiw-final .hiw-expander-card p {
  margin:0;
  color:var(--hiw-muted);
  line-height:1.76
}

html[data-js-theme="dark"] #js-hiw-final .hiw-expander-card p {
  color:var(--hiw-dark-muted)
}

#js-hiw-final .hiw-expander-doctrine {
  margin-top:clamp(22px,3vw,34px);
  border:1px solid var(--hiw-line-strong);
  border-radius:999px;
  padding:14px 20px;
  text-align:center;
  color:var(--hiw-gold);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(16px,1.45vw,21px);
  line-height:1.45;
  background:rgba(185,130,50,.055)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-expander-doctrine {
  border-color:rgba(209,163,91,.46);
  color:var(--hiw-gold-bright)
}

/* Review */
#js-hiw-final .hiw-review {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:22px;
  margin-top:36px
}

#js-hiw-final .hiw-review-body,#js-hiw-final .hiw-price {
  padding:clamp(28px,4vw,46px)
}

#js-hiw-final .hiw-review-lists {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
  margin-top:26px
}

#js-hiw-final .hiw-list h3 {
  margin:0 0 14px;
  color:var(--hiw-gold);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase
}

html[data-js-theme="dark"] #js-hiw-final .hiw-list h3 {
  color:var(--hiw-gold-bright)
}

#js-hiw-final .hiw-list ul {
  margin:0;
  padding:0;
  list-style:none
}

#js-hiw-final .hiw-list li {
  position:relative;
  padding-left:18px;
  margin:0 0 10px;
  color:var(--hiw-muted);
  font-size:14px;
  line-height:1.55
}

html[data-js-theme="dark"] #js-hiw-final .hiw-list li {
  color:var(--hiw-dark-muted)
}

#js-hiw-final .hiw-list li:before {
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--hiw-gold)
}

#js-hiw-final .hiw-price {
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center
}

#js-hiw-final .hiw-price-label {
  color:var(--hiw-gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase
}

#js-hiw-final .hiw-price-amount {
  margin:12px 0 6px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(46px,5vw,74px);
  line-height:1;
  color:var(--hiw-gold)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-price-label,html[data-js-theme="dark"] #js-hiw-final .hiw-price-amount {
  color:var(--hiw-gold-bright)
}

#js-hiw-final .hiw-price-sub {
  margin:0 0 24px;
  color:var(--hiw-muted)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-price-sub {
  color:var(--hiw-dark-muted)
}

/* Image bands */
#js-hiw-final .hiw-image-band {
  position:relative;
  min-height:clamp(280px,32vw,440px);
  display:flex;
  align-items:center;
  overflow:hidden;
  border-top:1px solid var(--hiw-line);
  border-bottom:1px solid var(--hiw-line);
  background-image:linear-gradient(90deg,rgba(251,247,239,.78),rgba(251,247,239,.42)),url("/cdn/shop/files/42-js-how-it-works-vnext-serious-handling-lantern-garden-light-desktop-42.webp?v=1778971159"),linear-gradient(135deg,rgba(255,255,255,.38),rgba(244,238,228,.50));
  background-size:cover,cover,cover;
  background-position:center,right 76%,center
}

html[data-js-theme="dark"] #js-hiw-final .hiw-image-band {
  border-color:rgba(185,130,50,.28);
  background-image:linear-gradient(90deg,rgba(5,5,5,.74),rgba(5,5,5,.24)),url("/cdn/shop/files/41-js-how-it-works-vnext-serious-handling-lantern-garden-dark-desktop-41.webp?v=1778971159"),linear-gradient(135deg,#050505,#0a0907);
  background-position:center,right 76%,center
}

#js-hiw-final .hiw-image-band-text {
  max-width:850px
}

#js-hiw-final .hiw-quote {
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(39px,4.85vw,70px);
  line-height:1.10;
  letter-spacing:-.045em;
  color:var(--hiw-ink);
  opacity:0;
  transform:translateY(18px);
  filter:blur(3px);
  animation:hiw-quote-soft-reveal 1500ms cubic-bezier(.22,.72,.22,1) forwards
}

html[data-js-theme="dark"] #js-hiw-final .hiw-quote {
  color:var(--hiw-dark-text)
}

#js-hiw-final .hiw-quote span {
  color:var(--hiw-gold);
  font-style:italic
}

html[data-js-theme="dark"] #js-hiw-final .hiw-quote span {
  color:var(--hiw-gold-bright)
}

@supports (animation-timeline:view()) {
  #js-hiw-final .hiw-image-band .hiw-quote {
  animation-timeline:view();
  animation-range:entry 15% cover 42%
}

}

@keyframes hiw-quote-soft-reveal {
  0% {
  opacity:0;
  transform:translateY(18px);
  filter:blur(3px)
}
100% {
  opacity:1;
  transform:translateY(0);
  filter:none
}

}

#js-hiw-final .hiw-three {
  display:grid;
  grid-template-columns:.9fr 1.2fr .9fr;
  gap:18px;
  margin:34px auto 0;
  max-width:1180px;
  align-items:stretch;
  justify-content:center
}

#js-hiw-final .hiw-photo-card {
  display:block;
  min-height:360px;
  border-radius:var(--hiw-radius);
  border:1px solid var(--hiw-line);
  background-image:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.08)),url("/cdn/shop/files/38-js-how-it-works-vnext-submission-review-sequence-light-desktop-38.webp?v=1778971159");
  background-size:cover,cover;
  background-position:center,center;
  visibility:visible;
  opacity:1
}

html[data-js-theme="dark"] #js-hiw-final .hiw-photo-card {
  border-color:rgba(185,130,50,.34);
  background-image:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18)),url("/cdn/shop/files/37-js-how-it-works-vnext-submission-review-sequence-dark-desktop-37.webp?v=1778971159")
}

#js-hiw-final .hiw-card-row {
  display:grid;
  grid-template-columns:repeat(var(--hiw-cols,4),1fr);
  gap:16px;
  margin-top:32px
}

#js-hiw-final .hiw-mini-card {
  padding:24px;
  border:1px solid var(--hiw-line);
  border-radius:var(--hiw-radius-small);
  background:rgba(255,255,255,.56);
  text-align:center;
  min-height:166px;
  position:relative;
  overflow:hidden
}

html[data-js-theme="dark"] #js-hiw-final .hiw-mini-card {
  border-color:rgba(185,130,50,.32);
  background:rgba(0,0,0,.18)
}

#js-hiw-final .hiw-mini-card h3 {
  margin:0 0 10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(20px,1.7vw,25px);
  line-height:1.14;
  font-weight:400;
  color:var(--hiw-ink)
}

html[data-js-theme="dark"] #js-hiw-final .hiw-mini-card h3 {
  color:var(--hiw-dark-text)
}

#js-hiw-final .hiw-mini-card p {
  margin:0;
  color:var(--hiw-muted);
  font-size:13px;
  line-height:1.62
}

html[data-js-theme="dark"] #js-hiw-final .hiw-mini-card p {
  color:var(--hiw-dark-muted)
}

#js-hiw-final .hiw-final {
  border-top:1px solid var(--hiw-line);
  border-bottom:1px solid var(--hiw-line);
  background-image:linear-gradient(90deg,rgba(251,247,239,.92),rgba(251,247,239,.62)),url("/cdn/shop/files/46-js-how-it-works-vnext-final-cta-private-path-light-desktop-46.webp?v=1778971159"),linear-gradient(135deg,rgba(255,255,255,.52),rgba(244,238,228,.72));
  background-size:cover,cover,cover;
  background-position:center,center right,center
}

html[data-js-theme="dark"] #js-hiw-final .hiw-final {
  border-color:rgba(185,130,50,.28);
  background-image:linear-gradient(90deg,rgba(5,5,5,.94),rgba(5,5,5,.62)),url("/cdn/shop/files/45-js-how-it-works-vnext-final-cta-private-path-dark-desktop-45.webp?v=1778971159"),linear-gradient(135deg,#050505,#0a0907)
}

#js-hiw-final .hiw-final-inner {
  display:grid;
  grid-template-columns:1.3fr auto;
  gap:30px;
  align-items:center
}

#js-hiw-final .hiw-step,#js-hiw-final .hiw-mini-card,#js-hiw-final .hiw-expander-card,#js-hiw-final .hiw-panel,#js-hiw-final .hiw-photo-card {
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background-color .28s ease,filter .28s ease
}

@media (hover:hover) and (pointer:fine) {
  
  #js-hiw-final .hiw-step:hover,#js-hiw-final .hiw-mini-card:hover,#js-hiw-final .hiw-expander-card:hover {
  transform:translateY(-5px)
}

  html[data-js-theme="light"] #js-hiw-final .hiw-step:hover,html[data-js-theme="light"] #js-hiw-final .hiw-mini-card:hover,html[data-js-theme="light"] #js-hiw-final .hiw-expander-card:hover {
  border-color:rgba(185,130,50,.58)!important;
  box-shadow:0 18px 46px rgba(87,60,28,.10),0 0 0 1px rgba(185,130,50,.12) inset;
  background-color:rgba(255,255,255,.78)
}

  html[data-js-theme="dark"] #js-hiw-final .hiw-step:hover,html[data-js-theme="dark"] #js-hiw-final .hiw-mini-card:hover,html[data-js-theme="dark"] #js-hiw-final .hiw-expander-card:hover {
  border-color:rgba(209,163,91,.72)!important;
  box-shadow:0 18px 58px rgba(0,0,0,.42),0 0 28px rgba(185,130,50,.12),0 0 0 1px rgba(209,163,91,.18) inset;
  background-color:rgba(14,13,11,.92)
}

  #js-hiw-final .hiw-step:hover .hiw-icon img,#js-hiw-final .hiw-mini-card:hover .hiw-icon img {
  transform:none!important
}

}

#js-hiw-final .hiw-section,#js-hiw-final .hiw-section-tight,#js-hiw-final .hiw-pause,#js-hiw-final .hiw-final {
  animation:hiw-section-soft-reveal 1100ms ease both
}

@supports (animation-timeline:view()) {
  #js-hiw-final .hiw-section,#js-hiw-final .hiw-section-tight,#js-hiw-final .hiw-pause,#js-hiw-final .hiw-final {
  animation-timeline:view();
  animation-range:entry 8% cover 22%
}

}

@keyframes hiw-section-soft-reveal {
  0% {
  opacity:.72;
  transform:translateY(12px);
  filter:none
}
100% {
  opacity:1;
  transform:translateY(0);
  filter:none
}

}

@media (prefers-reduced-motion:reduce) {
  #js-hiw-final .hiw-hero-content,#js-hiw-final .hiw-pause--first .hiw-pause-title,#js-hiw-final .hiw-image-band .hiw-quote,#js-hiw-final .hiw-section,#js-hiw-final .hiw-section-tight,#js-hiw-final .hiw-pause,#js-hiw-final .hiw-final {
  animation:none!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important
}

}

@media screen and (max-width:1100px) {
  #js-hiw-final .hiw-card-row {
  grid-template-columns:repeat(2,1fr)
}

}

@media screen and (max-width:900px) {
  
  #js-hiw-final .hiw-hero {
  min-height:auto;
  align-items:flex-end;
  background-image:url("/cdn/shop/files/28-js-how-it-works-vnext-hero-structured-gateway-light-mobile-28.webp?v=1778971159"),linear-gradient(135deg,#fffdf7 0%,#eee4d6 45%,#d9c8af 100%);
  background-position:center top,center;
  background-size:cover,cover
}

  html[data-js-theme="dark"] #js-hiw-final .hiw-hero {
  background-image:url("/cdn/shop/files/27-js-how-it-works-vnext-hero-structured-gateway-dark-mobile-27.webp?v=1778971160"),linear-gradient(135deg,#030303 0%,#11100d 45%,#382615 100%)
}

  #js-hiw-final .hiw-hero-content {
  padding:54px 0 46px
}

  #js-hiw-final .hiw-hero-title {
  font-size:clamp(44px,15vw,64px)
}

  #js-hiw-final .hiw-actions {
  flex-direction:column
}

  #js-hiw-final .hiw-actions .hiw-btn {
  width:100%
}

  #js-hiw-final .hiw-intro,#js-hiw-final .hiw-review,#js-hiw-final .hiw-review-lists,#js-hiw-final .hiw-three,#js-hiw-final .hiw-final-inner,#js-hiw-final .hiw-card-row {
  grid-template-columns:1fr
}

  #js-hiw-final .hiw-intro {
  text-align:center
}

  #js-hiw-final .hiw-intro-body,#js-hiw-final .hiw-stack {
  border-left:0;
  padding-left:0
}

  #js-hiw-final .hiw-stack {
  border-top:1px solid var(--hiw-line);
  padding-top:28px
}

  #js-hiw-final .hiw-process-row,#js-hiw-final .hiw-process-row--four,#js-hiw-final .hiw-process-row--three {
  grid-template-columns:1fr!important;
  max-width:min(calc(100% - 28px),var(--hiw-max))!important
}

  #js-hiw-final .hiw-step {
  min-height:auto
}

  #js-hiw-final .hiw-expander-grid {
  grid-template-columns:1fr
}

  #js-hiw-final .hiw-image-band {
  min-height:360px;
  background-image:linear-gradient(180deg,rgba(251,247,239,.86),rgba(251,247,239,.62)),url("/cdn/shop/files/44-js-how-it-works-vnext-serious-handling-lantern-garden-light-desktop-44.webp?v=1778971159"),linear-gradient(135deg,rgba(255,255,255,.42),rgba(244,238,228,.52));
  background-position:center,center 74%,center
}

  html[data-js-theme="dark"] #js-hiw-final .hiw-image-band {
  background-image:linear-gradient(180deg,rgba(5,5,5,.78),rgba(5,5,5,.44)),url("/cdn/shop/files/43-js-how-it-works-vnext-serious-handling-lantern-garden-dark-mobile-43.webp?v=1778971159"),linear-gradient(135deg,#050505,#0a0907);
  background-position:center,center 74%,center
}

  #js-hiw-final .hiw-photo-card {
  min-height:280px;
  background-image:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.05)),url("/cdn/shop/files/40-js-how-it-works-vnext-submission-review-sequence-light-mobile-40.webp?v=1778971159")
}

  html[data-js-theme="dark"] #js-hiw-final .hiw-photo-card {
  background-image:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18)),url("/cdn/shop/files/39-js-how-it-works-vnext-submission-review-sequence-dark-mobile-39.webp?v=1778971159")
}

  #js-hiw-final .hiw-final {
  background-image:linear-gradient(180deg,rgba(251,247,239,.94),rgba(251,247,239,.75)),url("/cdn/shop/files/48-js-how-it-works-vnext-final-cta-private-path-light-mobile-48.webp?v=1778971160"),linear-gradient(135deg,rgba(255,255,255,.52),rgba(244,238,228,.72)
}

  html[data-js-theme="dark"] #js-hiw-final .hiw-final {
  background-image:linear-gradient(180deg,rgba(5,5,5,.96),rgba(5,5,5,.72)),url("/cdn/shop/files/47-js-how-it-works-vnext-final-cta-private-path-dark-mobile-47.webp?v=1778971159"),linear-gradient(135deg,#050505,#0a0907)
}

  #js-hiw-final .hiw-final-inner {
  text-align:center
}

  #js-hiw-final .hiw-quote {
  font-size:clamp(34px,9vw,54px)!important
}

}


/* =========================================================
   JAPANSOLVED™ HOW IT WORKS vNext — FINAL CLEAN CONTROL LAYER
   Purpose: one clean override layer only. No patch stack.

   EDITING MAP
   1. CONTROL TOKENS / PLACEHOLDERS
   2. QUOTE BAND BACKGROUND IMAGE + MASKS
   3. QUOTE LEFT-TO-RIGHT REVEAL
   4. THREE-CARD CLARITY SECTION
   5. RESPONSIVE RULES
   ========================================================= */


/* ---------------------------------------------------------
   1. CONTROL TOKENS / PLACEHOLDERS
   Quote-band assets are centralized here.
   Desktop light MUST use asset 42.
   Mobile light MUST use asset 44.
   --------------------------------------------------------- */

#js-hiw-final {
  --hiw-quote-light-desktop: url("/cdn/shop/files/42-js-how-it-works-vnext-serious-handling-lantern-garden-light-desktop-42.webp?v=1778971159");
  --hiw-quote-light-mobile: url("/cdn/shop/files/44-js-how-it-works-vnext-serious-handling-lantern-garden-light-desktop-44.webp?v=1778971159");
  --hiw-quote-dark-desktop: url("/cdn/shop/files/41-js-how-it-works-vnext-serious-handling-lantern-garden-dark-desktop-41.webp?v=1778971159");
  --hiw-quote-dark-mobile: url("/cdn/shop/files/43-js-how-it-works-vnext-serious-handling-lantern-garden-dark-mobile-43.webp?v=1778971159");

  --hiw-quote-reveal-duration: 4600ms;

  /* Three-card title tuning.
     This is enlarged from the previous cleaned attempt while keeping words safe. */
  --hiw-three-heading-desktop: clamp(56px, 4.45vw, 74px);
  --hiw-three-heading-tablet: clamp(38px, 3.35vw, 50px);
  --hiw-three-heading-mobile: clamp(44px, 11vw, 62px);

  --hiw-three-title-breather: clamp(54px, 4vw, 70px);
  --hiw-three-title-breather-tablet: 52px;
}


/* ---------------------------------------------------------
   2. QUOTE BAND BACKGROUND IMAGE + MASKS
   This section controls the screenshot quote/toro background.
   --------------------------------------------------------- */

#js-hiw-final .hiw-image-band {
  position: relative !important;
  isolation: isolate !important;
  background-image:
    var(--hiw-quote-light-desktop),
    linear-gradient(135deg, #fbf7ef, #f4eee4) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}

#js-hiw-final .hiw-image-band::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(251, 247, 239, 1) 0%,
      rgba(251, 247, 239, .995) 34%,
      rgba(251, 247, 239, .985) 54%,
      rgba(251, 247, 239, .965) 72%,
      rgba(251, 247, 239, .94) 100%
    ) !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-image-band {
  background-image:
    var(--hiw-quote-dark-desktop),
    linear-gradient(135deg, #050505, #0a0907) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-image-band::before {
  background:
    linear-gradient(
      90deg,
      rgba(5, 5, 5, .76) 0%,
      rgba(5, 5, 5, .62) 24%,
      rgba(5, 5, 5, .28) 44%,
      rgba(5, 5, 5, .08) 58%,
      rgba(5, 5, 5, .015) 72%,
      rgba(5, 5, 5, 0) 100%
    ),
    radial-gradient(
      circle at 78% 34%,
      rgba(235, 196, 118, .24) 0%,
      rgba(217, 175, 99, .16) 10%,
      rgba(217, 175, 99, .07) 24%,
      rgba(217, 175, 99, 0) 46%
    ) !important;
}

#js-hiw-final .hiw-image-band .hiw-shell {
  position: relative !important;
  z-index: 3 !important;
}


/* ---------------------------------------------------------
   3. QUOTE VIEW-ONLY LUX LEFT-TO-RIGHT REVEAL
   Trigger:
   - Does not play on page load unless the quote band is truly viewed.
   - Plays when the quote band enters the central reading zone.
   - Replays when user scrolls away and returns.
   --------------------------------------------------------- */

#js-hiw-final .hiw-quote-reveal-band .hiw-quote {
  position: relative !important;
  overflow: visible !important;
  opacity: 0 !important;
  transform: translateX(-56px) !important;
  filter: blur(8px) !important;
  clip-path: inset(0 100% 0 0) !important;
  animation: none !important;
  will-change: opacity, transform, filter, clip-path;
}

#js-hiw-final .hiw-quote-reveal-band.is-visible .hiw-quote {
  animation:
    hiw-quote-view-lux-left-reveal
    5200ms
    cubic-bezier(.16, .74, .16, 1)
    forwards !important;
}

#js-hiw-final .hiw-quote-reveal-band .hiw-quote::after {
  content: "" !important;
  position: absolute !important;
  inset: -10% -12% !important;
  pointer-events: none !important;
  opacity: 0;
  transform: translateX(-140%);
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 30%,
      rgba(217, 175, 99, 0) 40%,
      rgba(217, 175, 99, .22) 48%,
      rgba(255, 250, 230, .36) 52%,
      rgba(217, 175, 99, .16) 58%,
      transparent 70%,
      transparent 100%
    ) !important;
  mix-blend-mode: screen;
}

#js-hiw-final .hiw-quote-reveal-band.is-visible .hiw-quote::after {
  animation:
    hiw-quote-view-lux-sheen
    5200ms
    cubic-bezier(.16, .74, .16, 1)
    forwards !important;
}

@keyframes hiw-quote-view-lux-left-reveal {
  0% {
    opacity: 0;
    transform: translateX(-56px);
    filter: blur(8px);
    clip-path: inset(0 100% 0 0);
  }

  16% {
    opacity: .18;
    transform: translateX(-44px);
    filter: blur(6px);
    clip-path: inset(0 84% 0 0);
  }

  38% {
    opacity: .52;
    transform: translateX(-26px);
    filter: blur(3.5px);
    clip-path: inset(0 58% 0 0);
  }

  64% {
    opacity: .84;
    transform: translateX(-10px);
    filter: blur(1.2px);
    clip-path: inset(0 22% 0 0);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    filter: none;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes hiw-quote-view-lux-sheen {
  0% {
    transform: translateX(-140%);
    opacity: 0;
  }

  28% {
    opacity: .18;
  }

  52% {
    opacity: .88;
  }

  78% {
    transform: translateX(44%);
    opacity: .34;
  }

  100% {
    transform: translateX(140%);
    opacity: 0;
  }
}


/* ---------------------------------------------------------
   4. THREE-CARD CLARITY SECTION
   Requested structure:
   From / Complexity / to Clarity
   one-line breather
   bullets

   Scope. / Discipline. / Results.
   one-line breather
   bullets
   --------------------------------------------------------- */

#js-hiw-final .hiw-three {
  grid-template-columns:
    minmax(450px, 1.35fr)
    minmax(200px, .55fr)
    minmax(450px, 1.35fr) !important;
  gap: clamp(18px, 1.85vw, 26px) !important;
  align-items: stretch !important;
}

#js-hiw-final .hiw-three .hiw-review-body {
  padding:
    clamp(38px, 4.2vw, 56px)
    clamp(34px, 3.6vw, 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#js-hiw-final .hiw-three .hiw-three-heading {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: var(--hiw-three-heading-desktop) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.052em !important;
  color: var(--hiw-ink) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: normal !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-three .hiw-three-heading {
  color: var(--hiw-dark-text) !important;
}

#js-hiw-final .hiw-three .hiw-title-breather {
  display: block !important;
  width: 100% !important;
  height: var(--hiw-three-title-breather) !important;
  min-height: var(--hiw-three-title-breather) !important;
  max-height: var(--hiw-three-title-breather) !important;
  flex: 0 0 var(--hiw-three-title-breather) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

#js-hiw-final .hiw-three .hiw-list {
  display: block !important;
  margin-top: 12px !important;
  padding-top: 0 !important;
}

#js-hiw-final .hiw-three .hiw-list ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#js-hiw-final .hiw-three .hiw-list li {
  position: relative !important;
  margin: 0 0 15px !important;
  padding-left: 24px !important;
  color: var(--hiw-muted) !important;
  font-size: clamp(13px, .95vw, 14.5px) !important;
  line-height: 1.72 !important;
  letter-spacing: .035em !important;
}

#js-hiw-final .hiw-three .hiw-list li:last-child {
  margin-bottom: 0 !important;
}

#js-hiw-final .hiw-three .hiw-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .78em !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: var(--hiw-gold) !important;
  box-shadow: 0 0 10px rgba(185, 130, 50, .18) !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-three .hiw-list li {
  color: var(--hiw-dark-muted) !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-three .hiw-list li::before {
  background: var(--hiw-gold-bright) !important;
  box-shadow: 0 0 12px rgba(217, 175, 99, .22) !important;
}

/* Center the "We Study..." section completely */
#js-hiw-final .hiw-study-section {
  text-align: center !important;
}

#js-hiw-final .hiw-study-section > .hiw-shell,
#js-hiw-final .hiw-study-section .hiw-section-head {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#js-hiw-final .hiw-study-section .hiw-eyebrow,
#js-hiw-final .hiw-study-section .hiw-heading,
#js-hiw-final .hiw-study-section .hiw-copy {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#js-hiw-final .hiw-study-section .hiw-heading {
  width: 100% !important;
  max-width: 1180px !important;
}

#js-hiw-final .hiw-study-section .hiw-copy {
  width: 100% !important;
  max-width: 980px !important;
}



/* ---------------------------------------------------------
   5. RESPONSIVE RULES
   --------------------------------------------------------- */

@media screen and (max-width: 1180px) and (min-width: 901px) {
  #js-hiw-final .hiw-three {
    grid-template-columns:
      minmax(365px, 1.25fr)
      minmax(190px, .55fr)
      minmax(365px, 1.25fr) !important;
  }

  #js-hiw-final .hiw-three .hiw-three-heading {
    font-size: var(--hiw-three-heading-tablet) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
  }

  #js-hiw-final .hiw-three .hiw-review-body {
    padding:
      clamp(32px, 3.3vw, 44px)
      clamp(28px, 3vw, 40px) !important;
  }

  #js-hiw-final .hiw-three .hiw-title-breather {
    height: var(--hiw-three-title-breather-tablet) !important;
    min-height: var(--hiw-three-title-breather-tablet) !important;
    max-height: var(--hiw-three-title-breather-tablet) !important;
    flex-basis: var(--hiw-three-title-breather-tablet) !important;
  }
}

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-image-band {
    background-image:
      var(--hiw-quote-light-mobile),
      linear-gradient(135deg, #fbf7ef, #f4eee4) !important;
    background-size: cover, cover !important;
    background-position: center, center !important;
  }

  #js-hiw-final .hiw-image-band::before {
    background:
      linear-gradient(
        180deg,
        rgba(251, 247, 239, 1) 0%,
        rgba(251, 247, 239, .995) 34%,
        rgba(251, 247, 239, .975) 66%,
        rgba(251, 247, 239, .95) 100%
      ) !important;
  }

  html[data-js-theme="dark"] #js-hiw-final .hiw-image-band {
    background-image:
      var(--hiw-quote-dark-mobile),
      linear-gradient(135deg, #050505, #0a0907) !important;
    background-size: cover, cover !important;
    background-position: center, center !important;
  }

  html[data-js-theme="dark"] #js-hiw-final .hiw-image-band::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 5, 5, .72) 0%,
        rgba(5, 5, 5, .44) 34%,
        rgba(5, 5, 5, .16) 66%,
        rgba(5, 5, 5, .02) 100%
      ),
      radial-gradient(
        circle at 68% 34%,
        rgba(235, 196, 118, .22) 0%,
        rgba(217, 175, 99, .10) 22%,
        rgba(217, 175, 99, 0) 48%
      ) !important;
  }

  #js-hiw-final.hiw-js-reveal-ready .hiw-image-band .hiw-quote {
    transform: translateX(-44px) !important;
  }

  #js-hiw-final .hiw-three {
    grid-template-columns: 1fr !important;
  }

  #js-hiw-final .hiw-three .hiw-three-heading {
    font-size: var(--hiw-three-heading-mobile) !important;
    line-height: 1.08 !important;
  }

  #js-hiw-final .hiw-three .hiw-review-body {
    padding: clamp(34px, 8vw, 46px) !important;
  }

  #js-hiw-final .hiw-three .hiw-title-breather {
    height: var(--hiw-three-title-breather-tablet) !important;
    min-height: var(--hiw-three-title-breather-tablet) !important;
    max-height: var(--hiw-three-title-breather-tablet) !important;
    flex-basis: var(--hiw-three-title-breather-tablet) !important;
  }
}


@media (prefers-reduced-motion: reduce) {
  #js-hiw-final.hiw-js-reveal-ready .hiw-image-band .hiw-quote {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
  }

  #js-hiw-final.hiw-js-reveal-ready .hiw-image-band .hiw-quote.is-visible::after {
    display: none !important;
  }
}


/* =========================================================
   LIVE V426 SURGICAL REPAIR
   Scope:
   1. Fix paragraph block centering under all section heads.
   2. Preserve lower-page blur removal from V425.
   3. Preserve three-card stable layout from V425.
   4. Keep the "We Study..." section centered without full-width drift.
   ========================================================= */


/* ---------------------------------------------------------
   1. ROOT FIX: CENTER SECTION-HEAD PARAGRAPH BOXES
   Problem:
   .hiw-copy had max-width but margin-left/right were 0.
   Result:
   Paragraph text was centered inside a left-positioned box.
   Fix:
   Any .hiw-copy inside .hiw-section-head must center its own box.
   --------------------------------------------------------- */

#js-hiw-final .hiw-section-head .hiw-copy {
  margin: 18px auto 0 !important;
  max-width: 980px !important;
  text-align: center !important;
}


/* ---------------------------------------------------------
   2. REMOVE BLUR LEAKAGE ON LOWER PAGE SECTIONS
   Keep the blur fix from V425.
   --------------------------------------------------------- */

#js-hiw-final .hiw-section,
#js-hiw-final .hiw-section-tight,
#js-hiw-final .hiw-pause,
#js-hiw-final .hiw-final,
#js-hiw-final .hiw-final *,
#js-hiw-final .hiw-card-row,
#js-hiw-final .hiw-card-row *,
#js-hiw-final .hiw-study-section,
#js-hiw-final .hiw-study-section * {
  filter: none !important;
}


/* ---------------------------------------------------------
   3. THREE-CARD CLARITY SECTION: STABLE LAYOUT
   Keep the accepted V425 structure.
   --------------------------------------------------------- */

#js-hiw-final .hiw-three {
  grid-template-columns:
    minmax(460px, 1.42fr)
    minmax(170px, .48fr)
    minmax(460px, 1.42fr) !important;
  gap: clamp(18px, 1.85vw, 26px) !important;
  align-items: stretch !important;
}

#js-hiw-final .hiw-three .hiw-review-body {
  padding:
    clamp(38px, 4vw, 54px)
    clamp(30px, 3.2vw, 44px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#js-hiw-final .hiw-three .hiw-three-heading {
  display: block !important;
  margin: 0 0 38px 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(48px, 3.95vw, 66px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
  color: var(--hiw-ink) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: normal !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-three .hiw-three-heading {
  color: var(--hiw-dark-text) !important;
}

#js-hiw-final .hiw-three .hiw-title-breather {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  flex-basis: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#js-hiw-final .hiw-three .hiw-list {
  display: block !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#js-hiw-final .hiw-three .hiw-list ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#js-hiw-final .hiw-three .hiw-list li {
  position: relative !important;
  margin: 0 0 15px !important;
  padding-left: 24px !important;
  color: var(--hiw-muted) !important;
  font-size: clamp(13px, .95vw, 14.5px) !important;
  line-height: 1.72 !important;
  letter-spacing: .035em !important;
}

#js-hiw-final .hiw-three .hiw-list li:last-child {
  margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   4. WE STUDY SECTION ALIGNMENT
   Do not make this section full-width.
   Match normal centered shell behavior and center the copy box.
   --------------------------------------------------------- */

#js-hiw-final .hiw-study-section {
  text-align: center !important;
}

#js-hiw-final .hiw-study-section > .hiw-shell,
#js-hiw-final .hiw-study-section .hiw-section-head {
  width: min(calc(100% - 40px), var(--hiw-max)) !important;
  max-width: var(--hiw-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

#js-hiw-final .hiw-study-section .hiw-eyebrow,
#js-hiw-final .hiw-study-section .hiw-heading {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#js-hiw-final .hiw-study-section .hiw-copy {
  width: 100% !important;
  max-width: 980px !important;
  margin: 18px auto 0 !important;
  text-align: center !important;
}


/* ---------------------------------------------------------
   5. TABLET / MOBILE SAFETY
   --------------------------------------------------------- */

@media screen and (max-width: 1180px) and (min-width: 901px) {
  #js-hiw-final .hiw-three {
    grid-template-columns:
      minmax(370px, 1.35fr)
      minmax(155px, .48fr)
      minmax(370px, 1.35fr) !important;
  }

  #js-hiw-final .hiw-three .hiw-three-heading {
    font-size: clamp(40px, 3.35vw, 52px) !important;
    line-height: 1.05 !important;
    margin-bottom: 34px !important;
  }
}

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-three {
    grid-template-columns: 1fr !important;
  }

  #js-hiw-final .hiw-three .hiw-three-heading {
    font-size: clamp(38px, 10vw, 54px) !important;
    line-height: 1.08 !important;
    margin-bottom: 32px !important;
  }
}

/* END LIVE V426 SURGICAL REPAIR */


/* =========================================================
   LIVE V428 QUOTE VIEW-ONLY REVEAL + SCROLL PERFORMANCE
   Purpose:
   - Quote starts hidden and reveals only when viewed.
   - No page-load reveal.
   - Disable global scroll reveal work that can cause sticky scrolling.
   - Keep hero and quote as the main motion moments.
   ========================================================= */


/* ---------------------------------------------------------
   A. PERFORMANCE: remove global scroll-triggered section animation
   Heavy source: animation-timeline:view() and repeated filters/section animations.
   This keeps the page readable while scrolling fast.
   --------------------------------------------------------- */

#js-hiw-final .hiw-section,
#js-hiw-final .hiw-section-tight,
#js-hiw-final .hiw-pause,
#js-hiw-final .hiw-final {
  animation: none !important;
  animation-timeline: auto !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}


/* ---------------------------------------------------------
   B. QUOTE BAND: isolated reveal system
   --------------------------------------------------------- */

#js-hiw-final .hiw-quote-reveal-band {
  position: relative !important;
  isolation: isolate !important;
}

#js-hiw-final .hiw-quote-reveal-band .hiw-quote {
  position: relative !important;
  overflow: visible !important;
  opacity: 0 !important;
  transform: translateX(-56px) !important;
  filter: blur(8px) !important;
  clip-path: inset(0 100% 0 0) !important;
  animation: none !important;
  will-change: opacity, transform, filter, clip-path;
}

#js-hiw-final .hiw-quote-reveal-band.is-visible .hiw-quote {
  animation:
    hiw-quote-view-lux-left-reveal
    5200ms
    cubic-bezier(.16, .74, .16, 1)
    forwards !important;
}

#js-hiw-final .hiw-quote-reveal-band .hiw-quote::after {
  content: "" !important;
  position: absolute !important;
  inset: -10% -12% !important;
  pointer-events: none !important;
  opacity: 0;
  transform: translateX(-140%);
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 30%,
      rgba(217, 175, 99, 0) 40%,
      rgba(217, 175, 99, .22) 48%,
      rgba(255, 250, 230, .36) 52%,
      rgba(217, 175, 99, .16) 58%,
      transparent 70%,
      transparent 100%
    ) !important;
  mix-blend-mode: screen;
}

#js-hiw-final .hiw-quote-reveal-band.is-visible .hiw-quote::after {
  animation:
    hiw-quote-view-lux-sheen
    5200ms
    cubic-bezier(.16, .74, .16, 1)
    forwards !important;
}


/* ---------------------------------------------------------
   C. REDUCED MOTION / SAFETY
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #js-hiw-final .hiw-quote-reveal-band .hiw-quote,
  #js-hiw-final .hiw-quote-reveal-band.is-visible .hiw-quote {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
    animation: none !important;
  }

  #js-hiw-final .hiw-quote-reveal-band .hiw-quote::after {
    display: none !important;
  }
}

/* END LIVE V428 QUOTE VIEW-ONLY REVEAL */


/* =========================================================
   LIVE V429 FIRST VALUE QUOTE SHIMMER
   Scope:
   - Enlarges the first doctrine title by ~1.4x.
   - Presents it as a quoted principle.
   - Adds restrained gold-lacquer shimmer, stronger on hover.
   ========================================================= */

#js-hiw-final .hiw-pause--first .hiw-pause-title {
  position: relative !important;
  display: inline-block !important;
  font-size: clamp(48px, 5.85vw, 82px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.052em !important;
  font-style: italic !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image:
    linear-gradient(
      105deg,
      var(--hiw-ink) 0%,
      var(--hiw-ink) 34%,
      var(--hiw-gold) 46%,
      var(--hiw-gold-bright) 50%,
      var(--hiw-gold) 54%,
      var(--hiw-ink) 66%,
      var(--hiw-ink) 100%
    ) !important;
  background-size: 260% 100% !important;
  background-position: 132% 0 !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 18px rgba(185, 130, 50, .08),
    0 0 42px rgba(185, 130, 50, .055) !important;
  animation: hiw-first-value-ambient-gold 8800ms ease-in-out infinite !important;
  will-change: background-position, filter, text-shadow;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-pause--first .hiw-pause-title {
  background-image:
    linear-gradient(
      105deg,
      var(--hiw-dark-text) 0%,
      var(--hiw-dark-text) 34%,
      var(--hiw-gold-soft) 46%,
      var(--hiw-gold-bright) 50%,
      var(--hiw-gold-soft) 54%,
      var(--hiw-dark-text) 66%,
      var(--hiw-dark-text) 100%
    ) !important;
  text-shadow:
    0 0 20px rgba(217, 175, 99, .10),
    0 0 52px rgba(217, 175, 99, .075) !important;
}

/* Soft hover emphasis: polished gold catching light */
@media (hover: hover) and (pointer: fine) {
  #js-hiw-final .hiw-pause--first .hiw-pause-title:hover {
    animation:
      hiw-first-value-hover-sheen 2600ms cubic-bezier(.18, .72, .18, 1) forwards,
      hiw-first-value-hover-glow 2600ms ease-in-out forwards !important;
    filter: saturate(1.08);
  }
}

@keyframes hiw-first-value-ambient-gold {
  0%, 78%, 100% {
    background-position: 132% 0;
    text-shadow:
      0 0 18px rgba(185, 130, 50, .08),
      0 0 42px rgba(185, 130, 50, .055);
  }

  86% {
    background-position: 62% 0;
    text-shadow:
      0 0 20px rgba(185, 130, 50, .14),
      0 0 48px rgba(217, 175, 99, .08);
  }

  94% {
    background-position: -26% 0;
    text-shadow:
      0 0 14px rgba(185, 130, 50, .09),
      0 0 38px rgba(217, 175, 99, .055);
  }
}

@keyframes hiw-first-value-hover-sheen {
  0% {
    background-position: 132% 0;
  }

  52% {
    background-position: 36% 0;
  }

  100% {
    background-position: -32% 0;
  }
}

@keyframes hiw-first-value-hover-glow {
  0%, 100% {
    text-shadow:
      0 0 18px rgba(185, 130, 50, .10),
      0 0 42px rgba(185, 130, 50, .06);
  }

  52% {
    text-shadow:
      0 0 18px rgba(185, 130, 50, .28),
      0 0 54px rgba(217, 175, 99, .16),
      0 0 88px rgba(185, 130, 50, .10);
  }
}

/* Fallback / accessibility */
@supports not (-webkit-background-clip: text) {
  #js-hiw-final .hiw-pause--first .hiw-pause-title {
    color: var(--hiw-gold) !important;
    -webkit-text-fill-color: var(--hiw-gold) !important;
    background: none !important;
  }

  html[data-js-theme="dark"] #js-hiw-final .hiw-pause--first .hiw-pause-title {
    color: var(--hiw-gold-bright) !important;
    -webkit-text-fill-color: var(--hiw-gold-bright) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #js-hiw-final .hiw-pause--first .hiw-pause-title {
    animation: none !important;
    filter: none !important;
    color: var(--hiw-gold) !important;
    -webkit-text-fill-color: var(--hiw-gold) !important;
    background: none !important;
    text-shadow: none !important;
  }

  html[data-js-theme="dark"] #js-hiw-final .hiw-pause--first .hiw-pause-title {
    color: var(--hiw-gold-bright) !important;
    -webkit-text-fill-color: var(--hiw-gold-bright) !important;
  }
}

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-pause--first .hiw-pause-title {
    font-size: clamp(40px, 11vw, 58px) !important;
    line-height: 1.04 !important;
  }
}

/* END LIVE V429 FIRST VALUE QUOTE SHIMMER */


/* =========================================================
   LIVE V432 CORRECTED NO-POP QUIET-LUX HOVER SYSTEM
   Purpose:
   - Corrects the selector grouping bug from V431.
   - Icons never move, scale, lift, or shake.
   - Hover is now visible through gold aura, ripple line,
     border warmth, diagonal sheen, and icon glow only.
   ========================================================= */


/* ---------------------------------------------------------
   1. ABSOLUTE NO-POP GUARANTEE
   This wins against older base hover transforms.
   --------------------------------------------------------- */

#js-hiw-final .hiw-icon,
#js-hiw-final .hiw-icon img,
#js-hiw-final .hiw-step:hover,
#js-hiw-final .hiw-mini-card:hover,
#js-hiw-final .hiw-expander-card:hover,
#js-hiw-final .hiw-step:hover .hiw-icon,
#js-hiw-final .hiw-step:hover .hiw-icon img,
#js-hiw-final .hiw-mini-card:hover .hiw-icon,
#js-hiw-final .hiw-mini-card:hover .hiw-icon img,
#js-hiw-final .hiw-expander-card:hover .hiw-icon,
#js-hiw-final .hiw-expander-card:hover .hiw-icon img {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  rotate: none !important;
}


/* ---------------------------------------------------------
   2. CARD SURFACE SETUP
   Keep hover light inside card boundaries.
   --------------------------------------------------------- */

#js-hiw-final .hiw-step,
#js-hiw-final .hiw-mini-card,
#js-hiw-final .hiw-expander-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition:
    border-color 280ms ease,
    box-shadow 280ms ease,
    background-color 280ms ease,
    filter 280ms ease !important;
}


/* ---------------------------------------------------------
   3. ICON AURA SYSTEM
   No icon movement. The glow lives behind the icon.
   --------------------------------------------------------- */

#js-hiw-final .hiw-icon {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

#js-hiw-final .hiw-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 76px !important;
  height: 76px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition:
    opacity 300ms ease,
    box-shadow 300ms ease !important;
  background:
    radial-gradient(
      circle,
      rgba(185, 130, 50, .20) 0%,
      rgba(185, 130, 50, .10) 34%,
      rgba(185, 130, 50, 0) 68%
    ) !important;
}

#js-hiw-final .hiw-icon img {
  position: relative !important;
  z-index: 2 !important;
  transform: none !important;
  transform-origin: center center !important;
  transition:
    filter 280ms ease,
    opacity 280ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #js-hiw-final .hiw-step:hover .hiw-icon::before,
  #js-hiw-final .hiw-mini-card:hover .hiw-icon::before {
    opacity: 1 !important;
    box-shadow:
      0 0 18px rgba(185, 130, 50, .16),
      0 0 42px rgba(185, 130, 50, .08) !important;
  }
}


/* ---------------------------------------------------------
   4. STRONGER GOLD RIPPLE LINE
   More visible than V431.
   --------------------------------------------------------- */

#js-hiw-final .hiw-step::before,
#js-hiw-final .hiw-mini-card::before,
#js-hiw-final .hiw-expander-card::before {
  content: "" !important;
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  bottom: 0 !important;
  height: 2px !important;
  opacity: 0 !important;
  transform: scaleX(.22) !important;
  transform-origin: center center !important;
  pointer-events: none !important;
  z-index: 3 !important;
  transition:
    opacity 260ms ease,
    transform 720ms cubic-bezier(.18, .72, .18, 1) !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(185, 130, 50, .24) 18%,
      rgba(217, 175, 99, .92) 50%,
      rgba(185, 130, 50, .24) 82%,
      transparent 100%
    ) !important;
  box-shadow:
    0 0 16px rgba(185, 130, 50, .24),
    0 -8px 28px rgba(185, 130, 50, .08) !important;
}


/* ---------------------------------------------------------
   5. DIAGONAL LACQUER SHEEN
   Runs once on hover; does not affect icon clipping.
   --------------------------------------------------------- */

#js-hiw-final .hiw-step::after,
#js-hiw-final .hiw-mini-card::after,
#js-hiw-final .hiw-expander-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateX(-130%) skewX(-14deg) !important;
  border-radius: inherit !important;
  z-index: 2 !important;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 250, 240, 0) 39%,
      rgba(185, 130, 50, .18) 48%,
      rgba(255, 250, 230, .24) 52%,
      rgba(185, 130, 50, .14) 58%,
      transparent 70%,
      transparent 100%
    ) !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-step::after,
html[data-js-theme="dark"] #js-hiw-final .hiw-mini-card::after,
html[data-js-theme="dark"] #js-hiw-final .hiw-expander-card::after {
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 250, 240, 0) 39%,
      rgba(209, 163, 91, .20) 48%,
      rgba(255, 250, 230, .18) 52%,
      rgba(209, 163, 91, .15) 58%,
      transparent 70%,
      transparent 100%
    ) !important;
}


/* ---------------------------------------------------------
   6. HOVER STATE: NO MOVEMENT, CLEAR VISUAL RESPONSE
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  html[data-js-theme="light"] #js-hiw-final .hiw-step:hover,
  html[data-js-theme="light"] #js-hiw-final .hiw-mini-card:hover,
  html[data-js-theme="light"] #js-hiw-final .hiw-expander-card:hover {
    border-color: rgba(185, 130, 50, .66) !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(185, 130, 50, .115), transparent 46%),
      rgba(255, 255, 255, .82) !important;
    box-shadow:
      0 18px 46px rgba(87, 60, 28, .11),
      0 0 32px rgba(185, 130, 50, .10),
      0 0 0 1px rgba(185, 130, 50, .16) inset !important;
  }

  html[data-js-theme="dark"] #js-hiw-final .hiw-step:hover,
  html[data-js-theme="dark"] #js-hiw-final .hiw-mini-card:hover,
  html[data-js-theme="dark"] #js-hiw-final .hiw-expander-card:hover {
    border-color: rgba(209, 163, 91, .78) !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(209, 163, 91, .14), transparent 46%),
      rgba(14, 13, 11, .90) !important;
    box-shadow:
      0 18px 58px rgba(0, 0, 0, .44),
      0 0 38px rgba(185, 130, 50, .16),
      0 0 0 1px rgba(209, 163, 91, .22) inset !important;
  }

  #js-hiw-final .hiw-step:hover::before,
  #js-hiw-final .hiw-mini-card:hover::before,
  #js-hiw-final .hiw-expander-card:hover::before {
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }

  #js-hiw-final .hiw-step:hover::after,
  #js-hiw-final .hiw-mini-card:hover::after,
  #js-hiw-final .hiw-expander-card:hover::after {
    animation: hiw-v432-gold-sheen 1150ms cubic-bezier(.18, .72, .18, 1) forwards !important;
  }

  html[data-js-theme="light"] #js-hiw-final .hiw-step:hover .hiw-icon img,
  html[data-js-theme="light"] #js-hiw-final .hiw-mini-card:hover .hiw-icon img,
  html[data-js-theme="light"] #js-hiw-final .hiw-expander-card:hover .hiw-icon img {
    filter:
      contrast(1.16)
      saturate(.98)
      brightness(.98)
      drop-shadow(0 0 12px rgba(185, 130, 50, .30))
      drop-shadow(0 8px 18px rgba(185, 130, 50, .16)) !important;
    opacity: 1 !important;
    mix-blend-mode: multiply !important;
  }

  html[data-js-theme="dark"] #js-hiw-final .hiw-step:hover .hiw-icon img,
  html[data-js-theme="dark"] #js-hiw-final .hiw-mini-card:hover .hiw-icon img,
  html[data-js-theme="dark"] #js-hiw-final .hiw-expander-card:hover .hiw-icon img {
    filter:
      invert(77%)
      sepia(38%)
      saturate(680%)
      hue-rotate(351deg)
      brightness(110%)
      contrast(99%)
      drop-shadow(0 0 14px rgba(217, 175, 99, .32))
      drop-shadow(0 8px 20px rgba(217, 175, 99, .18)) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }
}

@keyframes hiw-v432-gold-sheen {
  0% {
    opacity: 0;
    transform: translateX(-130%) skewX(-14deg);
  }

  22% {
    opacity: .58;
  }

  58% {
    opacity: .82;
  }

  100% {
    opacity: 0;
    transform: translateX(130%) skewX(-14deg);
  }
}


/* ---------------------------------------------------------
   7. BUTTON MICRO-SHINE
   --------------------------------------------------------- */

#js-hiw-final .hiw-btn {
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 26px rgba(185, 130, 50, .14);
}

#js-hiw-final .hiw-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -52% !important;
  width: 42% !important;
  transform: skewX(-18deg) !important;
  opacity: 0 !important;
  transition:
    left 520ms ease,
    opacity 260ms ease !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .32),
      transparent
    ) !important;
  pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
  #js-hiw-final .hiw-btn:hover::after {
    left: 112% !important;
    opacity: 1 !important;
  }
}


/* ---------------------------------------------------------
   8. MOBILE / REDUCED MOTION SAFETY
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-step::after,
  #js-hiw-final .hiw-mini-card::after,
  #js-hiw-final .hiw-expander-card::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #js-hiw-final .hiw-step,
  #js-hiw-final .hiw-mini-card,
  #js-hiw-final .hiw-expander-card,
  #js-hiw-final .hiw-icon,
  #js-hiw-final .hiw-icon img,
  #js-hiw-final .hiw-btn::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    rotate: none !important;
  }
}

/* END LIVE V432 CORRECTED NO-POP QUIET-LUX HOVER SYSTEM */


/* =========================================================
   LIVE V433 THREE-CARD FINAL FIT SYSTEM
   Purpose:
   - Fix "Complexity" wrapping permanently.
   - Keep side text cards dominant.
   - Make center image a visual bridge, not a width thief.
   - Use one heading-to-list spacing rule.
   Scope:
   - Only the .hiw-three triptych section.
   ========================================================= */


/* ---------------------------------------------------------
   1. Curated triptych geometry
   Text card / narrow image bridge / text card.
   --------------------------------------------------------- */

#js-hiw-final .hiw-three {
  display: grid !important;
  grid-template-columns:
    minmax(420px, 1.25fr)
    minmax(220px, .72fr)
    minmax(420px, 1.25fr) !important;
  gap: clamp(18px, 1.85vw, 26px) !important;
  align-items: stretch !important;
  justify-content: center !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ---------------------------------------------------------
   2. Text cards: enough inner room, no fake spacer logic
   --------------------------------------------------------- */

#js-hiw-final .hiw-three .hiw-review-body {
  padding:
    clamp(36px, 3.8vw, 52px)
    clamp(30px, 3.2vw, 44px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}


/* ---------------------------------------------------------
   3. Heading fit: luxury size, disciplined enough not to fracture
   --------------------------------------------------------- */

#js-hiw-final .hiw-three .hiw-three-heading {
  display: block !important;
  margin: 0 0 42px 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(42px, 3.25vw, 58px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.043em !important;
  color: var(--hiw-ink) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: normal !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-three .hiw-three-heading {
  color: var(--hiw-dark-text) !important;
}


/* ---------------------------------------------------------
   4. One spacing source only
   Heading margin-bottom controls the breather.
   --------------------------------------------------------- */

#js-hiw-final .hiw-three .hiw-title-breather {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

#js-hiw-final .hiw-three .hiw-list {
  display: block !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#js-hiw-final .hiw-three .hiw-list ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#js-hiw-final .hiw-three .hiw-list li {
  position: relative !important;
  margin: 0 0 15px !important;
  padding-left: 24px !important;
  color: var(--hiw-muted) !important;
  font-size: clamp(13px, .95vw, 14.5px) !important;
  line-height: 1.72 !important;
  letter-spacing: .035em !important;
}

#js-hiw-final .hiw-three .hiw-list li:last-child {
  margin-bottom: 0 !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-three .hiw-list li {
  color: var(--hiw-dark-muted) !important;
}


/* ---------------------------------------------------------
   5. Center image bridge: preserve height, narrow visual authority
   --------------------------------------------------------- */

#js-hiw-final .hiw-three .hiw-photo-card {
  min-height: 360px !important;
  width: 100% !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}


/* ---------------------------------------------------------
   6. Tablet safety
   --------------------------------------------------------- */

@media screen and (max-width: 1180px) and (min-width: 901px) {
  #js-hiw-final .hiw-three {
    grid-template-columns:
      minmax(350px, 1.22fr)
      minmax(180px, .66fr)
      minmax(350px, 1.22fr) !important;
    gap: clamp(16px, 1.6vw, 22px) !important;
  }

  #js-hiw-final .hiw-three .hiw-three-heading {
    font-size: clamp(36px, 3.05vw, 48px) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.038em !important;
    margin-bottom: 38px !important;
  }

  #js-hiw-final .hiw-three .hiw-review-body {
    padding:
      clamp(32px, 3.3vw, 44px)
      clamp(26px, 2.8vw, 38px) !important;
  }
}


/* ---------------------------------------------------------
   7. Mobile safety
   Mobile stacks naturally; no nowrap overflow chaos.
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-three {
    grid-template-columns: 1fr !important;
  }

  #js-hiw-final .hiw-three .hiw-three-heading {
    font-size: clamp(36px, 10vw, 52px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 34px !important;
    white-space: normal !important;
  }

  #js-hiw-final .hiw-three .hiw-review-body {
    padding: clamp(34px, 8vw, 46px) !important;
  }

  #js-hiw-final .hiw-three .hiw-photo-card {
    min-height: 280px !important;
  }
}

/* END LIVE V433 THREE-CARD FINAL FIT SYSTEM */


/* =========================================================
   LIVE V434 LAST-TRY THREE-CARD FINAL CORRECTION
   Purpose:
   - Stop the left heading from breaking by using shorter wording.
   - Keep the section visually premium and stable.
   - Solve the title-to-bullet breather using ONE spacing source.
   Scope:
   - Only the .hiw-three triptych section.
   ========================================================= */


/* ---------------------------------------------------------
   1. Final triptych geometry
   Side cards get priority. Center image becomes a visual bridge.
   --------------------------------------------------------- */

#js-hiw-final .hiw-three {
  display: grid !important;
  grid-template-columns:
    minmax(430px, 1.30fr)
    minmax(210px, .68fr)
    minmax(430px, 1.30fr) !important;
  gap: clamp(18px, 1.85vw, 26px) !important;
  align-items: stretch !important;
  justify-content: center !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ---------------------------------------------------------
   2. Text card interior
   --------------------------------------------------------- */

#js-hiw-final .hiw-three .hiw-review-body {
  padding:
    clamp(38px, 3.8vw, 52px)
    clamp(30px, 3vw, 42px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}


/* ---------------------------------------------------------
   3. Final heading fit
   Left wording is now:
   From / Chaos / to Clarity
   This permanently avoids the "Complexit / y" fracture.
   --------------------------------------------------------- */

#js-hiw-final .hiw-three .hiw-three-heading {
  display: block !important;
  margin: 0 0 52px 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(44px, 3.45vw, 60px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.043em !important;
  color: var(--hiw-ink) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: normal !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-three .hiw-three-heading {
  color: var(--hiw-dark-text) !important;
}


/* ---------------------------------------------------------
   4. One-line breather, finally
   The heading margin-bottom above is the only spacing source.
   Spacer div is intentionally disabled.
   --------------------------------------------------------- */

#js-hiw-final .hiw-three .hiw-title-breather {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

#js-hiw-final .hiw-three .hiw-list {
  display: block !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#js-hiw-final .hiw-three .hiw-list ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#js-hiw-final .hiw-three .hiw-list li {
  position: relative !important;
  margin: 0 0 15px !important;
  padding-left: 24px !important;
  color: var(--hiw-muted) !important;
  font-size: clamp(13px, .95vw, 14.5px) !important;
  line-height: 1.72 !important;
  letter-spacing: .035em !important;
}

#js-hiw-final .hiw-three .hiw-list li:last-child {
  margin-bottom: 0 !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-three .hiw-list li {
  color: var(--hiw-dark-muted) !important;
}


/* ---------------------------------------------------------
   5. Center image bridge
   --------------------------------------------------------- */

#js-hiw-final .hiw-three .hiw-photo-card {
  min-height: 360px !important;
  width: 100% !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}


/* ---------------------------------------------------------
   6. Tablet safety
   --------------------------------------------------------- */

@media screen and (max-width: 1180px) and (min-width: 901px) {
  #js-hiw-final .hiw-three {
    grid-template-columns:
      minmax(350px, 1.25fr)
      minmax(180px, .65fr)
      minmax(350px, 1.25fr) !important;
    gap: clamp(16px, 1.6vw, 22px) !important;
  }

  #js-hiw-final .hiw-three .hiw-three-heading {
    font-size: clamp(38px, 3.12vw, 50px) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.038em !important;
    margin-bottom: 46px !important;
  }

  #js-hiw-final .hiw-three .hiw-review-body {
    padding:
      clamp(32px, 3.3vw, 44px)
      clamp(26px, 2.8vw, 38px) !important;
  }
}


/* ---------------------------------------------------------
   7. Mobile safety
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-three {
    grid-template-columns: 1fr !important;
  }

  #js-hiw-final .hiw-three .hiw-three-heading {
    font-size: clamp(38px, 10vw, 54px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 38px !important;
    white-space: normal !important;
  }

  #js-hiw-final .hiw-three .hiw-review-body {
    padding: clamp(34px, 8vw, 46px) !important;
  }

  #js-hiw-final .hiw-three .hiw-photo-card {
    min-height: 280px !important;
  }
}

/* END LIVE V434 LAST-TRY THREE-CARD FINAL CORRECTION */


/* =========================================================
   LIVE V435 REVIEW LIST LABEL SCALE-UP
   Purpose:
   - Increase the small list labels
     "What It Includes" / "What It Is Not"
     by about 1.8x for stronger visibility.
   Scope:
   - Only the review panel list headings inside the
     Case Acceptance Review section.
   ========================================================= */

#js-hiw-final .hiw-review-lists .hiw-list h3 {
  font-size: 20px !important;   /* ~1.8x the old 11px */
  line-height: 1.08 !important;
  margin: 0 0 18px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-review-lists .hiw-list h3 {
    font-size: 17px !important;
    margin-bottom: 16px !important;
  }
}

/* END LIVE V435 REVIEW LIST LABEL SCALE-UP */


/* =========================================================
   LIVE V437 STRUCTURE REPAIR + COMMITMENT CLARIFIER
   Purpose:
   - Repairs the malformed V436 header structure.
   - Keeps clarifier inside the section-head container.
   - Makes review list labels obviously larger.
   Scope:
   - Case Acceptance Review list labels.
   - Three Layers of Commitment header clarification.
   ========================================================= */

/* Case Acceptance Review mini-list labels */
#js-hiw-final .hiw-review-lists .hiw-list h3 {
  font-size: clamp(20px, 1.45vw, 24px) !important;
  line-height: 1.12 !important;
  margin: 0 0 20px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* Clarifier under The Three Layers of Commitment */
#js-hiw-final .hiw-process-clarifier {
  max-width: 940px !important;
  margin: 18px auto 0 !important;
  text-align: center !important;
  color: var(--hiw-muted) !important;
  font-size: clamp(15px, 1.12vw, 17px) !important;
  line-height: 1.82 !important;
  letter-spacing: .01em !important;
}

#js-hiw-final .hiw-process-clarifier strong {
  color: var(--hiw-ink) !important;
  font-weight: 700 !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-process-clarifier {
  color: var(--hiw-dark-muted) !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-process-clarifier strong {
  color: var(--hiw-dark-text) !important;
}

/* Space after the clarified header before the process cards */
#js-hiw-final #hiw-process .hiw-shell-wide {
  margin-top: 30px !important;
}

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-review-lists .hiw-list h3 {
    font-size: clamp(17px, 4.6vw, 21px) !important;
    margin-bottom: 18px !important;
  }

  #js-hiw-final .hiw-process-clarifier {
    max-width: 100% !important;
    margin-top: 14px !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  #js-hiw-final #hiw-process .hiw-shell-wide {
    margin-top: 24px !important;
  }
}

/* END LIVE V437 STRUCTURE REPAIR + COMMITMENT CLARIFIER */


/* =========================================================
   LIVE V438 FINAL CTA LAYER SEPARATION
   Purpose:
   - Fix the final CTA looking washed/faded.
   - Keep the photo + gradient mask behind the content only.
   - Force text and button onto the top layer.
   - Prevent any pseudo-overlay/sheens from sitting over CTA content.
   Scope:
   - Only the final CTA section.
   ========================================================= */


/* ---------------------------------------------------------
   1. Final CTA section becomes a proper layer stack
   --------------------------------------------------------- */

#js-hiw-final .hiw-final {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-image: none !important;
  background-color: var(--hiw-cream) !important;
  border-top: 1px solid var(--hiw-line) !important;
  border-bottom: 1px solid var(--hiw-line) !important;
}

/* Photo + mask layer lives behind all text/buttons */
#js-hiw-final .hiw-final::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(251, 247, 239, .96) 0%,
      rgba(251, 247, 239, .84) 42%,
      rgba(251, 247, 239, .62) 68%,
      rgba(251, 247, 239, .50) 100%
    ),
    url("/cdn/shop/files/46-js-how-it-works-vnext-final-cta-private-path-light-desktop-46.webp?v=1778971159"),
    linear-gradient(135deg, rgba(255,255,255,.52), rgba(244,238,228,.72)) !important;
  background-size: cover, cover, cover !important;
  background-position: center, center right, center !important;
  opacity: 1 !important;
}

/* Disable any hover/sheen overlay from sitting above the CTA */
#js-hiw-final .hiw-final::after {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   2. Content is always above the photo/mask
   --------------------------------------------------------- */

#js-hiw-final .hiw-final > .hiw-shell,
#js-hiw-final .hiw-final .hiw-final-inner,
#js-hiw-final .hiw-final .hiw-heading,
#js-hiw-final .hiw-final .hiw-copy,
#js-hiw-final .hiw-final .hiw-eyebrow,
#js-hiw-final .hiw-final .hiw-btn {
  position: relative !important;
  z-index: 3 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Make the copy read cleanly above the pale image layer */
#js-hiw-final .hiw-final .hiw-heading {
  color: var(--hiw-ink) !important;
  text-shadow: 0 1px 0 rgba(255, 250, 240, .28) !important;
}

#js-hiw-final .hiw-final .hiw-heading span {
  color: var(--hiw-gold) !important;
}

#js-hiw-final .hiw-final .hiw-copy {
  color: rgba(21, 18, 13, .78) !important;
  max-width: 820px !important;
}

#js-hiw-final .hiw-final .hiw-btn {
  background: var(--hiw-gold) !important;
  border-color: var(--hiw-gold) !important;
  color: #fffaf0 !important;
  box-shadow:
    0 12px 30px rgba(185, 130, 50, .22),
    0 0 0 1px rgba(255, 250, 240, .18) inset !important;
}


/* ---------------------------------------------------------
   3. Dark theme background layer
   --------------------------------------------------------- */

html[data-js-theme="dark"] #js-hiw-final .hiw-final {
  background-color: var(--hiw-dark) !important;
  border-color: rgba(185, 130, 50, .28) !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-final::before {
  background-image:
    linear-gradient(
      90deg,
      rgba(5, 5, 5, .96) 0%,
      rgba(5, 5, 5, .84) 42%,
      rgba(5, 5, 5, .62) 70%,
      rgba(5, 5, 5, .48) 100%
    ),
    url("/cdn/shop/files/45-js-how-it-works-vnext-final-cta-private-path-dark-desktop-45.webp?v=1778971159"),
    linear-gradient(135deg, #050505, #0a0907) !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-final .hiw-heading {
  color: var(--hiw-dark-text) !important;
  text-shadow: none !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-final .hiw-heading span {
  color: var(--hiw-gold-bright) !important;
}

html[data-js-theme="dark"] #js-hiw-final .hiw-final .hiw-copy {
  color: rgba(255, 250, 240, .78) !important;
}


/* ---------------------------------------------------------
   4. Mobile final CTA layer
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-final::before {
    background-image:
      linear-gradient(
        180deg,
        rgba(251, 247, 239, .97) 0%,
        rgba(251, 247, 239, .86) 56%,
        rgba(251, 247, 239, .70) 100%
      ),
      url("/cdn/shop/files/48-js-how-it-works-vnext-final-cta-private-path-light-mobile-48.webp?v=1778971160"),
      linear-gradient(135deg, rgba(255,255,255,.52), rgba(244,238,228,.72)) !important;
    background-position: center, center, center !important;
  }

  html[data-js-theme="dark"] #js-hiw-final .hiw-final::before {
    background-image:
      linear-gradient(
        180deg,
        rgba(5, 5, 5, .96) 0%,
        rgba(5, 5, 5, .84) 56%,
        rgba(5, 5, 5, .68) 100%
      ),
      url("/cdn/shop/files/47-js-how-it-works-vnext-final-cta-private-path-dark-mobile-47.webp?v=1778971159"),
      linear-gradient(135deg, #050505, #0a0907) !important;
    background-position: center, center, center !important;
  }
}

/* END LIVE V438 FINAL CTA LAYER SEPARATION */


/* =========================================================
   LIVE V439 FINAL CTA TRUE BLACK TEXT
   Purpose:
   - Force final CTA heading to real black in light theme.
   - Prevent faded/washed gray rendering.
   - Keep photo mask behind content only.
   Scope:
   - Final CTA text and button only.
   ========================================================= */

html[data-js-theme="light"] #js-hiw-final .hiw-final .hiw-heading,
html[data-js-theme="light"] #js-hiw-final .hiw-final .hiw-heading span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

html[data-js-theme="light"] #js-hiw-final .hiw-final .hiw-copy {
  color: rgba(0, 0, 0, .82) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, .82) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

html[data-js-theme="light"] #js-hiw-final .hiw-final .hiw-eyebrow {
  color: var(--hiw-gold) !important;
  -webkit-text-fill-color: var(--hiw-gold) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

html[data-js-theme="light"] #js-hiw-final .hiw-final .hiw-btn {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Ensure the CTA content sits above the image/mask layer. */
#js-hiw-final .hiw-final > .hiw-shell,
#js-hiw-final .hiw-final .hiw-final-inner,
#js-hiw-final .hiw-final .hiw-final-inner > *,
#js-hiw-final .hiw-final .hiw-heading,
#js-hiw-final .hiw-final .hiw-copy,
#js-hiw-final .hiw-final .hiw-eyebrow,
#js-hiw-final .hiw-final .hiw-btn {
  position: relative !important;
  z-index: 5 !important;
}

/* END LIVE V439 FINAL CTA TRUE BLACK TEXT */


/* =========================================================
   LIVE V440 FINAL CTA CONTRAST + HARD BULLET GAP
   Purpose:
   - Preserve true-black final CTA text.
   - Keep CTA photo/mask behind the content layer.
   - Add a real, hard spacer between three-card headings and bullets.
   Scope:
   - Final CTA content.
   - Three-card triptych bullet spacing.
   ========================================================= */


/* ---------------------------------------------------------
   1. Final CTA: real black text and protected top content layer
   --------------------------------------------------------- */

html[data-js-theme="light"] #js-hiw-final .hiw-final .hiw-heading,
html[data-js-theme="light"] #js-hiw-final .hiw-final .hiw-heading span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

html[data-js-theme="light"] #js-hiw-final .hiw-final .hiw-copy {
  color: rgba(0, 0, 0, .84) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, .84) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

html[data-js-theme="light"] #js-hiw-final .hiw-final .hiw-eyebrow {
  color: var(--hiw-gold) !important;
  -webkit-text-fill-color: var(--hiw-gold) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

#js-hiw-final .hiw-final > .hiw-shell,
#js-hiw-final .hiw-final .hiw-final-inner,
#js-hiw-final .hiw-final .hiw-final-inner > *,
#js-hiw-final .hiw-final .hiw-heading,
#js-hiw-final .hiw-final .hiw-copy,
#js-hiw-final .hiw-final .hiw-eyebrow,
#js-hiw-final .hiw-final .hiw-btn {
  position: relative !important;
  z-index: 6 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Keep any image/mask layer behind the content. */
#js-hiw-final .hiw-final::before {
  z-index: 0 !important;
  pointer-events: none !important;
}

#js-hiw-final .hiw-final::after {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   2. Three-card triptych: hard bullet gap
   --------------------------------------------------------- */

/* Old spacer is disabled. New spacer below is the only gap source. */
#js-hiw-final .hiw-three .hiw-title-breather {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* Real layout spacer inserted in Liquid between heading and bullet list. */
#js-hiw-final .hiw-three .hiw-three-bullet-gap {
  display: block !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  flex: 0 0 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* No extra list margin. The spacer above owns the breathing room. */
#js-hiw-final .hiw-three .hiw-list {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-three .hiw-three-bullet-gap {
    height: 36px !important;
    min-height: 36px !important;
    flex-basis: 36px !important;
  }
}

/* END LIVE V440 FINAL CTA CONTRAST + HARD BULLET GAP */


/* =========================================================
   LIVE V441 THREE-CARD BULLET GAP 1.5X
   Purpose:
   - Increase the real spacer between three-card headings
     and bullet lists by 1.5x from v440.
   - Desktop: 46px → 69px.
   - Mobile: 36px → 54px.
   Scope:
   - Only .hiw-three-bullet-gap inside the triptych cards.
   ========================================================= */

#js-hiw-final .hiw-three .hiw-three-bullet-gap {
  display: block !important;
  width: 100% !important;
  height: 69px !important;
  min-height: 69px !important;
  flex: 0 0 69px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-three .hiw-three-bullet-gap {
    height: 54px !important;
    min-height: 54px !important;
    flex-basis: 54px !important;
  }
}

/* END LIVE V441 THREE-CARD BULLET GAP 1.5X */


/* =========================================================
   LIVE V442 LAST-RESORT HARD THREE-CARD GAP
   Purpose:
   - Stop relying on margins or old spacer systems.
   - Force a real structural gap inside each three-card text card.
   - This gap is inserted in Liquid as .hiw-three-hard-gap.
   Scope:
   - Only the From/Chaos/to Clarity and Scope/Discipline/Results cards.
   ========================================================= */

/* Disable all older competing spacer systems in this section. */
#js-hiw-final .hiw-three .hiw-title-breather,
#js-hiw-final .hiw-three .hiw-three-bullet-gap {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* The real, visible gap. */
#js-hiw-final .hiw-three .hiw-three-hard-gap {
  display: block !important;
  width: 100% !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  flex: 0 0 88px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The list begins immediately after the hard spacer, with no competing margins. */
#js-hiw-final .hiw-three .hiw-list {
  display: block !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Keep the heading itself from adding hidden/competing spacing. */
#js-hiw-final .hiw-three .hiw-three-heading {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 900px) {
  #js-hiw-final .hiw-three .hiw-three-hard-gap {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    flex-basis: 56px !important;
  }
}

/* END LIVE V442 LAST-RESORT HARD THREE-CARD GAP */