/* Campus Partners page: hero extras, the campus illustration, benefit tiles, scenario cards, the product demo,
   share scripts and eligibility lists. Shared calculator, table, notice and steps styles live in partners.css. */
@layer components{
  /* ---------- hero ---------- */
  .cp-rate{margin-top:22px;max-width:30ch;font:700 clamp(1.25rem,1rem + 1.1vw,1.85rem)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink);
    text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.18em;text-underline-offset:.2em;text-decoration-skip-ink:none}
  .cp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
  .cp-trust{list-style:none;padding:0;margin-top:22px}
  .cp-trust .chip{min-height:36px}
  .cp-notice{margin-top:22px;max-width:60ch}
  .cp-link{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
  .cp-link:hover{color:var(--ink)}
  .cp-small{margin-top:18px;font-size:.92rem}
  .cp-sub{margin-top:clamp(40px,6vw,72px)}

  /* ---------- campus illustration (inline SVG, colours from tokens) ---------- */
  .cp-art-card{display:grid;gap:14px;align-content:center;margin:0}
  .cp-art-card figcaption{font-size:.86rem}
  .cp-art{display:block;width:100%;height:auto}
  .cp-a-bg{fill:var(--surface-2)}
  .cp-a-glow{fill:var(--accent-soft)}
  .cp-a-ground{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-linecap:round}
  .cp-a-shadow{fill:var(--line)}
  .cp-a-wall{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5}
  .cp-a-col,.cp-a-day,.cp-a-door{fill:var(--surface-3)}
  .cp-a-roof,.cp-a-phone,.cp-a-sign,.cp-a-tagbg{fill:var(--ink)}
  .cp-a-pole{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
  .cp-a-acc,.cp-a-awning{fill:var(--accent)}
  .cp-a-stripe{fill:color-mix(in oklab,var(--surface) 82%,var(--accent))}
  .cp-a-screen{fill:var(--surface)}
  .cp-a-win{stroke:var(--line-strong);stroke-width:1.5}
  .cp-a-tile{fill:var(--accent-soft)}
  .cp-a-ink2{fill:var(--ink-2)}
  .cp-a-line{fill:var(--line-strong)}
  .cp-a-good{fill:var(--good)}
  .cp-a-check{fill:none;stroke:var(--surface);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .cp-a-path{fill:none;stroke:var(--accent-text);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 9}
  .cp-a-flow{animation:cp-flow 2.4s linear infinite}
  .cp-art text{font-family:var(--f-mono)}
  .cp-a-label{fill:var(--ink-2);font-size:15px;font-weight:600}
  .cp-a-small{fill:var(--muted);font-size:12.5px}
  .cp-a-on-acc{fill:var(--on-accent);font-size:10px;font-weight:700}
  .cp-a-signtxt{fill:var(--bg);font-size:11px;font-weight:700;letter-spacing:.14em}
  .cp-a-tagtxt{fill:var(--bg);font-family:var(--f-display);font-size:20px;font-weight:800}
  @keyframes cp-flow{to{stroke-dashoffset:-40}}

  /* ---------- the role ---------- */
  .cp-does,.cp-say{list-style:none;padding:0;margin-top:8px;display:grid;gap:14px;counter-reset:cp}
  .cp-does li,.cp-say li{counter-increment:cp;position:relative;padding-left:44px;color:var(--ink-2)}
  .cp-does li::before,.cp-say li::before{content:counter(cp);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
    background:var(--accent-soft);color:var(--accent-text);font:700 .82rem/1 var(--f-mono)}
  .cp-does b{color:var(--ink)}
  .cp-say li{font:500 1.05rem/1.5 var(--f-text);color:var(--ink)}

  /* ---------- benefits ---------- */
  .cp-ico{width:44px;height:44px;padding:10px;margin-bottom:18px;border-radius:14px;background:var(--accent-soft);color:var(--accent-text)}

  /* ---------- table and calculator column ---------- */
  .cp-what-if{margin-top:16px;padding:10px 14px;border-radius:var(--r-s);background:var(--accent-soft);font:600 .95rem/1.4 var(--f-text);color:var(--ink)}
  .card .earn-disclosure{margin-top:14px}
  .cp-calc-col{display:grid;gap:14px;align-content:start}
  .cp-calc-col .calc-presets .chip,.cp-calc-col [data-calc-copy],.join-bar .btn{min-height:44px}

  /* ---------- scenarios ---------- */
  .cp-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin-bottom:22px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface)}
  .cp-seg[hidden]{display:none}
  .cp-seg button{min-height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:.94rem;color:var(--ink-2);transition:background .2s,color .2s}
  .cp-seg button:hover{color:var(--ink)}
  .cp-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
  .cp-scens{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:clamp(12px,1.4vw,20px)}
  .cp-scen h3{font-size:1.05rem;letter-spacing:-.01em}
  .cp-scen-amt{margin-top:14px;font:800 clamp(2rem,1.6rem + 1.4vw,2.7rem)/1 var(--f-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
  .card .cp-scen-unit{margin-top:6px;font-size:.84rem;color:var(--muted)}
  .card .cp-scen-detail{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font:500 .84rem/1.45 var(--f-mono);overflow-wrap:anywhere}
  .cp-month-note{margin-top:18px;border-color:var(--warn)}
  .cp-month-note[hidden]{display:none}
  [data-scenarios]>.earn-disclosure{margin-top:18px}

  /* ---------- product demo ---------- */
  .cp-facts{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
  .cp-demo{display:grid;gap:16px;align-content:start}
  .cp-demo .kicker{margin-bottom:0}
  .cp-mosaic{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .cp-mosaic i{aspect-ratio:4/5;border-radius:6px;background:var(--surface-3)}
  .cp-mosaic i.on{background:linear-gradient(160deg,var(--accent),color-mix(in oklab,var(--accent) 45%,var(--surface-3)))}
  .cp-forms{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
  .cp-forms li{padding:.4em .8em;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font:600 .78rem/1.2 var(--f-mono);color:var(--ink-2)}
  .cp-forms li[lang="hi"]{font-family:var(--f-hi);font-size:.86rem}
  .cp-demo .cp-ctas{margin-top:4px}

  /* ---------- training and scripts ---------- */
  .cp-course{margin-top:8px}
  .cp-scripts{margin-top:22px}
  .cp-script{display:grid;gap:10px;padding:16px 18px;border-radius:22px 22px 22px 6px;background:var(--surface-2);border:1px solid var(--line);font-size:.96rem;line-height:1.6;overflow-wrap:anywhere}
  .card .cp-script p{color:var(--ink)}
  .cp-script[lang="hi"]{font-family:var(--f-hi);font-size:1.04rem;line-height:1.75}
  .cp-ph{font-family:var(--f-mono);font-size:.88em;padding:.05em .35em;border-radius:5px;background:var(--accent-soft);color:var(--ink)}
  .cp-copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
  .cp-copy{min-height:44px}
  .cp-copy[hidden]{display:none}
  .cp-copied{font-size:.86rem;color:var(--accent-text)}

  /* ---------- do / don't lists ---------- */
  .cp-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px 32px}
  .cp-list{list-style:none;padding:0;display:grid;gap:12px}
  .cp-list li{position:relative;padding-left:32px;color:var(--ink-2)}
  .cp-list b{color:var(--ink)}
  .cp-list li::before{position:absolute;left:0;top:.05em;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 .8rem/1 var(--f-mono)}
  .cp-yes li::before{content:"\2713";background:var(--accent-soft);color:var(--accent-text)}
  .cp-no li::before{content:"\2715";background:var(--surface-3);color:var(--ink-2)}
  .cp-club{margin-top:clamp(16px,2vw,24px)}

  /* ---------- lifecycle ---------- */
  .cp-terms{margin-top:clamp(24px,3vw,36px)}

  @media (max-width:520px){
    .cp-ctas .btn{flex:1 1 100%;white-space:normal;text-align:center}
    .cp-seg{display:flex}
    .cp-seg button{flex:1 1 auto}
    .cp-mosaic{gap:4px}
  }
  @media (prefers-reduced-motion:reduce){
    .cp-a-flow{animation:none}
    .cp-seg button{transition:none}
  }
  @media print{
    .cp-seg,.cp-copy-row,.cp-art-card{display:none!important}
  }
}