/* ============================================================
   Influ.com.lk — shared stylesheet
   ============================================================ */

:root{
  --mint: #3EB489;
  --mint-deep: #1F7A5C;
  --mint-bright: #4FE3AE;
  --mint-tint: #E8F5EF;
  --paper: #F7FAF9;
  --charcoal: #1A1A1A;
  --ink: #33403A;
  --ink-soft: #647069;
  --gold: #C99A3E;
  --coral: #E8785A;
  --line: #DCEAE3;
  --white: #FFFFFF;
  --radius: 14px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --max: 1180px;

  /* ---- SPACING SCALE ----------------------------------------------------
     The stylesheet had 42 distinct padding/margin values, 50 font sizes, 37
     shadows and 17 radii -- every value eyeballed independently. That is what
     reads as "cluttered": nothing lines up because nothing shares a rhythm.
     Everything below is on a 4px base. Use these, not raw px. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Vertical rhythm between major page sections, and the gutter inside .wrap. */
  --section-y: clamp(48px, 7vw, 96px);
  --gutter: clamp(20px, 4vw, 32px);

  /* ---- RADII ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* ---- ELEVATION ----
     Three levels, not thirty-seven. Level 1 is a resting card, 2 is hover,
     3 is something floating above the page (drawer, modal, menu). */
  --e-1: 0 1px 2px rgba(26,26,26,.04), 0 4px 12px rgba(26,26,26,.05);
  --e-2: 0 2px 4px rgba(26,26,26,.05), 0 12px 28px rgba(26,26,26,.08);
  --e-3: 0 8px 16px rgba(26,26,26,.08), 0 28px 60px rgba(26,26,26,.14);

  /* ---- TYPE SCALE ---- */
  --fs-xs: .72rem;
  --fs-sm: .82rem;
  --fs-base: .94rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.3rem;
  --fs-xl: clamp(1.5rem, 2.6vw, 1.9rem);
  --fs-2xl: clamp(1.9rem, 4vw, 2.8rem);
  --fs-3xl: clamp(2.2rem, 5.4vw, 3.4rem);

  /* ---- MOTION ---- */
  --ease: cubic-bezier(.2,.8,.3,1);
  --t-fast: .16s;
  --t-base: .24s;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (max-width:480px){
  .sticky-action-bar{flex-direction:column; align-items:stretch;}
  .sticky-action-bar > div[style*="display:flex"]{width:100%;}
  .sticky-action-bar .btn{flex:1; min-width:0;}
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--charcoal); color:var(--white);
  padding:12px 18px; border-radius:0 0 8px 0; z-index:300; font-family:var(--font-body); font-size:.9rem;
}
.skip-link:focus{left:0;}

:focus-visible{outline:3px solid var(--mint-deep); outline-offset:3px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--charcoal);
  margin:0;
  letter-spacing:-0.01em;
  font-weight:600;
}
h1{font-size:clamp(2.4rem, 5vw, 4rem); line-height:1.05; font-weight:700; letter-spacing:-0.02em;}
h2{font-size:clamp(1.85rem, 3.4vw, 2.5rem); line-height:1.15;}
h3{font-size:1.25rem; line-height:1.3;}
p{margin:0;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mint-deep);
  font-weight:500;
}
.mono{font-family:var(--font-mono);}

.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:14px 26px; border-radius:999px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .2s ease;
  white-space:nowrap; overflow:hidden;
}
.btn-primary{background:var(--charcoal); color:var(--white);}
.btn-primary::before{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-20deg); transition:left .55s cubic-bezier(.2,.8,.3,1);
}
.btn-primary:hover::before{left:130%;}
.btn-primary:hover{background:var(--mint-deep); transform:translateY(-2px); box-shadow:0 10px 24px rgba(31,122,92,.28);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{background:transparent; color:var(--charcoal); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--mint-deep); color:var(--mint-deep); transform:translateY(-2px);}
.btn-sm{padding:9px 18px; font-size:.85rem;}
.btn-block{width:100%; justify-content:center;}

/* ---------- NAV (glassmorphism) ----------
   Layered like real frosted glass: a translucent tinted base, heavy blur+saturation
   so content scrolling underneath stays legible through it, a soft top "sheen"
   highlight standing in for a light reflection, and a floating shadow so the panel
   reads as sitting above the page rather than flush with it. */
header.site{
  position:sticky; top:0; z-index:100;
  background:
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0) 40%),
    rgba(247,250,249,0.55);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.5);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 32px -20px rgba(26,26,26,.25);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease, height .3s ease;
}
header.site.scrolled{
  background:
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0) 40%),
    rgba(247,250,249,0.78);
  border-bottom-color:rgba(255,255,255,0.65);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 16px 40px -18px rgba(26,26,26,.22);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
  transition:height .3s ease;
}
header.site.scrolled nav.wrap{height:66px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
.logo-mark{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.logo-mark img{width:100%; height:100%; object-fit:contain;}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.08);}
.logo-word{font-family:var(--font-display); font-weight:700; font-size:1.14rem; color:var(--charcoal); white-space:nowrap;}
.logo-word .tld{color:var(--mint-deep); font-family:var(--font-mono); font-weight:500; font-size:.9rem;}

.nav-links{display:flex; align-items:center; gap:40px; list-style:none; margin:0 0 0 8px; padding:0; flex:1; justify-content:center;}
.nav-links a{
  font-size:.92rem; font-weight:500; text-decoration:none; color:var(--ink);
  position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--mint);
  transition:width .25s ease;
}
.nav-links a:hover{color:var(--mint-deep);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--mint-deep);}
.nav-links a.active::after{width:100%;}

.nav-cta{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.nav-burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-burger span{width:22px; height:2px; background:var(--charcoal); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}

.mobile-menu{
  display:none; position:fixed; inset:76px 0 0 0; z-index:99;
  background:linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0) 30%), rgba(247,250,249,0.88);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  padding:32px 24px; overflow-y:auto;
}
.mobile-menu.open{display:block;}
.mobile-menu ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.mobile-menu a{
  display:block; padding:16px 4px; font-family:var(--font-display); font-size:1.3rem; font-weight:600;
  text-decoration:none; color:var(--charcoal); border-bottom:1px solid var(--line);
}
.mobile-menu .mobile-cta{margin-top:28px; display:flex; flex-direction:column; gap:14px;}

@media (max-width: 860px){
  .nav-links{display:none;}
  .nav-cta .btn-ghost{display:none;}
  .nav-burger{display:flex;}
}

/* ---------- AMBIENT BLOBS ---------- */
.blob-field{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  animation:blobFloat 16s ease-in-out infinite;
}
.blob-1{width:420px; height:420px; background:radial-gradient(circle, var(--mint-bright), transparent 70%); top:-120px; right:-80px; animation-duration:18s;}
.blob-2{width:340px; height:340px; background:radial-gradient(circle, var(--gold), transparent 72%); bottom:-100px; left:-60px; opacity:.28; animation-duration:22s; animation-delay:-4s;}
.blob-3{width:260px; height:260px; background:radial-gradient(circle, var(--mint), transparent 72%); top:40%; left:38%; opacity:.22; animation-duration:20s; animation-delay:-9s;}
@keyframes blobFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(24px,-30px) scale(1.06); }
  66%{ transform:translate(-20px,20px) scale(.96); }
}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.02s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.10s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.18s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.34s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.42s;}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important; transition:none !important;}
  .blob{animation:none;}
  html{scroll-behavior:auto;}
  .dot{animation:none !important;}
}

/* ---------- CUSTOM CURSOR: "swarm" cursor ----------
   A soft trailing halo behind a core mark (echoes the logo), with small satellite
   dots that orbit it — the cursor itself acts out the swarm metaphor. Hidden until
   the first mousemove (avoids a stray dot flashing at screen-center on load) and
   invisible until then via body.cursor-visible. */
.swarm-cursor{position:fixed; top:0; left:0; z-index:9999; pointer-events:none; will-change:transform;}

.sc-halo, .sc-core, .sc-sat{visibility:hidden;}
body.cursor-visible .sc-halo,
body.cursor-visible .sc-core,
body.cursor-visible .sc-sat{visibility:visible;}

.sc-halo{
  position:fixed; top:0; left:0; width:72px; height:72px;
  border-radius:50%; border:1.5px solid rgba(62,180,137,.4); pointer-events:none; z-index:2147483644;
  transform:translate(-50%,-50%); will-change:transform;
  transition:width .35s cubic-bezier(.2,.8,.3,1), height .35s cubic-bezier(.2,.8,.3,1),
             border-color .3s ease, opacity .3s ease, box-shadow .3s ease;
  box-shadow:0 0 22px rgba(62,180,137,.18);
}
/* The idle swarm (satellites orbiting at up to ~27px from center) needs the larger
   72px ring above to stay fully inside it. On hover the satellites pull in tight
   (see main.js baseRadius), so the ring shrinks to match instead of floating loose
   around a much smaller cluster. */
.sc-halo.active{width:42px; height:42px; border-color:rgba(31,122,92,.55); box-shadow:0 0 28px rgba(62,180,137,.3);}
.sc-halo.pulse{animation:scHaloPulse .4s cubic-bezier(.15,.7,.3,1);}
@keyframes scHaloPulse{
  0%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.35); opacity:.4; }
  100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
}

.sc-core{
  position:fixed; top:0; left:0; width:13px; height:13px; background:var(--charcoal);
  border-radius:4px; transform:translate(-50%,-50%) rotate(0deg); pointer-events:none; z-index:2147483646;
  display:flex; align-items:center; justify-content:center;
  transition:width .22s cubic-bezier(.2,.8,.3,1), height .22s cubic-bezier(.2,.8,.3,1), padding .22s cubic-bezier(.2,.8,.3,1),
             border-radius .22s ease, background .22s ease, box-shadow .22s ease;
  will-change:transform;
  box-shadow:0 0 14px rgba(26,26,26,.25);
}
.sc-core-dot{
  width:4px; height:4px; border-radius:50%; background:var(--mint-bright);
  transition:opacity .15s ease, transform .15s ease;
}
.sc-core-label{
  display:none; white-space:nowrap; font-family:var(--font-mono); font-size:.72rem;
  font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--white);
}
.sc-core.active{width:24px; height:24px; border-radius:8px; background:var(--mint-deep); box-shadow:0 0 24px rgba(31,122,92,.45);}

/* Label mode: the core morphs from a small dot into a text pill (e.g. "Read", "View") —
   the same trick used across the Awwwards hover/cursor collection for card and link hovers. */
.sc-core.label-mode{
  width:auto; height:auto; padding:11px 20px; border-radius:999px;
  background:var(--charcoal); box-shadow:0 10px 28px -6px rgba(26,26,26,.4);
}
.sc-core.label-mode .sc-core-dot{display:none;}
.sc-core.label-mode .sc-core-label{display:block;}
.sc-halo.label-mode{opacity:0;}

.sc-sat{
  position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:2147483645;
  background:var(--mint); will-change:transform, opacity;
}
.sc-sat-1{width:7px; height:7px; opacity:.95; box-shadow:0 0 8px rgba(62,180,137,.6);}
.sc-sat-2{width:6px; height:6px; opacity:.75; background:var(--gold); box-shadow:0 0 8px rgba(201,154,62,.5);}
.sc-sat-3{width:5px; height:5px; opacity:.55; background:var(--mint-deep);}

.sc-burst{
  position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%; background:var(--mint);
  pointer-events:none; z-index:2147483643; transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(62,180,137,.5);
  animation:scBurst .65s cubic-bezier(.15,.7,.3,1) forwards;
}
.sc-burst.gold{background:var(--gold); box-shadow:0 0 10px rgba(201,154,62,.5);}
.sc-burst.deep{background:var(--mint-deep); box-shadow:0 0 10px rgba(31,122,92,.5);}
@keyframes scBurst{
  to{ transform:translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(0); opacity:0; }
}

/* Fully replace the OS cursor everywhere while the custom one is active — a narrower
   selector here (e.g. just "a, button") is what let the native arrow show through on
   inputs, selects, summary elements and anything else with its own cursor:pointer. */
/* The native pointer is hidden while the swarm cursor is on, so the swarm cursor must sit
   above everything -- the share sheet (9999) was drawn over it, leaving no pointer at all
   over the window while clicks still landed. Its layers use the top of the z-index range. */
body.has-custom-cursor, body.has-custom-cursor *{cursor:none !important;}

/* ---------- BACK TO TOP ---------- */
.back-to-top{
  position:fixed; right:28px; bottom:calc(28px + var(--influ-action-bar, 0px)); z-index:200;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,0.85); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  color:var(--charcoal); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -4px rgba(26,26,26,.22), 0 2px 8px rgba(26,26,26,.12);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.back-to-top.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.back-to-top:hover{background:var(--mint-deep); color:var(--white); border-color:var(--mint-deep); box-shadow:0 14px 32px -8px rgba(31,122,92,.45), 0 4px 12px rgba(31,122,92,.25); transform:translateY(-3px) scale(1.05);}
.back-to-top:active{transform:translateY(0) scale(.97);}
@media (max-width:600px){
  .back-to-top{right:16px; bottom:calc(16px + var(--influ-action-bar, 0px)); width:44px; height:44px;}
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{transition:opacity .2s ease;}
}

/* ---------- SECTION SHELL ---------- */
section{padding:96px 0; position:relative;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head .eyebrow{margin-bottom:14px; display:block;}
.section-head p.lede{margin-top:16px; color:var(--ink-soft); font-size:1.02rem;}
.band{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.band-tint{background:var(--mint-tint);}

/* ---------- PAGE HEADER (subpages) ---------- */
.page-header{padding:74px 0 64px; position:relative; overflow:hidden;}
.page-header .wrap{position:relative; z-index:1;}
.page-header h1{margin-top:14px;}
.page-header .sub{margin-top:18px; color:var(--ink-soft); font-size:1.05rem; max-width:56ch;}
.breadcrumb{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);}
.breadcrumb a{text-decoration:none; color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--mint-deep);}
.breadcrumb .sep{margin:0 8px; opacity:.5;}

/* JS-driven tilt (see main.js) sets `transform` inline every mousemove frame for cards
   matching .card/.blog-card/.price-card — dropping `transform` from the transition list
   while `.tilting` is active keeps it instantly responsive; removing the class on
   mouseleave restores the base transition so the reset-to-rest snaps back smoothly. */
.card.tilting, .blog-card.tilting, .price-card.tilting{transition:box-shadow .25s ease, border-color .25s ease;}

/* ---------- CARDS ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:860px){ .card-grid{grid-template-columns:1fr;} }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(26,26,26,.08); border-color:var(--mint);}
.card .tag{font-family:var(--font-mono); font-size:.72rem; color:var(--mint-deep); text-transform:uppercase; letter-spacing:.1em;}
.card h3{margin-top:14px;}
.card p{margin-top:12px; color:var(--ink-soft); font-size:.95rem;}

/* ---------- STEPS ---------- */
.steps{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.step{
  display:grid; grid-template-columns:64px 1fr; gap:24px;
  padding:30px 0; border-bottom:1px solid var(--line);
  transition:background .25s ease;
}
.step:hover{background:linear-gradient(90deg, var(--mint-tint), transparent 60%);}
.step-num{font-family:var(--font-mono); font-size:1.4rem; color:var(--line); font-weight:600; transition:color .25s ease;}
.step:hover .step-num{color:var(--mint);}
.step h3{margin-bottom:6px;}
.step p{color:var(--ink-soft); font-size:.96rem; max-width:60ch;}

/* The hero's two columns lived in an inline style, which no media query can override, so on
   a phone the headline was squeezed beside the swarm graphic. On narrow screens the graphic
   goes under the copy. */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-grid .swarm-field{max-width:340px;}
}

/* ---------- SWARM VISUAL ---------- */
.swarm-field{
  position:relative; aspect-ratio:1/1; width:100%; max-width:460px; justify-self:center;
  background:var(--white); border:1px solid var(--line); border-radius:28px;
  overflow:hidden;
}
.swarm-field::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, var(--mint-tint), transparent 68%);
}
.node-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%; background:var(--charcoal);
  display:flex; align-items:center; justify-content:center; z-index:5;
  box-shadow:0 12px 30px rgba(26,26,26,.25);
  transition:transform .3s ease;
}
.swarm-field:hover .node-center{transform:translate(-50%,-50%) scale(1.06);}
.node-center span{font-family:var(--font-mono); color:var(--white); font-size:.62rem; text-align:center; line-height:1.25; letter-spacing:.02em;}
.dot{
  position:absolute; border-radius:50%; background:var(--mint);
  animation:drift var(--dur,7s) ease-in-out infinite;
  animation-delay:var(--del,0s);
  cursor:default;
  transition:transform .2s ease;
}
.dot.deep{background:var(--mint-deep);}
.dot.gold{background:var(--gold);}
.dot:hover{transform:scale(1.5);}
@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(var(--dx,10px), var(--dy,-12px)) scale(1.08); }
}
.dot[data-label]:hover::after, .dot[data-label]:focus-visible::after{
  content:attr(data-label);
  position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
  background:var(--charcoal); color:var(--white); font-family:var(--font-mono);
  font-size:.68rem; padding:6px 10px; border-radius:8px; white-space:nowrap; z-index:10;
}

/* ---------- SWARM MATH ---------- */
.math-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
@media (max-width:860px){ .math-wrap{grid-template-columns:1fr;} }
.calc-box{
  background:var(--charcoal); border-radius:20px; padding:36px 32px; color:var(--white);
  position:relative; overflow:hidden;
}
.calc-box label{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#9FD9C0; display:block; margin-bottom:14px;}
.calc-box input[type="range"]{width:100%; accent-color:var(--mint);}
.budget-row{display:flex; justify-content:space-between; align-items:baseline; margin-top:6px;}
.budget-row .val{font-family:var(--font-mono); font-size:1.5rem; font-weight:600;}
.calc-result{margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.15);}
.calc-result .big{font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--mint); transition:transform .15s ease;}
.calc-result .lbl{font-family:var(--font-mono); font-size:.78rem; color:#B9C9C1; margin-top:4px;}
.calc-note{font-size:.78rem; color:#93A39B; margin-top:18px; font-family:var(--font-mono);}

.versus{display:flex; flex-direction:column; gap:16px;}
.versus-row{display:flex; align-items:center; gap:16px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--white);}
.versus-row .label{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); width:96px; flex-shrink:0;}
.versus-row .bar-track{flex:1; height:10px; background:var(--mint-tint); border-radius:6px; overflow:hidden;}
.versus-row .bar-fill{height:100%; background:var(--mint); width:0; transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
.versus-row.solo .bar-fill{width:12%; background:var(--charcoal);}
.versus-row .amount{font-family:var(--font-mono); font-size:.85rem; font-weight:600; width:64px; text-align:right;}

/* ---------- TRUST ---------- */
.trust-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media (max-width:860px){ .trust-grid{grid-template-columns:1fr;} }
.trust-item{display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line);}
.trust-icon{
  width:38px; height:38px; border-radius:10px; background:var(--mint-tint);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .25s ease, transform .25s ease;
}
.trust-item:hover .trust-icon{background:var(--mint); transform:rotate(-8deg);}
.trust-icon .dotmark{width:9px; height:9px; border-radius:50%; background:var(--mint-deep); transition:background .25s ease;}
.trust-item:hover .trust-icon .dotmark{background:var(--white);}
.trust-item h3{font-size:1.02rem;}
.trust-item p{color:var(--ink-soft); font-size:.9rem; margin-top:6px;}

/* ---------- PLATFORMS ---------- */
.platform-row{display:flex; flex-wrap:wrap; gap:14px;}
.platform-pill{
  font-family:var(--font-mono); font-size:.85rem; padding:12px 22px; border-radius:999px;
  border:1px solid var(--line); background:var(--white); color:var(--ink);
  transition:transform .2s ease, border-color .2s ease, color .2s ease;
}
.platform-pill:hover{transform:translateY(-3px); border-color:var(--mint); color:var(--mint-deep);}

/* ---------- PRICING ---------- */
.pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media (max-width:860px){ .pricing-grid{grid-template-columns:1fr;} }
.price-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px; transition:transform .25s ease, box-shadow .25s ease;}
.price-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(26,26,26,.08);}
.price-card .who{font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mint-deep);}
.price-card .headline{font-family:var(--font-display); font-size:1.7rem; font-weight:700; margin-top:10px;}
.price-card ul{margin:18px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.price-card li{font-size:.92rem; color:var(--ink-soft); padding-left:20px; position:relative;}
.price-card li::before{content:"—"; position:absolute; left:0; color:var(--mint-deep);}

.ledger{
  margin-top:56px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 34px; max-width:480px;
}
.ledger .row{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.9rem; padding:8px 0;}
.ledger .row.total{border-top:1px dashed var(--line); margin-top:6px; padding-top:14px; font-weight:600; color:var(--charcoal);}
.ledger .row.receive{color:var(--mint-deep); font-weight:600;}

/* ---------- CREATORS BAND ---------- */
.creator-band{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;}
@media (max-width:760px){ .creator-band{grid-template-columns:1fr;} }
.creator-band p{color:var(--ink-soft); margin-top:14px; max-width:58ch;}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--line); padding:20px 0;}
summary{
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--charcoal);
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-family:var(--font-mono); font-size:1.2rem; color:var(--mint-deep); flex-shrink:0; transition:transform .25s ease;}
details[open] summary::after{content:"–";}
details p{margin-top:14px; color:var(--ink-soft); font-size:.95rem; max-width:64ch;}

/* ---------- FINAL CTA ---------- */
.final-cta{
  background:var(--charcoal); border-radius:28px; padding:64px 48px; text-align:center;
  position:relative; overflow:hidden;
}
.final-cta h2{color:var(--white); position:relative; z-index:1;}
.final-cta p{color:#B9C9C1; margin-top:14px; font-size:1.02rem; position:relative; z-index:1;}
.final-cta .hero-ctas{justify-content:center; margin-top:30px; position:relative; z-index:1;}
.final-cta .btn-ghost{color:var(--white); border-color:rgba(255,255,255,0.3);}
.final-cta .btn-ghost:hover{border-color:var(--mint); color:var(--mint);}
.final-cta .btn-primary{background:var(--mint);}
.final-cta .btn-primary:hover{background:var(--mint-deep);}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px;}

/* ---------- FOOTER ---------- */
footer{padding:64px 0 36px; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px;}
@media (max-width:1080px){ .footer-grid{grid-template-columns:repeat(3,1fr);} .footer-grid > div:first-child{grid-column:1 / -1;} }
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer-grid h4{font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:16px; font-weight:500;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-grid a{text-decoration:none; font-size:.92rem; color:var(--ink); transition:color .2s ease, padding-left .2s ease;}
.footer-grid a:hover{color:var(--mint-deep); padding-left:4px;}
.footer-bottom{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.8rem; color:var(--ink-soft); font-family:var(--font-mono);
}
.footer-bottom a{text-decoration:underline; text-underline-offset:2px;}
.footer-bottom a:hover{color:var(--mint-deep);}

/* ---------- FORMS ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.field input, .field textarea, .field select{
  font-family:var(--font-body); font-size:.96rem; padding:13px 16px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--white); color:var(--charcoal);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--mint); outline:none; box-shadow:0 0 0 4px var(--mint-tint);
}
.field textarea{resize:vertical; min-height:120px;}
.form-card{background:var(--white); border:1px solid var(--line); border-radius:20px; padding:40px; max-width:640px;}
.form-note{font-size:.82rem; color:var(--ink-soft); margin-top:16px;}
.success-msg{
  display:none; background:var(--mint-tint); border:1px solid var(--mint); border-radius:12px;
  padding:20px 22px; margin-top:20px; font-size:.92rem; color:var(--mint-deep); font-weight:600;
}
.success-msg.show{display:block; animation:popIn .4s cubic-bezier(.2,.8,.3,1);}
@keyframes popIn{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- ROLE TABS (get-started) ---------- */
.role-tabs{display:inline-flex; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:5px; gap:4px;}
.role-tab{
  font-family:var(--font-display); font-weight:600; font-size:.92rem; padding:11px 24px; border-radius:999px;
  border:none; background:transparent; color:var(--ink-soft); cursor:pointer; transition:background .25s ease, color .25s ease;
}
.role-tab.active{background:var(--charcoal); color:var(--white);}
.role-panel{display:none;}
.role-panel.active{display:block; animation:popIn .35s ease;}

/* ---------- SIMPLE CONTENT PAGES (about/terms/privacy) ---------- */
.prose{max-width:760px;}
.prose h2{margin-top:44px; margin-bottom:16px;}
.prose h2:first-child{margin-top:0;}
.prose p{color:var(--ink-soft); margin-bottom:16px; font-size:.98rem;}
.prose ul{color:var(--ink-soft); font-size:.98rem; padding-left:22px; margin-bottom:16px;}
.prose li{margin-bottom:8px;}
.prose strong{color:var(--charcoal);}
.legal-note{
  background:var(--mint-tint); border:1px solid var(--mint); border-radius:12px; padding:18px 22px;
  font-size:.88rem; color:var(--mint-deep); margin-bottom:40px; max-width:760px;
}
.value-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media (max-width:760px){ .value-grid{grid-template-columns:1fr;} }
.team-badge{
  display:inline-flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--line);
  border-radius:999px; padding:10px 20px 10px 10px; margin-top:10px;
}
.team-badge .dot-icon{width:28px; height:28px; border-radius:50%; background:var(--charcoal); display:flex; align-items:center; justify-content:center;}
.team-badge .dot-icon span{width:8px; height:8px; border-radius:50%; background:var(--mint);}
.team-badge span.txt{font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft);}

/* ---------- BLOG LISTING ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:960px){ .blog-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{
  display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.blog-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(26,26,26,.1); border-color:var(--mint);}
.blog-card-cover{
  height:150px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.blog-card-cover .cover-mark{font-family:var(--font-display); font-weight:700; font-size:2.2rem; color:rgba(255,255,255,.9); position:relative; z-index:1;}
.blog-card-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.blog-card .cat{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mint-deep);}
.blog-card h3{font-size:1.08rem; line-height:1.35;}
.blog-card p{color:var(--ink-soft); font-size:.88rem; line-height:1.5;}
.blog-card .meta{margin-top:auto; padding-top:8px; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); display:flex; gap:10px;}

.cover-a{background:linear-gradient(135deg, var(--mint), var(--mint-deep));}
.cover-b{background:linear-gradient(135deg, var(--charcoal), #34413c);}
.cover-c{background:linear-gradient(135deg, var(--gold), #a97c2c);}
.cover-d{background:linear-gradient(135deg, var(--mint-deep), var(--charcoal));}

/* ---------- BLOG ARTICLE ---------- */
.article-header{padding:56px 0 8px;}
.article-meta-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:18px; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);}
.article-meta-row .cat-pill{
  background:var(--mint-tint); color:var(--mint-deep); padding:5px 12px; border-radius:999px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.7rem;
}
.article-cover{
  margin-top:32px; height:220px; border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.article-cover .cover-mark{font-family:var(--font-display); font-weight:700; font-size:3rem; color:rgba(255,255,255,.92); position:relative; z-index:1;}
@media (max-width:640px){ .article-cover{height:160px;} .article-cover .cover-mark{font-size:2.1rem;} }

.tip-box{
  background:var(--mint-tint); border-left:4px solid var(--mint); border-radius:0 12px 12px 0;
  padding:20px 24px; margin:28px 0; max-width:760px;
}
.tip-box .tip-label{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mint-deep); font-weight:600; margin-bottom:8px; display:block;}
.tip-box p{color:var(--ink); font-size:.94rem; margin:0;}

