/* ===== Captee component library — the ONE source of truth, extracted from the landing pricing
   section. Loaded by index.html, studio.html and /styleguide. Relies on each page's tokens
   (--brand/--accent/--srf/--line/--tx/--muted/--dim/--r/--grad-lime/--font-disp/--font-ui). ===== */

/* CARDS — near-black surface, hairline, large radius, generous padding; featured = lime hairline+bloom */
.c-card{background:var(--srf);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;
  transition:transform .18s ease,border-color .18s ease;}
.c-card:hover{border-color:rgba(139,92,246,.34);}
.c-card--feat{position:relative;border-color:rgba(217,255,75,.34);
  background:linear-gradient(180deg,rgba(217,255,75,.05),transparent 46%),var(--srf);
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 60px rgba(217,255,75,.06);}

/* BUTTONS — one lime primary action per view; everything else a muted hairline ghost */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-ui);
  font-weight:700;font-size:15px;padding:14px 22px;border-radius:13px;border:0;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
.c-btn--primary{background:var(--grad-lime);color:#0a0a0a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.35),
    0 6px 18px rgba(217,255,75,.22),0 0 46px rgba(217,255,75,.16);}
.c-btn--primary:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.10),0 2px 4px rgba(0,0,0,.35),
    0 12px 30px rgba(217,255,75,.34),0 0 62px rgba(217,255,75,.26);}
.c-btn--ghost{background:rgba(255,255,255,.05);color:var(--tx);border:1px solid rgba(255,255,255,.14);}
.c-btn--ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-2px);}
.c-btn--sm{padding:8px 14px;font-size:13px;border-radius:10px;}
.c-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;}

/* PILLS / BADGES */
.c-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.3);
  color:var(--brand-2);padding:4px 10px;border-radius:100px;font-size:11.5px;font-weight:700;}
.c-pill--lime{background:rgba(216,255,90,.13);border-color:rgba(216,255,90,.3);color:var(--accent);}
.c-pill--muted{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--muted);}
.c-badge{display:inline-flex;background:var(--accent);color:#0a0a0a;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 11px;border-radius:100px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}

/* CHECK LIST — circled-check confirmation language */
.c-list{list-style:none;padding:0;margin:0;}
.c-list li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:14.5px;color:var(--muted);}
.c-check{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:rgba(216,255,90,.14);
  border:1px solid rgba(216,255,90,.34);color:var(--accent);display:grid;place-items:center;font-size:11px;font-weight:900;margin-top:1px;}

/* INPUTS / DROPDOWN */
.c-label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px;font-weight:600;}
.c-input,.c-select{width:100%;height:44px;padding:0 14px;background:var(--srf2);border:1px solid var(--line);
  border-radius:12px;color:var(--tx);font-family:var(--font-ui);font-size:14px;outline:0;
  transition:border-color .14s ease,box-shadow .14s ease;}
.c-input::placeholder{color:var(--dim);}
.c-input:focus,.c-select:focus{border-color:rgba(139,92,246,.6);box-shadow:0 0 0 3px rgba(139,92,246,.16);}
.c-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;background-repeat:no-repeat;
  background-position:right 13px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%239d9caa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

/* SEGMENTED */
.c-seg{display:inline-flex;background:var(--srf3);border-radius:11px;padding:3px;gap:2px;}
.c-seg button{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:13px;padding:8px 15px;border-radius:8px;cursor:pointer;transition:.14s;}
.c-seg button.on{background:var(--srf);color:var(--brand-2);box-shadow:0 1px 3px rgba(0,0,0,.35);}

/* SLIDER */
.c-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:100px;
  background:linear-gradient(90deg,var(--brand) 0 var(--v,60%),#26232f var(--v,60%));outline:0;cursor:pointer;}
.c-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;
  border:2px solid var(--brand);box-shadow:0 2px 6px rgba(0,0,0,.45);cursor:pointer;}
.c-slider::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--brand);}

/* section header voice */
.c-eyebrow{font-family:var(--font-disp);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);}

/* ============================================================ EXPORT: progress + popover
   Added for the render ETA/status UI (8772 lane). Namespaced .c-* so it survives the
   editor redesign. Uses the shared design tokens (--srf/--line/--accent/--muted). */

/* PROGRESS — stage label + bar + human countdown */
.c-export{margin-top:14px;}
.c-export[hidden]{display:none;}
.c-prog{height:8px;border-radius:99px;background:var(--srf3);overflow:hidden;}
.c-prog__bar{height:100%;width:0%;border-radius:99px;background:var(--grad-lime);
  transition:width .35s ease;}
.c-prog--indet .c-prog__bar{width:35% !important;animation:c-indet 1.15s ease-in-out infinite;}
@keyframes c-indet{0%{margin-left:-35%;}100%{margin-left:100%;}}
.c-export__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:9px;font-size:13px;}
.c-stage{display:inline-flex;align-items:center;gap:8px;color:var(--tx);font-weight:600;}
.c-stage__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(217,255,75,.16);animation:c-pulse 1.3s ease-in-out infinite;}
@keyframes c-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.c-eta{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* POPOVER — the Canva-style Export options menu */
.c-pop{position:absolute;z-index:80;min-width:300px;background:var(--srf);
  border:1px solid var(--line);border-radius:var(--r-md,14px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);padding:16px 16px 14px;}
.c-pop[hidden]{display:none;}
.c-pop__head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.c-pop__title{font-family:var(--font-disp);font-weight:700;font-size:16px;color:var(--tx);}
.c-pop__chip{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);
  background:var(--srf3);border-radius:99px;padding:4px 10px;font-variant-numeric:tabular-nums;}
.c-pop__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid var(--line);}
.c-pop__row label{font-size:13.5px;color:var(--tx);font-weight:600;}
.c-pop__go{width:100%;margin-top:14px;}