/* NhaiKanji referral // richer SPD study module above Seasonal Module */
.referral-module{
  position:relative;
  margin:14px 0 0;
  min-height:174px;
  display:grid;
  grid-template-columns:126px minmax(0,1fr) 230px;
  grid-template-rows:1fr auto;
  gap:18px 24px;
  align-items:center;
  padding:22px 24px 12px 28px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(116,207,255,.2);
  background:
    radial-gradient(circle at 7% 50%,rgba(88,221,255,.07),transparent 22%),
    radial-gradient(circle at 92% 28%,rgba(255,48,74,.045),transparent 20%),
    linear-gradient(105deg,rgba(8,23,36,.97),rgba(5,14,23,.94) 54%,rgba(8,24,36,.92));
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  box-shadow:0 15px 38px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.014);
}
.referral-module::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(rgba(116,207,255,.027) 1px,transparent 1px),
    linear-gradient(90deg,rgba(116,207,255,.027) 1px,transparent 1px);
  background-size:25px 25px;
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.62) 66%,transparent 96%);
}
.referral-module::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-76px;
  top:-94px;
  width:330px;
  height:330px;
  border:1px solid rgba(88,221,255,.07);
  border-radius:50%;
  box-shadow:inset 0 0 45px rgba(88,221,255,.025);
  pointer-events:none;
}
.referral-module__signal{
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:5px;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:8px;
}
.referral-module__signal i:first-child{background:#ff304a;box-shadow:0 0 14px rgba(255,48,74,.34)}
.referral-module__signal i:last-child{background:#58ddff;box-shadow:0 0 14px rgba(88,221,255,.28)}

.referral-module__visual{
  position:relative;
  width:116px;
  height:116px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(116,207,255,.22);
  background:
    linear-gradient(145deg,rgba(116,207,255,.055),transparent 44%),
    rgba(3,13,22,.68);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow:inset 0 0 28px rgba(88,221,255,.025);
}
.referral-module__visual::before,
.referral-module__visual::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.referral-module__visual::before{
  inset:9px;
  border:1px solid rgba(116,207,255,.11);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.referral-module__visual::after{
  left:12px;
  right:12px;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,221,255,.32),transparent);
}
.referral-module__jp{
  position:relative;
  z-index:2;
  font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:58px;
  line-height:1;
  font-weight:700;
  color:#d8effb;
  text-shadow:0 0 22px rgba(88,221,255,.13);
}
.referral-module__jp-sub{
  position:absolute;
  right:17px;
  top:14px;
  z-index:3;
  font-family:"Noto Sans JP","Yu Gothic",sans-serif;
  font-size:16px;
  color:#ff6175;
  text-shadow:0 0 10px rgba(255,48,74,.25);
}
.referral-module__orbit{
  position:absolute;
  width:86px;
  height:86px;
  border:1px solid rgba(88,221,255,.14);
  border-radius:50%;
}
.referral-module__orbit::before{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  right:8px;
  top:12px;
  border-radius:50%;
  background:#58ddff;
  box-shadow:0 0 9px rgba(88,221,255,.55);
}
.referral-module__visual small{
  position:absolute;
  left:11px;
  bottom:8px;
  z-index:3;
  font-size:5.5px;
  letter-spacing:.09em;
  color:#66879a;
}

.referral-module__copy{min-width:0}
.referral-module__kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:#91b5ca;
  font-size:7px;
  letter-spacing:.09em;
}
.referral-module__kicker::after{
  content:"";
  width:58px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,48,74,.66),transparent);
}
.referral-module__copy h2{
  margin:0 0 8px;
  color:#ebf6fc;
  font-size:clamp(20px,2.1vw,28px);
  line-height:1.15;
  font-weight:750;
  letter-spacing:-.03em;
}
.referral-module__copy p{
  margin:0;
  max-width:760px;
  color:#9eb4c3;
  font-size:12px;
  line-height:1.68;
}
.referral-module__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}
.referral-module__tags span{
  padding:5px 7px;
  border:1px solid rgba(116,207,255,.13);
  background:rgba(6,19,29,.64);
  color:#688ba0;
  font-size:5.7px;
  letter-spacing:.065em;
}
.referral-module__tags span:nth-child(2){
  color:#8fdced;
  border-color:rgba(88,221,255,.19);
}
.referral-module__tags span:last-child{
  color:#a98b94;
  border-color:rgba(255,48,74,.13);
}

