/* ==========================================================================
   Lickly app UI — reskin to the designer's Animation Assets (Final).pdf
   Every colour below was sampled off the rendered PDF pages, not eyeballed.
   See ../../DESIGN-CONTROL.md for the measurement table and the two
   contrast rulings this file enforces.
   ========================================================================== */

:root{
  /* --- surfaces (light, the product register) --- */
  --ground:#FBF8F7;        /* page ground, light dashboard */
  --card:#FFF5F1;          /* the designer's ceramic. Warmer than brand #F5EEEA */
  --card-2:#FFFFFF;        /* fields, KPI tiles, chart cards */
  --sunk:#F6EEEA;          /* wells, table zebra */

  /* --- ink --- */
  --ink:#181417;           /* brand Limo Black, exact */
  --ink-2:#4A4247;         /* body */
  --ink-3:#6B6360;         /* secondary. 5.47:1 on card — the floor, nothing lighter */
  --ink-4:#8C8481;         /* non-text only: axis ticks, disabled glyphs */

  /* --- lines --- */
  --line:#EBE1DD;
  --line-2:#E2DBDA;
  --line-3:rgba(24,20,23,.10);

  /* --- brand --- */
  --pink:#CE3887;          /* brand pink, exact. 4.31:1 on card => 18.66px+/bold only */
  --pink-mark:#F162A8;     /* signal pink. 2.98:1 => marks and fills, NEVER text */
  --pink-text:#B41E72;     /* the text cut. 4.62:1 on chip fill */
  --pink-fill:#FFD2E3;
  --pink-fill-2:#FFE6F1;
  --pink-tint:#F7E8EE;
  --pink-track:#EAD8D9;
  --leather:#372832;       /* brand Leather, exact — the primary button */
  --teal:#006E78;          /* brand Lickly Blue, exact */
  --teal-tint:#DCEEF0;
  --champ:#E1BA7C;
  --champ-tint:#F9F4ED;

  /* --- semantic --- */
  --ok:#429B5A;    --ok-fill:#DCF1E0;   --ok-text:#1E6B40;
  --warn:#E29C27;  --warn-fill:#F7E5CA; --warn-text:#815900;
  --bad:#E0493F;   --bad-fill:#FFE6F1;  --bad-text:#B41E72;
  --sky:#D8E7F9;   --sky-text:#1F4E80;

  /* --- radius: the designer's ramp, NOT the LG 3/2 ramp (see control row 02) --- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-pill:999px;

  /* --- elevation --- */
  --lift:0 1px 2px rgba(24,20,23,.04), 0 6px 18px rgba(24,20,23,.05);
  --lift-2:0 2px 6px rgba(24,20,23,.06), 0 18px 44px rgba(24,20,23,.09);

  --nav-w:244px;
  --ease:cubic-bezier(.32,.72,.29,1);
  --fast:150ms; --mid:240ms; --slow:420ms;
}

/* --- dark plum theme. They drew it on page 6, so it ships as a real theme. --- */
[data-theme="dark"]{
  --ground:#1D1D21;
  --card:#2B2733;
  --card-2:#322D3C;
  --sunk:#252230;
  --ink:#FFF5F1;
  --ink-2:#DCD4D8;
  --ink-3:#A79FA8;         /* 5.67:1 on the dark panel */
  --ink-4:#7C7482;
  --line:rgba(255,245,241,.11);
  --line-2:rgba(255,245,241,.16);
  --line-3:rgba(255,245,241,.08);
  --pink:#F162A8;          /* on plum the bright pink is the readable one */
  --pink-text:#FFA8D0;
  --pink-fill:rgba(241,98,168,.20);
  --pink-fill-2:rgba(241,98,168,.13);
  --pink-tint:rgba(241,98,168,.10);
  --pink-track:rgba(255,245,241,.13);
  --leather:#FFF5F1;
  --teal:#4FBFC8;
  --teal-tint:rgba(79,191,200,.15);
  --champ-tint:rgba(225,186,124,.12);
  --ok:#5FC57E; --ok-fill:rgba(66,155,90,.20); --ok-text:#8BDCA2;
  --warn:#EFB552; --warn-fill:rgba(226,156,39,.20); --warn-text:#F2C67C;
  --bad:#F1685E; --bad-fill:rgba(224,73,63,.20); --bad-text:#FF9A93;
  --sky:rgba(216,231,249,.16); --sky-text:#AFCDF0;
  --lift:0 1px 2px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.28);
  --lift-2:0 2px 6px rgba(0,0,0,.34), 0 18px 44px rgba(0,0,0,.42);
}
[data-theme="dark"] .btn-primary{color:#241C22}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Roboto Flex','Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.5;
  background:var(--ground); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variation-settings:'opsz' 18;
  transition:background var(--mid) var(--ease), color var(--mid) var(--ease);
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
svg{display:block}
::selection{background:rgba(206,56,135,.20)}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:4px}

/* ---------- type ---------- */
.eyebrow{
  font-family:'Outfit',sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}