.article-cta{
  max-width:760px; background:var(--charcoal); border-radius:18px; padding:32px 34px; margin:44px 0 8px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.article-cta h3{color:var(--white); font-size:1.15rem;}
.article-cta p{color:#B9C9C1; font-size:.88rem; margin-top:6px;}

.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px;}
@media (max-width:760px){ .related-grid{grid-template-columns:1fr;} }
.related-card{
  display:block; text-decoration:none; color:inherit; padding:18px 20px; border:1px solid var(--line);
  border-radius:12px; background:var(--white); transition:border-color .2s ease, transform .2s ease;
}
.related-card:hover{border-color:var(--mint); transform:translateY(-3px);}
.related-card .cat{font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; color:var(--mint-deep); letter-spacing:.06em;}
.related-card h4{font-family:var(--font-display); font-size:.94rem; margin-top:8px; color:var(--charcoal); line-height:1.4;}

/* ------------------------------------------------------------ link previews
   A link that can be previewed wears a dotted underline, so a reader learns there is more
   behind it before they hover; on hover it firms up and the card follows. */
.prose a.has-preview{
  color:var(--mint-deep); text-decoration:underline dotted; text-decoration-thickness:1.5px;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--mint-deep) 55%, transparent);
  border-radius:4px; transition:background var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.prose a.has-preview:hover, .prose a.has-preview[aria-describedby]{
  text-decoration-style:solid; text-decoration-color:var(--mint-deep);
  background:color-mix(in srgb, var(--mint) 16%, transparent);
}
.lp-card{
  position:absolute; z-index:9500; display:flex; flex-direction:column; width:340px; max-width:calc(100vw - 24px);
  background:var(--white); color:inherit; text-decoration:none; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 48px -20px rgba(26,26,26,.34), 0 2px 6px rgba(26,26,26,.06); overflow:visible;
}
.lp-card[hidden]{display:none !important;}
/* The notch that points at the link. */
.lp-card::before{
  content:''; position:absolute; top:-7px; left:var(--lp-arrow, 36px); width:12px; height:12px; margin-left:-6px;
  background:var(--white); border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg);
}
.lp-card.is-above::before{top:auto; bottom:-7px; transform:rotate(225deg);}
/* Below the link, the notch sits on the article's cover, so it takes the cover's colour. */
.lp-card.lp-cover-a:not(.is-above)::before{background:var(--mint); border-color:transparent;}
.lp-card.lp-cover-b:not(.is-above)::before{background:var(--charcoal); border-color:transparent;}
.lp-card.lp-cover-c:not(.is-above)::before{background:var(--gold); border-color:transparent;}
.lp-card.lp-cover-d:not(.is-above)::before{background:var(--mint-deep); border-color:transparent;}
.lp-card.is-in{animation:lpIn .16s cubic-bezier(.2,.8,.2,1);}
@keyframes lpIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.lp-card.is-above.is-in{animation-name:lpInUp;}
@keyframes lpInUp{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
.lp-cover{
  display:flex; align-items:flex-end; height:74px; padding:10px 14px; border-radius:15px 15px 0 0;
  position:relative; overflow:hidden;
}
.lp-cover .cover-mark{font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:rgba(255,255,255,.92); letter-spacing:.02em;}
.lp-person{display:flex; padding:16px 16px 0;}
.lp-person img, .lp-initials{width:52px; height:52px; border-radius:14px; object-fit:cover;}
.lp-initials{display:flex; align-items:center; justify-content:center; background:var(--mint-tint); color:var(--mint-deep); font-weight:700;}
.lp-body{display:flex; flex-direction:column; gap:5px; padding:14px 16px 15px;}
.lp-label{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--mint-deep);}
.lp-meta{color:var(--ink-soft); text-transform:none; letter-spacing:0;}
.lp-title{font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.3; color:var(--charcoal);}
.lp-excerpt{
  font-size:.84rem; line-height:1.5; color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.lp-action{margin-top:4px; font-size:.8rem; font-weight:600; color:var(--mint-deep);}
.lp-card:hover .lp-action{text-decoration:underline; text-underline-offset:3px;}
@media (prefers-reduced-motion:reduce){ .lp-card.is-in{animation:none;} .prose a.has-preview{transition:none;} }

.byline{display:flex; align-items:center; gap:12px; margin-top:20px;}
.byline .avatar{width:36px; height:36px; border-radius:50%; background:var(--charcoal); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.byline .avatar span{width:8px; height:8px; border-radius:50%; background:var(--mint);}
.byline .who{font-size:.85rem; color:var(--ink-soft);}
.byline .who strong{color:var(--charcoal); display:block; font-size:.9rem;}

.prose h2{scroll-margin-top:100px;}
.prose blockquote{
  border-left:3px solid var(--mint); margin:24px 0; padding:4px 0 4px 20px; font-style:italic; color:var(--ink); font-size:1.02rem;
}
.prose table{width:100%; border-collapse:collapse; margin:20px 0; font-size:.9rem;}
/* A comparison table scrolls sideways inside its own frame on a phone, instead of pushing
   the page wider than the screen. */
.table-wrap{overflow-x:auto; margin:20px 0 24px; border:1px solid var(--line); border-radius:14px; background:var(--white);}
.table-wrap table{margin:0; min-width:560px;}
.table-wrap tr:last-child td{border-bottom:0;}
.prose td.win{color:var(--mint-deep); font-weight:600;}
.prose ol{color:var(--ink-soft); font-size:.98rem; padding-left:22px; margin-bottom:16px;}
.prose ol li, .prose ul li{margin-bottom:6px;}
.verdict-box{border:1px solid var(--mint); background:var(--mint-tint); border-radius:16px; padding:18px 20px; margin:24px 0 28px;}
.verdict-box .verdict-label{display:block; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mint-deep); font-weight:600; margin-bottom:8px;}
.verdict-box p{color:var(--ink); font-size:.98rem; margin:0;}
.prose ul.check-list{list-style:none; padding-left:0;}
.prose ul.check-list li{position:relative; padding-left:28px;}
.prose ul.check-list li::before{content:'\2713'; position:absolute; left:2px; top:0; color:var(--mint-deep); font-weight:700;}
.prose th, .prose td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);}
.prose th{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; color:var(--ink-soft); letter-spacing:.05em;}

/* ---------- ONBOARDING WIZARD ---------- */
.onboard-grid{display:grid; grid-template-columns:1fr .8fr; gap:44px; align-items:start;}
@media (max-width:960px){ .onboard-grid{grid-template-columns:1fr;} }

.stepper{display:flex; align-items:center; margin-bottom:44px; max-width:560px;}
.stepper-item{display:flex; align-items:center; flex:1;}
.stepper-item:last-child{flex:0;}
.stepper-circle{
  width:34px; height:34px; border-radius:50%; background:var(--white); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.82rem; font-weight:600;
  color:var(--ink-soft); flex-shrink:0; transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.stepper-label{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); margin-left:10px; white-space:nowrap; display:none;}
@media (min-width:720px){ .stepper-label{display:block;} }
.stepper-line{flex:1; height:1.5px; background:var(--line); margin:0 10px; transition:background .3s ease;}
.stepper-item.done .stepper-circle{background:var(--mint); border-color:var(--mint); color:var(--white);}
.stepper-item.done .stepper-label{color:var(--mint-deep);}
.stepper-item.done + .stepper-line{background:var(--mint);}
.stepper-item.active .stepper-circle{border-color:var(--mint-deep); color:var(--mint-deep); background:var(--mint-tint);}
.stepper-item.active .stepper-label{color:var(--charcoal); font-weight:600;}

.step-panel{display:none;}
.step-panel.active{display:block; animation:popIn .35s ease;}

.platform-toggle-row{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px;}
.platform-toggle{
  display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--white); cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--ink-soft);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.platform-toggle .swatch svg, .platform-block .pb-head .swatch svg, .preview-platform-row .swatch svg{width:58%; height:58%; display:block;}
.platform-toggle .swatch{width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--line); color:var(--charcoal); flex-shrink:0;}
.platform-toggle.selected{border-color:var(--mint-deep); background:var(--mint-tint); color:var(--charcoal);}
.platform-toggle .check{margin-left:2px; opacity:0; font-size:.8rem; color:var(--mint-deep); transition:opacity .2s ease;}
.platform-toggle.selected .check{opacity:1;}

.platform-block{
  border:1.5px solid var(--line); border-radius:14px; padding:22px 22px 8px; margin-bottom:18px; position:relative; background:var(--white);
}
.platform-block .pb-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.platform-block .pb-head .swatch{width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--line); color:var(--charcoal);}
.platform-block .pb-head h4{font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--charcoal);}
.platform-block .pb-remove{
  margin-left:auto; background:none; border:none; color:var(--ink-soft); font-family:var(--font-mono); font-size:.78rem;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.platform-block .pb-remove:hover{color:var(--coral);}
.empty-platform-note{
  border:1.5px dashed var(--line); border-radius:14px; padding:28px; text-align:center; color:var(--ink-soft); font-size:.9rem;
}

.wizard-nav{display:flex; justify-content:space-between; align-items:center; margin-top:28px; gap:14px;}
.wizard-nav .spacer{flex:1;}

/* live preview card */
.preview-card{
  position:sticky; top:100px; background:var(--white); border:1px solid var(--line); border-radius:20px; overflow:hidden;
}
.preview-card-top{background:linear-gradient(135deg, var(--mint), var(--mint-deep)); padding:28px 24px 40px; position:relative;}
.preview-avatar{
  width:56px; height:56px; border-radius:16px; background:var(--white); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--mint-deep); box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.preview-card-body{padding:20px 24px 26px; margin-top:-18px;}
.preview-name{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--charcoal); background:var(--white); display:inline-block;}
.preview-cat{font-family:var(--font-mono); font-size:.72rem; color:var(--mint-deep); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;}
.preview-loc{font-size:.82rem; color:var(--ink-soft); margin-top:4px;}
.preview-bio{font-size:.86rem; color:var(--ink-soft); margin-top:14px; line-height:1.5;}
.preview-platforms{margin-top:18px; display:flex; flex-direction:column; gap:10px;}
.preview-platform-row{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--paper); border-radius:10px; font-size:.82rem;}
.preview-platform-row .swatch{width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; background:var(--white); border:1px solid var(--line); color:var(--charcoal); flex-shrink:0;}
.preview-platform-row .pinfo{flex:1; min-width:0; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.preview-platform-row .pprice{font-family:var(--font-mono); color:var(--mint-deep); font-weight:600; flex-shrink:0;}
.preview-empty{color:var(--ink-soft); font-size:.84rem; text-align:center; padding:20px 0;}

.review-summary{border:1px solid var(--line); border-radius:16px; padding:8px 26px; margin-bottom:24px;}
.review-row{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:.9rem;}
.review-row:last-child{border-bottom:none;}
.review-row .rlabel{color:var(--ink-soft); font-family:var(--font-mono); font-size:.78rem;}
.review-row .rval{color:var(--charcoal); font-weight:600; text-align:right;}

.check-row{display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--ink-soft); margin:20px 0;}
.check-row input{margin-top:3px;}

.confirm-wrap{text-align:center; padding:40px 20px;}
.confirm-icon{
  width:72px; height:72px; border-radius:50%; background:var(--mint-tint); display:flex; align-items:center; justify-content:center;
  margin:0 auto 24px; font-size:1.8rem;
}
.confirm-steps{max-width:480px; margin:32px auto 0; text-align:left; display:flex; flex-direction:column; gap:16px;}
.confirm-steps .cs-row{display:flex; gap:14px; align-items:flex-start;}
.confirm-steps .cs-num{width:24px; height:24px; border-radius:50%; background:var(--charcoal); color:var(--white); font-family:var(--font-mono); font-size:.72rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.confirm-steps p{color:var(--ink-soft); font-size:.9rem; margin:0;}
.confirm-steps strong{color:var(--charcoal); display:block; font-size:.92rem; margin-bottom:2px;}

/* ---------- BROWSE: FILTER BAR ---------- */
.browse-layout{display:grid; grid-template-columns:260px 1fr; gap:36px; align-items:start;}
@media (max-width:900px){ .browse-layout{grid-template-columns:1fr;} }

.filter-panel{
  background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px;
  position:sticky; top:96px;
}
@media (max-width:900px){ .filter-panel{position:static;} }
.filter-panel h3{font-size:1rem; margin-bottom:16px;}
.filter-group{margin-bottom:22px;}
.filter-group:last-child{margin-bottom:0;}
.filter-group label{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); display:block; margin-bottom:8px;}
.filter-group select, .filter-group input[type="text"]{
  width:100%; font-family:var(--font-body); font-size:.9rem; padding:11px 14px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--white); color:var(--charcoal);
}
.filter-group select:focus, .filter-group input:focus{border-color:var(--mint); outline:none; box-shadow:0 0 0 4px var(--mint-tint);}
.filter-chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.filter-chip{
  display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--white); font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft); cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.filter-chip .sw{width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center;}
.filter-chip.selected{border-color:var(--mint-deep); background:var(--mint-tint); color:var(--charcoal);}
.filter-price-val{font-family:var(--font-mono); font-size:.85rem; color:var(--mint-deep); font-weight:600; margin-top:6px;}
.filter-clear{width:100%; text-align:center; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); background:none; border:1px dashed var(--line); border-radius:10px; padding:10px; cursor:pointer; margin-top:4px;}
.filter-clear:hover{border-color:var(--coral); color:var(--coral);}

.browse-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:22px;}
.browse-toolbar .search-box{flex:1; min-width:200px; position:relative;}
.browse-toolbar .search-box input{
  width:100%; font-family:var(--font-body); font-size:.92rem; padding:12px 16px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--white);
}
.browse-toolbar .search-box input:focus{border-color:var(--mint); outline:none; box-shadow:0 0 0 4px var(--mint-tint);}
.browse-toolbar .sort-select{font-family:var(--font-mono); font-size:.82rem; padding:11px 14px; border-radius:10px; border:1.5px solid var(--line); background:var(--white); color:var(--ink);}
.results-count{font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); margin-bottom:16px;}
.mobile-filter-toggle{display:none; margin-bottom:16px;}
@media (max-width:900px){ .mobile-filter-toggle{display:inline-flex;} .filter-panel{display:none;} .filter-panel.open{display:block;} }

/* ---------- BROWSE: CREATOR GRID ---------- */
.creator-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:1080px){ .creator-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .creator-grid{grid-template-columns:1fr;} }

.creator-card{
  background:var(--white); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.creator-card:hover{transform:translateY(-5px); box-shadow:0 18px 36px rgba(26,26,26,.09); border-color:var(--mint);}
.cc-top{padding:20px 20px 0; display:flex; gap:14px; align-items:flex-start;}
.cc-avatar{
  width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg, var(--mint), var(--mint-deep));
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--white); font-size:1.05rem; flex-shrink:0;
}
.cc-name{font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--charcoal);}
.cc-cat{font-family:var(--font-mono); font-size:.7rem; color:var(--mint-deep); text-transform:uppercase; letter-spacing:.05em; margin-top:2px;}
.cc-loc{font-size:.78rem; color:var(--ink-soft); margin-top:2px;}
.cc-rating{display:flex; align-items:center; gap:5px; margin-top:10px; font-size:.8rem; color:var(--ink-soft);}
.cc-rating .stars{color:var(--gold); letter-spacing:1px; font-size:.78rem;}
.cc-platforms{display:flex; gap:6px; padding:14px 20px 0;}
.cc-platforms .sw{width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;}
.cc-bottom{margin-top:auto; padding:16px 20px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); margin-top:16px; padding-top:14px;}
.cc-price{font-family:var(--font-mono); font-size:.82rem; color:var(--charcoal);}
.cc-price strong{color:var(--mint-deep); font-size:.95rem;}
.cc-actions{display:flex; gap:8px; padding:0 20px 20px;}
.cc-actions .btn{flex:1; padding:10px 14px; font-size:.82rem; justify-content:center;}
.cc-add.added{background:var(--mint-deep); color:var(--white);}

/* Platform badges carry the real logo glyph (see Influ_Creator_CPT::platform_icons)
   on a neutral chip -- black marks on light, matching the onboarding wizard. */
.sw{background:var(--paper); border:1px solid var(--line); color:var(--charcoal); flex-shrink:0;}
.sw svg{width:60%; height:60%; display:block;}
.tiktok-sw, .instagram-sw, .youtube-sw, .facebook-sw{background:var(--paper); color:var(--charcoal);}

.empty-results{text-align:center; padding:70px 20px; color:var(--ink-soft);}
.empty-results h3{color:var(--charcoal); margin-bottom:10px;}

/* ---------- SWARM BAR & DRAWER ---------- */
.swarm-bar{
  /* --influ-action-bar is the height of a docked .sticky-action-bar (main.js), so the swarm
     bar sits above "Message / Add to swarm" instead of on top of them. */
  position:fixed; left:50%; bottom:calc(24px + var(--influ-action-bar, 0px)); z-index:150;
  background:var(--charcoal); color:var(--white); border-radius:999px; padding:14px 14px 14px 22px;
  display:flex; align-items:center; gap:16px; box-shadow:0 16px 40px rgba(0,0,0,.25);
  /* Hidden means gone: translating by 120% of its own height left a dark sliver showing
     at the bottom of short screens. */
  transform:translate(-50%, calc(100% + 48px + var(--influ-action-bar, 0px))); visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), visibility 0s linear .35s;
}
.swarm-bar.show{transform:translate(-50%, 0); visibility:visible; transition:transform .35s cubic-bezier(.2,.8,.3,1), visibility 0s;}
.swarm-bar .sb-count{font-family:var(--font-mono); font-size:.85rem;}
.swarm-bar .sb-count strong{color:var(--mint);}
.swarm-bar button{white-space:nowrap;}

.swarm-drawer-overlay{
  position:fixed; inset:0; background:rgba(26,26,26,.4); z-index:200; display:none; align-items:flex-end; justify-content:center;
}
.swarm-drawer-overlay.open{display:flex;}
.swarm-drawer{
  background:var(--white); width:100%; max-width:560px; border-radius:20px 20px 0 0; padding:28px 26px 30px;
  max-height:78vh; overflow-y:auto; animation:drawerUp .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes drawerUp{ from{ transform:translateY(30px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.swarm-drawer h3{font-size:1.2rem;}
.swarm-drawer .sd-close{float:right; background:none; border:none; font-size:1.3rem; color:var(--ink-soft); cursor:pointer;}
.swarm-item{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.swarm-item .cc-avatar{width:38px; height:38px; font-size:.85rem; border-radius:10px;}
.swarm-item .si-info{flex:1;}
.swarm-item .si-name{font-family:var(--font-display); font-weight:600; font-size:.9rem;}
.swarm-item .si-price{font-family:var(--font-mono); font-size:.78rem; color:var(--mint-deep);}
.swarm-item .si-remove{background:none; border:none; color:var(--ink-soft); text-decoration:underline; font-size:.78rem; cursor:pointer; font-family:var(--font-mono);}
.swarm-item .si-remove:hover{color:var(--coral);}
.swarm-item .si-meta{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); margin-top:2px;}
.swarm-item .sw{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;}
.swarm-drawer-total{display:flex; justify-content:space-between; padding:10px 0 4px; font-family:var(--font-mono); font-size:.86rem; color:var(--ink-soft);}
.swarm-drawer-total.is-grand{padding-top:12px; margin-top:6px; border-top:1px solid var(--line); font-size:1rem; font-weight:600; color:var(--charcoal);}
.swarm-drawer-note{font-size:.8rem; color:var(--ink-soft); background:var(--mint-tint); border-radius:10px; padding:12px 14px; margin-top:14px;}
.sd-empty{color:var(--ink-soft); font-size:.9rem; padding:24px 0;}
.sd-cart-link{display:block; text-align:center; margin-top:12px; font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft); text-decoration:none;}
.sd-cart-link:hover{color:var(--mint-deep);}
#swarm-checkout.is-disabled{pointer-events:none; opacity:.45;}

/* Creator grouping -- one block per creator, their packages beneath. Shared by the
   drawer and the /cart page so both read the same way. */
.swarm-group{border:1px solid var(--line); border-radius:14px; padding:4px 16px 6px; margin-bottom:14px; background:var(--white);}
.swarm-group.is-unavailable{opacity:.55;}
.sg-head{display:flex; align-items:center; gap:12px; padding:14px 0 12px; border-bottom:1px solid var(--line);}
.sg-head .cc-avatar{width:38px; height:38px; font-size:.85rem; border-radius:10px; flex-shrink:0;}
.sg-name{font-family:var(--font-display); font-weight:600; font-size:.98rem; color:var(--charcoal); text-decoration:none; flex:1;}
.sg-name:hover{color:var(--mint-deep);}
.sg-chat{flex-shrink:0;}
.sg-items .swarm-item:last-child{border-bottom:none;}

/* ---------- ADD-TO-SWARM PACKAGE PICKER ---------- */
.swarm-modal-overlay{
  position:fixed; inset:0; background:rgba(26,26,26,.45); backdrop-filter:blur(3px);
  z-index:220; display:none; align-items:center; justify-content:center; padding:20px;
}
.swarm-modal-overlay.open{display:flex;}
.swarm-modal{
  background:var(--white); border-radius:20px; width:100%; max-width:460px; overflow:hidden;
  animation:popIn .28s cubic-bezier(.2,.8,.3,1); box-shadow:0 30px 70px rgba(0,0,0,.28);
}
.swarm-modal-head{background:var(--charcoal); color:var(--white); padding:18px 22px; display:flex; align-items:center; gap:12px;}
.swarm-modal-head .cc-avatar{width:38px; height:38px; font-size:.85rem; border-radius:11px; flex-shrink:0;}
.swarm-modal-head .smh-text{flex:1; min-width:0;}
.swarm-modal-head .smh-name{font-family:var(--font-display); font-weight:600; font-size:.98rem;}
.swarm-modal-head .smh-sub{font-size:.74rem; opacity:.7; margin-top:2px;}
.swarm-modal-head .smh-close{background:none; border:none; color:var(--white); font-size:1.4rem; line-height:1; cursor:pointer; opacity:.7;}
.swarm-modal-head .smh-close:hover{opacity:1;}
.swarm-modal-body{padding:8px 22px; max-height:52vh; overflow-y:auto;}
.sp-row{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.sp-row:last-child{border-bottom:none;}
.sp-row .sw{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.sp-info{flex:1; min-width:0;}
.sp-name{font-family:var(--font-display); font-weight:600; font-size:.9rem;}
.sp-meta{font-family:var(--font-mono); font-size:.73rem; color:var(--ink-soft); margin-top:2px;}
.sp-price{font-family:var(--font-mono); font-size:.85rem; font-weight:600; color:var(--mint-deep); white-space:nowrap;}
.sp-unavailable{font-family:var(--font-mono); font-size:.73rem; color:var(--ink-soft);}
.sp-row.is-added{background:var(--mint-tint); margin:0 -12px; padding-left:12px; padding-right:12px; border-radius:10px; border-bottom-color:transparent;}
.sp-row .sp-add:disabled{opacity:1; background:var(--mint-tint); color:var(--mint-deep); border-color:transparent; cursor:default;}
.swarm-modal-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 22px 20px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);
}

/* Header swarm counter */
.nav-swarm-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  margin-left:7px; padding:0 6px; border-radius:999px; background:var(--mint); color:var(--charcoal);
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
}
.nav-swarm.is-empty .nav-swarm-count{background:rgba(255,255,255,.22); color:var(--white);}

/* ---------- CART PAGE ---------- */
.influ-cart-grid{display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start;}
@media (max-width:860px){ .influ-cart-grid{grid-template-columns:1fr;} }
.influ-cart-summary{
  border:1px solid var(--line); border-radius:16px; padding:22px 20px; background:var(--white);
  position:sticky; top:96px;
}
.influ-payments-off{
  font-size:.78rem; color:var(--ink-soft); background:var(--mint-tint);
  border-radius:10px; padding:11px 13px; margin-top:14px;
}

/* ---------- AUTH PAGES ---------- */
.auth-error{
  background:#fdecea; border:1px solid #f5c2c0; color:#8e2a24; border-radius:10px;
  padding:11px 14px; font-size:.86rem; margin-bottom:18px;
}
.auth-remember{display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--ink-soft); margin-bottom:16px;}
.auth-remember input{width:auto; margin:0;}
.field-hint{display:block; font-size:.76rem; color:var(--ink-soft); margin-top:5px;}
/* Honeypot: off-screen rather than display:none, since some bots skip hidden inputs. */
.influ-hp{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important;}

/* ---------- MESSAGES (Stage 1 placeholder) ---------- */
.msg-peer{display:flex; align-items:center; gap:12px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line);}
.msg-peer .cc-avatar{width:44px; height:44px; font-size:.9rem; border-radius:12px;}
.msg-peer-name{font-family:var(--font-display); font-weight:600; font-size:1rem;}
.msg-peer-link{font-family:var(--font-mono); font-size:.76rem; color:var(--mint-deep); text-decoration:none;}

/* ---------- CREATOR PROFILE PAGE ---------- */
.profile-hero{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:flex-start;}
@media (max-width:640px){ .profile-hero{grid-template-columns:1fr; text-align:center;} .profile-hero .ph-avatar{margin:0 auto;} }
.ph-avatar{
  width:88px; height:88px; border-radius:22px; background:linear-gradient(135deg, var(--mint), var(--mint-deep));
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--white); font-size:2rem; flex-shrink:0;
}
.ph-rating{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:.9rem; color:var(--ink-soft);}
.ph-rating .stars{color:var(--gold); letter-spacing:2px;}
.ph-bio{margin-top:16px; color:var(--ink-soft); font-size:1rem; max-width:60ch; line-height:1.6;}

/* ------------------------------------------------------ the rate card's deck
   Packages, portfolio and analytics are three views of one card. Drawn as a stack so
   the two you are not reading stay visible behind the one you are: a row of flat tabs
   hides them behind a word, and a brand who never presses it never learns they exist. */
.pp-deck{margin:6px 0 0;}
.pp-deck-nav{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 18px;}
.pp-tab{
  display:flex; align-items:center; gap:12px; padding:11px 16px; cursor:pointer; text-align:left;
  border:1px solid var(--line); border-radius:16px; background:var(--white); color:inherit;
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pp-tab:hover{border-color:var(--mint); transform:translateY(-1px);}
.pp-tab:focus-visible{outline:2px solid var(--mint-deep); outline-offset:2px;}
.pp-tab-n{font-family:var(--font-mono); font-size:.66rem; color:var(--ink-soft); background:var(--paper); border-radius:8px; padding:4px 7px;}
.pp-tab-t{display:flex; flex-direction:column; gap:1px; min-width:0;}
.pp-tab-l{font-weight:650; font-size:.95rem; color:var(--charcoal); line-height:1.2;}
.pp-tab-m{font-size:.74rem; color:var(--ink-soft);}
.pp-tab-b{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mint-deep); background:var(--mint-tint); border-radius:999px; padding:3px 8px; white-space:nowrap;
}
.pp-tab.is-on{background:var(--charcoal); border-color:var(--charcoal); transform:none;}
.pp-tab.is-on .pp-tab-l{color:var(--white);}
.pp-tab.is-on .pp-tab-m{color:rgba(255,255,255,.72);}
.pp-tab.is-on .pp-tab-n{background:rgba(255,255,255,.14); color:rgba(255,255,255,.8);}
.pp-tab.is-on .pp-tab-b{background:var(--mint); color:var(--charcoal);}

/* Where a platform card's number came from: read from the platform, or typed in. */
.pp-src{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin:12px 0 0; padding-top:10px; border-top:1px dashed var(--line);}
.pp-src.is-live{color:var(--mint-deep);}
.filter-check{display:flex !important; align-items:center; gap:8px; cursor:pointer; text-transform:none !important; letter-spacing:0 !important; font-size:.9rem !important; color:var(--charcoal) !important;}
.filter-check input{accent-color:var(--mint-deep); width:16px; height:16px;}
.filter-hint{font-size:.76rem; color:var(--ink-soft); margin:6px 0 0; line-height:1.45;}

/* The two cards behind. Explicit z-index, because ::after would otherwise paint over
   the panel it is meant to sit under. */
.pp-deck-stack{position:relative;}
.pp-deck-stack::before,
.pp-deck-stack::after{content:''; position:absolute; height:44px; border-radius:20px; border:1px solid var(--line); z-index:0;}
.pp-deck-stack::before{left:28px; right:28px; bottom:-16px; background:var(--paper);}
.pp-deck-stack::after{left:14px; right:14px; bottom:-8px; background:var(--white);}
.pp-panel{
  position:relative; z-index:1; background:var(--white); border:1px solid var(--line);
  border-radius:20px; padding:24px; box-shadow:0 18px 40px -30px rgba(26,26,26,.35);
}
.pp-panel > .portfolio-section{margin-top:0;}
.pp-panel > .profile-platform-grid{margin-top:0;}
@keyframes ppLift{from{opacity:0; transform:translateY(10px) scale(.994);} to{opacity:1; transform:none;}}
.pp-panel.is-in{animation:ppLift .28s cubic-bezier(.2,.8,.2,1);}
@media (prefers-reduced-motion:reduce){
  .pp-panel.is-in{animation:none;}
  .pp-tab{transition:none;}
}
@media (max-width:720px){
  /* One row that scrolls rather than a grid of pills that wraps into a wall. */
  .pp-deck-nav{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
  .pp-deck-nav::-webkit-scrollbar{display:none;}
  .pp-tab{flex:0 0 auto;}
  .pp-panel{padding:18px 14px; border-radius:16px;}
  .pp-deck-stack::before{left:18px; right:18px; bottom:-12px;}
  .pp-deck-stack::after{left:9px; right:9px; bottom:-6px;}
}

.profile-platform-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:16px;}
@media (max-width:640px){ .profile-platform-grid{grid-template-columns:1fr;} }
.pp-card{border:1.5px solid var(--line); border-radius:16px; padding:22px;}
.pp-head{display:flex; align-items:center; gap:12px;}
.pp-head .sw{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.pp-head h4{font-family:var(--font-display); font-size:1.02rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pp-handle-link{color:var(--charcoal); text-decoration:none;}
.pp-handle-link:hover{color:var(--mint-deep); text-decoration:underline; text-underline-offset:3px;}
.pp-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, max-content)); gap:14px 32px; margin-top:18px;}
.pp-stat .val{font-family:var(--font-mono); font-size:1.1rem; font-weight:600; color:var(--charcoal);}
.pp-stat .lbl{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-top:2px;}
.pp-price{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:baseline;}
.pp-price .amt{font-family:var(--font-mono); font-size:1.15rem; font-weight:700; color:var(--mint-deep);}

.sticky-action-bar{
  /* A floating card rather than a strip with no side padding: "Starting at" sat hard against
     the white edge. main.js still measures it while docked, to lift floating buttons. */
  position:sticky; bottom:12px; z-index:20; background:var(--white);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 32px -14px rgba(26,26,26,.22);
  padding:14px 20px; margin-top:40px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}

.chat-modal-overlay{
  position:fixed; inset:0; background:rgba(26,26,26,.45); z-index:200; display:none; align-items:center; justify-content:center; padding:20px;
}
.chat-modal-overlay.open{display:flex;}
.chat-modal{background:var(--white); border-radius:20px; width:100%; max-width:420px; padding:0; overflow:hidden; animation:popIn .3s ease;}
.chat-modal-head{background:var(--charcoal); color:var(--white); padding:18px 22px; display:flex; align-items:center; gap:12px;}
.chat-modal-head .cc-avatar{width:36px; height:36px; font-size:.85rem; border-radius:10px;}
.chat-modal-head .cmh-close{margin-left:auto; background:none; border:none; color:var(--white); font-size:1.2rem; cursor:pointer; opacity:.7;}
.chat-modal-body{padding:20px 22px; display:flex; flex-direction:column; gap:12px; max-height:340px; overflow-y:auto;}
.chat-bubble{max-width:80%; padding:10px 14px; border-radius:14px; font-size:.86rem; line-height:1.4;}
.chat-bubble.them{background:var(--mint-tint); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px;}
.chat-bubble.you{background:var(--charcoal); color:var(--white); align-self:flex-end; border-bottom-right-radius:4px;}
.chat-modal-foot{padding:14px 22px 20px; font-size:.78rem; color:var(--ink-soft); text-align:center; border-top:1px solid var(--line);}

.related-creators-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:760px){ .related-creators-grid{grid-template-columns:1fr;} }

/* contact split */
.contact-grid{display:grid; grid-template-columns:1fr .8fr; gap:48px; align-items:start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info-item{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);}
.contact-info-item h3{font-size:.95rem;}
.contact-info-item p{color:var(--ink-soft); font-size:.9rem; margin-top:4px;}
.contact-info-item a{color:var(--mint-deep); text-decoration:none; font-weight:600;}

/* ============================================================
   Influ Marketplace plugin: photo upload/crop, link validation,
   portfolio links, embeds (onboarding wizard + wp-admin shared)
   ============================================================ */

/* Real photo variants of the existing initials-avatar circles -- same box, just an
   image instead of letters, so no layout changes are needed anywhere they're used. */
