/* ===== points.html page-specific ===== */
/* Built entirely from existing design tokens (.wrap, .wrap-narrow, .section,
   .sec-title/.sec-sub, .btn, --ink/--muted/--btn, blob.png) — no new colors,
   fonts, or button styles introduced. */

/* ---- SECTION 01: first view ---- */
.points-hero{position:relative;overflow:hidden;text-align:center;padding:120px 24px 90px}
.points-hero::before{
  content:"";position:absolute;left:-8%;top:10%;width:520px;height:520px;
  background:url("../images/blob.png") no-repeat center/contain;
  mix-blend-mode:multiply;filter:blur(44px);opacity:.6;z-index:0;pointer-events:none;
  mask-image:radial-gradient(closest-side,#000 25%,transparent 68%);
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 68%);
}
.points-hero::after{
  content:"";position:absolute;right:-10%;bottom:-14%;width:520px;height:520px;
  background:url("../images/blob.png") no-repeat center/contain;
  mix-blend-mode:multiply;filter:blur(44px);opacity:.6;z-index:0;pointer-events:none;
  mask-image:radial-gradient(closest-side,#000 25%,transparent 68%);
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 68%);
}
.points-hero__inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.points-hero__eyebrow{font-size:13px;letter-spacing:.1em;color:#555}
.points-hero__title{
  font-family:var(--latin);font-weight:700;font-size:56px;letter-spacing:.14em;
  color:var(--ink);line-height:1.1;margin-top:18px;
}
.points-hero__copy{margin-top:36px;font-size:22px;font-weight:700;line-height:1.8;color:var(--ink)}

/* ---- shared split layout (CONCEPT / INTRODUCTION) ---- */
.split-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:56px;overflow:hidden}
.split-inner.is-reverse .split__img{order:2}
.split__img,.split__text{min-width:0}
.split__img img{width:100%;height:auto;max-width:100%;border-radius:4px;display:block}
.pconcept .split__img img{aspect-ratio:16/10;object-fit:cover}
.split__body{font-size:13.5px;color:#4a4a4a;line-height:2.1}
.split__body + .split__body{margin-top:18px}

/* ---- SECTION 03: how it works ---- */
.howworks{position:relative;overflow:hidden}
.howworks::before{
  content:"";position:absolute;left:-10%;top:-10%;width:520px;height:520px;
  background:url("../images/blob.png") no-repeat center/contain;
  mix-blend-mode:multiply;filter:blur(44px);opacity:.52;z-index:0;pointer-events:none;
}
.howworks .sec-head,.howworks .hw-steps{position:relative;z-index:1}
.howworks .sec-head{margin-bottom:44px}
.hw-steps{display:flex;align-items:flex-start;justify-content:center;gap:0;max-width:620px;margin:0 auto}
.hw-step{flex:1;text-align:center;padding:0 14px}
.hw-step__icon{width:34px;height:34px;stroke:#2b2b2b;stroke-width:1.3;margin:0 auto 20px;display:block}
.hw-step__head{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:10px}
.hw-step__no{font-family:var(--latin);font-size:22px;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.hw-step__title{font-size:22px;font-weight:700}
.hw-step__desc{font-size:13px;color:#4a4a4a;line-height:1.9}

/* ---- SECTION 04: experience ---- */
.experience{position:relative;overflow:hidden}
.experience::before{
  content:"";position:absolute;right:-10%;bottom:-10%;width:560px;height:560px;
  background:url("../images/blob.png") no-repeat center/contain;
  mix-blend-mode:multiply;filter:blur(46px);opacity:.5;z-index:0;pointer-events:none;
}
.experience .sec-head,.experience .exp-grid,.experience .exp-note{position:relative;z-index:1}
.experience .sec-head{margin-bottom:44px}
.exp-card__img{
  aspect-ratio:16/10;border-radius:4px;margin-bottom:14px;position:relative;
  background:linear-gradient(120deg,#dfe6f2,#efe2ef 40%,#f6efe0 70%,#e2eff0);
}
.exp-card__img::after{
  content:"";position:absolute;inset:0;
  background:url("../images/logo-mu.png") no-repeat center/70px;opacity:.5;
}
.exp-card__pt{
  display:inline-block;background:var(--btn);color:#fff;font-size:11px;
  padding:4px 14px;border-radius:20px;margin-bottom:12px;letter-spacing:.03em;
}
.exp-card__title{font-size:15px;font-weight:700;margin-bottom:8px}
.exp-card__desc{font-size:12.5px;color:#6a6a6a;line-height:1.8}
.exp-note{text-align:center;font-size:11.5px;color:var(--muted);margin-top:28px}

/* ---- SECTION 05: point rule ---- */
.rule-panel{
  border:1px solid #e4e2da;border-radius:8px;padding:26px;background:#fff;
}
.rule-list{padding-top:0}
.rule-list li{font-size:12.5px;color:#4a4a4a;line-height:2.1;padding-left:1em;position:relative}
.rule-list li::before{content:"・";position:absolute;left:0}
.rule-note{margin-top:18px;font-size:11.5px;color:var(--muted);line-height:1.9}

/* ---- SECTION 06: referral / introduction ---- */
.preferral{position:relative;overflow:hidden}
.preferral::before{
  content:"";position:absolute;left:-9%;bottom:-10%;width:520px;height:520px;
  background:url("../images/blob.png") no-repeat center/contain;
  mix-blend-mode:multiply;filter:blur(44px);opacity:.52;z-index:0;pointer-events:none;
}
.preferral .sec-head,.preferral .split-inner{position:relative;z-index:1}

/* ---- SECTION 07: membership ---- */
.membership{position:relative;overflow:hidden}
.membership::before{
  content:"";position:absolute;left:50%;top:15%;width:560px;height:560px;
  transform:translateX(-50%);
  background:url("../images/blob.png") no-repeat center/contain;
  mix-blend-mode:multiply;filter:blur(48px);opacity:.5;z-index:0;pointer-events:none;
}
.membership__body{position:relative;z-index:1;text-align:center;margin-top:30px}
.membership__body p{font-size:13px;color:#4a4a4a;line-height:2.1}
.membership__body p + p{margin-top:14px}

/* rank ladder */
.rank-ladder{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:22px;margin-top:52px;flex-wrap:wrap}
.rank-tier{text-align:center}
.rank-tier__badge{
  border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  font-family:var(--latin);letter-spacing:.04em;color:#fff;
}
.rank-tier--general .rank-tier__badge{width:64px;height:64px;font-size:10px;background:#b3afa4}
.rank-tier--premium .rank-tier__badge{width:78px;height:78px;font-size:11px;background:#8a8578}
.rank-tier--diamond .rank-tier__badge{width:92px;height:92px;font-size:12px;background:#3d3936}
.rank-tier__name{font-size:13px;font-weight:700;color:var(--ink)}
.rank-arrow{color:#c4c1b8;font-size:18px;padding-bottom:30px}

/* ---- SECTION 08: ending ---- */
.points-ending{position:relative;overflow:hidden}
.points-ending::before{
  content:"";position:absolute;right:-8%;top:-12%;width:520px;height:520px;
  background:url("../images/blob.png") no-repeat center/contain;
  mix-blend-mode:multiply;filter:blur(44px);opacity:.5;z-index:0;pointer-events:none;
}
.points-ending__inner{
  position:relative;z-index:1;max-width:720px;margin:0 auto;text-align:center;
  background:#fff;border:1px solid #ececec;border-radius:12px;
  padding:64px 48px;box-shadow:0 12px 34px rgba(0,0,0,.05);
}
.points-ending__title{font-size:28px;font-weight:700;line-height:1.7}
.points-ending__body{margin-top:24px;font-size:13px;color:#4a4a4a;line-height:2.1}
.points-ending__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* ===== responsive ===== */
@media(max-width:900px){
  .split-inner{grid-template-columns:1fr}
  .split-inner.is-reverse .split__img{order:0}
}

@media(max-width:820px){
  .points-hero{padding:80px 22px 60px}
  .points-hero__title{font-size:38px;margin-top:14px}
  .points-hero__copy{font-size:17px;margin-top:24px}

  .split-inner{gap:26px;margin-top:34px}

  .hw-steps{flex-direction:column;gap:26px;max-width:none}

  .rule-panel{padding:18px 20px}

  .points-ending__inner{padding:40px 22px}
  .points-ending__title{font-size:22px}
  .points-ending__cta{flex-direction:column;align-items:stretch}
}