.referral-module__action{
  position:relative;
  min-width:0;
  padding:12px;
  border:1px solid rgba(116,207,255,.14);
  background:linear-gradient(180deg,rgba(7,22,33,.77),rgba(4,14,22,.66));
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.referral-module__action::before{
  content:"";
  position:absolute;
  top:0;
  left:12px;
  width:48px;
  height:2px;
  background:linear-gradient(90deg,#ff304a,#58ddff);
  box-shadow:0 0 10px rgba(88,221,255,.14);
}
.referral-module__action-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-bottom:9px;
}
.referral-module__action-head span{
  color:#d6eaf4;
  font-size:7px;
  letter-spacing:.075em;
}
.referral-module__action-head small{
  color:#536f81;
  font-size:5px;
  letter-spacing:.06em;
  white-space:nowrap;
}
.referral-module__cta{
  position:relative;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 13px 0 15px;
  border:1px solid rgba(116,207,255,.31);
  background:
    linear-gradient(90deg,rgba(255,48,74,.035),transparent 32%),
    rgba(7,22,33,.88);
  color:#d5eef9;
  font-size:7.7px;
  letter-spacing:.055em;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:border-color .12s ease,background .12s ease,box-shadow .12s ease,color .12s ease;
}
.referral-module__cta::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:#ff304a;
  box-shadow:0 0 10px rgba(255,48,74,.28);
}
.referral-module__cta b{
  color:#65e2ff;
  font-size:15px;
  font-weight:400;
  transition:transform .12s ease,filter .12s ease;
}
.referral-module__cta:hover,
.referral-module__cta:focus-visible{
  border-color:rgba(88,221,255,.62);
  background:rgba(9,30,43,.96);
  color:#f3fbff;
  box-shadow:0 0 22px rgba(88,221,255,.075),inset 0 0 20px rgba(88,221,255,.025);
  outline:none;
}
.referral-module__cta:hover b,
.referral-module__cta:focus-visible b{
  transform:translateX(3px);
  filter:drop-shadow(0 0 5px rgba(88,221,255,.45));
}
.referral-module__disclosure{
  display:block;
  margin-top:7px;
  color:#546f80;
  font-size:5.2px;
  letter-spacing:.06em;
  text-align:right;
}

.referral-module__telemetry{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  min-width:0;
  color:#4f7185;
  font-size:5.4px;
  letter-spacing:.065em;
}
.referral-module__telemetry i{
  height:1px;
  background:linear-gradient(90deg,rgba(255,48,74,.24),rgba(88,221,255,.19),transparent);
}
.referral-module__telemetry span:last-child{text-align:right}

body.reduced-motion .referral-module__cta,
body.reduced-motion .referral-module__cta b{transition:none!important}

@media(max-width:900px){
  .referral-module{
    grid-template-columns:96px minmax(0,1fr);
  }
  .referral-module__visual{width:90px;height:90px}
  .referral-module__jp{font-size:46px}
  .referral-module__orbit{width:66px;height:66px}
  .referral-module__action{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:auto minmax(210px,300px);
    gap:10px 16px;
    align-items:center;
  }
  .referral-module__action-head{margin:0}
  .referral-module__cta{grid-column:2;grid-row:1/3}
  .referral-module__disclosure{grid-column:1;grid-row:2;text-align:left;margin:0}
}
@media(max-width:700px){
  .referral-module{
    min-height:0;
    grid-template-columns:76px minmax(0,1fr);
    gap:14px 15px;
    padding:18px 16px 12px 21px;
  }
  .referral-module__visual{width:74px;height:74px}
  .referral-module__jp{font-size:38px}
  .referral-module__jp-sub{right:9px;top:7px;font-size:12px}
  .referral-module__orbit{width:54px;height:54px}
  .referral-module__visual small{font-size:4.8px;left:7px;bottom:5px}
  .referral-module__copy h2{font-size:18px}
  .referral-module__copy p{font-size:10.5px;line-height:1.6}
  .referral-module__tags{margin-top:9px;gap:5px}
  .referral-module__tags span{padding:4px 6px;font-size:5px}
  .referral-module__action{
    grid-column:1/-1;
    display:block;
    padding:10px;
  }
  .referral-module__action-head{margin-bottom:8px}
  .referral-module__cta{width:100%;min-height:45px}
  .referral-module__disclosure{text-align:left;margin-top:7px}
  .referral-module__telemetry{font-size:4.8px;gap:7px}
}
@media(max-width:430px){
  .referral-module{
    grid-template-columns:64px minmax(0,1fr);
    gap:12px;
    padding-right:12px;
  }
  .referral-module__visual{width:62px;height:62px}
  .referral-module__jp{font-size:32px}
  .referral-module__orbit{width:46px;height:46px}
  .referral-module__copy h2{font-size:16.5px}
  .referral-module__copy p{font-size:10px}
  .referral-module__tags span:last-child{display:none}
  .referral-module__telemetry span:last-child{display:none}
}