.cc-avatar-photo, .ph-avatar-photo{padding:0; overflow:hidden; background:var(--paper);}
.cc-avatar-photo img, .ph-avatar-photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- Photo upload field (onboarding step 3 + admin meta box) ---------- */
.influ-photo-field{display:flex; align-items:center; gap:18px; margin-top:8px;}
.influ-photo-preview{
  width:88px; height:88px; border-radius:16px; overflow:hidden; background:var(--paper);
  border:1.5px dashed var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.influ-photo-preview img{width:100%; height:100%; object-fit:cover;}
.influ-photo-empty{font-size:.72rem; color:var(--ink-soft); font-family:var(--font-mono); text-align:center;}
/* Upload feedback. Silence here was half of the "I uploaded a photo and nothing
   happened" report -- the other half being the photo itself, see PHOTO_META. */
.influ-photo-status{font-size:.8rem; margin:6px 0 0; min-height:1.2em;}
.influ-photo-status.is-busy{color:var(--ink-soft);}
.influ-photo-status.is-ok{color:#1e7a4f; font-weight:600;}
.influ-photo-status.is-err{color:#b3261e; font-weight:600;}

/* ---------- Crop / zoom modal ---------- */
.influ-crop-modal{
  display:none; position:fixed; inset:0; z-index:9000; background:rgba(26,26,26,.6);
  align-items:center; justify-content:center; padding:20px;
}
.influ-crop-modal.open{display:flex;}
.influ-crop-box{background:var(--white); border-radius:16px; padding:24px; max-width:380px; width:100%; text-align:center;}
.influ-crop-box h3{font-size:1.05rem; margin-bottom:14px;}
.influ-crop-stage{
  width:320px; height:320px; max-width:100%; margin:0 auto; border-radius:12px; overflow:hidden;
  background:var(--charcoal); cursor:grab; touch-action:none;
}
.influ-crop-stage:active{cursor:grabbing;}
.influ-crop-stage canvas{display:block;}
#influ-crop-zoom{width:100%; margin-top:16px;}
.influ-crop-actions{display:flex; justify-content:center; gap:10px; margin-top:18px;}

/* ---------- Platform link validation (red X / green check + tooltip) ---------- */
.influ-link-field{position:relative; display:block;}
.influ-link-field input{padding-right:32px;}
.influ-link-status{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-weight:700; font-size:.95rem; line-height:1; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.influ-link-status.valid{color:var(--mint-deep); background:var(--mint-tint);}
.influ-link-status.invalid{color:var(--white); background:var(--coral); cursor:help;}
.influ-link-status.invalid::after{
  content:attr(title);
  position:absolute; right:0; top:130%; width:210px; z-index:30;
  background:var(--charcoal); color:var(--white); font-family:var(--font-body); font-weight:400;
  font-size:.76rem; line-height:1.45; padding:10px 12px; border-radius:10px;
  box-shadow:0 12px 28px rgba(26,26,26,.25);
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.influ-link-status.invalid:hover::after,
.influ-link-status.invalid:focus::after,
.influ-link-status.invalid.show-tip::after{
  opacity:1; transform:translateY(0);
}

/* ---------- Portfolio links (per platform, added one at a time via +) ---------- */
.influ-portfolio-field{margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--paper);}
.influ-portfolio-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px;}
.influ-portfolio-title{font-family:var(--font-display); font-weight:600; font-size:.88rem; color:var(--charcoal);}
.ipf-hint{display:block; font-family:var(--font-body); font-weight:400; font-size:.76rem; color:var(--ink-soft); margin-top:2px;}
.influ-portfolio-count{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); flex-shrink:0;}
.influ-portfolio-field.is-empty .influ-portfolio-count{opacity:0;}
.influ-portfolio-list{display:flex; flex-direction:column; gap:8px;}
.influ-portfolio-list:not(:empty){margin-bottom:12px;}
.influ-portfolio-row{
  display:flex; align-items:center; gap:10px; background:var(--white);
  border:1px solid var(--line); border-radius:10px; padding:8px 10px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.influ-portfolio-row:focus-within{border-color:var(--mint); box-shadow:0 0 0 3px rgba(62,180,137,.12);}
.influ-portfolio-row .ipr-icon{
  width:26px; height:26px; border-radius:8px; flex-shrink:0; background:var(--paper);
  border:1px solid var(--line); color:var(--charcoal); display:flex; align-items:center; justify-content:center;
}
.influ-portfolio-row .ipr-icon svg{width:58%; height:58%; display:block;}
.influ-portfolio-row .influ-link-field{flex:1; min-width:0;}
.influ-portfolio-row input{
  width:100%; border:none; background:transparent; padding:6px 30px 6px 0; font-size:.86rem;
  font-family:var(--font-body); color:var(--ink); outline:none; box-shadow:none;
}
.influ-portfolio-row input::placeholder{color:var(--ink-soft); opacity:.7;}
.influ-portfolio-remove{
  flex-shrink:0; width:30px; height:30px; padding:0; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink-soft); cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.influ-portfolio-remove:hover{color:var(--coral); border-color:var(--coral); background:#fff5f2;}
/* The video for a portfolio link Facebook won't let other sites play (Influ_Portfolio_Clips). */
.influ-portfolio-row{flex-wrap:wrap;}
.influ-clip{
  flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px;
  margin:2px 0 2px 36px; padding:10px 12px; border-radius:8px; font-size:.8rem; line-height:1.45; color:var(--ink-soft);
}
.influ-clip.is-needed{background:#fff8ec; border:1px solid #f1d9a6;}
.influ-clip.is-set{background:#eef8f3; border:1px solid rgba(62,180,137,.35);}
.influ-clip strong{color:var(--charcoal); font-weight:600;}
.influ-clip a{color:var(--mint-deep);}
.influ-clip-text{flex:1 1 260px; min-width:0;}
.influ-clip-actions{display:flex; gap:8px; flex-shrink:0;}
.influ-clip-actions label{cursor:pointer; margin:0;}
/* The editor's form styles colour labels as text, which made this label -- a button -- dark
   on its own dark background until hovered. */
.influ-clip .influ-clip-actions .btn-primary{color:var(--white);}
.influ-clip .influ-clip-actions .btn-ghost{color:var(--charcoal);}
.influ-clip-status{flex-basis:100%; font-family:var(--font-mono); font-size:.72rem; color:var(--mint-deep);}
.influ-clip-status:empty{display:none;}
.influ-clip.is-uploading .influ-clip-actions{opacity:.5; pointer-events:none;}
@media (max-width:600px){ .influ-clip{margin-left:0;} .influ-clip-actions{width:100%;} }
.influ-portfolio-add{
  display:inline-flex; align-items:center; gap:8px; width:100%; justify-content:center;
  padding:10px 16px; border:1.5px dashed var(--line); border-radius:10px; background:transparent;
  font-family:var(--font-display); font-weight:600; font-size:.84rem; color:var(--ink-soft); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.influ-portfolio-add:hover{border-color:var(--mint-deep); color:var(--mint-deep); background:var(--mint-tint);}
.influ-portfolio-add .ipa-plus{font-size:1rem; line-height:1;}

/* ---------- Portfolio section (creator profile page) ----------
   Its own section below the rate cards, grouped per platform in the onboarding
   order, so a creator with 40 portfolio links doesn't bury their own pricing. */
.portfolio-section{margin-top:60px;}
.portfolio-group{margin-top:34px;}
.portfolio-group:first-of-type{margin-top:24px;}
.portfolio-group-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.portfolio-group-head .sw{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;}
.portfolio-group-head h3{font-family:var(--font-display); font-size:1.02rem; margin:0;}
.portfolio-group-head .pg-count{
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft);
  padding:3px 9px; border:1px solid var(--line); border-radius:999px; background:var(--paper);
}
/* 3 across on desktop; the 10-link cap means at most 4 rows. */
.embed-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; align-items:start;}
@media (max-width:900px){ .embed-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:600px){ .embed-grid{grid-template-columns:1fr;} }
.embed-item{border-radius:10px; overflow:hidden; background:var(--paper); min-width:0;}
.embed-item iframe, .embed-item blockquote{max-width:100% !important; margin:0 !important;}
.embed-youtube{aspect-ratio:16/9;}
.embed-youtube iframe{width:100%; height:100%; border:0;}
.embed-tiktok, .embed-instagram{min-height:120px; background:transparent;}

/* Facebook's iframe plugins render at a fixed pixel size, so the card wraps them in
   a scaled, centred frame rather than letting them overflow the grid column. */
.embed-facebook{
  position:relative;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:12px 12px 0; display:flex; flex-direction:column; align-items:center; overflow:hidden;
}
.embed-facebook iframe{width:100% !important; height:560px; border:0; display:block;}
/* A creator's own upload of a reel Facebook won't embed (Influ_Portfolio_Clips): the same
   card and height as the Facebook embeds beside it, so a mixed row lines up. */
.embed-clip{
  position:relative;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:12px 12px 0; display:flex; flex-direction:column; overflow:hidden;
}
.embed-clip video{width:100%; aspect-ratio:340/560; object-fit:contain; background:var(--charcoal); border-radius:10px; display:block;}
.embed-facebook .ef-open, .embed-clip .ef-open{
  display:block; width:100%; text-align:center; padding:10px 0; margin-top:8px;
  border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  transition:color .2s ease;
}
.embed-facebook .ef-open:hover, .embed-clip .ef-open:hover{color:var(--mint-deep);}

/* Shown instead of a platform embed we can't render -- either a link the platform's
   plugin can't resolve, or (Facebook) one where the plugin loaded but drew its own
   "content isn't available" box. Built from data the page already holds, so it can't
   fail itself, and deliberately styled as a real card: a broken-looking placeholder
   next to working embeds reads as a bug on the creator's profile. */
.embed-fallback{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--white);
  overflow:hidden; text-decoration:none; color:inherit; min-height:210px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Matches the aspect of the video embeds beside it so a mixed row doesn't jump. */
.embed-fallback.ef-video{aspect-ratio:340/560; min-height:0;}
.embed-fallback:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(26,26,26,.10); border-color:var(--mint);}
.embed-fallback .ef-cover{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(14px) saturate(.85); transform:scale(1.15); opacity:.55;
}
.embed-fallback .ef-cover::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,26,26,.15) 0%, rgba(26,26,26,.82) 100%);
}
.embed-fallback .ef-cover-plain{background:linear-gradient(150deg, var(--charcoal), #2f4f43); opacity:1; filter:none; transform:none;}
.embed-fallback .ef-badge{
  position:relative; z-index:1; align-self:flex-start; margin-bottom:auto;
  width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,.92); color:var(--charcoal);
  display:flex; align-items:center; justify-content:center;
}
.embed-fallback .ef-badge svg{width:58%; height:58%; display:block;}
.embed-fallback .ef-body{position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; margin-top:14px;}
.embed-fallback .ef-label{font-family:var(--font-display); font-weight:600; font-size:.92rem; color:#fff;}
.embed-fallback .ef-url{
  font-family:var(--font-mono); font-size:.7rem; color:rgba(255,255,255,.72);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.embed-fallback .ef-cta{
  position:relative; z-index:1; margin-top:12px; align-self:flex-start;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--charcoal); background:var(--mint); border-radius:999px; padding:6px 13px;
}

/* Placeholder shown while a Facebook plugin iframe decides whether it will render. */
.fb-embed-skeleton{
  position:absolute; inset:12px 12px 44px; border-radius:10px; z-index:1;
  background:linear-gradient(100deg, var(--paper) 30%, #fff 50%, var(--paper) 70%);
  background-size:220% 100%; animation:fbShimmer 1.4s ease-in-out infinite;
}
.embed-facebook.is-rendered .fb-embed-skeleton{display:none;}
@keyframes fbShimmer{ from{background-position:180% 0;} to{background-position:-40% 0;} }

/* ---------- Admin meta box: per-platform rows (replaces the old plain table) ---------- */
.influ-platform-row{border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:14px; background:var(--white);}
.influ-platform-main{display:grid; grid-template-columns:90px 1fr 130px 150px; gap:14px; align-items:end;}
.influ-platform-main label{font-size:.78rem; color:var(--ink-soft); display:block;}
.influ-platform-main strong{display:block; margin-bottom:4px;}
.influ-platform-name{display:flex; align-items:center; gap:8px;}
.influ-platform-name .sw{width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;}
@media (max-width:782px){ .influ-platform-main{grid-template-columns:1fr;} }
.contact-info-item a:hover{text-decoration:underline;}

/* ============================================================
   CHAT (Stage 2) — /messages/ inbox + thread view
   Appended as one block; nothing above this line is modified.
   Extends the existing .chat-bubble.you/.them language rather than
   replacing it: the bubbles keep charcoal/mint-tint, and everything
   around them is built from the same tokens.
   ============================================================ */

.chat-sr{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.chat-main{padding:28px 0 40px;}
.chat-wrap{max-width:1180px;}

/* Logged-out / backend-absent panels. Deliberately the same shape as .form-card so a
   "chat is warming up" page still looks like part of the product. */
.chat-standalone{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  padding:36px 34px; max-width:620px; margin:24px auto;
}
.chat-standalone h1{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:10px;}
.chat-standalone p{color:var(--ink-soft); font-size:.94rem; margin:0 0 10px;}
.chat-standalone-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}

/* ---------- shell ---------- */
.chat-app{
  display:grid; grid-template-columns:330px 1fr; gap:18px;
  height:calc(100vh - 190px); min-height:540px;
}
.chat-pane-list, .chat-pane-convo{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  display:flex; flex-direction:column; min-width:0; overflow:hidden; position:relative;
}
.chat-list-head{padding:20px 20px 12px; border-bottom:1px solid var(--line);}
.chat-list-head .breadcrumb{margin-bottom:6px;}
.chat-list-head h1{font-size:1.35rem;}
.chat-threads{overflow-y:auto; flex:1; padding:6px;}

/* ---------- thread list ---------- */
.chat-thread-row{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px;
  text-decoration:none; color:inherit; transition:background .18s ease;
}
.chat-thread-row:hover{background:var(--paper);}
.chat-thread-row.is-active{background:var(--mint-tint);}
.chat-thread-row .cc-avatar{width:44px; height:44px; font-size:.9rem; border-radius:13px;}
.chat-row-body{flex:1; min-width:0;}
.chat-row-top{display:flex; align-items:baseline; gap:8px;}
.chat-row-name{
  font-family:var(--font-display); font-weight:600; font-size:.94rem; color:var(--charcoal);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-row-time{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft); flex-shrink:0;}
.chat-row-snippet{
  display:block; font-size:.82rem; color:var(--ink-soft); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-thread-row.is-unread .chat-row-snippet{color:var(--ink); font-weight:600;}
.chat-row-pill{
  flex-shrink:0; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--mint); color:var(--charcoal); font-family:var(--font-mono);
  font-size:.7rem; font-weight:600; display:inline-flex; align-items:center; justify-content:center;
}
.chat-threads-empty{text-align:center; padding:44px 22px; color:var(--ink-soft);}
.chat-threads-empty h2{font-size:1.05rem; color:var(--charcoal); margin-bottom:8px;}
.chat-threads-empty p{font-size:.86rem; margin:0 0 16px;}
.chat-skeleton{padding:12px;}
.chat-skeleton span{
  display:block; height:56px; border-radius:14px; margin-bottom:8px;
  background:linear-gradient(100deg, var(--paper) 30%, #fff 50%, var(--paper) 70%);
  background-size:220% 100%; animation:fbShimmer 1.4s ease-in-out infinite;
}

/* ---------- blank / warming states ---------- */
.chat-blank{
  margin:auto; text-align:center; padding:40px 30px; max-width:420px; color:var(--ink-soft);
}
.chat-blank h2{font-size:1.15rem; color:var(--charcoal); margin-bottom:8px;}
.chat-blank p{font-size:.88rem; margin:0;}
.chat-blank-mark{display:flex; gap:6px; justify-content:center; margin-bottom:16px;}
.chat-blank-mark span{width:10px; height:10px; border-radius:50%; background:var(--mint); opacity:.35;}
.chat-blank-mark span:nth-child(2){opacity:.6; background:var(--mint-deep);}
.chat-blank-mark span:nth-child(3){opacity:.9;}

/* ---------- conversation header ---------- */
.chat-convo{display:flex; flex-direction:column; flex:1; min-height:0;}
.chat-convo-head{
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.chat-convo-head .cc-avatar{width:42px; height:42px; font-size:.88rem; border-radius:13px;}
.chat-peer-text{flex:1; min-width:0;}
.chat-peer-name{
  font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--charcoal);
  text-decoration:none; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-peer-name:hover{color:var(--mint-deep);}
.chat-peer-sub{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); margin-top:2px;}
.chat-peer-profile{
  flex-shrink:0; font-family:var(--font-mono); font-size:.74rem; color:var(--mint-deep);
  text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:6px 12px;
}
.chat-peer-profile:hover{border-color:var(--mint); background:var(--mint-tint);}
.chat-back{
  display:none; background:none; border:none; cursor:pointer; color:var(--charcoal);
  padding:4px; margin-left:-4px;
}
.chat-back svg{width:22px; height:22px;}

/* ---------- pinned context strip ---------- */
.chat-context{
  flex-shrink:0; background:var(--mint-tint); border-bottom:1px solid var(--line);
  padding:10px 18px 12px;
}
.chat-context-label{
  font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--mint-deep); margin-bottom:7px;
}
/* Horizontal scroll lives here rather than on the page: a five-package booking must not
   make the whole document scroll sideways on a phone. */
.chat-context-items{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;}
.chat-context-item{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  background:var(--white); border:1px solid var(--line); border-radius:999px; padding:5px 12px 5px 6px;
}
.chat-context-item .sw{width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center;}
.chat-context-name{font-size:.8rem; font-weight:600; color:var(--charcoal); white-space:nowrap;}
.chat-context-price{font-family:var(--font-mono); font-size:.76rem; color:var(--mint-deep); white-space:nowrap;}
.chat-context-total{
  display:flex; justify-content:space-between; align-items:baseline; margin-top:8px;
  font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft);
}
.chat-context-total strong{color:var(--charcoal); font-size:.9rem;}

/* ---------- message log ---------- */
.chat-scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:18px;}
.chat-scroll:focus-visible{outline-offset:-3px;}
.chat-log{display:flex; flex-direction:column; gap:2px;}
.chat-day{text-align:center; margin:16px 0 12px;}
.chat-day span{
  font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); background:var(--paper); border-radius:999px; padding:4px 12px;
}
.chat-system{
  align-self:center; max-width:80%; text-align:center; font-size:.78rem; color:var(--ink-soft);
  background:var(--paper); border-radius:10px; padding:8px 14px; margin:8px 0;
}
.chat-msg{display:flex; flex-direction:column; max-width:min(78%, 560px); margin-top:10px;}
.chat-msg.is-grouped{margin-top:2px;}
.chat-msg-you{align-self:flex-end; align-items:flex-end;}
.chat-msg-them{align-self:flex-start; align-items:flex-start;}
/* .chat-bubble / .you / .them already exist further up; only the extras belong here. */
.chat-bubble{max-width:100%; overflow-wrap:anywhere;}
.chat-msg.is-grouped .chat-bubble.them{border-top-left-radius:6px;}
.chat-msg.is-grouped .chat-bubble.you{border-top-right-radius:6px;}
.chat-meta{font-family:var(--font-mono); font-size:.66rem; color:var(--ink-soft); margin:3px 4px 0;}
.chat-msg.is-grouped .chat-meta{display:none;}
.chat-msg.is-sending{opacity:.55;}
.chat-msg.is-failed .chat-bubble.you{background:var(--coral);}
.chat-msg.is-failed .chat-meta{display:block;}
.chat-meta-failed{color:var(--coral);}
.chat-retry{
  background:none; border:none; padding:0; cursor:pointer; color:var(--coral);
  text-decoration:underline; font-family:var(--font-mono); font-size:.66rem;
}
.chat-hint{
  font-size:.74rem; color:var(--mint-deep); background:var(--mint-tint);
  border-radius:8px; padding:6px 10px; margin-top:5px; max-width:100%;
}

/* ---------- attachments ---------- */
.chat-atts{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.chat-bubble .chat-body + .chat-atts{margin-top:8px;}
.chat-att{position:relative; display:flex; align-items:center; gap:8px;}
.chat-att-dl{
  flex-shrink:0; width:30px; height:30px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; color:inherit; opacity:.6;
  border:1px solid rgba(128,128,128,.28); text-decoration:none;
}
.chat-att-dl:hover{opacity:1; border-color:var(--mint);}
.chat-att-dl svg{width:15px; height:15px;}
.chat-att--image{align-items:flex-end;}
.chat-thumb{
  padding:0; border:none; background:none; cursor:zoom-in; border-radius:12px;
  overflow:hidden; line-height:0; max-width:260px;
}
.chat-thumb img{width:100%; height:auto; max-height:280px; object-fit:cover; border-radius:12px;}
.chat-att--video video{max-width:280px; width:100%; border-radius:12px; background:#000;}
.chat-file-card{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
  background:rgba(255,255,255,.12); border:1px solid rgba(128,128,128,.28);
  border-radius:12px; padding:9px 12px; min-width:0; max-width:260px;
}
.chat-bubble.them .chat-file-card{background:var(--white);}
.chat-file-card:hover{border-color:var(--mint);}
.chat-file-glyph{
  flex-shrink:0; width:34px; height:34px; border-radius:9px; background:var(--mint);
  color:var(--charcoal); font-family:var(--font-mono); font-size:.6rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.chat-file-meta{min-width:0;}
.chat-file-name{display:block; font-size:.82rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-file-size{display:block; font-family:var(--font-mono); font-size:.68rem; opacity:.7;}

/* Custom audio transport: default <audio> chrome differs per browser and reads as a
   foreign object dropped into the bubble. */
.chat-att--audio{
  background:rgba(255,255,255,.12); border:1px solid rgba(128,128,128,.28);
  border-radius:999px; padding:6px 12px 6px 6px; min-width:230px; max-width:300px;
}
.chat-bubble.them .chat-att--audio{background:var(--white);}
.chat-au-play{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:var(--mint); color:var(--charcoal); display:flex; align-items:center; justify-content:center;
}
.chat-au-play svg{width:14px; height:14px;}
.chat-au-body{flex:1; min-width:0;}
.chat-au-name{font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px;}
.chat-au-track{height:6px; border-radius:999px; background:rgba(128,128,128,.3); cursor:pointer;}
.chat-au-fill{height:100%; width:0; border-radius:999px; background:var(--mint); transition:width .1s linear;}
.chat-au-time{font-family:var(--font-mono); font-size:.68rem; opacity:.75; flex-shrink:0;}
.chat-att--audio audio{display:none;}

/* ---------- empty conversation starters ---------- */
.chat-starters{text-align:center; padding:34px 20px 10px; max-width:460px; margin:0 auto;}
.chat-starters .cc-avatar{width:60px; height:60px; font-size:1.2rem; border-radius:18px; margin:0 auto 14px;}
.chat-starters h2{font-size:1.1rem; margin-bottom:6px;}
.chat-starters p{font-size:.84rem; color:var(--ink-soft); margin:0 0 18px;}
.chat-starter-list{display:flex; flex-direction:column; gap:8px;}
.chat-starter{
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:11px 15px;
  font:inherit; font-size:.85rem; color:var(--ink); text-align:left; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.chat-starter:hover{border-color:var(--mint); background:var(--mint-tint);}

/* ---------- composer ---------- */
.chat-composer{flex-shrink:0; border-top:1px solid var(--line); padding:12px 14px 10px; background:var(--white);}
.chat-composer-row{display:flex; align-items:flex-end; gap:8px;}
.chat-composer textarea{
  flex:1; min-width:0; resize:none; border:1px solid var(--line); border-radius:16px;
  padding:11px 14px; font:inherit; font-size:.9rem; line-height:1.45; max-height:160px;
  background:var(--paper); color:var(--ink); overflow-y:auto;
}
.chat-composer textarea:focus{border-color:var(--mint); outline:none; box-shadow:0 0 0 4px var(--mint-tint);}
.chat-composer textarea:disabled{opacity:.6; cursor:not-allowed;}
.chat-attach{position:relative; flex-shrink:0;}
.chat-attach-btn, .chat-send{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--white); color:var(--charcoal); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chat-attach-btn svg, .chat-send svg{width:18px; height:18px;}
.chat-attach-btn:hover{border-color:var(--mint); background:var(--mint-tint);}
.chat-send{background:var(--charcoal); color:var(--white); border-color:var(--charcoal);}
.chat-send:hover:not(:disabled){background:var(--mint-deep); border-color:var(--mint-deep);}
.chat-send:disabled{opacity:.35; cursor:not-allowed;}
.chat-attach-menu{
  position:absolute; bottom:48px; left:0; z-index:10; background:var(--white);
  border:1px solid var(--line); border-radius:14px; padding:6px; min-width:160px;
  box-shadow:0 18px 40px rgba(26,26,26,.14); display:flex; flex-direction:column;
}
.chat-attach-menu button{
  background:none; border:none; text-align:left; font:inherit; font-size:.86rem;
  padding:9px 12px; border-radius:9px; cursor:pointer; color:var(--ink);
}
.chat-attach-menu button:hover{background:var(--mint-tint); color:var(--mint-deep);}
.chat-composer-foot{
  display:flex; justify-content:space-between; gap:12px; margin-top:6px; padding:0 4px;
  font-family:var(--font-mono); font-size:.66rem; color:var(--ink-soft);
}

/* ---------- upload tray ---------- */
.chat-tray{display:flex; gap:10px; flex-wrap:wrap; padding:0 4px 10px;}
.chat-tray-item{
  position:relative; width:74px; border-radius:12px; background:var(--paper);
  border:1px solid var(--line); padding:6px; text-align:center;
}
.chat-tray-item.is-error{border-color:var(--coral);}
.chat-tray-item img{width:100%; height:46px; object-fit:cover; border-radius:8px;}
.chat-tray-glyph{
  display:flex; align-items:center; justify-content:center; height:46px; border-radius:8px;
  background:var(--mint-tint); color:var(--mint-deep); font-family:var(--font-mono); font-size:.62rem; font-weight:600;
}
.chat-tray-name{
  display:block; font-size:.62rem; color:var(--ink-soft); margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-tray-x{
  position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%;
  border:none; background:var(--charcoal); color:var(--white); font-size:.85rem;
  line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
/* Determinate ring driven by XHR upload progress -- a spinner would be a lie about how
   long a 9 MB video has left on a Sri Lankan mobile connection. */
.chat-ring{
  position:absolute; top:6px; left:6px; width:calc(100% - 12px); height:46px;
  transform:rotate(-90deg); background:rgba(26,26,26,.35); border-radius:8px;
}
.chat-ring circle{fill:none; stroke-width:2.5;}
.chat-ring-bg{stroke:rgba(255,255,255,.35);}
.chat-ring-fg{stroke:var(--mint-bright); transition:stroke-dashoffset .18s linear;}
.chat-tray-err{
  position:absolute; inset:6px 6px auto; height:46px; border-radius:8px;
  background:var(--coral); color:var(--white); font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- drag and drop overlay ---------- */
.chat-drop{
  position:absolute; inset:0; z-index:20; background:rgba(247,250,249,.92);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.chat-drop-inner{
  border:2px dashed var(--mint); border-radius:18px; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; color:var(--mint-deep);
}

/* `display:flex` on the panels below outranks the browser's built-in `[hidden]`
   rule (`display:none`), so every hidden overlay in this block rendered on top of the
   page anyway -- the lightbox and the attach menu were both permanently open. Anything
   toggled with `el.hidden` needs this, and it must come before those display rules. */
.chat-app [hidden],
.chat-lightbox[hidden],
.chat-attach-menu[hidden]{display:none !important;}

/* ---------- lightbox ---------- */
.chat-lightbox{
  position:fixed; inset:0; z-index:400; background:rgba(26,26,26,.92);
  display:flex; align-items:center; justify-content:center; padding:56px 20px;
}
body.chat-lb-open{overflow:hidden;}
.chat-lb-figure{margin:0; max-width:min(1000px, 100%); text-align:center;}
.chat-lb-figure img{max-width:100%; max-height:76vh; margin:0 auto; border-radius:12px;}
.chat-lb-figure figcaption{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin-top:14px; color:rgba(255,255,255,.82); font-family:var(--font-mono); font-size:.76rem;
}
.chat-lb-figure figcaption .btn-ghost{border-color:rgba(255,255,255,.4); color:var(--white);}
.chat-lb-close{
  position:absolute; top:16px; right:20px; background:none; border:none; color:var(--white);
  font-size:2rem; line-height:1; cursor:pointer; opacity:.75;
}
.chat-lb-close:hover{opacity:1;}
.chat-lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12);
  border:none; color:var(--white); font-size:2rem; line-height:1; width:48px; height:48px;
  border-radius:50%; cursor:pointer;
}
.chat-lb-nav:hover{background:rgba(255,255,255,.25);}
.chat-lb-prev{left:12px;}
.chat-lb-next{right:12px;}

/* ---------- responsive: one pane at a time ---------- */
@media (max-width:900px){
  .chat-app{grid-template-columns:1fr; height:calc(100vh - 150px); min-height:0;}
  .chat-pane-convo{display:none;}
  body.chat-thread-open .chat-pane-list{display:none;}
  body.chat-thread-open .chat-pane-convo{display:flex;}
  .chat-back{display:block;}
  .chat-peer-profile{padding:5px 9px;}
  .chat-msg{max-width:88%;}
}
@media (max-width:480px){
  .chat-main{padding:14px 0 20px;}
  .chat-wrap{padding:0 12px;}
  .chat-peer-profile{display:none;}
}

/* ---------- CHAT: pins, edit/delete, timestamps, bell (Stage 2.1) ---------- */

/* Notification bell. Sits with the header CTAs, so it inherits the glass header's
   spacing rather than floating on its own. */
.influ-bell{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px; color:var(--charcoal);
  border:1px solid var(--line); background:var(--white); text-decoration:none;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.influ-bell:hover{border-color:var(--mint); color:var(--mint-deep); transform:translateY(-1px);}
.influ-bell.has-unread{border-color:var(--mint);}
.influ-bell-count{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--coral, #e5533d); color:#fff; border-radius:999px;
  font-family:var(--font-mono); font-size:.66rem; font-weight:600; line-height:1;
  border:2px solid var(--white);
}
/* A quiet nudge, once, rather than a permanent animation in the corner of the eye. */
.influ-bell.has-unread svg{animation:bellNudge .9s ease 1;}
@keyframes bellNudge{
  0%,100%{transform:rotate(0);} 20%{transform:rotate(-12deg);}
  40%{transform:rotate(10deg);} 60%{transform:rotate(-6deg);} 80%{transform:rotate(3deg);}
}
@media (prefers-reduced-motion: reduce){ .influ-bell.has-unread svg{animation:none;} }

/* Pinned strip. Capped and scrollable: the header, the context strip and this all sit
   above the message log, and on a 900px laptop three fixed bands were leaving barely
   150px of actual conversation. Pins are a bookmark bar, not a second inbox. */
.chat-pinned{
  border-bottom:1px solid var(--line); background:var(--mint-tint);
  padding:10px 20px; display:flex; flex-direction:column; gap:6px; flex-shrink:0;
  max-height:92px; overflow-y:auto;
}
.chat-pinned-head{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--mint-deep);
}
.chat-pinned-item{
  display:flex; align-items:baseline; gap:10px; width:100%; text-align:left;
  background:none; border:none; padding:3px 0; cursor:pointer; font:inherit;
  color:var(--charcoal); font-size:.84rem;
}
.chat-pinned-item:hover .cpi-text{text-decoration:underline;}
.chat-pinned-item .cpi-text{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-pinned-item .cpi-when{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft); flex-shrink:0;}
.chat-pin-flag{
  display:inline-flex; margin-right:5px; vertical-align:1px; color:var(--mint-deep);
}
.chat-bubble.you .chat-pin-flag{color:var(--mint);}
/* Briefly highlight the message a pin jumps to, so the eye lands in the right place. */
.chat-msg.is-flash .chat-bubble{box-shadow:0 0 0 3px var(--mint); transition:box-shadow .3s ease;}

/* Per-message actions. Hidden until hover/focus so the log stays calm, but always
   reachable by keyboard -- a control that only exists on hover is unusable without a
   mouse. */
.chat-actions{
  display:flex; gap:4px; margin-top:2px;
  opacity:0; transition:opacity .15s ease;
}
.chat-msg-you .chat-actions{justify-content:flex-end;}
.chat-msg:hover .chat-actions,
.chat-msg:focus-within .chat-actions{opacity:1;}
@media (hover: none){ .chat-actions{opacity:1;} }   /* touch has no hover to reveal it */
.chat-act{
  background:none; border:none; padding:1px 5px; cursor:pointer;
  font-family:var(--font-mono); font-size:.66rem; color:var(--ink-soft);
  border-radius:6px;
}
.chat-act:hover{color:var(--mint-deep); background:var(--mint-tint);}
.chat-act:focus-visible{outline:2px solid var(--mint-deep); outline-offset:1px;}

/* Timestamps */
.chat-meta time{cursor:help;}
.chat-edited{margin-left:5px; font-style:italic; opacity:.8;}

/* Deleted tombstone */
.chat-bubble-deleted{
  background:transparent !important; border:1px dashed var(--line);
  color:var(--ink-soft) !important;
}
.chat-deleted-note{font-size:.82rem; font-style:italic;}
/* Only moderators receive a body on a deleted message; flag it so nobody mistakes it
   for something the other party can see. */
.chat-body-moderator{
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--line);
  font-size:.82rem; opacity:.85;
}
.chat-body-moderator::before{
  content:'Visible to moderators only'; display:block; margin-bottom:4px;
  font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--coral, #e5533d);
}

/* Expired attachment marker */
.chat-att-expired{
  margin-top:8px; font-family:var(--font-mono); font-size:.68rem;
  color:var(--ink-soft); font-style:italic;
}

/* Composer: edit mode + refusals */
.chat-edit-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 12px; margin-bottom:8px; border-radius:10px;
  background:var(--mint-tint); color:var(--mint-deep);
  font-family:var(--font-mono); font-size:.72rem;
}
.chat-edit-bar button{
  background:none; border:none; cursor:pointer; font:inherit;
  color:var(--mint-deep); text-decoration:underline;
}
.chat-composer-error{
  padding:10px 12px; margin-bottom:8px; border-radius:10px;
  background:#fdecea; border:1px solid #f5c2c0; color:#8e2a24; font-size:.82rem;
}

/* The conversation is the point of the page; everything above it yields first. */
.chat-scroll{min-height:220px;}
/* The context strip is reference, not content -- let it scroll rather than push the
   message log off the screen on a short viewport. */
.chat-context{max-height:150px; overflow-y:auto;}
@media (max-height: 780px){
  .chat-context{max-height:104px;}
  .chat-pinned{max-height:62px;}
  .chat-scroll{min-height:180px;}
}

/* ---------- CHAT: message context menu + staff bubbles (Stage 2.2) ---------- */

.chat-context-menu{
  position:fixed; z-index:500; min-width:186px; padding:6px;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 20px 46px rgba(26,26,26,.20);
  display:flex; flex-direction:column; gap:1px;
}
/* `display:flex` above beats the browser's built-in [hidden] rule, exactly as it did for
   the lightbox -- without this the menu would sit open in the corner permanently. */
.chat-context-menu[hidden]{display:none !important;}
.ccm-item{
  background:none; border:none; text-align:left; font:inherit; font-size:.85rem;
  padding:8px 12px; border-radius:8px; cursor:pointer; color:var(--ink); white-space:nowrap;
}
.ccm-item:hover{background:var(--mint-tint); color:var(--mint-deep);}
.ccm-item:focus-visible{outline:2px solid var(--mint-deep); outline-offset:-2px;}
.ccm-item.is-danger{color:var(--coral, #e5533d);}
.ccm-item.is-danger:hover{background:#fdecea; color:#8e2a24;}
.ccm-sep{height:1px; margin:4px 6px; background:var(--line);}

/* A message typed by the Influ team. It is a message, so it sits on a side like any
   other -- but badged, so neither party mistakes the platform for the person they are
   negotiating with. */
.chat-bubble-staff{
  background:var(--paper) !important; color:var(--ink) !important;
  border:1px solid var(--mint);
}
.chat-staff-tag{
  display:block; margin-bottom:4px;
  font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--mint-deep);
}

/* The inline Report control, styled as a warning rather than a neutral action so it is
   not clicked by accident while scanning the row. */
.chat-act.is-danger{color:var(--coral, #e5533d);}
.chat-act.is-danger:hover{background:#fdecea; color:#8e2a24;}

/* Visually hidden but still announced. The chat has its own .chat-sr; this is the
   general-purpose one, because a label that exists only for screen readers is a thing
   any page may need. */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- 404 ---------- */

.e404{position:relative; overflow:hidden; padding:clamp(28px, 6vw, 72px) 0 clamp(48px, 8vw, 96px);}
.e404-grid{
  position:relative; z-index:1;
  display:grid; gap:clamp(20px, 4vw, 48px); align-items:center;
  /* Copy first in the source, art second -- but on desktop the art is pulled to the
     right column. Source order stays "the useful stuff first" for screen readers and
     for anyone on a narrow screen, where the art must not push the actions off-screen. */
  grid-template-columns:1fr;
}
.e404-copy{order:2; min-width:0;}
/* On a phone the illustration leads. Left in source order after the copy it landed below
   the footer links, which put the one genuinely charming thing on the page out of sight;
   as a short band up top it sets the tone and the actions still sit within a thumb's
   reach underneath. */
.e404-art{order:1; min-width:0;}

@media (min-width: 900px){
  .e404-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);}
  /* Two columns: copy reads first on the left, art holds the right. */
  .e404-copy{order:1;}
  .e404-art{order:2;}
}

.e404-art picture{display:block;}
.e404-art img{
  display:block; width:100%; height:auto; border-radius:20px;
  border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(26,26,26,.10);
}
/* On a phone the scene is capped and cropped toward the mascot, so it reads as a band
   rather than eating the first screenful before anyone reaches a link out. */
@media (max-width: 899px){
  /* Capped so the band cannot swallow the first screenful. The crop bias keeps the
     mascot and the cracked monitor in frame rather than the empty desk beneath them. */
  .e404-art img{max-height:34vh; object-fit:cover; object-position:center 34%; border-radius:16px;}
}

.e404-code{
  font-family:var(--font-display); font-weight:700; line-height:.86;
  font-size:clamp(4.2rem, 17vw, 9.5rem); letter-spacing:-.045em;
  margin:2px 0 6px;
  background:linear-gradient(150deg, var(--charcoal) 18%, var(--mint-deep) 62%, var(--mint) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.e404-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.25rem, 3.2vw, 1.85rem); color:var(--charcoal); margin-bottom:10px;
}
.e404-line{
  color:var(--ink-soft); font-size:clamp(.92rem, 1.6vw, 1rem); max-width:44ch;
  min-height:2.8em;   /* reserves the second line so the key press cannot jolt the layout */
}

/* Did-you-mean */
.e404-guess{
  margin-top:20px; padding:14px 16px; border-radius:14px;
  background:var(--mint-tint); border:1px solid var(--line);
}
.e404-guess-label{
  font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--mint-deep); margin-bottom:6px;
}
.e404-guess ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px;}
.e404-guess a{
  color:var(--charcoal); text-decoration:none; font-weight:600; font-size:.92rem;
  border-bottom:1px solid transparent;
}
.e404-guess a:hover{color:var(--mint-deep); border-bottom-color:var(--mint);}

/* Search */
.e404-search{display:flex; gap:8px; margin-top:22px; max-width:440px;}
.e404-search input{
  flex:1; min-width:0; padding:11px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--white); font:inherit; font-size:.92rem;
}
.e404-search input:focus{outline:2px solid var(--mint); outline-offset:1px; border-color:var(--mint);}
.e404-search button{flex-shrink:0;}

.e404-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.e404-links{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:22px;
  padding-top:18px; border-top:1px solid var(--line);
}
.e404-links a{
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); text-decoration:none;
}
.e404-links a:hover{color:var(--mint-deep);}

/* The keycap from the artwork, made pressable. */
.e404-key-wrap{display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap;}
.e404-key{
  position:relative; flex-shrink:0;
  width:84px; height:74px; padding:0; cursor:pointer;
  border:none; border-radius:12px;
  background:linear-gradient(180deg, #fdfdfd 0%, #e9efec 100%);
  box-shadow:0 6px 0 #c3d2ca, 0 12px 22px rgba(26,26,26,.16);
  transition:transform .09s ease, box-shadow .09s ease;
}
.e404-key-face{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:.74rem; line-height:1.25; letter-spacing:.02em; color:var(--charcoal);
}
.e404-key:hover{transform:translateY(-1px); box-shadow:0 7px 0 #c3d2ca, 0 14px 26px rgba(26,26,26,.18);}
.e404-key:focus-visible{outline:3px solid var(--mint-deep); outline-offset:3px;}
.e404-key:active,
.e404-key.is-pressed{transform:translateY(5px); box-shadow:0 1px 0 #c3d2ca, 0 4px 10px rgba(26,26,26,.18);}
.e404-key.is-done{opacity:.55; cursor:default; transform:translateY(5px); box-shadow:0 1px 0 #c3d2ca;}
.e404-key-note{
  font-family:var(--font-mono); font-size:.78rem; color:var(--mint-deep); min-height:1.2em;
}
.e404-key-home{margin-top:8px; display:inline-block;}

/* The press animation is the whole point of the button, but it is motion; anyone who has
   asked for less of it gets the state change without the travel. */
@media (prefers-reduced-motion: reduce){
  .e404-key, .e404-key:hover, .e404-key:active, .e404-key.is-pressed{transition:none; transform:none;}
}

/* The gradient heading falls back to a solid colour where background-clip:text is not
   supported, rather than rendering as an invisible block of transparent text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .e404-code{background:none; color:var(--charcoal);}
}

/* ============================================================================
   STOREFRONT: checkout, confirmation, account
   Woo's own stylesheets are dequeued (Influ_Storefront::drop_woo_general_styles),
   so everything Woo renders is styled here against the theme's tokens rather than
   fought with specificity.
   ========================================================================= */

/* ---------- shared: forms Woo prints ---------- */
.influ-co input[type=text], .influ-co input[type=email], .influ-co input[type=tel],
.influ-co input[type=date], .influ-co input[type=password], .influ-co textarea, .influ-co select,
.woocommerce-account input[type=text], .woocommerce-account input[type=email],
.woocommerce-account input[type=tel], .woocommerce-account input[type=password]{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:11px;
  background:var(--white); font:inherit; font-size:.92rem; color:var(--ink);
}
.influ-co textarea{min-height:118px; resize:vertical; line-height:1.5;}
.influ-co select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px;}
.influ-co input:focus, .influ-co textarea:focus, .influ-co select:focus,
.woocommerce-account input:focus{outline:2px solid var(--mint); outline-offset:1px; border-color:var(--mint);}
.influ-co label, .woocommerce-account label{
  display:block; font-size:.82rem; font-weight:600; color:var(--charcoal); margin-bottom:5px;
}
.influ-co .required{color:var(--coral); text-decoration:none;}
.influ-co .description, .influ-co-brief-note{font-size:.78rem; color:var(--ink-soft); margin-top:5px;}
.influ-co p.form-row{margin-bottom:15px;}
/* Woo emits its own two-column row classes; honour them instead of forcing one column. */
.influ-co .form-row-first, .influ-co .form-row-last{width:48%; float:left;}
.influ-co .form-row-last{float:right;}
/* Only full-width rows clear. Applying clear:both to every .form-row (which Woo puts on
   the first/last pair too) stopped the float pair sitting side by side and staggered the
   name fields down the page. */
.influ-co .form-row-wide, .influ-co .form-row:not(.form-row-first):not(.form-row-last){clear:both;}
.influ-co .col2-set::after, .influ-co .form-row::after{content:''; display:table; clear:both;}
@media (max-width:600px){
  .influ-co .form-row-first, .influ-co .form-row-last{width:100%; float:none;}
}

/* ---------- progress ---------- */
.influ-steps{
  display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; margin:20px 0 0; padding:0;
  font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft);
}
.influ-steps li{display:flex; align-items:center; gap:8px;}
.influ-steps span{
  width:21px; height:21px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--line); background:var(--white); font-size:.68rem;
}
.influ-steps .is-done span{background:var(--mint); border-color:var(--mint); color:var(--charcoal);}
.influ-steps .is-current{color:var(--charcoal); font-weight:600;}
.influ-steps .is-current span{background:var(--charcoal); border-color:var(--charcoal); color:var(--white);}

/* ---------- checkout layout ---------- */
.influ-co{padding-bottom:64px;}
.influ-co-grid{
  display:grid; gap:28px; align-items:start;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  grid-template-areas:"main side" "pay side";
}
.influ-co-main{grid-area:main;}
.influ-co-side{grid-area:side;}
.influ-co-pay{grid-area:pay;}
@media (max-width:900px){
  /* Summary above the form on a phone: you should see what you are paying for before
     you start typing, not after scrolling past six fields. */
  .influ-co-grid{grid-template-columns:1fr; grid-template-areas:"side" "main" "pay";}
}

.influ-co-card, .influ-co-brief, .influ-co-payment{
  border:1px solid var(--line); border-radius:16px; background:var(--white);
  padding:22px 22px 8px; margin-bottom:18px;
}
.influ-co-brief{padding-bottom:22px;}
.influ-co-card h3, .influ-co-brief h3, .influ-co-payment h2{
  font-family:var(--font-display); font-size:1.05rem; margin-bottom:4px;
}
.influ-co-brief-note{margin-bottom:16px;}
.influ-co-payment{padding-bottom:22px;}

/* ---------- swarm summary (checkout + confirmation) ---------- */
.influ-co-summary{
  border:1px solid var(--line); border-radius:16px; background:var(--white); padding:20px;
  position:sticky; top:96px;
}
.influ-co-summary h2{font-family:var(--font-display); font-size:1.05rem; margin-bottom:14px;}
.influ-co-group{padding:12px 0; border-bottom:1px solid var(--line);}
.influ-co-group:last-of-type{border-bottom:none;}
.influ-co-group-head{display:flex; align-items:center; gap:9px; margin-bottom:8px;}
.influ-co-group-head .cc-avatar{width:28px; height:28px; font-size:.7rem; border-radius:9px; flex-shrink:0;}
.influ-co-group-name{font-family:var(--font-display); font-weight:600; font-size:.9rem;}
.influ-co-line{display:flex; align-items:center; gap:9px; padding:4px 0 4px 37px; font-size:.85rem;}
.influ-co-line .sw{width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.influ-co-line-label{flex:1; color:var(--ink);}
.influ-co-line-price{font-family:var(--font-mono); font-size:.8rem; color:var(--mint-deep);}
.influ-co-totals{margin-top:14px; padding-top:12px; border-top:1px solid var(--line);}
.influ-co-total{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-family:var(--font-mono); font-size:.84rem; color:var(--ink-soft);}
.influ-co-total.is-discount{color:var(--mint-deep);}
.influ-co-total.is-grand{
  margin-top:8px; padding-top:11px; border-top:1px solid var(--line);
  font-size:1rem; font-weight:600; color:var(--charcoal);
}
.influ-co-total bdi, .influ-co-total .amount{font-family:var(--font-mono);}
.influ-co-edit{
  display:block; text-align:center; margin-top:14px; font-family:var(--font-mono);
  font-size:.75rem; color:var(--ink-soft); text-decoration:none;
}
.influ-co-edit:hover{color:var(--mint-deep);}

.influ-co-trust{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px;}
.influ-co-trust li{font-size:.8rem; color:var(--ink-soft); line-height:1.5; padding-left:22px; position:relative;}
.influ-co-trust li::before{
  content:''; position:absolute; left:0; top:5px; width:13px; height:13px; border-radius:50%;
  background:var(--mint-tint); border:1px solid var(--mint);
}
.influ-co-trust strong{color:var(--charcoal); font-weight:600;}
.influ-co-authlinks{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
/* The whole sidebar sticks, not the summary alone: with only the summary sticky, the trust
   notes under it scrolled up behind it and the two overlapped. A viewport too short to hold
   the sidebar lets it scroll normally. */
.influ-co-side{position:sticky; top:96px; align-self:start;}
.influ-co-side .influ-co-summary{position:static;}
@media (max-width:900px), (max-height:720px){ .influ-co-side{position:static;} }

/* Campaign page while creators are still answering. */
.sg-state{margin:8px 0 2px; font-size:.84rem; color:var(--ink-soft);}
.sg-state.is-offer{color:#8a5a00; font-weight:600;}
.sg-state.is-agreed{color:var(--mint-deep);}
.sg-state.is-out{opacity:.75;}
.influ-order-estimate{margin:10px 0 0; font-size:.8rem; color:var(--ink-soft); line-height:1.5;}

/* Urgent brief: problems listed on the page, not in a browser bubble. */
.pitch-error{margin:0 0 14px; padding:12px 14px; border:1px solid #f0b8a8; background:#fff5f2; border-radius:10px; font-size:.88rem; color:#8a2d14;}
.pitch-error ul{margin:6px 0 0 18px; padding:0;}

/* ---------- payment box (Woo-rendered) ---------- */
.influ-co-payment ul.wc_payment_methods{list-style:none; margin:0 0 14px; padding:0;}
.influ-co-payment li.wc_payment_method{
  border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin-bottom:9px; background:var(--paper);
}
.influ-co-payment li.wc_payment_method label{display:inline; font-weight:600; margin:0 0 0 7px; cursor:pointer;}
.influ-co-payment .payment_box{
  margin-top:9px; padding:11px 13px; border-radius:10px;
  background:var(--white); border:1px solid var(--line); font-size:.83rem; color:var(--ink-soft);
}
.influ-co-payment .payment_box p:last-child{margin-bottom:0;}
.influ-co-payment .woocommerce-terms-and-conditions-wrapper{margin-bottom:14px; font-size:.83rem; color:var(--ink-soft);}
.influ-co-payment .form-row.place-order{margin:0;}
.influ-co-payment #place_order{
  width:100%; padding:15px 22px; border:none; border-radius:999px; cursor:pointer;
  background:var(--charcoal); color:var(--white);
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  transition:background .2s ease, transform .15s ease;
}
.influ-co-payment #place_order:hover{background:var(--mint-deep); transform:translateY(-1px);}
.influ-payments-off{
  font-size:.78rem; color:var(--ink-soft); background:var(--mint-tint);
  border-radius:10px; padding:11px 13px; margin-top:14px;
}

/* ---------- Woo notices ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews{
  list-style:none; margin:0 0 18px; padding:13px 16px; border-radius:12px;
  font-size:.88rem; border:1px solid var(--line); background:var(--mint-tint); color:var(--ink);
}
.woocommerce-error{background:#fdecea; border-color:#f5c2c0; color:#8e2a24;}
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li{list-style:none;}
.woocommerce-message a, .woocommerce-info a{color:var(--mint-deep); font-weight:600;}
.woocommerce form .form-row.woocommerce-invalid input{border-color:var(--coral);}

/* ---------- confirmation ---------- */
.influ-ty-head{position:relative; overflow:hidden; padding-top:52px;}
.influ-ty-mark{
  width:52px; height:52px; border-radius:16px; margin-bottom:16px;
  background:var(--mint); color:var(--charcoal);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(62,180,137,.32);
}
.influ-ty-grid{display:grid; gap:28px; align-items:start; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);}
@media (max-width:900px){ .influ-ty-grid{grid-template-columns:1fr;} }
.influ-ty-next, .influ-ty-creators, .influ-ty-brief{margin-bottom:30px;}
.influ-ty-next h2, .influ-ty-creators h2, .influ-ty-brief h2, .influ-order-sub{
  font-family:var(--font-display); font-size:1.15rem; margin-bottom:14px;
}
.influ-ty-timeline{list-style:none; margin:0; padding:0 0 0 26px; position:relative;}
.influ-ty-timeline::before{content:''; position:absolute; left:6px; top:7px; bottom:7px; width:2px; background:var(--line);}
.influ-ty-timeline li{position:relative; padding-bottom:18px;}
.influ-ty-timeline li::before{
  content:''; position:absolute; left:-26px; top:4px; width:14px; height:14px; border-radius:50%;
  background:var(--white); border:2px solid var(--line);
}
.influ-ty-timeline li.is-done::before{background:var(--mint); border-color:var(--mint);}
.influ-ty-timeline strong{display:block; font-family:var(--font-display); font-size:.95rem; color:var(--charcoal);}
.influ-ty-timeline span{display:block; font-size:.86rem; color:var(--ink-soft); margin-top:3px; line-height:1.5;}
.influ-ty-brief blockquote{
  margin:0; padding:15px 18px; border-radius:12px; background:var(--mint-tint);
  border-left:3px solid var(--mint); font-size:.9rem; line-height:1.6; color:var(--ink);
}
.influ-ty-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}

/* ---------- account ---------- */
.woocommerce-account .woocommerce{
  max-width:var(--max); margin:0 auto; padding:0 24px 64px;
  display:grid; gap:32px; grid-template-columns:236px minmax(0,1fr); align-items:start;
}
@media (max-width:860px){ .woocommerce-account .woocommerce{grid-template-columns:1fr; gap:22px;} }

.influ-acct-nav{
  border:1px solid var(--line); border-radius:16px; background:var(--white);
  padding:18px 14px; position:sticky; top:96px;
}
@media (max-width:860px){ .influ-acct-nav{position:static;} }
.influ-acct-id{display:flex; align-items:center; gap:10px; padding:0 6px 14px; border-bottom:1px solid var(--line); margin-bottom:10px;}
.influ-acct-id .cc-avatar{width:38px; height:38px; font-size:.85rem; border-radius:11px; flex-shrink:0;}
.influ-acct-id-text{min-width:0;}
.influ-acct-name{font-family:var(--font-display); font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.influ-acct-email{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.influ-acct-nav ul{list-style:none; margin:0; padding:0;}
.influ-acct-nav li a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:10px; text-decoration:none;
  color:var(--ink); font-size:.9rem; font-weight:500;
}
.influ-acct-nav li a:hover{background:var(--mint-tint); color:var(--mint-deep);}
.influ-acct-nav li.is-active > a, .influ-acct-nav li.woocommerce-MyAccount-navigation-link--dashboard.is-active > a{
  background:var(--charcoal); color:var(--white);
}
.influ-acct-badge{
  min-width:19px; height:19px; padding:0 6px; border-radius:999px;
  background:var(--coral); color:#fff; font-family:var(--font-mono); font-size:.66rem;
  display:inline-flex; align-items:center; justify-content:center;
}

.influ-acct-hello{font-family:var(--font-display); font-size:1.35rem; margin-bottom:18px;}
.influ-acct-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:30px;}
@media (max-width:700px){ .influ-acct-stats{grid-template-columns:repeat(2,minmax(0,1fr));} }
.influ-stat{
  border:1px solid var(--line); border-radius:14px; background:var(--white);
  padding:15px 16px; text-decoration:none; color:inherit; display:block;
}
.influ-stat.is-link{transition:border-color .2s ease, transform .2s ease;}
.influ-stat.is-link:hover{border-color:var(--mint); transform:translateY(-2px);}
.influ-stat.has-unread{border-color:var(--coral); background:#fff7f5;}
.influ-stat-num{font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--charcoal); line-height:1.15;}
.influ-stat-num .amount, .influ-stat-num bdi{font-size:1.05rem; font-family:var(--font-mono);}
.influ-stat-label{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-top:5px;}

.influ-acct-section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
.influ-acct-section-head h3{font-family:var(--font-display); font-size:1.05rem;}
.influ-acct-section-head a{font-family:var(--font-mono); font-size:.75rem; color:var(--mint-deep); text-decoration:none;}

.influ-campaign-card{
  display:block; border:1px solid var(--line); border-radius:16px; background:var(--white);
  padding:17px 19px; margin-bottom:12px; text-decoration:none; color:inherit;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.influ-campaign-card:hover{border-color:var(--mint); transform:translateY(-2px); box-shadow:0 14px 30px rgba(26,26,26,.07);}
.influ-campaign-top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:13px;}
.influ-campaign-name{font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--charcoal);}
.influ-campaign-meta{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); margin-top:3px;}
.influ-campaign-faces{display:flex; align-items:center; gap:0;}
.influ-campaign-faces .cc-avatar{
  width:30px; height:30px; font-size:.68rem; border-radius:50%; flex-shrink:0;
  border:2px solid var(--white); margin-right:-8px;
}
.influ-campaign-faces .cc-avatar.is-more{background:var(--paper); color:var(--ink-soft); border-color:var(--white);}
.influ-campaign-total{margin-left:auto; font-family:var(--font-mono); font-size:.9rem; font-weight:600; color:var(--charcoal);}

.influ-status{
  flex-shrink:0; padding:4px 11px; border-radius:999px; white-space:nowrap;
  font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);
}
.influ-status.is-on-hold{background:#fff7e8; border-color:#f0dcb4; color:#8a6414;}
.influ-status.is-processing{background:var(--mint-tint); border-color:var(--mint); color:var(--mint-deep);}
.influ-status.is-completed{background:var(--mint); border-color:var(--mint); color:var(--charcoal);}
.influ-status.is-cancelled, .influ-status.is-failed, .influ-status.is-refunded{background:#fdecea; border-color:#f5c2c0; color:#8e2a24;}

.influ-acct-empty{
  border:1px dashed var(--line); border-radius:16px; background:var(--white);
  padding:40px 28px; text-align:center;
}
.influ-acct-empty h3{font-family:var(--font-display); font-size:1.15rem; margin-bottom:7px;}
.influ-acct-empty p{color:var(--ink-soft); font-size:.92rem; max-width:44ch; margin:0 auto 18px;}

.influ-order-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:22px;}
.influ-order-head h2{font-family:var(--font-display); font-size:1.3rem;}
.influ-order-meta{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); margin-top:4px;}
.influ-order-totals{
  margin-top:20px; padding:16px 18px; border:1px solid var(--line);
  border-radius:14px; background:var(--white);
}

/* Account details / lost-password forms Woo renders raw */
.woocommerce-account .woocommerce-form,
.woocommerce-account .woocommerce-EditAccountForm{
  border:1px solid var(--line); border-radius:16px; background:var(--white); padding:22px; max-width:560px;
}
.woocommerce-account fieldset{border:1px solid var(--line); border-radius:12px; padding:16px; margin:20px 0 0;}
.woocommerce-account legend{padding:0 8px; font-family:var(--font-display); font-weight:600; font-size:.9rem;}
.woocommerce-account button[type=submit], .influ-co button[type=submit]{
  padding:11px 22px; border:none; border-radius:999px; cursor:pointer;
  background:var(--charcoal); color:var(--white); font-family:var(--font-display); font-weight:600; font-size:.9rem;
}
.woocommerce-account button[type=submit]:hover{background:var(--mint-deep);}

.influ-acct-pager{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px;}
.influ-acct-pager-count{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft);}

/* Campaign updates (Woo customer order notes) */
.influ-order-updates{margin-top:28px;}
.influ-updates{list-style:none; margin:0; padding:0 0 0 24px; position:relative;}
.influ-updates::before{content:''; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:var(--line);}
.influ-updates li{position:relative; padding-bottom:16px;}
.influ-updates li::before{
  content:''; position:absolute; left:-24px; top:5px; width:12px; height:12px;
  border-radius:50%; background:var(--mint); border:2px solid var(--white);
}
.influ-update-date{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);}
.influ-update-text{font-size:.9rem; color:var(--ink); margin-top:2px;}
.influ-update-text p{margin:0;}

/* Woo sprinkles <mark> through its default copy; with Woo's stylesheet dequeued it would
   otherwise render as browser-default yellow highlighter. */
.woocommerce mark, .woocommerce-account mark{background:none; color:var(--charcoal); font-weight:600;}


/* =========================================================================
   STOREFRONT II: notices, account forms, auth gates, coupon, order-pay

   The second half of the WooCommerce surfaces. Everything below styles markup
   Woo prints -- notices, the account forms, the coupon toggle, the pay-for-order
   page -- against the same tokens as the block above. Woo's own stylesheets are
   dequeued (Influ_Storefront::drop_woo_general_styles), so if it is not here it
   renders as browser default.

   One rule shapes most of this: Woo's checkout script deletes notices by
   selecting `.woocommerce-error`, `.woocommerce-message` and `.woocommerce-info`
   directly, and re-injects its own copies of those elements with no theme
   classes on them. So the notice styling hangs off Woo's class names rather
   than off a wrapper -- a wrapper would be orphaned on every AJAX refresh, and
   an `.influ-*`-only rule would leave JS-injected notices unstyled.
   ========================================================================= */

/* Visually hidden but still read out. WordPress themes are expected to provide
   this; Woo's templates use it for the labels a sighted user gets from context. */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- notices ------------------------------------------------------
   Three states, one shape: a card with a status badge in the gutter. The badge
   is a pseudo-element so the DOM stays exactly what Woo expects. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews{
  position:relative; list-style:none;
  margin:0 0 var(--sp-5); padding:var(--sp-4) var(--sp-5) var(--sp-4) 54px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--white); box-shadow:var(--e-1);
  font-size:var(--fs-base); line-height:1.55; color:var(--ink);
}
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-noreviews::before{
  content:'i'; position:absolute; left:var(--sp-4); top:var(--sp-4);
  width:22px; height:22px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.78rem; line-height:1;
  color:var(--white); background:var(--ink-soft);
}
.woocommerce-error{background:#FEF5F3; border-color:#F1C8C1; color:#7E2C24;}
.woocommerce-error::before{content:'!'; background:#C0463A;}
.woocommerce-message{background:var(--mint-tint); border-color:var(--mint); color:var(--ink);}
.woocommerce-message::before{content:'\2713'; background:var(--mint-deep); font-size:.72rem;}
.woocommerce-info,
.woocommerce-noreviews{background:var(--paper); border-color:var(--line);}
.woocommerce-info::before,
.woocommerce-noreviews::before{background:var(--charcoal);}

/* Woo's error notice is a <ul>; its AJAX-injected one is a <div> holding <li>s.
   Both land here, so the list has to behave either way. */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li{list-style:none; margin:0;}
.woocommerce-error li + li,
.woocommerce-message li + li,
.woocommerce-info li + li{margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid rgba(26,26,26,.07);}
.woocommerce-error p:last-child,
.woocommerce-message p:last-child,
.woocommerce-info p:last-child{margin-bottom:0;}
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a{color:inherit; font-weight:600; text-underline-offset:2px;}

/* Woo hangs action links off some notices ("View cart", "Log in"). Stock gives
   them .button, which without Woo's stylesheet is an unstyled inline link. */
.woocommerce-message .button,
.woocommerce-info .button{
  display:inline-flex; align-items:center; margin-left:var(--sp-3);
  padding:6px 14px; border-radius:var(--r-full);
  background:var(--charcoal); color:var(--white);
  font-size:var(--fs-sm); font-weight:600; text-decoration:none;
  transition:background var(--t-fast) var(--ease);
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover{background:var(--mint-deep); color:var(--white);}

/* wc_print_notices() runs before the checkout/cart template opens its own .wrap,
   so without this a validation error spans the full viewport while the form it
   refers to is inset. Matches .wrap's max-width and gutter. */
.woocommerce-checkout .woocommerce > .woocommerce-error,
.woocommerce-checkout .woocommerce > .woocommerce-message,
.woocommerce-checkout .woocommerce > .woocommerce-info,
.woocommerce-checkout > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .woocommerce-error,
.woocommerce-cart .woocommerce > .woocommerce-message,
.woocommerce-cart .woocommerce > .woocommerce-info{
  max-width:calc(var(--max) - 48px); margin-left:auto; margin-right:auto; margin-top:var(--sp-5);
}

/* ---------- logged-out account pages -------------------------------------
   Login signpost, lost password, reset password. Woo renders these into the
   same grid as the signed-in account pages, where the 236px navigation rail
   still exists as a column even though there is no navigation to put in it --
   which is why the stock login form was rendering 236px wide. */
body.woocommerce-account:not(.logged-in) .woocommerce{
  grid-template-columns:minmax(0,1fr);
  max-width:520px;
  padding-top:var(--sp-7);
}

.influ-gate{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--e-1); padding:var(--sp-7) var(--sp-6) var(--sp-6);
}
.influ-gate-title{
  font-family:var(--font-display); font-size:var(--fs-xl);
  line-height:1.2; margin:0 0 var(--sp-3);
}
.influ-gate-lede{
  color:var(--ink-soft); font-size:var(--fs-base); line-height:1.6;
  margin:0 0 var(--sp-6); max-width:42ch;
}
.influ-gate-actions{display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);}
.influ-gate-link{
  font-family:var(--font-mono); font-size:var(--fs-sm);
  color:var(--ink-soft); text-decoration:none;
}
.influ-gate-link:hover{color:var(--mint-deep);}
.influ-gate-foot{
  margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  font-size:var(--fs-base); color:var(--ink-soft);
}
.influ-gate-foot a{color:var(--mint-deep); font-weight:600; text-decoration:none;}
.influ-gate-foot a:hover{text-decoration:underline; text-underline-offset:2px;}

/* The one screen that earns being centred: nothing to do but read it. */
.influ-gate-done{text-align:center;}
.influ-gate-done .influ-gate-lede{margin-left:auto; margin-right:auto;}
.influ-gate-done .influ-gate-foot{justify-content:center;}
.influ-gate-mark{
  width:46px; height:46px; border-radius:var(--r-md); margin:0 auto var(--sp-5);
  background:var(--mint); color:var(--charcoal);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(62,180,137,.3);
}

/* ---------- account forms ------------------------------------------------ */
.influ-acct-page-head{margin-bottom:var(--sp-6);}
.influ-acct-page-head h2{font-family:var(--font-display); font-size:var(--fs-lg); margin:0 0 var(--sp-2);}
.influ-acct-page-head p{color:var(--ink-soft); font-size:var(--fs-base); margin:0; max-width:52ch;}

/* The block above wraps every .woocommerce-form / .woocommerce-EditAccountForm in a
   card. These templates draw their own cards per section, so the outer one is undone
   rather than nested. */
.woocommerce-account .woocommerce-EditAccountForm.influ-form,
.woocommerce-account .woocommerce-form.influ-form,
.woocommerce-account .influ-form{
  border:none; background:none; box-shadow:none; padding:0; max-width:none;
}

.influ-form-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--e-1); padding:var(--sp-6); margin:0 0 var(--sp-5);
}
.influ-form-card > h3{
  font-family:var(--font-display); font-size:var(--fs-md);
  margin:0 0 var(--sp-5); color:var(--charcoal);
}

