/* ============================================================
   NIWO affiliate program page (English and Chinese).
   Same visual language as the case studies: tokens and type from
   app.css, shell from blog.css, tiles, numbered sections and the
   closing panel from case.css. Only what is specific to this page
   lives here. The yellow accent comes from .cs-page in case.css.
   ============================================================ */

.cs-hero .cap .lede{ font-size:16.5px; line-height:1.55; color:var(--muted); margin:12px 0 0; max-width:54ch; }
.cs-hero img{ object-position:center 62%; }
.cs-hero .cap .cs-kick{ color:#fff; text-shadow:0 1px 8px rgba(8,9,26,.9); }
.cs-hero .cap .cs-h1, .cs-hero .cap .lede{ text-shadow:0 2px 14px rgba(8,9,26,.75); }
.cs-hero .cap .lede{ color:#e6e8ec; }
.aff-hero-cta{ display:flex; gap:10px; flex-wrap:wrap; flex:none; }

/* Below a desktop width the picture and the words stop sharing a rectangle: the
   image sits on top at its natural shape and the caption reads on a plain panel.
   Text laid over a short image would spill out of it. */
@media (max-width:900px){
  .cs-hero{ aspect-ratio:auto; min-height:0; background:var(--panel); display:flex; flex-direction:column; }
  .cs-hero img{ height:auto; aspect-ratio:16/9; object-position:center; }
  .cs-hero::after{ display:none; }
  .cs-hero .cap{ position:static; left:auto; right:auto; bottom:auto; padding:24px 24px 26px; }
  .cs-hero .cap .cs-kick, .cs-hero .cap .cs-h1, .cs-hero .cap .lede{ text-shadow:none; }
  .aff-hero-cta{ width:100%; }
  .aff-hero-cta .aff-btn{ flex:1 1 auto; }
}
/* the shared header hides every link but the CTA on a phone; the language switch must stay */
@media (max-width:640px){
  .bl-top nav a[hreflang]{ display:inline-flex; }
}
.aff-btn{ display:inline-flex; align-items:center; justify-content:center; padding:13px 20px; border-radius:12px;
  font-size:14.5px; font-weight:600; white-space:nowrap; transition:transform .25s var(--ease), background .2s var(--ease); }
.aff-btn:hover{ transform:translateY(-2px); }
.aff-btn.p{ background:var(--blue); color:#fff; }
.aff-btn.p:hover{ background:var(--blue-deep); }
.aff-btn.w{ background:#fff; color:#0e0f2d; }
.aff-btn.y{ background:var(--cs-accent); color:var(--cs-accent-ink); }

/* the wide tile reads as one line: a word, then what it means */
.cs-big .n.wide b{ font-size:clamp(36px,5vw,60px); }

/* ---------- three ways to earn ---------- */
.aff-head{ margin:56px 0 18px; }
.aff-routes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 64px; }
.aff-routes .r{ background:#161838; border-radius:20px; padding:24px 24px 24px; display:flex; flex-direction:column; }
.aff-routes .r .who{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
.aff-routes .r b{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(34px,3.6vw,46px);
  letter-spacing:-.025em; line-height:1; margin:14px 0 6px; color:var(--text); }
.aff-routes .r.hi b{ color:var(--cs-accent); }
.aff-routes .r h3{ font-size:16.5px; line-height:1.3; margin:0 0 10px; color:var(--text); }
.aff-routes .r p{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:0 0 12px; }
.aff-routes .r p strong{ color:var(--text); font-weight:600; }
.aff-routes .r .perk{ margin:2px 0 14px; padding:12px 14px; border-radius:12px; background:rgba(242,194,48,.08);
  border:1px solid rgba(242,194,48,.28); font-size:13.5px; line-height:1.6; }
.aff-routes .r .go{ margin-top:auto; padding-top:6px; }
.aff-routes .r .aff-btn{ width:100%; }
@media (max-width:900px){ .aff-routes{ grid-template-columns:1fr; } }

/* ---------- "you introduce, NIWO does the work" ---------- */
.aff-band{ margin:0 0 64px; padding:26px 30px; border-radius:24px;
  background:radial-gradient(120% 160% at 0% 0%,#24286b 0%,#14163d 60%,#0f1033 100%);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.aff-band h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(20px,2.6vw,28px);
  line-height:1.1; margin:0; flex:1 1 280px; }
.aff-band p{ font-size:15.5px; line-height:1.65; color:var(--muted); margin:0; flex:2 1 360px; }

/* ---------- how it works ---------- */
.aff-steps{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:s; }
.aff-steps li{ counter-increment:s; display:grid; grid-template-columns:54px minmax(0,1fr); gap:16px; align-items:start;
  background:var(--panel); border-radius:20px; padding:20px 24px; font-size:15.5px; line-height:1.7; color:var(--muted); }
.aff-steps li::before{ content:counter(s); font-family:var(--font-display); font-weight:800; font-size:34px; line-height:1;
  letter-spacing:-.03em; color:var(--cs-accent); padding-top:2px; }
.aff-steps b{ color:var(--text); font-weight:600; }
.aff-steps strong{ color:var(--text); font-weight:600; }
.aff-steps code, .aff-code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px; color:var(--text);
  background:#161838; border:1px solid var(--line); border-radius:8px; padding:2px 7px; overflow-wrap:anywhere; }
@media (max-width:560px){ .aff-steps li{ grid-template-columns:1fr; gap:6px; } }

/* ---------- earnings calculator ---------- */
.cs-big.two{ grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 0 20px; }
.cs-big.two .n b{ font-size:clamp(34px,4.6vw,56px); }
.cs-big.two .n span{ font-size:15px; margin-top:12px; }
@media (max-width:560px){ .cs-big.two{ grid-template-columns:1fr; } }
.aff-slider{ background:var(--panel); border-radius:20px; padding:20px 24px 18px; }
.aff-slider input[type=range]{ width:100%; margin:4px 0 6px; accent-color:var(--cs-accent); height:28px; cursor:pointer; }
.aff-slider .ends{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted-2); }
.aff-slider .lbl{ font-size:13.5px; color:var(--muted); margin:0 0 6px; }

/* ---------- the rules ---------- */
.aff-rules{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.aff-rules .i{ border-radius:20px; padding:22px 24px; background:#161838; }
.aff-rules .i.wide{ grid-column:1 / -1; }
.aff-rules .i h4{ font-family:var(--font-body); font-weight:700; text-transform:none; letter-spacing:0; font-size:15.5px; line-height:1.45; margin:0 0 8px; color:var(--text); }
.aff-rules .i p{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:0; }
@media (max-width:760px){ .aff-rules{ grid-template-columns:1fr; } }

/* ---------- apply ---------- */
.aff-form{ background:var(--panel); border-radius:24px; padding:30px 30px 28px; margin-top:20px; }
.aff-form .fields{ display:flex; flex-direction:column; gap:16px; margin:0; }
.aff-form .fld-c label{ display:block; font-family:var(--font-body); font-size:12.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); margin-bottom:7px; }
.aff-form .fld-c input, .aff-form .fld-c textarea{ width:100%; font-size:15px; padding:13px 14px; }
.aff-form .fld-c textarea{ min-height:96px; resize:vertical; }
.aff-form .req-note{ font-size:13px; color:var(--muted-2); margin:14px 0 0; }
.aff-form .btn{ margin-top:6px; align-self:flex-start; }
.aff-code-block{ display:block; margin:14px 0 0; padding:14px 16px; background:#161838; border:1px solid var(--line);
  border-radius:14px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px; line-height:1.6; color:var(--text);
  overflow:auto; white-space:pre-wrap; word-break:break-all; }
.ok-box{ display:none; background:#161838; border-left:3px solid var(--green); border-radius:0 16px 16px 0;
  padding:18px 22px; margin:0; font-size:15px; color:var(--text); line-height:1.6; }
.aff-small{ font-size:13.5px; color:var(--muted-2); margin:18px 0 0; }
.aff-small a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  .aff-form{ padding:22px 18px; }
  .aff-band{ padding:22px 20px; }
}

/* the bot trap: present for a script, invisible and unreachable for a person */
.aff-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.ok-box strong{ color:var(--text); }
.aff-link{ background:none; border:0; padding:0; margin:12px 0 0; font:inherit; font-size:14px; color:var(--text);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.aff-link:disabled{ opacity:.55; cursor:default; }
.aff-resent{ display:block; margin-top:8px; font-size:13.5px; color:var(--muted-2); }