.h1{font-size:26px;font-weight:700;letter-spacing:-.018em;line-height:1.18}
.h2{font-size:20px;font-weight:700;letter-spacing:-.014em;line-height:1.25}
.h3{font-size:16px;font-weight:700;letter-spacing:-.008em}
.h4{font-size:14px;font-weight:600;letter-spacing:-.004em}
.sub{color:var(--ink-3);font-size:14px;line-height:1.5}
.sub-sm{color:var(--ink-3);font-size:13px;line-height:1.45}
.num{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em}
.crumb{font-size:12px;color:var(--ink-3);letter-spacing:.005em}
/* the pink text cut. Brand pink is 4.31:1 and cannot carry this size. */
.pink-txt{color:var(--pink-text);font-weight:600}
[data-theme="dark"] .pink-txt{color:var(--pink-text)}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100svh}
.nav{
  width:var(--nav-w);flex:0 0 var(--nav-w);
  background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100svh;z-index:40;
  transition:background var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.nav__brand{
  display:flex;align-items:center;gap:9px;
  padding-top:18px;padding-right:18px;padding-bottom:16px;padding-left:18px;
  border-bottom:1px solid var(--line);
}
.nav__brand img{height:17px;width:auto}
.nav__brand .mark{height:22px}
.env{
  margin-left:auto;font-family:'Outfit',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:3px 8px;
}
.nav__scroll{flex:1;overflow-y:auto;padding-top:12px;padding-bottom:12px;min-height:0}
.nav__group{padding-left:12px;padding-right:12px;padding-bottom:6px}
.nav__label{
  font-family:'Outfit',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);
  padding-left:10px;padding-top:12px;padding-bottom:6px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;color:var(--ink-2);
  text-align:left;position:relative;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.nav-item svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;opacity:.75}
.nav-item:hover{background:var(--pink-tint);color:var(--ink)}
.nav-item.is-on{background:var(--pink-fill);color:var(--pink-text);font-weight:600}
.nav-item.is-on svg{opacity:1}
.nav-item .badge{
  margin-left:auto;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--pink);color:#FFF5F1;border-radius:var(--r-pill);
  min-width:19px;height:19px;display:grid;place-items:center;padding-left:5px;padding-right:5px;
}
.nav-item.is-on .badge{background:var(--pink-text)}
.nav__foot{border-top:1px solid var(--line);padding:12px}
.meter{
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px;margin-bottom:10px;
}
.meter__row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.meter__bar{height:6px;border-radius:var(--r-pill);background:var(--pink-track);overflow:hidden}
.meter__bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--pink);
  width:0;transition:width 900ms var(--ease)}
.who{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:var(--r-sm);width:100%}
.who:hover{background:var(--pink-tint)}
.who img{width:30px;height:30px;border-radius:var(--r-pill);object-fit:cover}

/* ---------- main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100svh}
.topbar{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;
  padding-top:14px;padding-right:26px;padding-bottom:14px;padding-left:26px;
}
.topbar__t{min-width:0}
.topbar__act{margin-left:auto;display:flex;align-items:center;gap:8px}
.view{padding-top:22px;padding-right:26px;padding-bottom:56px;padding-left:26px;max-width:1500px;width:100%}
.view[hidden]{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  padding:9px 17px;white-space:nowrap;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.btn svg{width:15px;height:15px;stroke:currentColor;flex:0 0 15px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--leather);color:#FFF5F1}
.btn-primary:hover{background:#4A3542}
[data-theme="dark"] .btn-primary:hover{background:#E8DCD6}
.btn-ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:var(--card);border-color:var(--ink-4)}
.btn-pink{background:var(--pink);color:#FFF5F1}
.btn-pink:hover{background:var(--pink-text)}
.btn-sm{padding:6px 13px;font-size:12.5px}
.icon-btn{
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--line-2);color:var(--ink-2);background:var(--card-2);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),
             border-color var(--fast) var(--ease);
}
.icon-btn svg{width:16px;height:16px;stroke:currentColor}
.icon-btn:hover{background:var(--pink-tint);color:var(--pink-text);border-color:var(--pink-fill)}
.kbd{
  font-family:'Outfit',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  border:1px solid var(--line-2);border-radius:6px;padding:2px 6px;color:var(--ink-3);
  background:var(--card-2);
}

/* ---------- card ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:background var(--mid) var(--ease),border-color var(--mid) var(--ease),
             box-shadow var(--mid) var(--ease);
}
.card--white{background:var(--card-2)}
.card--pad{padding:20px}
.card--lift{box-shadow:var(--lift)}
.card__head{
  display:flex;align-items:center;gap:12px;
  padding-top:16px;padding-right:18px;padding-bottom:14px;padding-left:18px;
}
.card__head .h3{min-width:0}
.card__head .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.card__body{padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px}
.card__foot{
  border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;
  padding-top:13px;padding-right:18px;padding-bottom:13px;padding-left:18px;
}
.card__foot .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.hr{height:1px;background:var(--line);border:0}

/* ---------- chips: their signature component ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--pink-fill);color:var(--pink-text);
  border-radius:var(--r-pill);padding:6px 12px;
  font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;
  transition:background var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.chip svg{width:13px;height:13px;stroke:currentColor;flex:0 0 13px}
button.chip:hover{background:#FFC2DA;transform:translateY(-1px)}
[data-theme="dark"] button.chip:hover{background:rgba(241,98,168,.30)}
.chip--soft{background:var(--pink-fill-2)}
.chip--mint{background:var(--ok-fill);color:var(--ok-text)}
.chip--amber{background:var(--warn-fill);color:var(--warn-text)}
.chip--sky{background:var(--sky);color:var(--sky-text)}
.chip--plain{background:transparent;border:1px solid var(--line-2);color:var(--ink-2)}
.chip--teal{background:var(--teal-tint);color:var(--teal)}
.chip--lg{font-size:13.5px;padding:8px 14px}

/* status pills, page 6 */
.status{
  display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);
  padding:4px 11px;font-size:12px;font-weight:600;white-space:nowrap;
}
.status svg{width:12px;height:12px;stroke:currentColor;flex:0 0 12px}
.status--ok{background:var(--ok-fill);color:var(--ok-text)}
.status--bad{background:var(--bad-fill);color:var(--bad-text)}
.status--wait{background:var(--warn-fill);color:var(--warn-text)}
.status--idle{background:var(--sunk);color:var(--ink-3)}