.influ-field{margin:0 0 var(--sp-5);}
.influ-field:last-child{margin-bottom:0;}
.influ-field > label{
  display:block; font-size:var(--fs-sm); font-weight:600;
  color:var(--charcoal); margin-bottom:var(--sp-2);
}
.influ-field .required{color:var(--coral); text-decoration:none;}
.influ-field input[type=text],
.influ-field input[type=email],
.influ-field input[type=tel],
.influ-field input[type=password],
.influ-field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--white); font:inherit; font-size:var(--fs-base); color:var(--ink);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.influ-field input:focus,
.influ-field textarea:focus{
  outline:none; border-color:var(--mint); box-shadow:0 0 0 4px var(--mint-tint);
}
.influ-field-hint{
  display:block; font-size:var(--fs-sm); color:var(--ink-soft);
  line-height:1.5; margin-top:var(--sp-2);
}

.influ-field-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-4);}
@media (max-width:560px){ .influ-field-grid{grid-template-columns:1fr;} }
/* Woo's own row classes float inside .influ-co; the grid does the same job here,
   and the two together stagger the pair down the page. */
.influ-field-grid .form-row-first,
.influ-field-grid .form-row-last{width:auto; float:none;}

/* Password change, collapsed. <details> rather than a script: it opens with the
   keyboard, survives the stylesheet failing to load, and a browser that finds a
   validation error inside a closed <details> opens it on its own. */
