/* ============ Partner Dashboard — HI-FI UI (glassmorphism) ============ */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink:#101620;
  --ink-2:#39424f;
  --ink-3:#67717f;
  --ink-4:#97a1af;
  --surface:#ffffff;
  --canvas:#edf0f3;
  --canvas-2:#e2e7ec;
  --line:#e4e8ed;
  --line-2:#d1d8df;
  --primary:#613984;
  --primary-d:#472963;
  --primary-l:#8a5fb0;
  --primary-soft:#ece4f5;
  --amber:#e6ad3c;
  --amber-soft:#fbf1d8;
  --good:#1d9663;
  --good-soft:#e1f3ea;
  --warn:#c47d1a;
  --warn-soft:#fbeed6;
  --bad:#c0463c;
  /* glass */
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.55);
  --glass-brd:rgba(255,255,255,.85);
  --glass-line:rgba(19,21,27,.07);
  --blur:saturate(155%) blur(20px);
  --shadow-sm:0 1px 2px rgba(30,16,40,.05),0 2px 6px rgba(30,16,40,.05);
  --shadow-md:0 8px 24px rgba(40,20,60,.09),0 2px 6px rgba(40,20,60,.05);
  --shadow-lg:0 30px 70px rgba(34,14,52,.22),0 8px 24px rgba(34,14,52,.10);
  --glow:0 8px 22px rgba(97,57,132,.32);
  --r:16px;--rs:11px;--rl:22px;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --disp:'Schibsted Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;}
/* Phone browsers "boost" text they judge too small, which re-lays-out anything
   sized from its content — the bottom tab bar grew past the viewport this way. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{margin:0;height:100%;}
body{font-family:var(--sans);background:var(--canvas);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;}
/* ambient mesh */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(820px 620px at 8% 4%,rgba(138,95,176,.20),transparent 60%),
    radial-gradient(720px 560px at 98% 8%,rgba(224,168,46,.15),transparent 55%),
    radial-gradient(900px 700px at 75% 100%,rgba(64,120,200,.13),transparent 55%),
    radial-gradient(700px 600px at 22% 92%,rgba(97,57,132,.12),transparent 55%);}
button{font-family:inherit;cursor:pointer;}
a{color:var(--primary);text-decoration:none;}
.num{font-family:var(--disp);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;}


/* ===== app shell ===== */
/* minmax(0,1fr), not 1fr: a grid item defaults to min-width:auto, so it refuses
   to shrink below its content's minimum. The Tenancies board's kanban columns
   (6 x 262px) made that minimum ~1600px, so on a 1440px window the main column
   grew to 1600 and dragged the whole page sideways — the board's own
   overflow-x:auto never got a chance to scroll. This is the fix; .main's
   min-width:0 says the same thing twice on purpose. */
.app{display:grid;grid-template-columns:266px minmax(0,1fr);min-height:100vh;}
.side{background:rgba(255,255,255,.78);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-right:1px solid var(--line);color:var(--ink-2);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;overflow:auto;}
.logo{display:flex;align-items:center;gap:11px;padding:4px 8px 14px;}
.logo .mk{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--primary-l),var(--primary-d));display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:600;font-size:19px;flex:0 0 auto;box-shadow:var(--glow);}
.logo b{color:var(--ink);font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:-.01em;}
.logo small{display:block;color:var(--ink-4);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}

/* workspace context chip */
.ws{display:flex;align-items:center;gap:10px;background:var(--canvas);border:1px solid var(--line);border-radius:11px;padding:8px 10px;margin-bottom:10px;cursor:pointer;transition:background .15s;}
.ws:hover{background:var(--canvas-2);}
.ws .wi{width:30px;height:30px;border-radius:8px;background:var(--primary-soft);color:var(--primary-d);display:grid;place-items:center;flex:0 0 auto;}
.ws .wi svg{width:17px;height:17px;}
.ws .wt{flex:1;min-width:0;}
.ws .wt small{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);line-height:1.4;}
.ws .wt b{display:block;color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ws .cv{color:var(--ink-4);flex:0 0 auto;}

/* primary CTA */
.side-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(135deg,var(--primary-l),var(--primary-d));color:#fff;border:none;border-radius:11px;padding:11px;font-size:13.5px;font-weight:600;margin-bottom:12px;box-shadow:var(--glow);transition:transform .1s,box-shadow .15s;}
.side-cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(97,57,132,.45);}
.side-cta svg{width:16px;height:16px;}

.nav-h{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:13px 10px 5px;font-weight:600;}
.nav{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;color:var(--ink-2);padding:9px 10px;border-radius:9px;font-size:14px;font-weight:500;white-space:nowrap;transition:background .12s,color .12s;}
.nav .ic{flex:0 0 auto;color:var(--ink-4);display:grid;place-items:center;}
.nav .ic svg{width:18px;height:18px;display:block;}
.nav .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;}
.nav .num-badge{margin-left:auto;font-size:11px;font-weight:600;background:var(--canvas-2);color:var(--ink-3);border-radius:999px;padding:1px 8px;}
.nav:hover{background:var(--canvas);color:var(--ink);}
.nav:hover .ic{color:var(--ink-2);}
.nav.active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);}
.nav.active .ic{color:#fff;}
.nav.active .num-badge{background:#ffffff2e;color:#fff;}
.nav.done .ic{color:var(--good);}

.side-util{margin-top:auto;padding-top:8px;}
.side-foot{border-top:1px solid var(--line);padding:10px;margin-top:8px;display:flex;align-items:center;gap:11px;background:var(--canvas);border-radius:13px;}
.av-wrap{position:relative;flex:0 0 auto;}
.side-foot .av{width:36px;height:36px;border-radius:11px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary-d);font-weight:600;font-size:13px;}
.av-on{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:#2bd07a;border:2.5px solid #fff;}
.side-foot .who{flex:1;min-width:0;}
.side-foot .nm{font-size:13px;color:var(--ink);font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px;}
.side-foot .nm .vchk{color:var(--good);flex:0 0 auto;}
.side-foot .rl{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;margin-top:1px;}
.side-foot .rl-dot{width:5px;height:5px;border-radius:50%;background:#34c98a;flex:0 0 auto;}
.side-foot .out{margin-left:auto;width:32px;height:32px;border-radius:9px;border:none;background:var(--canvas-2);color:var(--ink-3);display:grid;place-items:center;flex:0 0 auto;transition:background .15s,color .15s;}
.side-foot .out svg{width:16px;height:16px;}
.side-foot .out:hover{background:#ff5a4d22;color:#d8453a;}

/* guest / member visibility */
body.guest .app{display:none;}
body.member .authland{display:none;}
body.guest .guest-only{display:inline-flex;}
body.member .guest-only{display:none;}
body.guest .member-only{display:none;}
.top-logout{display:none;} /* desktop logout lives in the sidebar footer; this is the mobile top-bar logout */
.nav-more{display:none;} /* the mobile bottom-bar "More" tab; hidden on desktop */
.more-sheet{max-width:440px;}
.more-item{display:flex;align-items:center;gap:13px;width:100%;border:none;background:transparent;padding:13px 4px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line);text-align:left;border-radius:8px;}
.more-item:last-child{border-bottom:none;}
.more-item .mi-ic{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary-d);display:grid;place-items:center;flex:0 0 auto;}
.more-item .mi-arr{margin-left:auto;color:var(--ink-4);font-size:20px;font-weight:400;}
.more-item.danger{color:#c0463c;}
.more-item.danger .mi-ic{background:#fbeeec;color:#c0463c;}
.more-item:active{background:var(--canvas);}

/* ===== logged-out landing ===== */
.authland{display:none;min-height:100vh;color:var(--ink);padding:0;position:relative;
  background:radial-gradient(900px 620px at 14% 16%,rgba(138,95,176,.16) 0,transparent 58%),radial-gradient(820px 600px at 90% 70%,rgba(230,173,60,.12) 0,transparent 55%),linear-gradient(165deg,#f6f3fa 0%,#eef0f4 60%,#eaf0f0 100%);}
body.guest .authland{display:block;}

/* ===== 3D decorative elements ===== */
.h3d{position:absolute;pointer-events:none;z-index:0;}
.h3d.sph{border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffffff 0%,#ece1f8 16%,#c2a3e3 45%,#7a4fa8 76%,#472963 100%);box-shadow:0 34px 60px rgba(97,57,132,.28),inset 0 -10px 26px rgba(60,40,88,.30);}
.h3d.sph.gold{background:radial-gradient(circle at 32% 28%,#ffffff 0%,#fdf3da 18%,#f2cf7a 48%,#d99c25 78%,#9c6c12 100%);box-shadow:0 26px 50px rgba(217,156,37,.26),inset 0 -8px 22px rgba(156,108,18,.28);}
.h3d.s1{width:150px;height:150px;top:130px;right:7%;}
.h3d.s2{width:62px;height:62px;top:340px;left:8%;}
.h3d.s3{width:46px;height:46px;top:52%;right:4%;}
.h3d.s4{width:84px;height:84px;top:64%;left:3%;}
.h3d.ring.r2{width:120px;height:120px;top:78%;right:10%;}
.h3d.ring{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#f6efff 0%,#cdb2e8 32%,#7a4fa8 70%,#3c2858 100%);-webkit-mask:radial-gradient(circle,transparent 53%,#000 54%);mask:radial-gradient(circle,transparent 53%,#000 54%);bottom:90px;right:14%;}
/* ===== landing wow: spotlight + live feed ===== */
.spotlight{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s;}
.spotlight.on{opacity:1;}
body.guest .spotlight{background:radial-gradient(420px circle at var(--sx,50%) var(--sy,30%),rgba(138,95,176,.16),rgba(217,156,37,.05) 45%,transparent 70%);}
.live-feed{position:fixed;left:22px;bottom:22px;z-index:40;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.lf-card{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);border:1px solid var(--glass-brd);border-radius:14px;padding:10px 14px 10px 10px;box-shadow:var(--shadow-md);max-width:330px;
  opacity:0;transform:translateY(14px) scale(.97);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.3,1);}
.lf-card.in{opacity:1;transform:none;}
.lf-card img{width:34px;height:34px;border-radius:50%;flex:0 0 auto;}
.lf-card .lf-t{font-size:12.5px;color:var(--ink-2);line-height:1.35;}
.lf-card .lf-t b{color:var(--ink);font-weight:600;}
.lf-card .lf-t small{display:block;font-size:10.5px;color:var(--ink-4);}
.lf-amt{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--good);background:var(--good-soft);border-radius:999px;padding:3px 10px;flex:0 0 auto;}
@media(max-width:700px){.live-feed{display:none;}}
.authland .al-inner,.authland .al-nav,.authland .al-reviews{position:relative;z-index:1;}
@media (prefers-reduced-motion:no-preference){
  .h3d.s1{animation:float3d 7s ease-in-out infinite;}
  .h3d.s2{animation:float3d 9s ease-in-out infinite reverse;}
  .h3d.s3{animation:float3d 8s ease-in-out 1s infinite;}
  .h3d.s4{animation:float3d 10s ease-in-out infinite reverse;}
  .h3d.ring{animation:spin3d 16s linear infinite;}
  .h3d.ring.r2{animation:spin3d 22s linear infinite reverse;}
}
@keyframes float3d{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
@keyframes spin3d{to{transform:rotate(360deg);}}
@media(max-width:900px){.h3d{display:none;}}

/* sticky nav */
.al-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;padding:16px 56px;background:rgba(255,255,255,.65);-webkit-backdrop-filter:saturate(150%) blur(16px);backdrop-filter:saturate(150%) blur(16px);border-bottom:1px solid var(--glass-line);}
.al-brand{display:flex;align-items:center;gap:12px;}
.al-brand .mk{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--primary-l),var(--primary-d));display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:600;font-size:20px;box-shadow:var(--glow);}
.al-brand b{font-family:var(--disp);font-size:19px;letter-spacing:-.01em;}
.al-brand small{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);}
.al-nav-links{display:flex;gap:26px;margin-left:14px;}
.al-nav-links a{font-size:14px;font-weight:500;color:var(--ink-3);transition:color .15s;}
.al-nav-links a:hover{color:var(--ink);}
.al-nav-cta{margin-left:auto;display:flex;gap:10px;}
@media(max-width:820px){.al-nav{padding:14px 20px;}.al-nav-links{display:none;}}

.al-inner{max-width:1180px;width:100%;margin:0 auto;display:flex;flex-direction:column;padding:64px 56px 30px;}
.al-body{display:flex;flex-direction:column;align-items:center;gap:44px;padding:8px 0 44px;}
.al-mid{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:680px;}
.al-tagline{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--primary-d);background:var(--primary-soft);border:1px solid #ddcdf0;border-radius:999px;padding:6px 13px;margin-bottom:22px;white-space:nowrap;}
.al-mid h1{font-family:var(--disp);font-size:48px;font-weight:600;line-height:1.04;letter-spacing:-.03em;margin:0 0 16px;}
.al-mid .sub{font-size:17px;color:var(--ink-3);margin:0 0 28px;max-width:540px;line-height:1.5;}

/* easy inline signup */
.quick-signup{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px 7px 7px 14px;box-shadow:var(--shadow-md);width:100%;max-width:460px;}
.quick-signup .qs-ic{color:var(--ink-4);display:grid;place-items:center;flex:0 0 auto;}
.quick-signup .qs-ic svg{width:20px;height:20px;}
.quick-signup input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:var(--sans);font-size:15px;color:var(--ink);padding:9px 4px;}
.quick-signup input::placeholder{color:var(--ink-4);}
.quick-signup .btn{flex:0 0 auto;}
.qs-note{font-size:13px;color:var(--ink-4);margin:13px 0 0;text-align:center;white-space:nowrap;}
.qs-note a{color:var(--primary);font-weight:600;cursor:pointer;}
.al-cta{display:flex;gap:12px;}

.al-foot{display:grid;grid-template-columns:repeat(4,auto);gap:46px;border-top:1px solid var(--glass-line);padding-top:24px;justify-content:center;text-align:center;}
/* small legal footer (privacy / terms) */
.al-foot-legal{display:flex;grid-template-columns:none;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;}
.al-foot-legal .al-copy{font-size:12.5px;color:var(--ink-4);}
.al-foot-legal .al-legal{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;}
.al-foot-legal .al-legal a{color:var(--ink-3);text-decoration:none;}
.al-foot-legal .al-legal a:hover{color:var(--primary);text-decoration:underline;}
.al-foot-legal .al-legal-sep{color:var(--ink-4);}
@media(max-width:560px){.al-foot-legal{flex-direction:column;text-align:center;gap:10px;}}
.al-stat .v{font-family:var(--disp);font-size:25px;font-weight:500;letter-spacing:-.02em;white-space:nowrap;}
.al-stat .k{font-size:12.5px;color:var(--ink-4);}
.btn.on-dark{background:#fff;border-color:var(--line-2);color:var(--ink);box-shadow:var(--shadow-sm);}
.btn.on-dark:hover{background:var(--canvas);}
@media(max-width:560px){.al-inner{padding:36px 20px 24px;}.al-foot{grid-template-columns:repeat(2,auto);gap:24px 40px;}}
/* ---- landing: tablet + phone tuning ---- */
@media(max-width:820px){.al-inner{padding:52px 30px 26px;}.al-mid h1{font-size:40px;}}
@media(max-width:600px){
  /* top nav: keep brand + CTAs from overflowing */
  .al-nav{padding:11px 14px;gap:8px;}
  .al-brand{min-width:0;flex:1;}
  .al-brand small{display:none;}
  .al-brand b{font-size:15px;}
  .al-brand .mk{width:32px;height:32px;font-size:15px;}
  .al-nav-cta{gap:7px;flex:0 0 auto;}
  .al-nav-cta .btn{padding:8px 12px;font-size:13px;}
  .al-inner{padding:34px 18px 22px;}
  .al-body{gap:30px;padding:4px 0 30px;}
  .al-mid h1{font-size:31px;line-height:1.08;margin-bottom:13px;}
  .al-mid .sub{font-size:15px;margin-bottom:20px;}
  .al-tagline{font-size:11px;padding:5px 11px;margin-bottom:16px;}
  /* signup: stack input over a full-width button on phones */
  .quick-signup{flex-wrap:wrap;padding:10px;gap:9px;box-shadow:var(--shadow-sm);}
  .quick-signup .qs-ic{display:none;}
  .quick-signup input{flex:1 1 100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:16px;}
  .quick-signup .btn{flex:1 1 100%;justify-content:center;padding:12px;}
  .qs-note{font-size:12.5px;text-align:center;}
  .trustline{flex-wrap:wrap;justify-content:center;text-align:center;gap:9px;margin-top:20px;}
  .al-stat .v{font-size:20px;}
  .al-stat .k{font-size:11.5px;}
  .is-head h3{font-size:21px;}
  .al-foot{grid-template-columns:1fr 1fr;gap:20px 24px;}
}
@media(max-width:380px){.al-mid h1{font-size:27px;}.al-nav-cta .btn.on-dark{display:none;}}

/* ===== rotating animated headline ===== */
.rotator{display:inline-block;position:relative;color:var(--primary);}
.rotator .rot-word{display:inline-block;color:var(--primary);background:linear-gradient(100deg,var(--primary-l),var(--primary-d) 55%,var(--primary-l));background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rotShine 5s linear infinite;transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.3,1);}
.rotator .rot-word.out{opacity:0;transform:translateY(-0.34em);}
@keyframes rotShine{to{background-position:200% center;}}

/* ===== landing right-side visual + reviews ===== */
@media(max-width:1080px){.al-mid{max-width:none;}}
.al-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--glass-line);padding-top:36px;width:100%;max-width:1040px;}
@media(max-width:820px){.al-feats{grid-template-columns:1fr;}}

/* ===== landing FAQ ===== */
.al-faq{width:100%;max-width:1040px;margin:44px 0 6px;border-top:1px solid var(--glass-line);padding-top:40px;}
.al-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.al-faq-col{background:var(--glass);border:1px solid var(--glass-brd);border-radius:18px;padding:6px 22px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.al-faq .faq summary{font-size:14.5px;}
.al-faq-foot{text-align:center;font-size:13.5px;color:var(--ink-3);margin-top:22px;}
.al-faq-foot a{color:var(--primary-d);font-weight:600;cursor:pointer;}
@media(max-width:820px){.al-faq-grid{grid-template-columns:1fr;}}
.feat-stack{display:flex;flex-direction:column;gap:13px;}
.feat{display:flex;gap:15px;align-items:flex-start;background:var(--glass);border:1px solid var(--glass-brd);border-radius:18px;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;}
.feat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.feat .fi{width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,#f3ecfa,var(--primary-soft) 60%,#ddcdf0);border:1px solid #e4d8f2;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(97,57,132,.12);display:grid;place-items:center;color:var(--primary-d);flex:0 0 auto;}
.feat .fi svg{width:22px;height:22px;}
.feat h4{margin:0 0 4px;font-family:var(--disp);font-size:16.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em;}
.feat p{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.45;}
.stars{display:inline-flex;gap:2px;color:var(--amber);font-size:14px;line-height:1;}
.stars.sm{font-size:12px;}
.trustline{display:inline-flex;align-items:center;gap:13px;margin-top:26px;flex-wrap:nowrap;justify-content:center;background:rgba(255,255,255,.72);border:1px solid var(--glass-brd);border-radius:999px;padding:7px 20px 7px 9px;box-shadow:0 1px 2px rgba(20,16,40,.04),0 12px 30px rgba(20,16,40,.08);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);}
.av-stack{display:flex;}
.av-stack>*{width:36px;height:36px;border-radius:50%;border:2.5px solid #fff;margin-left:-11px;overflow:hidden;background:var(--canvas-2);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--primary-d);box-shadow:0 2px 8px rgba(20,16,40,.16);transition:transform .2s;}
.av-stack>*:first-child{margin-left:0;}
.av-stack:hover>*{margin-left:-6px;}.av-stack:hover>*:first-child{margin-left:0;}
.av-stack .av-c{color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.3px;text-shadow:0 1px 1px rgba(0,0,0,.14);}
.av-stack .av-c:nth-child(1){background:linear-gradient(140deg,#dd8175,#c85d54);}
.av-stack .av-c:nth-child(2){background:linear-gradient(140deg,#57b690,#3f9b76);}
.av-stack .av-c:nth-child(3){background:linear-gradient(140deg,#a77cdb,#8f5fc6);}
.av-stack .av-c:nth-child(4){background:linear-gradient(140deg,#5fbb9d,#479b7f);}
.trustline .tt{display:flex;flex-direction:column;gap:1px;font-size:12.5px;color:var(--ink-3);line-height:1.3;white-space:nowrap;text-align:left;}
.trustline .tt b{color:var(--ink);font-weight:600;font-size:13.5px;}
.tt-hl{color:var(--primary-d);font-weight:700;}
.tt-rate{display:inline-flex;align-items:center;gap:6px;font-size:12px;}
.tt-stars{color:#f5a623;letter-spacing:1.5px;font-size:12.5px;text-shadow:0 1px 0 rgba(245,166,35,.25);}
.tt-rate b{color:var(--ink);font-weight:700;}
.floatcard{margin-top:14px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-brd);border-radius:16px;padding:15px 17px;box-shadow:var(--shadow-lg);color:var(--ink);}
.floatcard .q{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:9px 0 13px;}
.floatcard .who{display:flex;align-items:center;gap:11px;}
.floatcard .who image-slot{width:38px;height:38px;flex:0 0 auto;}
.floatcard .nm{font-size:13px;font-weight:600;}
.floatcard .rl{font-size:11.5px;color:var(--ink-3);}

/* ===== earnings calculator (landing) ===== */
.al-calc{max-width:1180px;margin:0 auto;padding:10px 56px 50px;position:relative;z-index:1;}
.calc-card{position:relative;display:grid;grid-template-columns:1fr 360px;gap:44px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-brd);border-radius:var(--rl);padding:40px 44px;box-shadow:var(--shadow-md);overflow:hidden;}
.calc-coin{width:74px;height:74px;top:-20px;right:330px;position:absolute;}
.calc-left .al-tagline{margin-bottom:14px;}
.calc-left h2{font-family:var(--disp);font-size:30px;font-weight:500;letter-spacing:-.02em;margin:0 0 8px;}
.calc-left p{font-size:14.5px;color:var(--ink-3);margin:0 0 26px;max-width:420px;}
.calc-field{margin-bottom:20px;max-width:440px;}
.calc-field:last-child{margin-bottom:0;}
.cf-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;}
.cf-head label{font-size:13.5px;font-weight:600;color:var(--ink-2);}
.cf-head b{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--primary-d);}
.calc-right{position:relative;background:#fff;border:1px solid var(--glass-brd);border-radius:18px;padding:30px 30px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;box-shadow:var(--shadow-sm);}
.cr-label{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);}
.cr-amt{font-family:var(--disp);font-size:46px;font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--ink);}
.cr-amt small{font-size:18px;color:var(--ink-3);font-weight:500;}
.cr-amt.pop{animation:crPop .3s cubic-bezier(.2,.8,.3,1);}
@keyframes crPop{0%{transform:scale(.97);}60%{transform:scale(1.02);}100%{transform:scale(1);}}
.cr-yr{font-size:14px;font-weight:600;color:var(--good);background:var(--good-soft);border-radius:999px;padding:4px 12px;margin:6px 0 2px;}
.cr-note{font-size:12px;color:var(--ink-4);margin:6px 0 16px;}
.calc-right .btn{width:100%;}
@media(max-width:980px){.calc-card{grid-template-columns:1fr;gap:26px;padding:28px;}.calc-coin{display:none;}.al-calc{padding:10px 20px 40px;}}

/* reviews proof stats */
.alr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:860px;margin:0 auto 34px;}
.alr-stats .as{text-align:center;background:var(--glass);border:1px solid var(--glass-brd);border-radius:16px;padding:16px 10px;box-shadow:var(--shadow-sm);}
.alr-stats .as b{display:block;font-family:var(--disp);font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--ink);}
.alr-stats .as small{font-size:12px;color:var(--ink-3);}
@media(max-width:700px){.alr-stats{grid-template-columns:repeat(2,1fr);}}

/* ===== reviews section ===== */
.al-reviews{max-width:1180px;margin:0 auto;padding:30px 56px 70px;}
.alr-head{text-align:center;margin-bottom:34px;}
.alr-head .al-tagline{align-self:auto;}
.alr-head h2{font-family:var(--disp);font-size:34px;font-weight:500;letter-spacing:-.02em;margin:0 0 12px;}
.alr-score{font-size:14.5px;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px;}
.alr-score .stars{font-size:17px;}
.alr-score b{font-family:var(--disp);font-size:17px;color:var(--ink);}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.reviews-grid{grid-template-columns:1fr;}.al-reviews{padding:20px 20px 56px;}}
.rcard{background:var(--glass);border:1px solid var(--glass-brd);border-radius:18px;padding:22px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:13px;transition:transform .15s,box-shadow .15s;}
.rcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.rcard .stars{font-size:15px;}
.rcard .q{font-size:14.5px;color:var(--ink-2);line-height:1.55;margin:0;flex:1;}
.rcard .who{display:flex;align-items:center;gap:11px;margin-top:2px;}
.rcard .who img{width:40px;height:40px;border-radius:50%;flex:0 0 auto;}
.rcard .nm{font-size:13.5px;font-weight:600;color:var(--ink);}
.rcard .rl{font-size:12px;color:var(--ink-4);}
.alr-foot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:38px;}
.alr-foot-note{font-size:13px;color:var(--ink-4);}

/* ===== scrolling reviews marquee ===== */
.review-marquee{max-width:1180px;width:100%;margin:8px auto 0;border-top:1px solid #ffffff14;padding-top:24px;}
.rm-head{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8fa39d;margin-bottom:16px;font-weight:600;}
.rm-head .stars{font-size:13px;}
.rm-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.rm-track{display:flex;gap:16px;width:max-content;animation:marquee 42s linear infinite;}
.rm-wrap:hover .rm-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.rm-card{width:328px;flex:0 0 auto;background:var(--glass);border:1px solid var(--glass-brd);border-radius:16px;padding:18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);}
.rm-card .q{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:9px 0 14px;}
.rm-card .who{display:flex;align-items:center;gap:11px;}
.rm-card .who img{width:38px;height:38px;border-radius:50%;flex:0 0 auto;}
.rm-card .nm{font-size:13px;font-weight:600;color:var(--ink);}
.rm-card .rl{font-size:11.5px;color:var(--ink-4);}

/* ===== dashboard reviews ===== */
.reviews{display:flex;flex-direction:column;gap:0;}
.rev-head{display:flex;align-items:center;gap:16px;margin-bottom:4px;}
.rev-score{font-family:var(--disp);font-size:42px;font-weight:600;letter-spacing:-.03em;line-height:1;}
.rev-item{display:flex;gap:13px;padding:15px 0;border-top:1px solid var(--glass-line);}
.rev-item image-slot{width:40px;height:40px;flex:0 0 auto;}
.rev-item .rb{flex:1;min-width:0;}
.rev-item .rt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.rev-item .rt b{font-size:14px;}
.rev-item .rt .when{font-size:12px;color:var(--ink-4);margin-left:auto;}
.rev-item .rq{font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.5;}

/* ===== topbar + canvas ===== */
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;}
.top{display:flex;align-items:center;gap:16px;padding:16px 34px;background:rgba(238,241,240,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--glass-line);}
.top .crumb{font-size:11.5px;color:var(--ink-4);font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.top h1{font-family:var(--disp);font-size:25px;font-weight:500;margin:2px 0 0;letter-spacing:-.02em;}
.top .sp{flex:1;}
/* Content width. Was capped at 1180px, which on anything wider than ~1680px
   left a dead band of page background on each side — and because the left one
   sits against the 266px sidebar, the whole surplus read as one empty grey
   strip down the right of the window (557px of it on a 2560px monitor). 1600
   keeps a sane measure for the text-heavy screens while letting the tables,
   property rows and stat grids use a normal desktop's width. */
.canvas{padding:30px 34px 80px;max-width:1600px;width:100%;margin:0 auto;}
/* Ultrawide: let it breathe further out rather than parking a 550px band of
   empty background beside the content. */
@media(min-width:2100px){.canvas{max-width:1900px;}}
.screen{display:none;}
.screen.active{display:block;}

/* ===== generic ===== */
.muted{color:var(--ink-3);}
.faint{color:var(--ink-4);}
.card{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-brd);border-radius:var(--r);box-shadow:var(--shadow-md);}
.card.pad{padding:22px;}
.row{display:flex;gap:18px;}
.row>*{flex:1;min-width:0;}
.col{display:flex;flex-direction:column;}
.hr{height:1px;background:var(--glass-line);border:0;margin:18px 0;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:9px 15px;border-radius:var(--rs);font-size:14px;font-weight:600;box-shadow:0 1px 2px rgba(30,16,40,.05);transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.btn:hover{background:var(--canvas);}
.btn:active{background:var(--canvas-2);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-soft);}
.btn.primary{color:#fff;border:1px solid color-mix(in srgb,var(--primary-l) 55%,#ffffff 45%);
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary-l) 78%,transparent),color-mix(in srgb,var(--primary-d) 86%,transparent));
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.35);}
.btn.primary:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--primary-l) 90%,transparent),color-mix(in srgb,var(--primary-d) 96%,transparent));}
.btn.primary:active{background:var(--primary-d);}
.btn.ghost{border-color:transparent;box-shadow:none;background:transparent;}
.btn.ghost:hover{background:rgba(19,21,27,.05);box-shadow:none;}
.btn.block{width:100%;}
.btn.sm{padding:6px 12px;font-size:13px;}
.btn.lg{padding:12px 22px;font-size:15px;border-radius:13px;}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--canvas-2);color:var(--ink-2);}
.pill.good{background:var(--good-soft);color:var(--good);}
.pill.warn{background:var(--warn-soft);color:var(--warn);}
.pill.primary{background:var(--primary-soft);color:var(--primary-d);}
.pill.faint{background:var(--canvas-2);color:var(--ink-4);}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-3);}
.lead{color:var(--ink-3);font-size:15px;margin:3px 0 0;}

/* ===== forms ===== */
.field{margin-bottom:15px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.inp{width:100%;border:1px solid var(--line-2);border-radius:var(--rs);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:11px 13px;font-family:inherit;font-size:14.5px;color:var(--ink);transition:border .15s,box-shadow .15s,background .15s;}
.inp:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--primary-soft);}
.inp::placeholder{color:var(--ink-4);}
textarea.inp{resize:vertical;}
.auth{max-width:430px;margin:24px auto;}
.auth .card{padding:30px;}
.auth h2{font-family:var(--disp);font-size:26px;font-weight:600;margin:0 0 4px;letter-spacing:-.02em;}

/* ===== steps ===== */
.steps{display:flex;align-items:center;gap:10px;margin-bottom:26px;}
.steps .s{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-4);font-weight:600;}
.steps .s .d{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;font-size:12.5px;color:var(--ink-4);background:var(--surface);}
.steps .s.cur{color:var(--ink);}
.steps .s.cur .d{border-color:var(--primary);background:var(--primary);color:#fff;}
.steps .s.done .d{border-color:var(--good);background:var(--good);color:#fff;}
.steps .bar{flex:0 0 40px;height:2px;background:var(--line-2);border-radius:2px;}

/* ===== first-time / with-data view switch ===== */
body.ft .rt-only{display:none!important;}
body:not(.ft) .ft-only{display:none!important;}
.empty{text-align:center;padding:34px 20px;}
.empty .em-ic{width:46px;height:46px;border-radius:14px;background:var(--canvas-2);color:var(--ink-3);display:grid;place-items:center;margin:0 auto 12px;}
.empty .em-ic svg{width:20px;height:20px;}
.empty b{font-size:14px;font-weight:600;display:block;margin-bottom:4px;}
.empty p{font-size:13px;color:var(--ink-3);margin:0 auto 14px;line-height:1.5;max-width:300px;}
.view-seg{display:inline-flex;align-items:center;gap:3px;background:var(--canvas-2);border-radius:10px;padding:3px;}
.view-seg button{border:none;background:transparent;padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--ink-3);white-space:nowrap;}
.view-seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);}

/* ===== tweaks panel ===== */
.tweaks-panel{position:fixed;right:18px;bottom:18px;z-index:80;width:242px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:16px;display:none;}
.tweaks-panel.open{display:block;}
.tw-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;}
.tw-head b{font-family:var(--disp);font-size:15px;font-weight:600;}
.tw-x{width:26px;height:26px;border:none;border-radius:8px;background:var(--canvas-2);color:var(--ink-3);font-size:11px;display:grid;place-items:center;}
.tw-x:hover{background:var(--line-2);color:var(--ink);}
.tw-sec{margin-bottom:13px;}
.tw-sec:last-child{margin-bottom:2px;}
.tw-sec label{font-size:11px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.07em;font-weight:600;display:block;margin-bottom:7px;}
.tw-swatches{display:flex;gap:9px;}
.tw-sw{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2);cursor:pointer;}
.tw-sw.on{box-shadow:0 0 0 2px var(--ink);}

/* ===== industries strip (landing) ===== */
.ind-strip{width:100%;max-width:1040px;margin:38px 0 6px;}
.is-head{text-align:center;margin-bottom:20px;}
.is-head h3{font-family:var(--disp);font-size:26px;font-weight:500;letter-spacing:-.02em;margin:0 0 6px;}
.is-head h3 span{color:var(--primary);}
.is-head p{font-size:14px;color:var(--ink-3);margin:0 auto;max-width:480px;line-height:1.5;}
.is-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.is-track{display:flex;gap:14px;width:max-content;animation:marquee 36s linear infinite;padding:6px 0 10px;}
.is-wrap:hover .is-track{animation-play-state:paused;}
.ind-card3{display:flex;align-items:center;gap:13px;background:var(--glass);border:1px solid var(--glass-brd);border-radius:16px;padding:14px 18px 14px 14px;box-shadow:var(--shadow-sm);white-space:nowrap;transition:transform .15s,box-shadow .15s;}

/* promo-style industry cards */
.promo-card{width:288px;flex:0 0 auto;display:flex;flex-direction:column;gap:5px;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--pc1),var(--pc2));border:1px solid #ffffffb0;border-radius:18px;padding:16px 18px;
  box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;white-space:normal;}
.promo-card::after{content:"";position:absolute;right:-34px;bottom:-46px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),rgba(255,255,255,.25) 45%,transparent 70%);pointer-events:none;}
.promo-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.pc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;}
.pc-tag{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pcx);background:#ffffff90;border-radius:999px;padding:3px 9px;}
.pc-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--pcx);
  background:radial-gradient(circle at 32% 28%,#fff 0%,#ffffffd8 40%,#ffffff70 100%);
  box-shadow:0 4px 10px rgba(16,22,32,.14),inset 0 -2px 5px rgba(16,22,32,.08);flex:0 0 auto;}
.pc-ic svg{width:17px;height:17px;}
.promo-card h4{font-family:var(--disp);font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0;}
.promo-card p{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.45;}
.pc-stat{margin-top:8px;background:#ffffff80;border-radius:9px;padding:6px 10px;display:inline-block;}
.pc-stat small{font-size:12px;color:var(--ink-2);}
.pc-stat b{font-family:var(--disp);font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.pc-cta{font-size:12.5px;font-weight:700;color:var(--pcx);margin-top:7px;}
.ind-card3:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.ind-card3 .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--primary-d);
  background:radial-gradient(circle at 32% 28%,#fff 0%,#f6f0fb 30%,var(--primary-soft) 62%,#cdb2e8 100%);
  box-shadow:0 5px 12px rgba(97,57,132,.18),inset 0 -3px 7px rgba(97,57,132,.14),inset 0 2px 4px rgba(255,255,255,.9);flex:0 0 auto;}
.ind-card3 .ic svg{width:19px;height:19px;}
.ind-card3 .t b{display:block;font-size:14px;font-weight:600;color:var(--ink);}
.ind-card3 .t small{font-size:12px;color:var(--ink-3);}
.ind-card3 .pill{font-size:10.5px;padding:2px 8px;margin-left:6px;}

/* ===== settings ===== */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--glass-line);}
.set-row:last-child{border-bottom:none;padding-bottom:0;}
.set-row>div b{font-size:13.5px;font-weight:600;display:block;}
.set-row>div p{font-size:12.5px;color:var(--ink-3);margin:2px 0 0;}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto;}
.switch input{opacity:0;width:0;height:0;}
.switch span{position:absolute;inset:0;background:var(--canvas-2);border-radius:999px;transition:background .18s;cursor:pointer;}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,22,32,.25);transition:transform .18s;}
.switch input:checked+span{background:var(--primary);}
.switch input:checked+span::after{transform:translateX(18px);}
.bank-ic{width:40px;height:40px;border-radius:11px;background:var(--canvas-2);color:var(--ink-2);display:grid;place-items:center;flex:0 0 auto;}
.danger-card{border-color:#f0d4d1;}
.btn.danger{color:#c0463c;border-color:#e8c2be;}
.btn.danger:hover{background:#fbeeec;}

/* ===== help / faq ===== */
.faq{border-bottom:1px solid var(--glass-line);padding:4px 0;}
.faq:last-of-type{border-bottom:none;}
.faq summary{cursor:pointer;font-size:14px;font-weight:600;padding:11px 0;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--disp);font-size:18px;color:var(--ink-4);transition:transform .15s;}
.faq[open] summary::after{transform:rotate(45deg);}
.faq p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0 0 13px;max-width:560px;}

/* ===== dashboard ===== */
.dash-greet{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;}
.dash-h{font-family:var(--disp);font-size:20px;font-weight:500;letter-spacing:-.02em;margin:0;}
.dash-sub{font-size:13.5px;color:var(--ink-3);margin:3px 0 0;}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card-h b{font-size:14.5px;font-weight:600;}
.card-h>b{font-weight:500;font-family:var(--disp);}

/* first-time setup indicator */
.setup-card{position:relative;display:flex;align-items:center;gap:20px;background:linear-gradient(110deg,var(--primary-soft),rgba(255,255,255,.85) 62%);border:1px solid #c8e8dc;border-radius:var(--r);padding:18px 22px;margin-bottom:20px;box-shadow:var(--shadow-sm);overflow:hidden;}
.setup-card::after{content:"";position:absolute;right:-30px;top:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(34,199,154,.18),transparent 70%);pointer-events:none;}
.setup-x{position:absolute;top:12px;right:12px;width:24px;height:24px;border:none;background:rgba(30,16,40,.06);color:var(--ink-3);border-radius:7px;font-size:11px;display:grid;place-items:center;}
.setup-x:hover{background:rgba(30,16,40,.12);color:var(--ink);}
.setup-ring{width:66px;height:66px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:conic-gradient(var(--primary) calc(var(--p,0)*1%),var(--canvas-2) 0);box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);}
.sr-inner{width:50px;height:50px;border-radius:50%;background:var(--surface);display:grid;place-items:center;align-content:center;text-align:center;line-height:1;}
.sr-inner b{font-family:var(--disp);font-size:15px;font-weight:600;}
.sr-inner span{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-top:2px;}
.setup-body{flex:1;min-width:0;}
.setup-body>b{font-size:15px;font-weight:500;font-family:var(--disp);}
.setup-steps{display:flex;flex-wrap:wrap;gap:8px;}
.su-step{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:5px 12px 5px 7px;color:var(--ink-2);}
.su-step i{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-style:normal;background:var(--canvas-2);color:var(--ink-3);flex:0 0 auto;}
button.su-step{cursor:pointer;transition:border-color .15s,color .15s,transform .1s;}
button.su-step:hover{border-color:var(--primary);color:var(--primary-d);transform:translateY(-1px);}
.su-step.done{color:var(--good);background:var(--good-soft);border-color:transparent;}
.su-step.done i{background:var(--good);color:#fff;}

/* plan snapshot + payout */
.plan-tag{display:inline-flex;align-items:center;gap:8px;font-weight:600;}
.plan-tag i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:0 0 auto;}
.plan-tag .ic-rec{background:var(--primary);}
.plan-tag .ic-add{background:var(--amber);}
.plan-tag .ic-once{background:#3a6ea5;}
.plan-tag .ic-sales{background:#9a4fb0;}
/* earnings per plan */
.earn-mk{display:flex;align-items:center;gap:10px;}
.earn-card{margin-bottom:16px;}
.earn-card:last-child{margin-bottom:0;}
.earn-tbl th{padding-bottom:9px;}
.earn-tbl td{padding:11px 12px;}
.tbl.compact td{padding:9px 12px;}
.tbl.compact th{padding:0 12px 9px;}
.payout-amt{font-family:var(--disp);font-size:30px;font-weight:500;letter-spacing:-.03em;margin-top:12px;line-height:1;color:var(--ink);}
@media(max-width:820px){.dash-greet{flex-direction:column;}.setup-card{flex-direction:column;align-items:flex-start;}}

/* ===== stats ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:16px;}
.stat{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-brd);border-radius:var(--r);padding:17px;box-shadow:var(--shadow-md);transition:transform .12s,box-shadow .15s;}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.stat .k{font-size:12.5px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:7px;}
.stat .v{font-family:var(--disp);font-size:27px;font-weight:500;letter-spacing:-.03em;margin-top:7px;line-height:1;}
.stat .delta{font-size:12px;font-weight:600;margin-top:6px;}
.stat .delta.up{color:var(--good);}
.stat .ic{width:34px;height:34px;border-radius:50%;color:var(--primary-d);display:grid;place-items:center;float:right;
  background:radial-gradient(circle at 32% 28%,#fff 0%,#f6f0fb 28%,var(--primary-soft) 58%,#cdb2e8 100%);
  box-shadow:0 5px 12px rgba(97,57,132,.18),inset 0 -3px 7px rgba(97,57,132,.14),inset 0 2px 4px rgba(255,255,255,.9);}
.stat .ic svg{width:16px;height:16px;}

/* ===== industry ===== */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.ind{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1.5px solid var(--glass-brd);border-radius:var(--rl);padding:24px;position:relative;transition:border .15s,box-shadow .15s,transform .12s;box-shadow:var(--shadow-md);}
.ind.live{cursor:pointer;}
.ind.live:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.ind.sel{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft),var(--shadow-md);}
.ind.soon{opacity:.66;}
.ind .bi{width:54px;height:54px;border-radius:15px;background:var(--canvas-2);display:grid;place-items:center;font-size:24px;margin-bottom:14px;}
.ind.live .bi{background:linear-gradient(135deg,var(--primary-soft),#ddd0ef);}
.ind h3{font-family:var(--disp);font-size:18px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em;}
.ind .badge{position:absolute;top:18px;right:18px;}

/* ===== plans ===== */
.pricing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;}
.pricing-legend{display:flex;gap:16px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap;justify-content:flex-end;}
.pricing-legend div{display:flex;align-items:center;gap:6px;}
.lg-dot{width:9px;height:9px;border-radius:3px;display:inline-block;}
.lg-dot.rec{background:var(--primary);}
.lg-dot.once{background:#3a6ea5;}
.lg-dot.add{background:var(--amber);}
.plan-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
/* merged industry tabs in catalog */
.cat-ind-tabs{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.cit{display:flex;align-items:center;gap:9px;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1.5px solid var(--line);border-radius:13px;padding:10px 15px;font-size:14px;font-weight:600;color:var(--ink-2);transition:border-color .15s,box-shadow .15s,transform .1s;}
.cit:hover{border-color:var(--line-2);transform:translateY(-1px);}
.cit.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-d);box-shadow:0 0 0 3px var(--primary-soft);}
.cit-ic{display:grid;place-items:center;color:currentColor;}
.cit-ic svg{width:17px;height:17px;}
.cit-n{font-size:11px;font-weight:600;background:var(--primary);color:#fff;border-radius:999px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;}
.cit:not(.on) .cit-n{background:var(--canvas-2);color:var(--ink-3);}
.cit.soon{opacity:.6;cursor:default;}
.cit.soon:hover{transform:none;border-color:var(--line);box-shadow:none;}
.cit-soon{font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:var(--canvas-2);color:var(--ink-3);border-radius:999px;padding:2px 6px;margin-left:1px;}
@media(max-width:600px){.cat-ind-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}.cit{flex:0 0 auto;width:100%;justify-content:center;gap:5px;padding:11px 6px;min-width:0;}.cit .cit-ic{display:none;}.cit-name{display:inline!important;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.cit-soon{flex:0 0 auto;font-size:8.5px;padding:2px 5px;}}
.plan-actions{display:flex;gap:8px;margin-top:auto;padding-top:4px;}
.plan-actions .btn{flex:1;}
.cat-toggle.added{background:var(--good-soft);color:var(--good);border-color:transparent;}
.plan.in-cat{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft),var(--shadow-md);}
.cat-ribbon{display:none;}
.pic-check{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;background:var(--good);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;border:2px solid var(--surface);}
.plan .pic{position:relative;}
.cat-selbar{display:none;position:sticky;bottom:18px;margin-top:22px;align-items:center;justify-content:space-between;gap:16px;background:var(--ink);color:#fff;border-radius:14px;padding:13px 18px;box-shadow:var(--shadow-lg);}
.cat-selbar.show{display:flex;}
.csb-info{display:flex;flex-direction:column;gap:1px;}
.csb-info b{font-size:14.5px;font-weight:600;}
.csb-info span{font-size:12.5px;color:#9fb0aa;}
.csb-actions{display:flex;gap:9px;}
.csb-actions .btn{background:#ffffff14;border-color:#ffffff26;color:#fff;}
.csb-actions .btn:hover{background:#ffffff22;}
.csb-actions .btn.primary{background:var(--primary);border-color:transparent;}
.csb-actions .btn.primary:hover{background:var(--primary-l);}
.plan-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.cat-chip{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--cc);background:color-mix(in srgb,var(--cc) 13%,transparent);border-radius:999px;padding:3px 9px;white-space:nowrap;}
.pill.mini{font-size:10px;padding:2px 8px;letter-spacing:.02em;}
.pricing-bar{display:flex;align-items:center;gap:26px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-brd);border-radius:var(--r);padding:14px 20px;margin-bottom:18px;box-shadow:var(--shadow-sm);}
.pb-stat{display:flex;flex-direction:column;gap:1px;}
.pb-stat b{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1;}
.pb-stat span{font-size:12px;color:var(--ink-3);}
@media(max-width:600px){.pricing-bar{gap:18px;flex-wrap:wrap;}}
.pf{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;transition:all .15s;white-space:nowrap;}
.pf:hover{border-color:var(--line-2);}
.pf.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.pf-n{font-size:11.5px;font-weight:600;background:rgba(0,0,0,.08);border-radius:999px;padding:1px 7px;}
.pf.on .pf-n{background:rgba(255,255,255,.2);}
/* explain-on-hover tooltip for filter chips */
.pf[data-tip]{position:relative;}
.pf[data-tip]:hover::after,.pf[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);background:#1c1830;color:#fff;font-size:11.5px;font-weight:500;letter-spacing:.1px;line-height:1.45;white-space:normal;width:max-content;max-width:210px;text-align:center;padding:8px 11px;border-radius:9px;box-shadow:0 10px 28px rgba(20,16,40,.3);z-index:60;pointer-events:none;}
.pf[data-tip]:hover::before,.pf[data-tip]:focus-visible::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);border:5px solid transparent;border-top-color:#1c1830;z-index:60;pointer-events:none;}
.plan-grid{display:block;}
.plan-grid-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.plan-section{margin-bottom:30px;}
.plan-section:last-child{margin-bottom:0;}
.ps-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.ps-head .ps-bar{width:4px;height:34px;border-radius:3px;background:var(--primary);flex:0 0 auto;}
.ps-head .ps-bar.cat-once{background:#3a6ea5;}
.ps-head .ps-bar.cat-add{background:var(--amber);}
.ps-head .ps-bar.cat-sales{background:#9a4fb0;}
.ps-head .ps-bar.cat-free{background:var(--ink-4);}
.ps-head b{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.01em;display:block;}
.ps-head small{font-size:12.5px;color:var(--ink-4);}
.ps-head .ps-n{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-3);background:var(--canvas-2);border-radius:999px;padding:3px 11px;}
@media(max-width:900px){.plan-grid-inner{grid-template-columns:repeat(2,1fr);}.pricing-head{flex-direction:column;}.pricing-legend{justify-content:flex-start;}}
@media(max-width:600px){.plan-grid-inner{grid-template-columns:1fr;}}
.plan{overflow:hidden;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-brd);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:11px;position:relative;box-shadow:var(--shadow-md);transition:box-shadow .15s,transform .12s,border .15s;}
.plan::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--r) 0 0 var(--r);background:var(--primary);}
.plan.cat-once::before{background:#3a6ea5;}
.plan.cat-add::before{background:var(--amber);}
.plan.cat-sales::before{background:#9a4fb0;}
.plan.cat-free::before{background:var(--ink-4);}
.plan:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.plan.pop{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft),var(--shadow-md);}
.plan .badge{position:absolute;top:-10px;right:16px;}
.plan-top{display:flex;align-items:center;justify-content:space-between;}
.plan .pic{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#fff,var(--canvas-2));border:1px solid var(--glass-brd);display:grid;place-items:center;color:var(--primary-d);box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(16,22,32,.07);}
.plan .pic svg{width:20px;height:20px;}
.plan.in-cat::before{display:none;}
.plan h3{font-family:var(--disp);font-size:17px;font-weight:600;margin:2px 0 0;letter-spacing:-.01em;}
.plan-desc{font-size:12.5px;color:var(--ink-3);margin:3px 0 0;line-height:1.4;}
.plan-price{margin-bottom:2px;}
.plan-price{margin-bottom:2px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.plan-cost-note{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);}
.plan .price{font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1;}
.plan .price small{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-3);}
.plan ul{margin:8px 0 2px;padding:0;list-style:none;font-size:13px;color:var(--ink-2);}
.plan ul li{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px;line-height:1.45;}
.plan ul li::before{content:"✓";width:17px;height:17px;border-radius:50%;background:var(--primary-soft);color:var(--primary-d);font-size:10px;font-weight:600;display:grid;place-items:center;flex:0 0 auto;margin-top:1px;}
.plan .tierline{font-size:12px;color:var(--ink-3);background:var(--canvas);border-radius:11px;padding:12px 14px;margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.plan .tierline .tl-h{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:600;}
.plan .tierline .tl-row{display:flex;justify-content:space-between;gap:12px;white-space:nowrap;align-items:baseline;}
.plan .tierline .tl-row b{color:var(--ink-2);font-weight:600;flex:0 0 auto;}
/* grouped, expandable plan features */
.plan .plan-prev{margin:8px 0 0;}
.plan .plan-feats{margin:2px 0 4px;}
.plan .plan-feats>summary{cursor:pointer;list-style:none;font-size:12.5px;font-weight:600;color:var(--primary-d);padding:6px 0 2px;user-select:none;display:inline-flex;align-items:center;gap:5px;}
.plan .plan-feats>summary::-webkit-details-marker{display:none;}
.plan .plan-feats>summary::after{content:"›";transform:rotate(90deg);transition:transform .15s ease;font-size:15px;line-height:1;}
.plan .plan-feats[open]>summary::after{transform:rotate(-90deg);}
.plan .pf-group{margin-top:11px;}
.plan .pf-g-h{display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin-bottom:7px;}
.plan .pf-group ul{margin:0;}
.plan .tierline .tl-row span{color:var(--ink-3);}
.plan-margin{font-size:12.5px;color:var(--ink-3);background:var(--good-soft);border-radius:10px;padding:10px 13px;margin-top:10px;display:flex;justify-content:space-between;align-items:center;}
.plan-margin b{color:var(--good);font-family:var(--disp);}

/* ===== markup ===== */
.mk-wrap{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start;}
.seg{display:inline-flex;background:var(--canvas-2);border:1px solid var(--glass-line);border-radius:var(--rs);padding:3px;gap:3px;}
.seg button{border:none;background:transparent;padding:8px 16px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:all .15s;}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);}
input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:var(--canvas-2);border-radius:999px;outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--primary);border:3px solid #fff;box-shadow:var(--glow);cursor:pointer;}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--primary);border:3px solid #fff;cursor:pointer;}
.mk-summary{background:#fff;color:var(--ink);border:1px solid var(--glass-brd);border-radius:var(--rl);padding:26px;position:sticky;top:96px;box-shadow:var(--shadow-md);overflow:hidden;}
.mk-summary::before{content:"";position:absolute;top:-40%;right:-30%;width:70%;height:80%;background:radial-gradient(circle,rgba(138,95,176,.14),transparent 70%);pointer-events:none;}
.mk-summary>*{position:relative;}
.mk-final-row{padding-right:116px;}/* keep the plan name clear of the coin cluster (all screens) */
.mk-summary .bigp{font-family:var(--disp);font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1.05;}
.mk-summary .bigp small{font-size:15px;color:var(--ink-3);font-weight:500;}
.mk-margin{display:inline-flex;align-items:center;gap:6px;background:var(--amber-soft);color:#7a5a10;font-weight:600;padding:6px 13px;border-radius:999px;font-size:12.5px;margin-top:6px;white-space:nowrap;border:1px solid #f0dcb4;}
.mk-summary hr{border:0;height:1px;background:var(--glass-line);margin:20px 0;}
.mk-bd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--ink-3);margin-bottom:11px;white-space:nowrap;}
.mk-bd b{color:var(--ink);font-family:var(--disp);}

/* 3D coins on the summary card */
.coin3d{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 32% 28%,#fff 0%,#fdf3da 16%,#f2cf7a 46%,#d99c25 76%,#9c6c12 100%);
  box-shadow:0 14px 28px rgba(217,156,37,.32),inset 0 -6px 14px rgba(156,108,18,.30),inset 0 4px 8px rgba(255,255,255,.55);}
.coin3d::after{content:"$";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:700;color:#8a5e0e;text-shadow:0 1px 0 #ffe9b3;}
.coin3d.c1{width:54px;height:54px;top:18px;right:20px;font-size:22px;animation:coinFloat 5.5s ease-in-out infinite;}
.coin3d.c2{width:32px;height:32px;top:64px;right:64px;font-size:14px;animation:coinFloat 7s ease-in-out infinite reverse;}
.coin3d.c3{width:20px;height:20px;top:34px;right:84px;font-size:10px;opacity:.85;animation:coinFloat 6s ease-in-out 1s infinite;}
.coin3d.c1::after{font-size:22px;}.coin3d.c2::after{font-size:14px;}.coin3d.c3::after{font-size:10px;}
@keyframes coinFloat{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-9px) rotate(5deg);}}
@media (prefers-reduced-motion:reduce){.coin3d{animation:none!important;}}

/* sparkle on the earn pill */
.mm-spark{display:inline-block;color:#d99c25;animation:sparkPulse 2.2s ease-in-out infinite;}
@keyframes sparkPulse{0%,100%{transform:scale(1);opacity:.75;}50%{transform:scale(1.25);opacity:1;}}

/* payout card coins */
.payout-card{position:relative;overflow:visible;}
.payout-card .coin3d.c1{width:44px;height:44px;top:-14px;right:18px;}
.payout-card .coin3d.c1::after{font-size:18px;}
.payout-card .coin3d.c2{width:26px;height:26px;top:22px;right:-8px;}
.payout-card .coin3d.c2::after{font-size:11px;}

/* save celebration burst */
.coin-burst{position:absolute;bottom:90px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:11px;color:#8a5e0e;z-index:5;pointer-events:none;
  background:radial-gradient(circle at 32% 28%,#fff 0%,#fdf3da 18%,#f2cf7a 48%,#d99c25 78%,#9c6c12 100%);
  box-shadow:0 6px 14px rgba(217,156,37,.35);
  animation:coinFly 1.15s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes coinFly{0%{transform:translate(0,0) scale(.4);opacity:0;}12%{opacity:1;transform:translate(calc(var(--tx)*.2),calc(var(--ty)*.35)) scale(1);}70%{opacity:1;}100%{transform:translate(var(--tx),calc(var(--ty)*-0.1)) scale(.85);opacity:0;}}

/* ===== tables ===== */
.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:600;padding:0 14px 11px;border-bottom:1px solid var(--glass-line);}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--glass-line);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:rgba(255,255,255,.4);}
.tbl .ar{text-align:right;}
.uav{display:inline-flex;align-items:center;gap:10px;}
.uav .a{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary-soft),#ddd0ef);color:var(--primary-d);display:grid;place-items:center;font-size:12px;font-weight:600;}

/* ===== tabs ===== */
/* Tabs. The count is metadata, not part of the label — "All 23" read as a
   sentence, so it now sits in its own pill and picks up the tab's state. The
   indicator is an inset rounded bar rather than a full-width border, which
   stops it colliding with the rule underneath. */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--glass-line);margin-bottom:22px;}
.tab{position:relative;display:inline-flex;align-items:center;gap:8px;border:none;background:none;padding:11px 14px 13px;font-size:14px;font-weight:600;color:var(--ink-3);border-radius:10px 10px 0 0;transition:color .15s,background .15s;}
.tab::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2.5px;border-radius:3px 3px 0 0;background:transparent;transition:background .18s;}
.tab:hover{color:var(--ink);background:rgba(19,21,27,.035);}
.tab.active{color:var(--primary-d);}
.tab.active::after{background:var(--primary);}
.tab .num-badge{font-family:var(--disp);font-size:11.5px;font-weight:700;font-feature-settings:"tnum";background:var(--canvas-2);color:var(--ink-3);border-radius:999px;padding:2px 8px;min-width:22px;text-align:center;transition:background .15s,color .15s;}
.tab:hover .num-badge{color:var(--ink-2);}
.tab.active .num-badge{background:var(--primary-soft);color:var(--primary-d);}
.subscreen{display:none;}
.subscreen.active{display:block;}
.pf-pane{display:none;}
.pf-pane.active{display:block;}

/* ===== referral ===== */
.linkbox{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.5);border:1px solid var(--glass-brd);border-radius:var(--rs);padding:6px 6px 6px 14px;}
.linkbox code{font-family:var(--disp);font-size:14px;flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* link "generating" animation when the client-type toggles */
@keyframes linkGen{0%{opacity:.25;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes linkGlow{0%{box-shadow:0 0 0 0 rgba(97,57,132,.32)}100%{box-shadow:0 0 0 7px rgba(97,57,132,0)}}
.linkbox.gen{animation:linkGlow .6s ease;}
.linkbox.gen code{animation:linkGen .5s cubic-bezier(.2,.85,.25,1);}
/* personalize name field with an inset person icon */
.ref-name-field{position:relative;max-width:320px;}
.ref-name-field>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-4);pointer-events:none;transition:color .15s;}
.ref-name-field .inp{width:100%;padding:10px 14px 10px 38px;font-size:13.5px;}
.ref-name-field:focus-within>svg{color:var(--primary);}
.linkbox .lk-ic{color:var(--primary);display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--primary) 13%,transparent);}
.linkbox .lk-ic svg{width:16px;height:16px;}
.lk-for{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--primary);background:color-mix(in srgb,var(--primary) 11%,transparent);border-radius:999px;padding:3px 11px 3px 8px;white-space:nowrap;}
.lk-for svg{width:13px;height:13px;}
/* referral card */
.referral-card .rc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.referral-card .rc-actions{display:flex;gap:12px;align-items:stretch;}
.referral-card .rc-actions .linkbox{flex:1;min-width:0;}
.referral-card .rc-actions .btn{flex:0 0 auto;}
@media(max-width:720px){.referral-card .rc-actions{flex-wrap:wrap;}.referral-card .rc-actions .linkbox{flex:1 1 100%;}}

/* industry switcher */
.ind-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
@media(max-width:820px){.ind-switch{grid-template-columns:1fr;}}
.is{display:flex;align-items:center;gap:12px;text-align:left;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1.5px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s,transform .1s;}
.is:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
.is.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.is-ic{width:40px;height:40px;border-radius:11px;background:var(--canvas-2);display:grid;place-items:center;font-size:19px;flex:0 0 auto;}
.is.on .is-ic{background:var(--primary-soft);}
.is-t{flex:1;min-width:0;}
.is-t b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.is-t small{font-size:12px;color:var(--ink-4);}
.is .pill{flex:0 0 auto;}
.is[data-ind=wf],.is[data-ind=sw]{opacity:.92;}

/* coming-soon panel */
.soon-panel{text-align:center;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-brd);border-radius:var(--rl);padding:48px 32px;box-shadow:var(--shadow-md);}
.soon-panel .soon-ic{width:64px;height:64px;border-radius:18px;background:var(--canvas-2);color:var(--ink-3);display:grid;place-items:center;margin:0 auto 16px;}
.soon-panel .soon-ic svg{width:28px;height:28px;}
.soon-panel h3{font-family:var(--disp);font-size:22px;font-weight:600;margin:0 0 8px;letter-spacing:-.02em;}
.soon-panel .muted{max-width:460px;margin:0 auto 22px;font-size:14.5px;line-height:1.55;}
.soon-preview{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:26px;}
.soon-chip{font-size:13px;font-weight:600;color:var(--ink-3);background:var(--canvas);border:1px dashed var(--line-2);border-radius:999px;padding:7px 14px;}
.btn.done{background:var(--good-soft)!important;color:var(--good)!important;border-color:transparent!important;}

/* ===== profile redesign ===== */
.pf-logo{display:flex;gap:16px;align-items:center;margin-bottom:22px;}
.pf-sec-label{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);margin:0 0 14px;}
.pf-side{background:var(--canvas);position:sticky;top:96px;}
.pf-pct{font-family:var(--disp);font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1;}
.pf-check{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);padding:7px 0;}
.pfc-ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;flex:0 0 auto;background:var(--canvas-2);color:var(--ink-4);}
.pfc-ic.done{background:var(--good);color:#fff;}
.code.sm-code{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:14px;max-width:330px;}
.code.sm-code .cbox{width:100%;min-width:0;height:46px;font-size:20px;padding:0;border-radius:10px;}
@media(max-width:980px){.pf-side{position:static;}}

/* ===== phone verification ===== */
.phone-verify{display:flex;gap:8px;align-items:stretch;}
.phone-cc{display:inline-flex;align-items:center;gap:6px;padding:0 13px;border:1px solid var(--line-2);border-radius:var(--rs);background:var(--canvas);font-size:14px;font-weight:600;color:var(--ink-2);flex:0 0 auto;}
.phone-cc .flag{font-size:16px;}
.phone-verify .inp{flex:1;min-width:0;}
.phone-verify .btn{flex:0 0 auto;}
.phone-verify .btn.done{background:var(--good-soft);color:var(--good);border-color:transparent;}
.verify-status{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--warn);margin-top:8px;}
.verify-status .vs-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);}
.verify-status.ok{color:var(--good);}
.verify-status.ok .vs-dot{background:var(--good);}
.phone-otp{display:none;margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--canvas);}
.phone-otp.show{display:block;}
.otp-head{display:flex;align-items:center;gap:11px;margin-bottom:13px;}
.otp-head .otp-ic{width:34px;height:34px;border-radius:10px;background:var(--primary-soft);color:var(--primary-d);display:grid;place-items:center;font-size:16px;flex:0 0 auto;}
.otp-head b{font-size:13.5px;display:block;}
.otp-head small{font-size:12px;color:var(--ink-3);}
.code.sm-code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px;}
.code.sm-code .cbox{width:100%;min-width:0;height:48px;font-size:20px;padding:0;}
.otp-foot{display:flex;align-items:center;gap:14px;}
.otp-resend{font-size:12.5px;color:var(--ink-4);}
.otp-resend.active{color:var(--primary-d);font-weight:600;cursor:pointer;text-decoration:underline;}
@media(max-width:520px){
  .phone-verify{flex-wrap:wrap;}
  .phone-verify .inp{flex:1 1 60%;}
  .phone-verify .btn{flex:1 1 100%;}
  .code.sm-code{gap:6px;}
  .code.sm-code .cbox{height:52px;font-size:22px;}
}

/* ===== first-time welcome ===== */
.welcome-overlay{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:28px 18px;overflow:auto;
  background:radial-gradient(900px 620px at 16% 12%,rgba(138,95,176,.34),transparent 58%),radial-gradient(820px 600px at 88% 96%,rgba(10,94,77,.5),transparent 55%),linear-gradient(155deg,#251635,#140d1f 74%);}
.welcome-overlay.open{display:flex;animation:wfade .3s ease;}
@keyframes wfade{from{opacity:0;}to{opacity:1;}}
.welcome-card{position:relative;width:100%;max-width:560px;}
.welcome-glow{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:300px;height:200px;background:radial-gradient(circle,rgba(43,208,122,.4),transparent 70%);filter:blur(20px);pointer-events:none;}
.welcome-inner{position:relative;background:rgba(255,255,255,.97);border-radius:24px;padding:36px 38px;box-shadow:0 40px 100px rgba(0,0,0,.5);animation:wpop .4s cubic-bezier(.2,.8,.3,1);}
@keyframes wpop{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}
.welcome-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--primary-d);background:var(--primary-soft);border-radius:999px;padding:6px 13px;margin-bottom:16px;}
.welcome-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--good);}
.welcome-h{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px;line-height:1.1;}
.welcome-h span{color:var(--primary-d);}
.welcome-sub{font-size:15px;color:var(--ink-3);margin:0 0 24px;line-height:1.55;max-width:440px;}
.welcome-steps{display:flex;flex-direction:column;gap:11px;margin-bottom:26px;}
.wstep{display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;}
.wstep:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.wstep .ws-n{width:24px;height:24px;border-radius:50%;background:var(--canvas-2);color:var(--ink-3);font-family:var(--disp);font-weight:600;font-size:12.5px;display:grid;place-items:center;flex:0 0 auto;}
.wstep:hover .ws-n{background:var(--primary);color:#fff;}
.wstep .ws-ic{width:40px;height:40px;border-radius:12px;background:var(--primary-soft);display:grid;place-items:center;font-size:19px;flex:0 0 auto;}
.wstep .ws-body{flex:1;min-width:0;}
.wstep .ws-body b{font-size:14.5px;font-weight:600;display:block;letter-spacing:-.01em;}
.wstep .ws-body small{font-size:12.5px;color:var(--ink-3);}
.wstep .ws-go{color:var(--ink-4);font-size:18px;flex:0 0 auto;transition:transform .15s,color .15s;}
.wstep:hover .ws-go{color:var(--primary);transform:translateX(3px);}
.welcome-actions{display:flex;gap:11px;}
.welcome-actions .btn{flex:1;}
@media(max-width:560px){
  .welcome-inner{padding:28px 22px;}
  .welcome-h{font-size:25px;}
  .welcome-actions{flex-direction:column-reverse;}
  .wstep .ws-ic{width:36px;height:36px;font-size:17px;}
}

/* ===== earnings balance + withdraw ===== */
.balance-card{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:28px;background:linear-gradient(135deg,#33224a 0%,#1d1230 55%,#140d1f 100%);border:1px solid #ffffff14;border-radius:var(--rl);padding:18px 22px;margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-md);}
.balance-glow{position:absolute;top:-60%;left:55%;width:70%;height:180%;background:radial-gradient(circle,rgba(138,95,176,.38),transparent 65%);pointer-events:none;}
.balance-card::after{content:"";position:absolute;left:-40px;bottom:-70px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(217,156,37,.14),transparent 70%);pointer-events:none;}
.bc-main{position:relative;min-width:230px;}
.bc-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#bfa6dc;}
.bc-amt{display:flex;align-items:baseline;gap:8px;font-family:var(--disp);font-size:34px;font-weight:600;letter-spacing:-.03em;color:#fff;line-height:1;margin:6px 0 7px;}
.bc-cur{font-size:14px;font-weight:600;color:#bfa6dc;letter-spacing:0;}
.bc-meta{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#9fb0aa;white-space:nowrap;}
.bc-meta .bc-dot{width:7px;height:7px;border-radius:50%;background:#2bd07a;flex:0 0 auto;}
.bc-side{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:9px;}
/* stats + decorative coins */
.bc-coin{position:absolute;top:-26px;right:-16px;width:54px;height:54px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 32% 28%,#fff 0%,#fdf3da 16%,#f2cf7a 46%,#d99c25 76%,#9c6c12 100%);
  box-shadow:0 12px 26px rgba(217,156,37,.38),inset 0 -5px 12px rgba(156,108,18,.3),inset 0 3px 7px rgba(255,255,255,.55);
  animation:coinFloat 6s ease-in-out infinite;}
.bc-coin::after{content:"$";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:20px;color:#8a5e0e;text-shadow:0 1px 0 #ffe9b3;}
.bc-coin.sm{width:28px;height:28px;top:auto;bottom:-12px;left:-13px;right:auto;animation:coinFloat 7.5s ease-in-out 1s infinite reverse;}
.bc-coin.sm::after{font-size:12px;}
.bc-stats{position:relative;display:flex;gap:28px;background:#ffffff0d;border:1px solid #ffffff14;border-radius:14px;padding:12px 20px;}
.bc-stat{position:relative;}
.bc-stat+.bc-stat::before{content:"";position:absolute;left:-14px;top:4px;bottom:4px;width:1px;background:#ffffff1c;}
.bc-stat small{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#9b8cb4;margin-bottom:4px;white-space:nowrap;}
.bc-stat b{font-family:var(--disp);font-size:16.5px;font-weight:500;color:#fff;letter-spacing:-.01em;white-space:nowrap;}
@media(max-width:1080px){.bc-stats{display:none;}.bc-coin{display:none;}.balance-card{grid-template-columns:1fr auto;}}
@media(max-width:640px){.balance-card{grid-template-columns:1fr;gap:18px;}.bc-side{align-items:stretch;}}
.withdraw-btn{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffe9b3,#f2cf7a 45%,#e0a82e);border:1px solid #ffd98c;color:#3a2c08;font-weight:700;box-shadow:0 10px 26px rgba(224,168,46,.38);animation:wbPulse 2.8s ease-in-out infinite;}
.withdraw-btn:hover{background:linear-gradient(135deg,#fff0c8,#f6d98a 45%,#e8b23c);transform:translateY(-1px);}
.withdraw-btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:42%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);animation:wbSheen 3s ease-in-out infinite;}
@keyframes wbPulse{0%,100%{box-shadow:0 10px 26px rgba(224,168,46,.34);}50%{box-shadow:0 14px 36px rgba(224,168,46,.55);}}
@keyframes wbSheen{0%,55%{left:-70%;}85%,100%{left:140%;}}
@media (prefers-reduced-motion:reduce){.withdraw-btn{animation:none;}.withdraw-btn::after{animation:none;display:none;}}
.bc-method{font-size:12px;color:#8b9a94;}
@media(max-width:560px){.bc-side{align-items:stretch;width:100%;}.withdraw-btn{width:100%;}.bc-method{text-align:center;}}

/* withdraw modal */
.wd-overlay.open{align-items:center;justify-content:center;}
.wd-modal{max-width:440px;}
body.member .wd-overlay.open{align-items:center;justify-content:center;padding:28px 18px;background:rgba(8,14,12,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
body.member .wd-modal{width:100%;height:auto;max-height:none;border-radius:var(--rl);border:1px solid var(--glass-brd);padding:26px 28px;box-shadow:var(--shadow-lg);overflow:visible;}
.wd-lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:16px 0 8px;}
.wd-amt-box{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line-2);border-radius:var(--rs);padding:8px 12px;background:var(--canvas);}
.wd-amt-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.wd-cur{font-family:var(--disp);font-size:24px;font-weight:600;color:var(--ink-3);}
.wd-input{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--disp);font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.02em;}
.wd-max{flex:0 0 auto;border:none;background:var(--primary-soft);color:var(--primary-d);font-weight:600;font-size:12px;border-radius:7px;padding:5px 11px;}
.wd-quick{display:flex;gap:8px;margin-top:10px;}
.wd-q{flex:1;border:1px solid var(--line-2);background:var(--surface);border-radius:9px;padding:7px;font-size:13px;font-weight:600;color:var(--ink-2);transition:all .15s;}
.wd-q:hover{border-color:var(--primary);color:var(--primary-d);}
.wd-methods{display:flex;flex-direction:column;gap:9px;}
.wd-method{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s;}
.wd-method input{display:none;}
.wd-method.on{border-color:var(--primary);background:var(--primary-soft);}
.wd-method .wd-m-ic{width:36px;height:36px;border-radius:10px;background:var(--canvas-2);display:grid;place-items:center;font-size:17px;flex:0 0 auto;}
.wd-method.on .wd-m-ic{background:#fff;}
.wd-m-body{flex:1;min-width:0;}
.wd-m-body b{font-size:14px;display:block;letter-spacing:-.01em;}
.wd-m-body small{font-size:12px;color:var(--ink-3);}
.wd-m-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:12px;color:transparent;flex:0 0 auto;}
.wd-method.on .wd-m-check{background:var(--primary);border-color:var(--primary);color:#fff;}
.wd-summary,.wd-receipt{background:var(--canvas);border-radius:13px;padding:14px 16px;margin:18px 0;}
.wd-row{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13.5px;color:var(--ink-3);margin-bottom:9px;}
.wd-row:last-child{margin-bottom:0;}
.wd-row b{color:var(--ink);font-weight:600;white-space:nowrap;text-align:right;}
.wd-row.total{border-top:1px solid var(--line);padding-top:11px;margin-top:11px;font-size:15px;color:var(--ink);}
.wd-row.total b{font-family:var(--disp);font-size:17px;}

/* ===== documents ===== */
.doc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;}
.doc-alert{display:flex;align-items:center;gap:14px;background:var(--warn-soft);border:1px solid #f0dcb4;border-radius:var(--r);padding:14px 18px;margin-bottom:20px;}
.doc-alert .da-ic{width:38px;height:38px;border-radius:11px;background:#f6e3bd;color:var(--warn);display:grid;place-items:center;flex:0 0 auto;}
.doc-alert .da-body{flex:1;min-width:0;}
.doc-alert .da-body b{font-size:14px;}
.doc-alert .da-body p{margin:2px 0 0;font-size:13px;color:var(--ink-3);}
.doc-tabs{display:flex;gap:4px;border-bottom:1px solid var(--glass-line);margin-bottom:20px;flex-wrap:wrap;}
.doc-pane{display:none;}
.doc-pane.active{display:block;}
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:900px){.doc-grid{grid-template-columns:1fr;}.doc-head{flex-direction:column;align-items:flex-start;}}
.doc-card{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-brd);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:7px;transition:transform .12s,box-shadow .15s;}
.doc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.doc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}
.doc-ic{font-family:var(--disp);font-size:10px;font-weight:600;letter-spacing:.05em;color:#fff;border-radius:8px;width:38px;height:38px;display:grid;place-items:center;}
.doc-ic.pdf{background:#c0463c;}
.doc-ic.doc{background:#3a6ea5;}
.doc-ic.tpl{background:var(--primary);}
.doc-card h4{font-family:var(--disp);font-size:15.5px;font-weight:600;margin:0;letter-spacing:-.01em;}
.doc-meta{font-size:12px;color:var(--ink-4);margin:0;}
.doc-desc{font-size:13px;color:var(--ink-2);margin:2px 0 0;line-height:1.5;flex:1;}
.doc-actions{display:flex;gap:8px;margin-top:10px;}
.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.fstep{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-brd);border-radius:16px;padding:16px 17px;box-shadow:var(--shadow-md);position:relative;transition:transform .16s ease,box-shadow .2s ease;}
.fstep:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.fstep-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px;}
.fstep-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:0 0 auto;box-shadow:0 4px 12px rgba(97,57,132,.22);}
.fstep-ic svg{width:17px;height:17px;}
.fstep:nth-child(1) .fstep-ic{background:linear-gradient(135deg,#bda5db,#a385cd);}
.fstep:nth-child(2) .fstep-ic{background:linear-gradient(135deg,#a07fce,#8a62bd);}
.fstep:nth-child(3) .fstep-ic{background:linear-gradient(135deg,#8259b8,#6e44a2);}
.fstep .v{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1;}
.fstep .k{font-size:13px;color:var(--ink-3);margin-top:4px;font-weight:500;}
.fstep .conv{font-size:11px;font-weight:700;color:var(--primary-d);background:rgba(97,57,132,.1);border-radius:999px;padding:3px 9px;white-space:nowrap;line-height:1.3;}
.fstep .conv:empty{display:none;}
.fbar{height:6px;border-radius:999px;background:rgba(20,16,40,.07);margin-top:14px;overflow:hidden;}
.fbar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--primary-l),var(--primary-d));transition:width .8s cubic-bezier(.2,.85,.25,1);}
.fstep:nth-child(1) .fbar i{background:linear-gradient(90deg,#bda5db,#a385cd);}
.fstep:nth-child(2) .fbar i{background:linear-gradient(90deg,#a07fce,#8a62bd);}
.fstep:nth-child(3) .fbar i{background:linear-gradient(90deg,#8259b8,#6e44a2);}
.fstep:not(:last-child)::after{content:"";position:absolute;right:-11px;top:33px;width:0;height:0;border:5px solid transparent;border-left-color:var(--line-2);z-index:3;}
.fstep.lit{background:linear-gradient(150deg,var(--primary-l),var(--primary-d));border-color:transparent;box-shadow:var(--glow);}
.fstep.lit .fstep-ic{background:rgba(255,255,255,.22);box-shadow:none;}
.fstep.lit .v,.fstep.lit .k{color:#fff;}
.fstep.lit .k{color:#e0d2f0;}
.fstep.lit .conv{background:rgba(255,255,255,.22);color:#fff;}
.fstep.lit .fbar{background:rgba(255,255,255,.22);}
.fstep.lit .fbar i{background:#fff;}

/* progress bar */
.pbar{height:8px;background:var(--canvas-2);border-radius:999px;overflow:hidden;}
.pbar>span{display:block;height:100%;background:linear-gradient(90deg,var(--primary-l),var(--primary));border-radius:999px;}

/* chart bars */
.bars{display:flex;align-items:flex-end;gap:18px;height:150px;padding-top:10px;}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:flex-end;height:100%;}
.bars .b .bar{width:100%;max-width:46px;min-height:6px;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,var(--primary-l),var(--primary));box-shadow:0 4px 14px rgba(97,57,132,.18);height:0;transition:height .85s cubic-bezier(.2,.85,.25,1),filter .15s ease,transform .15s ease;}
.bars .b:hover .bar{filter:brightness(1.07) saturate(1.08);transform:scaleX(1.04);}
.bars .b:hover .amt{color:var(--primary-d);}
.bars .b .bar.alt{background:linear-gradient(180deg,#f0bf4a,var(--amber));box-shadow:0 4px 14px rgba(214,158,46,.22);}
.bars .b .lab{font-size:12px;color:var(--ink-3);transition:color .15s;}
.bars .b:hover .lab{color:var(--ink-2);}
.bars .b .amt{font-family:var(--disp);font-size:13px;font-weight:600;transition:color .15s;}
/* trend chart fills its card; revenue-by-plan list scrolls so both cards match height */
#rep-bars{flex:1 1 auto;}
#rep-mix{flex:1 1 auto;overflow-y:auto;min-height:0;}

/* ===== auth modal ===== */
.overlay{position:fixed;inset:0;background:rgba(20,23,28,.55);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:40px 18px;overflow:auto;}
.overlay.open{display:flex;}
body.guest .overlay.open{align-items:stretch;justify-content:flex-end;padding:0;background:rgba(8,14,12,.30);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
body.guest .modal{width:472px;max-width:472px;height:100vh;max-height:100vh;border-radius:0;border:none;border-left:1px solid rgba(255,255,255,.5);padding:40px 42px;overflow:auto;background:rgba(255,255,255,.94);box-shadow:-30px 0 70px rgba(8,20,16,.3);}
body.guest .modal-head{margin-top:6px;}
@media(max-width:560px){body.guest .modal{width:100%;max-width:100%;padding:24px 18px;}}
@media(max-width:980px){body.guest .overlay.open{align-items:stretch;justify-content:flex-end;padding:0;background:rgba(8,14,12,.45);}}
.modal{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(160%) blur(30px);backdrop-filter:saturate(160%) blur(30px);border:1px solid var(--glass-brd);border-radius:var(--rl);box-shadow:var(--shadow-lg);width:100%;max-width:432px;padding:26px 28px 24px;position:relative;}
.modal-x{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:8px;border:none;background:rgba(19,21,27,.06);color:var(--ink-3);font-size:13px;display:grid;place-items:center;transition:all .15s;}
.modal-x:hover{background:rgba(19,21,27,.12);color:var(--ink);}
.modal-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.modal-head .mk{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--primary-l),var(--primary-d));display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:600;font-size:20px;flex:0 0 auto;box-shadow:var(--glow);}
.mh-title{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.01em;}
.mh-title,.mh-sub{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.3,1);}
.mh-title.fresh{opacity:0;transform:translateY(9px);}
.mh-sub.fresh{opacity:0;transform:translateY(7px);}
.apanel.active{display:block;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.3,1);}
.apanel.active.fresh{opacity:0;transform:translateY(11px);}
.mh-sub{font-size:13px;color:var(--ink-3);}
.dots{display:flex;gap:7px;margin-bottom:20px;}
.dots .dot{height:5px;flex:1;border-radius:999px;background:var(--canvas-2);transition:background .2s;}
.dots .dot.on{background:var(--primary);}
.dots.hide{display:none;}
.apanel{display:none;}
.apanel.active{display:block;}
.sso{display:flex;flex-direction:column;gap:10px;}
.sso-btn{justify-content:center;gap:10px;font-weight:600;}
.sso-btn .g{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;background:rgba(19,21,27,.06);font-weight:700;font-size:12px;color:var(--ink);}
.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-4);font-size:12.5px;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--glass-line);}
.check-row,.login-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px;}
.check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink-2);margin-bottom:16px;line-height:1.4;cursor:pointer;}
.check input{margin-top:2px;accent-color:var(--primary);}
.login-row{margin-bottom:16px;}
.modal-foot{text-align:center;font-size:13.5px;color:var(--ink-3);margin:16px 0 2px;}
.modal-foot a{cursor:pointer;font-weight:600;}
.verify-lead{font-size:14px;color:var(--ink-2);margin:0 0 20px;line-height:1.55;}
.code{display:flex;gap:9px;justify-content:space-between;margin-bottom:22px;}
.cbox{width:100%;aspect-ratio:1;text-align:center;font-family:var(--disp);font-size:24px;font-weight:600;border:1.5px solid var(--line-2);border-radius:var(--rs);background:rgba(255,255,255,.6);color:var(--ink);}
.cbox:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.success{text-align:center;padding:6px 0 4px;}
.success .check{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--good-soft),#e0d2f0);color:var(--good);font-size:28px;margin:0 auto 14px;box-shadow:0 8px 20px rgba(29,138,95,.22);}
.success h3{font-family:var(--disp);font-size:21px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em;}
.success p{font-size:14px;margin:0 0 18px;}
.next-list{list-style:none;padding:0;margin:0 0 22px;}
.next-list li{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--glass-brd);background:rgba(255,255,255,.45);border-radius:var(--rs);margin-bottom:9px;font-size:14px;font-weight:500;color:var(--ink-2);}
.next-list .n{width:24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary-d);display:grid;place-items:center;font-weight:600;font-size:12.5px;flex:0 0 auto;}

@media(max-width:980px){
  .app{grid-template-columns:1fr;padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  /* hard guard: nothing may scroll the page sideways on a phone */
  html,body{overflow-x:hidden;}
  .app{min-width:0;}
  .canvas,.main,.screen{min-width:0;max-width:100vw;overflow-x:clip;}
  /* fixed bottom tab bar — app-style navigation */
  /* width + max-width are belt and braces: relying on left:0/right:0 alone let
     the bar size itself from its content on one screen and push the whole page
     sideways. It is a fixed bar — it is exactly one viewport wide, always. */
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:100vw;z-index:60;height:auto;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;align-items:stretch;gap:0;overflow-x:hidden;overflow-y:visible;padding:6px 4px calc(4px + env(safe-area-inset-bottom));border:none;border-top:1px solid var(--line);background:rgba(255,255,255,.93);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);box-shadow:0 -8px 28px rgba(20,16,40,.07);}
  .logo,.nav-h,.side-foot,.side-cta{display:none;}
  .side-util{display:contents;}
  /* show only the 5 primary tabs; the rest live in the "More" sheet */
  /* Five primary tabs + More. Eight tabs fit 390px only by truncating every
     label to "Dashb…", which is worse than not showing them: the rest are one
     tap away in More, and these five are the daily loop. */
  .side .nav[data-go="reporting"],.side .nav[data-go="documents"],.side .nav[data-go="markup"],.side .nav[data-go="profile"],.side .nav[data-go="help"],
  .side .nav[data-go="pricing"],.side .nav[data-go="financials"]{display:none;}
  /* a couple of names are too long for a 60px tab — show the short form there */
  .nav .lbl[data-short]{font-size:0;}
  .nav .lbl[data-short]::after{content:attr(data-short);font-size:10px;}
  .nav-more{display:flex!important;}
  .nav{flex:1 1 0;min-width:0;max-width:25%;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;border-radius:12px;color:var(--ink-3);overflow:hidden;}
  .nav .ic svg{width:22px;height:22px;}
  .nav .lbl{display:block!important;font-size:10px;font-weight:600;line-height:1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
  .nav.active{background:transparent;color:var(--primary);box-shadow:none;}
  .nav.active .ic{color:var(--primary);}
  .nav .num-badge{position:absolute;top:0;right:calc(50% - 19px);min-width:15px;height:15px;font-size:9px;padding:0 3px;line-height:15px;}
  /* top header: show logout, hide verbose actions on mobile */
  .top-logout{display:inline-flex!important;}
  .top .member-only:not(.top-logout){display:none;}
  /* clear the status bar / notch when installed as a standalone app, so the top doesn't feel cramped */
  .top{padding:calc(12px + env(safe-area-inset-top)) 16px 12px;position:sticky;top:0;z-index:55;background:rgba(247,244,250,.9);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);}
  .top h1{font-size:22px;font-weight:600;}
  .row{flex-direction:column;}
  .balance-card{grid-template-columns:1fr;gap:16px;}
  .balance-card .withdraw-btn{width:100%;}
  .stats,.funnel{grid-template-columns:repeat(2,1fr);}
  .plan-grid,.ind-grid{grid-template-columns:1fr;}
  .mk-wrap{grid-template-columns:1fr;}
  .mk-summary{position:static;}
  /* tab bars + filter chips scroll on one line instead of overflowing */
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{flex:0 0 auto;white-space:nowrap;}
  .plan-filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:3px;}
  .plan-filters::-webkit-scrollbar{display:none;}
  .pf{flex:0 0 auto;}
}
@media(max-width:600px){
  .top{padding:12px 15px;gap:10px;}
  .top h1{font-size:18px;}
  .top .crumb{font-size:10.5px;}
  .stats,.funnel{grid-template-columns:1fr 1fr;gap:10px;}
  .stat{padding:14px 15px;}
  .dash-h{font-size:19px;}
  .tbl{font-size:13px;}
  /* wide data tables swipe horizontally inside their card instead of squishing */
  #fin-subs .tbl,#fin-plan .tbl,#fin-payouts .tbl,#scr-reporting .tbl,#scr-referrals table.tbl{min-width:560px;}
  /* …and their card MUST scroll, else the 560px width pushes the whole page sideways [audit 1.1 CRITICAL] */
  #fin-subs .card.pad,#fin-plan .card.pad,#fin-payouts .card.pad,#scr-reporting .card.pad,#scr-referrals .card.pad{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* support conversation is inline-flex (not .row) so it never stacked — force full-width columns [1.2] */
  #scr-conversation>div{flex-direction:column;}
  #scr-conversation>div>.card{flex:1 1 100%;width:100%;min-width:0;}
  #scr-conversation>div>div:last-child{flex:1 1 100%;width:100%;max-width:100%;min-width:0;}
  #tt-body{height:46vh;}
  /* revenue-by-plan names don't clip at a fixed 96px [2.1] */
  .rep-mix-row .mix-name{width:auto;flex:1 1 auto;min-width:0;}
  /* doc-viewer + change-password modals carry inline widths that beat the sheet rule — override [3.1/3.2] */
  #doc-view-overlay .modal,#pwd-overlay .modal{width:100%!important;max-width:100%!important;}
  /* every segmented control (incl. inline-styled .seg-b) reaches a 42px tap height [4.1] */
  .seg button,.seg .seg-b{min-height:42px;}
  /* depth: layered elevation so cards read like a native app, not a flat page */
  .card,.stat{box-shadow:0 1px 2px rgba(20,16,40,.05),0 12px 30px rgba(20,16,40,.08);}
  .card.pad{border-radius:18px;}
  /* ---- stop sideways overflow + un-squish components ---- */
  .dash-greet,.setup-card,.row,.pricing-head,.doc-head{max-width:100%;}
  /* UNIVERSAL: every data table reflows into stacked "Label: value" cards — all info visible, NO horizontal scroll */
  .canvas table.tbl{min-width:0!important;display:block;border-collapse:collapse;}
  .canvas table.tbl thead{display:none;}
  .canvas table.tbl tbody{display:block;}
  .canvas table.tbl tr{display:block;padding:11px 2px;border-bottom:1px solid var(--line);}
  .canvas table.tbl tr:last-child{border-bottom:0;}
  .canvas table.tbl td{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right;padding:3px 0;border:0;font-size:13.5px;white-space:normal;word-break:break-word;}
  .canvas table.tbl td:first-child{justify-content:flex-start;text-align:left;margin-bottom:5px;font-weight:600;}
  .canvas table.tbl td[data-label]::before{content:attr(data-label) "";color:var(--ink-4);font-size:11.5px;font-weight:600;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:nowrap;}
  .canvas table.tbl td:first-child::before{display:none;}
  .canvas table.tbl td:empty{display:none;}
  /* a "swipe to see all columns" affordance is no longer needed — drop card scroll */
  #scr-dashboard .card.pad,#fin-subs .card.pad,#fin-plan .card.pad,#fin-payouts .card.pad,#scr-reporting .card.pad,#scr-referrals .card.pad{overflow-x:visible;}
  /* content felt inset/cramped — tighten the page gutters on phones (was 34px desktop padding) */
  .canvas{padding:16px 13px 96px;}
  /* stacked cards MUST fill width — inline align-items:flex-start was shrinking them to content (buttons/tables cut off) */
  .row{align-items:stretch!important;}
  /* recent-activity cells flow as a normal wrapping line ("X bought Y · N units"), not squished flex columns */
  #scr-dashboard table.tbl:not(.compact) td{display:block;text-align:left;padding:2px 0;}
  #scr-dashboard table.tbl:not(.compact) td::before{display:none!important;}
  #scr-dashboard table.tbl:not(.compact) td:first-child{margin-bottom:5px;font-weight:400;line-height:1.45;}
  #scr-dashboard table.tbl:not(.compact) .uav{display:inline-flex;vertical-align:middle;}
  /* withdraw: was an uncapped centered modal — make it a proper scrollable bottom-sheet, compact methods */
  body.member .wd-overlay.open{align-items:flex-end;justify-content:center;padding:0;}
  body.member .wd-modal{max-width:100%!important;width:100%!important;max-height:92vh!important;overflow-y:auto!important;border-radius:22px 22px 0 0!important;padding:22px 18px calc(20px + env(safe-area-inset-bottom))!important;animation:sheetUp .36s cubic-bezier(.2,.85,.25,1);}
  .wd-quick{gap:6px;}.wd-q{padding:9px 4px;}
  .wd-method{padding:10px 12px;gap:10px;}.wd-method .wd-m-ic{width:32px;height:32px;}
  /* link boxes never overflow — the url truncates */
  .linkbox{min-width:0;}.linkbox code{min-width:0;}
  /* pills never wrap into blobs (e.g. "1 signups · 1 paying", "Bought plan") */
  .pill{white-space:nowrap;}
  .referral-card .rc-head{flex-direction:column;}
  .referral-card .rc-head .pill{align-self:flex-start;}
  /* onboarding steps swipe instead of overflowing */
  .steps{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:18px;}
  .steps::-webkit-scrollbar{display:none;}
  .steps .s{flex:0 0 auto;white-space:nowrap;}
  .steps .bar{flex:0 0 22px;}
  /* markup-type toggle: 3 options stack full-width so none get cut off */
  #mk-seg{flex-direction:column;width:100%;}
  #mk-seg button{width:100%;}
  /* ===== verified mobile-audit fixes ===== */
  /* quick-action labels never clip */
  .btn.block{white-space:normal;}.col{min-width:0;}
  /* balance card stops overflowing */
  .bc-main{min-width:0;}.bc-meta{white-space:normal;}
  /* markup breakdown reads as a stacked, wrapping block */
  .mk-bd{flex-direction:column;white-space:normal;gap:6px;align-items:flex-start;}
  /* plan-type legend wraps instead of overflowing */
  .pricing-legend{flex-wrap:wrap;gap:12px;}
  /* settings + help contact rows stack, buttons go full-width (were off-screen) */
  .set-row{flex-direction:column;align-items:flex-start;gap:10px;}.set-row .btn{width:100%;}
  /* report download rows stack, buttons full-width */
  .rep-file{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;}.rep-file .btn{width:100%;white-space:normal;}
  /* referral type toggle stacks so "Service Pro" isn't clipped */
  #refTypeSeg{display:flex!important;flex-direction:column;}#refTypeSeg button,#refTypeSeg .seg-b{white-space:normal;}
  /* stat icon pinned to the corner (no float jitter) */
  .stat{position:relative;}.stat .ic{float:none;position:absolute;top:14px;right:14px;}
  /* bar charts get a real mobile size */
  .bars{gap:10px;height:120px;}.bar{max-width:42px;}.amt{font-size:12px;}.lab{font-size:11px;}
  /* signer modal name field + signature image fill the sheet (inline 280px caps overridden) */
  #doc-view-overlay #dv-name{max-width:100%!important;width:100%!important;}#doc-view-overlay img{max-width:100%!important;}
  /* referral-card pill wraps cleanly at 320px */
  .referral-card .rc-head .pill{white-space:normal;word-break:break-word;font-size:11px;padding:4px 9px;}
  /* support ticket list isn't a cramped inner scroller on phones */
  #tk-list{max-height:none!important;}
  /* markup slider label rows stack so the value isn't clipped */
  #mk-pct-row>div:first-child,#mk-flat-row>div:first-child,#mk-rev-row>div:first-child{flex-direction:column;gap:6px;align-items:flex-start;}
  .bc-amt{font-size:28px;}
  .pricing-head h2{font-size:21px;}
  .calc-right{padding:24px 22px 22px;}
  .card.pad{padding:18px;}
  /* premium bottom-sheet on phones: modals + the login drawer slide up from the bottom */
  .overlay.open{align-items:flex-end;justify-content:center;padding:0;}
  .overlay.open>.modal{max-width:100%;width:100%;border-radius:22px 22px 0 0;padding:22px 18px calc(20px + env(safe-area-inset-bottom));max-height:94vh;overflow-y:auto;animation:sheetUp .36s cubic-bezier(.2,.85,.25,1);}
  body.guest .overlay.open{align-items:flex-end;justify-content:center;padding:0;}
  body.guest .modal{width:100%;max-width:100%;height:auto;max-height:94vh;border-radius:22px 22px 0 0;border:none;border-top:1px solid rgba(255,255,255,.55);padding:24px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -18px 60px rgba(8,20,16,.28);overflow-y:auto;animation:sheetUp .36s cubic-bezier(.2,.85,.25,1);}
  .mk-summary .bigp{font-size:34px;}
  .wd-quick,.seg{flex-wrap:wrap;}
  .rc-actions{flex-wrap:wrap;}
  .doc-grid,.rep-files{grid-template-columns:1fr;}
  /* ---- mobile UX polish ---- */
  .inp{font-size:16px;}                              /* stop iOS zoom-on-focus */
  .btn{min-height:42px;}.btn.sm{min-height:34px;}    /* comfortable tap targets */
  .mh-title{font-size:18px;}.mh-sub{font-size:12.5px;}
  .modal-head{gap:10px;}.modal-head .mk{width:36px;height:36px;font-size:18px;}
  .modal-x{top:12px;right:12px;}
  .dots{margin:6px 0 16px;}
  .seg{width:100%;}.seg button{flex:1;text-align:center;}
  .wd-amt-box .wd-input{font-size:30px;}
  .wd-quick .wd-q{flex:1 1 calc(50% - 5px);}
  /* premium grab handle at the top of every bottom-sheet */
  .overlay.open>.modal::before,body.guest .modal::before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:rgba(20,23,28,.16);margin:-4px auto 14px;flex:0 0 auto;}
}
@keyframes sheetUp{from{transform:translateY(100%);opacity:.7}to{transform:translateY(0);opacity:1}}

/* ===== reporting ===== */
.rep-mix{display:flex;flex-direction:column;gap:13px;margin:4px 0 2px;}
.rep-mix-row{display:flex;align-items:center;gap:10px;}
.rep-mix-row .mix-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.rep-mix-row .mix-name{font-size:13px;font-weight:600;color:var(--ink-2);width:96px;flex:0 0 auto;}
.rep-mix-row .pbar{flex:1;}
.rep-mix-row b{font-size:13px;width:38px;text-align:right;flex:0 0 auto;}
.rep-files{display:flex;flex-direction:column;gap:10px;}
.rep-file{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--canvas);transition:border-color .15s,box-shadow .15s,transform .15s;}
.rep-file:hover{border-color:var(--primary-l);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.rep-file-ic{font-family:var(--disp);font-size:10px;font-weight:600;letter-spacing:.05em;color:#fff;border-radius:9px;width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;}
.rep-file-ic.pdf{background:#c0463c;}
.rep-file-ic.xls{background:var(--good);}
.rep-file-ic.doc{background:#3a6ea5;}
.rep-file-body{flex:1;min-width:0;}
.rep-file-body b{font-size:14px;font-weight:600;display:block;}
.rep-file-body p{font-size:12.5px;color:var(--ink-3);margin:2px 0 0;}

/* ===== very small phones (≤360px): give cramped grids/tables one column ===== */
@media(max-width:360px){
  .stats,.funnel{grid-template-columns:1fr;}
  .stat{padding:12px;}
  .stat .v{font-size:24px;}
  /* table cells stack label-over-value so nothing is squeezed side-by-side */
  .canvas table.tbl td{flex-direction:column;align-items:flex-start;text-align:left;gap:2px;}
  .canvas table.tbl td[data-label]::before{display:block;}
}

/* ===== mobile performance: backdrop blur + continuous animations are GPU-heavy on phones ===== */
@media(max-width:980px){
  /* flatten glass so removing blur stays legible */
  :root{--blur:none;--glass:rgba(255,255,255,.97);--glass-2:rgba(255,255,255,.95);}
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  /* halt the always-running animations (3D floats, spinning rings, marquees, coins, shimmer) */
  .h3d,.rotator .rot-word,.rm-track,.is-track,.coin3d{animation:none!important;}
  /* cursor-follow spotlight is pointless on touch */
  #spotlight{display:none!important;}
  /* the industry strip becomes a swipeable row instead of an infinite marquee */
  .is-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none;}
}

/* ===== Onboarding start banner — design 1a ==================================
   Numbered rows rather than a field of equal tiles: one required step, then
   what you sell, then what you hand out. Each row owns its padding and its own
   hairline, so the card reads as a short list you work down. The tiles inside
   steps 2 and 3 stay the app's glassy cards — this is the portal's vocabulary,
   not a second one. */
.start-card{position:relative;background:linear-gradient(180deg,#f9f6fd,#fff 42%);border:1px solid #e0d4ef;border-radius:var(--r);margin-bottom:20px;overflow:hidden;box-shadow:0 10px 30px rgba(52,26,80,.07),0 2px 6px rgba(52,26,80,.04);}
.start-card .setup-x{z-index:4;}

/* head: greeting, one bar of progress, and the coins */
.sc-head{position:relative;display:flex;align-items:center;gap:18px;padding:16px 22px;background:linear-gradient(180deg,#f7f3fc,#fff);border-bottom:1px solid rgba(28,20,32,.08);overflow:hidden;}
.sc-head::after{content:"";position:absolute;top:-70px;right:-20px;width:260px;height:180px;background:radial-gradient(closest-side,rgba(230,173,60,.40),transparent);pointer-events:none;}
/* the coins live in the head strip, clipped to it */
.start-coins{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.start-card .coin3d.c1{width:50px;height:50px;top:9px;right:64px;animation:coinFloat 5.2s ease-in-out infinite;}
.start-card .coin3d.c1::after{font-size:20px;}
.start-card .coin3d.c2{width:28px;height:28px;top:35px;right:128px;animation:coinFloat 4.4s ease-in-out .3s infinite;}
.start-card .coin3d.c2::after{font-size:12px;}
.start-card .coin3d.c3{width:20px;height:20px;top:9px;right:152px;opacity:.9;animation:coinFloat 6s ease-in-out .8s infinite;}
.start-card .coin3d.c3::after{font-size:9px;}
.sc-head-txt{position:relative;z-index:1;flex:1;min-width:0;max-width:360px;}
.sc-head-txt>b{display:block;font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:-.015em;}
.sc-bar{height:5px;border-radius:999px;background:rgba(28,20,32,.10);overflow:hidden;margin:9px 0 6px;}
.sc-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f0c15c,#e0a937);transition:width .45s cubic-bezier(.4,1.3,.5,1);}
.sc-note{display:block;font-size:11.5px;color:var(--ink-4);}

/* a numbered row */
.sc-step{display:flex;align-items:center;gap:14px;padding:13px 22px;}
.sc-num{flex:0 0 auto;width:26px;height:26px;border-radius:999px;background:var(--canvas-2);color:var(--ink-4);display:grid;place-items:center;font-family:var(--disp);font-size:12px;font-weight:700;}
.sc-step.now .sc-num{background:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(97,57,132,.28);}
.sc-step.done .sc-num,.sc-block.done .sc-num{background:var(--good-soft);color:var(--good);}
.sc-step-b{flex:1;min-width:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.sc-step-b>b{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.sc-step.done .sc-step-b>b,.sc-block.done .sc-step-b>b{color:var(--ink-3);}
.sc-sub{flex:1 0 100%;font-size:12.2px;color:var(--ink-3);}
.sc-flag{font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:4px 6px;border-radius:5px;background:var(--primary-soft);color:var(--primary-d);white-space:nowrap;}
.sc-flag.warn{background:var(--amber-soft);color:#8a5e0c;}
.sc-step .btn{flex:0 0 auto;}

/* steps 2 and 3 wrap their own row plus a two-up grid, indented to the number */
.sc-block{border-top:1px solid rgba(28,20,32,.07);padding-bottom:16px;background:#fcfbfd;}
.sc-block.last{background:transparent;}
.sc-block .sc-step{padding-bottom:0;}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:11px 22px 0 62px;}

/* what you sell */
.sc-pick{display:flex;flex-direction:column;gap:5px;text-align:left;background:var(--surface);border:1px solid var(--line-2);border-radius:11px;padding:11px 12px;cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .12s;}
.sc-pick:hover{border-color:var(--primary-l);transform:translateY(-2px);box-shadow:0 8px 18px rgba(97,57,132,.16);}
.sc-pick:active{transform:translateY(0);}
.sc-pick.on{border-color:var(--good);background:linear-gradient(180deg,#f4fbf7,#fff);}
.sc-pick-h{display:flex;align-items:center;gap:9px;}
.sc-pick-h>b{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.sc-pick-ic{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;}
.sc-pick-ic svg{width:14px;height:14px;}
.sc-pick-ic.primary{background:var(--primary);color:#fff;}
.sc-pick-ic.gold{background:#f0c15c;color:#4a2e02;}
.sc-pick-pay{margin-left:auto;font-family:var(--disp);font-size:11.5px;font-weight:600;color:var(--primary-d);white-space:nowrap;}
.sc-tick{flex:0 0 auto;width:18px;height:18px;border-radius:999px;background:var(--good);color:#fff;display:grid;place-items:center;font-size:11px;}
.sc-pick-d{font-size:12px;line-height:1.45;color:var(--ink-3);}

/* what you hand out */
.sc-share{display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:11px;}
.sc-share.link{border:1px solid rgba(97,57,132,.20);background:linear-gradient(180deg,#faf7fd,#fff);}
.sc-share.code{border:1px solid rgba(230,173,60,.50);background:linear-gradient(180deg,#fefaf0,#fff);}
.sc-share-h{display:flex;align-items:center;gap:8px;}
.sc-share.link .sc-share-h svg{color:var(--primary);flex:0 0 auto;}
.sc-share.code .sc-share-h svg{color:#8a5e0c;flex:0 0 auto;}
.sc-share-t{flex:1;min-width:0;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-share-tag{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--primary-d);white-space:nowrap;}
.sc-share-tag.gold{color:#8a5e0c;}
.sc-share-row{display:flex;align-items:center;gap:8px;}
.sc-link{flex:1;min-width:0;font-family:var(--disp);font-size:12px;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-code{flex:1;min-width:0;text-align:center;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--ink);background:#fff;border:1px dashed rgba(138,94,12,.45);border-radius:8px;padding:8px 10px;}
.sc-share-row .btn{flex:0 0 auto;}

@media(max-width:820px){
  .sc-head{flex-direction:column;align-items:flex-start;}
  .sc-head-txt{max-width:none;}
  .start-coins{display:none;}
  .sc-grid{grid-template-columns:1fr;padding-left:22px;}
  .sc-step{flex-wrap:wrap;}
  .sc-step .btn{width:100%;}
}

/* ===== Properties =========================================================
 * Listing grid + the add/edit sheet. Ported from the Lead Partner Workspace's
 * listings tab and rebuilt on this portal's tokens — no new colours, only the
 * ones already defined at :root. ======================================== */
.modal.wide{max-width:760px;}

/* ===== Properties toolbar ===================================================
 * Tabs and the search / sort / Add controls share ONE line. Restored after a
 * careless replacement dropped them, which collapsed the row into a stack. */
.lst-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--glass-line);margin-bottom:20px;}
.lst-bar .tabs{border-bottom:none;margin-bottom:-1px;flex:0 1 auto;}
.lst-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-bottom:9px;}
.lst-search{position:relative;display:flex;align-items:center;}
.lst-search svg{position:absolute;left:12px;color:var(--ink-4);pointer-events:none;}
.lst-search .inp{width:210px;padding:8px 12px 8px 34px;font-size:14px;}
.lst-tools select.inp{width:auto;min-width:148px;flex:0 0 auto;padding:8px 12px;font-size:14px;}
@media(max-width:820px){
  .lst-bar{flex-direction:column;align-items:stretch;}
  .lst-tools{padding-bottom:12px;}
  .lst-search{flex:1;}
  .lst-search .inp,.lst-tools select.inp{width:100%;}
}

/* ===== Partner discount code ================================================
 * The code sits next to the referral link, not on a screen of its own — they
 * are the same offer reaching someone two different ways. Monospaced, boxed and
 * uppercase so it reads as something you type, never as a label. */
.promo-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.promo-txt{min-width:0;}
.promo-txt>b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;}
.promo-txt>p{margin:3px 0 0;font-size:13px;color:var(--ink-3);text-wrap:pretty;}
.promo-txt>p b{color:var(--ink);font-weight:700;}
.promo-code{display:flex;align-items:center;gap:10px;flex:0 0 auto;background:rgba(255,255,255,.62);border:1px dashed var(--primary-l);border-radius:var(--rs);padding:7px 7px 7px 14px;}
.promo-code code{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:.14em;color:var(--primary-d);white-space:nowrap;}

/* Dashboard one-liner: code, one line of why, and the way to the full page. */
.promo-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px;
  background:linear-gradient(105deg,var(--primary-soft),rgba(255,255,255,.9) 58%);border-color:#e0d4ef;}
.promo-strip .promo-txt{flex:1;min-width:180px;}
.promo-strip .promo-code{background:rgba(255,255,255,.85);}
@media(max-width:640px){
  .promo-row{flex-direction:column;align-items:stretch;}
  .promo-code{justify-content:space-between;}
  .promo-strip{align-items:stretch;}
  .promo-strip .btn{width:100%;}
}

/* ===== Invited users: source + tools ========================================
   The source badge answers "how did this client reach me" at a glance — the
   link tracked them, or they typed the code. Deliberately quieter than the
   status pill next to it: status is what the client did, source is only where
   they came from. */
.ref-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.inp.sm{padding:7px 10px;font-size:12.5px;border-radius:9px;height:auto;}
#ref-q{min-width:210px;}
#ref-source{min-width:150px;}
.src{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.src-link{background:var(--primary-soft);color:var(--primary-d);}
.src-code{background:var(--amber-soft);color:#8a5e0c;}
.src-none{background:transparent;color:var(--ink-4);padding-left:0;}
/* Rows that arrived since the partner last opened this tab. */
.ref-new td{background:linear-gradient(90deg,rgba(97,57,132,.055),transparent 60%);}
.new-dot{margin-left:8px;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--primary-d);background:var(--primary-soft);border-radius:999px;padding:2px 7px;}
@media(max-width:640px){.ref-tools{width:100%;}#ref-q,#ref-source{flex:1;min-width:0;}}

/* the outstanding-setup chips in the onboarding banner */
.sc-todo{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:7px;margin-top:7px;}
.sc-miss{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #f0ddb6;border-radius:999px;padding:6px 12px;font-family:inherit;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .12s;}
.sc-miss:hover{border-color:var(--amber);box-shadow:0 6px 14px rgba(217,156,37,.20);transform:translateY(-1px);}
.sc-miss i{font-style:normal;font-size:14px;line-height:1;color:var(--bad);font-weight:700;}

/* the dial-code picker sits flush against the number box */
select.phone-cc{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--canvas-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367717f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 8px center/12px;border:1px solid var(--line-2);border-radius:var(--rs);padding:11px 26px 11px 12px;cursor:pointer;}
select.phone-cc:focus{outline:2px solid var(--primary);outline-offset:1px;}

/* The Tenancies board is a ported CRM screen with fixed-width kanban columns.
   Anything in there that is wider than the page must scroll inside its own box
   — never stretch the card, and never push the layout sideways. These are
   containment guards, deliberately blunt, because the wide child varies with
   how many stages and columns a partner has. */
#scr-tenancies{min-width:0;max-width:100%;overflow-x:clip;}
#scr-tenancies .tb2-canvas{min-width:0;max-width:100%;box-sizing:border-box;}
#tb2-board,#tb2-list,#tb2-chipbar,#tb2-dealtabs{max-width:100%;min-width:0;}

/* ===== Prospects board: make the sideways scroll visible ====================
   The stage board and the deal-type tabs already scroll horizontally, but with
   the scrollbar hidden they simply looked cut off at the right edge — there was
   nothing to say more columns existed. A thin permanent scrollbar and a snap
   per column say it without taking any space. */
#tb2-board{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;scroll-snap-type:x proximity;overscroll-behavior-x:contain;}
#tb2-board > *{scroll-snap-align:start;}
#tb2-board::-webkit-scrollbar,#tb2-dealtabs::-webkit-scrollbar{height:8px;}
#tb2-board::-webkit-scrollbar-thumb,#tb2-dealtabs::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px;}
#tb2-board::-webkit-scrollbar-thumb:hover,#tb2-dealtabs::-webkit-scrollbar-thumb:hover{background:var(--ink-4);}
#tb2-board::-webkit-scrollbar-track,#tb2-dealtabs::-webkit-scrollbar-track{background:transparent;}
#tb2-dealtabs{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;}

/* ===== Toasts ================================================================
 * showToast() lives in pt2.js and has been called from ~30 places since the
 * port — publish, occupancy, copy link, journey moves, e-sign, screening — but
 * NOTHING ever styled what it appends, so every one of those confirmations was
 * an unstyled div at the end of <body>: below the fold, invisible in practice.
 * This is that missing stylesheet. Match pt2's contract exactly: the host is
 * #pt2-toasts, each toast is .pt2-toast.<kind> and is shown by adding .in.
 * Above every overlay in the app (the ported CRM screens reach z 11500) — a
 * confirmation you cannot see is the same as no confirmation at all. */
#pt2-toasts{position:fixed;right:18px;bottom:18px;z-index:12000;display:flex;flex-direction:column;gap:9px;align-items:flex-end;pointer-events:none;max-width:min(390px,calc(100vw - 36px));}
.pt2-toast{pointer-events:auto;position:relative;max-width:100%;padding:11px 15px 11px 34px;border-radius:13px;background:rgba(22,17,30,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-family:var(--sans);font-size:13.5px;font-weight:500;line-height:1.42;letter-spacing:-.005em;text-wrap:pretty;box-shadow:0 16px 38px rgba(20,10,35,.30),0 2px 6px rgba(20,10,35,.20);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .2s ease,transform .2s cubic-bezier(.2,.9,.3,1.2);}
.pt2-toast.in{opacity:1;transform:none;}
/* the status dot stands in for an icon — pt2 emits text only, no child nodes */
.pt2-toast::before{content:"";position:absolute;left:14px;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:#c7a9ea;box-shadow:0 0 0 3px rgba(199,169,234,.18);}
.pt2-toast.success::before{background:#5fe0ab;box-shadow:0 0 0 3px rgba(95,224,171,.18);}
.pt2-toast.warning::before,.pt2-toast.warn::before{background:#f6c66d;box-shadow:0 0 0 3px rgba(246,198,109,.18);}
.pt2-toast.error::before,.pt2-toast.danger::before{background:#ff9d93;box-shadow:0 0 0 3px rgba(255,157,147,.18);}
/* Above the bottom tab bar, not over it — a toast that covers the navigation
   is a toast that costs the user a tap. The bar is 64px plus the safe area. */
@media(max-width:980px){#pt2-toasts{bottom:calc(76px + env(safe-area-inset-bottom));}}
@media(max-width:640px){#pt2-toasts{left:12px;right:12px;align-items:stretch;max-width:none;}}
@media (prefers-reduced-motion:reduce){.pt2-toast{transition:opacity .15s;transform:none;}.pt2-toast.in{transform:none;}}

/* ===== Property rows =========================================================
 * One wide row per property rather than a grid tile: photo rail on the left,
 * the facts in one readable column, and the actions on a bar of their own.
 * Matches the Lead Partner Workspace card, built on this portal's tokens. */
.lst-grid{display:flex;flex-direction:column;gap:16px;}
.lst-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;min-height:0;transition:box-shadow .18s;}
.lst-card:hover{box-shadow:var(--shadow-md);}

.lst-ph{position:relative;flex:0 0 224px;margin:12px 0 12px 12px;border-radius:12px;background:var(--canvas-2);display:grid;place-items:center;overflow:hidden;}
.lst-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.lst-noph{color:rgba(16,22,32,.15);display:grid;place-items:center;}
.lst-count{position:absolute;bottom:11px;right:11px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:rgba(20,23,28,.62);color:#fff;}

.lst-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.lst-card{max-height:none;}
@media(min-width:861px){.lst-ph{min-height:172px;}}
.lst-b{padding:14px 18px 12px;flex:1;position:relative;}
.lst-more{position:absolute;top:13px;right:16px;width:30px;height:30px;padding:0;display:grid;place-items:center;color:var(--ink-3);}
.lst-more:hover{color:var(--ink);}

/* Head: identity on the left, money on the right, sharing one baseline. The
   price stays green (money coming in) but no longer outranks the name of the
   thing it belongs to. */
.lst-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-right:46px;margin-bottom:10px;}
.lst-id{min-width:0;}
.lst-p{flex:0 0 auto;text-align:right;font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--good);white-space:nowrap;}
.lst-p small{display:block;font-size:12px;font-weight:500;color:var(--ink-4);letter-spacing:.02em;margin-top:2px;}
/* 600, not 700: a long property title set in the display face at 700 turns into
   a slab that shouts over the price beside it. */
.lst-t{font-size:16.5px;font-weight:600;letter-spacing:-.012em;margin-bottom:3px;text-wrap:pretty;cursor:pointer;}
.lst-t:hover{color:var(--primary-d);}
.lst-w{display:flex;align-items:flex-start;gap:5px;font-size:13px;color:var(--ink-3);}
.lst-w svg{flex:0 0 auto;margin-top:4px;}
.lst-w span{min-width:0;text-wrap:pretty;}

/* Chips: what kind of listing it is, then the size facts as ONE pill so the
   numbers stop competing with the labels around them. */
.lst-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.lst-chip{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--canvas-2);color:var(--ink-2);}
.lst-chip.kind{background:var(--primary-soft);color:var(--primary-d);}
.lst-chip.specs{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line-2);padding:3px 11px;font-weight:500;}
.lst-sp{display:inline-flex;align-items:baseline;gap:4px;color:var(--ink-3);font-size:11.5px;}
.lst-sp b{font-family:var(--disp);font-size:13px;font-weight:700;color:var(--ink);}
.lst-dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);display:inline-block;}

/* Three facts on one line, each a readable phrase. Divider above so they read
   as a footer to the card body rather than a fourth stack of headlines. */
.lst-stats{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;padding-top:11px;border-top:1px solid var(--line);}
.lst-stat{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);}
.lst-stat-ic{width:24px;height:24px;flex:0 0 auto;border-radius:8px;background:var(--canvas-2);color:var(--ink-3);display:grid;place-items:center;}
.lst-stat-ic svg{width:14px;height:14px;}
.lst-stat-ic.good{background:var(--good-soft);color:var(--good);}
.lst-stat b{font-family:var(--disp);font-size:13.5px;font-weight:700;color:var(--ink);}

.lst-prog{height:4px;border-radius:999px;background:var(--line-2);overflow:hidden;margin-top:14px;}
.lst-prog i{display:block;height:100%;background:var(--primary);border-radius:999px;transition:width .3s;}
.lst-hint{font-size:11.5px;color:var(--ink-4);margin-top:5px;}

/* Action bar: publish state on the left, what you can do on the right. */
.lst-a{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 18px;background:transparent;border-top:1px solid var(--line);position:relative;}
.lst-a-gap{flex:1;}
.lst-a .btn{flex:0 0 auto;white-space:nowrap;}
.lst-toggle{display:flex;align-items:center;gap:11px;border:none;background:none;padding:0;cursor:pointer;text-align:left;font-family:inherit;}
.lst-tog-track{width:38px;height:22px;border-radius:999px;background:var(--line-2);position:relative;flex:0 0 auto;display:block;transition:background .18s;}
.lst-tog-track i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(16,22,32,.28);transition:left .18s;display:block;}
.lst-toggle.on .lst-tog-track{background:var(--good);}
.lst-toggle.on .lst-tog-track i{left:19px;}
.lst-tog-txt b{display:block;font-size:13px;font-weight:600;line-height:1.2;color:var(--ink);}
.lst-tog-txt small{display:block;font-size:11.5px;color:var(--ink-3);}
.btn.soft{background:var(--primary-soft);border-color:rgba(97,57,132,.28);color:var(--primary-d);}
.btn.soft:hover{background:#f0e9f8;}

/* Overflow menu — the actions that aren't part of the daily loop. */
.lst-menu{position:absolute;right:22px;bottom:52px;min-width:180px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-lg);padding:5px;display:none;flex-direction:column;z-index:20;}
.lst-menu.open{display:flex;}
.lst-menu button{text-align:left;border:none;background:none;padding:9px 11px;border-radius:8px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;}
.lst-menu button:hover{background:var(--canvas-2);}
.lst-menu i{height:1px;background:var(--line);margin:5px 4px;display:block;}
.lst-menu button.danger{color:var(--bad);}
.lst-menu button.danger:hover{background:rgba(192,70,60,.09);}

@media(max-width:860px){
  .lst-card{flex-direction:column;}
  .lst-ph{flex:0 0 auto;aspect-ratio:3/2;}
  /* narrow: the price drops under the name instead of squeezing it */
  .lst-head{flex-direction:column;gap:8px;}
  .lst-p{text-align:left;}
  .lst-p small{display:inline;margin:0 0 0 6px;}
  .lst-a{flex-direction:column;align-items:stretch;}
  .lst-a-gap{display:none;}
  .lst-a .btn{flex:1;}
  .lst-menu{right:16px;}
}

/* ---- tour drawer ----
 * Rides on .drawer-panel from assets/pt2.css so it slides in exactly like the
 * ported property wizard — a partner shouldn't see two different drawers. */
.tour-drawer{max-width:520px;}
.td-head{display:flex;align-items:center;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--glass-line);}
.td-ic{width:38px;height:38px;border-radius:11px;background:var(--primary-soft);color:var(--primary-d);display:grid;place-items:center;flex:0 0 auto;}
.td-htxt{flex:1;min-width:0;}
.td-htxt b{display:block;font-family:var(--disp);font-size:17px;color:var(--ink);}
.td-htxt small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.td-head .modal-x{position:static;flex:0 0 auto;}
.td-note{margin:0;padding:12px 22px;font-size:13px;color:var(--ink-3);background:var(--canvas-2);border-bottom:1px solid var(--glass-line);}
.td-body{flex:1;overflow-y:auto;padding:20px 22px 24px;}
.td-group{margin-bottom:22px;}
.td-q{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px;}
.td-hint{font-size:11.5px;font-weight:500;color:var(--ink-4);}
.td-sub{font-size:12.5px;color:var(--ink-3);margin:0 0 8px;}
.td-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--glass-line);background:var(--canvas-2);}
.td-foot .faint{font-size:13px;flex:1;min-width:0;}
.dr-actions{display:flex;gap:8px;}

/* ---- weekly tour times ---- */
.tour-week{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;}
.tw-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-2);flex-wrap:wrap;}
.tw-row:last-child{border-bottom:none;}
.tw-day{width:88px;flex:0 0 auto;font-size:13px;font-weight:600;color:var(--ink-2);}
.tw-chips{flex:1;min-width:120px;display:flex;gap:5px;flex-wrap:wrap;}
.tw-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 5px 3px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary-d);}
.tw-chip button{border:none;background:none;color:inherit;opacity:.55;font-size:9px;cursor:pointer;padding:0 2px;}
.tw-chip button:hover{opacity:1;}
.tw-off{font-size:12.5px;color:var(--ink-4);}
.tw-add{display:flex;gap:5px;flex:0 0 auto;}
.tw-add .inp{width:118px;padding:6px 8px;font-size:13px;}
.tour-note{font-size:13px;color:var(--ink-3);margin:12px 0 14px;}

/* ---- tour requests ---- */
.tour-row{display:flex;align-items:center;gap:14px;padding:13px 15px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-sm);margin-bottom:9px;flex-wrap:wrap;}
.tour-when,.tour-who{min-width:0;}
.tour-when{flex:1.3;}
.tour-who{flex:1;}
.tour-row b{display:block;font-size:14px;color:var(--ink);}
.tour-row small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.tour-st{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--canvas-2);color:var(--ink-3);flex:0 0 auto;}
.tour-st.s-requested{background:var(--primary-soft);color:var(--primary-d);}
.tour-st.s-confirmed{background:var(--good-soft);color:var(--good);}
.tour-st.s-cancelled{background:rgba(180,35,42,.1);color:#b4232a;}
.tour-act{display:flex;gap:6px;flex:0 0 auto;}

@media(max-width:820px){
  .drawer{width:100%;border-left:none;}
  .dr-head,.dr-body,.dr-foot{padding-left:16px;padding-right:16px;}
  .dr-tabs{padding:0 16px;}
  .dr-foot{flex-direction:column;align-items:stretch;}
  .dr-actions{width:100%;}
  .dr-actions .btn{flex:1;}
  .lst-bar{flex-direction:column;align-items:stretch;}
  .lst-tools select.inp{width:100%;}
  .tw-day{width:100%;}
  .tw-add{width:100%;}
  .tw-add .inp{flex:1;width:auto;}
  .tour-row{flex-direction:column;align-items:stretch;}
  .tour-act .btn{flex:1;}
}

/* ---- tour request groups ---- */
.tour-grp{margin-bottom:22px;}
.tour-grp-h{display:flex;align-items:baseline;gap:9px;margin-bottom:10px;}
.tour-grp-h b{font-family:var(--disp);font-size:15px;color:var(--ink);}
.tour-grp-h span{font-size:12.5px;color:var(--ink-4);}
.tour-grp.urgent .tour-grp-h b{color:var(--primary-d);}
.tour-grp.urgent .tour-row{border-color:var(--primary-soft);box-shadow:0 0 0 1px var(--primary-soft),var(--shadow-sm);}
.tour-note-row{flex-basis:100%;font-size:13px;color:var(--ink-3);font-style:italic;padding-top:10px;margin-top:2px;border-top:1px dashed var(--line-2);}

/* "View public listing" — a partner should never have to guess where a
   published property went. Only rendered once the listing is actually live. */
.lst-live{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--good);text-decoration:none;padding:6px 10px;border-radius:10px;background:var(--good-soft);white-space:nowrap;}
.lst-live:hover{background:#d6ede1;color:#15754c;}
@media(max-width:860px){.lst-live{justify-content:center;}}

/* ---- card photo rail ----
   Native scroll-snap rather than a JS carousel: momentum, touch and keyboard
   all come free, and it degrades to a plain scroller if the JS never runs. */
.lst-shots{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.lst-shots::-webkit-scrollbar{display:none;}
.lst-shots img{width:100%;height:100%;flex:0 0 100%;object-fit:cover;scroll-snap-align:center;display:block;user-select:none;}
.lst-nav{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .16s,background .16s;box-shadow:var(--shadow-sm);z-index:2;}
.lst-nav.prev{left:10px;} .lst-nav.next{right:10px;}
.lst-nav:hover{background:#fff;}
.lst-card:hover .lst-nav,.lst-nav:focus-visible{opacity:1;}
/* touch has no hover — leave the arrows visible there */
@media(hover:none){.lst-nav{opacity:.92;}}
.lst-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:5px;pointer-events:none;z-index:2;}
.lst-dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.55);display:block;transition:background .16s,width .16s;}
.lst-dots i.on{background:#fff;width:16px;box-shadow:0 1px 2px rgba(0,0,0,.35);}

/* ---- address groups ----
   Units share an address, so they share a header: where it is on the left,
   what is there and how to add another on the right. */
.lst-grp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;}
.lst-grp+.lst-grp{margin-top:16px;}
.lst-grp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 16px;background:transparent;border-bottom:1px solid var(--line);}
.lst-grp-a{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink-3);}
.lst-grp-a b{font-size:13px;font-weight:600;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lst-grp-r{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.lst-grp-n{font-size:12.5px;font-weight:500;color:var(--ink-3);}
.lst-grp-n.draft{color:var(--warn);}
/* Inside a group the rows are plain — the group supplies the frame. */
.lst-grp .lst-card{border:none;border-radius:0;box-shadow:none;}
.lst-grp .lst-card+.lst-card{border-top:1px solid var(--line);margin-top:0;}
.lst-grp .lst-card:hover{box-shadow:none;background:rgba(97,57,132,.012);}
@media(max-width:860px){
  .lst-grp-h{align-items:stretch;flex-direction:column;}
  .lst-grp-r{justify-content:space-between;}
}

/* ---- tour drawer settings rows ---- */
.td-set{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;flex-wrap:wrap;}
.td-set-txt{flex:1;min-width:200px;}
.td-set-txt b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px;}
.td-set-txt p{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.45;text-wrap:pretty;}
.td-set-ctl{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto;}
.td-set-ctl .inp{width:auto;padding:8px 11px;font-size:14px;}
.td-clear{border:none;background:none;color:var(--ink-3);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:0;}
.td-clear:hover{color:var(--ink);}
.td-step{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:11px;overflow:hidden;background:var(--surface);}
.td-step button{width:36px;height:34px;border:none;background:none;color:var(--primary);font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;line-height:1;}
.td-step button:hover{background:var(--primary-soft);}
.td-step span{min-width:44px;text-align:center;font-size:14px;font-weight:600;color:var(--ink);}
.td-step span.inf{font-size:17px;color:var(--ink-3);}
/* occupancy on the row */
.btn.sm.vac{background:var(--good-soft);border-color:rgba(29,150,99,.3);color:var(--good);}
.btn.sm.vac:hover{background:#d6ede1;}
.btn.sm.occ{background:var(--canvas-2);border-color:var(--line-2);color:var(--ink-3);}

/* ---- side drawers: value estimate + marketing ---- */
.side-drawer{max-width:460px;display:flex;flex-direction:column;}
.val-msg{margin:0;font-size:14px;color:var(--ink-3);text-wrap:pretty;}
.val-block{margin-bottom:20px;}
.val-block h4{margin:0 0 9px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);}
.val-big{font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink);}
.val-range{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;color:var(--ink-3);}
.val-range i{flex:1;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--line-2),var(--primary),var(--line-2));display:block;}
.val-rows{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;}
.val-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;background:var(--surface);font-size:13.5px;}
.val-row span{color:var(--ink-3);min-width:0;}
.val-row b{font-weight:600;color:var(--ink);white-space:nowrap;}
.val-row b small{font-weight:400;color:var(--ink-3);font-size:12px;}
.val-row b.ok{color:var(--good);}
.val-row.comp span{display:flex;flex-direction:column;gap:2px;}
.val-row.comp span b{font-weight:600;color:var(--ink);white-space:normal;}
.val-row.comp span small{color:var(--ink-4);font-size:12px;}
.val-sub{display:block;font-size:11.5px;font-weight:400;color:var(--ink-4);margin-top:2px;}
.val-summary{margin:0 0 14px;font-size:13.5px;color:var(--ink-2);line-height:1.55;text-wrap:pretty;}
.val-foot{margin:0;font-size:12px;color:var(--ink-4);}
@media(max-width:820px){.side-drawer{max-width:100%;}.shr-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* Pointer from Properties to where tour requests now live. */
.lst-xref{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:11px 16px;margin-bottom:16px;border:1px solid var(--primary-soft);background:var(--primary-soft);border-radius:12px;font-size:13.5px;font-weight:600;color:var(--primary-d);}

/* ===== Boost drawer =========================================================
 * Ported VERBATIM from Leadportal/partner.php (lines 25162-25611). Scoped to
 * .boost-* / .share-*, so it cannot reach the portal's own styles. The few
 * .lr-bb-boost-* rules belong to the CRM's card button and are inert here.
 * ========================================================================== */
            /* Boost button on grid card — Instagram-style purple accent. */
            .cat-btn-boost {
                color: #613984 !important;
                background: #faf7ff !important;
                border-color: #e8e2f0 !important;
            }
            .cat-btn-boost:hover {
                color: #fff !important;
                background: linear-gradient(135deg, #613984, #8151b3) !important;
                border-color: #4a2b66 !important;
            }

            /* Prominent Boost CTA at the right side of the list-row bottom bar.
               Gradient-purple pill with icon tile, title + subtitle, chevron. */
            /* Boost listing = BORDER / OUTLINE style (one of three distinct button
               looks in the action row: Availability = light fill, Boost = outline,
               Activate plan = gradient color fill). */
            .lr-bb-boost-cta {
                display: inline-flex; align-items: center; gap: 8px;
                height: 40px;
                background: #fff;
                color: #5e3590;
                border: 1.5px solid #d9c6ef; border-radius: 11px;
                padding: 0 13px 0 9px;
                font-family: inherit; cursor: pointer;
                white-space: nowrap;
                box-shadow: 0 1px 2px rgba(97,57,132,0.05);
                transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
                position: relative;
            }
            .lr-bb-boost-cta:hover {
                transform: translateY(-1px);
                border-color: #b88fe0;
                background: #faf6fe;
                box-shadow: 0 7px 16px -8px rgba(97,57,132,0.42);
            }
            .lr-bb-boost-cta-icn {
                width: 24px; height: 24px;
                border-radius: 7px;
                background: linear-gradient(135deg, #f0e6fa, #e6d4f7);
                color: #7b46b0;
                display: inline-flex; align-items: center; justify-content: center;
                font-size: 11px; flex-shrink: 0;
            }
            .lr-bb-boost-cta-text {
                display: inline-flex; flex-direction: column; align-items: flex-start;
                gap: 0; line-height: 1.1; text-align: left;
            }
            .lr-bb-boost-cta-title {
                font-size: 11.5px; font-weight: 700; color: #5e3590;
                letter-spacing: -0.005em; line-height: 1.15;
            }
            .lr-bb-boost-cta-sub {
                font-size: 9.5px; font-weight: 500; color: #9b86b5;
                line-height: 1.15;
            }
            .lr-bb-boost-cta-chev {
                font-size: 10px; opacity: 0.7; color: #8151b3; flex-shrink: 0; margin-left: 2px;
                transition: transform 0.15s ease;
            }
            .lr-bb-boost-cta:hover .lr-bb-boost-cta-chev {
                transform: translateX(2px); opacity: 1;
            }
            @media (max-width: 720px) {
                .lr-bb-boost-cta-text { display: none; }
                .lr-bb-boost-cta { padding: 0 12px; }
            }

            /* Boost drawer — small/compact fonts throughout. */
            .boost-drawer { display: flex; flex-direction: column; }
            .boost-head {
                display: flex; align-items: flex-start; justify-content: space-between;
                gap: 10px; padding: 14px 18px;
                border-bottom: 1px solid #eef2f6;
                background: linear-gradient(135deg, rgba(97,57,132,0.06), rgba(155,115,199,0.04));
            }
            .boost-eyebrow {
                display: inline-flex; align-items: center; gap: 5px;
                font-size: 9.5px; font-weight: 700; color: #613984;
                text-transform: uppercase; letter-spacing: 0.08em;
            }
            .boost-eyebrow i { font-size: 9px; }
            .boost-title { font-size: 14px; font-weight: 700; color: #0f172a; margin-top: 3px; letter-spacing: -0.014em; }
            .boost-title span { color: #613984; }
            .boost-sub { font-size: 11px; color: #64748b; margin-top: 3px; line-height: 1.45; max-width: 440px; }
            .boost-x {
                width: 28px; height: 28px; border-radius: 7px;
                border: 1px solid #e2e8f0; background: #fff; color: #475569;
                display: flex; align-items: center; justify-content: center;
                cursor: pointer; flex-shrink: 0; transition: all 0.15s ease;
                font-size: 11px;
            }
            .boost-x:hover { background: #f8fafc; color: #0f172a; }
            .boost-body { flex: 1; overflow-y: auto; padding: 14px 18px 20px; }
            .boost-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                gap: 8px;
            }
            .boost-tile {
                display: flex; align-items: center; gap: 8px;
                background: #fff; border: 1px solid #e6e8ec;
                border-radius: 9px; padding: 8px 10px;
                transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
            }
            .boost-tile:hover {
                border-color: rgba(97,57,132,0.4);
                box-shadow: 0 5px 12px -4px rgba(97,57,132,0.15);
                transform: translateY(-1px);
            }
            .boost-tile-logo {
                position: relative;
                width: 30px; height: 30px;
                border-radius: 7px;
                display: inline-flex; align-items: center; justify-content: center;
                color: #fff; font-weight: 700; font-size: 10px;
                flex-shrink: 0; overflow: hidden;
                box-shadow: 0 1px 2px rgba(15,23,42,0.12);
            }
            .boost-tile-logo img {
                position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: contain; background: #fff; padding: 3px;
            }
            .boost-tile-body { flex: 1; min-width: 0; }
            .boost-tile-name { font-size: 11.5px; font-weight: 600; color: #1e293b; line-height: 1.2; }
            .boost-tile-desc { font-size: 9.5px; color: #64748b; line-height: 1.4; margin-top: 1px; }
            .boost-tile-cta {
                display: inline-flex; align-items: center; gap: 4px;
                background: #faf7ff; color: #613984;
                border: 1px solid #e8e2f0; border-radius: 6px;
                padding: 4px 9px;
                font-size: 10px; font-weight: 600;
                cursor: pointer; flex-shrink: 0; font-family: inherit;
                transition: all 0.15s ease;
            }
            .boost-tile-cta i { font-size: 8px; }
            .boost-tile-cta:hover {
                background: linear-gradient(135deg, #613984, #8151b3);
                color: #fff; border-color: #4a2b66;
            }

            /* ─── Tab strip inside the unified Boost drawer ─── */
            .boost-tabs {
                display:flex; gap:0;
                padding:0 14px;
                border-bottom:1px solid #eef2f6;
                background:#fff;
                flex-shrink:0;
            }
            .boost-tab {
                appearance:none;
                display:inline-flex; align-items:center; gap:10px;
                background:transparent; border:none;
                padding:12px 14px;
                font-family:inherit; cursor:pointer;
                color:#64748b;
                border-bottom:2px solid transparent;
                transition:color .15s ease, border-color .15s ease, background .15s ease;
                flex:1; min-width:0;
            }
            .boost-tab:hover { color:#0f172a; background:#fafbfd; }
            .boost-tab.is-active { color:#613984; border-bottom-color:#613984; }
            .boost-tab > i {
                width:30px; height:30px;
                border-radius:8px;
                background:rgba(97,57,132,.08);
                color:#613984;
                display:inline-flex; align-items:center; justify-content:center;
                font-size:12px; flex-shrink:0;
                transition:background .15s ease, color .15s ease;
            }
            .boost-tab.is-active > i { background:linear-gradient(135deg,#7c3fb6,#613984); color:#fff; box-shadow:0 3px 8px -2px rgba(97,57,132,.45); }
            .boost-tab-text { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; line-height:1.1; }
            .boost-tab-title { font-size:12px; font-weight:600; color:inherit; }
            .boost-tab-sub { font-size:10px; color:#94a3b8; font-weight:500; }
            .boost-tab.is-active .boost-tab-sub { color:#8151b3; }

            /* Tab panels — swap visibility via JS; only one is_active at a time. */
            .boost-panel { display:none; padding:18px 24px 22px; }
            .boost-panel.is-active { display:flex; flex-direction:column; gap:18px; }
            .boost-panel-share.is-active > * { animation: shareSlideUp .3s ease both; }
            .boost-panel-share.is-active > *:nth-child(1) { animation-delay: .03s; }
            .boost-panel-share.is-active > *:nth-child(2) { animation-delay: .08s; }
            .boost-panel-share.is-active > *:nth-child(3) { animation-delay: .13s; }
            .boost-panel-share.is-active > *:nth-child(4) { animation-delay: .18s; }
            .boost-panel-share.is-active > *:nth-child(5) { animation-delay: .23s; }
            @keyframes shareSlideUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

            /* Draft-state nudge inside the share panel. */
            .share-draft-warn {
                display:none;
                align-items:flex-start; gap:9px;
                padding:10px 12px;
                background:linear-gradient(135deg,#fffbeb,#fef3c7);
                border:1px solid #fde68a;
                border-radius:10px;
                font-size:12px; color:#78350f; line-height:1.5;
            }
            .share-draft-warn i { color:#d97706; font-size:13px; flex-shrink:0; margin-top:1px; }
            .share-draft-warn strong { color:#5b2207; font-weight:700; }

            /* Drawer body holds both tabs' panels; remove its own gap so panel
               padding controls spacing. */
            .boost-drawer .boost-body { padding:0; gap:0; }
            /* Boost grid lives inside its panel; restore the original 8px gap. */
            .boost-panel-syndicate { padding-top:18px; }

            /* ─── Social-style preview card ───
               Mocks what the post will actually look like on a feed: profile
               row at top, full-width hero image, caption + hashtags below,
               unfurled link footer, and an info chip explaining that the
               platform pulls this content from the listing URL when shared.
               The image is the centerpiece since OG image is the #1 thing
               that drives engagement on shared links. */
            .share-card {
                background:#fff; border:1px solid #e2e8f0; border-radius:14px;
                overflow:hidden;
                box-shadow:0 1px 3px rgba(15,23,42,.04), 0 6px 18px -8px rgba(97,57,132,.12);
            }
            .share-card-head {
                display:flex; align-items:center; gap:9px;
                padding:10px 12px;
                border-bottom:1px solid #f1f5f9;
                background:linear-gradient(180deg,#fff,#fafbff);
            }
            .share-card-avatar {
                width:30px; height:30px; border-radius:50%;
                background:linear-gradient(135deg,#613984,#8151b3);
                color:#fff; display:flex; align-items:center; justify-content:center;
                font-size:12px; flex-shrink:0;
                box-shadow:0 3px 8px -2px rgba(97,57,132,.45);
            }
            .share-card-head-text { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
            .share-card-name { font-size:12.5px; font-weight:700; color:#0f172a; }
            .share-card-handle { font-size:10.5px; color:#94a3b8; font-weight:500; }
            /* Hero image — fills the card width, 16:9 aspect so portrait /
               landscape uploads crop cleanly. Background-image so we can
               keep the JS path (state.image → backgroundImage) untouched. */
            .share-card-image {
                position:relative;
                width:100%;
                aspect-ratio:16/9;
                background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
                display:flex; align-items:center; justify-content:center;
                overflow:hidden;
            }
            .share-card-image-img {
                position:absolute; inset:0;
                width:100%; height:100%;
                object-fit:cover; display:none;
            }
            .share-card-image.has-image .share-card-image-img { display:block; }
            .share-card-image-fallback {
                position:relative; z-index:1;
                display:flex; align-items:center; justify-content:center;
                width:54px; height:54px; border-radius:50%;
                background:rgba(15,23,42,.06); color:#94a3b8; font-size:18px;
            }
            .share-card-image.has-image .share-card-image-fallback { display:none; }
            .share-card-body { padding:12px 14px; display:flex; flex-direction:column; gap:7px; }
            .share-card-caption {
                font-size:13px; color:#1e293b; line-height:1.5;
                margin:0; white-space:pre-wrap; word-break:break-word;
                min-height:1.5em;
            }
            .share-card-caption:empty::before {
                content:"Your caption will appear here…";
                color:#cbd5e1; font-style:italic;
            }
            .share-card-tags {
                font-size:12px; color:#2563eb; font-weight:600; line-height:1.5;
                word-break:break-word;
            }
            .share-card-tags:empty { display:none; }
            .share-card-link {
                display:flex; align-items:center; gap:6px;
                margin-top:2px; padding:7px 10px;
                background:#f8fafc; border:1px solid #eef2f7; border-radius:8px;
                font-size:11px; color:#475569;
                overflow:hidden;
            }
            .share-card-link-icon { color:#94a3b8; font-size:10px; flex-shrink:0; }
            .share-card-link-url { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
            .share-card-link-url:empty::before { content:"link will appear here"; color:#cbd5e1; font-style:italic; }
            .share-card-foot {
                display:flex; align-items:center; gap:6px;
                padding:9px 12px;
                background:linear-gradient(180deg,#fafbff,#f5f3ff);
                border-top:1px solid #f1f5f9;
            }
            .share-card-foot-info {
                display:inline-flex; align-items:flex-start; gap:6px;
                font-size:10.5px; color:#64748b; line-height:1.4;
            }
            .share-card-foot-info i { color:#8151b3; font-size:11px; margin-top:1px; flex-shrink:0; }

            /* ─── Primary actions row ───
               Copy everything = the only CTA, fills the row. */
            .share-primary-actions {
                display:flex; gap:8px; align-items:stretch;
                flex-wrap:wrap;
            }
            .share-primary-actions .share-copyall { flex:1 1 100%; min-width:0; }
            /* ─── Skeleton "cooking" loading state ───
               When the drawer first opens, the preview card briefly
               wears a shimmer wash so the user feels the post being
               assembled ("caption is being drafted, image is being
               pulled, hashtags are being chosen"). Builds anticipation
               and signals polish vs. a static instant reveal.

               Mechanics:
               • A ::before sits on top of the card with a sliding
                 white-translucent gradient (Apple/LinkedIn-style
                 sheen) at 1.6s loop.
               • The image becomes a base shimmer skeleton (gray bars).
               • Caption + tags + link text fade their colour to make
                 room for placeholder shimmer "lines" overlaid via
                 their parent's gradient. */
            .share-card.is-cooking { position:relative; overflow:hidden; }
            .share-card.is-cooking .share-card-image { background:linear-gradient(90deg,#f1f5f9 0%,#e2e8f0 50%,#f1f5f9 100%); background-size:200% 100%; animation:shareSkeletonShift 1.4s ease-in-out infinite; }
            .share-card.is-cooking .share-card-image-fallback { display:none; }
            .share-card.is-cooking .share-card-caption,
            .share-card.is-cooking .share-card-tags,
            .share-card.is-cooking .share-card-link-url {
                color:transparent !important;
                background:linear-gradient(90deg,#f1f5f9 0%,#e2e8f0 50%,#f1f5f9 100%);
                background-size:200% 100%;
                animation:shareSkeletonShift 1.4s ease-in-out infinite;
                border-radius:5px;
            }
            .share-card.is-cooking .share-card-caption:empty::before,
            .share-card.is-cooking .share-card-link-url:empty::before { content:""; }
            .share-card.is-cooking .share-card-link-icon { opacity:.25; }
            /* Diagonal sheen sweep over the whole card. */
            .share-card.is-cooking::before {
                content:"";
                position:absolute; inset:0;
                background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
                animation:shareCardSheen 1.6s ease-in-out infinite;
                pointer-events:none;
                z-index:1;
            }
            /* "Cooking your post…" floating chip in the corner so the
               user gets a plain-language read on what's happening. */
            .share-card.is-cooking::after {
                content:"✨ Cooking your post…";
                position:absolute; top:10px; right:12px;
                z-index:2;
                background:linear-gradient(135deg,#613984,#8151b3);
                color:#fff;
                font-size:10px; font-weight:700;
                letter-spacing:.04em;
                padding:4px 10px; border-radius:999px;
                box-shadow:0 4px 12px -2px rgba(97,57,132,.45);
                animation:shareCookPulse 1.6s ease-in-out infinite;
            }
            @keyframes shareSkeletonShift {
                0%   { background-position:200% 0; }
                100% { background-position:-200% 0; }
            }
            @keyframes shareCardSheen {
                0%   { transform:translateX(-100%); }
                55%  { transform:translateX(100%); }
                100% { transform:translateX(100%); }
            }
            @keyframes shareCookPulse {
                0%, 100% { transform:scale(1);   box-shadow:0 4px 12px -2px rgba(97,57,132,.45); }
                50%      { transform:scale(1.04); box-shadow:0 6px 18px -2px rgba(97,57,132,.6); }
            }
            /* Primary actions also dim a touch while cooking so users
               don't click before content has settled. */
            .share-primary-actions.is-cooking { opacity:.5; pointer-events:none; transition:opacity .3s ease; }
            @media (prefers-reduced-motion: reduce) {
                .share-card.is-cooking::before,
                .share-card.is-cooking .share-card-image,
                .share-card.is-cooking .share-card-caption,
                .share-card.is-cooking .share-card-tags,
                .share-card.is-cooking .share-card-link-url,
                .share-card.is-cooking::after { animation:none !important; }
            }
            /* Primary "Copy everything" CTA — visually distinct so it reads as
               the headline action of the Share panel. Sits between preview
               and caption so it's the first thing the user sees they can
               actually do with the generated post. */
            .share-copyall {
                appearance:none; width:100%; box-sizing:border-box;
                display:flex; align-items:center; gap:9px;
                padding:8px 11px; border-radius:10px; cursor:pointer;
                background:linear-gradient(135deg,#613984,#7c3fb6);
                color:#fff; border:1px solid #4d2c6d;
                box-shadow:0 6px 16px -8px rgba(97,57,132,.55), inset 0 1px 0 rgba(255,255,255,.12);
                font-family:inherit; text-align:left;
                transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
            }
            .share-copyall:hover { transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(97,57,132,.6), inset 0 1px 0 rgba(255,255,255,.16); filter:brightness(1.04); }
            .share-copyall:active { transform:translateY(0); }
            .share-copyall-icn {
                width:28px; height:28px; flex-shrink:0;
                border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
                background:rgba(255,255,255,.18); font-size:12px; color:#fff;
                box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
            }
            .share-copyall-body { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
            .share-copyall-title { font-size:12.5px; font-weight:700; line-height:1.15; }
            .share-copyall-sub { font-size:10.5px; opacity:.85; line-height:1.2; }
            .share-copyall-arrow { font-size:11px; opacity:.7; flex-shrink:0; transition:transform .15s ease, opacity .15s ease; }
            .share-copyall:hover .share-copyall-arrow { transform:translateX(3px); opacity:1; }
            .share-copyall.is-flashed {
                background:linear-gradient(135deg,#16a34a,#22c55e);
                border-color:#15803d;
            }
            .share-copyall.is-flashed .share-copyall-icn { background:rgba(255,255,255,.25); }

            /* Fields */
            .share-field { display:flex; flex-direction:column; gap:8px; }
            .share-label { font-size:11.5px; font-weight:600; color:#475569; text-transform:uppercase; letter-spacing:.05em; display:flex; justify-content:space-between; align-items:center; gap:8px; }
            /* Share targets */
            .share-targets { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:8px; }
            .share-target { appearance:none; display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 8px; border-radius:12px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; transition:all .2s ease; font-family:inherit; }
            .share-target:hover { transform:translateY(-3px); box-shadow:0 8px 20px -8px rgba(15,23,42,.18); border-color:#cbd5e1; }
            .share-target:active { transform:translateY(0); }
            .share-target-icn { width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:15px; box-shadow:0 2px 6px rgba(15,23,42,.12); transition:width .18s ease, height .18s ease, font-size .18s ease; }
            .share-target-lbl { font-size:11px; font-weight:600; color:#0f172a; line-height:1; }
            .share-target.is-flashed { animation: shareFlash .55s ease; }
            @keyframes shareFlash {
                0% { background:#fff; }
                40% { background:#dcfce7; }
                100% { background:#fff; }
            }
            /* Footer link bar */
            .share-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:#f8fafc; border:1px solid #e2e8f0; flex-wrap:wrap; }
            .share-foot-link { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:#475569; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
            .share-foot-link i { color:#94a3b8; flex-shrink:0; }
            .share-foot-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
            .share-foot-copy { appearance:none; padding:6px 11px; border-radius:8px; border:1px solid #cbd5e1; background:#fff; font-size:11.5px; font-weight:600; color:#475569; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:5px; flex-shrink:0; }
            .share-foot-copy:hover { background:#f1f5f9; color:#0f172a; }
            .share-foot-copy.is-flashed { background:#dcfce7; color:#166534; border-color:#86efac; }

            /* Disabled state for share targets when the listing has no
               public URL (draft). Reads as quiet, not blocked. */
            .share-target[disabled] {
                opacity:.45; cursor:not-allowed;
            }
            .share-target[disabled]:hover {
                transform:none; box-shadow:none; border-color:#e2e8f0;
            }
            .share-foot-copy[disabled] {
                opacity:.5; cursor:not-allowed;
                background:#f8fafc; color:#94a3b8;
            }


/* =============================================================================
 * FIRST-RUN WIZARD · CLIENTS PANES · CLIENT WORKSPACE DRAWER · PHONE ASK
 * ========================================================================== */

/* ---- shared: lock the page behind a full-screen layer -------------------- */
body.wiz-lock{overflow:hidden;}

/* ---- 1 · the wizard ------------------------------------------------------ */
.wiz-overlay{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  padding:28px;background:rgba(16,22,32,.42);-webkit-backdrop-filter:saturate(140%) blur(7px);
  backdrop-filter:saturate(140%) blur(7px);}
.wiz-overlay.open{display:flex;}
.wiz-card{position:relative;width:min(980px,100%);max-height:calc(100vh - 56px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--glass-brd);border-radius:var(--rl);
  box-shadow:var(--shadow-lg);padding:38px 40px;display:flex;flex-direction:column;}
.wiz-glow{position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;border-radius:var(--rl) var(--rl) 0 0;
  background:radial-gradient(600px 150px at 50% 0%,rgba(138,95,176,.16),transparent 70%);}
.wiz-head{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;}
.wiz-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:4px 11px;
  border-radius:999px;background:var(--primary-soft);color:var(--primary-d);}
.wiz-badge .dot{width:6px;height:6px;border-radius:999px;background:var(--good);}
.wiz-dots{display:flex;gap:6px;align-items:center;}
.wiz-dots i{width:22px;height:4px;border-radius:999px;background:var(--line-2);display:block;transition:background .2s;}
.wiz-dots i.on{background:var(--primary);}

.wiz-step{display:none;flex-direction:column;flex:1;}
.wiz-step.active{display:flex;}
.wiz-h{font-family:var(--disp);font-size:31px;font-weight:700;letter-spacing:-.02em;line-height:1.18;
  margin:22px 0 8px;color:var(--ink);text-wrap:pretty;}
.wiz-sub{margin:0 0 24px;font-size:15px;color:var(--ink-3);max-width:640px;text-wrap:pretty;}

.wiz-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.wlane{text-align:left;padding:20px 18px 18px;border-radius:15px;cursor:pointer;position:relative;
  display:flex;flex-direction:column;font-family:inherit;transition:border-color .14s,background .14s,box-shadow .14s;
  border:1.5px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);}
.wlane:hover{border-color:var(--primary-l);}
.wlane.on{border-color:var(--primary);background:#faf7fd;box-shadow:0 8px 22px rgba(97,57,132,.16);}
.wl-ic{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary-soft);color:var(--primary);margin-bottom:13px;transition:background .14s,color .14s;}
.wlane.on .wl-ic{background:var(--primary);color:#fff;}
.wl-ic svg{width:21px;height:21px;}
.wl-t{font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.wl-who{font-size:13px;color:var(--ink-3);line-height:1.45;flex:1;}
.wl-pay{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2);}
.wl-pay b{color:var(--primary);}
.wl-pay b.gold{color:var(--warn);}
.wl-tick{position:absolute;top:16px;right:16px;width:22px;height:22px;border-radius:999px;background:var(--primary);
  color:#fff;font-size:13px;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .14s;}
.wlane.on .wl-tick{opacity:1;}

.wiz-actions{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:26px;}
.wiz-sp{margin-left:auto;}
.wiz-note{font-size:13px;color:var(--ink-4);}
.wiz-note.warn{color:var(--warn);}
.wiz-actions .btn.primary:disabled{background:var(--canvas-2);color:var(--ink-4);border-color:var(--line-2);
  box-shadow:none;cursor:not-allowed;}

/* step 2 — what you can sell */
.wiz-sell{display:flex;flex-direction:column;gap:16px;}
.wsell{border:1px solid var(--line);border-radius:15px;padding:18px;background:#fbfcfd;}
.wsell-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.wsell-ic{width:30px;height:30px;border-radius:9px;background:var(--primary-soft);color:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.wsell-ic.gold{background:var(--amber-soft);color:var(--warn);}
.wsell-h b{font-size:15.5px;font-weight:700;}
.wsell-n{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--canvas-2);color:var(--ink-2);}
.wsell-note{margin-left:auto;font-size:12.5px;color:var(--ink-4);}
.wsell-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.wsell-p{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:var(--surface);position:relative;}
.wsell-p b{display:block;font-size:13.5px;font-weight:700;margin-bottom:5px;}
.wsell-pop{position:absolute;top:11px;right:12px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warn);background:var(--warn-soft);padding:2px 7px;border-radius:999px;}
.wsell-pr b{display:inline;font-family:var(--disp);font-size:20px;font-weight:700;color:var(--ink);}
.wsell-pr i{font-style:normal;font-size:12px;color:var(--ink-4);}
.wsell-more{margin:11px 0 0;font-size:12.5px;color:var(--ink-4);}
.wsell-flat{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);}
.wsell-flat b{font-family:var(--disp);font-size:22px;font-weight:700;flex:0 0 auto;}
.wsell-flat span{font-size:13px;color:var(--ink-3);}

/* step 3 — payout */
.wiz-pay{max-width:620px;display:flex;flex-direction:column;gap:16px;}
.wiz-seg{display:flex;gap:8px;}
.wiz-seg button{flex:1;padding:11px 13px;border-radius:var(--rs);font-size:14px;font-weight:500;font-family:inherit;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);cursor:pointer;transition:all .14s;}
.wiz-seg button.on{border:1.5px solid var(--primary);background:#faf7fd;color:var(--primary-d);font-weight:600;}
.wiz-safe{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:12px;
  background:var(--good-soft);border:1px solid rgba(29,150,99,.22);color:var(--good);}
.wiz-safe span{font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.wiz-safe svg{flex:0 0 auto;margin-top:1px;}
.wiz-safe.plain{background:var(--canvas);border-color:transparent;color:var(--ink-3);margin-top:18px;}

/* step 4 — the two handouts */
.wiz-share{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.wshare{border:1px solid var(--line);border-radius:15px;padding:20px 18px;background:#fbfcfd;
  display:flex;flex-direction:column;}
.wshare-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.wshare-h b{font-size:15.5px;font-weight:700;}
.wshare-ic{width:32px;height:32px;border-radius:9px;background:var(--primary-soft);color:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.wshare-ic svg{width:17px;height:17px;}
.wshare-ic.gold{background:var(--amber-soft);color:var(--warn);}
.wshare-d{margin:0 0 14px;font-size:13px;color:var(--ink-3);line-height:1.5;flex:1;}
.wshare-d b{color:var(--ink-2);}
.wshare-earn{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--primary-soft);
  color:var(--primary-d);font-size:12.5px;}
.wshare-earn.gold{background:var(--amber-soft);color:var(--warn);}
.wshare-row{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 12px;border:1px solid var(--line-2);
  border-radius:var(--rs);background:var(--surface);}
.wshare-row code{flex:1;min-width:0;font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wshare-row code.sc-code{font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--ink);}
.wshare-more{display:flex;gap:8px;margin-top:9px;}
.wshare-more .btn{flex:1;}
.wshare-fine{margin:9px 0 0;font-size:11.5px;color:var(--ink-4);}

/* ---- 2 · Clients / Invite panes ----------------------------------------- */
.rf-pane{display:none;}
.rf-pane.active{display:block;}

.ref-row{cursor:pointer;transition:background .12s;}
.ref-row:hover{background:rgba(97,57,132,.045);}
.ref-em{display:block;font-size:12.5px;color:var(--ink-4);margin-top:1px;}
.ref-built{font-size:13px;color:var(--ink-2);}
.ref-built b{color:var(--ink);font-weight:700;}
.ref-none{font-size:13px;color:var(--ink-4);font-style:italic;}

/* ---- 3 · client workspace drawer ---------------------------------------- */
.cw-overlay{position:fixed;inset:0;z-index:380;display:none;background:rgba(16,22,32,.34);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.cw-overlay.open{display:block;}
.cw-drawer{position:absolute;top:0;right:0;bottom:0;width:min(940px,100%);background:#f7f8fa;
  border-left:1px solid var(--line);box-shadow:-30px 0 70px rgba(34,14,52,.22);
  display:flex;flex-direction:column;overflow:hidden;}
.cw-head{padding:22px 30px 0;background:var(--surface);border-bottom:1px solid var(--line);flex:0 0 auto;}
.cw-id{display:flex;align-items:flex-start;gap:14px;}
.cw-av{width:46px;height:46px;border-radius:999px;background:var(--primary);color:#fff;flex:0 0 auto;
  font-size:16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.cw-av.gold{background:var(--warn);}
.cw-who{min-width:0;flex:1;}
.cw-nm{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.cw-nm b{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.015em;}
.cw-nm .pill{margin-left:0;}
.cw-nm span{display:inline-flex;gap:7px;flex-wrap:wrap;}
.cw-sub{font-size:13px;color:var(--ink-4);margin-top:3px;}
.cw-earn{text-align:right;flex:0 0 auto;}
.cw-earn-k{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:600;}
.cw-earn b{font-size:22px;font-weight:700;color:var(--good);}
.cw-x{width:32px;height:32px;border-radius:9px;background:var(--canvas);color:var(--ink-3);flex:0 0 auto;
  border:0;display:inline-flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;}
.cw-x:hover{background:var(--canvas-2);color:var(--ink);}
.cw-tabs{margin-top:18px;margin-bottom:0;border-bottom:0;}
.cw-body{padding:22px 30px 34px;overflow-y:auto;flex:1;}
.cw-load{padding:40px;text-align:center;color:var(--ink-4);font-size:14px;}

.cw-sec{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap;}
.cw-sec b{font-size:14.5px;}
.cw-sec .faint{font-size:12.5px;}
.cw-ro{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:999px;background:var(--canvas-2);color:var(--ink-3);}

.cw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;}
.cw-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;position:relative;}
.cw-ph{height:104px;background-size:cover;background-position:center;background-color:var(--canvas-2);}
.cw-ph.none{background:linear-gradient(135deg,var(--canvas-2),var(--line-2));}
.cw-badge{position:absolute;top:9px;left:9px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--canvas-2);color:var(--ink-3);text-transform:capitalize;}
.cw-badge.good{background:var(--good-soft);color:var(--good);}
.cw-type{position:absolute;top:9px;right:9px;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink-2);}
.cw-card-b{padding:12px 13px;}
.cw-card-b b{display:block;font-size:13.5px;font-weight:700;}
.cw-addr{display:block;font-size:12px;color:var(--ink-4);margin:2px 0 8px;}
.cw-price{font-family:var(--disp);font-size:16px;font-weight:700;}
.cw-price i{font-style:normal;font-size:12px;color:var(--ink-4);font-weight:500;}
.cw-stat{display:block;font-size:11.5px;color:var(--ink-4);margin-top:6px;}

.cw-tbl td{vertical-align:top;}
.cw-em{display:block;font-size:12px;color:var(--ink-4);margin-top:1px;}

.cw-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.cw-plan{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:var(--surface);}
.cw-plan-h{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap;}
.cw-plan-h b{font-size:13.5px;font-weight:700;}

.cw-empty{padding:38px 20px;text-align:center;border:1px dashed var(--line-2);border-radius:14px;background:var(--surface);}
.cw-empty b{display:block;font-size:15px;margin-bottom:5px;}
.cw-empty p{margin:0 auto;max-width:420px;font-size:13px;color:var(--ink-3);line-height:1.5;}
.cw-empty code{font-size:12.5px;background:var(--canvas);padding:1px 6px;border-radius:5px;}

/* ---- 4 · the post-setup phone ask --------------------------------------- */
.phone-ask{display:flex;align-items:center;gap:13px;padding:14px 16px;margin-bottom:20px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow-sm);}
.pa-ic{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;}
.pa-b{min-width:0;flex:1;}
.pa-b b{display:block;font-size:14px;font-weight:600;}
.pa-b span{display:block;font-size:12.5px;color:var(--ink-4);margin-top:1px;}
.phone-ask .inp.sm{width:190px;flex:0 0 auto;}
.pa-x{width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--ink-4);
  font-size:13px;cursor:pointer;flex:0 0 auto;}
.pa-x:hover{background:var(--canvas-2);color:var(--ink-2);}

/* ---- responsive --------------------------------------------------------- */
@media(max-width:980px){
  .wiz-overlay{padding:0;align-items:stretch;}
  .wiz-card{width:100%;max-height:100vh;border-radius:0;padding:24px 18px calc(24px + env(safe-area-inset-bottom));}
  .wiz-h{font-size:24px;margin:18px 0 7px;}
  .wiz-sub{font-size:14px;margin-bottom:18px;}
  .wiz-lanes{grid-template-columns:1fr;gap:11px;}
  .wlane{padding:16px 15px 15px;}
  .wl-who{font-size:12.5px;}
  .wiz-share,.wsell-grid,.cw-grid,.cw-plans{grid-template-columns:1fr;}
  .wiz-seg{flex-direction:column;}
  .wiz-actions{flex-wrap:wrap;padding-top:20px;}
  .wiz-actions .btn{flex:1 1 auto;}
  .wiz-sp{margin-left:0;width:100%;}
  .cw-drawer{width:100%;}
  .cw-head{padding:16px 16px 0;}
  .cw-body{padding:16px 16px 30px;}
  .cw-nm b{font-size:18px;}
  .cw-earn{display:none;}
  .phone-ask{flex-wrap:wrap;}
  .phone-ask .inp.sm{width:100%;order:3;}
  .phone-ask .btn{order:4;}
}

/* The code route's colour, matching the amber the wizard and the dashboard
   strip already use for it. Used by the Invite card's "5% off" pill and by the
   "Via your code" chip in the client drawer. */
.pill.gold{background:var(--amber-soft);color:var(--warn);}

/* ---- "Bring someone in" — the always-on handouts card -------------------
   Three rows, one per thing a partner can send. Each states its own earning
   rule, because the link and the code pay differently and that is the single
   most confusable thing in the product. */
.handouts{margin-bottom:20px;}
.ho-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.ho-head b{font-size:15px;}
.ho-head .faint{font-size:12.5px;}
.ho-head .btn{margin-left:auto;}
.ho-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);margin-top:9px;}
.ho-row:first-of-type{margin-top:0;}
.ho-row.gold{background:#fffdf7;border-color:rgba(230,173,60,.35);}
.ho-ic{width:32px;height:32px;border-radius:9px;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;background:var(--primary-soft);color:var(--primary);}
.ho-ic svg{width:17px;height:17px;}
.ho-ic.gold{background:var(--amber-soft);color:var(--warn);}
.ho-b{min-width:0;flex:1 1 190px;}
.ho-b b{display:block;font-size:13.5px;font-weight:600;}
.ho-d{display:block;font-size:12px;color:var(--ink-4);margin-top:1px;}
.ho-d b{display:inline;color:var(--primary);font-weight:700;}
.ho-row.gold .ho-d b{color:var(--warn);}
.ho-code{flex:1 1 220px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink-3);
  background:var(--canvas);padding:7px 11px;border-radius:9px;}
.ho-code.strong{font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--ink);
  background:var(--amber-soft);}
.ho-row .btn{flex:0 0 auto;}

@media(max-width:980px){
  .ho-head .btn{margin-left:0;width:100%;}
  .ho-row{flex-wrap:wrap;gap:9px;}
  .ho-b{flex:1 1 100%;}
  .ho-code{flex:1 1 auto;}
}

/* ---- Clients rows: make "this opens something" visible ------------------ */
.ref-row{cursor:pointer;}
.ref-go{width:34px;padding-left:0!important;}
.ref-chev{display:inline-flex;color:var(--ink-4);opacity:.45;transition:opacity .12s,transform .12s,color .12s;}
.ref-row:hover .ref-chev{opacity:1;color:var(--primary);transform:translateX(2px);}
.ref-row:hover .ref-built{color:var(--primary-d);}
.ref-row:hover .uav{color:var(--primary-d);}
/* Keyboard parity — the row is a control, so it must show focus like one. */
.ref-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}

/* ---- wizard polish: coins, badge slot, code chip ------------------------ */
/* The same minted-coin treatment the dashboard banner uses, so the money motif
   is one idea across the product rather than two. Sits behind the content and
   never intercepts a click. */
.wiz-coins{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:var(--rl);}
.wiz-card .coin3d.c1{width:58px;height:58px;top:26px;right:60px;animation:coinFloat 5.6s ease-in-out infinite;}
.wiz-card .coin3d.c1::after{font-size:23px;}
.wiz-card .coin3d.c2{width:32px;height:32px;top:74px;right:136px;animation:coinFloat 4.6s ease-in-out .35s infinite;}
.wiz-card .coin3d.c2::after{font-size:13px;}
.wiz-card .coin3d.c3{width:22px;height:22px;top:20px;right:152px;opacity:.9;animation:coinFloat 6.4s ease-in-out .9s infinite;}
.wiz-card .coin3d.c3::after{font-size:10px;}
/* content rides above the coins */
.wiz-head,.wiz-step{position:relative;z-index:1;}
/* the step dots sit where the big coin does — keep them clear of it */
.wiz-dots{margin-right:104px;}

/* Badge on its own line above the title. Absolute positioning put it on top of
   long plan names ("Long- & Mid-Term Rentals (LTR/MTR)"); a reserved slot also
   keeps every card's title on the same baseline. */
.wsell-tag{display:block;min-height:15px;margin-bottom:5px;}
.wsell-tag i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--warn);background:var(--warn-soft);padding:2px 7px;border-radius:999px;}
.wsell-p b{padding-right:0;}

/* The discount code reads as a thing you tear off and hand over. */
.wshare-row code.sc-code{background:var(--amber-soft);border:1px dashed rgba(230,173,60,.55);
  padding:7px 12px;border-radius:9px;text-align:center;color:#7a5410;}

@media(max-width:980px){
  .wiz-coins{display:none;}
  .wiz-dots{margin-right:0;}
}

/* Lane cards state the MONEY, not a category — a new partner needs a number
   they can act on. Two lines: the headline amount, then the qualifier. */
.wl-pay{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
.wl-pay b{display:block;font-family:var(--disp);font-size:15px;font-weight:700;color:var(--primary-d);letter-spacing:-.01em;}
.wl-pay i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-4);line-height:1.45;margin-top:3px;}
.wl-pay.gold b{color:var(--warn);}
.wlane.on .wl-pay{border-top-color:rgba(97,57,132,.22);}

/* Equal-height badge slot so every plan title lands on the same line whether or
   not the card carries a "Most popular" tag. min-height left an 8px step. */
.wsell-tag{height:17px;min-height:0;line-height:17px;}
/* Reserve two lines for the qualifier so the divider above the money lands on
   the same row across all three cards — a ragged rule reads as a mistake. */
.wl-pay i{min-height:34px;}

/* ---- wizard step 2, rebuilt around the MARGIN ---------------------------
   The old card showed only the catalog price, which read like a price list for
   something the partner was buying. Each card now states the client's price
   quietly and the partner's take loudly — that is the reason the step exists. */
.wsell-p{display:flex;flex-direction:column;padding:14px 15px 13px;}
.wsell-p b{font-size:13.5px;line-height:1.35;margin-bottom:9px;}
.wsell-pr{margin:0;}
.wsell-base{display:block;font-size:11.5px;color:var(--ink-4);}
.wsell-base b{display:inline;font-family:var(--disp);font-size:15px;font-weight:700;color:var(--ink-2);margin:0 0 0 2px;}
.wsell-base i{font-style:normal;font-size:11px;color:var(--ink-4);}
.wsell-earn{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--line-2);}
.wsell-earn-k{flex:1 1 100%;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--good);margin-bottom:2px;}
.wsell-earn b{display:inline;font-family:var(--disp);font-size:21px;font-weight:700;color:var(--good);
  letter-spacing:-.02em;margin:0;}
.wsell-earn i{font-style:normal;font-size:12px;color:var(--ink-4);font-weight:600;}
.wsell-earn.free b{font-size:12.5px;color:var(--ink-3);font-family:var(--sans);font-weight:600;}
.wsell-earn.free .wsell-earn-k{color:var(--ink-4);}
.wsell-note b{color:var(--primary);font-weight:700;}
.wsell-more{font-style:italic;}

/* The coins were half-clipped by the card edge, which reads as a rendering
   fault rather than decoration. Pulled inboard and softened. */
.wiz-card .coin3d.c1{top:20px;right:34px;width:52px;height:52px;}
.wiz-card .coin3d.c1::after{font-size:21px;}
.wiz-card .coin3d.c2{top:70px;right:104px;width:28px;height:28px;}
.wiz-card .coin3d.c2::after{font-size:12px;}
.wiz-card .coin3d.c3{top:16px;right:116px;width:18px;height:18px;opacity:.85;}
.wiz-card .coin3d.c3::after{font-size:8px;}
.wiz-dots{margin-right:150px;}

@media(max-width:980px){
  .wsell-earn b{font-size:19px;}
  .wiz-dots{margin-right:0;}
}

/* ---- type weight across the new screens ---------------------------------
   Restrained on purpose. The display face carries the few things that must be
   read first — the step heading and the money figure — and everything else sits
   at 600/500 so the page has one emphasis, not twenty. An earlier pass ran the
   whole thing at 800 and the hierarchy disappeared: when it is all bold, none
   of it is. */
.wiz-h{font-weight:600;letter-spacing:-.02em;}
.wiz-sub{font-weight:400;color:var(--ink-3);}
.wiz-badge{font-weight:600;}
.wl-t{font-weight:600;font-family:var(--disp);font-size:16.5px;letter-spacing:-.01em;}
.wl-who{font-weight:400;}
.wl-pay b{font-weight:600;}
.wl-pay i{font-weight:400;color:var(--ink-4);}
.wsell-h b{font-family:var(--disp);font-weight:600;font-size:15.5px;letter-spacing:-.006em;}
.wsell-n{font-weight:600;}
.wsell-note{font-weight:400;color:var(--ink-4);}
.wsell-note b{font-weight:600;}
.wsell-p b{font-weight:600;}
.wsell-base{font-weight:400;}
.wsell-base b{font-weight:600;}
/* the one figure on this screen that has to land — kept a step above the rest */
.wsell-earn b{font-weight:700;}
.wsell-earn-k{font-weight:600;letter-spacing:.04em;}
.wsell-flat b{font-weight:600;}
.wshare-h b{font-family:var(--disp);font-weight:600;font-size:15.5px;letter-spacing:-.006em;}
.wshare-d{font-weight:400;}
.wshare-earn{font-weight:500;}
.wshare-earn b{font-weight:700;}
.wiz-actions .btn{font-weight:600;}
.wiz-seg button.on{font-weight:600;}

/* dashboard handouts + clients table follow the same restraint */
.ho-head b{font-family:var(--disp);font-weight:600;font-size:15.5px;letter-spacing:-.006em;}
.ho-b b{font-weight:600;}
.ho-d{font-weight:400;}
.ho-d b{font-weight:600;}
.ho-code.strong{font-weight:600;}
.ref-built b{font-weight:600;}
.cw-nm b{font-weight:600;}
.cw-earn b{font-weight:700;}
.cw-sec b{font-family:var(--disp);font-weight:600;letter-spacing:-.006em;}
.cw-card-b b{font-weight:600;}
.cw-price{font-weight:600;}
.phone-ask .pa-b b{font-weight:600;}

/* ---- step 3: the payout illustration ------------------------------------
   Two columns — the form, and a picture of what the form is for. Coins fall
   into the partner's own card on a loop, so the empty half of the step now
   says "this is where your money lands" instead of nothing. */
.wiz-pay-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start;}
.wiz-pay{max-width:none;}

.wiz-art{position:relative;padding-top:6px;}
.art-sky{position:relative;height:96px;overflow:hidden;}
.art-coin{position:absolute;top:-26px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff 0%,#fdf3da 16%,#f2cf7a 46%,#d99c25 76%,#9c6c12 100%);
  box-shadow:0 8px 16px rgba(217,156,37,.30),inset 0 -4px 9px rgba(156,108,18,.30),inset 0 3px 6px rgba(255,255,255,.55);
  opacity:0;animation:artDrop 3.6s cubic-bezier(.5,.05,.6,1) infinite;}
.art-coin::after{content:"$";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:12px;color:#8a5e0e;text-shadow:0 1px 0 #ffe9b3;}
.art-coin.c1{left:22%;animation-delay:0s;}
.art-coin.c2{left:46%;width:20px;height:20px;animation-delay:.75s;}
.art-coin.c2::after{font-size:9px;}
.art-coin.c3{left:68%;width:30px;height:30px;animation-delay:1.5s;}
.art-coin.c3::after{font-size:14px;}
.art-coin.c4{left:36%;width:16px;height:16px;animation-delay:2.3s;}
.art-coin.c4::after{font-size:8px;}
@keyframes artDrop{
  0%{transform:translateY(0) rotate(-12deg) scale(.85);opacity:0;}
  14%{opacity:1;}
  70%{transform:translateY(96px) rotate(16deg) scale(1);opacity:1;}
  86%{transform:translateY(112px) rotate(20deg) scale(.6);opacity:0;}
  100%{transform:translateY(112px) rotate(20deg) scale(.6);opacity:0;}
}

.art-card{position:relative;overflow:hidden;border-radius:16px;padding:16px 17px 14px;
  background:linear-gradient(145deg,#5b3379 0%,#3f2357 55%,#2b1740 100%);
  box-shadow:0 18px 34px rgba(43,23,64,.34),inset 0 1px 0 rgba(255,255,255,.16);
  color:#fff;display:flex;flex-direction:column;gap:13px;}
.art-shine{position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);
  animation:artShine 4.4s ease-in-out infinite;}
@keyframes artShine{0%,62%{left:-60%;}88%,100%{left:120%;}}
.art-card-h{display:flex;align-items:center;gap:9px;}
.art-chip{width:26px;height:19px;border-radius:5px;flex:0 0 auto;
  background:linear-gradient(140deg,#f6dfa2,#d9a83c 55%,#a97b18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);}
.art-brand{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.66);}
.art-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.06em;
  color:rgba(255,255,255,.9);}
.art-num b{font-weight:700;color:#fff;}
.art-card-f{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.art-nm{font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:rgba(255,255,255,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.art-in{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#8fe0b4;}

.art-cap{margin:14px 2px 0;font-size:12px;line-height:1.55;color:var(--ink-4);}

@media (prefers-reduced-motion:reduce){
  .art-coin,.art-shine{animation:none!important;}
  .art-coin{opacity:1;transform:translateY(70px);}
}
@media(max-width:980px){
  .wiz-pay-wrap{grid-template-columns:1fr;gap:22px;}
  .wiz-art{order:-1;display:flex;align-items:center;gap:14px;padding-top:0;}
  .art-sky{display:none;}
  .art-card{flex:1;}
  .art-cap{display:none;}
}

/* One more notch down, on request. Only the money figure and the drawer's
   balance stay at 700 — they are the two things that must out-rank the copy
   around them; everything else now sits at 500/600. */
.wiz-h{font-weight:600;}
.wl-t{font-weight:600;}
.wsell-earn-k{font-weight:600;}
.wiz-badge{font-weight:500;}
.wsell-n{font-weight:500;}
.art-brand{font-weight:500;}
.art-nm{font-weight:500;}
.art-in{font-weight:600;}
.art-num b{font-weight:600;}

/* ---- payout rail icons --------------------------------------------------
   The three payout methods now carry the same line icon everywhere they are
   offered: the wizard's step 3, Financials → Payout method, and the withdraw
   modal (which was using emoji — the one place in the portal that did). */
.pm-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:var(--ink-4);transition:color .14s;}
.wiz-seg button,.seg .seg-b,#payout-seg button{display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.wiz-seg button.on .pm-ic,#payout-seg button.on .pm-ic,.seg .seg-b.active .pm-ic{color:var(--primary);}
/* the Financials seg paints its active button solid, so the icon inverts */
#payout-seg button.on .pm-ic{color:inherit;}
.wd-m-ic svg{display:block;width:18px;height:18px;}
.wd-m-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:var(--canvas-2);color:var(--ink-3);flex:0 0 auto;}
.wd-method.on .wd-m-ic{background:var(--primary-soft);color:var(--primary);}

@media(max-width:980px){
  .wiz-seg button{justify-content:flex-start;}
}
/* Brand marks carry their own fills, so the currentColor inversion that the
   bank icon needs must not touch them. */
.pm-ic svg[aria-hidden] rect[fill],.pm-ic svg path[fill]{color:initial;}
.wd-m-ic{background:transparent;width:auto;height:auto;}
.wd-method .wd-m-ic svg{width:20px;height:20px;}
.wd-method.on .wd-m-ic{background:transparent;}
/* Adding an icon pushed the longest label onto a second line, making that
   button taller than its siblings. Keep each on one line. */
.wiz-seg button{white-space:nowrap;padding-left:11px;padding-right:11px;}
/* A very long unbroken name must not push the heading out of the card. The
   PHP side already drops an over-long greeting name, this is the backstop for
   anything that still gets through (a pasted string with no spaces). */
.wiz-h,.sc-head-txt b{overflow-wrap:anywhere;}

/* =============================================================================
 * WANTING TO CLICK IT
 * -----------------------------------------------------------------------------
 * The wizard asks for four decisions in a row. Each primary action now reads as
 * the obvious next move: a light sweeps across it on a slow loop so the eye
 * lands there, it lifts under the cursor, and it presses down on click. The
 * sweep is a pseudo-element behind the label, so it never blurs the text, and
 * it stops entirely on hover — an animation that keeps running while you are
 * trying to click reads as busy rather than inviting.
 * ========================================================================== */
.wiz-actions .btn.primary,
.handouts .btn.primary,
.wshare-row .btn.primary{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s ease,filter .16s ease;}

.wiz-actions .btn.primary::after,
.handouts .btn.primary::after{content:"";position:absolute;top:-60%;left:-75%;width:45%;height:220%;
  z-index:-1;pointer-events:none;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:ctaSheen 4.2s ease-in-out infinite;}
@keyframes ctaSheen{0%,64%{left:-75%;}92%,100%{left:135%;}}

.wiz-actions .btn.primary:hover,
.handouts .btn.primary:hover{transform:translateY(-1.5px);
  box-shadow:0 12px 26px color-mix(in srgb,var(--primary) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.45);
  filter:saturate(112%);}
.wiz-actions .btn.primary:hover::after,
.handouts .btn.primary:hover::after{animation-play-state:paused;}
.wiz-actions .btn.primary:active,
.handouts .btn.primary:active{transform:translateY(0) scale(.985);
  box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 30%,transparent);}

/* A disabled step-1 button must not shimmer — it is not an invitation yet. */
.wiz-actions .btn.primary:disabled::after{display:none;}
.wiz-actions .btn.primary:disabled{transform:none;filter:none;}

/* Lane cards: lift toward the cursor so picking one feels physical, and glow
   once chosen so the answer is unmistakable. */
.wlane{transition:border-color .16s,background .16s,box-shadow .16s,transform .16s cubic-bezier(.2,.8,.3,1);}
.wlane:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(40,20,60,.13);}
.wlane:active{transform:translateY(-1px) scale(.995);}
.wlane.on{box-shadow:0 10px 26px rgba(97,57,132,.20),0 0 0 1px rgba(97,57,132,.10);}
.wlane.on:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(97,57,132,.26);}
.wl-tick{transform:scale(.4);transition:opacity .16s,transform .22s cubic-bezier(.2,1.6,.4,1);}
.wlane.on .wl-tick{transform:scale(1);}

/* The plan cards and the handout rows respond too, so the whole surface feels
   live rather than a static picture of an interface. */
.wsell-p{transition:border-color .16s,box-shadow .16s,transform .16s;}
.wsell-p:hover{border-color:var(--line-2);box-shadow:0 8px 20px rgba(40,20,60,.09);transform:translateY(-2px);}
.ho-row{transition:border-color .14s,box-shadow .14s;}
.ho-row:hover{border-color:var(--line-2);box-shadow:0 6px 16px rgba(40,20,60,.08);}

@media (prefers-reduced-motion:reduce){
  .wiz-actions .btn.primary::after,.handouts .btn.primary::after{animation:none;display:none;}
  .wlane,.wlane:hover,.wsell-p:hover,.wiz-actions .btn.primary:hover,.handouts .btn.primary:hover{transform:none;}
}
/* Step 4 link rows — one per lane, stacked, each with its own copy button. */
#wiz-4 .wshare-row{margin-bottom:8px;}
#wiz-4 .wshare-row:last-of-type{margin-bottom:0;}
.wshare-lane{flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);background:var(--canvas);padding:3px 8px;border-radius:999px;}

/* =============================================================================
 * THE DISCOUNT CODE, AS A COUPON
 * -----------------------------------------------------------------------------
 * The code is the thing a partner reads aloud, prints, or hands across a table,
 * and it was rendering as plain grey monospace — indistinguishable from the
 * masked URL sitting directly above it. It now looks like something worth
 * tearing off: warm gold ticket, dashed cut-line, notched edges, and a slow
 * sheen so the eye lands on it. Used everywhere the code appears, so it reads
 * the same on the dashboard, in Invite, and in the wizard's last step.
 * ========================================================================== */
code.coupon{position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:1 1 auto;min-width:0;overflow:hidden;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#6b4708;padding:11px 16px;border-radius:10px;
  background:linear-gradient(135deg,#fff8e6 0%,#fbeec4 42%,#f6dfa2 100%);
  border:1.5px dashed rgba(176,124,20,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 8px rgba(176,124,20,.14);
  text-shadow:0 1px 0 rgba(255,255,255,.7);}

/* the two notches that make it read as a torn ticket */
code.coupon::before{content:"";position:absolute;top:50%;left:-7px;width:12px;height:12px;
  transform:translateY(-50%);border-radius:50%;background:var(--surface);
  box-shadow:inset -1px 0 0 rgba(176,124,20,.35);}
code.coupon::after{content:"";position:absolute;top:50%;right:-7px;width:12px;height:12px;
  transform:translateY(-50%);border-radius:50%;background:var(--surface);
  box-shadow:inset 1px 0 0 rgba(176,124,20,.35);}

/* the sheen — a sibling span would be cleaner but the code element is a leaf,
   so it rides on a background layer that sweeps and then rests */
code.coupon{background-image:
  linear-gradient(100deg,transparent 38%,rgba(255,255,255,.85) 48%,transparent 58%),
  linear-gradient(135deg,#fff8e6 0%,#fbeec4 42%,#f6dfa2 100%);
  background-size:220% 100%,100% 100%;background-repeat:no-repeat;
  background-position:180% 0,0 0;
  animation:couponSheen 4.6s ease-in-out infinite;}
@keyframes couponSheen{0%,66%{background-position:180% 0,0 0;}94%,100%{background-position:-90% 0,0 0;}}

/* on the gold row the notches must match that row's background, not the card's */
.ho-row.gold code.coupon::before,.ho-row.gold code.coupon::after{background:#fffdf7;}
.wshare.gold code.coupon::before,.wshare.gold code.coupon::after{background:#fbfcfd;}

/* step 4 gives it room to be the hero of its card */
#wiz-4 code.coupon{font-size:17px;padding:13px 18px;letter-spacing:.18em;}

@media (prefers-reduced-motion:reduce){ code.coupon{animation:none;background-position:180% 0,0 0;} }
@media(max-width:980px){ code.coupon{font-size:14px;letter-spacing:.1em;} #wiz-4 code.coupon{font-size:15px;} }

/* =============================================================================
 * THE TWO HANDOUTS — ONE LANGUAGE, WHEREVER THEY APPEAR
 * -----------------------------------------------------------------------------
 * The link and the code are the only two things a partner ever hands to another
 * human, and they show up twice: at the end of onboarding (#wiz-4) and on the
 * Invite tab (#rf-invite). Both places were rendering them as flat grey panels
 * that buried the one fact a partner is actually looking for — what they get
 * paid — in a sentence of body copy.
 *
 * Shared vocabulary below, then one block per surface:
 *   · purple identity for the link, gold for the code, carried end to end
 *     through a lit top rule, a corner wash and a gradient icon chip
 *   · the payout stated as its own object, with the number set loud
 *   · the code drawn as a ticket you tear off, at a size you can read aloud
 *   · a slow twinkle in the dead corner so the pair feels like a reward
 *     rather than a form — off-text, low contrast, and still under
 *     prefers-reduced-motion
 * ========================================================================== */

:root{
  /* four-point sparkle, in each identity colour */
  --ct-star-p:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23613984' d='M12 0c0 6.6 5.4 12 12 12-6.6 0-12 5.4-12 12 0-6.6-5.4-12-12-12 6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E");
  --ct-star-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d99a24' d='M12 0c0 6.6 5.4 12 12 12-6.6 0-12 5.4-12 12 0-6.6-5.4-12-12-12 6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E");
  --ct-star-pl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237a4ba3' d='M12 0c0 6.6 5.4 12 12 12-6.6 0-12 5.4-12 12 0-6.6-5.4-12-12-12 6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E");
  --ct-star-gl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dfa031' d='M12 0c0 6.6 5.4 12 12 12-6.6 0-12 5.4-12 12 0-6.6-5.4-12-12-12 6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E");
  /* the money glyphs that open each payout line */
  --ct-trend:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23472963' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E");
  --ct-coin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10'/%3E%3Cpath d='M14.6 9.4A2.4 2.4 0 0 0 12.2 8h-.9a1.9 1.9 0 0 0 0 3.9h1.4a1.9 1.9 0 0 1 0 3.9h-.9a2.4 2.4 0 0 1-2.4-1.4'/%3E%3C/svg%3E");
  /* white glyphs for the gradient title chips */
  --ct-ic-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E");
  --ct-ic-pct:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='7.5' cy='7.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='16.5' r='2.5'/%3E%3C/svg%3E");
  /* the lit hairline across the top edge of each card */
  --ct-rule-p:linear-gradient(90deg,rgba(97,57,132,0) 0%,rgba(97,57,132,.55) 26%,rgba(122,75,163,.85) 50%,rgba(97,57,132,.55) 74%,rgba(97,57,132,0) 100%);
  --ct-rule-g:linear-gradient(90deg,rgba(196,125,26,0) 0%,rgba(230,173,60,.6) 26%,rgba(240,189,84,.95) 50%,rgba(230,173,60,.6) 74%,rgba(196,125,26,0) 100%);
  /* the ticket face */
  --ct-ticket:linear-gradient(135deg,#fff8e6 0%,#fbeec4 42%,#f6dfa2 100%);
  --ct-ticket-sheen:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.85) 48%,transparent 58%);
  --ct-chip-p:linear-gradient(145deg,#8154ab 0%,#613984 46%,#472963 100%);
  --ct-chip-g:linear-gradient(145deg,#f4c76a 0%,#e0a333 46%,#c47d1a 100%);
}

/* NOT tabular-nums. Schibsted Grotesk gives punctuation a full digit advance in
   its tabular set, so every thousands separator opened a visible gap — "$1 , 368"
   in the Clients table, "$14 , 820" on the dashboard. Lining figures keep the
   numerals even without stretching the commas. */
.num{font-variant-numeric:lining-nums;font-feature-settings:normal;}

@keyframes ctTwinkle{
  0%,72%,100%{opacity:0;transform:scale(.72) rotate(-8deg);}
  84%{opacity:.85;transform:scale(1) rotate(0deg);}
  92%{opacity:.28;transform:scale(.92) rotate(4deg);}
}
@keyframes ctSweep{0%,68%{transform:translateX(-130%);}96%,100%{transform:translateX(130%);}}


/* =============================================================================
 * 1 · ONBOARDING, STEP 4 — the two cards side by side
 * ========================================================================== */

#wiz-4 .wiz-share{gap:18px;}

#wiz-4 .wshare{
  position:relative;overflow:hidden;isolation:isolate;
  padding:22px 20px 20px;border-radius:18px;
  border:1px solid rgba(97,57,132,.16);
  background:
    var(--ct-rule-p) top left/100% 3px no-repeat,
    radial-gradient(115% 80% at 100% 0%,rgba(97,57,132,.085) 0%,rgba(97,57,132,0) 62%),
    linear-gradient(180deg,#ffffff 0%,#fcfaff 100%);
  box-shadow:0 1px 2px rgba(40,20,60,.045),0 14px 34px -22px rgba(97,57,132,.55);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease,border-color .2s ease;
}
#wiz-4 .wshare:hover{
  transform:translateY(-3px);border-color:rgba(97,57,132,.28);
  box-shadow:0 2px 4px rgba(40,20,60,.05),0 22px 46px -24px rgba(97,57,132,.6);
}
#wiz-4 .wshare.gold{
  border-color:rgba(196,125,26,.24);
  background:
    var(--ct-rule-g) top left/100% 3px no-repeat,
    radial-gradient(115% 80% at 100% 0%,rgba(230,173,60,.14) 0%,rgba(230,173,60,0) 62%),
    linear-gradient(180deg,#ffffff 0%,#fffcf3 100%);
  box-shadow:0 1px 2px rgba(90,60,10,.05),0 14px 34px -22px rgba(196,125,26,.6);
}
#wiz-4 .wshare.gold:hover{
  border-color:rgba(196,125,26,.4);
  box-shadow:0 2px 4px rgba(90,60,10,.05),0 22px 46px -24px rgba(196,125,26,.65);
}

/* two clusters on offset delays, so they never blink in unison */
#wiz-4 .wshare::before,
#wiz-4 .wshare::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;
  background-repeat:no-repeat;opacity:0;
}
#wiz-4 .wshare::before{
  top:14px;right:14px;width:96px;height:58px;
  background-image:var(--ct-star-p),var(--ct-star-p),var(--ct-star-p);
  background-size:13px 13px,7px 7px,5px 5px;
  background-position:100% 4%,58% 40%,80% 86%;
  animation:ctTwinkle 5.2s ease-in-out infinite;
}
#wiz-4 .wshare::after{
  top:30px;right:70px;width:64px;height:52px;
  background-image:var(--ct-star-p),var(--ct-star-p);
  background-size:9px 9px,5px 5px;
  background-position:8% 10%,72% 78%;
  animation:ctTwinkle 5.2s ease-in-out 2.4s infinite;
}
#wiz-4 .wshare.gold::before{background-image:var(--ct-star-g),var(--ct-star-g),var(--ct-star-g);}
#wiz-4 .wshare.gold::after{background-image:var(--ct-star-g),var(--ct-star-g);}

#wiz-4 .wshare-h{margin-bottom:13px;gap:11px;}
#wiz-4 .wshare-h b{font-size:16.5px;}
#wiz-4 .wshare-ic{
  position:relative;width:36px;height:36px;border-radius:11px;color:#fff;
  background:var(--ct-chip-p);
  box-shadow:0 7px 16px -6px rgba(97,57,132,.75),inset 0 1px 0 rgba(255,255,255,.4);
}
#wiz-4 .wshare-ic.gold{
  background:var(--ct-chip-g);
  box-shadow:0 7px 16px -6px rgba(196,125,26,.7),inset 0 1px 0 rgba(255,255,255,.55);
}
#wiz-4 .wshare-ic svg{width:18px;height:18px;}
/* a star that catches on the chip — tinted, not white: the corner it sits in is
   the card's white face, where a white star would be invisible */
#wiz-4 .wshare-ic::after{
  content:"";position:absolute;top:-6px;right:-6px;width:12px;height:12px;pointer-events:none;opacity:0;
  background:var(--ct-star-pl) center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(97,57,132,.5));
  animation:ctTwinkle 5.2s ease-in-out 1.1s infinite;
}
#wiz-4 .wshare-ic.gold::after{
  background-image:var(--ct-star-gl);
  filter:drop-shadow(0 0 5px rgba(196,125,26,.55));
}

#wiz-4 .wshare-d{margin-bottom:15px;font-size:13.2px;line-height:1.56;}

/* the payout line. Block, not flex — flex would make "You earn" and the <b> two
   separate items and open a gap in the middle of the sentence. */
#wiz-4 .wshare-earn{
  position:relative;overflow:hidden;display:block;
  margin:0 0 14px;padding:11px 14px 11px 40px;border-radius:12px;
  font-size:13px;font-weight:600;letter-spacing:-.002em;line-height:1.45;
  color:var(--primary-d);
  background:linear-gradient(135deg,#f4eefb 0%,#e9dff6 100%);
  border:1px solid rgba(97,57,132,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
#wiz-4 .wshare-earn::before{
  content:"";position:absolute;left:14px;top:50%;margin-top:-8px;width:17px;height:17px;
  background:var(--ct-trend) center/contain no-repeat;
}
#wiz-4 .wshare-earn.gold{
  color:#8a5a12;
  background:linear-gradient(135deg,#fdf4de 0%,#f9e8c0 100%);
  border-color:rgba(196,125,26,.24);
}
#wiz-4 .wshare-earn.gold::before{background-image:var(--ct-coin);}
#wiz-4 .wshare-earn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%);
  transform:translateX(-130%);
  animation:ctSweep 5.6s ease-in-out infinite;
}

#wiz-4 .wshare-row{
  gap:9px;padding:8px 8px 8px 13px;border-radius:12px;
  border:1px solid var(--line-2);background:#fff;
  box-shadow:inset 0 1px 2px rgba(40,20,60,.04);
  transition:border-color .16s ease,box-shadow .16s ease;
}
#wiz-4 .wshare-row:hover{
  border-color:rgba(97,57,132,.34);
  box-shadow:0 8px 20px -12px rgba(97,57,132,.6);
}
/* :not(.coupon) — the ticket is a sibling of this selector and keeps its own
   hero sizing below, not the masked-URL treatment */
#wiz-4 .wshare-row code:not(.coupon){font-size:12.8px;color:var(--ink-2);}
#wiz-4 .wshare-lane{background:var(--primary-soft);color:var(--primary-d);}

#wiz-4 .wshare-row .btn.primary::after{
  content:"";position:absolute;top:-60%;left:-75%;width:45%;height:220%;
  z-index:-1;pointer-events:none;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:ctaSheen 4.2s ease-in-out infinite;
}
#wiz-4 .wshare-row .btn.primary:hover{
  transform:translateY(-1.5px);
  box-shadow:0 10px 22px -8px rgba(97,57,132,.75),inset 0 1px 0 rgba(255,255,255,.45);
}
#wiz-4 .wshare-row .btn.primary:hover::after{animation-play-state:paused;}
#wiz-4 .wshare-row .btn.primary:active{transform:translateY(0) scale(.97);}

/* the coupon owns its card: the inner white row was a box inside a box that
   shrank the ticket it was meant to frame */
#wiz-4 .wshare.gold .wshare-row{background:none;border:0;box-shadow:none;padding:2px 0 0;gap:11px;}
#wiz-4 .wshare.gold .wshare-row:hover{box-shadow:none;}
#wiz-4 .wshare-fine{margin-top:11px;font-size:11.8px;}

#wiz-4 .wshare-more{margin-top:11px;}
#wiz-4 .wshare-more .btn{
  border-style:dashed;border-color:rgba(97,57,132,.3);color:var(--primary-d);
  font-weight:600;background:rgba(97,57,132,.035);
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
#wiz-4 .wshare-more .btn:hover{
  background:rgba(97,57,132,.09);border-color:rgba(97,57,132,.5);
  border-style:solid;transform:translateY(-1px);
}

#wiz-4 .wiz-safe.plain{
  margin-top:20px;padding:13px 16px;border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff 0%,#f6f7fa 100%);
}


/* =============================================================================
 * 2 · INVITE TAB — the same two objects, stacked full width
 * -----------------------------------------------------------------------------
 * Same identity as the wizard so a partner recognises them, with the payout
 * promoted out of the body copy into its own object: the number is set in the
 * display face at 21px, because "what do I get" is the only question this
 * screen exists to answer.
 * ========================================================================== */

#rf-invite .referral-card{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid rgba(97,57,132,.16);border-radius:18px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:
    var(--ct-rule-p) top left/100% 3px no-repeat,
    radial-gradient(70% 130% at 100% 0%,rgba(97,57,132,.07) 0%,rgba(97,57,132,0) 60%),
    linear-gradient(180deg,#ffffff 0%,#fcfaff 100%);
  box-shadow:0 1px 2px rgba(40,20,60,.045),0 16px 40px -28px rgba(97,57,132,.5);
}
#rf-invite .referral-card.gold{
  border-color:rgba(196,125,26,.24);
  background:
    var(--ct-rule-g) top left/100% 3px no-repeat,
    radial-gradient(70% 130% at 100% 0%,rgba(230,173,60,.12) 0%,rgba(230,173,60,0) 60%),
    linear-gradient(180deg,#ffffff 0%,#fffcf3 100%);
  box-shadow:0 1px 2px rgba(90,60,10,.05),0 16px 40px -28px rgba(196,125,26,.55);
}

/* the twinkle sits mid-right, below the head pill and clear of the copy, which
   is left-aligned and never reaches this far at desktop widths */
#rf-invite .referral-card::before,
#rf-invite .referral-card::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;
  background-repeat:no-repeat;opacity:0;
}
#rf-invite .referral-card::before{
  top:100px;right:28px;width:132px;height:60px;
  background-image:var(--ct-star-p),var(--ct-star-p),var(--ct-star-p);
  background-size:13px 13px,7px 7px,5px 5px;
  background-position:100% 6%,54% 46%,78% 92%;
  animation:ctTwinkle 5.2s ease-in-out infinite;
}
#rf-invite .referral-card::after{
  top:116px;right:126px;width:88px;height:52px;
  background-image:var(--ct-star-p),var(--ct-star-p);
  background-size:9px 9px,5px 5px;
  background-position:10% 12%,74% 80%;
  animation:ctTwinkle 5.2s ease-in-out 2.4s infinite;
}
#rf-invite .referral-card.gold::before{background-image:var(--ct-star-g),var(--ct-star-g),var(--ct-star-g);}
#rf-invite .referral-card.gold::after{background-image:var(--ct-star-g),var(--ct-star-g);}

/* ---- head: chip spans both rows so the title and its sub hang off one mark -- */
#rf-invite .referral-card .rc-head{margin-bottom:15px;}
#rf-invite .referral-card .rc-head>div{
  display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:center;min-width:0;
}
#rf-invite .referral-card .rc-head>div::before{
  content:"";grid-row:1/3;align-self:center;
  width:38px;height:38px;border-radius:12px;
  background:var(--ct-ic-link) center/18px 18px no-repeat,var(--ct-chip-p);
  box-shadow:0 7px 16px -6px rgba(97,57,132,.7),inset 0 1px 0 rgba(255,255,255,.4);
}
#rf-invite .referral-card.gold .rc-head>div::before{
  background:var(--ct-ic-pct) center/18px 18px no-repeat,var(--ct-chip-g);
  box-shadow:0 7px 16px -6px rgba(196,125,26,.65),inset 0 1px 0 rgba(255,255,255,.55);
}
#rf-invite .referral-card .rc-head>div>b{grid-column:2;font-size:17px;}
#rf-invite .referral-card .rc-head>div>p{grid-column:2;}
#rf-invite .referral-card .rc-head .pill{
  flex:0 0 auto;padding:5px 13px;font-size:12.5px;
  background:linear-gradient(135deg,#f4eefb,#e9dff6);
  border:1px solid rgba(97,57,132,.18);color:var(--primary-d);
}
#rf-invite .referral-card .rc-head .pill.gold{
  background:linear-gradient(135deg,#fdf4de,#f9e8c0);
  border-color:rgba(196,125,26,.26);color:#8a5a12;
}

/* ---- the payout, as the loudest thing on the card ------------------------- */
/* block + fit-content, NOT inline-block: the lane segmented control below it is
   inline-flex, so an inline-level chip lets the seg flow up onto the same line */
#rf-invite .rc-earn{
  position:relative;overflow:hidden;display:block;width:fit-content;max-width:100%;
  margin:0 0 16px;padding:12px 20px 12px 46px;border-radius:13px;
  font-size:13.5px;font-weight:600;line-height:1.35;letter-spacing:-.002em;
  color:var(--primary-d);
  background:linear-gradient(135deg,#f4eefb 0%,#e6daf4 100%);
  border:1px solid rgba(97,57,132,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px -10px rgba(97,57,132,.5);
}
#rf-invite .rc-earn b{
  font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.02em;
  vertical-align:-1px;margin:0 1px;
}
#rf-invite .rc-earn::before{
  content:"";position:absolute;left:17px;top:50%;margin-top:-9px;width:19px;height:19px;
  background:var(--ct-trend) center/contain no-repeat;
}
#rf-invite .rc-earn.gold{
  color:#8a5a12;
  background:linear-gradient(135deg,#fdf4de 0%,#f7e3b4 100%);
  border-color:rgba(196,125,26,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 16px -10px rgba(196,125,26,.55);
}
#rf-invite .rc-earn.gold::before{background-image:var(--ct-coin);}
#rf-invite .rc-earn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%);
  transform:translateX(-130%);
  animation:ctSweep 5.6s ease-in-out infinite;
}

/* ---- the link row --------------------------------------------------------- */
#rf-invite .referral-card .linkbox{
  background:#fff;border:1px solid var(--line-2);border-radius:13px;
  padding:7px 7px 7px 15px;
  box-shadow:inset 0 1px 2px rgba(40,20,60,.04);
  transition:border-color .16s ease,box-shadow .16s ease;
}
#rf-invite .referral-card .linkbox:hover{
  border-color:rgba(97,57,132,.34);
  box-shadow:0 8px 20px -12px rgba(97,57,132,.55);
}
/* the title chip already carries the identity — a second link glyph one row
   down is the same mark twice */
#rf-invite .referral-card .linkbox .lk-ic{display:none;}
#rf-invite .referral-card .linkbox code:not(.coupon){font-size:13.5px;color:var(--ink-2);}

#rf-invite .referral-card .rc-actions .btn.primary{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s ease;
}
#rf-invite .referral-card .rc-actions .btn.primary::after{
  content:"";position:absolute;top:-60%;left:-75%;width:45%;height:220%;
  z-index:-1;pointer-events:none;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:ctaSheen 4.2s ease-in-out infinite;
}
#rf-invite .referral-card .rc-actions .btn.primary:hover{
  transform:translateY(-1.5px);
  box-shadow:0 10px 22px -8px rgba(97,57,132,.75),inset 0 1px 0 rgba(255,255,255,.45);
}
#rf-invite .referral-card .rc-actions .btn.primary:hover::after{animation-play-state:paused;}
#rf-invite .referral-card .rc-actions .btn.primary:active{transform:translateY(0) scale(.97);}

/* Share QR reads as the secondary way to hand the link over */
#rf-invite .referral-card .rc-actions>.btn:not(.primary){
  border-style:dashed;border-color:rgba(97,57,132,.3);color:var(--primary-d);
  font-weight:600;background:rgba(97,57,132,.035);
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
#rf-invite .referral-card .rc-actions>.btn:not(.primary):hover{
  background:rgba(97,57,132,.09);border-color:rgba(97,57,132,.5);
  border-style:solid;transform:translateY(-1px);
}

/* ---- the ticket ----------------------------------------------------------- */
/* borderless row: the coupon is the object here, not a field inside a field */
#rf-invite .referral-card.gold .linkbox{
  background:none;border:0;box-shadow:none;padding:0;gap:13px;
}
#rf-invite .referral-card.gold .linkbox:hover{box-shadow:none;}
/* `.linkbox code` and `.wshare-row code.sc-code` both out-rank `code.coupon`,
   so without the id here the ticket loses its gradient and its sheen and
   stretches the full width of the card with the code lost in the middle */
#rf-invite code.coupon{
  flex:0 1 auto;min-width:0;width:auto;max-width:340px;
  font-size:18px;padding:15px 22px;letter-spacing:.2em;border-radius:12px;
  color:#6b4708;border:1.5px dashed rgba(176,124,20,.6);
  background-image:var(--ct-ticket-sheen),var(--ct-ticket);
  background-size:220% 100%,100% 100%;
  background-repeat:no-repeat;background-position:180% 0,0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px -10px rgba(176,124,20,.65);
}
/* the notches read as the card showing through, so they must match the warm
   card face rather than the old flat white */
#rf-invite .referral-card.gold code.coupon::before,
#rf-invite .referral-card.gold code.coupon::after{background:#fffdf6;}
#rf-invite .referral-card .rc-fine{
  margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-4);max-width:74ch;
}
#rf-invite .referral-card .rc-fine b{color:var(--ink-3);}

/* also fix the ticket where it appears in the wizard, same specificity trap */
#wiz-4 code.coupon{
  font-size:18px;padding:15px 20px;letter-spacing:.2em;border-radius:12px;
  color:#6b4708;border:1.5px dashed rgba(176,124,20,.6);
  background-image:var(--ct-ticket-sheen),var(--ct-ticket);
  background-size:220% 100%,100% 100%;
  background-repeat:no-repeat;background-position:180% 0,0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px -10px rgba(176,124,20,.65);
}
#wiz-4 .wshare.gold code.coupon::before,
#wiz-4 .wshare.gold code.coupon::after{background:#fffdf6;}


/* =============================================================================
 * 3 · CLIENTS TABLE — a row that cannot open must not look like it can
 * -----------------------------------------------------------------------------
 * A click-only referral has no email yet, and openClient() queries by email, so
 * clicking those rows did nothing at all. The row still lit up on hover, still
 * showed a chevron and still changed the cursor, which is the worst version of
 * that bug: it reads as broken rather than as "there is nothing here yet".
 * ========================================================================== */
#rf-clients .ref-row.ref-flat{cursor:default;}
#rf-clients .ref-row.ref-flat:hover{background:transparent;}
#rf-clients .ref-row.ref-flat:hover .ref-built,
#rf-clients .ref-row.ref-flat:hover .uav{color:inherit;}
#rf-clients .ref-row.ref-flat .uav .a{opacity:.72;}
#rf-clients .ref-em i{font-style:normal;color:var(--ink-4);opacity:.8;}


/* =============================================================================
 * 4 · DASHBOARD "BRING SOMEONE IN" — three rows, one set of columns
 * -----------------------------------------------------------------------------
 * The rows were flex with per-item flex-basis, so the title, the payout and the
 * value box each started wherever the previous one happened to end and no two
 * rows agreed. Three offers that pay differently are only comparable if they
 * are laid out on the same grid, so that is what this is: mark, name, payout,
 * value, action — five columns, identical on every row.
 * ========================================================================== */

.handouts{
  position:relative;overflow:hidden;isolation:isolate;border-radius:18px;
  border:1px solid rgba(97,57,132,.16);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:
    var(--ct-rule-p) top left/100% 3px no-repeat,
    radial-gradient(60% 130% at 100% 0%,rgba(97,57,132,.06) 0%,rgba(97,57,132,0) 60%),
    linear-gradient(180deg,#ffffff 0%,#fcfaff 100%);
  box-shadow:0 1px 2px rgba(40,20,60,.045),0 16px 40px -28px rgba(97,57,132,.5);
}
.handouts .ho-head{margin-bottom:15px;}
.handouts .ho-head .btn{
  border-style:dashed;border-color:rgba(97,57,132,.3);color:var(--primary-d);
  font-weight:600;background:rgba(97,57,132,.035);
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.handouts .ho-head .btn:hover{
  background:rgba(97,57,132,.09);border-color:rgba(97,57,132,.5);
  border-style:solid;transform:translateY(-1px);
}

.handouts .ho-row{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto minmax(0,1.05fr) auto;
  align-items:center;column-gap:14px;
  padding:12px 14px;border-radius:14px;margin-top:10px;
  border:1px solid var(--line);background:#fff;
}
.handouts .ho-ic{
  width:36px;height:36px;border-radius:11px;color:#fff;
  background:var(--ct-chip-p);
  box-shadow:0 7px 16px -6px rgba(97,57,132,.7),inset 0 1px 0 rgba(255,255,255,.4);
}
.handouts .ho-ic.gold{
  background:var(--ct-chip-g);
  box-shadow:0 7px 16px -6px rgba(196,125,26,.65),inset 0 1px 0 rgba(255,255,255,.55);
}
.handouts .ho-ic svg{width:18px;height:18px;}
.handouts .ho-b{min-width:0;}
.handouts .ho-b b{font-size:14px;}
.handouts .ho-d{font-size:12.2px;color:var(--ink-4);margin-top:2px;}

/* the payout column — same place, same shape, on all three rows */
.handouts .ho-earn{
  display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;
  padding:6px 13px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--primary-d);
  background:linear-gradient(135deg,#f4eefb,#e9dff6);
  border:1px solid rgba(97,57,132,.16);
}
.handouts .ho-earn b{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:-.01em;}
.handouts .ho-earn.gold{
  color:#8a5a12;background:linear-gradient(135deg,#fdf4de,#f9e8c0);
  border-color:rgba(196,125,26,.26);
}

.handouts .ho-code{
  background:#fff;border:1px solid var(--line-2);border-radius:10px;
  padding:9px 13px;font-size:12.5px;color:var(--ink-2);
  box-shadow:inset 0 1px 2px rgba(40,20,60,.035);
}
.handouts .ho-row.gold{
  border-color:rgba(196,125,26,.3);
  background:linear-gradient(180deg,#ffffff 0%,#fffcf3 100%);
}
/* the ticket keeps its own face — `.ho-code.strong` was out-ranking
   `code.coupon` and flattening it back to a plain amber box */
/* justify-self:start — a grid item stretches by default, which blew the ticket
   out to the full column width with the code marooned in the middle */
.handouts code.coupon{
  justify-self:start;width:auto;max-width:100%;
  border:1.5px dashed rgba(176,124,20,.6);border-radius:10px;
  padding:10px 16px;font-size:14px;letter-spacing:.16em;color:#6b4708;
  background-image:var(--ct-ticket-sheen),var(--ct-ticket);
  background-size:220% 100%,100% 100%;
  background-repeat:no-repeat;background-position:180% 0,0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px -8px rgba(176,124,20,.6);
}
.handouts .ho-row.gold code.coupon::before,
.handouts .ho-row.gold code.coupon::after{background:#fffdf6;}

@media(max-width:1080px){
  /* the payout drops under the name rather than squeezing the link to nothing */
  .handouts .ho-row{grid-template-columns:36px minmax(0,1fr) minmax(0,1fr) auto;}
  .handouts .ho-earn{grid-column:2;grid-row:2;margin-top:8px;justify-self:start;}
  .handouts .ho-code{grid-column:3;grid-row:1/3;}
  .handouts .ho-row .btn{grid-column:4;grid-row:1/3;}
}
@media(max-width:760px){
  .handouts .ho-row{grid-template-columns:36px minmax(0,1fr) auto;row-gap:9px;}
  .handouts .ho-earn{grid-column:2/4;grid-row:2;}
  .handouts .ho-code{grid-column:2/4;grid-row:3;}
  .handouts .ho-row .btn{grid-column:2/4;grid-row:4;justify-self:start;}
}


/* =============================================================================
 * 5 · CLIENTS TABLE — stop the cells fighting for room
 * -----------------------------------------------------------------------------
 * With Source gone there is width to spend, and the wrapping that made the rows
 * ragged was all avoidable: a status chip broken across two lines, headers
 * splitting "THEY PAY", amounts breaking after the dollar sign.
 * ========================================================================== */
#scr-referrals .tbl th{white-space:nowrap;}
#scr-referrals .pill{white-space:nowrap;}
#scr-referrals .ref-amt{white-space:nowrap;}
#scr-referrals .ref-builtc{min-width:190px;}
/* one token per count, wrapping between items instead of mid-phrase */
#scr-referrals .ref-built{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
#scr-referrals .ref-built .bt{
  display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;
  font-size:11.8px;color:var(--ink-3);
  background:var(--canvas);border-radius:8px;padding:3px 9px;
}
#scr-referrals .ref-built .bt b{font-size:13px;font-weight:700;color:var(--ink);}
/* how many of that count are live — only rendered when it is short of the
   total, so its presence is itself the signal */
#scr-referrals .ref-built .bt i{
  font-style:normal;font-weight:600;font-size:11px;color:var(--good);
  margin-left:5px;padding-left:6px;border-left:1px solid var(--line-2);
}
#scr-referrals .ref-row:hover .ref-built .bt{background:rgba(97,57,132,.09);color:var(--primary-d);}
#scr-referrals .ref-row:hover .ref-built .bt b{color:var(--primary-d);}
#scr-referrals .ref-planc{line-height:1.4;min-width:130px;}
#scr-referrals .ref-em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}


/* =============================================================================
 * 6 · CLIENT DRAWER — the link out to the public listing
 * -----------------------------------------------------------------------------
 * A partner looking at a client's listing wants to see what the public sees.
 * Live rows link to portfolio.vekser.com; drafts say why they cannot.
 * ========================================================================== */
/* block-level flex, not inline-flex: .cw-price is inline, so an inline link
   would sit on the same line as the rent */
.cw-view{
  display:flex;width:fit-content;align-items:center;gap:5px;margin-top:9px;
  font-size:12.5px;font-weight:600;color:var(--primary-d);text-decoration:none;
  padding:6px 11px;border-radius:9px;
  background:rgba(97,57,132,.06);border:1px solid rgba(97,57,132,.18);
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
  align-self:flex-start;
}
.cw-view:hover{background:rgba(97,57,132,.12);border-color:rgba(97,57,132,.4);transform:translateY(-1px);}
.cw-view svg{flex:0 0 auto;}
.cw-view.off{
  color:var(--ink-4);background:transparent;border-color:transparent;padding-left:0;
  font-weight:500;font-style:italic;cursor:default;
}
.cw-view.off:hover{transform:none;background:transparent;}


/* =============================================================================
 * 7 · INVITE — the pair, side by side, at half the width
 * -----------------------------------------------------------------------------
 * Same arrangement as the wizard's last step. Everything inside steps down a
 * size, because type set for a full-width card is too loud in half of one, and
 * the row that carries the link has to wrap rather than squeeze the URL to
 * nothing — the card is narrow while the viewport is not, so a width media
 * query would never fire here.
 * ========================================================================== */
.rc-pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;align-items:start;margin-bottom:20px;
}
.rc-pair .referral-card{margin-bottom:0;}

.rc-pair .rc-head{margin-bottom:13px;gap:11px;}
.rc-pair .rc-head>div{column-gap:11px;}
.rc-pair .rc-head>div::before{width:32px;height:32px;border-radius:10px;background-size:16px 16px;}
.rc-pair .rc-head>div>b{font-size:15px;}
.rc-pair .rc-head>div>p{font-size:12.3px!important;line-height:1.48;}
.rc-pair .rc-head .pill{font-size:11px;padding:4px 10px;}

.rc-pair .rc-earn{
  padding:10px 15px 10px 39px;border-radius:11px;font-size:12.3px;margin-bottom:13px;
}
.rc-pair .rc-earn b{font-size:17px;}
.rc-pair .rc-earn::before{left:14px;margin-top:-8px;width:16px;height:16px;}

.rc-pair .ref-personalize>div:first-child{font-size:11.8px!important;}
.rc-pair .ref-name-field{max-width:none;}
.rc-pair .ref-name-field .inp{font-size:12.8px;padding:9px 12px 9px 35px;}
.rc-pair #refTypeSeg .seg-b{padding:6px 12px!important;font-size:12.3px!important;}

/* the link row and Share QR stack instead of fighting over the width */
.rc-pair .rc-actions{flex-wrap:wrap;gap:9px;}
.rc-pair .rc-actions .linkbox{flex:1 1 100%;padding:6px 6px 6px 13px;}
.rc-pair .rc-actions .linkbox code:not(.coupon){font-size:12.5px;}
.rc-pair .rc-actions>.btn{flex:1 1 auto;justify-content:center;}
.rc-pair .referral-card.gold .rc-actions{flex-wrap:nowrap;}
.rc-pair code.coupon{font-size:15.5px;padding:13px 16px;letter-spacing:.17em;max-width:none;}
.rc-pair .rc-fine{font-size:11.8px;line-height:1.5;margin-top:12px;}

/* The twinkle was placed for a full-width card, where the right third is empty.
   At half width that is where the copy is, so it comes off — the head chip
   keeps the sparkle instead. */
.rc-pair .referral-card::before,
.rc-pair .referral-card::after{display:none;}
.rc-pair .rc-head>div{position:relative;}
.rc-pair .rc-head>div::after{
  content:"";position:absolute;left:23px;top:50%;margin-top:-19px;
  width:11px;height:11px;pointer-events:none;opacity:0;
  background:var(--ct-star-pl) center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(97,57,132,.5));
  animation:ctTwinkle 5.2s ease-in-out 1.1s infinite;
}
.rc-pair .referral-card.gold .rc-head>div::after{
  background-image:var(--ct-star-gl);
  filter:drop-shadow(0 0 5px rgba(196,125,26,.55));
}

@media(max-width:1080px){
  .rc-pair{grid-template-columns:1fr;}
}


/* =============================================================================
 * 8 · CLIENT DRAWER — what they ARE, as a different kind of chip
 * -----------------------------------------------------------------------------
 * The header carries four chips that answer three different questions: state
 * (Bought plan), provenance (Via your link) and identity (Landlord, Service
 * Pro). The last two were plain grey pills, indistinguishable from the rest, so
 * identity now reads as its own class of fact: outlined, with a glyph.
 * ========================================================================== */
#cw-chips .pill.kind{
  gap:6px;padding:4px 11px;
  background:transparent;color:var(--ink-2);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
#cw-chips .pill.kind svg{width:13px;height:13px;flex:0 0 auto;opacity:.85;}
#cw-chips .pill.k-ll{border-color:rgba(97,57,132,.32);color:var(--primary-d);background:rgba(97,57,132,.045);}
#cw-chips .pill.k-pro{border-color:rgba(20,120,110,.34);color:#12796f;background:rgba(20,120,110,.05);}


/* =============================================================================
 * 9 · TIGHTENING PASS — both handout surfaces, one notch down
 * -----------------------------------------------------------------------------
 * Type set for a full-width card is too loud at half that width, and the
 * dashboard strip is a reference you glance at, not a page you read. Sizes step
 * down together so the two surfaces still match each other.
 * ========================================================================== */

/* ---- Invite pair: equal heights ------------------------------------------ */
/* stretch, not start — the two cards are a pair and a short one beside a tall
   one reads as an unfinished layout. The footnote is pinned to the foot of the
   card so the extra room lands as breathing space, not a dangling gap. */
.rc-pair{align-items:stretch;}
.rc-pair .referral-card{display:flex;flex-direction:column;padding:18px;}
.rc-pair .referral-card>*{flex:0 0 auto;}
/* the lane switch is inline-flex, and a flex item gets blockified — without
   this it stretches into a full-width bar */
.rc-pair #refTypeSeg{align-self:flex-start;}
/* #rf-invite-scoped, because the earlier `#rf-invite .referral-card .rc-fine`
   rule carries an id and would otherwise win the margin back */
#rf-invite .rc-pair .referral-card.gold .rc-fine{margin-top:auto;padding-top:14px;}

/* ---- Invite pair: one notch smaller -------------------------------------- */
.rc-pair .rc-head{margin-bottom:12px;}
.rc-pair .rc-head>div{column-gap:10px;}
.rc-pair .rc-head>div::before{width:30px;height:30px;border-radius:9px;background-size:15px 15px;}
.rc-pair .rc-head>div>b{font-size:14.5px;}
.rc-pair .rc-head>div>p{font-size:11.8px!important;line-height:1.5;}
.rc-pair .rc-head .pill{font-size:10.5px;padding:3px 9px;}
.rc-pair .rc-head>div::after{left:21px;margin-top:-17px;width:10px;height:10px;}

.rc-pair .rc-earn{padding:9px 14px 9px 36px;border-radius:10px;font-size:11.8px;margin-bottom:12px;}
.rc-pair .rc-earn b{font-size:15.5px;}
.rc-pair .rc-earn::before{left:13px;margin-top:-7px;width:15px;height:15px;}

.rc-pair .ref-personalize{margin:6px 0 12px!important;}
.rc-pair .ref-personalize>div:first-child{font-size:11.2px!important;margin-bottom:6px!important;}
.rc-pair .ref-name-field .inp{font-size:12.2px;padding:8px 11px 8px 33px;}
.rc-pair .ref-name-field>svg{left:11px;width:15px;height:15px;}
.rc-pair #refTypeSeg{padding:2px!important;margin:2px 0 10px!important;}
.rc-pair #refTypeSeg .seg-b{padding:6px 12px!important;font-size:11.8px!important;}

.rc-pair .rc-actions .linkbox{padding:5px 5px 5px 12px;border-radius:11px;}
.rc-pair .rc-actions .linkbox code:not(.coupon){font-size:11.8px;}
.rc-pair .rc-actions .btn{font-size:12.2px;}
.rc-pair code.coupon{font-size:14.5px;padding:12px 15px;letter-spacing:.15em;}
.rc-pair .rc-fine{font-size:11.2px;line-height:1.5;}

/* ---- Dashboard strip: same treatment ------------------------------------- */
.handouts.card.pad{padding:18px;}
.handouts .ho-head{margin-bottom:12px;gap:9px;}
.handouts .ho-head b{font-size:14px;}
.handouts .ho-head .faint{font-size:11.8px;}
.handouts .ho-head .btn{font-size:12px;padding:6px 12px;}
.handouts .ho-row{padding:10px 12px;border-radius:12px;margin-top:8px;column-gap:12px;
  grid-template-columns:32px minmax(0,1fr) auto minmax(0,1.05fr) auto;}
.handouts .ho-ic{width:32px;height:32px;border-radius:9px;}
.handouts .ho-ic svg{width:16px;height:16px;}
.handouts .ho-b b{font-size:13px;}
.handouts .ho-d{font-size:11.5px;margin-top:1px;}
.handouts .ho-earn{padding:5px 11px;font-size:11.2px;}
.handouts .ho-earn b{font-size:13.5px;}
.handouts .ho-code{padding:8px 11px;font-size:11.8px;border-radius:9px;}
.handouts code.coupon{padding:8px 14px;font-size:13px;letter-spacing:.14em;}
.handouts .ho-row .btn{font-size:12.2px;}
@media(max-width:1080px){
  .handouts .ho-row{grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) auto;}
}
@media(max-width:760px){
  .handouts .ho-row{grid-template-columns:32px minmax(0,1fr) auto;}
}


/* =============================================================================
 * 10 · narrow screens and reduced motion
 * ========================================================================== */

@media(max-width:980px){
  #wiz-4 .wshare{padding:19px 16px 17px;}
  #wiz-4 .wshare::before,#wiz-4 .wshare::after,
  #rf-invite .referral-card::before,#rf-invite .referral-card::after{display:none;}
  #wiz-4 code.coupon,#rf-invite code.coupon{font-size:15px;padding:13px 16px;letter-spacing:.16em;}
  #rf-invite .rc-earn{display:block;padding:11px 16px 11px 42px;}
  #rf-invite .rc-earn b{font-size:19px;}
}
@media(max-width:640px){
  #rf-invite .referral-card .rc-head>div{column-gap:11px;}
  #rf-invite .referral-card .rc-head>div::before{width:32px;height:32px;border-radius:10px;background-size:16px 16px;}
  #rf-invite .referral-card .rc-head>div>b{font-size:15.5px;}
  #rf-invite .referral-card.gold .linkbox{flex-wrap:wrap;}
  #rf-invite code.coupon{max-width:none;flex:1 1 100%;}
}

@media (prefers-reduced-motion:reduce){
  #wiz-4 .wshare::before,#wiz-4 .wshare::after,#wiz-4 .wshare-ic::after,
  #rf-invite .referral-card::before,#rf-invite .referral-card::after{
    animation:none;opacity:.5;transform:none;
  }
  #wiz-4 .wshare-earn::after,#rf-invite .rc-earn::after{display:none;}
  #wiz-4 .wshare-row .btn.primary::after,
  #rf-invite .referral-card .rc-actions .btn.primary::after{animation:none;}
  #wiz-4 .wshare:hover,#wiz-4 .wshare-more .btn:hover,
  #wiz-4 .wshare-row .btn.primary:hover,
  #rf-invite .referral-card .rc-actions .btn:hover{transform:none;}
}


/* =============================================================================
 * 11 · TABS FOR THE HANDOUTS, AND A PAIR THAT READS AS A PAIR
 * -----------------------------------------------------------------------------
 * Three changes, one idea: the link and the code are alternatives, and a layout
 * only helps if it says so.
 *
 *   a) the dashboard handouts card has been taken off the dashboard entirely
 *   b) the Invite pair is aligned row for row and ends the same way on both
 *      sides, with each card handing off to the other
 *   c) the client drawer groups its tabs under the side of the business they
 *      belong to, for a client who is both a landlord and a Service Pro
 * ========================================================================== */

/* ---- a · the dashboard handouts card is gone from the dashboard ----------
   It was briefly tabbed here; both the tabs and the card itself came off the
   dashboard. The tab styling is kept in ct_handouts_tabs.bak.css beside this
   file in case the card comes back. -------------------------------------- */

/* ---- b · Invite: one choice, two halves ---------------------------------- */

/* the pair is introduced as a single decision — without this the partner meets
   two cards and has to work out for themselves that they are alternatives */
.rc-lead{margin:0 0 14px;}
.rc-lead b{display:block;font-size:15px;margin-bottom:3px;}
.rc-lead span{display:block;font-size:12.6px;line-height:1.55;color:var(--ink-4);max-width:88ch;}
.rc-lead em{font-style:normal;font-weight:700;}
.rc-lead em.lk{color:var(--primary-d);}
.rc-lead em.cd{color:#8a5a12;}

/* the gutter carries the word that makes them alternatives rather than a list */
.rc-pair{position:relative;gap:34px;}
.rc-pair::before{
  content:"or";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:2;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-4);background:var(--surface);
  border:1px solid var(--line-2);
  box-shadow:0 2px 8px rgba(40,20,60,.07);
}

/* Row-for-row alignment. Two cards side by side invite a comparison, and the
   comparison only works if the heads, the payouts and the controls sit on the
   same lines — a description that wraps to three lines on one side and two on
   the other pushes everything below it out of step. */
.rc-pair .rc-head{min-height:60px;align-items:flex-start;}
.rc-pair .rc-head .pill{margin-top:2px;}

/* the payout bars are the comparison, so they are the same object on both
   sides: full card width, same height, same left inset. fit-content sized them
   to their own sentence, which made two different shapes out of one fact.
   #rf-invite-scoped — `#rf-invite .rc-earn` carries an id and would otherwise
   win the width back, the same trap the ticket and the pinned footnote hit. */
/* block, NOT flex: the sentence is "You earn <b>your markup</b> on every plan",
   and a flex container makes each of those three text runs its own item and
   drops the spaces between them — "You earnyour markupon every plan". */
#rf-invite .rc-pair .rc-earn{
  display:block;width:auto;
  padding:8px 14px 8px 33px;margin-bottom:12px;border-radius:9px;
  font-size:11.4px;
}
/* the payout number stays the loudest thing IN the bar, but the bar itself is a
   line of text at half a card's width — at 17px the figure alone was as tall as
   the head it sits under */
#rf-invite .rc-pair .rc-earn b{font-size:13.5px;}
#rf-invite .rc-pair .rc-earn::before{left:11px;margin-top:-6.5px;width:13px;height:13px;}

/* what the partner has to say out loud when they hand the code over */
.rc-steps{
  counter-reset:rcs;list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.rc-steps li{
  position:relative;padding-left:28px;
  font-size:12.4px;line-height:1.45;color:var(--ink-3);
}
.rc-steps li::before{
  counter-increment:rcs;content:counter(rcs);
  position:absolute;left:0;top:-1px;
  width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:11px;font-weight:700;color:#8a5a12;
  background:linear-gradient(135deg,#fdf4de,#f7e3b4);
  border:1px solid rgba(196,125,26,.28);
}
.rc-steps li b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;color:#6b4708;
  background:rgba(230,173,60,.16);border-radius:5px;padding:1px 5px;
}

/* both cards close the same way: a line about this half, then the hand-off to
   the other half. Pinned to the foot on BOTH — it was gold-only, which is why
   the link card's copy stopped halfway up. */
/* a hairline turns the space above the footnote into a foot rather than a gap —
   the two cards carry different controls, so one will always have room left
   over, and unmarked emptiness reads as something failing to load */
#rf-invite .rc-pair .referral-card .rc-fine{
  margin-top:auto;padding-top:13px;
  border-top:1px solid rgba(97,57,132,.14);
}
#rf-invite .rc-pair .referral-card.gold .rc-fine{border-top-color:rgba(196,125,26,.22);}
.rc-pair .rc-swap{display:block;margin-top:5px;color:var(--ink-4);}
.rc-pair .rc-swap b{font-weight:700;}
.rc-pair .referral-card .rc-swap b{color:#8a5a12;}
.rc-pair .referral-card.gold .rc-swap b{color:var(--primary-d);}

@media(max-width:1080px){
  .rc-pair{gap:18px;}
  .rc-pair::before{display:none;}
  .rc-pair .rc-head{min-height:0;}
}


/* ---- c · client drawer: tabs grouped by which side they belong to -------- */

.cw-tabs.grouped{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 4px;
  border-bottom:1px solid var(--glass-line);
}
.cw-tgrp{position:relative;display:flex;flex-direction:column;gap:1px;}
.cw-tgrp+.cw-tgrp{margin-left:17px;}
/* a hairline between groups, stopping short of the tab baseline so it does not
   fight the active underline */
.cw-tgrp+.cw-tgrp::before{
  content:"";position:absolute;left:-9px;top:19px;bottom:8px;width:1px;
  background:var(--line);
}
.cw-tgrp-l{
  display:flex;align-items:center;gap:5px;padding:0 11px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);
}
.cw-tgrp-l svg{width:11px;height:11px;flex:0 0 auto;opacity:.9;}
.cw-tgrp.ll .cw-tgrp-l{color:var(--primary-d);}
.cw-tgrp.pro .cw-tgrp-l{color:#12796f;}
.cw-tgrp-b{display:flex;gap:2px;}
.cw-tabs.grouped .tab{padding-top:6px;}
/* the underline picks up the group's colour, so the active tab says which side
   of the business you are looking at even after you have scrolled the caption
   off the top of the drawer */
.cw-tgrp.pro .tab.active{color:#12796f;}
.cw-tgrp.pro .tab.active::after{background:#12796f;}
.cw-tgrp.pro .tab.active .num{color:#12796f;}

@media(max-width:640px){
  .cw-tgrp+.cw-tgrp{margin-left:12px;}
  .cw-tgrp+.cw-tgrp::before{left:-7px;}
  .cw-tgrp-l{padding:0 8px;font-size:9px;}
}


/* =============================================================================
 * 11 · INVITE PAIR — second pass: one family, no ragged edges
 * -----------------------------------------------------------------------------
 * The two halves read as unrelated panels rather than as one choice, and the
 * reasons were about edges and weight, not about colour:
 *
 *   a) the faces sat at different temperatures — near-white beside a full cream
 *      wash — so the gold half shouted and the purple half, the one most
 *      partners actually use, receded
 *   b) the link card stacked five blocks at five different widths: a short
 *      segmented control, a label, a full-width field, a link row, a button
 *   c) the code card's ticket sized itself to the code, leaving a third of the
 *      card empty to its right and a matching void at its foot
 *
 * So: the faces meet in the middle, the two link settings become one labelled
 * row, and each card's handout spans the card. The identity colour now lives in
 * the objects a partner touches — chip, payout, token, button — not in the paper
 * behind them, which is what let the two cards be told apart at a glance without
 * one of them dominating.
 *
 * The closing footnotes are gone from both cards. They said what the objects
 * above them already said, and the "in person instead / online instead" swap
 * pointed at a card sitting six inches away.
 * ========================================================================== */

/* ---- a · both faces, one temperature ------------------------------------- */
/* applied to the wizard too, so the pair still matches wherever it appears */
#wiz-4 .wshare.gold{
  background:
    var(--ct-rule-g) top left/100% 3px no-repeat,
    radial-gradient(115% 80% at 100% 0%,rgba(230,173,60,.085) 0%,rgba(230,173,60,0) 62%),
    linear-gradient(180deg,#ffffff 0%,#fffdf8 100%);
}
#rf-invite .rc-pair .referral-card{
  background:
    var(--ct-rule-p) top left/100% 3px no-repeat,
    radial-gradient(76% 130% at 100% 0%,rgba(97,57,132,.085) 0%,rgba(97,57,132,0) 62%),
    linear-gradient(180deg,#ffffff 0%,#fdfbff 100%);
}
#rf-invite .rc-pair .referral-card.gold{
  background:
    var(--ct-rule-g) top left/100% 3px no-repeat,
    radial-gradient(76% 130% at 100% 0%,rgba(230,173,60,.085) 0%,rgba(230,173,60,0) 62%),
    linear-gradient(180deg,#ffffff 0%,#fffdf8 100%);
}

/* ---- b · the link's two settings, as one row ------------------------------ */
/* auto + 1fr, not 1fr + 1fr: "Landlord | Service Pro" has a natural width and
   stretching it to half the card just puts air inside the buttons */
.rc-opts{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:12px;align-items:end;margin:2px 0 13px;
}
.rc-opt{min-width:0;display:flex;flex-direction:column;}
.rc-optl{
  display:block;margin-bottom:6px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);white-space:nowrap;
}
.rc-optl i{font-style:normal;font-weight:600;opacity:.72;}
/* the seg is inline-flex and a grid item gets blockified anyway — this is the
   earlier `align-self:flex-start` and `margin` being taken back off it, both of
   which were placed when it stood on its own line */
.rc-opts #refTypeSeg{
  display:flex!important;width:100%;margin:0!important;align-self:stretch;
  background:var(--canvas-2);border:1px solid var(--line);border-radius:10px;
  padding:3px!important;gap:3px;
}
.rc-opts #refTypeSeg .seg-b{
  flex:1 1 auto;border:0;border-radius:8px;cursor:pointer;
  padding:7px 14px!important;font-size:12px!important;font-weight:600;
  line-height:1.25;white-space:nowrap;
}
.rc-opts .ref-name-field{max-width:none;}
/* 10px, so the field is exactly the seg's 37px and the two share a baseline as
   well as a foot */
.rc-opts .ref-name-field .inp{padding:10px 12px 10px 33px;}

/* ---- c · the handout spans its card --------------------------------------- */
/* :not(.gold) — the code card's row is deliberately borderless (the ticket is
   the object there, not a field holding one), and an unscoped rule here ties
   with the rule that strips it and wins on order, putting 14px of phantom
   padding back in front of the ticket */
#rf-invite .rc-pair .referral-card .rc-actions{gap:10px;}
#rf-invite .rc-pair .referral-card:not(.gold) .rc-actions .linkbox{
  padding:6px 6px 6px 14px;border-radius:12px;
  border-color:rgba(97,57,132,.2);
  background:linear-gradient(180deg,#ffffff 0%,#fbf8ff 100%);
}
#rf-invite .rc-pair .rc-actions .linkbox code:not(.coupon){font-size:12.4px;}
/* Share QR is the same width and radius as the link row above it, so the two
   read as one control stacked twice rather than two loose objects */
#rf-invite .rc-pair .rc-actions>.btn:not(.primary){border-radius:12px;padding:9px 14px;}

/* `.lk-for` is display:inline-flex, which out-ranks the UA's `[hidden]{display:none}`,
   so the "for Joe" chip has been sitting in the link row empty the whole time —
   a grey pill with a person glyph and no name in it */
.linkbox .lk-for[hidden]{display:none!important;}

/* the reveal eye — quiet until you go near it */
.linkbox .lk-eye{
  flex:0 0 auto;display:grid;place-items:center;
  width:28px;height:28px;padding:0;
  border:1px solid transparent;border-radius:9px;background:transparent;
  color:var(--ink-4);cursor:pointer;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.linkbox .lk-eye svg{width:15px;height:15px;}
.linkbox .lk-eye:hover{
  color:var(--primary-d);background:rgba(97,57,132,.09);
  border-color:rgba(97,57,132,.2);
}
.linkbox .lk-eye:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}

/* The ticket sized itself to its own letters, which left a third of the gold
   card empty beside it. It is the object this card exists for, so it takes the
   card's width and the code sits in the middle of it.
   `.rc-pair` scoped past `#rf-invite code.coupon`, which pins max-width:340px. */
/* the ticket and its button are siblings inside .linkbox, so the gap that
   matters is that one — 15px, because the ticket's right notch is a half-circle
   cut into its own edge and at 13 it read as touching the button.
   align-items:stretch — the button takes the ticket's full height, which is the
   difference between "a ticket, and a control near it" and one object. */
#rf-invite .rc-pair .referral-card.gold .linkbox{gap:15px;align-items:stretch;}
#rf-invite .rc-pair .referral-card.gold .rc-actions .btn.primary{border-radius:12px;padding:0 20px;}
#rf-invite .rc-pair code.coupon{
  flex:1 1 auto;max-width:none;
  display:flex;align-items:center;justify-content:center;
  /* letter-spacing hangs a gap off the last character; pull the run back by the
     same amount or the centred code sits visibly left of centre */
  text-indent:.15em;
}
/* the notches read as the card showing through the tear, so they follow the
   card's new, lighter face */
#rf-invite .rc-pair .referral-card.gold code.coupon::before,
#rf-invite .rc-pair .referral-card.gold code.coupon::after{background:#fffefa;}

/* the code card's action carries the code card's colour — a purple button on a
   gold card was the one place the two identities crossed over */
#rf-invite .rc-pair .referral-card.gold .rc-actions .btn.primary{
  background:linear-gradient(145deg,#d99f2e 0%,#bd7f1c 55%,#a06813 100%);
  border-color:rgba(120,78,15,.45);color:#fff;
  box-shadow:0 7px 16px -8px rgba(160,104,19,.85),inset 0 1px 0 rgba(255,255,255,.35);
}
#rf-invite .rc-pair .referral-card.gold .rc-actions .btn.primary:hover{
  box-shadow:0 10px 22px -8px rgba(160,104,19,.9),inset 0 1px 0 rgba(255,255,255,.4);
}
#rf-invite .rc-pair .referral-card.gold .rc-actions .btn.primary::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}

/* ---- d · the gutter reads as a fork, not a floating dot -------------------- */
.rc-pair::before{
  width:34px;height:34px;font-size:10px;color:var(--ink-3);
  background:#fff;border-color:rgba(97,57,132,.18);
  box-shadow:0 3px 12px rgba(40,20,60,.1);
}
/* a hairline behind the chip, fading from the link's purple into the code's
   gold, so the gutter says "these are the two branches of one thing" */
.rc-pair::after{
  content:"";position:absolute;left:50%;top:10px;bottom:10px;width:1px;
  transform:translateX(-50%);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(97,57,132,0) 0%,rgba(97,57,132,.24) 24%,
    rgba(196,125,26,.24) 76%,rgba(196,125,26,0) 100%);
}

/* ---- e · the steps, now that they end the card ---------------------------- */
#rf-invite .rc-steps{margin-top:16px;gap:12px;}
#rf-invite .rc-steps li{font-size:12.2px;line-height:1.5;}

@media(max-width:1080px){
  .rc-pair::after{display:none;}
}


/* =============================================================================
 * 12 · SETUP, SKIPPED — the way back into the wizard
 * -----------------------------------------------------------------------------
 * The wizard now auto-opens on the signup redirect and nowhere else, so skipping
 * it needs somewhere to land. `#onb-resume` borrows the phone nudge's row so the
 * dashboard does not grow a second vocabulary for "one optional thing you could
 * do", but it carries the primary colour: the phone number is a nicety, and this
 * decides which plans, screens and payouts the partner is shown.
 * ========================================================================== */
.phone-ask.onb-resume{
  border-color:rgba(97,57,132,.26);
  background:
    var(--ct-rule-p) top left/100% 3px no-repeat,
    linear-gradient(180deg,#ffffff 0%,#fbf8ff 100%);
  box-shadow:0 1px 2px rgba(40,20,60,.045),0 14px 34px -26px rgba(97,57,132,.55);
}
.phone-ask.onb-resume .pa-ic{
  color:#fff;background:var(--ct-chip-p);
  box-shadow:0 7px 16px -6px rgba(97,57,132,.7),inset 0 1px 0 rgba(255,255,255,.4);
}
.phone-ask.onb-resume .pa-b b{color:var(--ink);}
.phone-ask.onb-resume .btn.primary{flex:0 0 auto;white-space:nowrap;}

/* Skip is a real option, not a trap door: legible rather than hidden, and still
   plainly the quieter of the two. `.btn.ghost` alone reads as disabled next to a
   filled primary at lg size. */
.wiz-actions .wiz-skip{
  color:var(--ink-3);font-weight:600;
  border-color:transparent;background:transparent;
}
.wiz-actions .wiz-skip:hover{
  color:var(--ink);background:rgba(19,21,27,.055);
  border-color:var(--line-2);
}
@media(max-width:640px){
  .wiz-actions .wiz-skip{order:5;width:100%;}
}


/* =============================================================================
 * 13 · WIZARD STEP 2 — Content Creation, as briefs rather than an average
 * -----------------------------------------------------------------------------
 * Every other lane on this step is a list of real plans at real prices. Content
 * Creation was one averaged figure and a paragraph of prose, which made the one
 * lane a partner has never done before the least concrete thing on the screen.
 * It is now the same shape as the plan list: one row per brief, each carrying
 * the brand it is for, what kind of piece it is, and what it pays.
 * ========================================================================== */
.wbriefs{display:flex;flex-direction:column;gap:8px;}
.wbrief{
  display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;
  align-items:center;column-gap:12px;
  padding:10px 13px;border-radius:12px;
  border:1px solid var(--line);background:#fff;
}
/* the same mark the Content Studio draws, one size down — brands should be
   recognisable here first and recognised there later */
.wbrief-mk{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 5px 12px -6px rgba(40,20,60,.5);
}
.wbrief-mk.img{background-size:cover;background-position:center;}
.wbrief-b{min-width:0;display:flex;flex-direction:column;gap:1px;}
.wbrief-b b{font-size:13.2px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wbrief-b small{font-size:11.4px;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* what shape of piece it is — the one thing a creator sorts these by */
.wbrief-k{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8a5a12;background:linear-gradient(135deg,#fdf4de,#f9e8c0);
  border:1px solid rgba(196,125,26,.26);border-radius:999px;padding:3px 9px;
  white-space:nowrap;
}
.wbrief-p{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;white-space:nowrap;}
.wbrief-p b{font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:-.01em;}
.wbrief-p i{font-style:normal;font-size:10.5px;color:var(--ink-4);}
.wbriefs-note{margin:12px 0 0;font-size:12.4px;line-height:1.55;color:var(--ink-4);}

@media(max-width:720px){
  .wbrief{grid-template-columns:32px minmax(0,1fr) auto;row-gap:8px;}
  .wbrief-k{grid-column:2;justify-self:start;}
  .wbrief-p{grid-column:3;grid-row:2;}
}

/* =============================================================================
 * 14 · CLIENTS TABLE — which side of the business each client is on
 * -----------------------------------------------------------------------------
 * The drawer has said Landlord / Service Pro since it shipped; the table it
 * opens from said nothing, so the only way to find out was to open every row.
 * The chip rides in the User cell beside the email rather than in a new column —
 * the table is already seven columns wide — and it deliberately reuses the
 * drawer's exact colours and glyphs so the two surfaces cannot disagree.
 * ========================================================================== */
#scr-referrals .ref-sub{
  display:flex;align-items:center;gap:7px;min-width:0;margin-top:1px;
}
/* the email keeps its own ellipsis and yields the room the chips need */
#scr-referrals .ref-sub .ref-em{margin-top:0;min-width:0;flex:0 1 auto;}
.ref-kind{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px 2px 6px;border-radius:999px;white-space:nowrap;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
  color:var(--ink-3);background:transparent;border:1px solid var(--line-2);
}
.ref-kind svg{width:11px;height:11px;flex:0 0 auto;opacity:.9;}
/* identical to #cw-chips .pill.kind in the drawer — same fact, same colour */
.ref-kind.k-ll{border-color:rgba(97,57,132,.32);color:var(--primary-d);background:rgba(97,57,132,.045);}
.ref-kind.k-pro{border-color:rgba(20,120,110,.34);color:#12796f;background:rgba(20,120,110,.05);}
.ref-row:hover .ref-kind{border-color:currentColor;}

@media(max-width:820px){
  #scr-referrals .ref-sub{flex-wrap:wrap;gap:5px;}
}

/* the kind filter — the app's own segment, one size down to sit level with the
   `.inp.sm` search box beside it */
/* sized to the .inp.sm search box beside it, not to itself — two controls on one
   line that are four pixels apart in height read as a misalignment, not a pair */
#ref-kind-seg{flex:0 0 auto;align-self:center;padding:2px;border-radius:10px;}
#ref-kind-seg button{
  padding:5px 12px;font-size:12.5px;line-height:1.35;border-radius:8px;
  color:var(--ink-3);white-space:nowrap;cursor:pointer;
}
#ref-kind-seg button.on{background:#fff;color:var(--primary-d);box-shadow:var(--shadow-sm);}
/* `.inp` is width:100%, so inside a wrapping flex row the search box claimed the
   whole line on its own and pushed the segment onto a second one. Let it flex
   from a 210px basis instead of demanding everything. */
.ref-tools #ref-q{flex:1 1 210px;width:auto;min-width:180px;max-width:320px;}
/* and the row itself stays a row above the phone breakpoint — with wrap on, the
   full-width search box was enough to push the segment onto a line of its own
   even when there was room for both */
@media(min-width:641px){ .ref-tools{flex-wrap:nowrap;} }
@media(max-width:640px){
  #ref-kind-seg{width:100%;}
  #ref-kind-seg button{flex:1 1 auto;}
}


/* ---- the head badge, now that it changes with the step ------------------- */
.wiz-badge.step{
  background:var(--canvas-2);color:var(--ink-2);
  border:1px solid var(--line-2);padding:3px 11px 3px 4px;gap:8px;
}
.wiz-badge.step i{
  font-style:normal;font-family:var(--disp);font-size:11px;font-weight:700;
  color:#fff;background:var(--primary);border-radius:999px;
  padding:3px 8px;letter-spacing:.01em;
}
@media(max-width:640px){
  .rc-opts{grid-template-columns:minmax(0,1fr);gap:11px;}
  .rc-opts #refTypeSeg .seg-b{white-space:normal;}
}


/* =============================================================================
 * 15 · WIZARD STEP 2 — the plan cards now carry what the plan DOES
 * -----------------------------------------------------------------------------
 * The step used to show three paid plans per lane with a name and a price. A
 * partner cannot sell from that: the thing they have to repeat to a client is
 * "unlimited listings, lead generation, booking inquiry management", and all of
 * it was sitting unused in `feats`. Every plan is listed now, free tiers
 * included, each with its whole feature list — so the grid goes to two columns
 * to give the text a readable measure, and the card scrolls, which it already
 * did.
 * ========================================================================== */
#wiz-2 .wsell-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
#wiz-2 .wsell-p{display:flex;flex-direction:column;}

.wsell-f{
  list-style:none;margin:11px 0 0;padding:11px 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;
}
.wsell-f li{
  position:relative;padding-left:18px;
  font-size:11.6px;line-height:1.45;color:var(--ink-3);
}
/* a tick, not a bullet — these are things the client GETS, and the check is the
   difference between a list and an inventory */
.wsell-f li::before{
  content:"";position:absolute;left:0;top:3px;width:11px;height:11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23613984' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media(max-width:900px){
  #wiz-2 .wsell-grid{grid-template-columns:minmax(0,1fr);}
}


/* ---- 15b · one lane open, the rest folded -------------------------------- */
/* The head is the control, so it has to look like one — and it keeps stating the
   lane, the plan count and the payout while folded, which is what makes this
   folding rather than hiding. */
#wiz-2 .wsell-h{
  cursor:pointer;user-select:none;border-radius:10px;
  margin:-6px -8px 8px;padding:6px 8px;
  transition:background .14s ease;
}
#wiz-2 .wsell-h:hover{background:rgba(97,57,132,.05);}
#wiz-2 .wsell-h:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.wsell-chev{
  flex:0 0 auto;display:grid;place-items:center;margin-left:10px;
  width:24px;height:24px;border-radius:8px;color:var(--ink-4);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),color .14s ease;
}
#wiz-2 .wsell-h:hover .wsell-chev{color:var(--primary-d);}
/* the note takes the auto margin, so the chevron sits tight against it rather
   than being pushed to the far edge on its own */
.wsell-closed .wsell-chev{transform:rotate(-90deg);}
.wsell-closed .wsell-grid,
.wsell-closed .wsell-flat,
.wsell-closed .wbriefs,
.wsell-closed .wbriefs-note,
.wsell-closed .wsell-more{display:none;}
.wsell-closed .wsell-h{margin-bottom:-6px;}

/* -- cwt34: plan-card price shows the markup doing its job ------------------
   With a markup saved, the catalog price is struck through and the CLIENT price
   sits beside it. Saving a markup plays the swap once (.bumped). */
.plan-price .price-was{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--ink-4,#9aa3af);text-decoration:line-through;text-decoration-thickness:1.5px;margin-right:9px;vertical-align:middle}
.plan-price .price-new{color:var(--primary-d)}
.plan-price .price-new.bumped{animation:mkNew .55s cubic-bezier(.2,.8,.3,1) both}
.plan-price .price-new.bumped+small,.plan-price .price-new.bumped small{animation:none}
.plan .plan-price:has(.price-was) .price-was{animation:mkWas .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes mkNew{0%{opacity:0;transform:translateY(9px) scale(.94)}60%{transform:translateY(0) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes mkWas{from{opacity:1;transform:none}to{opacity:.85;transform:none}}
@media (prefers-reduced-motion:reduce){.plan-price .price-new.bumped,.plan .plan-price:has(.price-was) .price-was{animation:none}}

/* -- cwt37: professional licence block on Profile --------------------------- */
.lic-up{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:34px}
.lic-file{font-size:12.5px;color:var(--ink-3);min-width:0;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lic-file.on{color:var(--good);font-weight:600}
.lic-file.on::before{content:"✓ ";font-weight:700}
.lic-up .lic-x{padding:6px 11px}
#pf-lic-detail{animation:licIn .32s cubic-bezier(.2,.8,.3,1)}
@keyframes licIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#pf-lic-detail{animation:none}}

/* -- cws24: Profile reorganised -------------------------------------------
   One long hr-separated form became a column of section cards, with the save
   action pinned to the bottom of the viewport and progress pinned beside it. */
.pf-row{gap:18px;align-items:flex-start}
.pf-main{flex:2;min-width:0;display:flex;flex-direction:column;gap:14px}
.pf-card{margin:0}
.pf-card .pf-sec-label:first-child{margin-top:0}
.pf-side{flex:1;min-width:0;position:sticky;top:16px}
/* sticky save bar — sits at the foot of the form column, above the page */
.pf-savebar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:14px;
  padding:12px 16px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(9px) saturate(140%);backdrop-filter:blur(9px) saturate(140%);
  box-shadow:0 -2px 18px rgba(34,14,52,.08)}
.pf-savebar .btn{margin-left:auto;flex:0 0 auto}
.pf-dirty{font-size:12.5px;font-weight:600;color:var(--ink-3);display:inline-flex;align-items:center;gap:7px;min-width:0}
.pf-dirty::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--line-2);flex:0 0 auto}
.pf-dirty.on{color:var(--primary-d)}
.pf-dirty.on::before{background:var(--primary);animation:pfdot 1.6s ease-in-out infinite}
.pf-dirty.saved{color:var(--good)}
.pf-dirty.saved::before{background:var(--good)}
@keyframes pfdot{0%,100%{box-shadow:0 0 0 0 rgba(97,57,132,.45)}50%{box-shadow:0 0 0 5px rgba(97,57,132,0)}}
@media(max-width:900px){
  .pf-row{flex-direction:column}
  .pf-main,.pf-side{flex:1 1 auto;width:100%}
  .pf-side{position:static}
}
@media(prefers-reduced-motion:reduce){.pf-dirty.on::before{animation:none}}

/* -- cws25: line the plan cards up with each other --------------------------
   Cards in a row are already equal height (grid stretch), but everything INSIDE
   them floated: a one-line plan name pushed its price higher than a two-line
   one, and the earnings box landed wherever the feature list happened to end.
   Reserving the title/description/price space fixes the top half; moving the
   auto margin onto the earnings box pins the bottom half. Result: price sits at
   the same height on every card, and earnings + button share one baseline. */
/* Fixed two-line boxes, not just minimums: a three-line plan name pushed its
   price 35px below the neighbouring cards'. Long names clamp with an ellipsis
   and carry the full text in a title tooltip. */
.plan h3{line-height:1.3;height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plan-desc{height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the chip row wraps on some cards and not others — reserve its taller state */
.plan-top{min-height:36px}
.plan-price{min-height:32px;align-content:center}
/* ONE flexible spacer per card decides where the bottom block starts. Two auto
   margins (one on the earnings box, one inline on the button) split the free
   space between them and aligned neither. */
.plan-fill{flex:1 1 auto;min-height:0}
.plan .plan-margin{margin-top:0}
@media(max-width:640px){
  .plan h3{height:auto;-webkit-line-clamp:none;display:block}
  .plan-desc{height:auto;-webkit-line-clamp:none;display:block}
}

/* -- cws28: licence answer reads at a glance — yes is green, no is red ------ */
#pf-lic-seg{margin-top:2px}
#pf-lic-seg button.on[data-v="yes"]{background:var(--good);border-color:var(--good);color:#fff}
#pf-lic-seg button.on[data-v="no"]{background:#c0392b;border-color:#c0392b;color:#fff}

/* -- cws29: profile address lookup + upload progress ------------------------ */
.addr-sug{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:4px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  box-shadow:0 14px 34px rgba(34,14,52,.16)}
.addr-sug.on{display:block}
.addr-sug-i{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:inherit;padding:9px 13px;border-bottom:1px solid var(--line)}
.addr-sug-i:last-child{border-bottom:0}
.addr-sug-i:hover{background:var(--primary-soft)}
.addr-sug-i b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.addr-sug-i small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
/* the filename line doubles as the upload progress line */
.lic-file.busy{color:var(--primary-d);font-weight:600}
.lic-file.busy::before{content:"";display:inline-block;width:11px;height:11px;margin-right:7px;
  vertical-align:-1px;border-radius:50%;border:2px solid var(--primary-soft);
  border-top-color:var(--primary);animation:licSpin .7s linear infinite}
@keyframes licSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.lic-file.busy::before{animation:none}}

/* -- cws30: licence question on one line ------------------------------------ */
.pf-lic-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.pf-lic-line .seg{flex:0 0 auto}

/* ===== cwpp1: Plans & Pricing — how this partner earns =======================
   Ported from the "Partner Portal Pricing Simple" design onto the portal's own
   tokens. Three-way choice first, then the partner's strip, links, streams and
   the three-step payout path. Everything is scoped to #pp-role. */
#pp-role{margin:0 0 22px;}
#pp-role .pr-choose{max-width:1120px;padding:8px 0 0;}
#pp-role .pr-choose h1{margin:0;font-family:var(--disp);font-size:32px;font-weight:600;letter-spacing:-.022em;line-height:1.1;max-width:22ch;}
#pp-role .pr-lead{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:64ch;}
#pp-role .pr-hint{margin:10px 0 0;font-size:13.5px;color:var(--ink-3);max-width:60ch;}
#pp-role .pr-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px;align-items:stretch;}
#pp-role .pr-bulk-reset{color:var(--ink-3);}
#pp-role .pr-bulk-reset:hover{color:var(--primary-d);}
#pp-role .pr-card{text-align:left;padding:0;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;font-family:inherit;}
#pp-role .pr-card:hover{border-color:var(--primary-l);}
#pp-role .pr-card.on{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 14px 34px rgba(70,24,107,.24);transform:translateY(-2px);}
#pp-role .pr-band{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--canvas);}
#pp-role .pr-card.on .pr-band{background:rgba(255,255,255,.10);}
#pp-role .pr-lbl{font-size:10px;font-weight:700;letter-spacing:.17em;color:var(--ink-3);}
#pp-role .pr-card.on .pr-lbl{color:#c3a8dc;}
#pp-role .pr-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;}
#pp-role .pr-card.on .pr-dot{border-color:#fff;color:var(--primary);}
#pp-role .pr-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px;flex:1;}
#pp-role .pr-hero{font-family:var(--disp);font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:.95;color:var(--primary-l);}
#pp-role .pr-card.on .pr-hero{color:#c9a6e8;}
#pp-role .pr-herosub{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin-top:-4px;}
#pp-role .pr-note{display:inline-block;align-self:flex-start;border:1px solid var(--primary-soft);background:var(--primary-soft);color:var(--primary-d);border-radius:20px;padding:4px 11px;font-size:11.5px;font-weight:600;}
#pp-role .pr-card.on .pr-note{background:#fff;border-color:#fff;}
#pp-role .pr-desc{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);}
#pp-role .pr-card.on .pr-desc{color:#e6dcef;}
#pp-role .pr-get{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;}
#pp-role .pr-card.on .pr-get{border-top-color:rgba(255,255,255,.16);}
#pp-role .pr-k{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px;}
#pp-role .pr-card.on .pr-k{color:#c3a8dc;}
#pp-role .pr-k2{margin-top:8px;padding-top:9px;border-top:1px dashed var(--line);}
#pp-role .pr-card.on .pr-k2{border-top-color:rgba(255,255,255,.16);}
#pp-role .pr-perk{display:flex;gap:8px;font-size:12.5px;line-height:1.45;color:var(--ink-2);}
#pp-role .pr-perk span:first-child{color:var(--primary);flex:0 0 auto;}
#pp-role .pr-card.on .pr-perk{color:#dccbeb;} #pp-role .pr-card.on .pr-perk span:first-child{color:#a8e6c1;}
#pp-role .pr-skip{font-size:12px;line-height:1.5;color:var(--ink-3);}
#pp-role .pr-card.on .pr-skip{color:#dccbeb;}
#pp-role .pr-foot{margin-top:14px;font-size:13px;color:var(--ink-4);padding-bottom:6px;}
#pp-role .pr-bar{position:fixed;left:calc(50% + 135px);transform:translateX(-50%);bottom:24px;z-index:40;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:15px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(70,24,107,.16);box-shadow:var(--shadow-lg);}
#pp-role .pr-bar-ic{width:26px;height:26px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:12px;}
#pp-role .pr-bar-t{display:flex;flex-direction:column;line-height:1.25;padding:0 10px 0 6px;}
#pp-role .pr-bar-t small{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4);}
#pp-role .pr-bar-t b{font-size:13px;font-weight:600;white-space:nowrap;}
#pp-role .pr-bar .btn{padding:11px 18px;border-radius:11px;}
#pp-role .pr-bar-x{border:0;background:transparent;color:var(--ink-4);width:30px;height:30px;border-radius:8px;font-size:13px;}
#pp-role .pr-bar-x:hover{background:var(--canvas-2);color:var(--ink);}

#pp-role .pr-line{flex:1;}
#pp-role .pr-change{border:0;background:transparent;padding:0;color:var(--ink-4);font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;}
#pp-role .pr-change:hover{color:var(--primary-d);}

#pp-role .pr-link{border:1px solid var(--line);border-radius:10px;background:var(--canvas);padding:11px 13px;margin-top:9px;}

#pp-role .pr-cat{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:26px 0 4px;}
#pp-role .pr-cat b{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.018em;}
#pp-role .pr-cat span{font-size:13px;color:var(--ink-3);}

@media(max-width:980px){
  #pp-role .pr-choose h1{font-size:26px;}
  #pp-role .pr-cards{grid-template-columns:1fr;}
  #pp-role .pr-bar{left:12px;right:12px;transform:none;bottom:calc(72px + env(safe-area-inset-bottom));justify-content:space-between;}
            }

/* ---- the catalog in the role's voice (cwpp2) ---- */
#pp-role .pr-ctl{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--glass-line);margin-bottom:16px;}
#pp-role .pr-tabs{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--canvas-2);}
#pp-role .pr-t{border:0;background:transparent;color:var(--ink-3);border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px;}
#pp-role .pr-t i{font-style:normal;font-size:11px;font-weight:500;color:var(--ink-4);}
#pp-role .pr-t.on{background:var(--surface);color:var(--primary-d);box-shadow:0 1px 3px rgba(26,26,32,.10);}
#pp-role .pr-t.on i{color:var(--primary-l);}
#pp-role .pr-filter{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-4);}
#pp-role .pr-filter select{appearance:none;-webkit-appearance:none;border:1px solid var(--line-2);background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2367717f' stroke-width='1.5'/></svg>") no-repeat right 12px center;color:var(--ink);border-radius:9px;padding:8px 32px 8px 13px;font-family:inherit;font-size:13px;font-weight:600;}
#pp-role .pr-bulk{border:1px solid rgba(138,95,176,.28);border-radius:12px;background:linear-gradient(135deg,#f8f3fc,#fff 70%);padding:15px 18px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
#pp-role .pr-bulk-l{flex:1 1 260px;min-width:0;}
#pp-role .pr-bulk-l b{display:block;font-size:14.5px;font-weight:600;color:var(--primary-d);margin-top:3px;}
#pp-role .pr-bulk-l p{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:52ch;}
#pp-role .pr-bulk-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#pp-role .pr-presets{display:flex;gap:5px;flex-wrap:wrap;}
#pp-role .pr-preset{border:1px solid var(--primary-soft);background:var(--surface);color:var(--primary-d);border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600;}
#pp-role .pr-preset.on{background:var(--primary);border-color:var(--primary);color:#fff;}
#pp-role .pr-preset.custom{display:inline-flex;align-items:center;gap:2px;padding:4px 10px;cursor:text;}
#pp-role .pr-preset.custom input{width:58px;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;text-align:center;outline:0;-moz-appearance:textfield;}
#pp-role .pr-preset.custom input::-webkit-outer-spin-button,#pp-role .pr-preset.custom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#pp-role .pr-preset.custom input::placeholder{color:inherit;opacity:.7;font-weight:500;}
#pp-role .pr-preset.custom.on input::placeholder{color:#fff;}
#pp-role .pr-plan.cc{cursor:pointer;border-style:dashed;border-color:var(--primary-l);background:linear-gradient(180deg,var(--surface),var(--primary-soft));transition:border-color .15s,box-shadow .15s;}
#pp-role .pr-plan.cc:hover{border-style:solid;box-shadow:var(--shadow);}
#pp-role .pr-plan.cc .pr-plan-f{display:flex;justify-content:flex-end;margin-top:auto;}
#pp-role .pr-cc{display:flex;align-items:center;gap:14px;margin:18px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s;}
#pp-role .pr-cc:hover{border-color:var(--primary-l);box-shadow:var(--shadow-sm);}
#pp-role .pr-cc-ic{width:38px;height:38px;border-radius:11px;background:var(--primary-soft);color:var(--primary-d);display:grid;place-items:center;font-size:17px;flex:none;}
#pp-role .pr-cc-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
#pp-role .pr-cc-t b{font-family:var(--disp);font-size:15px;font-weight:600;}
#pp-role .pr-cc-t small{font-size:12.5px;color:var(--ink-3);line-height:1.4;}
#pp-role .pr-cc-go{font-size:13px;font-weight:600;color:var(--primary);white-space:nowrap;}
@media (max-width:640px){#pp-role .pr-cc{flex-wrap:wrap;}#pp-role .pr-cc-go{width:100%;padding-left:52px;}}
#pp-role .pr-empty{border:1px dashed var(--line-2);border-radius:13px;background:var(--surface);padding:36px 24px;text-align:center;}
#pp-role .pr-empty b{font-family:var(--disp);font-size:18px;font-weight:600;}
#pp-role .pr-empty p{margin:8px auto 14px;font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:44ch;}
#pp-role .pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(286px,1fr));gap:16px;}
#pp-role .pr-plan{border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);}
#pp-role .pr-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
#pp-role .pr-pop{font-size:10.5px;font-weight:700;color:#7a4d06;background:linear-gradient(160deg,#fdf0c6,#f2c864);border:1px solid #e3b75a;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);border-radius:20px;padding:3px 9px;white-space:nowrap;}
#pp-role .pr-set{font-size:10.5px;font-weight:700;color:var(--good);background:var(--good-soft);border-radius:20px;padding:3px 9px;white-space:nowrap;}
#pp-role .pr-kind{font-size:9px;font-weight:700;letter-spacing:.13em;color:var(--ink-3);background:var(--canvas-2);border-radius:20px;padding:4px 9px;white-space:nowrap;}
#pp-role .pr-plan h3{margin:0;font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.2;}
#pp-role .pr-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
#pp-role .pr-price s{font-size:16px;color:var(--ink-4);}
#pp-role .pr-price b{font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:-.02em;}
#pp-role .pr-price span{font-size:12.5px;color:var(--ink-3);}
#pp-role .pr-price.big b{font-size:26px;}
#pp-role .pr-price em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--primary-d);background:var(--primary-soft);border-radius:20px;padding:4px 10px;}
#pp-role .pr-feats{display:flex;flex-direction:column;gap:8px;}
#pp-role .pr-feats div{display:flex;gap:9px;font-size:12.5px;line-height:1.45;color:var(--ink-2);align-items:flex-start;}
#pp-role .pr-feats i{width:17px;height:17px;flex:0 0 auto;border-radius:50%;background:var(--primary-soft);color:var(--primary-l);display:grid;place-items:center;font-size:9.5px;font-style:normal;margin-top:1px;}
#pp-role .pr-more{align-self:flex-start;border:0;background:transparent;padding:0;color:var(--primary-d);font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;}
#pp-role .pr-earn{margin-top:auto;border:1px solid rgba(138,95,176,.28);border-radius:10px;background:#f8f3fc;padding:12px 14px 13px;}
#pp-role .pr-earn.off{background:var(--canvas);border-color:var(--line);}
#pp-role .pr-earn .pr-k{margin-bottom:8px;color:#6b4c8a;}
#pp-role .pr-earn.off .pr-k{color:var(--ink-4);}
#pp-role .pr-earn-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
#pp-role .pr-earn-r span{font-size:12px;color:var(--ink-3);}
#pp-role .pr-earn-r b{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.018em;color:var(--primary-l);white-space:nowrap;}
#pp-role .pr-earn.off .pr-earn-r b{color:var(--ink-4);}
#pp-role .pr-earn-s{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:7px;padding-top:7px;border-top:1px dashed rgba(138,95,176,.28);font-size:11.5px;color:var(--ink-3);}
#pp-role .pr-cta{width:100%;margin-top:11px;border:1px solid var(--primary-soft);background:var(--surface);color:var(--primary-d);border-radius:8px;padding:9px 12px;font-size:12.5px;font-weight:600;}
#pp-role .pr-cta:hover{background:var(--primary);border-color:var(--primary);color:#fff;}
/* overlays */
.pr-ov{position:fixed;inset:0;background:rgba(26,26,32,.42);z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;}
.pr-dlg{width:100%;max-width:440px;max-height:calc(100vh - 48px);overflow-y:auto;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);font-family:var(--sans);color:var(--ink);}
.pr-dlg.wide{max-width:520px;max-height:86vh;overflow-y:auto;}
.pr-dlg-h{padding:20px 24px 16px;border-bottom:1px solid var(--line);}
.pr-dlg-h h3{margin:5px 0 0;font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2;}
.pr-dlg-h .pr-sub{font-size:13px;color:var(--ink-3);margin-top:5px;}
.pr-dlg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.pr-dlg-top p{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3);}
.pr-dlg .pr-kind{font-size:9px;font-weight:700;letter-spacing:.13em;color:var(--ink-3);background:var(--canvas-2);border-radius:20px;padding:4px 9px;}
.pr-dlg .pr-x{flex:0 0 auto;border:1px solid var(--line-2);background:var(--surface);width:30px;height:30px;border-radius:8px;color:var(--ink-3);font-size:14px;}
.pr-dlg .pr-price{display:flex;align-items:baseline;gap:10px;margin-top:14px;flex-wrap:wrap;}
.pr-dlg .pr-price b{font-family:var(--disp);font-size:26px;font-weight:600;letter-spacing:-.02em;}
.pr-dlg .pr-price span{font-size:12.5px;color:var(--ink-3);}
.pr-dlg .pr-price em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--primary-d);background:var(--primary-soft);border-radius:20px;padding:4px 10px;}
.pr-dlg-b{padding:18px 24px 20px;}
.pr-dlg .pr-k{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:9px;}
.pr-dlg .pr-big{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;}
.pr-dlg .pr-big b{font-family:var(--disp);font-size:32px;font-weight:600;letter-spacing:-.02em;color:var(--primary-l);}
.pr-dlg .pr-big span{font-size:13px;color:var(--ink-3);}
.pr-dlg input[type=range]{width:100%;height:4px;accent-color:var(--primary);cursor:pointer;}
.pr-dlg .pr-range{display:flex;justify-content:space-between;font-size:9.5px;color:var(--ink-4);margin:5px 0 18px;}
.pr-dlg .pr-custom{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin:0 0 14px;}
.pr-dlg .pr-custom label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink-3);}
.pr-dlg .pr-custom input{height:40px;border:1px solid var(--line-2);border-radius:10px;padding:0 12px;font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--surface);outline:0;}
.pr-dlg .pr-custom input:focus{border-color:var(--primary-l);box-shadow:0 0 0 3px var(--primary-soft);}
.pr-dlg .pr-sub b{color:var(--ink);font-weight:600;}
.pr-dlg .pr-dlg-f .pr-f-sp{flex:1;}
.pr-dlg .pr-dlg-f .pr-reset{color:var(--ink-3);}
.pr-dlg .pr-dlg-f .pr-reset:hover{color:var(--primary-d);}
@media (max-width:560px){.pr-dlg .pr-custom{grid-template-columns:1fr;}}
.pr-dlg .pr-sum{border:1px solid var(--line);border-radius:11px;overflow:hidden;}
.pr-dlg .pr-sum>div{display:flex;justify-content:space-between;padding:12px 16px;font-size:13px;background:var(--canvas);color:var(--ink-3);}
.pr-dlg .pr-sum>div b{font-family:var(--disp);font-size:14px;font-weight:600;color:var(--ink);}
.pr-dlg .pr-sum>div.key{border-top:1px solid var(--line);background:#f8f3fc;color:var(--primary-l);font-weight:600;}
.pr-dlg .pr-sum>div.key b{color:var(--primary-l);}
.pr-dlg .pr-feats{display:flex;flex-direction:column;gap:9px;}
.pr-dlg .pr-feats div{display:flex;gap:9px;font-size:13px;line-height:1.5;color:var(--ink-2);align-items:flex-start;}
.pr-dlg .pr-feats i{width:17px;height:17px;flex:0 0 auto;border-radius:50%;background:var(--primary-soft);color:var(--primary-l);display:grid;place-items:center;font-size:9.5px;font-style:normal;margin-top:1px;}
.pr-dlg .pr-vol{margin-top:16px;border:1px solid var(--line);border-radius:11px;background:var(--canvas);padding:12px 15px;}
.pr-dlg .pr-vol>div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink-3);padding:3px 0;}
.pr-dlg .pr-vol>div b{color:var(--ink);font-weight:600;}
.pr-dlg .pr-earnbox{margin-top:16px;border:1px solid rgba(138,95,176,.28);border-radius:11px;background:#f8f3fc;padding:13px 16px;}
.pr-dlg .pr-earnbox b{font-size:14.5px;font-weight:600;color:var(--primary-d);}
.pr-dlg-f{padding:14px 24px;border-top:1px solid var(--line);background:var(--canvas);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;}
@media(max-width:980px){
  #pp-role .pr-grid{grid-template-columns:1fr;}
  #pp-role .pr-ctl{flex-direction:column;align-items:stretch;}
  #pp-role .pr-tabs{overflow-x:auto;}
  #pp-role .pr-bulk-r{width:100%;}
  #pp-role .pr-bulk-r .btn{width:100%;}
}

/* ---- the strip, as designed: white card · header row · tiles in a row (cwpp4) ---- */
#pp-role .pr-strip{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm);}
#pp-role .pr-strip-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 18px;border-bottom:1px solid var(--line);}
#pp-role .pr-tag{font-size:10px;font-weight:700;letter-spacing:.16em;color:#fff;background:var(--primary-d);border-radius:6px;padding:5px 10px;}
#pp-role .pr-strip-h>b{font-size:14px;font-weight:600;color:var(--primary-d);}
#pp-role .pr-tiles{display:flex;flex-wrap:wrap;}
#pp-role .pr-tile{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:11px;text-align:left;padding:13px 18px;border:0;border-right:1px solid var(--line);background:transparent;font-family:inherit;color:var(--ink);}
#pp-role .pr-tile:last-child{border-right:0;}
#pp-role .pr-tile:hover{background:#fcfbfe;}
#pp-role .pr-tile-ic{width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:var(--primary-soft);border:1px solid var(--primary-soft);color:var(--primary-d);display:grid;place-items:center;}
#pp-role .pr-tile-ic svg{width:17px;height:17px;}
#pp-role .pr-tile-ic.gold{background:linear-gradient(158deg,#fdf0c6 0%,#f2c864 38%,#dda02c 72%,#c4871c 100%);border-color:#be811a;color:#fff;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),0 3px 8px rgba(198,136,28,.3);}
#pp-role .pr-tile-ic.gold svg{filter:drop-shadow(0 1px 1px rgba(122,77,6,.45));}
#pp-role .pr-tile-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
#pp-role .pr-tile-t b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;}
#pp-role .pr-tile-t small{font-size:11.5px;color:var(--ink-4);}
#pp-role .pr-n{font-style:normal;width:18px;height:18px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-family:var(--disp);font-size:10.5px;font-weight:600;background:var(--canvas-2);color:var(--ink-3);}
#pp-role .pr-tile.done .pr-n{background:var(--good-soft);color:var(--good);}
#pp-role .pr-tile-a{flex:0 0 auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap;}
#pp-role .pr-tile-a.warn{color:var(--warn);font-weight:600;}
#pp-role .pr-tile.done .pr-tile-a{color:var(--good);font-weight:600;}
/* the links panel the tile opens, as designed */
#pp-role .pr-links{margin-top:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:16px 18px;}
#pp-role .pr-links-h{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
#pp-role .pr-links-h .pr-k{margin:0;}
#pp-role .pr-link{border:1px solid var(--line);border-radius:10px;background:var(--canvas);padding:12px 14px;margin-top:10px;}
#pp-role .pr-link-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
#pp-role .pr-link-h b{font-size:13px;font-weight:600;color:var(--primary-d);}
#pp-role .pr-link-h small{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);}
#pp-role .pr-link-r{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
#pp-role .pr-url{flex:1 1 170px;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#pp-role .pr-copy{flex:0 0 auto;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:7px;padding:6px 13px;font-size:12px;font-weight:600;}
#pp-role .pr-copy:hover{border-color:var(--primary-d);color:var(--primary-d);}
#pp-role .pr-code{display:flex;align-items:center;gap:9px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);}
#pp-role .pr-codebtn{border:1px dashed var(--primary-d);background:var(--surface);color:var(--primary-d);border-radius:6px;padding:5px 11px;font-size:13px;font-weight:600;letter-spacing:.04em;}
#pp-role .pr-codebtn:hover{background:var(--primary-d);color:#fff;}
#pp-role .pr-fine{flex:1 1 200px;min-width:0;font-size:11.5px;color:var(--ink-4);}
@media(max-width:980px){
  #pp-role .pr-tile{flex:1 1 100%;border-right:0;border-top:1px solid var(--line);min-height:52px;}
  #pp-role .pr-tile:first-child{border-top:0;}
}

/* four ways to partner: two roomy cards per row; inside each, the numbers on the left and
   what you get / skip on the right, so a wide card reads as one line of thought */
@media (min-width:981px){
  #pp-role .pr-body{display:grid;grid-template-columns:1.05fr 1fr;grid-auto-rows:min-content;column-gap:24px;row-gap:10px;align-content:start;padding:20px 22px 22px;}
  #pp-role .pr-body>*{grid-column:1;}
  #pp-role .pr-body .pr-get{grid-column:2;grid-row:1 / span 4;margin-top:0;padding-top:0;border-top:0;border-left:1px solid var(--line);padding-left:22px;}
  #pp-role .pr-card.on .pr-get{border-left-color:rgba(255,255,255,.18);}
  #pp-role .pr-hero{font-size:42px;}
  #pp-role .pr-desc{margin-top:2px;}
}
#pp-role .pr-bulk-reset[disabled]{opacity:.45;cursor:default;}

/* the Content Creation tile stands apart from the three setup steps */
#pp-role .pr-tile.cc{background:linear-gradient(180deg,var(--surface),var(--primary-soft));}
#pp-role .pr-tile-ic.pen{background:var(--primary);color:#fff;}
#pp-role .pr-tile.cc .pr-tile-a{color:var(--primary);font-weight:600;}

/* tile text wraps instead of being cut; four tiles sit two by two */
#pp-role .pr-tile-t small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;}
#pp-role .pr-tile-t b{white-space:normal;}
@media (min-width:981px){#pp-role .pr-tiles.four .pr-tile{flex:1 1 46%;border-bottom:1px solid var(--line);}#pp-role .pr-tiles.four .pr-tile:nth-child(n+3){border-bottom:0;}#pp-role .pr-tiles.four .pr-tile:nth-child(2n){border-right:0;}}

/* Content Creator card: the channels they post on, and a shine on the money when you hover */
#pp-role .pr-social{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;}
#pp-role .pr-social i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;background:var(--primary-soft);color:var(--primary-d);transition:transform .28s cubic-bezier(.2,.8,.2,1.3),background .25s,color .25s,box-shadow .25s;}
#pp-role .pr-card:hover .pr-social i{transform:translateY(-4px) rotate(-6deg);color:#fff;background:var(--primary);box-shadow:0 6px 14px rgba(70,24,107,.18);}
#pp-role .pr-card:hover .pr-social i:nth-child(2n){transform:translateY(-4px) rotate(6deg);}
#pp-role .pr-card.on:hover .pr-social i{background:#fff;color:var(--primary-d);}
#pp-role .pr-social i:nth-child(1){transition-delay:0s}#pp-role .pr-social i:nth-child(2){transition-delay:.04s}#pp-role .pr-social i:nth-child(3){transition-delay:.08s}#pp-role .pr-social i:nth-child(4){transition-delay:.12s}#pp-role .pr-social i:nth-child(5){transition-delay:.16s}#pp-role .pr-social i:nth-child(6){transition-delay:.2s}
#pp-role .pr-card.content:hover .fa-instagram{background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7);}
#pp-role .pr-card.content:hover .fa-tiktok{background:#111;}
#pp-role .pr-card.content:hover .fa-youtube{background:#ff0033;}
#pp-role .pr-card.content:hover .fa-facebook{background:#1877f2;}
#pp-role .pr-card.content:hover .fa-x-twitter{background:#000;}
#pp-role .pr-card.content:hover .fa-linkedin{background:#0a66c2;}
#pp-role .pr-card.on .pr-social i{background:rgba(255,255,255,.14);color:#fff;}
#pp-role .pr-card .pr-hero{position:relative;display:inline-block;}
#pp-role .pr-card:hover .pr-hero{background:linear-gradient(100deg,var(--primary-l) 0%,var(--primary-l) 35%,#f6d27a 48%,#e6ad3c 52%,var(--primary-l) 65%,var(--primary-l) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:prShine 1.5s linear infinite;}
#pp-role .pr-card.on:hover .pr-hero{background-image:linear-gradient(100deg,#c9a6e8 0%,#c9a6e8 35%,#fff3c4 48%,#f6d27a 52%,#c9a6e8 65%,#c9a6e8 100%);}
#pp-role .pr-card:hover .pr-hero::after{content:'$';position:absolute;right:-22px;top:-8px;font-size:18px;font-weight:700;color:#e6ad3c;text-shadow:0 0 12px rgba(230,173,60,.7);animation:prCoin 1.1s ease-in-out infinite;}
@keyframes prShine{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes prCoin{0%,100%{transform:translateY(0) scale(1);opacity:.85}50%{transform:translateY(-7px) scale(1.15);opacity:1}}
@media (prefers-reduced-motion:reduce){#pp-role .pr-card:hover .pr-hero,#pp-role .pr-card:hover .pr-hero::after{animation:none}}

/* Profile → How you partner */
#pf-role .pf-role{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
#pf-role .pf-role-hero{flex:0 0 auto;min-width:120px;padding:14px 16px;border-radius:14px;background:var(--primary-soft);display:flex;flex-direction:column;gap:2px;}
#pf-role .pf-role-hero b{font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--primary-d);}
#pf-role .pf-role-hero span{font-size:12px;color:var(--ink-3);}
#pf-role .pf-role-t{flex:1;min-width:220px;display:flex;flex-direction:column;gap:5px;}
#pf-role .pf-role-t .pr-tag{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--primary-d);background:var(--primary-soft);border-radius:20px;padding:3px 9px;}
#pf-role .pf-role-t b{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.012em;}
#pf-role .pf-role-t small{font-size:13px;line-height:1.5;color:var(--ink-3);}
#pf-role .pr-social{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px;}
#pf-role .pr-social i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;background:var(--canvas);color:var(--primary-d);border:1px solid var(--line);}
#pf-role .pf-role>.btn{flex:0 0 auto;}
#pf-role .pf-role.none .pf-role-t b{font-size:15px;}
@media (max-width:640px){#pf-role .pf-role-hero{width:100%;flex-direction:row;align-items:baseline;gap:10px;}}

/* Profile: the partner type as a badge next to the logo */
#pf-role{margin-left:auto;align-self:center;}
#pf-role .pf-badge{display:inline-flex;align-items:center;gap:8px;max-width:100%;border:1px solid var(--primary-soft);background:var(--primary-soft);color:var(--primary-d);border-radius:999px;padding:7px 14px 7px 10px;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:background .15s,border-color .15s;}
#pf-role .pf-badge:hover{border-color:var(--primary-l);background:#fff;}
#pf-role .pf-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-soft);flex:0 0 auto;}
#pf-role .pf-badge em{font-style:normal;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch;}
#pf-role .pf-badge em::before{content:'·';margin-right:8px;color:var(--ink-4);}
#pf-role .pf-badge.none{background:var(--canvas);border-color:var(--line-2);color:var(--ink-2);}
#pf-role .pf-badge.none .pf-badge-dot{background:var(--amber);box-shadow:0 0 0 3px #fbefd2;}
#pf-role .pf-badge.none em{color:var(--primary);font-weight:600;}
@media (max-width:640px){#pf-role{margin-left:0;width:100%;}#pf-role .pf-badge em{display:none;}}

/* the choice on the Dashboard: everything else waits until it is made */
#scr-dashboard.role-pick > :not(#pp-role){display:none!important;}
#scr-dashboard #pp-role{margin-bottom:0;}
#pp-role-note .pr-note-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
/* who they are, in the sidebar account block */
.side-foot #sb-role{overflow:visible;}
.side-foot .sb-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--primary-soft);background:var(--primary-soft);color:var(--primary-d);border-radius:999px;padding:3px 9px 3px 7px;font:inherit;font-size:11px;font-weight:700;letter-spacing:.02em;cursor:pointer;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-foot .sb-badge:hover{background:#fff;border-color:var(--primary-l);}
.side-foot .sb-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:0 0 auto;}
.side-foot .sb-badge.none{background:var(--canvas-2);border-color:var(--line-2);color:var(--ink-2);}
.side-foot .sb-badge.none .sb-badge-dot{background:var(--amber);}

#pf-role{flex:0 0 auto;}
#pf-role .pf-badge{white-space:nowrap;}

/* badges are labels, not buttons */
#pf-role .pf-badge,.side-foot .sb-badge{cursor:default;}
#pf-role .pf-badge:hover{border-color:var(--primary-soft);background:var(--primary-soft);}
.side-foot .sb-badge:hover{background:var(--primary-soft);border-color:var(--primary-soft);}

/* profile badge: small, one line, never wider than its row */
#pf-role{flex:0 1 auto;min-width:0;max-width:45%;}
#pf-role .pf-badge{font-size:11.5px;padding:5px 11px 5px 8px;gap:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
#pf-role .pf-badge-dot{width:7px;height:7px;box-shadow:0 0 0 2px var(--good-soft);}
@media (max-width:640px){#pf-role{max-width:100%;}}

/* strip header without the role line: just the change link, right-aligned and quiet */
#pp-role .pr-strip-h.slim{padding:6px 14px 0;border-bottom:0;min-height:0;}
#pp-role .pr-strip-h.slim .pr-change{font-size:11.5px;color:var(--ink-4);}
#pp-role .pr-strip-h.slim .pr-change:hover{color:var(--primary);}

/* Headings everywhere start each word with a capital (user: "in all the pages, header first
   word capital"). Body copy, sub-lines and values are untouched — only heading elements. */
.screen h1,.screen h2,.screen h3,.screen h4,
.card-h>b,.card-h>div>b,.card>.pad>b:first-child,
.pf-sec-label,.dash-h,.wiz-h,.tabs .tab,.subtabs .tab,
.tbl th,.pr-k,.pr-tile-t b,.pr-cat b,.pr-strip-h b,
.pf-badge,.sb-badge,#fin-tabs .tab,#pf-tabs .tab,
.card>div:first-child>b:first-child,.card.pad>b,.card.pad>.row>div>b:first-child,.set-row>div>b:first-child,.rf-pane>div>b:first-child,.rc-head b,.wshare-h b,.subscreen>.card>div>b:first-child,.empty>b{text-transform:capitalize;}
/* never touch things that only look like headings */
.screen h1 .faint,.screen h2 .faint,.screen h3 .faint,.dash-sub,.pr-tile-t small,.pr-desc,.pr-perk,.faint,code,.linkbox{text-transform:none;}

/* ---- sidebar account card: a proper card, a clearer log-out ---- */
.side-foot{margin-top:14px;padding:12px 12px 12px 12px;gap:12px;background:var(--surface);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);}
.side-foot .av{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--primary-l) 0%,var(--primary-d) 100%);color:#fff;font-size:14px;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 8px rgba(70,24,107,.22);}
.side-foot .av-on{width:12px;height:12px;right:-3px;bottom:-3px;border:2.5px solid var(--surface);background:var(--good);}
.side-foot .nm{font-size:13.5px;letter-spacing:-.005em;}
.side-foot .rl{margin-top:4px;}
.side-foot .sb-badge{font-size:10.5px;padding:2px 8px 2px 6px;gap:5px;letter-spacing:.03em;}
.side-foot .out{width:34px;height:34px;border-radius:10px;background:var(--canvas);border:1px solid var(--line);color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s;}
.side-foot .out svg{width:17px;height:17px;}
.side-foot .out:hover{background:#fff1f0;border-color:#f3b5ae;color:#d8453a;transform:translateX(1px);box-shadow:0 4px 10px rgba(216,69,58,.15);}
.side-foot .out:active{transform:translateX(1px) scale(.96);}
.side-foot .out:focus-visible{outline:2px solid var(--primary-l);outline-offset:2px;}
@media (max-width:980px){.side-foot{margin-top:10px;}}

/* section labels inside forms and earn boxes follow the same rule */
.field>label,.field label,legend,.pr-earn-r>span,.pr-earn-s>span:first-child,.pr-sum>div>span,.pr-custom label>span,.pr-big span,.pr-herosub{text-transform:capitalize;}
.field label .faint,.field label small{text-transform:none;}

/* Content Creation: step names, chips, filter pills and action buttons follow the heading rule */
#scr-content .cc-how-s,#scr-content .cc-how-s span,#scr-content .cc-fact,#scr-content .cc-cta,#scr-content .pf,#scr-content .tab,#scr-content .cc-k,#scr-content .cc-h,#scr-content .cc-title,#scr-content .cc-card b,#scr-content .cc-files{text-transform:capitalize;}
#scr-content .cc-guide b,#scr-content p,#scr-content small{text-transform:none;}

/* Creator Program hero: steps with a title and a one-line description, plus the browse button */
#scr-content .cc-how{gap:10px;}
#scr-content .cc-how-s{align-items:flex-start;padding:8px 13px 8px 8px;border-radius:14px;text-align:left;}
#scr-content .cc-how-s i{margin-top:1px;}
#scr-content .cc-how-s span{display:flex;flex-direction:column;gap:1px;line-height:1.25;}
#scr-content .cc-how-s span b{font-size:12.5px;font-weight:700;color:#fff;}
#scr-content .cc-how-s span small{font-size:11px;font-weight:500;color:rgba(255,255,255,.72);text-transform:none;}
#scr-content .cc-hero-cta{margin-top:16px;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:11px;padding:11px 18px;background:#fff;color:var(--primary-d);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s;text-transform:capitalize;}
#scr-content .cc-hero-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.22);}
#scr-content .cc-hero-cta span{transition:transform .15s;}
#scr-content .cc-hero-cta:hover span{transform:translateX(3px);}

/* sidebar menu, section headers, breadcrumb and the More sheet: every word capitalized */
.side .nav .lbl,.side .nav-h,.side .who .nm,.crumb,#crumb,.more-item,.more-item b,.more-sheet h3,.topbar h1,.topbar .t{text-transform:capitalize;}

/* login page: testimonials from admin → Reviews */
.auth-reviews{max-width:1040px;margin:34px auto 0;padding:0 16px;}
.auth-reviews h3{margin:0 0 16px;font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.015em;text-align:center;}
.auth-reviews .rcard .rv-av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-d);font-weight:700;font-size:15px;}
@media (max-width:980px){.reviews-grid{grid-template-columns:1fr;}}
/* admin → Reviews */
#scr-reviews .tbl td{vertical-align:top;}
#scr-reviews textarea.inp{min-height:84px;resize:vertical;}

/* Content Creation hero: the partner's discount code, ready to paste into a post */
#scr-content .cc-code{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:6px;}
#scr-content .cc-code small{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);}
#scr-content .cc-code-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
#scr-content .cc-code-row b{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:.06em;color:#fff;}
#scr-content .cc-code-copy{border:0;border-radius:9px;padding:7px 12px;background:#fff;color:var(--primary-d);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:transform .15s;}
#scr-content .cc-code-copy:hover{transform:translateY(-1px);}
#scr-content .cc-code>span{font-size:12px;line-height:1.45;color:rgba(255,255,255,.78);text-transform:none;}

/* Creator Program steps: two by two so all four always fit, and the current (white) step keeps dark text */
#scr-content .cc-how{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex-wrap:wrap;}
#scr-content .cc-how-a{display:none;}
#scr-content .cc-how-s{width:100%;min-width:0;}
#scr-content .cc-how-s span{min-width:0;}
#scr-content .cc-how-s span small{white-space:normal;}
#scr-content .cc-how-s.now span b{color:#2a1738;}
#scr-content .cc-how-s.now span small{color:rgba(42,23,56,.72);}
#scr-content .cc-how-s.done span b{color:rgba(255,255,255,.85);}
#scr-content .cc-hero-copy{max-width:min(720px,66%);}
@media (max-width:640px){#scr-content .cc-how{grid-template-columns:1fr;}}

/* words as a headline stay on one line */
#pp-role .pr-card.content .pr-hero,#pp-role .pr-card.white_label .pr-hero{font-size:30px;white-space:nowrap;line-height:1.05;}
@media (max-width:980px){#pp-role .pr-card.content .pr-hero,#pp-role .pr-card.white_label .pr-hero{font-size:28px;}}

/* Creator Program hero: full-width copy, four steps on one line, no numbers, code card underneath */
#scr-content .cc-hero-copy{max-width:100%;flex:1 1 100%;}
#scr-content .cc-how{grid-template-columns:repeat(4,minmax(0,1fr));}
#scr-content .cc-how-s{padding:10px 14px;}
#scr-content .cc-how-s span b{font-size:13px;}
#scr-content .cc-hero-side[hidden]{display:none!important;}
#scr-content .cc-code{max-width:460px;}
@media (max-width:1100px){#scr-content .cc-how{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){#scr-content .cc-how{grid-template-columns:1fr;}}

/* Creator Program hero, organised: headline left, discount code right, four steps across the bottom */
#scr-content .cc-hero-in{align-items:flex-start;gap:28px;}
#scr-content .cc-hero-copy{max-width:none;flex:1 1 440px;}
#scr-content .cc-hero-side{margin-left:auto;flex:0 1 380px;display:block;align-self:stretch;}
#scr-content .cc-hero-stats[hidden]{display:none!important;}
#scr-content .cc-code{margin-top:0;max-width:none;height:100%;box-sizing:border-box;justify-content:center;background:rgba(255,255,255,.12);}
#scr-content .cc-hero>.cc-how{position:relative;z-index:1;margin-top:22px;}
@media (max-width:900px){#scr-content .cc-hero-side{flex:1 1 100%;margin-left:0;}#scr-content .cc-code{height:auto;}}

/* Creator Program hero, direction A: the four steps as a connected timeline under the headline */
#scr-content .cc-hero>.cc-how{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px;padding:0;}
#scr-content .cc-hero>.cc-how::before{content:"";position:absolute;left:24px;right:24px;top:23px;height:2px;background:rgba(255,255,255,.18);z-index:0;}
#scr-content .cc-how-s,#scr-content .cc-how-s.now,#scr-content .cc-how-s.done{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0;background:transparent;border:0;box-shadow:none;border-radius:0;text-align:left;width:100%;min-width:0;color:#fff;}
#scr-content .cc-how-s:hover{background:transparent;transform:none;}
#scr-content .cc-how-s .cc-how-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font-style:normal;transition:transform .18s,background .18s;}
#scr-content .cc-how-s:hover .cc-how-ic{transform:translateY(-2px);background:rgba(255,255,255,.22);}
#scr-content .cc-how-s.now .cc-how-ic{background:#fff;color:#472963;border-color:rgba(255,255,255,.9);box-shadow:0 10px 24px rgba(12,5,22,.35);}
#scr-content .cc-how-s.done .cc-how-ic{background:#2fbd82;color:#0b2c1e;border-color:#2fbd82;}
#scr-content .cc-how-s span{display:flex;flex-direction:column;gap:3px;}
#scr-content .cc-how-s span b,#scr-content .cc-how-s.now span b,#scr-content .cc-how-s.done span b{font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff;}
#scr-content .cc-how-s span small,#scr-content .cc-how-s.now span small{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.72);}
#scr-content .cc-hero-in{align-items:flex-start;}
#scr-content .cc-code{border-radius:18px;padding:18px 20px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);}
#scr-content .cc-code-row b{font-size:26px;letter-spacing:.08em;}
@media (max-width:1100px){#scr-content .cc-hero>.cc-how{grid-template-columns:repeat(2,minmax(0,1fr));}#scr-content .cc-hero>.cc-how::before{display:none;}}
@media (max-width:640px){#scr-content .cc-hero>.cc-how{grid-template-columns:1fr;}}

/* the money is visible: a gold coin on the code card, a dollar in the Post & Earn step */
#scr-content .cc-code{position:relative;}
#scr-content .cc-coin{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-size:18px;font-weight:700;color:#5a3a06;background:radial-gradient(circle at 35% 30%,#fff1b8 0%,#f2c864 40%,#d99a27 75%,#b77b12 100%);box-shadow:0 6px 14px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.7);}
#scr-content .cc-how-s:last-child .cc-how-ic{background:radial-gradient(circle at 35% 30%,#fff1b8 0%,#f2c864 40%,#d99a27 75%,#b77b12 100%);color:#5a3a06;border-color:#c48b19;box-shadow:0 8px 20px rgba(214,154,39,.35);}
#scr-content .cc-how-s.done:last-child .cc-how-ic{background:#2fbd82;color:#0b2c1e;border-color:#2fbd82;box-shadow:none;}

/* hero housekeeping: the floating coins gave way to the code card, and the steps get the banner's own padding */
#scr-content .cc-3d .coin3d{display:none;}
#scr-content .cc-hero>.cc-how{padding:0 32px 30px;margin-top:18px;}
#scr-content .cc-hero>.cc-how::before{left:56px;right:56px;}
@media (max-width:640px){#scr-content .cc-hero>.cc-how{padding:0 20px 24px;}}

/* Creator Program hero — compact scale: smaller type, tighter rhythm, coin clear of the button */
#scr-content .cc-hero-in{padding:24px 28px 0;gap:24px;}
#scr-content .cc-hero .cc-eyebrow{font-size:10px;padding:5px 10px;letter-spacing:.14em;}
#scr-content .cc-hero h2{font-size:27px;margin:10px 0 6px;letter-spacing:-.025em;}
#scr-content .cc-hero p{font-size:13.5px;line-height:1.55;max-width:58ch;}
#scr-content .cc-hero-side{flex:0 1 340px;}
#scr-content .cc-code{padding:13px 15px 13px;gap:7px;border-radius:14px;}
#scr-content .cc-code small{font-size:9.5px;letter-spacing:.14em;}
#scr-content .cc-code-row b{font-size:19px;letter-spacing:.07em;}
#scr-content .cc-code-copy{padding:6px 11px;font-size:12px;border-radius:8px;}
#scr-content .cc-code>span{font-size:11.5px;line-height:1.4;}
#scr-content .cc-coin{top:9px;right:12px;width:24px;height:24px;font-size:12px;}
#scr-content .cc-hero>.cc-how{margin-top:14px;padding:0 28px 24px;gap:16px;}
#scr-content .cc-hero>.cc-how::before{top:19px;left:48px;right:48px;}
#scr-content .cc-how-s{gap:8px;}
#scr-content .cc-how-s .cc-how-ic{width:40px;height:40px;border-radius:12px;}
#scr-content .cc-how-s .cc-how-ic svg{width:17px;height:17px;}
#scr-content .cc-how-s span{gap:2px;}
#scr-content .cc-how-s span b,#scr-content .cc-how-s.now span b,#scr-content .cc-how-s.done span b{font-size:13.5px;}
#scr-content .cc-how-s span small,#scr-content .cc-how-s.now span small{font-size:12px;line-height:1.4;}

/* the coin sits in the code card's label row, never near the Copy button */
#scr-content .cc-code-h{display:flex;align-items:center;gap:8px;}
#scr-content .cc-code-h .cc-coin{position:static;width:20px;height:20px;font-size:10px;box-shadow:0 3px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.7);}
#scr-content .cc-code-h small{margin:0;}

/* ---- Creator Program hero, round three: gold headline, ticket code, progress rail ---- */
#scr-content .cc-hero h2{font-size:28px;}
#scr-content .cc-hero h2 .cc-gold{background:linear-gradient(100deg,#fff1b8 0%,#f2c864 45%,#e0a52f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;}
#scr-content .cc-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px);opacity:.6;z-index:0;}
/* ticket */
#scr-content .cc-ticket{position:relative;display:grid;grid-template-columns:1fr 112px;gap:0;padding:0;width:360px;max-width:100%;border-radius:14px;background:#ffffff;border:0;color:#2a1738;box-shadow:0 18px 40px rgba(12,5,22,.35);overflow:visible;backdrop-filter:none;}
#scr-content .cc-ticket-main{padding:14px 16px;display:flex;flex-direction:column;gap:6px;border-right:2px dashed var(--line);min-width:0;}
#scr-content .cc-ticket .cc-code-h small{color:var(--ink-3);}
#scr-content .cc-ticket-code{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:.08em;color:var(--primary-d);line-height:1;}
#scr-content .cc-ticket-main>span{font-size:11.5px;line-height:1.4;color:var(--ink-2);text-transform:none;}
#scr-content .cc-ticket-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 10px;}
#scr-content .cc-ticket .cc-code-copy{display:inline-flex;flex-direction:column;align-items:center;gap:4px;width:100%;border:1px solid var(--primary-l);border-radius:10px;padding:10px 12px;background:var(--primary);color:#fff;font-size:12px;font-weight:700;box-shadow:var(--glow);}
#scr-content .cc-ticket .cc-code-copy:hover{transform:translateY(-1px);}
#scr-content .cc-ticket-stub small{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);}
#scr-content .cc-notch{position:absolute;left:calc(100% - 112px - 9px);width:18px;height:18px;border-radius:50%;background:#4a2a68;z-index:2;}
#scr-content .cc-notch.t{top:-9px;} #scr-content .cc-notch.b{bottom:-9px;}
/* progress rail */
#scr-content .cc-hero>.cc-how{--cc-prog:0%;padding-top:6px;}
#scr-content .cc-hero>.cc-how::before{top:25px;left:48px;right:48px;background:rgba(255,255,255,.16);border-radius:2px;}
#scr-content .cc-hero>.cc-how::after{content:"";position:absolute;left:48px;top:25px;height:2px;border-radius:2px;width:calc((100% - 96px) * var(--cc-prog) / 100%);width:calc(var(--cc-prog) * (100% - 96px) / 100%);background:linear-gradient(90deg,#2fbd82,#f2c864);box-shadow:0 0 12px rgba(242,200,100,.45);z-index:0;transition:width .6s cubic-bezier(.22,.9,.3,1);}
#scr-content .cc-how-s .cc-how-ic{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.9);}
#scr-content .cc-how-s.now .cc-how-ic{box-shadow:0 8px 20px rgba(12,5,22,.35),0 0 0 6px rgba(255,255,255,.12);}
@media (max-width:900px){#scr-content .cc-ticket{width:100%;}}

/* ---- Creator Program hero — CLEAN: one flat purple, no glow, no coins, no hatching ---- */
#scr-content .cc-hero{background:#4a2a68;box-shadow:0 2px 4px rgba(18,8,30,.12),0 18px 44px rgba(24,10,40,.28);border-radius:20px;}
#scr-content .cc-hero::after,#scr-content .cc-hero::before{content:none;}
#scr-content .cc-3d{display:none;}
#scr-content .cc-hero h2{text-shadow:none;font-size:27px;}
#scr-content .cc-hero .cc-eyebrow{border-color:transparent;background:rgba(255,255,255,.12);backdrop-filter:none;-webkit-backdrop-filter:none;}
#scr-content .cc-hero .cc-eyebrow svg{display:none;}
#scr-content .cc-hero p{color:rgba(255,255,255,.76);}
#scr-content .cc-hero-in{align-items:center;padding:26px 28px 0;}
/* code card: plain white, text left, one button right */
#scr-content .cc-ticket{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;width:360px;border-radius:14px;box-shadow:none;}
#scr-content .cc-notch,#scr-content .cc-coin,#scr-content .cc-ticket-stub small{display:none;}
#scr-content .cc-ticket-main{padding:0;border-right:0;flex:1;gap:4px;}
#scr-content .cc-ticket-code{font-size:21px;letter-spacing:.07em;line-height:1.1;}
#scr-content .cc-ticket-stub{padding:0;flex:0 0 auto;}
#scr-content .cc-ticket .cc-code-copy{flex-direction:row;gap:6px;padding:10px 14px;font-size:12.5px;border:0;box-shadow:none;width:auto;}
#scr-content .cc-ticket .cc-code-copy:hover{transform:none;background:var(--primary-d);}
/* steps: an even row under one hairline, icon left, words right */
#scr-content .cc-hero>.cc-how{margin:22px 28px 0;padding:18px 0 24px;border-top:1px solid rgba(255,255,255,.14);gap:16px;}
#scr-content .cc-hero>.cc-how::before,#scr-content .cc-hero>.cc-how::after{content:none;}
#scr-content .cc-how-s,#scr-content .cc-how-s.now,#scr-content .cc-how-s.done{flex-direction:row;align-items:flex-start;gap:12px;}
#scr-content .cc-how-s .cc-how-ic{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.1);border:0;color:#fff;box-shadow:none;}
#scr-content .cc-how-s:hover .cc-how-ic{transform:none;background:rgba(255,255,255,.16);}
#scr-content .cc-how-s.now .cc-how-ic{background:#fff;color:#472963;box-shadow:none;}
#scr-content .cc-how-s.done .cc-how-ic,#scr-content .cc-how-s.done:last-child .cc-how-ic{background:#2fbd82;color:#0b2c1e;box-shadow:none;}
#scr-content .cc-how-s:last-child .cc-how-ic{background:rgba(255,255,255,.1);color:#fff;border:0;box-shadow:none;}
#scr-content .cc-how-s span small,#scr-content .cc-how-s.now span small{color:rgba(255,255,255,.66);}
/* the guide bar under the hero repeats the steps — gone on request */
#scr-content #cc-guide{display:none!important;}
@media (max-width:1100px){#scr-content .cc-hero>.cc-how{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){#scr-content .cc-hero>.cc-how{grid-template-columns:1fr;margin:18px 20px 0;}#scr-content .cc-ticket{width:100%;}}

/* sub-lines under stat numbers start with a capital; status pills and funnel side labels capitalize every word */
.stat .delta::first-letter,.kpi .delta::first-letter,.delta::first-letter{text-transform:uppercase;}
.pill{text-transform:capitalize;}
.pill code,.pill .num{text-transform:none;}
.ref-side{text-transform:capitalize;}

/* admin → partner detail: the type row */
.rd-type{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--canvas);}
.rd-type-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.rd-type-k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);}
.rd-type-d{font-size:12.5px;}
.rd-type-r{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-3);}
.rd-type-r select.inp{height:34px;padding:0 30px 0 10px;font-size:13px;width:auto;min-width:200px;border-radius:9px;}

/* ---- admin console: page header, two-column overview, attention queue, type chips, detail setting rows ---- */
body.admin .adm-sub{margin:4px 0 0;font-size:13px;color:var(--ink-3);}
body.admin .adm-two{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px;align-items:start;}
body.admin .queue{display:flex;flex-direction:column;}
body.admin .q{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;cursor:pointer;color:var(--ink);}
body.admin .q:last-child{border-bottom:0;}
body.admin .q:hover .q-go{color:var(--primary-d);}
body.admin .q i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;flex:0 0 auto;}
body.admin .q i.warn{background:var(--warn-soft);color:var(--warn);} body.admin .q i.primary{background:var(--primary-soft);color:var(--primary-d);} body.admin .q i.good{background:var(--good-soft);color:var(--good);}
body.admin .q-t{display:flex;flex-direction:column;gap:1px;min-width:0;}
body.admin .q-t b{font-size:13px;font-weight:600;} body.admin .q-t small{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.admin .q-go{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--primary);white-space:nowrap;}
body.admin .chips{display:flex;gap:6px;flex-wrap:wrap;}
body.admin .chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface);cursor:pointer;}
body.admin .chip .chip-n{font-size:11px;color:var(--ink-4);}
body.admin .chip.on{background:var(--primary);border-color:var(--primary);color:#fff;} body.admin .chip.on .chip-n{color:rgba(255,255,255,.75);}
body.admin .rd-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 4px;}
body.admin .rd-set .rd-type{margin:0;}
@media (max-width:1100px){body.admin .adm-two,body.admin .rd-set{grid-template-columns:1fr;}}

/* ---- admin console: the menu runs across the top ---- */
body.admin .app{display:flex;flex-direction:column;min-height:100vh;}
body.admin .side{position:sticky;top:0;z-index:60;width:auto;height:auto;min-height:0;display:flex;flex-direction:row;align-items:center;gap:4px;padding:10px 22px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
body.admin .side::-webkit-scrollbar{display:none;}
body.admin .side .logo{margin:0 14px 0 0;flex:0 0 auto;}
body.admin .side .nav-h{display:none;}
body.admin .side .nav{flex:0 0 auto;padding:8px 12px;border-radius:9px;white-space:nowrap;}
body.admin .side .nav .lbl{font-size:13px;}
body.admin .side .nav .num-badge{margin-left:6px;}
body.admin .side-util,body.admin .side-foot{margin-left:auto;margin-top:0;border-top:0;}
body.admin .main{width:100%;}
@media (max-width:900px){body.admin .side{padding:8px 12px;}}

/* ---- phones: every control is a real tap target ---- */
@media (max-width:980px){
  #pp-role .pr-change{min-height:40px;padding:8px 12px;display:inline-flex;align-items:center;}
  #pp-role .pr-t{min-height:40px;padding:0 14px;}
  #pp-role .pr-more{min-height:40px;display:inline-flex;align-items:center;padding:0 4px;}
  #pp-role .pr-preset{min-height:40px;}
  #pp-role .pr-cta,#pp-role .pr-tile,#pp-role .pr-bar .btn{min-height:44px;}
  #pp-role .pr-strip-h.slim{justify-content:flex-end;}
  .pr-dlg .pr-dlg-f .btn{min-height:44px;flex:1 1 auto;justify-content:center;}
  .pr-dlg .pr-dlg-f .pr-f-sp{display:none;}
  .pr-dlg .pr-dlg-f{flex-wrap:wrap;gap:8px;}
  .pr-dlg .pr-dlg-f .pr-reset{flex-basis:100%;}
  #scr-content .cc-ticket{flex-wrap:wrap;}
  #scr-content .cc-ticket .cc-code-copy{min-height:44px;}
  #scr-content .cc-how-s{min-height:44px;}
  .side-foot .out{width:40px;height:40px;}
}

/* ---- phones: nothing below 11px ---- */
@media (max-width:980px){
  #pp-role .pr-k,#pp-role .pr-kind,#pp-role .pr-pop,#pp-role .pr-lbl,#pp-role .pr-tag,#pp-role .pr-set,#pp-role .pr-tile-t small,.pr-dlg .pr-k,.pr-dlg .pr-range,.pr-dlg .pr-custom label>span{font-size:11px;}
  #scr-content .cc-eyebrow,#scr-content .cc-code small,#scr-content .cc-for,#scr-content .cc-badge,#scr-content .cc-cap,#scr-content .cc-ticket-stub small{font-size:11px;}
  .conv,.rep-file-ic,.rd-type-k,.pf-badge,.sb-badge,.side .rl{font-size:11px;}
  .pill{font-size:11.5px;}
}

/* ---- phones: the bottom bar must never sit on top of the last card ---- */
@media (max-width:980px){
  body:not(.auth-only) .main,body:not(.auth-only) .canvas{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;}
  .conv,.fstep .conv,.pill,.pill.faint,.tk-pill,.tkr .pill{font-size:11px!important;}
}

/* ---- phones: bottom bar labels fit, and the coin never lands on a pill ---- */
@media (max-width:980px){
  .nav .lbl,.nav .lbl[data-short]::after{font-size:9.5px;letter-spacing:-.01em;}
  .nav{padding:6px 2px;}
  .coin-burst{display:none;}
}

/* ================= phones: the review pass ================= */
@media (max-width:980px){
  /* the fixed bars are opaque, so page content never shows through them */
  .side{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 -1px 0 var(--line),0 -10px 26px rgba(24,12,40,.10);}
  #pp-role .pr-bar{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--line-2);padding:10px 12px;min-height:64px;}
  #pp-role .pr-bar-t small{font-size:10px;} #pp-role .pr-bar-t b{font-size:13.5px;}
  #pp-role .pr-bar .btn{min-height:44px;padding:0 16px;}
  /* the partner-type badge gets its own line instead of being cut by the card edge */
  .pf-logo{flex-wrap:wrap;}
  #pf-role{order:-1;width:100%;max-width:100%;margin:0 0 4px;}
  .pf-logo>div:not(#pf-role){min-width:0;}
  /* every table cell keeps its label and value on separate lines, nothing truncated */
  .canvas table.tbl td{white-space:normal;overflow:visible;text-overflow:clip;}
  .canvas table.tbl td::before{white-space:normal;}
  /* the funnel caption wraps instead of running off the edge */
  .card-h{flex-wrap:wrap;row-gap:4px;}
  .card-h>.faint,.card-h>span{white-space:normal;overflow-wrap:anywhere;max-width:100%;}
  /* stat titles wrap around the round icon instead of hiding under it */
  .stat .k{align-items:flex-start;line-height:1.25;padding-right:38px;}
  .stat .ic{position:absolute;right:16px;top:14px;float:none;}
  .stat{position:relative;}
  /* form fields: readable placeholders, and 16px so iOS does not zoom on focus */
  .inp,.glass-input,select.inp,textarea.inp{font-size:16px;}
  .inp::placeholder,.glass-input::placeholder,textarea.inp::placeholder{color:var(--ink-3);opacity:1;}
  /* filter pills sit in a row and are tappable */
  .pf-row,.filters{display:flex!important;flex-wrap:wrap;gap:8px;align-items:center;}
  .pf,.filters .pill{min-height:40px;display:inline-flex;align-items:center;}
  /* tab strips scroll and end inside the padding, with a hint they continue */
  .tabs,.subtabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:26px;scroll-snap-type:x proximity;}
  .tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar{display:none;}
  .tabs>*,.subtabs>*{scroll-snap-align:start;flex:0 0 auto;}
  #pp-role .pr-tabs{padding-right:20px;}
  /* bulk markup chips: three per row, all tappable */
  #pp-role .pr-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;}
  #pp-role .pr-preset{min-height:44px;justify-content:center;}
  #pp-role .pr-bulk-r{flex-direction:column;align-items:stretch;gap:10px;width:100%;}
  #pp-role .pr-bulk-r .btn{min-height:44px;justify-content:center;}
  #pp-role .pr-bulk-reset{min-height:44px;}
  /* the markup slider's end labels are readable */
  .pr-dlg .pr-range{font-size:12px;color:var(--ink-3);}
  /* payout method row wraps instead of squeezing its middle column */
  #pm-saved,.pm-row{flex-wrap:wrap;gap:10px;}
  #pm-saved .btn,.pm-row .btn{flex:1 1 140px;justify-content:center;min-height:44px;}
  /* the brand watermark stays behind the card's buttons */
  .cc-ghost{opacity:.1;z-index:0;}
  .cc-acts,.cc-cta{position:relative;z-index:1;}
}

/* ================= phones: every tab and filter strip behaves ================= */
@media (max-width:980px){
  /* one scrolling row, snapping, with a fade at the right edge so it reads as scrollable */
  .tabs,.subtabs,#fin-tabs,#pf-tabs,#cc-tabs,#rf-tabs,#rep-tabs,#cul-tabs,.crm-tabs,#pp-role .pr-tabs,#set-tabs{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;scroll-snap-type:x proximity;padding-right:24px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent 100%);
  }
  .tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar,#fin-tabs::-webkit-scrollbar,#rep-tabs::-webkit-scrollbar,#cc-tabs::-webkit-scrollbar,#pp-role .pr-tabs::-webkit-scrollbar{display:none;}
  .tabs>*,.subtabs>*,#fin-tabs>*,#pf-tabs>*,#cc-tabs>*,#rf-tabs>*,#rep-tabs>*,#pp-role .pr-tabs>*{flex:0 0 auto;scroll-snap-align:start;min-height:44px;display:inline-flex;align-items:center;}
  /* a strip that already fits needs no fade */
  .tabs.fits,.subtabs.fits,#fin-tabs.fits,#pf-tabs.fits,#cc-tabs.fits,#rf-tabs.fits,#rep-tabs.fits,#pp-role .pr-tabs.fits{-webkit-mask-image:none;mask-image:none;padding-right:0;}
  /* filter pills: wrap into rows, never one per line */
  .pf-row,#ref-filters,#fin-payouts-filters,#fin-subs-filters,.filters,.pf-list{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important;align-items:center;}
  .pf{flex:0 1 auto;min-height:40px;display:inline-flex;align-items:center;}
  /* the segmented controls stay on one line and stay tappable */
  .seg{display:inline-flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;}
  .seg::-webkit-scrollbar{display:none;}
  .seg button{flex:0 0 auto;min-height:38px;}
}

/* ---- "Change Partner Type" is a button, not a stray underlined link ---- */
#pp-role .pr-strip-h.slim{padding:10px 14px 0;}
#pp-role .pr-change{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:600;text-decoration:none;box-shadow:var(--shadow-sm);transition:border-color .15s,color .15s,background .15s,transform .15s;}
#pp-role .pr-change svg{flex:0 0 auto;opacity:.75;}
#pp-role .pr-change:hover{border-color:var(--primary-l);color:var(--primary-d);background:var(--primary-soft);}
#pp-role .pr-change:hover svg{opacity:1;}
#pp-role .pr-change:active{transform:translateY(1px);}
#pp-role .pr-change:focus-visible{outline:2px solid var(--primary-l);outline-offset:2px;}
@media (max-width:980px){
  #pp-role .pr-strip-h.slim{padding:12px 14px 0;justify-content:stretch;}
  #pp-role .pr-change{width:100%;justify-content:center;min-height:44px;font-size:13.5px;border-radius:12px;}
}

/* ---- the Change button shares the tiles' row, so the strip has no empty band ---- */
#pp-role .pr-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;}
#pp-role .pr-strip-h.slim{grid-column:2;grid-row:1;padding:0 14px;margin:0;min-height:0;border:0;justify-content:flex-end;}
#pp-role .pr-strip-h.slim .pr-line{display:none;}
#pp-role .pr-tiles{grid-column:1;grid-row:1;}
@media (max-width:980px){
  #pp-role .pr-strip{grid-template-columns:1fr;}
  #pp-role .pr-tiles{grid-column:1;grid-row:1;}
  #pp-role .pr-strip-h.slim{grid-column:1;grid-row:2;padding:0 14px 14px;}
}

/* ---- the setup strip holds its shape with three tiles or four ---- */
#pp-role .pr-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
#pp-role .pr-tiles.four{grid-template-columns:repeat(4,minmax(0,1fr));}
#pp-role .pr-tile{flex:none;width:auto;border-right:1px solid var(--line);}
#pp-role .pr-tiles .pr-tile:last-child{border-right:0;}
#pp-role .pr-tiles.four .pr-tile:nth-child(n+3){border-bottom:0;}
/* a laptop cannot fit four tiles and the button on one line: two per row, button underneath */
@media (max-width:1439px){
  #pp-role .pr-strip{grid-template-columns:1fr;}
  #pp-role .pr-strip-h.slim{grid-column:1;grid-row:2;padding:0 14px 12px;justify-content:flex-end;}
  #pp-role .pr-tiles{grid-column:1;grid-row:1;}
}
@media (max-width:1279px){
  #pp-role .pr-tiles,#pp-role .pr-tiles.four{grid-template-columns:repeat(2,minmax(0,1fr));}
  #pp-role .pr-tiles .pr-tile:nth-child(2n){border-right:0;}
  #pp-role .pr-tiles .pr-tile{border-bottom:1px solid var(--line);}
  #pp-role .pr-tiles .pr-tile:nth-last-child(-n+2){border-bottom:0;}
}
@media (max-width:640px){
  #pp-role .pr-tiles,#pp-role .pr-tiles.four{grid-template-columns:1fr;}
  #pp-role .pr-tiles .pr-tile{border-right:0;border-bottom:1px solid var(--line);}
  #pp-role .pr-tiles .pr-tile:last-child{border-bottom:0;}
}