:root {
  --ink:#232333;
  --muted:#74737e;
  --paper:#fffaf1;
  --white:#fff;
  --yellow:#fdc033;
  --orange:#fd8734;
  --pink:#f24c97;
  --purple:#7647cf;
  --blue:#1a9ada;
  --teal:#29b89f;
  --green:#63b45a;
  --line:#e9e4dc;
  --shadow:0 24px 70px #23233312
}

/* Affiliate content uses the home page's typography and component proportions. */
html { height:auto; scroll-padding-top:105px; }
body { height:auto; min-height:100dvh; overflow:visible; display:block; background:var(--paper); color:var(--ink); font:16px/1.75 'DM Sans',sans-serif; }
main { min-height:0; }
.site-header { position:sticky; inset:auto; top:0; z-index:30; }
.site-header .brand { position:static; width:auto; height:auto; overflow:visible; }
.site-header .brand img { position:static; left:auto; top:auto; width:300px; max-width:100%; height:auto; max-height:130px; object-fit:contain; transform:none; }
main h1, main h2, main h3 { font-family:Manrope,sans-serif; font-weight:700; line-height:1.13; letter-spacing:-.055em; color:var(--ink); }
main h1 { font-size:clamp(44px,4.9vw,72px); }
main h2[id] { font-size:clamp(34px,3.8vw,52px); margin-bottom:24px; }
main h3 { font-size:25px; }
main p { font-weight:400; }
.hero-description,.why-description,.support-description,.closing-description { color:var(--muted); font-size:18px; line-height:1.75; }
.how-subtitle,.join-intro,.promote-copy>p,.affiliate-faq-heading p { color:var(--muted); font-size:17px; line-height:1.75; }
.hero-eyebrow { color:var(--purple); font-size:14px; font-weight:800; letter-spacing:.19em; margin-bottom:23px; }
.joyful-word,.learning-word,.colorclouds-word,.closing-rainbow { background:linear-gradient(110deg,var(--purple),var(--pink),var(--orange)); background-clip:text; -webkit-background-clip:text; color:transparent; }
.affiliate-button,.promote-button,.closing-button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:16px 24px; border:0; border-radius:50px; background:linear-gradient(110deg,var(--purple),#9650cc,var(--pink)); color:white; font:700 14px/1.75 'DM Sans',sans-serif; box-shadow:none; transition:transform .25s,box-shadow .25s,background .25s; }
.affiliate-button span,.promote-button span,.closing-button span { font-size:18px; line-height:1; }
.affiliate-button:hover,.promote-button:hover,.closing-button:hover { background:linear-gradient(110deg,var(--purple),#9650cc,var(--pink)); transform:translateY(-3px); box-shadow:0 10px 25px #2323331a; }
.affiliate-hero { height:auto; min-height:650px; padding:68px 0 55px; background-color:var(--paper); background-size:cover; background-position:center; }
.hero-inner { width:min(1200px,calc(100% - 80px)); height:auto; min-height:527px; margin:auto; padding:0; }
.hero-inner::before { display:block; background:linear-gradient(90deg,#fff9eef2,#fff4e8d9 35%,transparent 62%); }
.hero-copy { width:49%; margin:0; padding:0; color:var(--ink); }
.hero-copy::before { display:none; }
.hero-copy h1 { font-size:clamp(44px,4.9vw,72px); margin-bottom:24px; }
.hero-description { max-width:470px; margin:0 0 28px; }
.hero-checks { margin:25px 0 0; color:var(--muted); font-size:14px; font-weight:500; }
.hero-checks li::before { background:var(--teal); }
.hero-reward { background:#fffdf9; color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); }
.hero-motto,.why-motto,.support-motto { color:var(--ink); }
.how-it-works,.join-audience,.promote-products,.affiliate-faq-section { padding:104px 0; color:var(--ink); }
.how-it-works { background:#fffdf9; }
.join-audience { background:linear-gradient(125deg,#fff5e9,#fff0f5 48%,#f2efff); }
.promote-products { background:var(--paper); }
.promote-products::before { display:none; }
.affiliate-faq-section { background:linear-gradient(120deg,#fff3ec,#fff0f5 50%,#f4efff); }
.how-container,.join-container,.promote-inner,.affiliate-faq-container,.why-inner,.support-inner { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
.how-subtitle,.join-intro { margin-bottom:36px; }
.how-steps { gap:20px; }
.how-step { padding:24px 16px; border:1px solid var(--line); border-radius:18px; background:#fffdf9; }
.how-step:not(:last-child)::after { display:none; }
.step-icon { width:72px; height:72px; margin-bottom:20px; }
.step-icon svg { width:42px; height:42px; }
.how-step h3 { font-size:20px; margin-bottom:12px; }
.how-step p,.join-card-body p,.promote-card p,.support-card p,.affiliate-faq-item p { color:var(--muted); font-size:16px; line-height:1.75; font-weight:400; }
.why-inner,.support-inner { padding:104px 0; min-height:560px; }
.why-copy,.support-copy { margin-left:0; width:60%; }
.why-benefits { margin:32px 0 0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; text-align:left; }
.why-benefits li { padding:18px; background:#fffdf9eb; border:1px solid var(--line); border-radius:18px; }
.why-icon { width:56px; height:56px; margin:0 0 14px; }
.why-benefits p { font-size:15px; line-height:1.75; color:var(--muted); }
.join-cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.join-card { background:#fffdf9; border:1px solid var(--line); border-radius:18px; box-shadow:none; transition:transform .3s,box-shadow .3s; }
.join-photo { height:220px; }
.join-card-body { padding:25px; background:#fffdf9; border-radius:0; margin-top:0; min-height:210px; }
.join-card h3 { font-size:22px; line-height:1.25; margin-bottom:16px; color:var(--ink); }
.join-card:hover,.support-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.promote-inner { grid-template-columns:1fr; gap:40px; }
.promote-copy { max-width:600px; }
.promote-cards { gap:20px; }
.promote-card { background:#fffdf9; border:1px solid var(--line); border-radius:18px; padding:20px 16px; }
.promote-card h3 { font-size:20px; color:var(--ink); }
.support-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:32px; }
.support-card { padding:24px; border:1px solid var(--line); border-radius:18px; background:#fffdf9ef; text-align:left; transition:transform .3s,box-shadow .3s; }
.support-icon { width:56px; height:56px; margin:0 0 16px; }
.support-card h3 { font-size:22px; line-height:1.25; }
.affiliate-faq-heading { margin-bottom:32px; }
.faq-expand-button { color:var(--purple); font:600 15px/1.75 'DM Sans',sans-serif; }
.affiliate-faq-columns { gap:24px; }
.affiliate-faq-column { gap:12px; }
.affiliate-faq-item { border:1px solid #e8deea; border-radius:14px; background:#ffffffc9; box-shadow:0 6px 20px #5448640a; }
.affiliate-faq-item summary { padding:18px 22px; font-size:17px; line-height:1.75; color:#2e4058; }
.affiliate-faq-item[open] { background:#fffdfa; border-color:#d9bedf; }
.affiliate-faq-item[open] summary { color:#9b3e74; }
.affiliate-faq-item p { padding:0 22px 22px; }
.affiliate-closing { padding:104px 0; background:var(--paper); color:var(--ink); }
.closing-panel { width:min(1200px,calc(100% - 80px)); border-radius:28px; border:1px solid var(--line); }
.closing-copy { margin-left:0; padding:48px; width:65%; }
.closing-terms { color:var(--muted); font-size:14px; line-height:1.75; }
@media(max-width:1050px) {
 .hero-inner,.how-container,.join-container,.promote-inner,.affiliate-faq-container,.why-inner,.support-inner,.closing-panel { width:calc(100% - 48px); }
 .how-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .how-step:last-child { grid-column:auto; width:auto; }
 .why-copy,.support-copy { width:65%; }
 .join-card h3,.support-card h3 { font-size:20px; }
 .promote-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:800px) {
 .how-it-works,.join-audience,.promote-products,.affiliate-faq-section,.affiliate-closing { padding:64px 0; }
 main h2[id] { font-size:clamp(34px,6vw,44px); }
 .hero-copy h1 { font-size:52px; }
 .hero-copy { width:60%; }
 .hero-break,.why-break,.support-break,.closing-break,.promote-break,.join-break { display:none; }
 .join-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .why-inner,.support-inner { padding:64px 0; }
 .why-copy,.support-copy { width:70%; }
 .why-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .affiliate-faq-columns { grid-template-columns:1fr; gap:12px; }
 .closing-copy { padding:32px; width:75%; }
}
@media(max-width:600px) {
 .affiliate-hero { min-height:0; padding:45px 0 0; background-size:auto 420px; background-position:right bottom; }
 .hero-inner { min-height:0; padding-bottom:360px; }
 .hero-inner::before { background:linear-gradient(180deg,#fffaf1 0%,#fffaf1 52%,transparent 85%); }
 .hero-copy { width:100%; padding:0; }
 .hero-copy h1 { font-size:clamp(40px,10vw,52px); }
 .hero-description,.why-description,.support-description,.closing-description { font-size:17px; }
 .hero-eyebrow { font-size:12px; }
 .hero-checks { font-size:14px; }
 .hero-motto,.hero-reward,.hero-book-labels,.why-motto,.support-motto,.closing-board { display:none; }
 .how-steps,.join-cards,.promote-cards { grid-template-columns:1fr; }
 .how-step:last-child,.join-card:last-child,.promote-card:last-child { grid-column:auto; width:auto; justify-self:stretch; }
 .join-photo { height:240px; }
 .join-card-body { min-height:0; }
 .why-inner,.support-inner { padding:64px 0 330px; }
 .why-copy,.support-copy { width:100%; margin:0; }
 .why-benefits,.support-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .why-benefits li,.support-card { padding:16px; }
 .why-benefits p { font-size:14px; }
 .support-card h3 { font-size:18px; }
 .support-card p { font-size:14px; }
 .affiliate-faq-heading { align-items:flex-start; flex-direction:column; }
 .affiliate-faq-item summary { font-size:16px; }
 .promote-copy { text-align:left; }
 .product-illustration { max-width:160px; }
 .closing-copy { width:100%; padding:28px 24px 320px; }
 .closing-panel { background-size:auto 300px; background-position:right bottom; }
 .closing-copy h2 { font-size:34px; }
}
@media(prefers-reduced-motion:reduce) { .join-card,.support-card,.affiliate-button,.promote-button,.closing-button { transition:none; } }

/* Labels follow the book spines in the hero artwork. */
.affiliate-hero > .hero-book-labels { inset:0; width:auto; height:auto; display:block; transform:none; pointer-events:none; z-index:2; }
.hero-book-labels span { position:absolute; display:block; transform:translate(-50%,-50%) rotate(3deg); text-align:center; line-height:1; font-weight:700; color:#fff; text-shadow:0 1px 3px #23233366; }
@media(max-width:760px) { .affiliate-hero > .hero-book-labels { display:none; } }

/* Center every word inside the illustrated board's writing surface. */
.closing-panel { container-type:inline-size; }
.closing-panel .closing-board { inset:0; width:auto; height:auto; display:block; transform:none; pointer-events:none; font-size:clamp(10px,1.5cqw,20px); line-height:1; }
.closing-board span { position:absolute; width:8%; text-align:center; transform:translate(-50%,-50%) rotate(-1deg); }
.closing-board span:nth-child(1) { left:93.6%; top:44%; }
.closing-board span:nth-child(2) { left:93.2%; top:50.6%; }
.closing-board span:nth-child(3) { left:92.8%; top:57.2%; }
.closing-board span:nth-child(4) { left:92.4%; top:63.8%; }
.closing-board span:nth-child(5) { left:92%; top:70.4%; }
@media(max-width:600px) { .closing-panel .closing-board { display:none; } }

/* Keep the shared footer logo clear of affiliate header artwork positioning. */
.footer-brand .brand { position:static; width:auto; height:auto; overflow:visible; }
.footer-brand .brand img { position:static; left:auto; top:auto; width:150px; height:auto; max-height:130px; object-fit:contain; transform:none; }