.influ-form-reveal{padding:0;}
.influ-form-reveal > summary{
  list-style:none; cursor:pointer; padding:var(--sp-5) var(--sp-6);
  display:flex; align-items:center; gap:var(--sp-4);
  border-radius:var(--r-lg);
}
.influ-form-reveal > summary::-webkit-details-marker{display:none;}
.influ-form-reveal > summary:hover{background:var(--paper);}
.influ-form-reveal > summary:focus-visible{outline:2px solid var(--mint); outline-offset:-2px;}
.influ-form-reveal-title{font-family:var(--font-display); font-weight:600; font-size:var(--fs-base); color:var(--charcoal);}
.influ-form-reveal-hint{font-size:var(--fs-sm); color:var(--ink-soft);}
.influ-form-reveal > summary::after{
  content:''; margin-left:auto; width:8px; height:8px;
  border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--t-fast) var(--ease);
}
.influ-form-reveal[open] > summary::after{transform:translateY(2px) rotate(-135deg);}
.woocommerce-account .influ-form-reveal fieldset{
  border:none; margin:0; padding:0 var(--sp-6) var(--sp-6);
}
@media (max-width:560px){
  .influ-form-reveal > summary{flex-wrap:wrap; gap:var(--sp-1) var(--sp-3);}
  .influ-form-reveal-hint{flex-basis:100%;}
}

.influ-form-submit{margin:var(--sp-6) 0 0;}
/* Undo the generic account submit-button rule so the site's .btn wins where a
   template opts into it. */
.woocommerce-account .influ-form button[type=submit].btn,
.influ-co .influ-form button[type=submit].btn{
  padding:14px 26px; border:1.5px solid transparent;
  font-family:var(--font-body); font-size:var(--fs-base);
}

/* Checkbox rows: a label that is a row, not a block heading. */
.influ-check,
.woocommerce-account label.influ-check,
.influ-co label.influ-check{
  display:flex; align-items:center; gap:var(--sp-2); margin:0;
  font-size:var(--fs-base); font-weight:500; color:var(--ink); cursor:pointer;
}
.influ-check input{width:auto; margin:0; accent-color:var(--mint-deep);}

/* ---------- coupon -------------------------------------------------------
   Demoted from a full-width notice to a line of text. */
.influ-coupon-toggle{
  font-size:var(--fs-sm); color:var(--ink-soft);
  margin:0 0 var(--sp-4);
}
.influ-coupon-toggle a.showcoupon{
  color:var(--mint-deep); font-weight:600; text-decoration:none;
  border-bottom:1px solid transparent;
}
.influ-coupon-toggle a.showcoupon:hover{border-bottom-color:var(--mint-deep);}
.influ-coupon-form{margin:0 0 var(--sp-5);}
.influ-coupon-row{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  max-width:420px; padding:var(--sp-4);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--white); box-shadow:var(--e-1);
}
.influ-coupon-row .input-text{flex:1 1 180px; min-width:0;}
.influ-coupon-row .btn{flex:0 0 auto;}

/* ---------- pay for order ------------------------------------------------ */
.influ-pay{padding-bottom:var(--sp-8);}
.influ-pay-grid{
  display:grid; gap:var(--sp-6); align-items:start;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
}
@media (max-width:900px){ .influ-pay-grid{grid-template-columns:1fr;} }
/* The summary is the content here, not a rail alongside it -- nothing to stick to. */
.influ-pay-summary{position:static; padding:var(--sp-5);}
.influ-co-line.is-plain{padding-left:0; justify-content:space-between;}
.influ-co-line-qty{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft);}
.influ-pay .influ-co-payment h2{margin-bottom:var(--sp-4);}

/* ---------- inline login (global/form-login.php) ------------------------- */
.influ-inline-login{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--e-1); padding:var(--sp-6); margin:0 0 var(--sp-5); max-width:560px;
}
.influ-inline-login-msg{font-size:var(--fs-base); color:var(--ink-soft); margin-bottom:var(--sp-5);}
.influ-inline-login-msg p:last-child{margin-bottom:0;}
.influ-inline-login-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-2);
}
.influ-inline-login-lost{margin:var(--sp-4) 0 0;}
.influ-inline-login-lost a{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-soft); text-decoration:none;}
.influ-inline-login-lost a:hover{color:var(--mint-deep);}

/* ---------- quantity input ---------------------------------------------- */
.influ-qty input{
  width:78px; padding:11px 12px; text-align:center;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--white); font:inherit; font-size:var(--fs-base); color:var(--ink);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.influ-qty input:focus{outline:none; border-color:var(--mint); box-shadow:0 0 0 4px var(--mint-tint);}
.influ-qty.is-readonly input{background:var(--paper); color:var(--ink-soft);}

/* ---------- /login.html shell -------------------------------------------
   myaccount/form-login.php hands every logged-out visitor to this page, so it
   cannot be the one screen in the flow that is unstyled. The markup predates
   this stylesheet (it was ported from the static login.html demo) and its
   classes had no rules at all: the card was rendering as full-bleed text. */
.auth-wrap{
  position:relative; display:flex; justify-content:center;
  max-width:var(--max); margin:0 auto;
  padding:var(--sp-8) var(--gutter) var(--sp-9);
}
.auth-card{
  position:relative; z-index:1; width:100%; max-width:440px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--e-2); padding:var(--sp-7) var(--sp-6) var(--sp-6);
}
.auth-head{text-align:center; margin-bottom:var(--sp-6);}
.auth-head .logo-mark{margin:0 auto var(--sp-4);}
.auth-head h1{font-family:var(--font-display); line-height:1.2;}
.auth-card .divider{
  display:flex; align-items:center; gap:var(--sp-3);
  margin:var(--sp-5) 0; font-family:var(--font-mono);
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);
}
.auth-card .divider::before,
.auth-card .divider::after{content:''; flex:1; height:1px; background:var(--line);}
.auth-foot{
  margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--line);
  text-align:center; font-size:var(--fs-base); color:var(--ink-soft);
}
.auth-foot a{color:var(--mint-deep); font-weight:600; text-decoration:none;}
.auth-foot a:hover{text-decoration:underline; text-underline-offset:2px;}

/* ---------- Woo's show/hide password control -----------------------------
   woocommerce.js rewrites every password field at runtime, wrapping the input
   in <span class="password-input"> and appending an empty
   <span class="show-password-input"> toggle. Neither has any content or styling
   of its own, so unstyled it renders as a stray 10px box beside a password box
   that has shrunk to fit an inline span. Both are fixed here rather than in a
   template, because the template never sees this markup -- the script adds it
   after the page has rendered. */
.password-input{position:relative; display:block;}
.password-input input{padding-right:78px;}
.show-password-input{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  padding:5px 9px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); color:var(--ink-soft); cursor:pointer;
  font-family:var(--font-mono); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.06em; line-height:1;
  user-select:none; transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.show-password-input::after{content:'Show';}
.show-password-input.display-password::after{content:'Hide';}
.show-password-input:hover{color:var(--mint-deep); border-color:var(--mint);}

/* The account pages sit directly under a sticky header, and the grid's only top
   spacing was whatever margin the first child happened to have -- which on the
   dashboard is none, so "Hello, ..." was tucked behind the header bar. */
.woocommerce-account .woocommerce{padding-top:var(--sp-6);}

/* The theme's FAQ accordion styles bare `details`, `summary` and `details p`
   globally (see the FAQ block above), so the password disclosure inherited a
   bottom rule, 20px of vertical padding and -- the visible one -- `max-width:64ch`
   on its paragraphs, which cut the password fields ~180px short of the fields in
   the card above them. Unset here rather than by renaming the FAQ rules, which
   are load-bearing on another page. */
.influ-form-reveal{border-bottom:none;}
.influ-form-reveal p.influ-field{
  max-width:none; margin:0 0 var(--sp-5);
  color:var(--ink); font-size:var(--fs-base);
}
.influ-form-reveal p.influ-field:last-child{margin-bottom:0;}

/* Woo's checkout script reports a rejected coupon inline rather than as a notice:
   it adds .has-error to the input and appends a bare <span class="coupon-error-notice">
   next to it. Neither carries any styling of its own, so the rejection was reading
   as ordinary body text inside the promo box. */
.influ-coupon-row .input-text.has-error{
  border-color:#C0463A; box-shadow:0 0 0 4px rgba(192,70,58,.12);
}
.coupon-error-notice{
  flex-basis:100%; margin-top:var(--sp-1);
  font-size:var(--fs-sm); line-height:1.5; color:#8E2A24;
}

/* The rule above keys off `:not(.logged-in)`, which covers the ordinary case but
   not a signed-in person who follows a "reset your password" link: Woo renders
   those endpoints with no navigation, so the gate card landed in the 236px rail
   that the navigation would have occupied. Keying off the card itself covers
   both; the body-class rule stays as the fallback where :has() is unsupported. */
.woocommerce-account .woocommerce:has(> .influ-gate){
  grid-template-columns:minmax(0,1fr);
  max-width:520px;
}

/* ---------- WOO PAGES: breathing room under the sticky header ----------
   header.site is position:sticky, and the WooCommerce surfaces render their own
   containers rather than the theme's .page-header. Measured on /my-account the gap
   between the header's bottom edge and the first content pixel was exactly 0 -- the
   panels sat flush against the glass. These give every Woo surface the same top
   rhythm the rest of the site gets from .page-header. */
.woocommerce-account .woocommerce{padding-top:var(--sp-6) !important;}
.woocommerce-cart .influ-cart,
.woocommerce-checkout .influ-co{padding-top:var(--sp-5);}

/* The account sidebar is sticky too; 96px cleared the old header height but the header
   measures 77px, so this keeps it clear of the glass without floating oddly far down. */
.influ-acct-nav{top:calc(77px + var(--sp-4));}

/* Woo prints notices before our containers; without a container of their own they ran
   edge to edge. */
.woocommerce-notices-wrapper{max-width:var(--max); margin:0 auto; padding:var(--sp-4) var(--gutter) 0;}
.woocommerce-cart .woocommerce-notices-wrapper:empty,
.woocommerce-checkout .woocommerce-notices-wrapper:empty{padding:0;}

/* ---------- RATINGS ---------- */

/* Profile: what brands said */
.reviews-section{margin-top:var(--sp-8);}
.reviews-empty{color:var(--ink-soft); font-size:var(--fs-base); max-width:52ch;}
.reviews-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:var(--sp-4); align-items:start;}
.review-card{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--white);
  padding:var(--sp-4); box-shadow:var(--e-1);
}
/* Stars and brand on one line, date pinned right. Without the min-width the date's
   margin-left:auto forced it onto its own line as soon as the brand name got long. */
.review-head{display:flex; align-items:baseline; gap:var(--sp-2); margin-bottom:var(--sp-2);}
.review-head .review-brand{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.review-head .stars{color:var(--gold); letter-spacing:1px; font-size:var(--fs-sm);}
.review-brand{font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm); color:var(--charcoal);}
.review-date{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft); flex-shrink:0;}
.review-body{font-size:var(--fs-base); line-height:1.55; color:var(--ink); margin:0;}

/* Account: leaving a rating on a completed campaign */
.influ-rate{margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line);}
.influ-rate-locked{
  font-size:var(--fs-sm); color:var(--ink-soft); background:var(--mint-tint);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
}
.influ-rate-row{
  display:flex; align-items:flex-start; gap:var(--sp-4); flex-wrap:wrap;
  padding:var(--sp-4) 0; border-bottom:1px solid var(--line);
}
.influ-rate-row:last-child{border-bottom:none;}
.influ-rate-who{display:flex; align-items:center; gap:var(--sp-2); min-width:190px;}
.influ-rate-who .cc-avatar{width:34px; height:34px; font-size:var(--fs-xs); border-radius:var(--r-sm); flex-shrink:0;}
.influ-rate-name{font-family:var(--font-display); font-weight:600; font-size:var(--fs-base);}
.influ-rate-form{flex:1; min-width:240px; display:flex; flex-direction:column; gap:var(--sp-2);}
.influ-rate-form textarea{
  width:100%; padding:var(--sp-2) var(--sp-3); border:1px solid var(--line);
  border-radius:var(--r-sm); font:inherit; font-size:var(--fs-sm); resize:vertical;
}
.influ-rate-form textarea:focus{outline:2px solid var(--mint); outline-offset:1px; border-color:var(--mint);}
.influ-rate-form button{align-self:flex-start;}
.influ-rate-msg{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft);}

/* Star picker. Rendered 5..1 in source so the CSS sibling selector can light up the
   hovered star and everything before it -- there is no "previous sibling" selector, so
   reversing the DOM order and flipping it back with row-reverse is what makes this work
   with real radio inputs (and therefore with a keyboard) instead of divs and JS. */
.influ-stars{display:flex; flex-direction:row-reverse; justify-content:flex-end; border:none; margin:0; padding:0; gap:2px;}
.influ-stars input{position:absolute; opacity:0; width:1px; height:1px;}
.influ-stars label{
  font-size:1.45rem; line-height:1; color:var(--line); cursor:pointer;
  transition:color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.influ-stars label:hover,
.influ-stars label:hover ~ label,
.influ-stars input:checked ~ label{color:var(--gold);}
.influ-stars label:hover{transform:scale(1.12);}
.influ-stars input:focus-visible + label{outline:2px solid var(--mint-deep); outline-offset:2px; border-radius:3px;}

.influ-rate-done{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;}
.influ-rate-done .stars{color:var(--gold); letter-spacing:1px;}
.influ-rate-thanks{font-size:var(--fs-sm); color:var(--ink-soft);}

/* ============================================================
   CAMPAIGNS — the booking pipeline, both sides
   ============================================================
   Two surfaces share this block: the creator's /campaigns/ page and the panel
   printed under a brand's order. They deliberately look like the same object,
   because they ARE the same object seen from two sides -- a brand and a creator
   arguing about a campaign should be pointing at identically shaped things. */

.campaigns-page{padding:var(--section-y) 0;}
.campaigns-head{max-width:62ch; margin:0 0 var(--sp-6);}
.campaigns-head h1{font-family:var(--font-display); font-size:var(--fs-2xl); margin:0 0 var(--sp-2);}
.campaigns-lede{color:var(--ink-soft); font-size:var(--fs-base); margin:0;}

.campaigns-empty{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-7) var(--sp-6); text-align:center; box-shadow:var(--e-1);
  max-width:56ch; margin:0 auto;
}
.campaigns-empty h1,.campaigns-empty h2{font-family:var(--font-display); margin:0 0 var(--sp-3);}
.campaigns-empty p{color:var(--ink-soft); margin:0 0 var(--sp-5);}

.influ-notice{
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-5);
  font-size:var(--fs-sm); border:1px solid var(--line); background:var(--white);
}
.influ-notice.is-ok{background:var(--mint-tint); border-color:var(--mint); color:var(--mint-deep);}
.influ-notice.is-err{background:#FDF0EC; border-color:var(--coral); color:#A2432B;}
/* Woo's notice templates print .woocommerce-message AND .influ-notice. .influ-notice came
   later and set its own padding, which took away the gutter the status badge sits in, so
   the tick landed on top of the first letters ("\2713ur password has been reset"). */
.woocommerce-message.influ-notice,
.woocommerce-info.influ-notice,
.woocommerce-error.influ-notice{padding:var(--sp-4) var(--sp-5) var(--sp-4) 54px; font-size:var(--fs-base);}

/* ---- the creator's card ---- */

.campaign-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6); margin:0 0 var(--sp-5); box-shadow:var(--e-1);
}
/* A brief still waiting on an answer is the only thing on this page that is urgent.
   Everything else is a record, so only this one gets the accent edge. */
.campaign-card.is-pending{border-left:3px solid var(--mint); }
.campaign-card.is-booked{border-left:3px solid var(--gold);}

.campaign-card-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--sp-4); flex-wrap:wrap; margin:0 0 var(--sp-4);
}
.campaign-card-head h2{font-family:var(--font-display); font-size:var(--fs-lg); margin:0;}
.campaign-card-meta{color:var(--ink-soft); font-size:var(--fs-sm); margin:var(--sp-1) 0 0;}

.campaign-badge{
  display:inline-block; padding:4px 10px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.02em; white-space:nowrap;
  background:var(--mint-tint); color:var(--mint-deep); border:1px solid var(--line);
}
.campaign-badge.is-pending{background:#FFF6E4; color:#8A6520; border-color:#F0DDB4;}
.campaign-badge.is-offered{background:#EFF2FD; color:#3C4A8C; border-color:#D6DDF7;}
.campaign-badge.is-booked{background:var(--mint-tint); color:var(--mint-deep);}
.campaign-badge.is-submitted{background:#F1EDFB; color:#5B3FA0; border-color:#DFD5F3;}
.campaign-badge.is-approved{background:var(--mint); color:var(--white); border-color:var(--mint);}
.campaign-badge.is-declined,
.campaign-badge.is-expired,
.campaign-badge.is-dropped,
.campaign-badge.is-missed{background:#F3F5F4; color:var(--ink-soft); border-color:var(--line);}

.campaign-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-4); margin:0 0 var(--sp-4); padding:var(--sp-4) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.campaign-facts dt{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 var(--sp-1);}
.campaign-facts dd{margin:0; font-weight:600; font-size:var(--fs-md);}

.campaign-brief{margin:0 0 var(--sp-4);}
.campaign-brief h3{font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 var(--sp-2);}
.campaign-brief p{margin:0; line-height:1.65;}

/* The clock. Monospaced on purpose: a deadline is a number you check, and a
   proportional face makes "4 hours left" and "4 days left" the same width. */
.campaign-clock{
  font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:600;
  color:var(--mint-deep); margin:0 0 var(--sp-4);
}
.campaign-clock span{font-weight:400; color:var(--ink-soft);}
.campaign-clock.is-late{color:var(--coral);}

/* ---- live timers ----
   Tabular monospaced digits, so the number does not shimmy as seconds change. Colour steps
   calm → soon → urgent at a day and at three hours, but colour is never the only signal:
   the label says what the clock is for, and urgent adds a pulse. Both stepped colours
   clear 4.5:1 on white. */
.influ-timer{--t:var(--mint-deep); display:inline-flex; flex-direction:column; gap:6px; min-width:0; vertical-align:top;}
.influ-timer-row{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px;}
.influ-timer-value{
  display:inline-flex; align-items:center; gap:.3em; white-space:nowrap;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--fs-lg); font-weight:700;
  line-height:1.15; color:var(--t);
}
.influ-timer-value small{font-size:.58em; font-weight:500; opacity:.75; margin-left:1px;}
.influ-timer-label{font-size:var(--fs-sm); color:var(--ink-soft);}
.influ-timer-at{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft);}
.influ-timer-bar{display:block; width:100%; min-width:140px; height:5px; border-radius:var(--r-full); background:rgba(26,26,26,.07); overflow:hidden;}
.influ-timer-bar i{display:block; width:0; height:100%; border-radius:inherit; background:var(--t); transition:width .6s var(--ease);}
.influ-timer.is-soon{--t:#9A6B12;}
.influ-timer.is-urgent{--t:#C2502F;}
.influ-timer.is-urgent .influ-timer-value::before{
  content:""; flex:none; width:.45em; height:.45em; margin-right:.1em; border-radius:50%;
  background:currentColor; animation:influ-pulse 1.4s ease-in-out infinite;
}
.influ-timer.is-done{--t:var(--ink-soft);}
.influ-timer.is-done .influ-timer-value{font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600;}
.influ-timer.is-done .influ-timer-label{display:none;}
.influ-timer.is-sm{gap:3px;}
.influ-timer.is-sm .influ-timer-value{font-size:var(--fs-sm);}
.influ-timer.is-sm .influ-timer-bar{height:3px; min-width:110px;}
@keyframes influ-pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.3; transform:scale(.65);}}

/* ---- the campaign clock: every step, and the one running now ---- */
.influ-clock{
  margin:var(--sp-4) 0 var(--sp-5); padding:var(--sp-5);
  background:linear-gradient(180deg,#FBFCFB,var(--paper)); border:1px solid var(--line); border-radius:var(--r-lg);
}
.influ-clock-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:var(--sp-2);}
.influ-clock-steps li{position:relative; min-width:0; padding:26px var(--sp-2) 0 0;}
.influ-clock-steps li::before{
  content:""; position:absolute; z-index:1; top:3px; left:0; width:12px; height:12px; box-sizing:border-box;
  border-radius:50%; background:var(--white); border:2px solid var(--line);
}
.influ-clock-steps li::after{content:""; position:absolute; top:8px; left:14px; right:calc(2px - var(--sp-2)); height:2px; background:var(--line);}
.influ-clock-steps li:last-child::after{display:none;}
.influ-clock-steps li.is-done::before{background:var(--mint); border-color:var(--mint);}
.influ-clock-steps li.is-done::after{background:var(--mint);}
.influ-clock-steps li.is-now::before{border-color:var(--mint-deep); box-shadow:0 0 0 4px rgba(62,180,137,.2);}
.influ-clock-steps li.is-now::after{background:linear-gradient(90deg,var(--mint) 0 45%,var(--line) 45%);}
.influ-clock-steps li.is-off{opacity:.45;}
.influ-clock-steps li.is-off::before{border-style:dashed;}
.influ-clock-label{display:block; font-size:var(--fs-sm); font-weight:600; line-height:1.3; color:var(--ink-soft);}
.influ-clock-steps li.is-done .influ-clock-label,
.influ-clock-steps li.is-now .influ-clock-label{color:var(--charcoal);}
.influ-clock-at{display:block; margin-top:2px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft);}
.influ-clock-now{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-5);
  margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px dashed var(--line);
}
.influ-clock-now-text{flex:1 1 240px; min-width:0;}
.influ-clock-now-text strong{display:block; font-family:var(--font-display); font-size:var(--fs-md); color:var(--charcoal);}
.influ-clock-now-text span{display:block; margin-top:2px; font-size:var(--fs-sm); line-height:1.5; color:var(--ink-soft);}
.influ-clock-now .influ-timer{flex:0 1 auto; align-items:flex-end; text-align:right;}
.influ-clock-now .influ-timer-row{justify-content:flex-end;}
.influ-clock-now .influ-timer-bar{min-width:220px;}
.influ-clock.is-compact{margin:0 0 var(--sp-4); padding:var(--sp-4);}
.influ-clock.is-compact .influ-clock-now{margin-top:var(--sp-4);}

/* Each creator's deadline on the brand's roster, and the next deadline on the campaigns list. */
.campaign-state .influ-timer{margin-top:2px;}
.influ-campaign-clock{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-4);
  margin:var(--sp-3) 0; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--paper);
}
.influ-campaign-clock-title{font-size:var(--fs-sm); font-weight:600; color:var(--charcoal);}

@media (max-width:640px){
  .influ-clock{padding:var(--sp-4);}
  .influ-clock-steps{grid-template-columns:minmax(0,1fr); gap:0;}
  .influ-clock-steps li{padding:0 0 var(--sp-3) 26px;}
  .influ-clock-steps li::after{top:17px; bottom:-3px; left:5px; right:auto; width:2px; height:auto;}
  .influ-clock-steps li.is-now::after{background:linear-gradient(180deg,var(--mint) 0 45%,var(--line) 45%);}
  .influ-clock-label,.influ-clock-at{display:inline;}
  .influ-clock-at{margin-left:6px;}
  .influ-clock-now .influ-timer{width:100%; align-items:flex-start; text-align:left;}
  .influ-clock-now .influ-timer-row{justify-content:flex-start;}
  .influ-clock-now .influ-timer-bar{min-width:0;}
}
@media (prefers-reduced-motion:reduce){
  .influ-timer.is-urgent .influ-timer-value::before{animation:none;}
  .influ-timer-bar i{transition:none;}
}