/* ---------- bars ---------- */
.bar{height:8px;border-radius:var(--r-pill);background:var(--pink-track);overflow:hidden;flex:1}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--pink);
  width:0;transition:width 820ms var(--ease)}
.bar--teal i{background:var(--teal)}
.bar--thin{height:5px}
.bar-row{display:flex;align-items:center;gap:10px}
.bar-row .pct{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink-2);min-width:34px;text-align:right}

/* ---------- KPI tiles, page 6 ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card-2);
  padding-top:15px;padding-right:16px;padding-bottom:15px;padding-left:16px;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.tile:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.tile--pink{background:var(--pink-tint)}
.tile--champ{background:var(--champ-tint)}
.tile--mint{background:var(--ok-fill)}
.tile .v{font-size:31px;font-weight:700;letter-spacing:-.028em;line-height:1.1;
  font-variant-numeric:tabular-nums;margin-top:7px}
.tile .d{font-size:12px;font-weight:600;margin-top:6px}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  font-family:'Outfit',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);text-align:left;
  padding-top:0;padding-right:12px;padding-bottom:10px;padding-left:0;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{
  padding-top:11px;padding-right:12px;padding-bottom:11px;padding-left:0;
  border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;
}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--fast) var(--ease)}
.tbl tbody tr:hover{background:var(--pink-tint)}
.tbl .cell-who{display:flex;align-items:center;gap:9px;font-weight:600}
.tbl .cell-who img{width:28px;height:28px;border-radius:var(--r-pill);object-fit:cover}
.tbl-wrap{overflow-x:auto}

/* ---------- avatars, thumbs ---------- */
.av{border-radius:var(--r-pill);object-fit:cover;flex:0 0 auto}
.av-40{width:40px;height:40px}
.av-56{width:56px;height:56px}
.av-72{width:72px;height:72px}
.thumb{border-radius:14px;object-fit:cover;flex:0 0 auto;background:var(--sunk)}
.thumb-56{width:56px;height:56px}
.thumb-72{width:72px;height:72px}
.thumb-88{width:88px;height:88px}
.verified{width:16px;height:16px;flex:0 0 16px}

