/* Affiliate landing. The hero is the invitation itself: a Japanese
   postcard (hagaki) with the red postal code boxes, a Kuro stamp under a
   postmark, the invite link and the promo code signed with a hanko. The rest
   is typographic: the commission as a sum over the tier slider, kanji
   numerals for the steps, the next payout month drawn as a calendar, and an
   open question list. No icon tiles. Colors follow the light/dark tokens. */
.aff-page{--aff-red:oklch(57% .2 28);--aff-card:color-mix(in oklch,oklch(99.5% .002 265),oklch(93% .006 265) var(--dark-mix));--aff-card-ink:oklch(27% .02 265);display:grid;gap:20px}
.aff-page *{min-width:0}
.aff-page h2{margin:0;font-size:18px;font-weight:500;line-height:1.35}
.aff-page a{text-decoration:none}
.aff-page :is(a,button,input):focus-visible{outline:3px solid var(--color-accent);outline-offset:4px}
.aff-page section[id]{scroll-margin-top:calc(var(--sticky-top,88px) + 12px)}
.aff-panel{padding:26px;border-radius:var(--radius-surface);background:var(--color-surface)}
.aff-panel>h2{margin-bottom:22px}
.aff-page .aff-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 22px;border-radius:12px;background:var(--color-accent-solid);color:var(--color-on-dark);font-size:14px;font-weight:600;transition:background .15s}
.aff-page .aff-button:hover{background:color-mix(in oklch,var(--color-accent-solid) 85%,black)}
.aff-link{display:inline-flex;align-items:center;min-height:44px;color:var(--color-accent);font-size:14px;font-weight:500;text-underline-offset:4px}
.aff-link:hover{text-decoration:underline}

/* Hero */
.aff-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-radius:var(--radius-surface);background:var(--color-surface);overflow:hidden}
.aff-hero-copy{align-self:center;padding:44px 40px 44px 44px}
.aff-hero h1{max-width:13em;margin:0 0 18px;font-size:clamp(30px,3.4vw,48px);font-weight:700;line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
.aff-hero-copy>p:first-of-type{max-width:50ch;margin:0;color:var(--color-muted);font-size:15px;line-height:1.7}
.aff-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:26px}

/* The postcard on its desk */
.aff-desk{display:grid;place-items:center;padding:40px 24px;background:var(--color-paper-2)}
.aff-card{position:relative;display:grid;grid-template-rows:auto 1fr auto;width:min(100%,420px);aspect-ratio:148/100;margin:0;padding:16px 18px 14px;border-radius:6px;background:var(--aff-card);color:var(--aff-card-ink);box-shadow:0 1px 1px oklch(20% .02 265/.08),0 18px 40px -14px oklch(30% .06 274/.35);transform:rotate(-3deg)}
.aff-card-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.aff-stamp{display:grid;width:58px;padding:4px;border:1px solid oklch(80% .02 265);background:oklch(95% .03 274)}
.aff-stamp img{display:block;width:100%;height:auto;aspect-ratio:1}
.aff-postmark{position:absolute;top:22px;left:40px;width:100px;height:50px;fill:none;stroke:oklch(42% .08 274/.55);stroke-width:1.4;pointer-events:none}
.aff-postmark text{fill:oklch(42% .08 274/.65);stroke:none;font:600 7px var(--font-body);text-anchor:middle;letter-spacing:.1em}
.aff-postmark .aff-wave{stroke-width:1.2}
.aff-zip{display:flex;gap:3px;margin:2px 0 0;padding:0;list-style:none}
.aff-zip li{width:14px;height:19px;border:1.5px solid var(--aff-red)}
.aff-zip li.is-gap{margin-left:5px}
.aff-zip li:nth-child(-n+3){border-width:2px}
.aff-card-body{display:grid;align-content:center;gap:2px;padding:6px 0 0 34%}
.aff-card-body>span{color:oklch(45% .03 265);font-size:11px}
.aff-card-name,.aff-card-url{margin:0;padding:2px 0 5px;border-bottom:1px dashed oklch(80% .02 265)}
.aff-card-name{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.aff-card-url{padding-top:6px;color:oklch(40% .03 265);font-size:11px;letter-spacing:.02em;overflow-wrap:anywhere}
.aff-card-from{display:flex;align-items:center;gap:14px;padding-top:10px;font-size:11px}
.aff-card-sender{color:oklch(40% .03 265);font-weight:500}
.aff-card-code{display:flex;align-items:baseline;gap:6px;margin-left:auto;color:oklch(45% .03 265)}
.aff-card-code strong{color:var(--aff-card-ink);font-size:14px;font-weight:700;letter-spacing:.14em}
.aff-seal{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--aff-red);border-radius:50%;color:var(--aff-red);font-size:8.5px;font-weight:800;letter-spacing:.12em;opacity:.88;transform:rotate(-12deg)}