.campaign-decision{display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center;}
.btn-quiet{
  background:transparent; border:1px solid transparent; color:var(--ink-soft);
  font-size:var(--fs-sm); cursor:pointer; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-full);
}
.btn-quiet:hover{color:var(--coral); border-color:var(--line);}

.campaign-offer-form{margin:var(--sp-4) 0 0; border-top:1px dashed var(--line); padding-top:var(--sp-4);}
.campaign-offer-form summary{cursor:pointer; font-size:var(--fs-sm); font-weight:600; color:var(--mint-deep);}
.campaign-offer-form label{display:block; margin:var(--sp-3) 0; font-size:var(--fs-sm); font-weight:600;}
.campaign-offer-form input,
.campaign-offer-form textarea,
.campaign-proof input{
  display:block; width:100%; margin-top:var(--sp-2); padding:var(--sp-3);
  border:1px solid var(--line); border-radius:var(--r-sm); font:inherit; background:var(--paper);
}
.campaign-hint{font-size:var(--fs-sm); color:var(--ink-soft); margin:var(--sp-3) 0 0; line-height:1.6;}

.campaign-status-note{
  background:var(--paper); border-radius:var(--r-md); padding:var(--sp-4); font-size:var(--fs-base);
}
.campaign-status-note.is-live{background:var(--mint-tint);}
.campaign-status-note p{margin:0 0 var(--sp-2); line-height:1.65;}
.campaign-status-note p:last-child{margin-bottom:0;}
.campaign-reject-note{color:#A2432B;}
.campaign-proof{margin:var(--sp-4) 0 0;}
.campaign-proof label{display:block; font-size:var(--fs-sm); font-weight:600; margin:0 0 var(--sp-3);}

.campaigns-history{margin:var(--sp-7) 0 0;}
.campaigns-history h2{font-family:var(--font-display); font-size:var(--fs-lg); margin:0 0 var(--sp-4);}
.campaigns-history ul{list-style:none; margin:0; padding:0;}
.campaigns-history li{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-3) 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm);
}
.campaigns-history li span:not(.campaign-badge){color:var(--ink-soft);}
.campaigns-history .campaign-amount{margin-left:auto; font-weight:600; color:var(--ink);}

/* ---- the brand's panel, under the order table ---- */

.campaign-panel{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-6); margin:var(--sp-6) 0 0; box-shadow:var(--e-1);
}
.campaign-panel-head h2{font-family:var(--font-display); font-size:var(--fs-lg); margin:0 0 var(--sp-2);}
.campaign-lede{color:var(--ink-soft); font-size:var(--fs-base); line-height:1.65; margin:0 0 var(--sp-4); max-width:62ch;}
.campaign-actions{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin:var(--sp-4) 0 0;}

.campaign-offers{
  margin:var(--sp-5) 0 0; padding:var(--sp-5); border-radius:var(--r-md);
  background:#EFF2FD; border:1px solid #D6DDF7;
}
.campaign-offers h3{font-family:var(--font-display); font-size:var(--fs-md); margin:0 0 var(--sp-2);}
.campaign-offer{background:var(--white); border-radius:var(--r-md); padding:var(--sp-4); margin:var(--sp-4) 0 0;}
.campaign-offer blockquote{
  margin:var(--sp-3) 0; padding-left:var(--sp-4); border-left:2px solid var(--line);
  color:var(--ink-soft); font-size:var(--fs-sm); line-height:1.6;
}
.campaign-offer-actions{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; margin:var(--sp-3) 0 0;}

.campaign-who{display:flex; align-items:center; gap:var(--sp-3); min-width:0;}
.campaign-who img{border-radius:var(--r-full); object-fit:cover; flex:none;}
.campaign-who strong{display:block; font-size:var(--fs-base);}
.campaign-platforms,.campaign-sub{display:block; font-size:var(--fs-sm); color:var(--ink-soft);}
.campaign-price{font-size:var(--fs-sm); font-weight:600; color:var(--mint-deep);}
.campaign-price del{color:var(--ink-soft); font-weight:400; margin-left:var(--sp-2);}

.campaign-roster{list-style:none; margin:var(--sp-5) 0 0; padding:0;}
.campaign-row{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;
  gap:var(--sp-4); align-items:center;
  padding:var(--sp-4) 0; border-top:1px solid var(--line);
}
/* Dropped creators stay listed rather than disappearing -- a brand asking "where did
   the fifth one go?" needs an answer on the page, not a support ticket. */
.campaign-row.is-out{opacity:.55;}
.campaign-state{display:flex; flex-direction:column; gap:var(--sp-1); align-items:flex-start;}
.campaign-amount{text-align:right; font-weight:600; white-space:nowrap;}
.campaign-chat{display:block; font-size:var(--fs-sm); font-weight:500; color:var(--mint-deep); margin-top:var(--sp-1);}

@media (max-width:640px){
  .campaign-card{padding:var(--sp-5) var(--sp-4);}
  .campaign-panel{padding:var(--sp-5) var(--sp-4);}
  .campaign-row{grid-template-columns:1fr auto; row-gap:var(--sp-2);}
  .campaign-state{grid-column:1 / -1;}
  .campaign-decision .btn{flex:1 1 auto; text-align:center;}
}

/* Proof attempts and disputes. Both are the unhappy path, so they sit apart from the
   calm mint of a campaign that is going well without shouting at anyone. */
.campaign-attempts{font-size:var(--fs-sm); color:var(--ink-soft); margin:var(--sp-2) 0 0;}
.campaign-attempts strong{color:var(--coral);}
.campaign-sub.is-flagged{color:var(--coral); font-weight:600;}

.campaign-dispute{margin:var(--sp-2) 0 0;}
.campaign-dispute summary{
  cursor:pointer; font-size:var(--fs-sm); color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.campaign-dispute summary:hover{color:var(--coral);}
.campaign-dispute form{
  margin:var(--sp-3) 0 0; padding:var(--sp-4);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  max-width:34rem;
}
.campaign-dispute label{display:block; font-size:var(--fs-sm); font-weight:600; margin:0 0 var(--sp-3);}
.campaign-dispute select,
.campaign-dispute textarea{
  display:block; width:100%; margin-top:var(--sp-2); padding:var(--sp-3);
  border:1px solid var(--line); border-radius:var(--r-sm); font:inherit; background:var(--white);
}

/* ============================================================
   WALLET — what a creator has earned
   ============================================================ */

.wallet-page{padding:var(--section-y) 0;}
.campaigns-head-row{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;}
.campaigns-head-row h1{margin:0;}

/* The one number a creator opens this page for, given the room to be that. */
.wallet-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--sp-6);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-6); box-shadow:var(--e-1); margin:0 0 var(--sp-6);
}
.wallet-label{
  display:block; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); margin:0 0 var(--sp-2);
}
.wallet-figure{
  display:block; font-family:var(--font-display); font-size:var(--fs-2xl);
  line-height:1.05; color:var(--mint-deep);
}
.wallet-note{display:block; font-size:var(--fs-sm); color:var(--ink-soft); margin:var(--sp-3) 0 0; max-width:34ch;}

.wallet-progress{align-self:center;}
.wallet-progress-label{font-size:var(--fs-sm); font-weight:600; margin:0 0 var(--sp-3);}
.wallet-progress-label span{display:block; font-weight:400; color:var(--ink-soft);}
.wallet-progress-label.is-ready{color:var(--mint-deep);}
.wallet-bar{height:8px; border-radius:var(--r-full); background:var(--mint-tint); overflow:hidden;}
.wallet-bar span{display:block; height:100%; background:var(--mint); border-radius:var(--r-full);}
.wallet-hint{
  font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6;
  margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4);
  background:var(--paper); border-radius:var(--r-sm);
}
.wallet-hint strong{color:var(--ink);}

.wallet-pipeline,.wallet-approved,.wallet-lost,.wallet-ledger{margin:0 0 var(--sp-7);}
.wallet-pipeline h2,.wallet-approved h2,.wallet-lost h2,.wallet-ledger h2{
  font-family:var(--font-display); font-size:var(--fs-lg); margin:0 0 var(--sp-4);
}

.wallet-buckets{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--sp-4);}
.wallet-bucket{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-5); box-shadow:var(--e-1);
}
.wallet-bucket h3{font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft); margin:0 0 var(--sp-1);}
.wallet-bucket > strong{display:block; font-size:var(--fs-lg); font-family:var(--font-display); margin:0 0 var(--sp-4);}
.wallet-bucket ul{list-style:none; margin:0; padding:0;}
.wallet-bucket li{
  display:grid; grid-template-columns:1fr auto; gap:2px var(--sp-3);
  padding:var(--sp-3) 0; border-top:1px solid var(--line); font-size:var(--fs-sm);
}
.wallet-row-meta{color:var(--ink-soft); font-size:var(--fs-sm);}
.wallet-bucket .wallet-row-meta{grid-column:1;}
.wallet-row-amount{font-weight:600; white-space:nowrap; text-align:right; grid-row:1; grid-column:2;}

.wallet-list{list-style:none; margin:0; padding:0;}
.wallet-list li{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) 0; border-bottom:1px solid var(--line);
}
.wallet-list li.is-out{opacity:.6;}
.wallet-list strong{display:block;}
.wallet-badge{
  font-size:var(--fs-xs); font-weight:600; padding:4px 10px; border-radius:var(--r-full);
  background:#FFF6E4; color:#8A6520; white-space:nowrap;
}
.wallet-badge.is-paid{background:var(--mint-tint); color:var(--mint-deep);}

.wallet-ledger table{width:100%; border-collapse:collapse; font-size:var(--fs-sm);}
.wallet-ledger th{
  text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); font-weight:600; padding:0 0 var(--sp-3);
}
.wallet-ledger td{padding:var(--sp-3) 0; border-top:1px solid var(--line);}
.wallet-ledger .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.wallet-ledger .is-in{color:var(--mint-deep); font-weight:600;}
.wallet-ledger .is-out{color:var(--coral); font-weight:600;}

@media (max-width:760px){
  .wallet-hero{grid-template-columns:1fr; padding:var(--sp-5) var(--sp-4);}
  .wallet-list li{grid-template-columns:1fr auto; row-gap:var(--sp-2);}
  .wallet-badge{grid-column:1; justify-self:start;}
}

/* ============================================================
   BLOG — takeaways, FAQ and sources
   ============================================================
   Three blocks added for answer engines, but built to earn their place for a
   human reader too: a skimmer wants the summary, and anyone comparing platforms
   wants the questions answered without reading 500 words first. */

.post-takeaways{
  background:var(--mint-tint); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6); margin:0 0 var(--sp-6); max-width:var(--max);
}
.post-takeaways h2{
  font-family:var(--font-display); font-size:var(--fs-md); margin:0 0 var(--sp-3);
  color:var(--mint-deep); text-transform:uppercase; letter-spacing:.06em;
}
.post-takeaways ul{margin:0; padding:0 0 0 var(--sp-5); display:grid; gap:var(--sp-2);}
.post-takeaways li{line-height:1.6; color:var(--ink);}

.post-faq{margin:var(--sp-7) 0 0; max-width:var(--max);}
.post-faq h2{font-family:var(--font-display); font-size:var(--fs-xl); margin:0 0 var(--sp-4);}
/* <details> rather than always-open text: the answers are for extraction and for
   the reader who has that specific question, not for everyone scrolling past. */
.post-faq details{border-bottom:1px solid var(--line); padding:var(--sp-4) 0;}
.post-faq summary{
  cursor:pointer; font-weight:600; font-size:var(--fs-md); line-height:1.5;
  list-style:none; display:flex; justify-content:space-between; gap:var(--sp-4);
}
.post-faq summary::-webkit-details-marker{display:none;}
.post-faq summary::after{content:'+'; color:var(--mint-deep); font-weight:400; flex:none;}
.post-faq details[open] summary::after{content:'\2212';}
.post-faq summary:hover{color:var(--mint-deep);}
.post-faq details p{margin:var(--sp-3) 0 0; line-height:1.7; color:var(--ink-soft); max-width:70ch;}

.post-sources{margin:var(--sp-7) 0 0; max-width:var(--max);}
.post-sources h2{
  font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); margin:0 0 var(--sp-3);
}
.post-sources ul{margin:0; padding:0; list-style:none; display:grid; gap:var(--sp-2);}
.post-sources li{font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6;}
.post-sources a{color:var(--mint-deep); text-decoration:underline; text-underline-offset:3px;}

.post-updated{color:var(--mint-deep); font-weight:600;}

@media (max-width:640px){
  .post-takeaways{padding:var(--sp-4); border-radius:var(--r-md);}
}

/* The two optional fields on the proof form. Side by side and visibly optional, so
   they read as a small favour that helps the creator get booked again rather than
   another hurdle between them and being paid. */
.campaign-proof-numbers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--sp-4); margin:var(--sp-4) 0 0;
}
.campaign-proof-numbers label{margin:0;}
.campaign-proof-numbers .opt{
  font-weight:400; font-size:var(--fs-xs); color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.06em; margin-left:var(--sp-2);
}
.campaign-proof-numbers input[type=file]{
  display:block; width:100%; margin-top:var(--sp-2); padding:var(--sp-3);
  border:1px dashed var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:var(--fs-sm); background:var(--paper); cursor:pointer;
}

/* ============================================================
   ACCELERATED CAMPAIGNS — the fork, the brief, the bids
   ============================================================ */

.pitch-page{padding:var(--section-y) 0;}

/* The fork. Two cards, and the fast one is visibly the exception rather than
   the default — a brand should pick it because they need it, not because it
   looked like the premium option. */
.path-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--sp-5); margin:0 0 var(--sp-7);}
.path-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-6); box-shadow:var(--e-1); display:flex; flex-direction:column;
}
.path-card.is-fast{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), var(--e-1);}
.path-tag{
  display:inline-block; align-self:flex-start; font-size:var(--fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; padding:4px 10px; border-radius:var(--r-full);
  background:var(--mint-tint); color:var(--mint-deep); margin:0 0 var(--sp-3);
}
.path-card.is-fast .path-tag{background:#FFF6E4; color:#8A6520;}
.path-card h2{font-family:var(--font-display); font-size:var(--fs-lg); margin:0 0 var(--sp-1);}
.path-time{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-soft); margin:0 0 var(--sp-4);}
.path-card > p{line-height:1.65; margin:0 0 var(--sp-4);}
.path-card ul{margin:0 0 var(--sp-5); padding-left:var(--sp-5); display:grid; gap:var(--sp-2); font-size:var(--fs-sm); color:var(--ink-soft);}
.path-card .btn{margin-top:auto; align-self:flex-start;}

.pitch-list{margin:var(--sp-7) 0 0;}
.pitch-list h2{font-family:var(--font-display); font-size:var(--fs-lg); margin:0 0 var(--sp-4);}
.pitch-list ul{list-style:none; margin:0; padding:0;}
.pitch-list li{display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; padding:var(--sp-4) 0; border-bottom:1px solid var(--line);}
.pitch-list .campaign-amount{margin-left:auto;}

/* The brief form */
.pitch-form{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-6); box-shadow:var(--e-1); max-width:44rem;
}
.pitch-form label{display:block; font-weight:600; font-size:var(--fs-sm); margin:0 0 var(--sp-5);}
.pitch-form input[type=text],.pitch-form input[type=number],.pitch-form input[type=date],
.pitch-form input[type=file],.pitch-form textarea{
  display:block; width:100%; margin-top:var(--sp-2); padding:var(--sp-3);
  border:1px solid var(--line); border-radius:var(--r-sm); font:inherit; background:var(--paper);
}
.pitch-hint{display:block; font-weight:400; font-size:var(--fs-sm); color:var(--ink-soft); margin-top:var(--sp-2); line-height:1.5;}
.pitch-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--sp-4);}
.pitch-platforms{border:none; margin:0 0 var(--sp-5); padding:0;}
.pitch-platforms legend{font-weight:600; font-size:var(--fs-sm); padding:0; margin:0 0 var(--sp-3);}
.pitch-check{display:inline-flex; align-items:center; gap:var(--sp-2); margin:0 var(--sp-4) 0 0; font-weight:400;}
.pitch-check input{width:auto; margin:0;}
.pitch-guide{
  font-size:var(--fs-sm); line-height:1.6; padding:var(--sp-3) var(--sp-4);
  background:var(--mint-tint); border-radius:var(--r-sm); margin:0 0 var(--sp-5); color:var(--mint-deep);
}
.pitch-guide.is-low{background:#FDF0EC; color:#A2432B;}
.pitch-terms{background:var(--paper); border-radius:var(--r-md); padding:var(--sp-4); margin:0 0 var(--sp-5);}
.pitch-terms h3{font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 var(--sp-3);}
.pitch-terms ul{margin:0; padding-left:var(--sp-5); display:grid; gap:var(--sp-2); font-size:var(--fs-sm); line-height:1.55;}

/* The bid comparison */
.pitch-bids{margin:var(--sp-6) 0 0;}
.bid-list{list-style:none; margin:var(--sp-4) 0; padding:0;}
.bid-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-3) var(--sp-4);
  align-items:start; padding:var(--sp-4); border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--white); margin:0 0 var(--sp-3);
}
.bid-row:has(input:checked){border-color:var(--mint); box-shadow:0 0 0 1px var(--mint);}
.bid-pick{display:flex; align-items:flex-start; gap:var(--sp-3); cursor:pointer; margin:0;}
.bid-pick input{margin-top:4px; flex:none;}
.bid-who{display:flex; align-items:center; gap:var(--sp-3); min-width:0;}
.bid-who img{border-radius:var(--r-full); object-fit:cover; flex:none;}
.bid-meta{display:block; font-size:var(--fs-sm); color:var(--ink-soft); font-weight:400; margin-top:2px;}
.bid-price{text-align:right;}
.bid-price strong{display:block; font-size:var(--fs-md);}
.bid-vs{display:block; font-size:var(--fs-xs); color:var(--mint-deep);}
.bid-vs.is-over{color:var(--coral);}
.bid-profile{display:block; font-size:var(--fs-sm); margin-top:var(--sp-2);}
.bid-note{
  grid-column:1 / -1; margin:0; padding-left:var(--sp-4);
  border-left:2px solid var(--line); color:var(--ink-soft); font-size:var(--fs-sm); line-height:1.6;
}
.bid-total{
  background:var(--paper); border-radius:var(--r-md); padding:var(--sp-4);
  margin:var(--sp-4) 0; font-size:var(--fs-base);
}
.bid-total p{margin:0 0 var(--sp-2);}
.bid-total p:last-child{margin:0;}
.bid-total .is-over{color:var(--coral); font-weight:600;}

/* An urgent brief on the creator's page has to out-shout a normal booking. */
.campaign-card.is-urgent{border-left:3px solid var(--gold);}
.campaign-badge.is-urgent,
.campaign-badge.is-open{background:#FFF6E4; color:#8A6520; border-color:#F0DDB4;}
.campaign-badge.is-selecting{background:#EFF2FD; color:#3C4A8C; border-color:#D6DDF7;}
.campaign-badge.is-running{background:var(--mint-tint); color:var(--mint-deep);}
.campaign-offer-form .opt{
  font-weight:400; font-size:var(--fs-xs); color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.06em; margin-left:var(--sp-2);
}

@media (max-width:640px){
  .bid-row{grid-template-columns:1fr;}
  .bid-price{text-align:left;}
  .pitch-form{padding:var(--sp-5) var(--sp-4);}
}

/* ============================================================
   KNOWLEDGE HUB
   ============================================================
   A help centre is read by someone who is already stuck, so it has to feel
   calm and obvious — but "calm" had drifted into a wall of underlined links.
   This leans on the site's own language instead: the dark night-sky band from
   the homepage, the mint glow, mono numerals for anything that is a rule.
   The live numbers sit right under the hero because they are the single most
   searched thing on the page. */

.kb{--kb-radius:22px; background:var(--paper);}
.kb .screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------------------------------------------------------------- hero */

.kb-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--charcoal); color:#E9F2EE;
  padding:clamp(52px,8vw,112px) 0 clamp(92px,11vw,140px);
}
.kb-hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 95%);
          mask-image:linear-gradient(180deg,#000 20%,transparent 95%);
}
.kb-orbs span{position:absolute; border-radius:50%; filter:blur(64px); z-index:-1; animation:kb-float 16s ease-in-out infinite alternate;}
.kb-orbs span:nth-child(1){width:440px; height:440px; background:#3EB489; top:-170px; right:-90px; opacity:.5;}
.kb-orbs span:nth-child(2){width:320px; height:320px; background:#C99A3E; bottom:-170px; left:6%; opacity:.28; animation-duration:20s;}
.kb-orbs span:nth-child(3){width:220px; height:220px; background:#4FE3AE; top:28%; left:52%; opacity:.18; animation-duration:24s;}
@keyframes kb-float{to{transform:translate3d(-34px,44px,0) scale(1.08);}}

.kb-hero .breadcrumb,
.kb-hero .breadcrumb a{color:rgba(233,242,238,.55); font-size:var(--fs-sm); text-decoration:none;}
.kb-hero .breadcrumb a:hover{color:var(--mint-bright);}
.kb-hero .breadcrumb .sep{margin:0 8px; opacity:.5;}

.kb-eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:var(--sp-5) 0 var(--sp-3);
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--mint-bright);
}
.kb-eyebrow::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--mint-bright); box-shadow:0 0 0 5px rgba(79,227,174,.16);}
.kb-hero h1{
  color:#fff; font-size:clamp(2.2rem,5.4vw,3.9rem); line-height:1.03; letter-spacing:-.025em;
  margin:0 0 var(--sp-4); max-width:17ch;
}
.kb-hero h1 em{
  font-style:normal; color:var(--mint-bright);
  background:linear-gradient(90deg,var(--mint-bright),#A6F7D8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.kb-lede{font-size:var(--fs-md); line-height:1.65; color:rgba(233,242,238,.76); max-width:58ch; margin:0 0 var(--sp-6);}

.kb-search{
  display:flex; align-items:center; gap:var(--sp-2); max-width:640px;
  background:#fff; border-radius:var(--r-full); padding:6px 6px 6px 20px;
  box-shadow:0 22px 60px rgba(0,0,0,.38); transition:box-shadow var(--t-base) var(--ease);
}
.kb-search:focus-within{box-shadow:0 0 0 4px rgba(79,227,174,.4),0 22px 60px rgba(0,0,0,.38);}
.kb-search svg{flex:none; color:var(--ink-soft);}
.kb-search input{flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:var(--fs-base); color:var(--charcoal); padding:13px 4px;}
.kb-search input:focus{outline:none;}
.kb-search .btn{flex:none; background:var(--mint); color:var(--charcoal); border-color:transparent;}
.kb-search .btn:hover{background:var(--mint-bright); color:var(--charcoal);}

.kb-chips{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4);}
.kb-chips > span{font-size:var(--fs-sm); color:rgba(233,242,238,.5); margin-right:4px;}
.kb-chips a{
  font-size:var(--fs-sm); color:#E9F2EE; text-decoration:none; padding:7px 14px; border-radius:var(--r-full);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.kb-chips a:hover,.kb-chips a.is-on{background:rgba(79,227,174,.16); border-color:rgba(79,227,174,.55); transform:translateY(-1px);}

/* ------------------------------------------------------- live numbers */

.kb-numbers{position:relative; z-index:2; margin-top:-64px;}
.kb-number-grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px;
  background:#fff; border:1px solid var(--line); border-radius:var(--kb-radius);
  padding:8px; box-shadow:var(--e-3);
}
.kb-number{display:block; padding:var(--sp-4); border-radius:16px; text-decoration:none; color:inherit; transition:background var(--t-fast) var(--ease);}
.kb-number:hover{background:var(--mint-tint);}
.kb-number strong{display:block; font-family:var(--font-mono); font-weight:600; font-size:clamp(1.25rem,2.1vw,1.75rem); letter-spacing:-.03em; color:var(--charcoal);}
.kb-number span{display:block; margin-top:6px; font-size:var(--fs-sm); line-height:1.45; color:var(--ink-soft);}
.kb-numbers-foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin:var(--sp-3) 6px 0; font-size:var(--fs-sm); color:var(--ink-soft);}

/* ----------------------------------------------------- shared blocks */

.kb-block{padding:clamp(52px,7vw,92px) 0 0;}
.kb-block-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--sp-4); margin:0 0 var(--sp-5);}
.kb-block-head h2{font-size:var(--fs-xl); letter-spacing:-.015em; margin:0;}
.kb-block-head p{margin:var(--sp-2) 0 0; color:var(--ink-soft); max-width:56ch; line-height:1.6;}
.kb-kicker{display:block; margin:0 0 var(--sp-2); font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--mint-deep);}
.kb-textlink{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--mint-deep); text-decoration:none; transition:gap var(--t-fast) var(--ease);}
.kb-textlink:hover{gap:10px; color:var(--mint-deep);}

/* The tabs and the audience switch work by setting `hidden`, but `.kb-track{display:grid}`
   and `.kb-card{display:flex}` outrank the browser's built-in [hidden] rule -- so the
   buttons changed state while every timeline and card stayed on screen. */
.kb [hidden]{display:none !important;}

.kb-tabs,.kb-switch{display:inline-flex; flex-wrap:wrap; gap:4px; padding:5px; background:#fff; border:1px solid var(--line); border-radius:var(--r-full);}
.kb-tabs button,.kb-switch button{
  font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  border:0; background:transparent; color:var(--ink-soft); padding:10px 18px; border-radius:var(--r-full);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.kb-tabs button:hover,.kb-switch button:hover{color:var(--charcoal);}
.kb-tabs button.is-on{background:var(--charcoal); color:#fff;}
.kb-switch button.is-on{background:var(--mint); color:var(--charcoal);}
.kb-tab-time{margin-left:8px; font-family:var(--font-mono); font-weight:400; font-size:var(--fs-xs); opacity:.7;}

/* ---------------------------------------------------------- journey */

.kb-track{
  list-style:none; margin:0; position:relative;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-5);
  padding:var(--sp-6) var(--sp-5); background:#fff; border:1px solid var(--line);
  border-radius:var(--kb-radius); box-shadow:var(--e-1);
}
.kb-track::before{
  content:''; position:absolute; height:2px;
  left:calc(var(--sp-5) + 22px); right:calc(var(--sp-5) + 22px); top:calc(var(--sp-6) + 21px);
  background:repeating-linear-gradient(90deg,var(--mint) 0 10px,transparent 10px 18px);
}
.kb-track li{position:relative; min-width:0;}
.kb-node{
  position:relative; z-index:1; width:44px; height:44px; margin-bottom:var(--sp-4);
  display:grid; place-items:center; border-radius:50%;
  font-family:var(--font-mono); font-weight:600; color:var(--mint-deep);
  background:var(--mint-tint); border:3px solid #fff; box-shadow:0 0 0 2px var(--mint);
}
.kb-track li:last-child .kb-node{background:var(--charcoal); color:var(--mint-bright); box-shadow:0 0 0 2px var(--charcoal);}
.kb-when{display:block; margin-bottom:4px; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--mint-deep);}
.kb-track strong{display:block; margin-bottom:6px; font-family:var(--font-display); font-size:var(--fs-md); color:var(--charcoal); line-height:1.3;}
.kb-track p{margin:0; font-size:var(--fs-sm); line-height:1.55; color:var(--ink-soft);}
.kb-track.is-fast::before{background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 18px);}
.kb-track.is-fast .kb-node{background:#FFF6E4; color:#8A6520; box-shadow:0 0 0 2px var(--gold);}
.kb-track.is-fast .kb-when{color:#8A6520;}
.kb-track.is-fast li:last-child .kb-node{background:var(--charcoal); color:#F5D48A; box-shadow:0 0 0 2px var(--charcoal);}

/* ------------------------------------------------------- topic cards */

.kb-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5);}
.kb-card{
  --accent:#3EB489; --accent-soft:#E8F5EF;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--kb-radius); padding:var(--sp-5) var(--sp-5) var(--sp-3);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
  animation:kb-rise .55s var(--ease) both;
}
.kb-card::before{content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent);}
.kb-card:hover{transform:translateY(-4px); box-shadow:var(--e-2); border-color:var(--accent);}
.kb-card.is-for-brands{--accent:#5B7CFA; --accent-soft:#EEF2FF;}
.kb-card.is-for-creators{--accent:#E8785A; --accent-soft:#FDF0EC;}
.kb-card.is-rules{--accent:#C99A3E; --accent-soft:#FFF6E4;}
.kb-card.is-money{--accent:#1F7A5C; --accent-soft:#E3F2EC;}
.kb-card.is-trust{--accent:#8B6CE0; --accent-soft:#F2EEFC;}
.kb-grid .kb-card:nth-child(2){animation-delay:.05s;}
.kb-grid .kb-card:nth-child(3){animation-delay:.1s;}
.kb-grid .kb-card:nth-child(4){animation-delay:.15s;}
.kb-grid .kb-card:nth-child(5){animation-delay:.2s;}
.kb-grid .kb-card:nth-child(6){animation-delay:.25s;}
@keyframes kb-rise{from{opacity:0; transform:translateY(14px);}}

.kb-card-top{display:flex; justify-content:space-between; align-items:center; margin:var(--sp-2) 0 var(--sp-4);}
.kb-icon{width:50px; height:50px; display:grid; place-items:center; border-radius:15px; color:var(--accent); background:var(--accent-soft);}
.kb-count{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft); background:var(--paper); padding:4px 10px; border-radius:var(--r-full);}
.kb-card h3{font-size:var(--fs-lg); margin:0 0 var(--sp-2);}
.kb-card h3 a{color:var(--charcoal); text-decoration:none;}
.kb-card h3 a:hover{color:var(--accent);}
.kb-card > p{margin:0 0 var(--sp-4); font-size:var(--fs-sm); line-height:1.6; color:var(--ink-soft);}

.kb-links{list-style:none; margin:auto 0 0; padding:0; border-top:1px solid var(--line);}
.kb-links a{
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  padding:13px 2px; border-bottom:1px solid var(--line);
  font-size:var(--fs-sm); font-weight:500; line-height:1.4; color:var(--ink); text-decoration:none;
}
.kb-links li:last-child a{border-bottom:0;}
.kb-links svg{flex:none; color:var(--accent); transition:transform var(--t-fast) var(--ease);}
.kb-links a:hover{color:var(--charcoal);}
.kb-links a:hover svg{transform:translateX(4px);}

/* --------------------------------------------- results and sections */

.kb-results{display:grid; gap:var(--sp-3);}
.kb-result{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px var(--sp-4);
  padding:var(--sp-5); background:#fff; border:1px solid var(--line); border-radius:18px;
  text-decoration:none; color:inherit;
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.kb-result:hover{transform:translateX(4px); border-color:var(--mint); box-shadow:var(--e-1); color:inherit;}
.kb-result strong{font-family:var(--font-display); font-size:var(--fs-md); color:var(--charcoal);}
.kb-result p{margin:0; font-size:var(--fs-sm); line-height:1.55; color:var(--ink-soft);}
.kb-result > svg{grid-column:2; grid-row:1 / span 3; color:var(--mint-deep);}
.kb-result > *:not(svg){grid-column:1;}
.kb-chip{
  justify-self:start; display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-full); background:var(--mint-tint); color:var(--mint-deep);
}
.kb-topics{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-6) 0 0;}
.kb-topics a{
  font-size:var(--fs-sm); font-weight:500; text-decoration:none; color:var(--ink);
  padding:8px 16px; border-radius:var(--r-full); background:#fff; border:1px solid var(--line);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.kb-topics a:hover{border-color:var(--mint); color:var(--mint-deep);}
.kb-empty{padding:var(--sp-7) var(--sp-5); text-align:center; background:#fff; border:1px dashed var(--line); border-radius:var(--kb-radius);}
.kb-empty h2{font-size:var(--fs-lg); margin:0 0 var(--sp-2);}
.kb-empty p{margin:0 auto; max-width:48ch; color:var(--ink-soft); line-height:1.6;}

/* --------------------------------------------------------------- cta */

.kb-cta{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-5);
  margin:clamp(56px,8vw,96px) 0; padding:clamp(28px,4vw,44px);
  border-radius:28px; border:1px solid var(--line);
  background:
    radial-gradient(circle at 92% 8%, rgba(79,227,174,.38), transparent 42%),
    radial-gradient(circle at 4% 100%, rgba(201,154,62,.14), transparent 38%),
    linear-gradient(135deg,#E8F5EF,#F7FAF9);
}
.kb-cta h2{font-size:var(--fs-xl); margin:0 0 6px;}
.kb-cta p{margin:0; color:var(--ink-soft); max-width:52ch; line-height:1.6;}
.kb-cta-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3);}

/* ---------------------------------------------------------- article */

.kb-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:100000; pointer-events:none;}
body.admin-bar .kb-progress{top:32px;}
.kb-progress span{display:block; height:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--mint),var(--mint-bright));}