/* Desktop density pass // enrich wide layouts without touching the accepted mobile composition */
.referral-module__desktop-study,
.referral-module__link-meta{display:none}

@media(min-width:901px){
  .referral-module{
    min-height:214px;
    grid-template-columns:148px minmax(0,1fr) 270px;
    gap:20px 28px;
    padding:25px 28px 14px 32px;
  }

  .referral-module::before{
    background-size:24px 24px;
    opacity:.95;
  }

  .referral-module::after{
    right:-42px;
    top:-108px;
    width:390px;
    height:390px;
    border-color:rgba(88,221,255,.085);
    box-shadow:
      inset 0 0 55px rgba(88,221,255,.025),
      0 0 0 28px rgba(88,221,255,.012),
      0 0 0 58px rgba(255,48,74,.009);
  }

  .referral-module__visual{
    width:138px;
    height:138px;
    align-self:center;
    border-color:rgba(116,207,255,.3);
    box-shadow:
      inset 0 0 34px rgba(88,221,255,.035),
      0 0 24px rgba(88,221,255,.035);
  }

  .referral-module__visual::before{inset:10px}
  .referral-module__jp{font-size:68px}
  .referral-module__jp-sub{font-size:19px;right:18px;top:14px}
  .referral-module__orbit{width:101px;height:101px}

  .referral-module__copy{
    align-self:center;
    max-width:820px;
  }

  .referral-module__kicker{
    margin-bottom:10px;
    font-size:7.2px;
  }

  .referral-module__copy h2{
    font-size:clamp(24px,2.2vw,31px);
    margin-bottom:10px;
  }

  .referral-module__copy p{
    max-width:760px;
    font-size:12.5px;
    line-height:1.72;
  }

  .referral-module__tags{margin-top:13px}

  .referral-module__desktop-study{
    display:grid;
    grid-template-columns:auto 1fr auto 1fr auto;
    gap:9px;
    align-items:center;
    margin-top:15px;
    padding-top:10px;
    border-top:1px solid rgba(116,207,255,.09);
    color:#68889c;
    font-size:5.7px;
    letter-spacing:.07em;
  }

  .referral-module__desktop-study span{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
  }

  .referral-module__desktop-study b{
    color:#8fd9ed;
    font-size:5.5px;
    font-weight:700;
  }

  .referral-module__desktop-study i{
    height:1px;
    min-width:28px;
    background:linear-gradient(90deg,rgba(116,207,255,.06),rgba(116,207,255,.25),rgba(255,48,74,.08));
  }

  .referral-module__action{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:16px 15px 14px;
    border-color:rgba(116,207,255,.2);
    background:
      linear-gradient(180deg,rgba(9,27,40,.86),rgba(4,14,22,.72)),
      linear-gradient(90deg,rgba(255,48,74,.03),transparent 38%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.01),
      inset 0 -34px 45px rgba(0,0,0,.12);
  }

  .referral-module__action::after{
    content:"REF // AIUEO.NIHONG";
    display:block;
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid rgba(116,207,255,.08);
    color:#45697e;
    font:700 5.2px "Space Mono",monospace;
    letter-spacing:.07em;
    text-align:right;
  }

  .referral-module__action-head{
    margin-bottom:11px;
  }

  .referral-module__action-head span{font-size:7.5px}
  .referral-module__action-head small{font-size:5.2px}

  .referral-module__cta{
    min-height:50px;
    font-size:8px;
    background:
      linear-gradient(100deg,rgba(255,48,74,.045),transparent 34%),
      linear-gradient(180deg,rgba(10,31,45,.9),rgba(6,19,29,.9));
    box-shadow:inset 0 0 18px rgba(88,221,255,.018);
  }

  .referral-module__disclosure{
    margin-top:8px;
    font-size:5.4px;
  }

  .referral-module__link-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
    color:#56798d;
    font-size:5.2px;
    letter-spacing:.065em;
  }

  .referral-module__link-meta span:first-child{
    display:flex;
    align-items:center;
    gap:5px;
    color:#6894a9;
  }

  .referral-module__link-meta i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#49e8aa;
    box-shadow:0 0 8px rgba(73,232,170,.5);
  }

  .referral-module__telemetry{
    padding-top:2px;
    font-size:5.7px;
  }

  .referral-module__telemetry::before,
  .referral-module__telemetry::after{
    content:"";
    width:4px;
    height:4px;
    background:#ff304a;
    box-shadow:0 0 7px rgba(255,48,74,.35);
  }

  .referral-module__telemetry{
    grid-template-columns:auto auto 1fr auto auto;
  }

  .referral-module__telemetry::after{
    background:#58ddff;
    box-shadow:0 0 7px rgba(88,221,255,.35);
  }
}