/* Calculator: sales × rate = commission */
.aff-sum{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 22px;margin-bottom:26px}
.aff-sum>div{display:grid;gap:6px}
.aff-sum output{font-size:clamp(28px,3vw,40px);font-weight:600;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.aff-sum span{color:var(--color-muted);font-size:13px}
.aff-sum .is-total output{color:var(--color-accent);font-weight:700}
.aff-op{padding-top:2px;color:var(--color-muted);font-size:clamp(24px,2.4vw,32px)!important;font-weight:300;line-height:1.1}
.aff-slider-label{display:block;margin-bottom:6px;color:var(--color-muted);font-size:13px}
.aff-calc .aff-slider[type=range]{appearance:none;display:block;width:100%;min-height:0;height:32px;margin:0;padding:0;border:0;border-radius:0;background:none;cursor:pointer}
.aff-slider::-webkit-slider-runnable-track{height:6px;border-radius:20px;background:linear-gradient(var(--color-accent),var(--color-accent)) 0/var(--fill,46.67%) 100% no-repeat,var(--color-paper-3)}
.aff-slider::-webkit-slider-thumb{appearance:none;width:24px;height:24px;margin-top:-9px;border:4px solid var(--color-surface);border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.aff-slider::-moz-range-track{height:6px;border-radius:20px;background:var(--color-paper-3)}
.aff-slider::-moz-range-progress{height:6px;border-radius:20px;background:var(--color-accent)}
.aff-slider::-moz-range-thumb{width:16px;height:16px;border:4px solid var(--color-surface);border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.aff-ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 0 0;padding:0;list-style:none}
.aff-tier button{appearance:none;display:grid;gap:2px;width:100%;height:100%;padding:12px 12px 4px 0;text-align:left;border:0;border-top:2px solid var(--color-paper-3);border-radius:0;background:none;color:var(--color-muted);font:inherit;cursor:pointer;transition:border-color .15s,color .15s}
.aff-tier+.aff-tier button{padding-left:12px}
.aff-tier button:hover{color:var(--color-ink)}
.aff-tier.is-active button{border-top-color:var(--color-accent);color:var(--color-accent)}
.aff-tier strong{font-size:18px;font-weight:600}
.aff-tier button>span{font-size:12px;line-height:1.5}
.aff-calc-note{max-width:70ch;margin:18px 0 0;color:var(--color-muted);font-size:12px;line-height:1.6}

/* Steps */
.aff-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.aff-steps li{padding:0 28px}
.aff-steps li:first-child{padding-left:0}
.aff-steps li:last-child{padding-right:0}
.aff-steps li+li{border-left:1px solid var(--color-rule)}
.aff-numeral{display:block;color:var(--color-accent);font-size:36px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.aff-steps h3{margin:18px 0 6px;font-size:16px;font-weight:500}
.aff-steps p{margin:0;color:var(--color-muted);font-size:14px;line-height:1.65}

/* Payouts */
.aff-payout-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px 48px;align-items:start}
.aff-cal{margin:0}
.aff-cal figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.aff-cal figcaption span{color:var(--color-muted);font-size:13px}
.aff-cal figcaption strong{font-size:15px;font-weight:600}
.aff-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:4px;font-size:13px;font-variant-numeric:tabular-nums;text-align:center}
.aff-cal-grid span{display:grid;place-items:center;height:34px;color:var(--color-ink)}
.aff-cal-grid .aff-cal-head{height:26px;color:var(--color-muted);font-size:11px}
.aff-cal-grid .is-pay{background:var(--color-accent-soft);color:var(--color-accent);font-weight:600}
.aff-cal-grid .is-l{border-radius:10px 0 0 10px}
.aff-cal-grid .is-r{border-radius:0 10px 10px 0}
.aff-cal-grid .is-l.is-r{border-radius:10px}
.aff-cal>p{margin:12px 0 0;color:var(--color-muted);font-size:13px;line-height:1.6}
.aff-facts{margin:0}
.aff-facts>div{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:4px 24px;padding:14px 0;border-top:1px solid var(--color-rule)}
.aff-facts>div:first-child{border-top:0;padding-top:4px}
.aff-facts dt{font-size:14px;font-weight:500}
.aff-facts dd{margin:0;color:var(--color-muted);font-size:14px;line-height:1.6}

/* Questions, all open */
.aff-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 48px;margin:0}
.aff-faq dt{font-size:15px;font-weight:500;line-height:1.45}
.aff-faq dd{margin:6px 0 0;color:var(--color-muted);font-size:14px;line-height:1.65}
.aff-faq-help{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--color-rule);color:var(--color-muted);font-size:14px}