.kb-article-hero{
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  padding:clamp(40px,6vw,76px) 0 clamp(32px,5vw,52px);
  background:
    radial-gradient(circle at 88% 0%, rgba(62,180,137,.2), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(201,154,62,.1), transparent 36%),
    var(--paper);
}
.kb-article-hero .breadcrumb{font-size:var(--fs-sm); margin:0 0 var(--sp-4);}
.kb-article-hero .breadcrumb a{text-decoration:none;}
.kb-article-hero .breadcrumb .sep{margin:0 8px; opacity:.5;}
.kb-article-hero h1{font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.08; letter-spacing:-.02em; margin:var(--sp-3) 0; max-width:22ch;}
.kb-meta{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:0; font-size:var(--fs-sm); color:var(--ink-soft);}
.kb-meta span + span::before{content:'\00B7'; margin-right:var(--sp-3);}

.kb-article-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:start; gap:clamp(32px,5vw,72px);
  padding-top:clamp(32px,5vw,56px); padding-bottom:clamp(56px,8vw,96px);
}
.kb-article-body{min-width:0; max-width:74ch;}

.kb-article .doc-summary{
  position:relative; margin:0 0 var(--sp-6); padding:var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 8px);
  background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--e-1);
}
.kb-article .doc-summary::before{content:''; position:absolute; left:0; top:18px; bottom:18px; width:4px; border-radius:0 4px 4px 0; background:var(--mint);}
.kb-summary-label{display:block; margin-bottom:6px; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--mint-deep);}
.kb-article .doc-summary p{margin:0; font-size:var(--fs-md); line-height:1.7; color:var(--charcoal);}

.kb-prose{font-size:1.02rem; line-height:1.8; color:var(--ink);}
.kb-prose h2{font-size:var(--fs-xl); letter-spacing:-.01em; margin:var(--sp-8) 0 var(--sp-3); scroll-margin-top:120px;}
.kb-prose > h2:first-child{margin-top:0;}
.kb-prose h3{font-size:var(--fs-lg); margin:var(--sp-6) 0 var(--sp-2); scroll-margin-top:120px;}
.kb-prose p{margin:0 0 var(--sp-4);}
.kb-prose a{color:var(--mint-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
.kb-prose ul{list-style:none; margin:0 0 var(--sp-5); padding:0;}
.kb-prose ul li{position:relative; padding-left:26px; margin-bottom:10px;}
.kb-prose ul li::before{content:''; position:absolute; left:5px; top:.72em; width:8px; height:8px; border-radius:50%; background:var(--mint);}
.kb-prose .doc-note{margin:0 0 var(--sp-5); padding:var(--sp-3) var(--sp-4); border-radius:12px; background:var(--mint-tint); color:var(--mint-deep); font-size:var(--fs-sm); line-height:1.6;}

.kb-prose > table{
  width:100%; margin:0 0 var(--sp-5); border-collapse:separate; border-spacing:0; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:16px; font-size:var(--fs-sm);
}
.kb-prose > table th,.kb-prose > table td{padding:12px 16px; text-align:left; vertical-align:top; line-height:1.55; border-bottom:1px solid var(--line);}
.kb-prose > table tr:last-child > *{border-bottom:0;}
.kb-prose > table thead th{background:var(--paper); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.kb-prose > table tbody th{font-weight:600; color:var(--charcoal);}

/* The live timeline, numbered by CSS so the shortcode stays plain markup. */
.doc-timeline{list-style:none; margin:var(--sp-4) 0 var(--sp-6); padding:var(--sp-5); background:#fff; border:1px solid var(--line); border-radius:18px; counter-reset:kbstep;}
.doc-timeline li{position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:var(--sp-4); padding:0 0 var(--sp-4); counter-increment:kbstep;}
.doc-timeline li:last-child{padding-bottom:0;}
.doc-timeline li::before{
  content:counter(kbstep); grid-row:1 / span 3; position:relative; z-index:1;
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--font-mono); font-size:.85rem; font-weight:600; color:var(--mint-deep); background:var(--mint-tint);
}
.doc-timeline li::after{content:''; position:absolute; left:17px; top:36px; bottom:0; width:2px; background:var(--line);}
.doc-timeline li:last-child::after{display:none;}
.doc-timeline li::marker{content:none;}
.doc-when{grid-column:2; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--mint-deep);}
.doc-timeline strong{grid-column:2; font-family:var(--font-display); font-size:var(--fs-md); color:var(--charcoal);}
.doc-timeline li > span:last-child{grid-column:2; font-size:var(--fs-sm); line-height:1.55; color:var(--ink-soft);}

/* The live rules. On a phone each rule becomes its own card rather than a
   three-column table squeezed into 375px. */
.doc-rules{margin:0 0 var(--sp-6);}
.doc-rules h3{display:flex; align-items:center; gap:12px;}
.doc-rules h3::before{content:''; width:10px; height:10px; border-radius:3px; background:var(--mint); transform:rotate(45deg); flex:none;}
.doc-rules table{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:16px; font-size:var(--fs-sm);}
.doc-rules th,.doc-rules td{padding:14px 16px; text-align:left; vertical-align:top; line-height:1.55; border-bottom:1px solid var(--line);}
.doc-rules tbody tr:last-child > *{border-bottom:0;}
.doc-rules thead th{background:var(--paper); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.doc-rules thead th:first-child,.doc-rules tbody th{width:28%;}
.doc-rules thead th:nth-child(2){width:30%;}
.doc-rules tbody th{font-weight:600; color:var(--charcoal);}
.doc-rules tbody tr:hover > *{background:#FBFDFC;}
.doc-rules td strong{display:inline-block; max-width:100%; padding:3px 11px; border-radius:12px; white-space:normal; overflow-wrap:anywhere; font-family:var(--font-mono); font-size:.82rem; font-weight:600; color:var(--mint-deep); background:var(--mint-tint);}
.doc-rules td:last-child{color:var(--ink-soft);}

.kb-pager{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin:var(--sp-8) 0 0;}
.kb-pager a{display:block; padding:var(--sp-4) var(--sp-5); background:#fff; border:1px solid var(--line); border-radius:16px; text-decoration:none; color:inherit; transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);}
.kb-pager a:hover{border-color:var(--mint); box-shadow:var(--e-1); color:inherit;}
.kb-pager small{display:block; margin-bottom:4px; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.kb-pager strong{font-family:var(--font-display); color:var(--charcoal); line-height:1.35;}
.kb-pager .is-next{grid-column:2; text-align:right;}

.kb-helpful{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-4);
  margin:var(--sp-6) 0 0; padding:var(--sp-5); border-radius:18px; background:var(--charcoal); color:#E9F2EE;
}
.kb-helpful strong{display:block; margin-bottom:2px; font-family:var(--font-display); font-size:var(--fs-md); color:#fff;}
.kb-helpful p{margin:0; font-size:var(--fs-sm); color:rgba(233,242,238,.72);}
.kb-helpful .btn{background:var(--mint); color:var(--charcoal); border-color:transparent;}
.kb-helpful .btn:hover{background:var(--mint-bright); color:var(--charcoal);}

.kb-aside{position:sticky; top:120px; display:grid; gap:var(--sp-4);}
.kb-toc,.kb-side-card{padding:var(--sp-4); background:#fff; border:1px solid var(--line); border-radius:18px;}
.kb-aside h2{margin:0 0 var(--sp-3); padding:0 10px; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);}
.kb-toc ol,.kb-side-card ul{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.kb-toc a,.kb-side-card a{
  display:block; padding:8px 10px; border-left:2px solid transparent; border-radius:10px;
  font-size:var(--fs-sm); line-height:1.4; color:var(--ink-soft); text-decoration:none;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.kb-toc a:hover,.kb-side-card a:hover{background:var(--paper); color:var(--charcoal);}
.kb-toc a.is-on{background:var(--mint-tint); border-left-color:var(--mint); color:var(--mint-deep); font-weight:600;}
.kb-side-card li.is-current a{background:var(--paper); color:var(--charcoal); font-weight:600;}
.kb-side-all{display:inline-flex; margin:var(--sp-2) 10px 0; font-size:var(--fs-sm); font-weight:600; color:var(--mint-deep); text-decoration:none;}

/* ------------------------------------------------------- responsive */

@media (max-width:1080px){
  .kb-number-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .kb-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:980px){
  .kb-article-layout{grid-template-columns:minmax(0,1fr);}
  .kb-aside{position:static;}
  .kb-toc{display:none;}
}
@media (max-width:900px){
  .kb-track{grid-template-columns:minmax(0,1fr); gap:0; padding:var(--sp-5);}
  .kb-track::before{left:calc(var(--sp-5) + 21px); right:auto; top:var(--sp-5); bottom:var(--sp-5); width:2px; height:auto; background:repeating-linear-gradient(180deg,var(--mint) 0 10px,transparent 10px 18px);}
  .kb-track.is-fast::before{background:repeating-linear-gradient(180deg,var(--gold) 0 10px,transparent 10px 18px);}
  .kb-track li{display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:var(--sp-4); padding-bottom:var(--sp-5);}
  .kb-track li:last-child{padding-bottom:0;}
  .kb-node{grid-row:1 / span 3; margin:0;}
}
@media (max-width:782px){
  body.admin-bar .kb-progress{top:46px;}
}
@media (max-width:700px){
  .doc-rules table,.doc-rules tbody,.doc-rules tr,.doc-rules th,.doc-rules td{display:block; width:auto;}
  .doc-rules thead{display:none;}
  .doc-rules table{background:transparent; border:0; border-radius:0; overflow:visible;}
  .doc-rules tr{margin-bottom:var(--sp-3); padding:var(--sp-4); background:#fff; border:1px solid var(--line); border-radius:16px;}
  .doc-rules th,.doc-rules td{padding:0; border:0;}
  .doc-rules tbody th{width:auto; margin-bottom:8px;}
  .doc-rules td:last-child{margin-top:8px;}
  .doc-rules tbody tr:hover > *{background:transparent;}
  .kb-prose > table{display:block; overflow-x:auto;}
}
@media (max-width:640px){
  .kb-grid{grid-template-columns:minmax(0,1fr);}
  .kb-number-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kb-numbers{margin-top:-48px;}
  .kb-search{padding-left:14px;}
  .kb-search .btn{padding-left:16px; padding-right:16px;}
  .kb-search svg{display:none;}
  .kb-tabs,.kb-switch{display:flex; width:100%;}
  .kb-tabs button,.kb-switch button{flex:1 1 auto; padding:10px 12px;}
  .kb-pager{grid-template-columns:minmax(0,1fr);}
  .kb-pager .is-next{grid-column:auto;}
  .kb-cta{border-radius:22px;}
}
@media (prefers-reduced-motion:reduce){
  .kb-orbs span,.kb-card{animation:none;}
  .kb-card:hover,.kb-result:hover{transform:none;}
}

.footer-help{display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 10px;}
.footer-help a{white-space:nowrap;}


/* ================================================================ ACCOUNT AREA
   The overview, settings and profile editor both roles share, inside Woo's My Account.
   Everything here reuses the account card language already established above; what is
   new is the state a marketplace account has that a shop account does not -- what is
   waiting on you, how you are doing, and whether you are taking work at all. */

.influ-dash-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-3) var(--sp-5); margin:0 0 var(--sp-5);
}
.influ-dash-id{display:flex; align-items:center; gap:var(--sp-4); min-width:0;}
.influ-dash-avatar{
  flex:none; width:56px; height:56px; border-radius:var(--r-full); object-fit:cover;
  background:var(--paper); border:1px solid var(--line);
}
.influ-dash-avatar.is-logo{object-fit:contain; padding:4px; background:var(--white);}
.influ-dash-avatar.is-initials{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--mint-deep); background:var(--mint-tint); border-color:var(--mint);
}
.influ-dash .influ-acct-hello{margin:0;}
.influ-dash-sub{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 0; font-size:var(--fs-sm); color:var(--ink-soft);}
.influ-dash-links{display:flex; flex-wrap:wrap; gap:var(--sp-2);}

.influ-chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-full);
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.04em; text-decoration:none;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);
}
.influ-chip.is-live{background:var(--mint-tint); border-color:var(--mint); color:var(--mint-deep);}
.influ-chip.is-paused{background:#FFF6E4; border-color:#E8CD96; color:#8A6520;}
.influ-chip.is-pending,.influ-chip.is-review{background:#EFF2FD; border-color:#D6DDF7; color:#3B4C8F;}
.influ-chip.is-rejected,.influ-chip.is-banned{background:#FDECEA; border-color:#F5C2C0; color:#8E2A24;}

.influ-dash-block{margin:0 0 var(--sp-6);}
.influ-dash-clear{
  border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--white);
  padding:var(--sp-5); color:var(--ink-soft); font-size:var(--fs-sm); line-height:1.6;
}

/* What needs you, soonest first. One row, one decision, one clock. */
.influ-actions{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2);}
.influ-action > a{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
  padding:var(--sp-4); border:1px solid var(--line); border-left:3px solid var(--mint);
  border-radius:var(--r-md); background:var(--white); text-decoration:none; color:inherit;
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.influ-action > a:hover{border-color:var(--mint); transform:translateY(-1px);}
.influ-action.is-urgent > a{border-left-color:var(--coral);}
.influ-action-kind{
  flex:none; min-width:62px; padding:3px 8px; border-radius:var(--r-sm); text-align:center;
  background:var(--paper); font-family:var(--font-mono); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);
}
.influ-action-body{flex:1 1 240px; min-width:0;}
.influ-action-body strong{display:block; font-size:var(--fs-base); color:var(--charcoal);}
.influ-action-body span{display:block; margin-top:2px; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.5;}
.influ-action .influ-timer{margin-left:auto;}

.influ-kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--sp-3);}
.influ-kpi{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--sp-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--white);
}
.influ-kpi.is-warn{border-color:#E8CD96; background:#FFFCF5;}
.influ-kpi-label{font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.influ-kpi-num{font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--charcoal); line-height:1.2;}
.influ-kpi-note{font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.45;}

/* Earnings by month. A bar chart of six numbers needs no library. */
.influ-bars{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--sp-3); align-items:end;
  height:170px; padding:var(--sp-4); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white);
}
.influ-bar{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; min-width:0;}
.influ-bar-value{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft);}
.influ-bar-track{flex:1; display:flex; align-items:flex-end; width:100%; max-width:56px;}
.influ-bar-fill{width:100%; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--mint),var(--mint-deep));}
.influ-bar.is-empty .influ-bar-track{border-bottom:2px dotted var(--line);}
.influ-bar-label{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft);}

.influ-mini-reviews{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3);}
.influ-mini-reviews li{padding:var(--sp-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--white);}
.influ-mini-reviews .stars{color:var(--gold); margin-right:8px;}
.influ-mini-reviews strong{color:var(--charcoal);}
.influ-mini-reviews li > span{margin-left:8px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft);}
.influ-mini-reviews p{margin:6px 0 0; font-size:var(--fs-sm); line-height:1.6; color:var(--ink);}

.influ-nudge{
  display:block; margin:0 0 var(--sp-6); padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--mint); border-radius:var(--r-lg); background:var(--mint-tint);
  text-decoration:none; color:inherit;
}
.influ-nudge strong{display:block; color:var(--charcoal);}
.influ-nudge span{display:block; margin-top:3px; font-size:var(--fs-sm); line-height:1.55; color:var(--ink);}

/* Away and back later. Amber, not red: pausing is a normal thing to do. */
.influ-pause{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-5);
  margin:0 0 var(--sp-5); padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white);
}
.influ-pause.is-paused{border-color:#E8CD96; background:#FFFCF5;}
.influ-pause-text{flex:1 1 260px; min-width:0;}
.influ-pause-text strong{display:block; font-family:var(--font-display); color:var(--charcoal);}
.influ-pause-text span{display:block; margin-top:2px; font-size:var(--fs-sm); line-height:1.55; color:var(--ink-soft);}
.influ-pause-options > summary{list-style:none; cursor:pointer; display:inline-flex;}
.influ-pause-options > summary::-webkit-details-marker{display:none;}
.influ-pause-fields{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin-top:var(--sp-3);}
.influ-pause-fields label{display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm); font-weight:600; color:var(--charcoal);}
.influ-pause-fields input{padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); font:inherit; background:var(--white);}
.influ-pause-fields .opt{font-weight:400; color:var(--ink-soft);}

/* Which half of the profile editor a field belongs to. */
.influ-tag{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:var(--r-full); vertical-align:middle;
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500; letter-spacing:.03em;
}
.influ-tag.is-instant{background:var(--mint-tint); color:var(--mint-deep);}
.influ-tag.is-review{background:#EFF2FD; color:#3B4C8F;}

.influ-pending{
  margin:0 0 var(--sp-5); padding:var(--sp-4) var(--sp-5);
  border:1px solid #D6DDF7; border-radius:var(--r-lg); background:#F6F8FE;
}
.influ-pending strong{display:block; color:#2F3E75;}
.influ-pending ul{margin:var(--sp-2) 0; padding-left:18px; font-size:var(--fs-sm); color:var(--ink); line-height:1.6;}
.influ-pending > span{display:block; font-size:var(--fs-sm); color:var(--ink-soft);}

.influ-profile-editor .influ-field select,
.influ-profile-editor .influ-field input[type=number],
.influ-profile-editor .influ-field input[type=url],
.influ-field input[type=date],
.influ-field select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--white); font:inherit; font-size:var(--fs-base); color:var(--ink);
}
.influ-check{display:flex; align-items:center; gap:8px; margin-top:var(--sp-3); font-size:var(--fs-sm); color:var(--ink-soft);}

.influ-pe{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4); margin:0 0 var(--sp-3); background:var(--paper);}
.influ-pe.is-on{background:var(--white);}
.influ-pe-head{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3);}
.influ-pe-head strong{font-family:var(--font-display); font-size:var(--fs-base); color:var(--charcoal);}
.influ-pe-head .sw{
  width:28px; height:28px; flex:none; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--line); color:var(--charcoal);
}
.influ-pe-head .sw svg{width:58%; height:58%; display:block;}
.influ-pe-add,.influ-pe-remove{
  margin-left:auto; padding:6px 12px; border-radius:var(--r-full); cursor:pointer;
  font:inherit; font-size:var(--fs-sm); font-weight:600; background:transparent; border:1px solid var(--line); color:var(--ink-soft);
}
.influ-pe-add:hover{border-color:var(--mint-deep); color:var(--mint-deep); background:var(--mint-tint);}
.influ-pe-remove:hover{border-color:var(--coral); color:var(--coral); background:#FFF5F2;}
.influ-pe-body{margin-top:var(--sp-4);}
.influ-pe-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:0 var(--sp-4);}
.influ-pe-intro{margin:0 0 var(--sp-4);}
@media (max-width:720px){ .influ-pe-grid{grid-template-columns:minmax(0,1fr);} }

.influ-payout-card{
  display:flex; flex-direction:column; gap:4px; margin:0 0 var(--sp-5); padding:var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white);
}
.influ-payout-bank{font-family:var(--font-display); font-weight:600; color:var(--charcoal);}
.influ-payout-number{font-family:var(--font-mono); font-size:var(--fs-lg); letter-spacing:.12em; color:var(--charcoal);}
.influ-payout-meta{font-size:var(--fs-sm); color:var(--ink-soft);}

.influ-callout{
  margin:0 0 var(--sp-5); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-lg);
  background:var(--mint-tint); border:1px solid var(--mint); font-size:var(--fs-sm); line-height:1.6; color:var(--ink);
}
.influ-callout strong{color:var(--charcoal);}

.influ-brand-preview{margin:0 0 var(--sp-5); padding:var(--sp-4) var(--sp-5); border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--white);}
.influ-brand-preview-label{display:block; margin-bottom:var(--sp-3); font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.influ-photo-preview.is-logo{border-radius:var(--r-md);}
.influ-photo-preview.is-logo img{object-fit:contain; padding:6px; background:var(--white);}

/* The brand, as a creator sees them: on a brief card, in chat, on the company page. */
.campaign-brand{display:flex; align-items:center; gap:var(--sp-3); margin-top:4px; min-width:0;}
.campaign-brand img{width:40px; height:40px; border-radius:var(--r-md); object-fit:contain; background:var(--white); border:1px solid var(--line); flex:none;}
.campaign-brand-mark{
  width:40px; height:40px; flex:none; border-radius:var(--r-md); display:inline-flex; align-items:center; justify-content:center;
  background:var(--mint-tint); border:1px solid var(--mint); color:var(--mint-deep);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm);
}
.campaign-brand-text{min-width:0;}
.campaign-brand-text strong{display:block; font-size:var(--fs-base); color:var(--charcoal);}
.campaign-brand-text span{display:block; font-size:var(--fs-sm); color:var(--ink-soft);}
.campaign-brand-text a{color:var(--mint-deep);}
.campaigns-head-actions{display:flex; flex-wrap:wrap; gap:var(--sp-2);}

/* The creator's own preview of their profile, and an away notice on a paused one. */
.pp-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3);
  max-width:var(--max); margin:var(--sp-4) auto 0; padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-lg); font-size:var(--fs-sm); line-height:1.55;
}
.pp-banner strong{display:block; font-family:var(--font-display); font-size:var(--fs-md); color:var(--charcoal);}
.pp-banner span{display:block; color:var(--ink-soft);}
.pp-banner.is-preview{background:#EFF2FD; border:1px solid #D6DDF7;}
.pp-banner.is-away{background:#FFF6E4; border:1px solid #E8CD96;}
.pp-unbookable{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-soft);}

@media (max-width:640px){
  .influ-dash-head,.influ-pause{flex-direction:column; align-items:flex-start;}
  /* flex-basis is the MAIN size, and the main axis is vertical once these stack -- so the
     260px that made this column a sensible width on desktop made it 260px TALL here. */
  .influ-pause-text{flex:0 0 auto;}
  .influ-dash-links,.influ-pause-form{width:100%;}
  .influ-dash-links .btn{flex:1 1 auto; text-align:center;}
  .influ-action > a{align-items:flex-start;}
  .influ-action .influ-timer{margin-left:0;}
  .influ-bars{height:150px; padding:var(--sp-3);}
}


/* =============================================================== THE REPORT
   What a brand got for their money. Built to be printed as much as read: the numbers
   first, one row per creator, and every figure labelled with where it came from. */

.influ-report-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-3) var(--sp-5); margin:0 0 var(--sp-5);
}
.influ-report-eyebrow{
  display:block; font-family:var(--font-mono); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.1em; color:var(--mint-deep);
}
.influ-report-head h2{font-family:var(--font-display); font-size:var(--fs-xl); margin:var(--sp-1) 0 0;}
.influ-report-meta{margin:var(--sp-1) 0 0; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft);}
.influ-report-actions{display:flex; flex-wrap:wrap; gap:var(--sp-2);}

.influ-report-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--sp-3);
  margin:0 0 var(--sp-6);
}
.influ-report-kpis .influ-kpi-num{font-size:var(--fs-xl);}

.influ-report-brief{margin:0 0 var(--sp-6);}
.influ-report-brief h3,.influ-report-rows h3{font-family:var(--font-display); font-size:var(--fs-md); margin:0 0 var(--sp-3);}
.influ-report-brief blockquote{
  margin:0; padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md);
  background:var(--mint-tint); border-left:3px solid var(--mint);
  font-size:var(--fs-sm); line-height:1.65; color:var(--ink);
}

.influ-report-table{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white); overflow:hidden;}
.influ-report-row{
  display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);
  gap:var(--sp-3); align-items:start; padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--line);
  font-size:var(--fs-sm);
}
.influ-report-row:first-child{border-top:0;}
.influ-report-row.is-head{
  background:var(--paper); font-family:var(--font-mono); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);
}
.influ-report-row.is-out{opacity:.6;}
.influ-report-row small{display:block; font-size:var(--fs-xs); color:var(--ink-soft);}
.influ-report-row small.is-good{color:var(--mint-deep);}
.influ-report-row small.is-late{color:var(--coral);}
.influ-report-who{display:flex; align-items:center; gap:var(--sp-3); min-width:0;}
.influ-report-who img{width:36px; height:36px; border-radius:var(--r-full); object-fit:cover; flex:none;}
.influ-report-who a{font-weight:600; color:var(--charcoal); text-decoration:none;}
.influ-report-who a:hover{color:var(--mint-deep);}
.influ-report-stars{color:var(--gold);}
.influ-report-foot{
  margin:var(--sp-6) 0 0; padding-top:var(--sp-4); border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft);
}

/* The way in, on the campaign page. */
.influ-order-report{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3);
  margin:var(--sp-5) 0 0; padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--mint); border-radius:var(--r-lg); background:var(--mint-tint);
}
.influ-order-report strong{display:block; color:var(--charcoal);}
.influ-order-report span{display:block; font-size:var(--fs-sm); color:var(--ink);}

@media (max-width:760px){
  .influ-report-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:var(--sp-2);}
  .influ-report-row.is-head{display:none;}
  .influ-report-who{grid-column:1 / -1;}
}

/* ------------------------------------------------------------- trust signals
   Facts about what a creator has actually done, on the browse card and the profile hero.
   Deliberately quiet: these are read next to a price and a star rating, and shouting
   would make them look like marketing rather than a record. */
.influ-trust{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-left:20px;}
.profile-hero .influ-trust{padding-left:0; margin-top:12px;}
.influ-trust-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper);
  font-family:var(--font-mono); font-size:.7rem; line-height:1.5;
  color:var(--ink-soft); white-space:nowrap; cursor:help;
}
.influ-trust-pill::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--line);}
.influ-trust-pill.is-good{color:var(--mint-deep); border-color:var(--mint); background:var(--mint-tint);}
.influ-trust-pill.is-good::before{background:var(--mint-deep);}
.influ-trust-pill.is-fair::before{background:var(--gold);}
.influ-trust-pill.is-weak{color:var(--coral);}
.influ-trust-pill.is-weak::before{background:var(--coral);}
.influ-trust-pill.is-new{font-style:normal; color:var(--ink-soft);}
.profile-hero .influ-trust-pill{font-size:.75rem; padding:4px 11px;}

@media (max-width:520px){
  /* Three pills wrap to three lines on a phone and push the price off the card. */
  .creator-card .influ-trust{gap:5px;}
  .creator-card .influ-trust-pill{font-size:.66rem; padding:2px 7px;}
}

/* ------------------------------------------------------------- help articles
   Takeaways, FAQs, sources and related articles inside a help article. The blog's own
   blocks, re-spaced for the narrower article column. */
.kb-article-body .doc-takeaways{margin:22px 0 28px;}
.kb-article-body .doc-faq, .kb-article-body .doc-sources{margin:40px 0 0; max-width:none;}
.doc-related{margin:40px 0 0;}
.doc-related h2{font-family:var(--font-display); font-size:var(--fs-xl); margin:0 0 14px;}
.doc-related-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;}
.doc-related-grid a{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--white); text-decoration:none; color:inherit; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);}
.doc-related-grid a:hover{border-color:var(--mint); box-shadow:var(--e-1);}
.doc-related-grid strong{font-size:.95rem; color:var(--charcoal);}
.doc-related-grid span{font-size:.82rem; color:var(--ink-soft); line-height:1.45;}

/* ------------------------------------------------------------------- support
   /support/: a ticket thread, the list of your tickets, and "find my ticket". The thread
   borrows the chat's bubbles so a conversation with the Influ team looks like any other
   conversation on the site. */