/* ---------- layout helpers (never shorthand padding on a wrapper) ---------- */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-6{gap:6px} .gap-8{gap:8px} .gap-10{gap:10px} .gap-12{gap:12px}
.gap-14{gap:14px} .gap-16{gap:16px} .gap-20{gap:20px} .gap-24{gap:24px}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.right{margin-left:auto}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g-2-1{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.g-1-2{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.mt-6{margin-top:6px} .mt-10{margin-top:10px} .mt-14{margin-top:14px}
.mt-18{margin-top:18px} .mt-24{margin-top:24px} .mt-32{margin-top:32px}
.mb-10{margin-top:0;margin-bottom:10px} .mb-14{margin-bottom:14px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.sec-head .right{margin-left:auto}

/* ==========================================================================
   Components drawn by the designer, reproduced
   ========================================================================== */

/* --- segment card (page 2, right) --- */
.seg{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:box-shadow var(--fast) var(--ease),
  border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.seg:hover{box-shadow:var(--lift);border-color:var(--line-2)}
.seg__top{display:flex;gap:16px;padding-top:18px;padding-right:20px;padding-bottom:16px;padding-left:20px}
.seg__body{min-width:0;flex:1}
.seg__title{font-size:17px;font-weight:700;letter-spacing:-.012em}
.seg__desc{color:var(--ink-3);font-size:13.5px;margin-top:4px;margin-bottom:12px}
.seg__foot{
  border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;
  padding-top:12px;padding-right:20px;padding-bottom:12px;padding-left:20px;
}
.seg__foot .right{margin-left:auto}

/* --- creator profile card (page 3, right) --- */
.prof__head{display:flex;align-items:center;gap:16px;padding-top:20px;
  padding-right:22px;padding-bottom:16px;padding-left:22px}
.prof__name{display:flex;align-items:center;gap:7px;font-size:21px;font-weight:700;letter-spacing:-.02em}
.prof__handle{color:var(--ink-3);font-size:13.5px;margin-top:1px}
.prof__stats{margin-left:auto;display:flex;gap:26px;align-items:flex-start}
.prof__stat .k{font-family:'Outfit',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.prof__stat .v{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
.match{display:flex;align-items:center;gap:14px;padding-top:13px;padding-bottom:13px;
  border-bottom:1px solid var(--line)}
.match:last-child{border-bottom:0}
.match__txt{min-width:0;flex:1}
.match__txt .t{font-size:14.5px;font-weight:700;letter-spacing:-.008em}
.match__txt .d{color:var(--ink-3);font-size:13px;margin-top:2px}
.match__bar{width:150px;flex:0 0 150px;display:flex;align-items:center;gap:10px}

/* --- overlap sliders (page 3, left) --- */
.ovl{display:flex;align-items:center;gap:12px;padding-top:9px;padding-bottom:9px}
.ovl__ico{width:30px;height:30px;border-radius:9px;object-fit:cover;flex:0 0 30px}
.ovl__t{font-size:13px;font-weight:600;width:104px;flex:0 0 104px}
.ovl__track{flex:1;height:22px;border-radius:var(--r-pill);background:var(--card-2);
  border:1px solid var(--line);position:relative;overflow:hidden}
.ovl__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--teal);
  border-radius:var(--r-pill);transition:width 900ms var(--ease)}
.ovl__val{position:absolute;top:50%;transform:translate(-50%,-50%);
  font-size:11px;font-weight:700;color:#FFF5F1;font-variant-numeric:tabular-nums;
  background:var(--teal);border-radius:var(--r-pill);padding:2px 7px;
  left:0;transition:left 900ms var(--ease);white-space:nowrap}

/* --- evidence rail with dotted connectors (page 4, right) --- */
.rail{display:grid;grid-template-columns:26px 1fr;gap:0 18px;position:relative}
.rail__spine{grid-column:1;position:relative}
.rail__spine::before{
  content:"";position:absolute;left:11px;top:22px;bottom:22px;
  border-left:1px dashed var(--line-2);
}
.rail__tick{
  width:22px;height:22px;border-radius:7px;border:1px solid var(--line-2);
  background:var(--card-2);display:grid;place-items:center;position:relative;z-index:1;
  transition:background var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.rail__tick svg{width:13px;height:13px;stroke:#FFF5F1;stroke-width:2.6;
  opacity:0;transition:opacity var(--mid) var(--ease)}
.rail__tick.is-on{background:var(--leather);border-color:var(--leather)}
.rail__tick.is-on svg{opacity:1}
[data-theme="dark"] .rail__tick.is-on svg{stroke:#241C22}
.rail__item{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;
  align-items:center;padding-top:9px;padding-bottom:9px}

/* --- donut + charts --- */
.donut-wrap{position:relative;display:grid;place-items:center}
.donut-wrap .mid{position:absolute;text-align:center}
.donut-wrap .mid .v{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.donut-wrap .mid .k{font-size:11px;color:var(--ink-3);margin-top:1px}
.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round;
  transition:stroke-dashoffset 900ms var(--ease)}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.legend .li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.legend .dot{width:8px;height:8px;border-radius:var(--r-pill);flex:0 0 8px}
.chart{width:100%;height:auto;overflow:visible}
.chart .grid-l{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.chart .axis{font-size:10px;fill:var(--ink-4);font-family:'Outfit',sans-serif;letter-spacing:.04em}
.chart .ser{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .colbar{transition:height 700ms var(--ease),y 700ms var(--ease)}

/* --- pipeline board --- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:236px;gap:12px;
  overflow-x:auto;padding-bottom:10px}
.col{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-md);
  display:flex;flex-direction:column;min-height:180px}
.col__h{display:flex;align-items:center;gap:8px;padding-top:12px;padding-right:12px;
  padding-bottom:10px;padding-left:12px}
.col__n{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.col__b{padding-top:0;padding-right:9px;padding-bottom:9px;padding-left:9px;
  display:flex;flex-direction:column;gap:8px}
.tick-card{
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding-top:11px;padding-right:12px;padding-bottom:11px;padding-left:12px;
  cursor:grab;transition:box-shadow var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.tick-card:hover{box-shadow:var(--lift);transform:translateY(-1px)}
.tick-card .t{font-size:13px;font-weight:600;letter-spacing:-.004em}
.tick-card .m{font-size:11.5px;color:var(--ink-3);margin-top:3px}

/* --- collab thread (page 7, right) --- */
.msgs{display:flex;flex-direction:column;gap:10px}
.msg{max-width:74%;border-radius:16px;padding-top:10px;padding-right:14px;
  padding-bottom:11px;padding-left:14px;font-size:13.5px;line-height:1.45}
.msg .who{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:700;
  margin-bottom:3px;padding:0;background:none}
.msg .who .t{font-weight:500;color:inherit;opacity:.68;font-size:11px;
  font-variant-numeric:tabular-nums}
.msg--them{background:var(--pink);color:#FFF5F1;align-self:flex-start;border-bottom-left-radius:6px}
.msg--me{background:var(--card-2);border:1px solid var(--line);align-self:flex-end;
  border-bottom-right-radius:6px}
[data-theme="dark"] .msg--them{color:#241C22}

/* --- brief builder steps --- */
.steps{display:flex;flex-direction:column;gap:2px}
.step{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 13px;border-radius:var(--r-sm);
  transition:background var(--fast) var(--ease)}
.step:hover{background:var(--pink-tint)}
.step.is-on{background:var(--pink-fill)}
.step__n{width:22px;height:22px;border-radius:var(--r-pill);flex:0 0 22px;
  display:grid;place-items:center;font-size:11px;font-weight:700;
  background:var(--card-2);border:1px solid var(--line-2);color:var(--ink-3)}
.step.is-on .step__n{background:var(--pink);border-color:var(--pink);color:#FFF5F1}
.step.is-done .step__n{background:var(--ok);border-color:var(--ok);color:#FFF5F1}
.step__t{font-size:13.5px;font-weight:600}
.step.is-on .step__t{color:var(--pink-text)}
.step__d{font-size:11.5px;color:var(--ink-3);margin-top:1px}

/* --- form --- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.inp{
  width:100%;background:var(--card-2);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:11px 13px;font-size:14px;color:var(--ink);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.inp::placeholder{color:var(--ink-4)}
.inp:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-tint)}
.inp--lg{padding:14px 16px;font-size:15px;border-radius:var(--r-md)}
.hint{font-size:12px;color:var(--ink-3);margin-top:5px}
.err{font-size:12.5px;color:var(--bad-text);margin-top:6px;display:flex;align-items:center;gap:6px}
.err svg{width:13px;height:13px;stroke:currentColor;flex:0 0 13px}
.toggle{width:38px;height:22px;border-radius:var(--r-pill);background:var(--pink-track);
  position:relative;flex:0 0 38px;transition:background var(--fast) var(--ease)}
.toggle i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:var(--r-pill);
  background:var(--card-2);box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:left var(--fast) var(--ease)}
.toggle.is-on{background:var(--pink)}
.toggle.is-on i{left:19px}

/* --- empty + loading. The audited app's worst failure, so these are designed. --- */
.empty{
  border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--card);
  padding-top:38px;padding-right:26px;padding-bottom:38px;padding-left:26px;
  text-align:center;
}
.empty__ico{width:44px;height:44px;border-radius:14px;background:var(--pink-tint);
  display:grid;place-items:center;margin-left:auto;margin-right:auto;margin-bottom:14px}
.empty__ico svg{width:21px;height:21px;stroke:var(--pink-text)}
.empty .h3{margin-bottom:6px}
.empty .sub{max-width:44ch;margin-left:auto;margin-right:auto}
.skel{background:linear-gradient(90deg,var(--sunk) 25%,var(--card-2) 50%,var(--sunk) 75%);
  background-size:280% 100%;border-radius:var(--r-xs);animation:shim 1.5s linear infinite}
@keyframes shim{from{background-position:140% 0}to{background-position:-140% 0}}
.skel-row{display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.banner{
  display:flex;align-items:flex-start;gap:11px;border-radius:var(--r-md);
  padding-top:13px;padding-right:15px;padding-bottom:13px;padding-left:15px;font-size:13.5px;
}
.banner svg{width:17px;height:17px;stroke:currentColor;flex:0 0 17px;margin-top:1px}
.banner--warn{background:var(--warn-fill);color:var(--warn-text)}
.banner--bad{background:var(--bad-fill);color:var(--bad-text)}
.banner--info{background:var(--sky);color:var(--sky-text)}
.banner .right{margin-left:auto}
.live-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--ok);flex:0 0 7px;
  box-shadow:0 0 0 0 rgba(66,155,90,.55);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(66,155,90,.5)}
  70%{box-shadow:0 0 0 7px rgba(66,155,90,0)}100%{box-shadow:0 0 0 0 rgba(66,155,90,0)}}

/* --- command palette --- */
.scrim{position:fixed;inset:0;background:rgba(24,20,23,.42);backdrop-filter:blur(3px);
  z-index:80;display:grid;place-items:start center;padding-top:12vh}
.scrim[hidden]{display:none}
.pal{width:min(560px,92vw);background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--lift-2);overflow:hidden}
.pal__in{display:flex;align-items:center;gap:11px;padding-top:15px;padding-right:17px;
  padding-bottom:15px;padding-left:17px;border-bottom:1px solid var(--line)}
.pal__in input{flex:1;border:0;background:none;font-size:15.5px}
.pal__in input:focus{outline:0}
.pal__list{max-height:min(420px,52vh);overflow-y:auto;padding-top:7px;padding-bottom:7px}
.pal__i{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 17px;font-size:14px}
.pal__i svg{width:16px;height:16px;stroke:currentColor;opacity:.7;flex:0 0 16px}
.pal__i:hover,.pal__i.is-on{background:var(--pink-fill);color:var(--pink-text)}
.pal__i .grp{margin-left:auto;font-size:11px;color:var(--ink-3)}

/* --- toast (persistent, dismissible. Never the 2s toast the live app ships.) --- */
.toasts{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;
  flex-direction:column;gap:9px;max-width:min(380px,90vw)}
.toast{display:flex;align-items:flex-start;gap:11px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--lift-2);
  padding-top:13px;padding-right:13px;padding-bottom:13px;padding-left:14px;font-size:13.5px;
  animation:toastIn 260ms var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toast svg{width:17px;height:17px;stroke:currentColor;flex:0 0 17px;margin-top:1px}
.toast--ok{border-left:3px solid var(--ok)}
.toast--bad{border-left:3px solid var(--bad)}

/* --- login (page 1) --- */
.login{min-height:100svh;display:grid;place-items:center;position:relative;
  padding-top:24px;padding-right:20px;padding-bottom:24px;padding-left:20px}
.login__card{
  width:min(940px,100%);background:var(--card);border-radius:var(--r-xl);
  box-shadow:var(--lift-2);display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;position:relative;z-index:1;
}
.login__art{position:relative;overflow:hidden;min-height:430px;background:var(--sunk)}
.login__art img{width:100%;height:100%;object-fit:cover}
.login__art .cap{position:absolute;left:26px;right:26px;bottom:26px;color:#FFF5F1;
  font-size:19px;font-weight:700;line-height:1.22;letter-spacing:-.012em;
  text-shadow:0 1px 18px rgba(24,20,23,.55)}
.login__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,20,23,.62) 0%,rgba(24,20,23,.18) 46%,transparent 72%)}
.login__art .cap{z-index:2}
.login__form{padding-top:40px;padding-right:44px;padding-bottom:40px;padding-left:44px;
  display:flex;flex-direction:column;justify-content:center}
.login__logo{height:22px;width:auto;margin-left:auto;margin-right:auto;margin-bottom:22px}

/* ---------- motion. Reveal only under html.js so no-JS never loses content. ---------- */
.js [data-rise]{opacity:0;transform:translateY(9px)}
.js [data-rise].is-in{opacity:1;transform:none;
  transition:opacity 460ms var(--ease),transform 460ms var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js [data-rise]{opacity:1;transform:none}
}

/* ==========================================================================
   Responsive. One block, no duplicate @media (source order would decide).
   ========================================================================== */
@media (max-width:1180px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr 1fr}
  .g-2-1,.g-1-2{grid-template-columns:1fr}
}
@media (max-width:980px){
  :root{--nav-w:74px}
  .nav__brand img.word{display:none}
  .nav__brand{justify-content:center;padding-right:10px;padding-left:10px}
  .env{display:none}
  .nav-item{justify-content:center;padding-right:8px;padding-left:8px}
  .nav-item span.lbl{display:none}
  .nav-item .badge{position:absolute;top:3px;right:6px;margin:0}
  .nav__label{text-align:center;padding-left:0}
  .meter,.who span{display:none}
  .prof__stats{gap:18px}
}
@media (max-width:820px){
  .login__card{grid-template-columns:1fr}
  .login__art{min-height:190px;order:-1}
  .login__form{padding-top:30px;padding-right:26px;padding-bottom:34px;padding-left:26px}
  .g2,.g3{grid-template-columns:1fr}
  .seg__top{flex-direction:column;gap:12px}
}
@media (max-width:640px){
  body{font-size:16px}
  :root{--nav-w:0px}
  .nav{position:fixed;left:0;top:0;width:264px;flex-basis:264px;
    transform:translateX(-100%);transition:transform var(--mid) var(--ease);
    box-shadow:var(--lift-2)}
  .nav.is-open{transform:none}
  .nav__brand img.word{display:block}
  .nav-item{justify-content:flex-start;padding-right:10px;padding-left:10px}
  .nav-item span.lbl{display:inline}
  .nav-item .badge{position:static;margin-left:auto}
  .nav__label{text-align:left;padding-left:10px}
  .meter,.who span{display:block}
  .env{display:inline-block}
  .topbar{padding-right:16px;padding-left:16px;gap:10px}
  .view{padding-right:16px;padding-left:16px}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile .v{font-size:26px}
  .h1{font-size:21px}
  .prof__head{flex-wrap:wrap}
  .prof__stats{margin-left:0;width:100%;margin-top:6px}
  .match{flex-wrap:wrap}
  .match__bar{width:100%;flex-basis:100%}
  .btn,.icon-btn,.nav-item,.step,.pill{min-height:44px}
  .btn-sm{min-height:38px}
  .sub,.sub-sm{font-size:14.5px}
  .msg{max-width:86%}
}
.navscrim{position:fixed;inset:0;background:rgba(24,20,23,.4);z-index:39}
.navscrim[hidden]{display:none}
@media (min-width:641px){.navscrim{display:none}}

/* ==========================================================================
   QA pass 1. Every rule below fixes a defect found in a rendered screenshot,
   not a suspicion. svg{display:block} in the reset was pushing inline badges
   onto their own line, and several label/value spans were running together.
   ========================================================================== */
.verified{display:inline-block;vertical-align:-3px}
.tick-card .t,.tick-card .m,
.step__t,.step__d,
.match__txt .t,.match__txt .d,
.prof__stat .k,.prof__stat .v,
.msg .who,
.tile .v,.tile .d,
.seg__title,.seg__desc{display:block}
.prof__stat{display:flex;flex-direction:column}
.prof__head{flex-wrap:wrap;row-gap:10px}
.prof__name{flex-wrap:wrap}

/* columns size to their content, they do not stretch to the tallest sibling */
.g2>*,.g3>*,.g-2-1>*,.g-1-2>*{align-self:start}

/* creator cell: the name must not collide with the next column */
.tbl td:first-child{min-width:172px}
.tbl .cell-who{white-space:nowrap}
.tbl td .status{white-space:nowrap}
.tbl td.nowrap{white-space:nowrap}

/* the performance row: influencers needs more room than the two charts */
.g-chart{display:grid;grid-template-columns:1fr 1fr 1.42fr;gap:14px}

/* a line chart inside a narrow column needs its own coordinate width */
.chart--sm .axis{font-size:9px}
/* a bar outside a flex row was rendering inline, so its height collapsed */
.bar{display:block}
.bar-row{display:flex}
/* discovery: the profile card is a designed surface, not a sidebar.
   At 2fr/1fr its match rows wrapped to three lines. */
.g-disc{display:grid;grid-template-columns:1.12fr 1fr;gap:14px}
.g-disc>*{align-self:start}
@media (max-width:1180px){ .g-disc{grid-template-columns:1fr} }

/* ==========================================================================
   Responsive QA pass. .g-chart was added after the main breakpoint block and
   had no collapse rule, so the performance row ran off a 375px screen.
   Later source order is deliberate here: these override the block above.
   ========================================================================== */
@media (max-width:1240px){
  .g-chart{grid-template-columns:1fr 1fr}
  .g-chart>*:last-child{grid-column:1 / -1}
}
@media (max-width:900px){
  .g-chart{grid-template-columns:1fr}
  .g-chart>*:last-child{grid-column:auto}
  .card__head{flex-wrap:wrap;row-gap:8px}
  .sec-head{flex-wrap:wrap;row-gap:6px}
  .legend{gap:12px}
}
@media (max-width:640px){
  .topbar{flex-wrap:wrap;row-gap:10px;align-items:center}
  .topbar__t{flex:1 1 100%;order:2;min-width:0}
  .topbar #burger{order:1}
  .topbar__act{order:1;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .h1{font-size:20px}
  .sec-head .right{margin-left:0;width:100%}
  .card__head .right{margin-left:0;width:100%}
  .seg__foot{flex-wrap:wrap;row-gap:8px}
  .seg__foot .right{margin-left:auto}
  .board{grid-auto-columns:212px}
  .prof__stats{gap:20px}
  .match__bar{width:100%;flex-basis:100%}
  .msg{max-width:92%}
  .legend{width:100%}
}

/* Grid and flex children default to min-width:auto, so a wide table inside a
   column pushed the whole grid past the viewport even though .tbl-wrap scrolls.
   Measured at 375px: today +233, discovery +323, content +210, performance +149. */
.g2>*,.g3>*,.g-2-1>*,.g-1-2>*,.g-disc>*,.g-chart>*,.tiles>*,.stack>*,.board>*{min-width:0}
.card,.seg,.tile,.tick-card{min-width:0}
.card__head,.card__body,.card__foot,.seg__top,.seg__foot{min-width:0}
.tbl-wrap{max-width:100%}

/* The topbar actions stacked onto three rows at 375px. The labels go, the
   targets stay 44px, and the whole bar holds one line. */
@media (max-width:640px){
  .topbar .lbl-wide{display:none}
  .topbar #palbtn{padding-left:11px;padding-right:11px}
  .topbar .btn-primary{padding-left:12px;padding-right:12px}
  .topbar__act{gap:6px;flex-wrap:nowrap}
  .topbar{flex-wrap:wrap;row-gap:8px}
  .topbar__t{order:3;flex:1 1 100%}
  .topbar #burger{order:1;flex:0 0 auto}
  .topbar__act{order:2;flex:1 1 auto;justify-content:flex-end}
}

/* ==========================================================================
   Boot loader — the Lickly animated mark, ported from /lickly-ui-demo/app/
   into this register: plum ground, ceramic lobes, the negative L ignites in
   brand pink. Plays on sign-in and on demo/embedded entry. ?shot=1 skips it
   so captures never race the loader.
   ========================================================================== */
.bootload{
  position:fixed;inset:0;z-index:240;background:#1D1D21;
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:28px;
}
.bootload.on{display:flex}
.bootload.fade{opacity:0;transition:opacity 420ms var(--ease)}
.bootload svg{width:min(112px,24vw);height:auto;display:block}
.bootload .bl-lobe{fill:#FFF5F1;transform-box:view-box;transform-origin:519px 577px}
.bootload .bl-neg{fill:#1D1D21}
.bootload.on .bl-a{animation:bl-spin .8s cubic-bezier(.34,1.3,.5,1) both}
.bootload.on .bl-b{animation:bl-spin .8s cubic-bezier(.34,1.3,.5,1) .1s both}
.bootload.on .bl-c{animation:bl-spin .8s cubic-bezier(.34,1.3,.5,1) .2s both}
.bootload.on .bl-neg{animation:bl-ignite 1.5s ease-in-out .55s infinite}
@keyframes bl-spin{0%{opacity:0;transform:rotate(-150deg) scale(.4)}100%{opacity:1;transform:none}}
@keyframes bl-ignite{0%,100%{fill:#1D1D21}45%{fill:#CE3887}}
.bootload .bl-txt{
  font-family:'Outfit',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,245,241,.55);
}
.bootload .bl-txt b{color:#F162A8;font-weight:600}
.bootload .bl-bar{width:min(180px,40vw);height:3px;border-radius:999px;background:rgba(255,245,241,.14);overflow:hidden}
.bootload .bl-bar i{display:block;height:100%;width:0;background:#CE3887;border-radius:999px}
.bootload.on .bl-bar i{animation:bl-fill var(--bl-ms,1500ms) cubic-bezier(.4,.1,.3,1) both}
@keyframes bl-fill{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .bootload.on .bl-a,.bootload.on .bl-b,.bootload.on .bl-c{animation:none;opacity:1}
  .bootload.on .bl-neg{animation:none;fill:#CE3887}
  .bootload.on .bl-bar i{animation:none;width:100%}
}

/* QA pass 2 (tablet). The column chart scaled with its column and stood
   900px tall at 768; the collapsed nav rail wrapped its group labels. */
.chart--cols{max-height:236px}
@media (max-width:980px) and (min-width:641px){
  .nav__label{font-size:0;height:1px;background:var(--line);margin:10px 12px 8px;padding:0}
}
/* discovery results needed 644px in a 559px column at 1440, so the Evidence
   column was scrolled out of sight inside the card. */
@media (min-width:1181px){ .g-disc{grid-template-columns:1.3fr 1fr} }   /* an unconditional rule here overrode the 1180 collapse by source order */
.tbl td{padding-right:9px}
.tbl th{padding-right:9px}
.score-cell{min-width:88px}

/* still 25px short at 1440: the network column yields below 1560 */
@media (max-width:1560px){ .col-net{display:none} }

@media (max-width:640px){
  .key-row{flex-wrap:wrap}
  .key-row .key-meta{width:100%;text-align:left;margin-top:4px}
}
/* 390px, discovery: the profile card's footer buttons and its three stats
   ran 130px past the viewport. Both wrap now. */
@media (max-width:640px){
  .card__foot{flex-wrap:wrap;row-gap:8px}
  .card__foot .right{margin-left:auto}
  .prof__stats{flex-wrap:wrap;gap:14px 20px}
  .seg__foot .btn,.card__foot .btn{min-height:40px}
}

/* Wide desktops (James, 2026-09-03, 2265px viewport): the view was capped at
   1500px while the top bar ran full width, leaving the right third empty and
   the Export button floating past the content edge. The cap rises to 1760 and
   the top bar's controls stop at the same edge as the content. */
.view{max-width:1760px}
.topbar{padding-right:max(26px, calc(100% - 1786px))}
@media (min-width:1900px){
  .view{padding-top:28px;padding-right:34px;padding-left:34px;max-width:1800px}
  .topbar{padding-left:34px;padding-right:max(34px, calc(100% - 1834px))}
  .tiles{gap:18px}
  .g2,.g3,.g-2-1,.g-1-2,.g-disc,.g-chart{gap:18px}
}


/* ==========================================================================
   Guided walkthrough (Nita, 2026-09-03). Spotlight on the real UI, a card in
   the designer's grammar, auto-advance with a visible timer.
   ========================================================================== */
.tour{position:fixed;inset:0;z-index:200;display:none;pointer-events:none}
.tour.is-on{display:block}
.tour__spot{position:absolute;border-radius:var(--r-lg);pointer-events:auto;cursor:default;
  box-shadow:0 0 0 9999px rgba(24,20,23,.46), 0 0 0 2px var(--pink), 0 18px 60px rgba(24,20,23,.35);
  transition:left 380ms var(--ease),top 380ms var(--ease),width 380ms var(--ease),height 380ms var(--ease),opacity 240ms}
[data-theme="dark"] .tour__spot{box-shadow:0 0 0 9999px rgba(0,0,0,.5), 0 0 0 2px var(--pink)}
.tour__card{position:absolute;pointer-events:auto;opacity:0;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--lift-2);
  padding-top:14px;padding-right:16px;padding-bottom:14px;padding-left:16px;
  transition:left 380ms var(--ease),top 380ms var(--ease),opacity 220ms var(--ease)}
.tour__bar{height:3px;border-radius:999px;background:var(--pink-track);overflow:hidden;margin-top:12px}
.tour__bar i{display:block;height:100%;width:0;background:var(--pink);border-radius:999px}
@keyframes tourBar{from{width:0}to{width:100%}}
.tour__prev:disabled{opacity:.4;cursor:default}
body.tour-on{overflow-x:hidden}
@media (prefers-reduced-motion:reduce){.tour__spot,.tour__card{transition:none}}