/* Refer & Earn (/partners/refer-and-earn/): warm, simple, one reward. Calculator, table, steps and notices come
   from partners.css; this file only adds the page's own shapes. site.css tokens only, so light/dark follow the theme. */
@layer components{
  /* ---------- hero ---------- */
  .rf-hero h1{max-width:20ch;text-wrap:balance}
  .rf-hero .crumbs{flex-wrap:wrap;row-gap:6px}
  .rf-amt{white-space:nowrap;background:linear-gradient(transparent 60%,var(--accent-soft) 60%,var(--accent-soft) 94%,transparent 94%)}
  @media (prefers-reduced-motion:no-preference){.rf-amt{background-repeat:no-repeat;background-size:0 100%;animation:hl-draw 1.1s .6s var(--ease) forwards}}
  @keyframes hl-draw{to{background-size:100% 100%}}
  .rf-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
  .rf-cta .btn{min-height:44px}
  .rf-notice{margin-top:22px;max-width:58ch}
  @media (max-width:520px){.rf-cta .btn-lg{white-space:normal;padding:.95em 1.25em;font-size:1rem}}

  /* ---------- trust row ---------- */
  .rf-trust-sec{padding-block:clamp(8px,1.5vw,16px) 0}
  .rf-trust{justify-content:center}
  .rf-trust .chip{min-height:44px;padding-inline:1.05em;font-size:.9rem;background:var(--surface);color:var(--ink)}
  .rf-trust .pt-tick,.rf-tips .pt-tick{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--accent);color:var(--on-accent);flex:none}
  @media (max-width:520px){.rf-trust{justify-content:flex-start}.rf-trust .chip{white-space:normal}}

  /* ---------- earnings: static table beside the calculator ---------- */
  .rf-earn-sec{background:var(--bg-sunk);border-block:1px solid var(--line)}
  .rf-earn{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,2.4vw,32px);align-items:start}
  @media (max-width:900px){.rf-earn{grid-template-columns:minmax(0,1fr)}}
  .rf-table-card{display:grid;gap:18px}
  .rf-table-card .earn-table tbody tr:last-child td{border-bottom:0}
  .rf-calc-col{display:grid;gap:14px}
  .rf-gross-note{padding:14px 16px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--surface);font-size:.9rem;color:var(--ink-2)}
  .rf-gross-note b{color:var(--ink)}

  /* ---------- sharing ---------- */
  .rf-share-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
  @media (max-width:900px){.rf-share-grid{grid-template-columns:minmax(0,1fr)}}
  .rf-share-grid h2{margin-top:18px}
  .rf-share-grid .lede{margin-top:16px}
  .rf-tips{display:grid;gap:12px;margin-block:26px}
  .rf-tips li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;color:var(--ink-2)}
  .rf-tips .pt-tick{margin-top:2px}
  .rf-share{display:grid;gap:16px}
  .rf-share .kicker{margin:0}
  .rf-msg{margin:0;padding:18px 20px;border-radius:var(--r-l) var(--r-l) var(--r-l) 6px;background:var(--accent-soft);color:var(--ink);line-height:1.6;overflow-wrap:anywhere}
  .rf-share-btns{display:flex;flex-wrap:wrap;gap:10px}
  .rf-share-btns .btn{min-height:44px}
  .rf-share-status{min-height:1.4em;font-size:.88rem;color:var(--accent-text);overflow-wrap:anywhere}
  .rf-share-status:empty{min-height:0}
  .rf-privacy{font-size:.84rem}
  .rf-share-grid .notice p{overflow-wrap:anywhere}

  /* ---------- product evidence ---------- */
  .rf-proof{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
  @media (max-width:900px){.rf-proof{grid-template-columns:minmax(0,1fr)}.rf-proof-media{max-width:460px}}
  .rf-proof-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .rf-proof-media img{width:100%;height:auto;border-radius:var(--r-m);box-shadow:var(--shadow-post);background:var(--surface-2)}
  .rf-proof-media img:nth-of-type(2){margin-top:24%}
  .rf-proof-media figcaption{grid-column:1/-1;margin-top:10px;font-size:.84rem;color:var(--muted)}
  .rf-proof h2{margin-top:18px}
  .rf-proof .lede{margin-top:16px}
  .rf-facts{margin-top:26px}
  .rf-facts>div{padding-top:12px;border-top:1px solid var(--line)}

  /* ---------- FAQ, band, terms ---------- */
  .rf-faq{max-width:54rem}
  .rf-faq .faq summary{min-height:44px}
  .rf-band h2{max-width:20ch}
  .rf-terms{margin-top:20px;font-size:.92rem}
}