.support-page{position:relative; overflow:hidden; padding:40px 0 80px; min-height:60vh;}
.support-page .blob-field{position:absolute; inset:0; pointer-events:none; z-index:0;}
.support-wrap{position:relative; z-index:1; max-width:880px;}
.support-head{margin-bottom:28px;}
.support-head h1{font-size:clamp(1.8rem,3.6vw,2.5rem); margin:6px 0 10px;}
.support-lede{color:var(--ink-soft); max-width:60ch; margin-bottom:18px; line-height:1.6;}
.support-label{display:block; font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:14px 0 6px;}
.support-card input[type="text"], .support-card input[type="email"]{
  width:100%; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--white); font:inherit; color:var(--charcoal);
}
.support-card input:focus{border-color:var(--mint); outline:none; box-shadow:0 0 0 4px var(--mint-tint);}
.support-card .btn{margin-top:18px;}
.support-find{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px; align-items:start;}
.support-card{background:var(--white); border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:var(--e-1);}
.support-aside h2{font-size:1.05rem; margin:0 0 6px;}
.support-aside p{color:var(--ink-soft); font-size:.92rem; margin-bottom:12px;}
.support-aside h2 + p + .btn{margin-bottom:26px;}
.support-aside a:not(.btn){color:var(--mint-deep); font-weight:600;}
.support-empty{background:var(--white); border:1px dashed var(--line); border-radius:20px; padding:40px; text-align:center; color:var(--ink-soft);}
.support-empty h2{color:var(--charcoal); font-size:1.2rem; margin-bottom:6px;}

.ticket-view{background:var(--white); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--e-1);}
.ticket-head{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--line);}
.ticket-head h1{font-size:clamp(1.3rem,2.6vw,1.7rem); margin:4px 0 6px; overflow-wrap:anywhere;}
.ticket-sub{font-size:.86rem; color:var(--ink-soft);}
.ticket-explain{font-size:.86rem; color:var(--ink-soft); background:var(--paper); border-radius:12px; padding:10px 14px; margin:16px 0 0; line-height:1.55;}
.ticket-explain a{color:var(--mint-deep); font-weight:600;}
.ticket-status{
  flex-shrink:0; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  padding:5px 11px; border-radius:999px; background:var(--paper); color:var(--ink-soft); white-space:nowrap;
}
.ticket-status.is-open{background:#FFF4E5; color:#8A5300;}
.ticket-status.is-pending{background:var(--mint-tint); color:var(--mint-deep);}
.ticket-status.is-resolved{background:#E8F5EF; color:var(--mint-deep);}
.ticket-status.is-closed{background:var(--paper); color:var(--ink-soft);}
.ticket-thread{display:flex; flex-direction:column; padding:18px 2px; max-height:62vh; overflow-y:auto;}
.ticket-thread .chat-system{align-self:center;}
.ticket-stamp{font-family:var(--font-mono); font-size:.64rem; opacity:.8; margin-left:6px;}
.ticket-atts{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.ticket-att{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; padding:5px 10px; border-radius:8px;
  background:rgba(128,128,128,.12); color:inherit; text-decoration:none; max-width:100%; overflow-wrap:anywhere;
}
.ticket-att::before{content:'📎';}
.chat-msg.is-internal .chat-bubble{background:#FFF8E1 !important; color:var(--ink) !important; border:1px dashed #E0B040;}
.ticket-composer{border-top:1px solid var(--line); padding-top:16px;}
.ticket-composer textarea{
  width:100%; min-width:0; resize:vertical; min-height:110px; padding:12px 14px; border:1px solid var(--line);
  border-radius:14px; font:inherit; background:var(--white); color:var(--charcoal);
}
.ticket-composer textarea:focus{border-color:var(--mint); outline:none; box-shadow:0 0 0 4px var(--mint-tint);}
.ticket-composer-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px;}
.ticket-composer-foot .btn{margin-left:auto;}
/* The file picker. The native control is kept -- it is what keyboards, screen readers and
   phones' file choosers work with -- but visually hidden behind a label styled like the
   rest of the site, with the chosen file's name and size, and a way to remove it. */
.support-file{position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0;}
.support-file-input{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap;}
.support-file-btn{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0; cursor:pointer;
  padding:9px 15px; border-radius:999px; border:1px dashed var(--mint); background:var(--mint-tint);
  color:var(--mint-deep); font-size:.86rem; font-weight:600; line-height:1.2;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.support-file-btn:hover{background:var(--white); border-style:solid;}
.support-file-input:focus-visible + .support-file-btn{outline:none; border-style:solid; box-shadow:0 0 0 4px var(--mint-tint), 0 0 0 5px var(--mint);}
.support-file.has-file .support-file-btn{border-style:solid; background:var(--white);}
.support-file-name{min-width:0; flex:1 1 160px; font-size:.82rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.support-file.has-file .support-file-name{color:var(--charcoal); font-weight:500;}
.support-file-clear{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--white);
  color:var(--ink-soft); font-size:1.1rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.support-file-clear:hover{color:#8e2a24; border-color:#f3c4bd; background:#fdecea;}
.support-file-clear[hidden]{display:none;}
.support-count{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);}
.support-count.is-low{color:var(--coral);}
.support-error{margin-top:10px; font-size:.86rem; color:#8e2a24; background:#fdecea; border-radius:10px; padding:8px 12px;}
.ticket-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid var(--line);}

.ticket-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.ticket-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:14px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  text-decoration:none; color:inherit; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ticket-row:hover{border-color:var(--mint); box-shadow:var(--e-1);}
.ticket-row.has-unread{border-left:4px solid var(--mint-deep);}
.ticket-row-main{min-width:0; display:flex; flex-direction:column; gap:3px;}
.ticket-row-ref{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}
.ticket-row-subject{font-weight:600; color:var(--charcoal); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ticket-row-unread{font-family:var(--font-mono); font-size:.7rem; color:var(--white); background:var(--mint-deep); border-radius:999px; padding:3px 9px;}
.ticket-row-when{font-size:.78rem; color:var(--ink-soft); white-space:nowrap;}
.support-page .influ-notice{margin-bottom:18px;}

@media (max-width:720px){
  .support-find{grid-template-columns:1fr;}
  .ticket-view{padding:18px; border-radius:18px;}
  .ticket-head{flex-direction:column;}
  .ticket-row{grid-template-columns:minmax(0,1fr) auto; row-gap:8px;}
  .ticket-row-when{grid-column:1 / -1;}
  .ticket-composer-foot .btn{margin-left:0; width:100%;}
  .support-file{width:100%;}
}

/* ------------------------------------------------------------------- contact
   The contact page: pick a topic, see what already answers it, then send a message that
   becomes a ticket. Every grid child carries min-width:0 -- the old page's email field ran
   out of its column precisely because a grid item will not shrink below its content. */
.contact-hero{position:relative; overflow:hidden; padding:clamp(40px,7vw,84px) 0 clamp(28px,5vw,48px);}
.contact-hero-inner{position:relative; z-index:1;}
.contact-hero h1{font-size:clamp(2rem,5.2vw,3.6rem); line-height:1.05; letter-spacing:-.02em; margin:12px 0 16px; max-width:18ch;}
.contact-lede{color:var(--ink-soft); font-size:clamp(1rem,1.6vw,1.12rem); line-height:1.6; max-width:60ch;}
.contact-badges{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-top:22px;}
.contact-live{
  display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:999px;
  background:var(--white); border:1px solid var(--line); font-size:.88rem; color:var(--ink); box-shadow:var(--e-1);
}
.contact-live-dot{width:9px; height:9px; border-radius:50%; background:var(--ink-soft); flex-shrink:0;}
.contact-live.is-open .contact-live-dot{background:var(--mint-deep); box-shadow:0 0 0 0 var(--mint); animation:contactPulse 2.2s infinite;}
@keyframes contactPulse{0%{box-shadow:0 0 0 0 rgba(61,190,139,.55);}70%{box-shadow:0 0 0 9px rgba(61,190,139,0);}100%{box-shadow:0 0 0 0 rgba(61,190,139,0);}}
.contact-promise{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); letter-spacing:.02em;}

.contact-body{padding:8px 0 90px;}
.contact-step{display:flex; align-items:center; gap:12px; font-size:1.25rem; margin:34px 0 16px;}
.contact-step span{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:var(--charcoal); color:var(--white); font-family:var(--font-mono); font-size:.85rem; flex-shrink:0;
}
.contact-topics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.contact-topic{
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; row-gap:2px; align-items:center;
  text-align:left; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:var(--white);
  font:inherit; color:var(--charcoal); cursor:pointer; min-width:0;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.contact-topic svg{grid-row:1 / span 2; color:var(--mint-deep); background:var(--mint-tint); border-radius:12px; padding:9px; width:42px; height:42px; box-sizing:border-box;}
.contact-topic-name{font-weight:600; font-size:.95rem;}
.contact-topic-blurb{font-size:.8rem; color:var(--ink-soft); line-height:1.35;}
.contact-topic:hover{border-color:var(--mint); box-shadow:var(--e-1); transform:translateY(-1px);}
.contact-topic:focus-visible{outline:none; box-shadow:0 0 0 4px var(--mint-tint); border-color:var(--mint);}
.contact-topic.is-active{border-color:var(--mint-deep); box-shadow:0 0 0 3px var(--mint-tint);}
.contact-topic.is-active svg{background:var(--mint-deep); color:var(--white);}

.contact-layout{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:32px; align-items:start;}
.contact-main, .contact-aside{min-width:0;}
.contact-topic-panel{margin-top:22px; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:18px 20px;}
.contact-tip{font-size:.92rem; color:var(--ink); margin:0 0 12px; line-height:1.55;}
.contact-topic-panel .btn{margin-bottom:12px;}
.contact-answers-label{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin:4px 0 8px;}
.contact-answers{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.contact-answers a{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:12px; background:var(--white); border:1px solid var(--line); text-decoration:none; color:inherit; transition:border-color var(--t-fast) var(--ease);}
.contact-answers a:hover{border-color:var(--mint);}
.contact-answers strong{font-size:.9rem; color:var(--charcoal);}
.contact-answers span{font-size:.8rem; color:var(--ink-soft);}

.contact-form{padding:28px;}
.contact-grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px;}
.contact-field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px; min-width:0;}
.contact-field label{font-size:.84rem; font-weight:600; color:var(--charcoal);}
.contact-field label small{font-weight:400; color:var(--ink-soft);}
.contact-field input, .contact-field select, .contact-field textarea{
  width:100%; min-width:0; box-sizing:border-box; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--white); font:inherit; color:var(--charcoal);
}
.contact-field textarea{resize:vertical; min-height:150px; line-height:1.55;}
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus{border-color:var(--mint); outline:none; box-shadow:0 0 0 4px var(--mint-tint);}
.contact-field .support-count{align-self:flex-end; margin-top:-2px;}
.contact-file{margin:2px 0 14px;}
.contact-turnstile{margin:6px 0 12px; max-width:100%; overflow:hidden;}
.contact-submit{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px;}
.contact-submit p{font-size:.8rem; color:var(--ink-soft); margin:0; flex:1 1 220px;}

.contact-done{text-align:center; padding:36px 28px;}
.contact-done:focus{outline:none;}
.contact-done-mark{width:56px; height:56px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--mint-deep); color:var(--white); font-size:1.6rem;}
.contact-done h3{font-size:1.4rem; margin-bottom:8px;}
.contact-done p{color:var(--ink); max-width:48ch; margin:0 auto 10px; line-height:1.6;}
.contact-done-soft{font-size:.86rem; color:var(--ink-soft) !important;}
.contact-done a:not(.btn){color:var(--mint-deep); font-weight:600;}

.contact-aside{display:flex; flex-direction:column; gap:16px; margin-top:34px;}
.contact-aside-card{background:var(--white); border:1px solid var(--line); border-radius:20px; padding:22px;}
.contact-aside-card h3{font-size:1rem; margin:0 0 12px;}
.contact-channels{margin:0; display:flex; flex-direction:column; gap:10px;}
.contact-channels div{display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px;}
.contact-channels dt{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding-top:3px;}
.contact-channels dd{margin:0; font-size:.9rem; color:var(--ink); overflow-wrap:anywhere;}
.contact-channels a{color:var(--mint-deep); font-weight:600; text-decoration:none;}
.contact-faq details{padding:12px 0;}
.contact-faq details:first-child{padding-top:0;}
.contact-faq summary{font-size:.9rem; font-weight:600;}
.contact-faq details p{font-size:.86rem; margin-top:8px;}
.contact-faq details a{color:var(--mint-deep); font-weight:600;}
.contact-more{display:inline-block; margin-top:12px; font-size:.86rem; font-weight:600; color:var(--mint-deep); text-decoration:none;}
.contact-mini-tickets{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.contact-mini-tickets a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:inherit;}
.contact-mini-tickets span{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft);}
.contact-mini-tickets strong{grid-column:1; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.contact-mini-tickets em{grid-column:2; grid-row:1 / span 2; align-self:center; font-style:normal;}

@media (max-width:980px){
  .contact-layout{grid-template-columns:minmax(0,1fr);}
  .contact-aside{margin-top:8px;}
  .contact-topics{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px){
  .contact-br{display:none;}
  .contact-topics{grid-template-columns:minmax(0,1fr);}
  .contact-grid-2{grid-template-columns:minmax(0,1fr);}
  .contact-form{padding:20px;}
  .contact-submit .btn{width:100%;}
  .contact-channels div{grid-template-columns:minmax(0,1fr); gap:2px;}
}

/* -------------------------------------------------------------- share a creator
   The rate card share button on a profile, the share sheet, and the creator dashboard's
   "your shareable rate card". */
.pp-share-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px;}
.pp-share-btn{display:inline-flex; align-items:center; gap:8px;}
.pp-share-url{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); overflow-wrap:anywhere;}
.profile-hero .influ-trust + .pp-share-row{margin-top:12px;}

html.share-sheet-open{overflow:hidden;}
.share-sheet{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:18px;}
.share-sheet-backdrop{position:absolute; inset:0; background:rgba(20,26,23,.55); backdrop-filter:blur(3px); animation:shareFade .18s ease;}
.share-sheet-panel{
  position:relative; width:100%; max-width:520px; max-height:calc(100vh - 36px); overflow-y:auto;
  background:var(--white); border-radius:24px; padding:26px; box-shadow:0 30px 80px rgba(0,0,0,.28);
  animation:sharePop .22s var(--ease);
}
@keyframes shareFade{from{opacity:0}to{opacity:1}}
@keyframes sharePop{from{opacity:0; transform:translateY(12px) scale(.98)}to{opacity:1; transform:none}}
.share-sheet-x{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--white); font-size:1.4rem; line-height:1; color:var(--ink-soft); cursor:pointer;}
.share-sheet-x:hover{color:var(--charcoal); border-color:var(--ink-soft);}
.share-sheet-eyebrow{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mint-deep); margin:0 0 4px;}
.share-sheet-panel h2{font-size:1.35rem; margin:0 44px 14px 0;}
.share-sheet-card{display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; border-radius:14px; border:1px solid var(--line); background:var(--paper);}
.share-sheet-hint{font-size:.8rem; color:var(--ink-soft); margin:8px 0 14px;}
.share-sheet-link{display:flex; gap:8px; align-items:stretch; margin-bottom:16px;}
.share-sheet-link input{flex:1 1 auto; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:12px; font-family:var(--font-mono); font-size:.8rem; color:var(--charcoal); background:var(--paper);}
.share-sheet-link .btn{display:inline-flex; align-items:center; gap:6px; flex-shrink:0;}
.share-sheet-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
.share-sheet-app{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border-radius:14px;
  border:1px solid var(--line); background:var(--white); color:var(--charcoal); font:inherit; font-size:.78rem; font-weight:600;
  text-decoration:none; cursor:pointer; transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.share-sheet-app:hover{transform:translateY(-1px); border-color:currentColor;}
.share-sheet-app svg{width:24px; height:24px;}
.share-sheet-app.is-whatsapp{color:#128C4B;}
.share-sheet-app.is-facebook{color:#1877F2;}
.share-sheet-app.is-linkedin{color:#0A66C2;}
.share-sheet-app.is-x{color:#111;}
.share-sheet-app.is-instagram{color:#C13584;}
.share-sheet-app.is-more{color:var(--ink-soft);}
.share-sheet-app span{color:var(--charcoal);}
.share-sheet-download{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.84rem; font-weight:600; color:var(--mint-deep); text-decoration:none;}
.share-sheet-download:hover{text-decoration:underline;}
.share-sheet-toast{margin:14px 0 0; padding:10px 12px; border-radius:12px; background:var(--mint-tint); color:var(--mint-deep); font-size:.84rem; line-height:1.45;}
@media (max-width:520px){
  .share-sheet{align-items:flex-end; padding:0;}
  .share-sheet-panel{border-radius:22px 22px 0 0; max-height:92vh; padding:22px 18px 26px;}
  .share-sheet-link{flex-direction:column;}
  .share-sheet-link .btn{justify-content:center;}
}

.influ-share-card{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:24px; align-items:center;}
.influ-share-card-img{display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--e-1); line-height:0;}
.influ-share-card-img img{width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; transition:transform var(--t-base) var(--ease);}
.influ-share-card-img:hover img{transform:scale(1.02);}
.influ-share-eyebrow{display:inline-block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mint-deep); background:var(--mint-tint); border-radius:999px; padding:3px 10px;}
.influ-share-card-body h3{margin:10px 0 6px;}
.influ-share-card-body p{color:var(--ink-soft); font-size:.9rem; line-height:1.55; margin:0 0 12px;}
.influ-share-link{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.influ-share-link code{font-family:var(--font-mono); font-size:.8rem; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:7px 10px; color:var(--charcoal); overflow-wrap:anywhere; min-width:0;}
.influ-share-actions{display:flex; gap:8px; flex-wrap:wrap;}
@media (max-width:760px){
  .influ-share-card{grid-template-columns:minmax(0,1fr);}
}

/* Asking to be paid: the form sits under the balance it is about, and reads as one line
   rather than a settings panel. */
.wallet-withdraw{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px;}
.wallet-withdraw label{font-size:.85rem; color:var(--ink-soft); margin:0;}
.wallet-withdraw-amount{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:12px; padding:6px 10px; background:var(--white);}
.wallet-withdraw-amount span{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);}
.wallet-withdraw-amount input{width:120px; border:0; padding:2px 0; font-size:1rem; font-weight:600; background:transparent;}
.wallet-withdraw-amount input:focus{outline:none;}
.wallet-withdraw .wallet-hint{flex-basis:100%; margin:0;}
.wallet-request{
  margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px;
  background:var(--mint-tint);
}
.wallet-request p{margin:0 0 10px; font-size:.9rem; line-height:1.55; color:var(--ink);}
.wallet-request form{margin:0;}

/* Refer a creator. An offer rather than a statistic, so it gets card chrome of its own
   and sits above the numbers -- it is something to do, not something to read. */
.influ-refer-card{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white);
  padding:var(--sp-5); box-shadow:var(--e-1);
}
.influ-refer-card h3{margin:10px 0 6px;}
.influ-refer-card > p{color:var(--ink-soft); font-size:.9rem; line-height:1.55; margin:0 0 14px; max-width:68ch;}
.influ-refer-code{font-size:.85rem; color:var(--ink-soft); margin:0 0 14px;}
.influ-refer-code strong{
  font-family:var(--font-mono); letter-spacing:.06em; color:var(--mint-deep);
  background:var(--mint-tint); border-radius:8px; padding:3px 8px;
}
.influ-refer-stats{
  list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6);
  margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line);
}
.influ-refer-stats li{display:flex; flex-direction:column; gap:2px; min-width:0;}
.influ-refer-stats strong{font-size:1.15rem; color:var(--charcoal);}
.influ-refer-stats span{font-size:.78rem; color:var(--ink-soft);}

/* ---------------------------------------------------------------- printing
   A brand prints the report and takes it into a meeting, so the page furniture goes and
   the paper carries what it needs on its own: black on white, links spelled out, and no
   row split across two sheets. */
@media print{
  header.site,.mobile-menu,footer,.influ-acct-nav,.influ-bell,.back-to-top,
  .swarm-bar,.swarm-drawer,.nav-swarm,.influ-report-actions,.influ-notice,
  .woocommerce-MyAccount-navigation,.skip-link{display:none !important;}

  html,body{background:#fff !important; color:#000;}
  .woocommerce-account .woocommerce{display:block; padding:0; max-width:none;}
  .influ-acct-page,.influ-report{margin:0; padding:0;}
  .influ-report-table,.influ-kpi,.influ-report-brief blockquote{
    border-color:#999 !important; background:#fff !important; box-shadow:none !important;
  }
  .influ-report-row{break-inside:avoid; page-break-inside:avoid;}
  .influ-report-kpis{grid-template-columns:repeat(3,1fr);}
  /* On paper a link is just underlined text, so the post it points at has to be spelled
     out -- but only the posts. Spelling out each creator's profile link too turned every
     row into a wall of URLs. */
  .influ-report-row > span:not(.influ-report-who) a[href^="http"]::after{content:" " attr(href); font-size:9pt; word-break:break-all;}
  .influ-report-foot{border-top:1px solid #999;}
  a{color:#000; text-decoration:underline;}
}

/* ---- Search landing pages (Influ_Landing) ----------------------------------
   "TikTok influencers in Sri Lanka" and the rest: a header with the numbers, the
   matching creators in browse's own cards, the copy, and a block of every other page. */
.ld-header{padding-bottom:36px;}
.ld-stats{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:12px;}
.ld-stats li{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:10px 16px; display:flex; flex-direction:column; min-width:130px;}
.ld-stats strong{font-family:var(--font-display); font-size:1.2rem; color:var(--charcoal);}
.ld-stats span{font-size:.78rem; color:var(--ink-soft);}
.ld-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}
.ld-grid-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-bottom:20px;}
.ld-grid-head h2{font-size:1.4rem;}
.ld-grid-head p{color:var(--ink-soft); font-size:.88rem;}
.ld-grid{list-style:none; margin:0; padding:0;}
.creator-card .cc-name{margin:0;}
.creator-card .cc-name a{color:inherit; text-decoration:none;}
.creator-card .cc-name a::after{content:""; position:absolute; inset:0;}
.ld-grid .creator-card{position:relative; display:flex; flex-direction:column;}
.ld-grid .cc-actions{position:relative; z-index:1;}
.ld-verified{display:inline-block; margin-top:4px; font-family:var(--font-mono); font-size:.66rem; color:var(--mint-deep); background:var(--mint-tint); border-radius:999px; padding:2px 8px;}
.ld-platforms{list-style:none; margin:14px 0 0; padding:0 20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px;}
.ld-platforms li{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-soft); min-width:0;}
.ld-platforms .sw{width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ld-platforms .sw svg{width:12px; height:12px;}
.ld-pname{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ld-pnum{margin-left:auto; font-family:var(--font-mono); color:var(--charcoal);}
.ld-more{text-align:center; margin-top:28px;}
.ld-empty{background:var(--white); border:1px dashed var(--line); border-radius:var(--radius); padding:32px; max-width:720px;}
.ld-empty h2{font-size:1.3rem; margin-bottom:10px;}
.ld-empty p{color:var(--ink-soft); margin-top:8px;}
.ld-body{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:start;}
.ld-body .prose{max-width:none;}
.ld-side{position:sticky; top:96px; display:flex; flex-direction:column; gap:20px;}
.ld-side .article-cta{margin:0; flex-direction:column; align-items:flex-start;}
.ld-guides{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.ld-guides h3{font-size:.95rem; margin-bottom:10px;}
.ld-guides ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.ld-guides a{font-size:.88rem; color:var(--mint-deep); text-decoration:none;}
.ld-guides a:hover{text-decoration:underline;}
.ld-browse-by{background:var(--mint-tint);}
.ld-browse-by h2{font-size:1.4rem; margin-bottom:20px;}
.ld-browse-by .wrap{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;}
.ld-browse-by .wrap > h2{grid-column:1 / -1;}
.ld-group h3{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:10px;}
.ld-group ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.ld-group a{color:var(--charcoal); font-size:.9rem; text-decoration:none;}
.ld-group a:hover{color:var(--mint-deep); text-decoration:underline;}
.ld-group [aria-current]{font-size:.9rem; font-weight:600; color:var(--mint-deep);}
@media (max-width:980px){
  .ld-body{grid-template-columns:1fr;}
  .ld-side{position:static;}
  .ld-browse-by .wrap{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:520px){
  .ld-stats li{min-width:0; flex:1 1 calc(50% - 6px);}
  .ld-browse-by .wrap{grid-template-columns:1fr;}
}
.ld-profile-more{padding:32px 0 56px;}
.ld-profile-more h2{font-size:1.1rem; margin-bottom:14px;}
.ld-profile-more ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
.ld-profile-more a{display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--charcoal); font-size:.85rem; text-decoration:none;}
.ld-profile-more a:hover{border-color:var(--mint); color:var(--mint-deep);}

/* ---- The verified badge -----------------------------------------------------
   Earned by linking all four platforms (influ-insights). One drawing, whatever
   renders it: browse cards, the rate card headline, the landing pages. */
.influ-badge{display:inline-flex; align-items:center; vertical-align:middle; margin-left:5px; line-height:0;}
.influ-badge svg{display:block; width:16px; height:16px;}
.cc-name .influ-badge svg{width:15px; height:15px;}
.influ-badge.is-lg svg{width:22px; height:22px;}
.influ-badge-svg.is-muted{opacity:.75;}

/* ---- Messages v2 -----------------------------------------------------------
   The list can be filtered and searched; a row says who, which campaign and what
   is waiting on you; a thread splits what people wrote from what the platform did. */
.chat-search{display:flex; align-items:center; gap:8px; margin-top:12px; padding:8px 12px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;}
.chat-search:focus-within{border-color:var(--mint); background:var(--white);}
.chat-search svg{width:16px; height:16px; color:var(--ink-soft); flex:none;}
.chat-search input{flex:1; min-width:0; border:0; background:transparent; outline:0; font:inherit; font-size:.9rem; color:var(--charcoal);}
.chat-search input::-webkit-search-cancel-button{display:none;}
.chat-search-clear{border:0; background:transparent; color:var(--ink-soft); font-size:1.2rem; line-height:1; cursor:pointer; padding:0 2px;}
.chat-search-clear:hover{color:var(--charcoal);}

.chat-filters{display:flex; gap:6px; margin-top:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;}
.chat-filters::-webkit-scrollbar{display:none;}
.chat-filter{flex:none; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--line);
  border-radius:999px; background:var(--white); color:var(--ink-soft); font-size:.8rem; cursor:pointer; transition:.15s;}
.chat-filter:hover{border-color:var(--mint); color:var(--mint-deep);}
.chat-filter.is-on{background:var(--charcoal); border-color:var(--charcoal); color:var(--white);}
.chat-filter-count{font-family:var(--font-mono); font-size:.68rem; opacity:.85;}

.chat-row-meta{display:flex; align-items:center; gap:8px; margin:3px 0 2px; min-width:0;}
.chat-row-subject{font-size:.76rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-row-event{color:var(--ink-soft); font-style:italic;}
.chat-row-pills{display:flex; flex-direction:column; gap:4px; align-items:flex-end;}
.chat-row-pill.is-quiet{background:var(--line); color:var(--ink-soft); font-weight:500;}

.chat-state{flex:none; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; background:var(--line); color:var(--ink-soft);}
.chat-state.is-needs_you{background:var(--mint-tint); color:var(--mint-deep);}
.chat-state.is-dispute{background:#FDF0EC; color:#A2432B;}
.chat-state.is-live{background:rgba(201,154,62,.16); color:#8A6A28;}

.chat-list-more{padding:10px 16px 16px; text-align:center;}

.chat-head-subject{color:var(--ink-soft);}
.chat-head-dot{margin:0 6px; color:var(--line);}
.chat-do{flex:none; white-space:nowrap;}
.chat-head-btn{display:inline-flex; align-items:center; gap:6px; flex:none; padding:7px 11px; border:1px solid var(--line);
  border-radius:999px; background:var(--white); color:var(--ink-soft); font-size:.78rem; cursor:pointer;}
.chat-head-btn:hover{border-color:var(--mint); color:var(--mint-deep);}
.chat-head-btn.is-on{background:var(--mint-tint); border-color:var(--mint); color:var(--mint-deep);}
.chat-head-btn svg{width:14px; height:14px;}

.chat-campaigns{display:flex; gap:6px; padding:10px 20px 0; overflow-x:auto; scrollbar-width:none;}
.chat-campaigns::-webkit-scrollbar{display:none;}
.chat-campaign{flex:none; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--white);
  color:var(--ink-soft); font-size:.78rem; cursor:pointer; white-space:nowrap;}
.chat-campaign:hover{border-color:var(--mint); color:var(--mint-deep);}
.chat-campaign.is-on{background:var(--mint-tint); border-color:var(--mint); color:var(--mint-deep); font-weight:600;}
.chat-campaign.has-dispute::after{content:"•"; margin-left:6px; color:var(--coral);}

.chat-tabs{display:flex; gap:18px; padding:12px 20px 0; border-bottom:1px solid var(--line);}
.chat-tab{position:relative; padding:0 0 10px; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-display); font-size:.9rem; font-weight:600; color:var(--ink-soft);}
.chat-tab:hover{color:var(--charcoal);}
.chat-tab.is-on{color:var(--charcoal);}
.chat-tab.is-on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--mint-deep); border-radius:2px;}
.chat-tab-count{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:6px;
  padding:0 5px; border-radius:999px; background:var(--mint-deep); color:var(--white); font-family:var(--font-mono); font-size:.65rem;}

/* An automated notice is a dated line in a timeline, not a paragraph in the middle
   of the conversation. */
.chat-update{position:relative; margin:0 0 10px 14px; padding:10px 14px 10px 18px; border-left:2px solid var(--line);
  color:var(--ink-soft); font-size:.86rem; line-height:1.55;}
.chat-update::before{content:""; position:absolute; left:-5px; top:15px; width:8px; height:8px; border-radius:50%;
  background:var(--mint); border:2px solid var(--white);}
.chat-update-head{display:flex; align-items:baseline; gap:10px; margin-bottom:3px;}
.chat-update-tag{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-deep);}
.chat-update-time{font-size:.7rem; color:var(--ink-soft);}
.chat-update-body{display:block; white-space:pre-wrap;}
.chat-empty-tab{padding:40px 24px; text-align:center; color:var(--ink-soft); font-size:.9rem;}

@media (max-width:820px){
  .chat-campaigns{padding:10px 16px 0;}
  .chat-tabs{padding:10px 16px 0;}
  .chat-head-btn span{display:none;}
}