/* Join */
.aff-join{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:24px 40px}
.aff-join-art{display:block;width:100%;max-width:420px;height:auto;justify-self:center}
.aff-join-copy>p{max-width:52ch;margin:10px 0 0;color:var(--color-muted);font-size:15px;line-height:1.65}
.aff-join-list{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.aff-join-list li{display:flex;gap:6px;font-size:14px;line-height:1.55}
.aff-join-list li::before{content:"";flex:none;width:6px;height:6px;margin:8px 6px 0 0;border-radius:50%;background:var(--aff-red)}
.aff-join-action{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:24px}

@media(max-width:1100px){.aff-hero-copy{padding:32px 24px 32px 32px}.aff-steps li{padding:0 20px}.aff-payout-grid{grid-template-columns:1fr}.aff-cal{max-width:360px}}
@media(max-width:860px){.aff-hero{grid-template-columns:1fr}.aff-hero-copy{padding:28px 24px}.aff-desk{padding:32px 16px 40px}.aff-steps{grid-template-columns:1fr;gap:22px}.aff-steps li,.aff-steps li:first-child,.aff-steps li:last-child{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;padding:0}.aff-steps li+li,.aff-steps li:last-child{border-left:0;padding-top:22px;border-top:1px solid var(--color-rule)}.aff-numeral{grid-row:span 2;font-size:28px}.aff-steps h3{margin:0 0 4px}.aff-faq{grid-template-columns:1fr;gap:20px}.aff-join{grid-template-columns:1fr}.aff-join-art{max-width:300px}}
@media(max-width:40rem){.aff-panel{padding:18px}.aff-hero-copy{padding:24px 18px}.aff-hero h1{font-size:30px}.aff-hero-copy>p:first-of-type{font-size:14px}.aff-sum{gap:4px 12px}.aff-sum>div.is-total{flex-basis:100%;padding-top:10px;border-top:1px solid var(--color-rule)}.aff-sum>.aff-op:nth-of-type(2){display:none}.aff-tier button,.aff-tier+.aff-tier button{padding:10px 6px 2px 0}.aff-tier strong{font-size:16px}.aff-tier button>span{font-size:11px}.aff-facts>div{grid-template-columns:1fr}.aff-card{width:min(100%,320px);padding:12px 14px 10px}.aff-card-name{font-size:17px}.aff-stamp{width:48px}.aff-postmark{left:32px;top:18px;width:86px}.aff-zip li{width:11px;height:16px}.aff-card-body{padding-left:28%}}
@media(prefers-reduced-motion:reduce){.aff-page :is(a,button){transition:none}}