/* Black Mast Marketing, v2.0 design.

   Modern app conventions, studied from Claude, ChatGPT and HubSpot: a slim
   left sidebar with a few plain icon-and-word rows, the client switcher and
   account at the bottom, menus with an icon on every row and groups split
   by a thin line, settings as label-left, control-right rows. Dark grey
   canvas, black sidebar, gold accent, silver detail. Never rust or copper.
   Labels are sentence case. Every control is custom. */

:root {
  --bg: #19191C;
  --side: #0F0F11;
  --card: #212125;
  --card-2: #28282D;
  --card-3: #313137;
  --line: #2D2D33;
  --line-2: #3D3D45;
  --text: #F3F1EC;
  --text-2: #B4B2AC;
  --text-3: #85838C;
  --gold: #D4B886;
  --gold-hi: #E6D2A8;
  --silver: #BFC2C7;
  --good: #4CC38A;
  --warn: #E2AE4F;
  --bad: #EF6B6B;
  --blue: #6FA3E8;
  --teal: #43C3B7;
  --violet: #A08AF2;
  --m: 212, 184, 134;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --side-w: 264px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text-2); font: 400 14.5px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid rgba(var(--m), .85); outline-offset: 2px; border-radius: 8px; }
::selection { background: rgba(212, 184, 134, .3); color: var(--text); }
[hidden] { display: none !important; }
.muted { color: var(--text-3); }
.sm { font-size: 13px; }
.sp { flex: 1; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
* { scrollbar-width: thin; scrollbar-color: #3A3A42 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #34343B; border-radius: 10px; border: 3px solid var(--bg); }

/* ------------------------------------------------------------ app frame: sidebar + main */

#app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
#app.side-min { --side-w: 76px; }
#app.is-report { display: block; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 16px 12px 14px; background: var(--side); border-right: 1px solid #1E1E22; overflow-y: auto; z-index: 40; }
.is-report .side, .is-report .topbar, .is-report .scrim { display: none !important; }
.side-top { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px 0 8px; margin-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--text); }
.brand b { font: 400 17.5px/1 'Anton', Impact, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.brand img { display: none; width: 34px; height: 34px; border-radius: 8px; }
.icon-btn { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--text-3); transition: background .12s, color .12s; }
.icon-btn:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn.sm svg { width: 15px; height: 15px; }
.show-m { display: none; }

.org { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; border: 1px solid #222227; background: #18181B; color: var(--text); text-align: left; margin-bottom: 10px; }
button.org:hover { background: #1E1E22; border-color: #2C2C32; }
.org-t { flex: 1; min-width: 0; display: grid; }
.org-t b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-t small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org .chev, .me-btn .chev { width: 15px; height: 15px; color: var(--text-3); }
.av { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; font: 700 11px/1 var(--font); background: #2A2620; color: var(--gold); }
img.av { object-fit: contain; background: #fff; padding: 2px; }
.av.lg { width: 56px; height: 56px; border-radius: 14px; font-size: 17px; }

.nav { display: grid; gap: 2px; }
.nav-a { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 10px; color: var(--text-2); font-weight: 500; font-size: 14.5px; transition: background .12s, color .12s; }
.nav-a:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.nav-a.on { background: rgba(212, 184, 134, .13); color: var(--text); }
.nav-a.on svg { color: var(--gold); }
.nav-a span { white-space: nowrap; }
.badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--gold); color: #141416; font: 700 11.5px/1 var(--font); font-style: normal; }

.me-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; }
.me-btn:hover { background: rgba(255, 255, 255, .05); }
.me:not(.msg) { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #141416; font: 700 11.5px/1 var(--font); }
.me-t { flex: 1; min-width: 0; display: grid; }
.me-t b { font-weight: 600; font-size: 14px; }
.me-t small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Collapsed rail */
.side-min .side { padding-left: 10px; padding-right: 10px; align-items: center; }
.side-min .side-top { flex-direction: column; padding: 0; gap: 10px; }
.side-min .brand { flex: none; }
.side-min .brand b, .side-min .org-t, .side-min .org .chev, .side-min .nav-a span, .side-min .badge, .side-min .me-t, .side-min .me-btn .chev { display: none; }
.side-min .brand img { display: block; }
.side-min .org { width: auto; padding: 6px; border: 0; background: none; }
.side-min .nav-a { width: 46px; justify-content: center; padding: 0; }
.side-min .me-btn { width: auto; padding: 6px; }

.main { min-width: 0; }
.topbar { display: none; }
.scrim { display: none; }

/* ------------------------------------------------------------ page */

.page { max-width: 1480px; margin: 0 auto; padding: 34px 40px 80px; }
.ph { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.ph-t { flex: 1; min-width: 260px; }
.ph h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 30px; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1.15; }
.ph p { margin: 6px 0 0; color: var(--text-2); font-size: 15px; max-width: 72ch; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hint { margin: -10px 0 16px; color: var(--text-3); }
.sec-t { margin: 8px 0 12px; font-size: 16px; font-weight: 600; color: var(--text); }
.sec-t + .card, .card + .sec-t { margin-top: 0; }
.ins-main .sec-t:not(:first-child) { margin-top: 28px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: 600 14px var(--font); white-space: nowrap; transition: background .12s, border-color .12s, filter .12s; }
.btn:hover { background: var(--card-3); border-color: #4C4C55; }
.btn.primary, .btn.gold { background: var(--gold); border-color: var(--gold); color: #141416; }
.btn.primary:hover, .btn.gold:hover { filter: brightness(1.07); background: var(--gold); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.quiet:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn.sm svg { width: 15px; height: 15px; }
.btn.danger { color: #F49A9A; }
.btn.danger.armed { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn svg { width: 16px; height: 16px; }
.link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; color: var(--text-2); font-weight: 500; font-size: 13.5px; }
.link:hover { color: var(--text); }
.link svg { width: 15px; height: 15px; }

/* Number tabs: a quiet segmented control with a status dot per number */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 22px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px; border-radius: 9px; color: var(--text-2); font-weight: 600; font-size: 14px; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a.on { background: var(--card-3); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #55555E; display: inline-block; }
.dot.good { background: var(--good); } .dot.fair { background: var(--warn); } .dot.bad { background: var(--bad); }

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

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.pad { padding: 20px 22px; }
.lab { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--text); }
.ic { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; }
.ic svg { width: 15px; height: 15px; stroke-width: 2; }
.ic.gold { background: rgba(212, 184, 134, .16); color: var(--gold); }
.ic.teal { background: rgba(67, 195, 183, .15); color: var(--teal); }
.ic.violet { background: rgba(160, 138, 242, .16); color: var(--violet); }
.ic.blue { background: rgba(111, 163, 232, .16); color: var(--blue); }
.ic.green { background: rgba(76, 195, 138, .15); color: var(--good); }
.ic.silver { background: rgba(191, 194, 199, .13); color: var(--silver); }
.ic.amber { background: rgba(226, 174, 79, .15); color: var(--warn); }
.ic.red { background: rgba(239, 107, 107, .15); color: var(--bad); }
.h { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 15px; }
.cnt { font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--card-3); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.fig { margin-top: 14px; color: var(--text); font-size: 34px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fig small { font-size: 15px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.fig.good, .v.good, b.good { color: var(--good); } .fig.fair, .v.fair, b.fair { color: var(--warn); } .fig.bad, .v.bad, b.bad { color: var(--bad); }
.sub { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--card-3); color: var(--text-2); }
.pill.good { background: rgba(76, 195, 138, .14); color: #7DDBAE; }
.pill.fair { background: rgba(226, 174, 79, .14); color: #F0C77E; }
.pill.bad { background: rgba(239, 107, 107, .14); color: #F49A9A; }
.empty { padding: 28px 12px; text-align: center; color: var(--text-3); }
.card.empty { padding: 36px; }

/* ------------------------------------------------------------ dashboard board */

.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.w { position: relative; display: flex; flex-direction: column; padding: 20px 22px; min-width: 0; grid-column: span 6; }
.w.s3 { grid-column: span 3; } .w.s4 { grid-column: span 4; } .w.s6 { grid-column: span 6; } .w.s8 { grid-column: span 8; } .w.s12 { grid-column: span 12; }
a.w { transition: border-color .12s, background .12s; }
a.w:hover { border-color: var(--line-2); background: #232328; }
.w .wh { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.w .wh .h { min-width: 0; }
.w-more { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 13.5px; color: var(--gold); }
.w-more:hover { color: var(--gold-hi); }
.custom .w { cursor: grab; outline: 1.5px dashed rgba(var(--m), .5); outline-offset: 3px; }
.custom .w * { pointer-events: none; }
.custom .w .w-x { pointer-events: auto; }
.w-x { display: none; position: absolute; top: -10px; right: -10px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card-3); color: var(--text); place-items: center; padding: 0; }
.w-x svg { width: 14px; height: 14px; }
.custom .w-x { display: grid; }
.w.dragging { opacity: .4; }
.w.over { outline-color: rgb(var(--m)); outline-style: solid; }
.add-w { grid-column: span 3; min-height: 140px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--line-2); border-radius: 16px; color: var(--text-2); background: none; font-weight: 600; }
.add-w:hover { color: var(--text); border-color: rgba(var(--m), .7); }

.metric .meter { position: relative; height: 6px; margin-top: 18px; border-radius: 999px; background: var(--card-3); }
.metric .meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.metric .meter b { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 2px; }
.metric .foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.goal-t { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.goal-t svg { width: 13px; height: 13px; }

.bars { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 12px; min-height: 220px; padding: 26px 0 26px; }
.bars .col { flex: 1; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bars .col i { display: block; width: 100%; max-width: 70px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #E8D3A6, #B8955A); }
.bars .col.low i { background: linear-gradient(180deg, #8C8A93, #5D5B63); }
.bars .col span { position: absolute; font-size: 12px; font-weight: 600; color: var(--text-2); transform: translateY(-22px); font-variant-numeric: tabular-nums; }
.bars .col em { position: absolute; bottom: -24px; font-style: normal; font-size: 12px; color: var(--text-3); }
.bars .goal { position: absolute; left: 0; right: 0; border-top: 1.5px dashed rgba(191, 194, 199, .55); z-index: 2; pointer-events: none; }
.bars .goal em { position: absolute; left: 0; top: -21px; padding: 0 8px 0 0; background: var(--card); font-style: normal; font-size: 12px; color: var(--silver); }
a.w:hover .bars .goal em { background: #232328; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14px; }
.list li + li { border-top: 1px solid var(--line); }
.list .t { flex: 1; min-width: 0; }
.list .t b { color: var(--text); font-weight: 600; }
.list a.t:hover b { text-decoration: underline; text-underline-offset: 3px; }
.list .t span { color: var(--text-2); }
.list .v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list .keep { width: 38px; text-align: right; font-size: 12.5px; }
.list .dot { margin-top: 7px; align-self: flex-start; }
.mbar { width: 90px; height: 6px; flex: none; border-radius: 999px; background: var(--card-3); overflow: hidden; display: block; }
.mbar i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.mbar.blue i { background: var(--blue); }
.notes { white-space: pre-wrap; color: var(--text-2); }

.glist { display: grid; gap: 14px; }
.gl-t { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; margin-bottom: 6px; }
.gl-t span { flex: 1; color: var(--text-2); }
.gl-t b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.gl-t small { color: var(--text-3); font-weight: 500; }
.gbar { height: 8px; border-radius: 999px; background: var(--card-3); overflow: hidden; }
.gbar.sm { height: 5px; }
.gbar i { display: block; height: 100%; border-radius: 999px; background: var(--gold); transition: width .25s; }
.gbar i.done { background: var(--good); }

.learn-b { flex: 1; }
.learn-b small { color: var(--text-3); font-size: 12.5px; }
.learn-b b { display: block; margin: 4px 0 6px; color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.learn-b p { margin: 0 0 16px; color: var(--text-2); }
.learn .btn { align-self: flex-start; }

/* ------------------------------------------------------------ numbers pages */

.hero { display: grid; grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr); gap: 40px; padding: 28px 30px; margin-bottom: 18px; }
.hero-l .big { margin-top: 14px; font-size: 56px; font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.hero-l .big small { font-size: 18px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.hero-l .big.good { color: var(--good); } .hero-l .big.fair { color: var(--warn); } .hero-l .big.bad { color: var(--bad); }
.hero-pill { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13.5px; }
.lede { margin: 16px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 46ch; }
.lede b { color: var(--text); font-weight: 600; }
.hero-r { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-width: 0; }

.hb-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14px; }
.hb-l b { color: var(--text); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hb-t { position: relative; height: 16px; border-radius: 6px; background: var(--card-3); }
.hb-t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.hb-t i.gold { background: linear-gradient(90deg, #B8955A, #E8D3A6); }
.hb-t i.silver { background: linear-gradient(90deg, #7E8187, #C9CCD1); }
.hb-t .mark { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 2px; }
.hb-t .mark em { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.hb + .hb { margin-top: 18px; }
.ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.ladder-t { display: inline-flex; align-items: center; gap: 6px; width: 100%; font-size: 13px; color: var(--text-3); }
.rung { display: grid; padding: 8px 14px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); line-height: 1.3; }
.rung b { color: var(--text-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.rung.on { background: rgba(212, 184, 134, .12); border-color: rgba(212, 184, 134, .45); color: var(--gold); }
.rung.on b { color: var(--text); }

.eq-strip { display: flex; align-items: stretch; gap: 10px; margin-bottom: 18px; }
.eq-strip .op { display: grid; place-items: center; width: 22px; flex: none; color: var(--text-3); font-size: 22px; font-weight: 300; }
.tile { flex: 1; min-width: 0; display: grid; align-content: center; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.tile small { font-size: 12.5px; color: var(--text-3); line-height: 1.3; }
.tile b { color: var(--text); font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile b small { font-size: 13px; font-weight: 500; }
.tile.gold { background: rgba(212, 184, 134, .08); border-color: rgba(212, 184, 134, .35); }
.tile.gold b { color: var(--gold); }
.tile.good b { color: var(--good); } .tile.fair b { color: var(--warn); } .tile.bad b { color: var(--bad); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tiles .tile { background: var(--card-2); }

.ed-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.ed { display: flex; flex-direction: column; padding: 20px 22px; min-width: 0; }
.ed.s5 { grid-column: span 5; } .ed.s6 { grid-column: span 6; } .ed.s7 { grid-column: span 7; }
.ed-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; min-height: 32px; }
.ed-total { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); color: var(--text); font-weight: 600; }
.ed-total span { flex: 1; }
.ed-total b { font-size: 17px; font-variant-numeric: tabular-nums; }
.lines { margin-bottom: 14px; }
.ln { display: flex; align-items: center; gap: 12px; min-height: 46px; }
.ln + .ln { border-top: 1px solid var(--line); }
.ln .k { flex: 1; min-width: 0; color: var(--text-2); }
.ln .v { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ln .mbar { width: 80px; }

/* Product table */
.ptable { margin-bottom: 14px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 118px 118px 150px 28px; align-items: center; gap: 12px; padding: 10px 0; }
.ro .prow { grid-template-columns: minmax(0, 1fr) 118px 118px 150px; }
.prow + .prow { border-top: 1px solid var(--line); }
.prow.head { padding: 0 0 8px; font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.prow .r { text-align: right; display: flex; justify-content: flex-end; }
.prow.head .r { display: block; }
.pn { min-width: 0; display: grid; }
.pn b { color: var(--text); font-weight: 600; }
.pn small { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn .iv { margin-left: -9px; }
.keep { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; justify-items: end; }
.keep b { grid-column: 1 / -1; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }
.keep b small { font-weight: 500; color: var(--text-3); }
.keep .mbar { width: 100%; height: 4px; }
.keep > small { font-size: 12px; color: var(--text-3); }

/* Inline number box: clearly a field for the admin, plain text for clients */
.iv { display: inline-flex; align-items: center; gap: 3px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg); transition: border-color .12s, background .12s, box-shadow .12s; }
.iv:hover { border-color: #50505A; }
.iv:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .18); }
.iv i { font-style: normal; color: var(--text-3); font-size: 13.5px; }
.iv input[type="text"] { width: 78px; height: 30px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.iv input[type="text"].name { width: 220px; text-align: left; font-weight: 600; }
.iv input[type="text"]:focus { box-shadow: none; }
.ln .k .iv { margin-left: -11px; border-color: transparent; background: none; }
.ln .k .iv:hover, .ln .k .iv:focus-within, .pn .iv:hover, .pn .iv:focus-within { border-color: var(--line-2); background: var(--bg); }
.pn .iv { border-color: transparent; background: none; }
.ro .iv { border-color: transparent !important; background: none !important; box-shadow: none !important; padding-right: 0; }
.ro .iv input[type="text"] { width: auto; max-width: 110px; field-sizing: content; min-width: 2ch; }

.room small { color: var(--text-3); font-size: 13px; }
.room b { display: block; margin: 4px 0 8px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.room p { margin: 0 0 14px; color: var(--text-2); max-width: 52ch; }
.room p b { display: inline; margin: 0; font-size: inherit; letter-spacing: 0; }
.learn-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; color: var(--gold); font-weight: 600; font-size: 13.5px; }
.learn-link:hover { color: var(--gold-hi); }
.learn-link svg { width: 16px; height: 16px; }
.ideas { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 10px; }
.ideas li { max-width: 60ch; }
.ideas li::marker { color: var(--gold); }
.ideas b { color: var(--text); }
.advice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; font-size: 15px; color: var(--text-2); }

/* 30-day cash and close rate scales */
.zbar, .bandbar { position: relative; display: flex; height: 40px; border-radius: 10px; overflow: visible; }
.zbar .z, .bandbar .z { display: grid; place-items: center; min-width: 0; padding: 0 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zbar .z:first-child, .bandbar .z:first-child { border-radius: 10px 0 0 10px; }
.zbar .z:last-of-type, .bandbar .z:last-of-type { border-radius: 0 10px 10px 0; }
.zbar .z.good { flex: 1; }
.z.bad { background: rgba(239, 107, 107, .16); color: #F49A9A; }
.z.fair { background: rgba(226, 174, 79, .16); color: #F0C77E; }
.z.good { background: rgba(76, 195, 138, .16); color: #7DDBAE; }
.pin { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; background: var(--text); border-radius: 3px; box-shadow: 0 0 0 3px var(--card); }
.pin em { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 7px; background: var(--text); color: #141416; font-style: normal; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.zticks { position: relative; height: 18px; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.zticks span { position: absolute; transform: translateX(-50%); }
.zticks span:first-child { transform: none; }
.zbar { margin-top: 28px; }
.bandbar { margin-top: 30px; }

.callgrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 420px; }
.callgrid i { aspect-ratio: 1; border-radius: 6px; background: var(--card-3); }
.callgrid i.y { background: var(--gold); }

/* Retention curve */
.curve { width: 100%; height: auto; display: block; }
.curve .g { stroke: var(--line); stroke-width: 1; }
.curve .ax { fill: var(--text-3); font: 500 11.5px var(--font); }
.curve .area { fill: rgba(160, 138, 242, .12); }
.curve .you { fill: none; stroke: var(--violet); stroke-width: 3; stroke-linecap: round; }
.curve .std { fill: none; stroke: var(--silver); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .7; }
.curve .dotc { fill: var(--violet); stroke: var(--card); stroke-width: 3; }
.curve .lbl { fill: var(--text); font: 700 13px var(--font); }
.curve .lbl2 { fill: var(--text-3); font: 500 12px var(--font); }
.legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--text-3); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 18px; height: 3px; border-radius: 2px; background: var(--violet); }
.legend i.std { background: none; border-top: 2px dashed var(--silver); height: 0; }

/* ------------------------------------------------------------ insights */

.ins-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.ins-side { position: sticky; top: 24px; }
.ins { position: relative; display: flex; gap: 16px; padding: 20px 22px; margin-bottom: 14px; overflow: hidden; }
.ins::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-2); }
.ins.t-bad::before { background: var(--bad); } .ins.t-fair::before { background: var(--warn); } .ins.t-good::before { background: var(--good); }
.ins-n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--card-3); color: var(--text); font-weight: 700; font-size: 13.5px; }
.ins-n.ok { background: rgba(76, 195, 138, .15); color: var(--good); }
.ins-n svg { width: 15px; height: 15px; }
.ins-b { flex: 1; min-width: 0; }
.ins h3 { margin: 3px 0 6px; color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ins p { margin: 0; max-width: 70ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: grid; gap: 1px; padding: 8px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); }
.chip small { font-size: 12px; color: var(--text-3); }
.chip b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.ins-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ins-a .btn.quiet svg { color: var(--gold); }

.sandbox .wh { display: flex; align-items: center; gap: 10px; }
.sandbox > .muted { margin: 6px 0 16px; }
.wi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wi { display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.wi-box { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); }
.wi-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .18); }
.wi-box i { font-style: normal; color: var(--text-3); }
.wi-box input[type="text"] { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-t { width: 100%; margin-top: 18px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cmp-t th { padding: 0 0 8px; font-size: 12.5px; font-weight: 500; color: var(--text-3); text-align: left; }
.cmp-t td { padding: 10px 0; border-top: 1px solid var(--line); }
.cmp-t .r { text-align: right; }
.cmp-t .b { color: var(--text); font-weight: 700; }
.cmp-t .up { color: var(--good); } .cmp-t .down { color: var(--bad); }

/* ------------------------------------------------------------ goals */

.goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.goal { padding: 20px 22px; }
.goal-h { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.goal-h a { color: var(--text); font-weight: 600; font-size: 15px; }
.goal-h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.goal-n { display: grid; grid-template-columns: auto auto 1fr; gap: 22px; align-items: end; margin-bottom: 18px; }
.goal-n small { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--text-3); }
.goal-n b { color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 34px; }
.goal-n b.by { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.goal-n .iv input[type="text"] { width: 56px; font-size: 18px; }
.goal-n .dd.inline { max-width: 100%; }
.goal-s { margin: 12px 0 0; font-size: 13.5px; color: var(--text-2); }

/* ------------------------------------------------------------ offers */

.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.offer { position: relative; overflow: hidden; --oc: 212, 184, 134; }
.offer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgb(var(--oc)); }
.offer.c-teal { --oc: 67, 195, 183; } .offer.c-violet { --oc: 160, 138, 242; } .offer.c-blue { --oc: 111, 163, 232; } .offer.c-green { --oc: 76, 195, 138; } .offer.c-silver { --oc: 191, 194, 199; }
.offer-h { display: flex; align-items: center; gap: 10px; padding: 20px 22px 0; }
.offer-h .nm { flex: 1; min-width: 0; }
.offer-h .nm input[type="text"] { width: 100%; height: 38px; margin-left: -10px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text); font-size: 17px; font-weight: 700; }
.offer-h .nm input[type="text"]:hover { border-color: var(--line-2); }
.offer-h .nm input[type="text"]:focus { border-color: rgb(var(--oc)); box-shadow: 0 0 0 3px rgba(var(--oc), .18); }
.offer-h .nm b { color: var(--text); font-size: 17px; }
.offer-score { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 16px 22px 0; }
.score { display: flex; align-items: center; gap: 12px; }
.score .fig { margin: 0; font-size: 44px; }
.frac { display: grid; gap: 6px; margin-left: auto; padding: 10px 16px; border-radius: 12px; background: var(--card-2); font-variant-numeric: tabular-nums; }
.fr-top, .fr-bot { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.frac span { color: var(--text); font-weight: 700; font-size: 18px; }
.frac small { font-size: 12px; color: var(--text-3); }
.frac em { font-style: normal; color: var(--text-3); margin: 0 4px; }
.fr-bar { height: 2px; background: var(--text-3); border-radius: 2px; }
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 22px 20px; }
.zone { padding: 14px; border-radius: 12px; }
.zone.up { background: rgba(76, 195, 138, .07); box-shadow: inset 0 0 0 1px rgba(76, 195, 138, .2); }
.zone.down { background: rgba(226, 174, 79, .07); box-shadow: inset 0 0 0 1px rgba(226, 174, 79, .2); }
.zone h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.rate { margin-top: 10px; }
.rate .rl { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.rate .rl span { display: inline-flex; align-items: center; gap: 6px; }
.rate .rl b { color: var(--text); font-variant-numeric: tabular-nums; }
.dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 6px; }
.dots button { height: 20px; padding: 0; border: 0; border-radius: 4px; background: var(--card-3); font-size: 0; transition: background .1s; }
.dots button:hover { background: var(--line-2); }
.zone.up .dots button.f { background: var(--good); }
.zone.down .dots button.f { background: var(--warn); }
.ro .dots button { pointer-events: none; }
.tip { display: flex; gap: 10px; margin: 0 22px 20px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); font-size: 13.5px; color: var(--text-2); }
.tip b { color: var(--text); }
.tip svg { color: var(--gold); margin-top: 1px; width: 16px; height: 16px; }
.tip.wide { margin: 0 0 20px; }
.in-warn { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 2px; padding: 8px 11px; border-radius: 9px; background: rgba(226, 174, 79, .1); color: #F0C77E; font-size: 12.5px; line-height: 1.4; }
.in-warn svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.empty-big { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 54px 28px; }
.empty-big .ic { width: 44px; height: 44px; margin-bottom: 6px; }
.empty-big .ic svg { width: 22px; height: 22px; }
.empty-big h3 { margin: 0; color: var(--text); font-size: 18px; }
.empty-big p { margin: 0 0 10px; max-width: 440px; color: var(--text-2); font-size: 14px; }
/* Offer lab: in-page nav and the Build / Guarantees / Lead magnets / Ideas views */
.lab-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 20px; padding: 4px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); }
.lab-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.lab-nav a:hover { color: var(--text); background: var(--card-2); }
.lab-nav a.on { background: var(--card-3); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.lab-h { margin: 26px 0 12px; font-size: 15px; font-weight: 700; color: var(--text); }
.lab-h:first-child { margin-top: 2px; }
.offer-grt { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 22px; padding: 14px 16px; border-radius: 12px; background: var(--card-2); }
.offer-grt .grt-l { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); font-size: 13.5px; }
.offer-grt .grt-l svg { width: 15px; height: 15px; color: rgb(var(--oc)); }
.offer-grt .grt-in { flex: 1; min-width: 160px; height: 34px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg); color: var(--text); font: 400 13.5px var(--font); }
.offer-grt .grt-in:focus { border-color: rgb(var(--oc)); box-shadow: 0 0 0 3px rgba(var(--oc), .18); outline: none; }
.offer-grt .grt-v { color: var(--text-2); font-size: 13.5px; }
.offer-grt .grt-help { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.offer-grt .grt-help:hover { color: var(--text); }
.offer-grt .grt-help svg { width: 14px; height: 14px; }
.build-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.b-step { display: flex; gap: 16px; padding: 18px 20px; }
.b-step .b-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(229, 139, 176, .16); color: #E58BB0; font-weight: 700; font-size: 14px; }
.b-step b { color: var(--text); font-size: 15px; }
.b-step p { margin: 5px 0 0; color: var(--text-2); font-size: 13.5px; }
.b-step .b-do { display: flex; gap: 8px; align-items: flex-start; color: var(--text-3); }
.b-step .b-do svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--gold); }
/* Interactive offer builder */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.b-steps { display: grid; gap: 14px; }
.b-card { padding: 20px 22px; }
.b-head { display: flex; gap: 14px; margin-bottom: 14px; }
.b-head .b-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(229, 139, 176, .16); color: #E58BB0; font-weight: 700; font-size: 14px; }
.b-head b { color: var(--text); font-size: 15.5px; }
.b-head p { margin: 4px 0 0; color: var(--text-3); font-size: 13px; line-height: 1.5; }
.b-in { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--text); font: 400 14px var(--font); }
.b-in:focus { outline: none; border-color: rgba(229, 139, 176, .6); box-shadow: 0 0 0 3px rgba(229, 139, 176, .16); }
textarea.b-in { resize: vertical; min-height: 44px; line-height: 1.5; }
.b-levers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.b-scoreline { margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: var(--card-2); color: var(--text-2); font-size: 13.5px; }
.b-scoreline b { font-size: 16px; margin: 0 2px; }
.b-scoreline b.good { color: var(--good); } .b-scoreline b.fair { color: var(--warn); } .b-scoreline b.bad { color: var(--bad); }
.b-rows { display: grid; gap: 8px; margin-bottom: 8px; }
.b-pr { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; }
.b-pr .b-arrow { color: var(--text-3); display: grid; } .b-pr .b-arrow svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.b-ex { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.b-grt { display: grid; gap: 10px; }
.b-sel { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--text); font: 600 13.5px var(--font); }
.b-two { display: grid; grid-template-columns: 1fr 160px; gap: 12px; }
.b-f { display: grid; gap: 6px; } .b-f > span { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.b-money { display: flex; align-items: center; gap: 6px; } .b-money i { color: var(--text-3); font-style: normal; }
.bld-preview { position: sticky; top: 8px; display: grid; gap: 10px; align-content: start; }
.bp-h { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; font-size: 14px; }
.bp-card { padding: 20px 22px; position: relative; overflow: hidden; }
.bp-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgb(var(--tc)); }
.bp-name { color: var(--text); font-size: 17px; font-weight: 700; }
.bp-score { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.bp-score .fig { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.bp-score .fig.good { color: var(--good); } .bp-score .fig.fair { color: var(--warn); } .bp-score .fig.bad { color: var(--bad); } .bp-score .fig.empty { color: var(--text-3); }
.bp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bp-list li { display: flex; gap: 9px; align-items: flex-start; color: var(--text-2); font-size: 13px; line-height: 1.4; }
.bp-list svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: rgb(var(--tc)); }
.bp-empty { margin: 4px 0 0; color: var(--text-3); font-size: 12.5px; }
.bp-create { width: 100%; }
.g-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.gcard { position: relative; overflow: hidden; padding: 20px 22px; }
.gcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgb(var(--tc)); }
.gc-h { display: flex; align-items: center; gap: 10px; }
.gc-h b { color: var(--text); font-size: 15.5px; }
.gc-one { margin: 12px 0 14px; color: var(--text); font-size: 14px; }
.gc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gc-grid h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.gc-grid p { margin: 0; font-size: 13px; color: var(--text-3); }
.gc-words { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--card-2); }
.gc-words span { font-size: 12px; font-weight: 600; color: rgb(var(--tc)); }
.gc-words p { margin: 5px 0 0; color: var(--text); font-style: italic; font-size: 13.5px; }
.gc-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.gc-helper { padding: 20px 22px; }
.pick-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.pick-list li { padding-left: 18px; position: relative; font-size: 13.5px; color: var(--text-2); }
.pick-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--tc)); }
.pick-list b { color: var(--text); }
.fmt-grid, .idea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fmt { padding: 16px 18px; display: grid; gap: 4px; }
.fmt b { color: var(--text); font-size: 14px; }
.fmt small { color: var(--text-3); font-size: 12.5px; }
.idea { padding: 18px 20px; }
.idea b { color: var(--text); font-size: 14.5px; }
.idea p { margin: 6px 0 0; color: var(--text-2); font-size: 13px; }
/* Guarantees: objection groups + strength meter */
.grt-scale { padding: 18px 22px; margin-bottom: 20px; }
.gm-track { position: relative; display: flex; height: 8px; border-radius: 999px; overflow: hidden; }
.gm-track.big { height: 30px; border-radius: 10px; overflow: visible; margin: 4px 0 2px; }
.gm-z { position: relative; }
.gm-z.bad { background: rgba(239, 107, 107, .4); } .gm-z.fair { background: rgba(226, 174, 79, .45); } .gm-z.good { background: rgba(76, 195, 138, .5); }
.gm-track.big .gm-z { display: grid; place-items: center; }
.gm-track.big .gm-z + .gm-z { border-left: 1px solid var(--bg); }
.gm-z em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--text); }
.gm-pin { position: absolute; top: -3px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 2px var(--card); }
.grt-meter { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.grt-meter .gm-track { flex: 1; }
.gm-lab { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.gm-lab.bad { color: var(--bad); } .gm-lab.fair { color: var(--warn); } .gm-lab.good { color: var(--good); }
.obj-g { margin-bottom: 24px; }
.obj-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.obj-head b { color: var(--text); font-size: 16px; }
.obj-head p { margin: 3px 0 0; color: var(--text-3); font-size: 13px; max-width: 70ch; }
.idea2 { display: flex; gap: 14px; padding: 18px 20px; position: relative; overflow: hidden; }
.idea2::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgb(var(--tc)); }
.idea2 .ic { flex: none; }
.idea2 b { color: var(--text); font-size: 14.5px; }
.idea2 p { margin: 5px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.swatches { display: flex; gap: 8px; padding: 6px 10px 8px; }
.swatches button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
.swatches button.on { border-color: var(--text); }

/* ------------------------------------------------------------ Life Boat */

.search { display: flex; align-items: center; gap: 10px; max-width: 560px; height: 46px; padding: 0 16px; margin-bottom: 24px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-3); }
.search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .16); }
.search input[type="text"] { flex: 1; height: 44px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text); font-size: 15px; }
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.track { --tc: 212, 184, 134; position: relative; display: flex; flex-direction: column; padding: 22px; transition: border-color .12s, background .12s; overflow: hidden; }
.track:hover { border-color: rgba(var(--tc), .5); background: #232328; }
.c-teal { --tc: 67, 195, 183; } .c-violet { --tc: 160, 138, 242; } .c-blue { --tc: 111, 163, 232; } .c-green { --tc: 76, 195, 138; } .c-silver { --tc: 191, 194, 199; } .c-gold { --tc: 212, 184, 134; }
.track-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(var(--tc), .15); color: rgb(var(--tc)); margin-bottom: 16px; }
.track-ic svg { width: 22px; height: 22px; }
.track b { color: var(--text); font-size: 17px; font-weight: 600; }
.track p { margin: 6px 0 18px; color: var(--text-2); flex: 1; }
.track-f { display: flex; font-size: 12.5px; color: var(--text-3); margin-bottom: 8px; }
.track .gbar i { background: rgb(var(--tc)); }
.results { display: grid; gap: 10px; max-width: 860px; }
.res { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.res:hover { border-color: var(--line-2); }
.res b { display: block; color: var(--text); font-weight: 600; }
.res small { color: var(--text-2); font-size: 13.5px; }

.course { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.lessons { position: sticky; top: 24px; display: grid; gap: 2px; padding: 8px; }
.lessons a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text-2); }
.lessons a:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.lessons a.on { background: var(--card-3); color: var(--text); }
.ln-n { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card-3); font-size: 12px; font-weight: 700; color: var(--text-2); }
.lessons a.on .ln-n { background: var(--gold); color: #141416; }
.ln-n.done { background: rgba(76, 195, 138, .16); color: var(--good); }
.ln-n svg { width: 13px; height: 13px; stroke-width: 2.6; }
.ln-t { display: grid; min-width: 0; }
.ln-t b { font-weight: 600; font-size: 14px; }
.ln-t small { font-size: 12px; color: var(--text-3); }
.lesson { --tc: 212, 184, 134; position: relative; padding: 32px 36px; overflow: hidden; }
.lesson::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgb(var(--tc)); }
.lesson h2 { margin: 8px 0 0; color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.lesson .lede { max-width: 62ch; font-size: 17px; color: var(--text); }
.points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 70ch; }
.points li { position: relative; padding: 12px 16px 12px 44px; border-radius: 12px; background: var(--card-2); color: var(--text-2); }
.points li::before { content: ''; position: absolute; left: 18px; top: 20px; width: 9px; height: 9px; border-radius: 3px; background: rgb(var(--tc)); }
.example { display: flex; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; border: 1px dashed rgba(var(--tc), .55); color: var(--text); max-width: 70ch; }
.example svg { color: rgb(var(--tc)); margin-top: 2px; }
.lesson-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

.gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.gl-c { padding: 18px 20px; }
.gl-c b { color: var(--text); font-weight: 600; }
.gl-c p { margin: 6px 0 0; }

/* ------------------------------------------------------------ tables, clients */

.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; padding: 14px 18px; font-size: 13px; font-weight: 500; color: var(--text-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--card-2); }
.tbl .r { text-align: right; }
.tbl .who { display: flex; align-items: center; gap: 12px; }
.tbl .who span { display: grid; }
.tbl .who b { color: var(--text); font-weight: 600; }
.tbl .who small { color: var(--text-3); font-size: 12.5px; }
.tbl td.v { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ------------------------------------------------------------ settings */

.settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; max-width: 1100px; }
.set-nav { display: grid; gap: 2px; position: sticky; top: 24px; }
.set-nav a { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 10px; color: var(--text-2); font-weight: 500; }
.set-nav a:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.set-nav a.on { background: var(--card-3); color: var(--text); }
.set-body { padding: 8px 28px 26px; }
.set-body h2 { margin: 22px 0 4px; color: var(--text); font-size: 17px; font-weight: 600; }
.set-body textarea { margin-top: 12px; }
.srow { display: flex; align-items: center; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.srow:last-of-type { border-bottom: 0; }
.srow-t { flex: 1; min-width: 0; }
.srow-t b { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.srow-t span { display: block; font-size: 13px; color: var(--text-3); }
.srow-c { flex: 0 1 340px; display: flex; justify-content: flex-end; }
.srow-c input[type="text"], .srow-c .dd { width: 100%; }
.logo-c { display: flex; align-items: center; gap: 10px; }
.big-v { color: var(--text); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ forms */

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
input[type="text"], textarea { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); transition: border-color .12s, box-shadow .12s; }
textarea { height: auto; min-height: 110px; padding: 12px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .18); }
input[disabled] { color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; }
::placeholder { color: #5F5D67; }
.affix { position: relative; }
.affix > i { position: absolute; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--text-3); pointer-events: none; }
.affix.pre > i { left: 12px; } .affix.pre input { padding-left: 26px; }
.affix.post > i { right: 12px; } .affix.post input { padding-right: 30px; }
.dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); text-align: left; }
.dd:hover { border-color: #50505A; }
.dd[aria-expanded="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .18); }
.dd.inline { width: auto; height: 34px; border-radius: 9px; font-size: 13px; font-weight: 600; background: var(--card-2); }
.dd span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd svg { width: 15px; height: 15px; color: var(--text-3); }
.dd[disabled] { cursor: default; }
.ro .dd svg { display: none; }
.toggle { display: flex; align-items: center; gap: 14px; padding: 12px 0; cursor: pointer; }
.toggle + .toggle { border-top: 1px solid var(--line); }
.ln + .toggle { border-top: 1px solid var(--line); }
.toggle .tx { flex: 1; }
.toggle b { display: block; color: var(--text); font-weight: 500; }
.toggle .tx span { font-size: 13px; color: var(--text-3); }
.sw { position: relative; width: 42px; height: 24px; flex: none; display: inline-block; }
.sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background .15s; pointer-events: none; }
.sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.sw input:checked + i { background: var(--gold); }
.sw input:checked + i::after { transform: translateX(18px); background: #17171A; }
.sw input:focus-visible + i { box-shadow: 0 0 0 3px rgba(212, 184, 134, .35); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--text-3); font-weight: 600; font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--card-3); color: var(--text); }
.seg button:hover:not([aria-pressed="true"]) { color: var(--text); }

/* Guided update */
.guide { max-width: 860px; }
.steps { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.steps a { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.steps a.on { color: var(--text); }
.steps a i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--card-3); font: 700 12px/1 var(--font); font-style: normal; }
.steps a i svg { width: 14px; height: 14px; }
.steps a.on i { background: var(--gold); color: #141416; }
.steps a.done i { color: var(--good); }
.steps .lnk { flex: 1; height: 2px; border-radius: 2px; background: var(--line); min-width: 12px; }
.sec { margin-bottom: 18px; }
.sec-h { padding: 20px 22px 0; }
.sec-h p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-3); }
.sec-b { padding: 16px 22px 22px; }
.prod { padding: 14px; border-radius: 12px; background: var(--bg); margin-bottom: 10px; border: 1px solid var(--line); }
.prod-top { display: flex; gap: 8px; margin-bottom: 10px; }
.prod-top .icon-btn { width: 40px; height: 40px; }
.prod .four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.prod .field { margin: 0; }
.result { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(212, 184, 134, .08); box-shadow: inset 0 0 0 1px rgba(212, 184, 134, .25); color: var(--text); }
.guide-foot { display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------ menus (Claude-style), help pop-ups, toast, modal, tour */

.menu { position: fixed; z-index: 80; min-width: 230px; max-height: min(460px, calc(100vh - 16px)); overflow-y: auto; padding: 6px; background: #26262B; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: pop .12s ease; }
.menu button, .menu a { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); text-align: left; font-size: 14px; }
.menu button > span, .menu a > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu button svg, .menu a svg { color: var(--text-2); }
.menu button:hover, .menu a:hover, .menu button:focus-visible, .menu a:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
.menu .chk { margin-left: auto; color: var(--gold) !important; opacity: 0; }
.menu .on .chk { opacity: 1; }
.menu .danger, .menu .danger svg { color: #F49A9A; }
.menu hr { border: 0; border-top: 1px solid var(--line-2); margin: 6px 4px; }
.menu .av { width: 26px; height: 26px; font-size: 10px; }
.m-head { padding: 8px 10px 6px; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.qt { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 0; background: var(--card-3); color: var(--text-3); font: 700 10.5px/1 var(--font); display: inline-grid; place-items: center; flex: none; letter-spacing: 0; vertical-align: middle; }
.qt:hover { background: var(--gold); color: #141416; }
.qt-pop { position: fixed; z-index: 90; max-width: 290px; padding: 12px 14px; border-radius: 12px; background: #2C2C32; border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); font-size: 13.5px; color: var(--text-2); animation: pop .12s ease; }
.qt-pop b { display: block; margin-bottom: 3px; color: var(--text); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 12px; background: var(--text); color: #17171A; font-weight: 600; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: .16s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { border: 0; border-radius: 8px; background: #17171A; color: var(--text); font-weight: 600; padding: 6px 12px; }
.modal-back { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .65); backdrop-filter: blur(6px); }
.modal { position: relative; width: min(440px, 100%); padding: 30px 28px 24px; text-align: center; border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); -webkit-user-select: none; user-select: none; }
.modal-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--text-3); cursor: pointer; }
.modal-x:hover { background: var(--card-3); color: var(--text); }
.modal-x svg { width: 16px; height: 16px; }
.wp { text-align: left; }
.modal .wp h2 { text-align: left; }
.wp-grid { display: grid; gap: 8px; margin-top: 14px; max-height: 58vh; overflow: auto; }
.wp-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); color: var(--text); text-align: left; cursor: pointer; }
.wp-card:hover { background: var(--card-3); border-color: var(--line-2); }
.wp-card .ic { flex: none; }
.wp-card .wp-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.wp-card .wp-t b { color: var(--text); font-size: 14px; }
.wp-card .wp-t small { color: var(--text-3); font-size: 12px; white-space: normal; }
.wp-card > svg:last-child { flex: none; width: 15px; height: 15px; color: var(--text-3); }
.wp-build { border-style: dashed; }
.wp-none { margin: 14px 2px; }
/* Keep the invite code and any typed fields copyable, just not the surrounding chrome. */
.modal code, .modal input, .modal select, .modal textarea { -webkit-user-select: text; user-select: text; }
.modal img { display: block; width: 120px; height: 120px; margin: -6px auto 12px; border-radius: 14px; }
.modal h2 { margin: 0 0 6px; color: var(--text); font-size: 20px; }
.modal p { margin: 0 auto; max-width: 36ch; }
.modal .acts { justify-content: center; margin-top: 22px; }
.hole { position: fixed; z-index: 86; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .65), 0 0 0 2px var(--gold); pointer-events: none; transition: all .2s ease; }
.pop { position: fixed; z-index: 87; width: 320px; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.pop h3 { margin: 0 0 4px; color: var(--text); font-size: 16px; }
.pop p { margin: 0; font-size: 14px; }
.pop .acts { margin-top: 16px; align-items: center; }
.pop .count { margin-right: auto; font-size: 12.5px; color: var(--text-3); }

/* ------------------------------------------------------------ the growth report */

.is-report { background: #2A2A2F; }
body:has(.is-report) { background: #2A2A2F; }
.report-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; max-width: 920px; margin: 0 auto; padding: 18px 0; background: #2A2A2F; }
.paper { --ink: #111113; --ink-2: #4A4A52; --ink-3: #7C7C85; --rule: #E4E4E8; --gold-ink: #9C7A3F;
  max-width: 920px; margin: 0 auto 60px; background: #FFFFFF; color: var(--ink-2); border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); font-size: 14px; line-height: 1.55; }
.r-cover { display: flex; align-items: center; gap: 28px; padding: 34px 48px; background: #050505; color: #F5EFE2; border-bottom: 4px solid #D4B886; }
.r-cover img { width: 132px; height: 132px; flex: none; }
.r-kind { font: 400 15px/1 'Anton', Impact, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #D4B886; }
.r-cover h1 { margin: 10px 0 6px; font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: #F5EFE2; line-height: 1.1; }
.r-cover p { margin: 0; color: #B9B4A9; }
.r-sec { padding: 28px 48px 6px; }
.r-sec h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--ink); }
.r-lede { margin: 0 0 16px; font-size: 18px; line-height: 1.45; color: var(--ink); max-width: 60ch; }
.r-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.r-tbl th { text-align: left; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); border-bottom: 1.5px solid var(--ink); }
.r-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.r-tbl .r { text-align: right; }
.r-tbl .b { color: var(--ink); font-weight: 700; }
.r-tbl tr.tot td { border-top: 1.5px solid var(--ink); border-bottom: 0; color: var(--ink); font-weight: 700; }
.r-st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #EFEFF2; color: var(--ink-2); }
.r-st.good { background: #E3F4EC; color: #1F7A4F; }
.r-st.fair { background: #FBF0DA; color: #8A5B0B; }
.r-st.bad { background: #FBE4E4; color: #A42828; }
.r-prog { display: inline-block; width: 70px; height: 6px; margin-right: 8px; border-radius: 999px; background: #EEE; overflow: hidden; vertical-align: middle; }
.r-prog i { display: block; height: 100%; background: #C9A96E; }
.r-recs, .r-wins { margin: 0; padding-left: 20px; }
.r-recs li, .r-wins li { margin-bottom: 10px; max-width: 72ch; }
.r-recs b, .r-wins b { color: var(--ink); }
.r-recs li::marker { color: var(--gold-ink); font-weight: 700; }
/* Report: visual sections (icons, stat cards, callouts, goal bars) */
.r-sec h2 { display: flex; align-items: center; gap: 10px; }
.r-sec h2 .ic { width: 28px; height: 28px; border-radius: 8px; }
.r-sec h2 .ic svg { width: 15px; height: 15px; }
.r-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.r-card { --tc: 212, 184, 134; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #FAFAFB; border: 1px solid var(--rule); border-left: 3px solid rgb(var(--tc)); }
.r-card .ic { flex: none; width: 30px; height: 30px; border-radius: 9px; }
.r-card .rc-b { flex: 1; min-width: 0; display: grid; gap: 2px; }
.r-card .rc-b small { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.r-card .rc-b b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.r-card .rc-b b.good { color: #1F7A4F; } .r-card .rc-b b.bad { color: #A42828; } .r-card .rc-b b.fair { color: #8A5B0B; }
.r-card .rc-s { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.r-card .rc-s.good { color: #1F7A4F; } .r-card .rc-s.bad { color: #A42828; } .r-card .rc-s.fair { color: #8A5B0B; }
.r-card .rc-t { font-size: 11px; color: var(--ink-3); }
.r-recs2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.r-rec { display: flex; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #FAFAFB; border: 1px solid var(--rule); border-left: 3px solid #C9A96E; }
.r-rec.bad { border-left-color: #A42828; } .r-rec.fair { border-left-color: #C98A1E; }
.r-rec .rr-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #EFEAE0; color: var(--gold-ink); font-weight: 700; font-size: 13px; }
.r-rec b { color: var(--ink); } .r-rec p { margin: 3px 0 0; color: var(--ink-2); max-width: 70ch; }
.r-rec em { font-style: normal; color: var(--ink-3); }
.r-wins2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.r-wins2 li { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #F1F8F3; }
.r-wins2 .ic { flex: none; width: 26px; height: 26px; border-radius: 8px; }
.r-wins2 b { color: var(--ink); } .r-wins2 p { margin: 2px 0 0; color: var(--ink-2); }
.r-goals { display: grid; gap: 12px; }
.r-grow { --tc: 212, 184, 134; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; }
.r-grow .rg-t { grid-column: 1; display: flex; justify-content: space-between; gap: 10px; }
.r-grow .rg-t b { color: var(--ink); } .r-grow .rg-t span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.r-grow .rg-t i { color: var(--ink-3); font-style: normal; } .r-grow .rg-t small { color: var(--ink-3); }
.r-grow .gbar { grid-column: 1; height: 8px; border-radius: 999px; background: #ECECEF; }
.r-grow .rg-p { grid-column: 2; grid-row: 1 / 3; font-weight: 700; color: var(--ink-2); font-size: 13px; }
.r-grow .rg-p.good { color: #1F7A4F; }
.r-imp { color: var(--gold-ink); font-weight: 600; }
.r-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.r-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.r-bars { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 170px; padding-top: 18px; border-bottom: 1.5px solid var(--ink); }
.r-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.r-col i { display: block; width: 100%; max-width: 40px; background: #D4B886; border-radius: 3px 3px 0 0; }
.r-col span { font-size: 10.5px; color: var(--ink-2); margin-bottom: 3px; }
.r-col em { position: absolute; bottom: -20px; font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.r-goal { position: absolute; left: 0; right: 0; border-top: 1.5px dashed #9A9AA3; z-index: 1; }
.r-sign { margin: 34px 48px 40px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between; }
.r-sign b { font: 400 15px/1 'Anton', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

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

@media (max-width: 1280px) {
  .w.s3 { grid-column: span 6; } .w.s4 { grid-column: span 6; } .w.s8 { grid-column: span 12; }
  .w[data-wid="attention"] { grid-column: span 12; }
  .ins-wrap { grid-template-columns: minmax(0, 1fr); }
  .ins-side { position: static; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ed.s5, .ed.s7 { grid-column: span 12; }
}
@media (max-width: 1000px) {
  .eq-strip { flex-wrap: wrap; }
  .eq-strip .tile { flex: 1 1 40%; }
  .eq-strip .op { display: none; }
  .ed.s6 { grid-column: span 12; }
  .offers { grid-template-columns: minmax(0, 1fr); }
  .g-cards, .gc-grid, .fmt-grid, .idea-grid { grid-template-columns: minmax(0, 1fr); }
  .builder, .b-levers, .b-two { grid-template-columns: minmax(0, 1fr); }
  .bld-preview { position: static; }
  .b-pr { grid-template-columns: 1fr auto; } .b-pr .b-arrow { display: none; }
  .offer-grt { align-items: flex-start; }
  .course, .settings { grid-template-columns: minmax(0, 1fr); }
  .lessons, .set-nav { position: static; }
  .set-nav { display: flex; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  #app, #app.side-min { display: block; --side-w: 284px; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 20px 0 60px rgba(0, 0, 0, .5); }
  .nav-open .side { transform: none; }
  .nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .55); }
  .side-min .side { align-items: stretch; }
  .side-min .brand b, .side-min .org-t, .side-min .org .chev, .side-min .nav-a span, .side-min .badge, .side-min .me-t, .side-min .me-btn .chev { display: revert; }
  .side-min .org-t, .side-min .me-t { display: grid; }
  .side-min .brand img { display: none; }
  .side-min .side-top { flex-direction: row; }
  .side-min .nav-a { width: auto; justify-content: flex-start; padding: 0 12px; }
  .hide-m { display: none; }
  .show-m { display: inline-grid; }
  .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 10px; background: var(--side); border-bottom: 1px solid #1E1E22; }
  .topbar .brand b { font-size: 16px; }
}
@media (max-width: 720px) {
  .page { padding: 20px 16px 64px; }
  .ph h1 { font-size: 24px; }
  .ph { margin-bottom: 18px; }
  .w, .w.s3, .w.s4, .w.s6, .w.s8 { grid-column: span 12; }
  .add-w { grid-column: span 12; }
  .tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs a { padding: 0 12px; }
  .hero { padding: 20px; }
  .hero-l .big { font-size: 44px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .eq-strip .tile { flex: 1 1 100%; }
  .prow, .ro .prow { grid-template-columns: minmax(0, 1fr) 96px 96px; }
  .prow .keep { grid-column: 1 / -1; justify-items: start; grid-template-columns: auto 120px auto; }
  .prow .keep b { grid-column: auto; }
  .prow .icon-btn { grid-column: 3; grid-row: 1; justify-self: end; display: none; }
  .prow.head span:nth-child(4), .prow.head span:nth-child(5) { display: none; }
  .iv input[type="text"] { width: 60px; }
  .iv input[type="text"].name { width: 150px; }
  .ln .mbar { display: none; }
  .zones, .two, .prod .four, .wi-grid, .r-two { grid-template-columns: minmax(0, 1fr); }
  .offer-score { flex-direction: column; align-items: flex-start; }
  .frac { margin-left: 0; }
  .goal-n { grid-template-columns: auto auto; }
  .goal-n > div:last-child { grid-column: 1 / -1; }
  .tbl th:nth-child(n+3), .tbl td:nth-child(n+3) { display: none; }
  .srow { flex-direction: column; align-items: stretch; gap: 10px; }
  .srow-c { flex: auto; justify-content: flex-start; }
  .set-body { padding: 4px 18px 20px; }
  .lesson { padding: 24px 20px; }
  .steps a span { display: none; }
  .steps a.on span { display: inline; }
  .zbar .z, .bandbar .z { font-size: 0; }
  .report-bar { padding: 12px 14px; }
  .r-cover { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
  .r-sec { padding: 22px 22px 4px; }
  .r-sign { margin: 24px 22px 28px; flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  @page { margin: 12mm; }
  body, .is-report { background: #fff !important; }
  .side, .topbar, .no-print, .report-bar, .toast, .menu, .qt-pop, #tour-root { display: none !important; }
  .paper { box-shadow: none; max-width: none; margin: 0; border-radius: 0; }
  .r-sec, .r-tbl tr { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* v2.0 polish after the first screenshot pass */
#app:not(.is-report) { background: linear-gradient(90deg, var(--side) calc(var(--side-w) - 1px), #1E1E22 calc(var(--side-w) - 1px), #1E1E22 var(--side-w), transparent var(--side-w)); }
.goal-t { white-space: nowrap; }
.goal-t svg { display: none; }
.goal-n b { white-space: nowrap; }
.ro .iv { gap: 1px; }
.metric .sub { min-height: 20px; }
@media (max-width: 900px) { #app:not(.is-report) { background: none; } }
.z.bad { background: rgba(239, 107, 107, .24); } .z.fair { background: rgba(226, 174, 79, .24); } .z.good { background: rgba(76, 195, 138, .24); }
.bandbar { height: 30px; }
.bandlbl { display: flex; margin-top: 8px; }
.bandlbl span { padding: 0 4px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.3; }
.bandlbl .bad { color: #F49A9A; } .bandlbl .fair { color: #F0C77E; } .bandlbl .good { color: #7DDBAE; }
.bandlbl + .zticks { margin-top: 10px; }
@media (max-width: 720px) {
  .bars .goal em { display: none; }
  .bars { gap: 6px; }
  .bars .col span { font-size: 10.5px; }
  .w .list .mbar, .w .wh .muted.sm { display: none; }
  .bandlbl span { font-size: 10.5px; }
}
.r-bars { margin-bottom: 30px; }

/* v2.1: goal cards in their own colour with a progress ring; Numbers tiles replace the pill tabs */
.c-rose { --tc: 229, 139, 176; }
.ic.rose { background: rgba(229, 139, 176, .16); color: #E58BB0; }
.goals { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.goal { --tc: 212, 184, 134; display: flex; flex-direction: column; padding: 22px 24px 18px; border-color: rgba(var(--tc), .32);
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--tc), .22), rgba(var(--tc), .07) 55%, rgba(var(--tc), .04)), var(--card); }
.goal .ic { background: rgba(var(--tc), .22); color: rgb(var(--tc)); }
.goal-h { margin-bottom: 16px; }
.goal-h .pill svg { width: 13px; height: 13px; margin-right: 4px; }
.goal-m { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.ring { width: 96px; height: 96px; flex: none; }
.ring .rt { fill: none; stroke: rgba(var(--tc), .18); stroke-width: 8; }
.ring .rv { fill: none; stroke: rgb(var(--tc)); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .3s; }
.ring .rv.done { stroke: var(--good); }
.ring text { fill: var(--text); font: 700 17px var(--font); }
.goal .goal-n { display: grid; grid-template-columns: auto auto; gap: 26px; align-items: end; margin: 0; }
.goal .goal-n b { font-size: 28px; }
.goal .goal-n .iv { background: rgba(0, 0, 0, .28); border-color: rgba(var(--tc), .35); height: 40px; }
.goal .goal-n .iv input[type="text"] { width: 52px; font-size: 20px; }
.goal .goal-n .iv i { font-size: 15px; }
.goal-f { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(var(--tc), .2); }
.goal-by { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); }
.goal-by svg { width: 16px; height: 16px; }
.goal-by b { color: var(--text); font-weight: 600; font-size: 14px; }
.goal-by .dd.inline { background: rgba(0, 0, 0, .28); border-color: rgba(var(--tc), .3); }
.goal-f .goal-s { margin: 0 0 0 auto; text-align: right; font-size: 13.5px; color: var(--text); font-weight: 500; }
.goal.is-done { border-color: rgba(76, 195, 138, .45); }

.ntabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.ntab { --tc: 212, 184, 134; position: relative; display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); transition: border-color .12s, background .12s, transform .12s; }
.ntab:hover { border-color: rgba(var(--tc), .5); }
.ntab.on { border-color: rgba(var(--tc), .7); background: radial-gradient(120% 100% at 0% 0%, rgba(var(--tc), .24), rgba(var(--tc), .07) 60%), var(--card); box-shadow: 0 0 0 1px rgba(var(--tc), .35) inset; }
.ntab.on::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); background: var(--bg); border-right: 1px solid rgba(var(--tc), .7); border-bottom: 1px solid rgba(var(--tc), .7); display: none; }
.ntab-h { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 14.5px; }
.ntab b { color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ntab b.good { color: var(--good); } .ntab b.fair { color: var(--warn); } .ntab b.bad { color: var(--bad); }
.ntab-s { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntab .ic { background: rgba(var(--tc), .2); color: rgb(var(--tc)); }
@media (max-width: 1000px) { .ntabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .ntabs { gap: 10px; }
  .ntab { padding: 12px 14px; }
  .ntab b { font-size: 21px; }
  .goal-m { gap: 16px; }
  .ring { width: 80px; height: 80px; }
  .goal .goal-n { gap: 18px; }
  .goal .goal-n b { font-size: 22px; }
  .goals { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ v2.1: back to the Oversteer / Planning Center band, calmer pages */

#app, #app:not(.is-report) { display: block; background: none; min-height: 100vh; }
.mod-gold { --m: 212, 184, 134; } .mod-teal { --m: 67, 195, 183; } .mod-violet { --m: 160, 138, 242; } .mod-blue { --m: 111, 163, 232; }
.mod-green { --m: 76, 195, 138; } .mod-rose { --m: 229, 139, 176; } .mod-silver { --m: 191, 194, 199; }
.c-gold.c-gold { --tc: 212, 184, 134; } .c-teal.c-teal { --tc: 67, 195, 183; } .c-violet.c-violet { --tc: 160, 138, 242; } .c-blue.c-blue { --tc: 111, 163, 232; }
.c-green.c-green { --tc: 76, 195, 138; } .c-silver.c-silver { --tc: 191, 194, 199; } .c-rose.c-rose { --tc: 229, 139, 176; }

.band { position: relative; padding: 16px 32px 26px; background: linear-gradient(180deg, rgba(var(--m), .24), rgba(var(--m), .07)); border-bottom: 2px solid rgba(var(--m), .75); }
.band-in { max-width: 1320px; margin: 0 auto; }
.bar { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.band .brand { flex: none; color: var(--text); }
.band .brand b { font: 400 19px/1 "Anton", Impact, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.bar-sep { width: 1px; height: 24px; margin: 0 6px; background: rgba(255, 255, 255, .14); flex: none; }
.pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(15, 15, 17, .55); color: var(--text); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
button.pill-btn:hover { background: rgba(15, 15, 17, .8); border-color: rgba(255, 255, 255, .16); }
.pill-btn .grid-ic { color: var(--text-3); width: 16px; height: 16px; }
.pill-btn .mod-ic { color: rgb(var(--m)); }
.pill-btn .chev { width: 14px; height: 14px; color: var(--text-3); }
.acct-pill { padding-left: 6px; max-width: 280px; }
.acct-pill .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.acct-pill .av { width: 28px; height: 28px; border-radius: 50%; }
.btabs { display: flex; gap: 4px; margin-left: 4px; }
.btabs a { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px; color: var(--text-2); font-weight: 600; font-size: 14px; white-space: nowrap; }
.btabs a:hover { color: var(--text); }
.btabs a.on { background: var(--text); color: #141416; }
.round { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .09); background: rgba(15, 15, 17, .55); color: var(--text-2); }
.round:hover { color: var(--text); background: rgba(15, 15, 17, .8); }
.user { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(15, 15, 17, .55); color: var(--text); font-weight: 600; }
.user:hover { background: rgba(15, 15, 17, .8); }
.user .me { width: 32px; height: 32px; }
.user .chev { width: 14px; height: 14px; color: var(--text-3); }
.title-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.title-row > div:first-child { flex: 1; min-width: 240px; }
.title-row h1 { margin: 0; font-size: 30px; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1.15; }
.title-row p { margin: 6px 0 0; color: var(--text-2); font-size: 15px; }
.page { max-width: 1384px; padding: 28px 32px 80px; }
.page.narrow { max-width: 1240px; }

/* Module menu, Oversteer style with one line each */
.mod-row { align-items: center; }
.mr-t { display: grid; flex: 1; min-width: 0; }
.mr-t b { font-weight: 600; }
.mr-t small { font-size: 12.5px; color: var(--text-3); }
.menu .mod-row .ic { width: 30px; height: 30px; }
.menu .badge { margin-left: auto; }

/* Dashboard: number cards with change and a trend line */
.metric .fig-row { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.metric .fig { margin: 0; font-size: 34px; }
.chg { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chg svg { width: 13px; height: 13px; stroke-width: 2.6; }
.chg.up { background: rgba(76, 195, 138, .14); color: #7DDBAE; }
.chg.down { background: rgba(239, 107, 107, .14); color: #F49A9A; }
.m-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.m-foot .goal-t { margin: 0; font-size: 13px; }
.spark { width: 96px; height: 30px; flex: none; }
.spark path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-wid="cash"] .spark path { stroke: #4CC38A; } [data-wid="churn"] .spark path { stroke: #A08AF2; } [data-wid="close"] .spark path { stroke: #6FA3E8; }
.w-link { font-size: 13px; font-weight: 600; color: var(--gold); }
.att { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.att a { display: flex; align-items: center; gap: 12px; padding: 10px; margin: 0 -10px; border-radius: 10px; color: var(--text); font-weight: 500; }
.att a:hover { background: rgba(255, 255, 255, .05); }
.att a span { flex: 1; }
.att .go { transform: rotate(-90deg); color: var(--text-3); width: 15px; height: 15px; }
.all-good { display: flex; align-items: center; gap: 10px; padding: 12px 0; color: var(--text); }
.glist { gap: 16px; }
.gl-r { display: grid; grid-template-columns: 150px minmax(0, 1fr) 130px; align-items: center; gap: 14px; }
.gl-n { font-size: 14px; color: var(--text-2); }
.gl-r b { text-align: right; color: var(--text); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-r b small { color: var(--text-3); font-weight: 500; }
.pill.soft { background: var(--card-2); color: var(--text-3); font-weight: 500; }
.pill.sm { height: 20px; padding: 0 8px; font-size: 11px; }
.score-p { min-width: 48px; height: 28px; display: inline-grid; place-items: center; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--card-3); color: var(--text); }
.score-p.good { background: rgba(76, 195, 138, .15); color: #7DDBAE; } .score-p.fair { background: rgba(226, 174, 79, .15); color: #F0C77E; } .score-p.bad { background: rgba(239, 107, 107, .15); color: #F49A9A; }

/* Numbers: hero with one next move, and the edit panel */
.hero-f { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); }
.move { flex: 1; min-width: 260px; display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 15px; color: var(--text-2); }
.move b { color: var(--text); }
.move svg { color: var(--gold); margin-top: 2px; }
.hero-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-a .learn-link { margin: 0 0 0 6px; padding: 0; }
.ntab b { font-size: 28px; }
.drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5); animation: fade .15s ease; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(520px, 100vw); display: flex; flex-direction: column; background: #1D1D21; border-left: 1px solid var(--line-2); box-shadow: -30px 0 80px rgba(0, 0, 0, .5); animation: slide .2s ease; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.drawer-h { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer-h > div { flex: 1; display: grid; }
.drawer-h b { color: var(--text); font-size: 18px; }
.drawer-h small { color: var(--text-3); }
.drawer-b { flex: 1; overflow-y: auto; padding: 8px 22px 22px; }
.drawer-f { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }
.dsec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.dsec:last-child { border-bottom: 0; }
.dsec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dsec-h b { color: var(--text); font-size: 15px; }
.dsec-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-size: 12.5px; color: var(--text-3); }
.dsec-note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--teal); }
.dsec-t { display: flex; justify-content: space-between; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); color: var(--text-2); }
.dsec-t b { color: var(--text); font-variant-numeric: tabular-nums; }
.drow { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.drow + .drow { border-top: 1px solid var(--line); }
.drow > span:first-child { flex: 1; color: var(--text-2); }
.drow .iv { margin-left: auto; }
.drow > b { color: var(--text); }
.dprod { padding: 12px; margin-bottom: 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.dprod-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dprod-h .iv { flex: 1; margin-left: -10px; }
.dprod-h .iv input[type="text"].name { width: 100%; }
.dprod-h b { flex: 1; color: var(--text); }
.dprod-r { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; }
.dprod-r label, .dkeep { display: grid; gap: 4px; }
.dprod-r small { font-size: 12px; color: var(--text-3); }
.dprod-r .iv input[type="text"] { width: 100%; }
.dkeep b { color: var(--gold); height: 34px; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.link.add { margin: 8px 0 4px; }

/* Insights */
.health { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 22px 26px; margin-bottom: 20px; }
.health-l { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 280px; }
.health-l b { color: var(--text); font-size: 20px; }
.health-l p { margin: 4px 0 0; color: var(--text-2); max-width: 46ch; }
.health .ring { width: 84px; height: 84px; }
.health-r { display: flex; gap: 10px; flex-wrap: wrap; }
.hchip { display: grid; gap: 2px; min-width: 112px; padding: 10px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.hchip:hover { border-color: var(--line-2); }
.hchip small { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); }
.hchip b { color: var(--text); font-size: 19px; font-variant-numeric: tabular-nums; }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; margin-bottom: 20px; }
.ins { display: flex; flex-direction: column; gap: 0; padding: 22px 24px; margin: 0; }
.ins-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ins h3 { margin: 0 0 6px; font-size: 18px; }
.ins p { color: var(--text-2); }
.impact { display: grid; gap: 2px; align-self: flex-start; margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--card-2); }
.impact small { font-size: 12.5px; color: var(--text-3); }
.impact b { color: var(--text); font-size: 20px; font-variant-numeric: tabular-nums; }
.ins-a { margin-top: auto; padding-top: 18px; align-items: center; }
.ins-a .learn-link { margin: 0 0 0 4px; padding: 0; }
.wins { padding: 20px 22px; }
.win-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.win-l a { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); }
.win-l a:hover { background: var(--card-3); }
.win-i { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(76, 195, 138, .15); color: var(--good); }
.win-i svg { width: 13px; height: 13px; stroke-width: 2.6; }
.win-l b { display: block; color: var(--text); font-weight: 600; }
.win-l small { color: var(--text-3); font-size: 13px; }

/* Model */
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.preset { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(160, 138, 242, .35); background: rgba(160, 138, 242, .1); color: var(--text); font-weight: 600; font-size: 13.5px; }
.preset:hover { background: rgba(160, 138, 242, .2); }
.preset svg { color: var(--violet); width: 15px; height: 15px; }
.model { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.levers { padding: 20px 22px; }
.lever { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.lever + .lever { border-top: 1px solid var(--line); }
.lever-t { flex: 1; min-width: 0; display: grid; }
.lever-t b { color: var(--text); font-weight: 500; font-size: 14px; }
.lever-t small { font-size: 12px; color: var(--text-3); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 32px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: 9px; background: var(--card-2); color: var(--text-2); }
.stepper button:hover { color: var(--text); background: var(--card-3); }
.stepper button svg { width: 15px; height: 15px; }
.st-box { display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg); }
.st-box:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(160, 138, 242, .2); }
.st-box i { font-style: normal; color: var(--text-3); font-size: 13px; }
.st-box input[type="text"] { width: 62px; height: 34px; padding: 0; border: 0; background: none; box-shadow: none; text-align: right; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.model-r { display: grid; gap: 18px; min-width: 0; }
.res-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.res-t { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.res-t small { font-size: 13px; color: var(--text-3); }
.res-t b { color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.res-t span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-3); }
.res-t span svg { width: 13px; height: 13px; stroke-width: 2.6; }
.res-t.up { border-color: rgba(76, 195, 138, .45); background: linear-gradient(160deg, rgba(76, 195, 138, .12), transparent 60%), var(--card); }
.res-t.up span { color: #7DDBAE; }
.res-t.down { border-color: rgba(239, 107, 107, .45); background: linear-gradient(160deg, rgba(239, 107, 107, .12), transparent 60%), var(--card); }
.res-t.down span { color: #F49A9A; }
.chart-c .wh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.model-c .you { stroke: var(--gold); }
.model-c .dotc { fill: var(--gold); }
.model-c .zero { stroke: rgba(239, 107, 107, .5); stroke-dasharray: 3 4; }
.chart-c .legend i.you { background: var(--gold); }

/* Accounts */
.acct-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.at { display: grid; gap: 6px; padding: 18px 20px; background: radial-gradient(120% 100% at 0% 0%, rgba(var(--tc), .16), transparent 60%), var(--card); border-color: rgba(var(--tc), .28); }
.at small { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.at b { color: var(--text); font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.at span { font-size: 13px; color: var(--text-3); }
.acct-f { margin-bottom: 14px; }
.co-name { color: var(--text); }
.co-name:hover { text-decoration: underline; }
.co-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.co-search { flex: 1; min-width: 200px; max-width: 360px; height: 40px; margin-bottom: 0; }
.co-sort button { height: 32px; }
@media (max-width: 680px) { .co-search { max-width: none; } }
.acct-f button { height: 32px; }
.acct-f em { font-style: normal; margin-left: 4px; color: var(--text-3); }
.type { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.type.t-consulting { background: rgba(212, 184, 134, .15); color: var(--gold); }
.type.t-platform { background: rgba(111, 163, 232, .15); color: #9CC0F0; }
.tbl td.cap { text-transform: capitalize; color: var(--text-2); }
.tbl td.v small { color: var(--text-3); font-weight: 500; }
.hl { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13.5px; white-space: nowrap; }
.m-search { display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; padding: 0 10px; height: 38px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line-2); color: var(--text-3); }
.m-search input[type="text"] { flex: 1; height: 36px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text); }
.m-head em { font-style: normal; margin-left: 4px; color: var(--text-3); opacity: .7; }
.m-none { padding: 14px 12px; text-align: center; color: var(--text-3); font-size: 13px; }
.acct-row .ar-t { display: grid; flex: 1; min-width: 0; }
.acct-row .ar-t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-row .ar-t small { font-size: 12px; color: var(--text-3); }
.menu .acct-row .av { width: 30px; height: 30px; border-radius: 8px; }
.menu .acct-row.on { background: rgba(212, 184, 134, .1); }

/* Lessons: stories and objections */
.lesson-meta { margin: 0; }
.lesson h3 { margin: 26px 0 10px; color: var(--text); font-size: 16px; }
.story { display: flex; gap: 16px; margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: rgba(var(--tc), .08); border: 1px solid rgba(var(--tc), .22); max-width: 76ch; }
.story-av { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--tc), .22); color: rgb(var(--tc)); font-weight: 700; font-size: 17px; }
.story b { color: var(--text); }
.story p { margin: 6px 0 0; line-height: 1.65; }
.idea { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text); max-width: 64ch; }
.steps-l { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; max-width: 72ch; }
.steps-l li { counter-increment: st; position: relative; padding: 12px 16px 12px 52px; border-radius: 12px; background: var(--card-2); }
.steps-l li::before { content: counter(st); position: absolute; left: 14px; top: 11px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--tc), .2); color: rgb(var(--tc)); font-weight: 700; font-size: 13px; }
.say, .obj-says { display: flex; gap: 12px; align-items: flex-start; max-width: 72ch; }
.say-av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card-3); color: var(--text-2); }
.say-av svg { width: 16px; height: 16px; }
.say p { margin: 0; padding: 14px 18px; border-radius: 4px 16px 16px 16px; background: rgba(var(--tc), .14); color: var(--text); font-size: 15.5px; line-height: 1.55; }
.obj-says { margin-top: 20px; }
.obj-says p { margin: 0; padding: 16px 20px; border-radius: 4px 18px 18px 18px; background: var(--card-3); color: var(--text); font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.obj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; max-width: 900px; }
.obj-c { padding: 16px 18px; border-radius: 14px; background: var(--card-2); }
.lesson .obj-c h3 { margin: 0 0 6px; font-size: 14.5px; color: var(--text-2); }
.obj-c p { margin: 0; color: var(--text); }
.obj-c.real { background: rgba(var(--tc), .1); border: 1px solid rgba(var(--tc), .3); }
.handles { display: grid; gap: 12px; max-width: 900px; }
.handle { display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.h-n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--tc), .2); color: rgb(var(--tc)); font-weight: 700; font-size: 13px; }
.h-say { margin: 0; color: var(--text); font-size: 16.5px; font-weight: 600; }
.h-does { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }
.h-does b { color: var(--text-3); font-weight: 600; }

@media (max-width: 1280px) {
  .model { grid-template-columns: minmax(0, 1fr); }
  .res-grid, .acct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btabs { display: none; }
}
@media (max-width: 900px) {
  .band { padding: 12px 16px 18px; }
  .bar { flex-wrap: wrap; }
  .band .brand b { font-size: 16px; }
  .bar-sep, .pill-btn .grid-ic, .user .nm { display: none; }
  .acct-pill .nm { max-width: 120px; }
  .title-row h1 { font-size: 24px; }
}
@media (max-width: 600px) { .acct-pill .nm { display: none; } }
@media (max-width: 720px) {
  .page { padding: 18px 14px 64px; }
  .band .brand { width: 100%; }
  .gl-r { grid-template-columns: minmax(0, 1fr) auto; }
  .gl-r .gbar { grid-column: 1 / -1; grid-row: 2; }
  .res-grid, .acct-tiles, .obj-grid, .dprod-r { grid-template-columns: minmax(0, 1fr); }
  .ins-grid { grid-template-columns: minmax(0, 1fr); }
  .lever { flex-wrap: wrap; }
  .obj-says p { font-size: 18px; }
}
@media print { .band { display: none !important; } }

.bars .goal-line { position: absolute; left: 0; right: 0; border-top: 1.5px dashed rgba(191, 194, 199, .55); z-index: 2; pointer-events: none; }
.bars .goal-line em { position: absolute; left: 0; top: -21px; padding: 0 8px 0 0; background: var(--card); font-style: normal; font-size: 12px; color: var(--silver); }
a.w:hover .bars .goal-line em { background: #232328; }
.att a .ic { flex: none; }
.model-c .ax { font-size: 12.5px; }
@media (max-width: 720px) { .bars .goal-line em { display: none; } }

/* v2.1: Marketing channels and Connections */
.kstrip { display: flex; flex-wrap: wrap; padding: 6px; margin-bottom: 18px; }
.kp { flex: 1 1 160px; display: grid; gap: 3px; padding: 14px 18px; border-radius: 12px; }
.kp + .kp { border-left: 1px solid var(--line); border-radius: 0; }
.kp small { font-size: 13px; color: var(--text-3); }
.kp b { color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kp span { font-size: 12.5px; color: var(--text-3); }
.kp.good b { color: var(--good); } .kp.bad b { color: var(--bad); }
.chans { padding: 6px 20px 8px; }
.ch-r { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 130px 100px 110px 110px 120px; align-items: center; gap: 12px; padding: 12px 0; }
.ch-r + .ch-r { border-top: 1px solid var(--line); }
.ch-r.head { font-size: 13px; color: var(--text-3); padding: 12px 0 10px; }
.ch-r.tot { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-r .r { display: flex; justify-content: flex-end; text-align: right; }
.ch-r.head .r { display: block; }
.ch-n { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ch-n > span:last-child { display: grid; min-width: 0; }
.ch-n b { color: var(--text); font-weight: 600; }
.ch-n small { font-size: 12.5px; color: var(--text-3); }
.cpc { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.cpc.good { color: var(--good); } .cpc.bad { color: var(--bad); }
.bl-bar { --tc: 212, 184, 134; position: absolute; left: -8px; top: 6px; bottom: 6px; border-radius: 8px; background: rgba(var(--tc), .1); pointer-events: none; max-width: calc(100% + 16px); }
.ch-r .bl-bar { max-width: 46%; }
.src { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--card-3); color: var(--text-3); white-space: nowrap; }
.src.teal { background: rgba(67, 195, 183, .15); color: #7FDCD3; } .src.good { background: rgba(76, 195, 138, .15); color: #7DDBAE; }
.note-l { margin: 14px 2px 0; max-width: 90ch; }
.blist { display: grid; gap: 2px; }
.bl-h { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 12px; padding: 0 0 8px; font-size: 13px; color: var(--text-3); }
.bl-h span + span { text-align: right; }
.bl-r { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 12px; align-items: center; padding: 10px 0; }
.bl-r .bl-bar { left: 0; top: 3px; bottom: 3px; max-width: 70%; }
.bl-n { position: relative; padding-left: 12px; color: var(--text); font-weight: 500; }
.bl-r b { position: relative; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.conns { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.conn { display: flex; flex-direction: column; padding: 20px 22px; }
.conn-h { display: flex; align-items: center; gap: 14px; }
.conn-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(var(--tc), .16); color: rgb(var(--tc)); }
.conn-ic svg { width: 22px; height: 22px; }
.conn-h b { display: block; color: var(--text); font-size: 16px; }
.conn-h small { color: var(--text-3); font-size: 13px; }
.conn-f { display: flex; gap: 8px; margin: 16px 0 0; font-size: 13.5px; color: var(--text-2); }
.conn-f svg { width: 15px; height: 15px; color: rgb(var(--tc)); margin-top: 2px; }
.conn-help { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); }
.conn-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; }
.wp-row { display: flex; gap: 8px; width: 100%; margin-top: 10px; }
.wp-row input[type="text"] { height: 34px; }
.conn .btn[disabled] { opacity: .5; }
@media (max-width: 1000px) { .ch-r { grid-template-columns: minmax(0, 1fr) 110px 90px 90px; } .ch-r > :nth-child(6), .ch-r > :nth-child(7) { display: none; } }
@media (max-width: 720px) { .ch-r { grid-template-columns: minmax(0, 1fr) 96px; } .ch-r > :nth-child(4), .ch-r > :nth-child(5) { display: none; } .kp + .kp { border-left: 0; } }

/* ============================================================ v2.1 polish: Oversteer's friendly, cartoon-clean look in black, gold and silver */

:root { --font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
body { font-family: var(--font); letter-spacing: -.003em; }

/* A slimmer band: wordmark, module, tabs, account. A big soft icon in the corner. */
.band { overflow: hidden; padding: 12px 32px 18px; border-bottom-width: 3px; }
.band .ghost { position: absolute; right: 4%; top: -18px; width: 190px; height: 190px; color: rgba(var(--m), .14); pointer-events: none; }
.band .ghost svg { width: 100%; height: 100%; stroke-width: 1.3; }
.band-in { position: relative; }
.bar { min-height: 40px; gap: 8px; }
.band .brand { margin-right: 10px; }
.band .brand b { font-size: 18px; }
.pill-btn, .user { height: 38px; font-size: 14px; }
.user { padding: 0 10px 0 3px; }
.btabs a { height: 34px; font-size: 13.5px; }
.title-row { margin-top: 14px; align-items: center; }
.title-row h1 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.title-row p { margin-top: 3px; font-size: 13.5px; color: var(--text-2); }
.title-row .btn { height: 36px; }

/* Cartoon-clean pieces: pill buttons, solid colour icon tiles, rounder cards */
.btn { border-radius: 999px; font-weight: 700; }
.btn.sm { border-radius: 999px; }
.card { border-radius: 20px; }
.tile, .res-t, .hchip, .impact, .kp, .obj-c, .handle, .steps-l li, .dprod, .story, .win-l a { border-radius: 16px; }
.ic { width: 28px; height: 28px; border-radius: 9px; }
.ic svg { width: 15px; height: 15px; stroke-width: 2.3; }
.ic.gold { background: #D4B886; color: #17140E; }
.ic.teal { background: #43C3B7; color: #0C1A19; }
.ic.violet { background: #A08AF2; color: #15112A; }
.ic.blue { background: #6FA3E8; color: #0D1626; }
.ic.green { background: #4CC38A; color: #0B1A12; }
.ic.silver { background: #BFC2C7; color: #16171A; }
.ic.amber { background: #E2AE4F; color: #1E1608; }
.ic.red { background: #EF6B6B; color: #240C0C; }
.ic.rose { background: #E58BB0; color: #261019; }
.goal .ic, .ntab .ic { background: rgb(var(--tc)); color: #141416; }
.conn-ic, .track-ic { background: rgb(var(--tc)); color: #141416; border-radius: 14px; }
.lab { font-weight: 700; }
.h { font-weight: 700; }
.fig, .big, .ntab b, .res-t b, .at b, .kp b, .goal-n b, .hchip b { font-weight: 800; letter-spacing: -.03em; }
.pill, .chg, .src, .type, .score-p { font-weight: 700; }
.metric { padding-top: 18px; }
.w .wh .h { font-size: 15px; }
.menu { border-radius: 16px; }
.menu button, .menu a { border-radius: 10px; }
.seg, .seg button { border-radius: 999px; }
.iv, .st-box, .wi-box, .dd, input[type="text"], textarea { border-radius: 12px; }
.ntab, .at, .conn, .track, .lesson, .ins, .hero { border-radius: 22px; }

@media (max-width: 900px) { .band .ghost { display: none; } }

/* ============================================================ v2.1 frame: Planning Center layout in Black Mast colours */

/* A premium dark that is not too dark: charcoal, not black. */
:root {
  --bg: #222227;
  --card: #2A2A30;
  --card-2: #313138;
  --card-3: #3A3A42;
  --line: #36363E;
  --line-2: #45454E;
  --text-2: #BDBBB5;
  --text-3: #8E8C95;
}
body { background: #26262B; }
body.mod-gold { --m: 212, 184, 134; } body.mod-teal { --m: 67, 195, 183; } body.mod-violet { --m: 160, 138, 242; } body.mod-blue { --m: 111, 163, 232; }
body.mod-green { --m: 76, 195, 138; } body.mod-rose { --m: 229, 139, 176; } body.mod-silver { --m: 191, 194, 199; }

.frame { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(1200px 600px at 0% 0%, rgba(var(--m), .34), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(var(--m), .16), transparent 60%), #2B2B31; }
.topnav { display: flex; align-items: center; gap: 10px; padding: 12px 22px 12px 24px; }
.topnav .brand { flex: none; margin-right: 8px; color: var(--text); }
.topnav .brand b { font: 400 18px/1 "Anton", Impact, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mod-sw { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 6px; border: 0; border-radius: 12px; background: none; color: var(--text); font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.mod-sw:hover { background: rgba(255, 255, 255, .07); }
.mod-sw .ic { width: 30px; height: 30px; border-radius: 9px; }
.mod-sw .chev { width: 15px; height: 15px; color: var(--text-2); }
.topnav .btabs { margin-left: 6px; }
.topnav .btabs a { height: 34px; color: var(--text); opacity: .78; font-weight: 600; }
.topnav .btabs a:hover { opacity: 1; }
.topnav .btabs a.on { opacity: 1; background: rgba(255, 255, 255, .92); color: #18181B; }
.topnav .pill-btn { background: rgba(20, 20, 23, .35); border-color: rgba(255, 255, 255, .12); }
.topnav .user { width: 40px; height: 40px; padding: 0; justify-content: center; border: 2px solid rgba(255, 255, 255, .7); background: none; }
.topnav .user .me { width: 34px; height: 34px; }

.shell { flex: 1; display: flex; align-items: stretch; min-height: 0; }
.panel { flex: 1; min-width: 0; margin-left: 12px; background: var(--bg); border-radius: 18px 18px 0 0; box-shadow: 0 -1px 0 rgba(255, 255, 255, .05), 0 20px 60px rgba(0, 0, 0, .25); }
.panel-h { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 32px 18px; border-bottom: 1px solid var(--line); }
.ph-t { flex: 1; min-width: 240px; }
.panel-h h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -.025em; line-height: 1.2; }
.panel-h p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); }
.panel-h .btn { height: 36px; }
.panel .page { max-width: 1400px; margin: 0 auto; padding: 24px 32px 72px; }
.panel .page.narrow { max-width: 1240px; }
.rail { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 20px; }
.rail-b { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--text); background: rgba(20, 20, 23, .3); border: 1px solid rgba(255, 255, 255, .1); }
.rail-b:hover { background: rgba(20, 20, 23, .55); }
.rail-b.on { background: rgba(255, 255, 255, .92); color: #18181B; }
.rail-b svg { width: 19px; height: 19px; }
.dot-n { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #EF6B6B; box-shadow: 0 0 0 2px #2B2B31; }

/* Older header pieces are no longer used */
.band, .title-row { display: none; }

/* The report keeps its own plain page */
body.on-report { background: #2A2A2F; }

/* Card hover on the lighter panel */
a.w:hover, .track:hover { background: #2E2E35; }
.bars .goal-line em, a.w:hover .bars .goal-line em { background: transparent; }

@media (max-width: 1000px) {
  .topnav { flex-wrap: wrap; padding: 10px 14px; }
  .topnav .brand { width: 100%; }
  .acct-pill .nm { max-width: 140px; }
  .rail { display: none; }
  .panel { margin: 0 8px; }
}
@media (max-width: 720px) {
  .panel-h { padding: 18px 16px 14px; }
  .panel .page { padding: 16px 14px 64px; }
  .panel { margin: 0; border-radius: 16px 16px 0 0; }
}
@media print { .topnav, .rail, .panel-h { display: none !important; } .panel { margin: 0; box-shadow: none; } }

/* alignment pass */
body { letter-spacing: 0; word-spacing: .05em; }
.topnav { padding-right: 12px; }
.bars .goal-line em { left: auto; right: 0; top: -20px; padding: 2px 8px; border-radius: 999px; background: var(--card-2) !important; }
.bl-h { padding-left: 12px; }
.bl-h span:first-child { padding-left: 0; }
.att li + li a { border-top: 0; }

/* menus: icons, avatars and dots keep their size; only the text column stretches */
.menu .ic, .menu .av, .menu .dot, .menu svg { flex: none !important; }
.menu .ic svg { color: inherit !important; width: 15px; height: 15px; }
.menu .mr-t, .menu .ar-t { flex: 1 1 auto !important; min-width: 0; }
.menu .mr-t small, .menu .ar-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .mod-row, .menu .acct-row { gap: 12px; padding: 8px 10px; }
.menu .acct-row .dot { width: 9px; height: 9px; margin-left: 6px; }
.menu .m-head { padding: 10px 10px 4px; font-weight: 600; }

/* Connections: real logos, live fields */
.conn-ic { position: relative; background: #fff !important; overflow: hidden; }
.conn-ic img { position: absolute; inset: 8px; width: 28px; height: 28px; object-fit: contain; z-index: 1; }
.conn-ic svg { color: #2A2A30; }
.conn-h { align-items: flex-start; }
.conn-h > span:nth-child(2) { flex: 1; min-width: 0; }
.conn-h .src { flex: none; margin-top: 2px; }
.conn.is-on { border-color: rgba(76, 195, 138, .45); }
.cfs { display: grid; gap: 10px; margin-top: 14px; }
.cf { display: grid; gap: 5px; }
.cf span { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.cf input { height: 38px; }
input[type="password"] { width: 100%; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: inherit; letter-spacing: .1em; }
input[type="password"]:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .18); outline: none; }
.conn-a { justify-content: flex-end; }

/* Wordmark with the tagline underneath, in the brand voice face */
.topnav .brand { display: grid; gap: 3px; line-height: 1; }
.tagline { font: italic 400 15px/1 "Instrument Serif", Georgia, serif; color: var(--gold); letter-spacing: .01em; white-space: nowrap; }

/* Seats and team */
.seat-use { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 18px 0 8px; padding: 14px 16px; border-radius: 16px; background: var(--card-2); }
.seat-use b { color: var(--text); font-size: 16px; }
.people { display: grid; gap: 8px; margin: 14px 0; }
.person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.person .av { width: 36px; height: 36px; border-radius: 50%; font-size: 12px; }
.p-t { flex: 1; min-width: 0; display: grid; }
.p-t b { color: var(--text); font-weight: 700; }
.p-t small { color: var(--text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-access { display: grid; justify-items: end; gap: 1px; text-align: right; }
.p-access .p-role { font-weight: 700; font-size: 13px; }
.p-access small { color: var(--text-3); font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-role.t-admin { color: var(--gold); } .p-role.t-editor { color: #7FDCD3; } .p-role.t-viewer { color: var(--silver); }
.m-sp { display: inline-block; width: 15px; height: 15px; flex: none; }
.as-btn { border: 0; cursor: pointer; }
.sm-pill { height: 32px; padding: 0 12px; font-size: 13px; background: var(--card-2) !important; border-color: var(--line-2) !important; }
.sm-pill svg { width: 15px; height: 15px; }
.sm-pill[disabled] { opacity: .55; cursor: default; }
.add-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-top: 6px; }
.add-row .btn[disabled] { opacity: .5; }
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 6px; }
.role { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); }
.role b { color: var(--text); }
.role span { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.m-sub { margin-left: 6px; color: var(--text-3); font-size: 12px; }
.user.as { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .35); }
@media (max-width: 1000px) { .roles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .add-row, .seat-use, .roles { grid-template-columns: minmax(0, 1fr); } .person { flex-wrap: wrap; } }

/* ============================================================ Sign in and account setup pages */
.auth-body { min-height: 100vh; margin: 0; background: radial-gradient(1100px 600px at 0% 0%, rgba(212, 184, 134, .22), transparent 60%), radial-gradient(900px 600px at 100% 100%, rgba(191, 194, 199, .1), transparent 60%), #1C1C20; color: var(--text-2); font-family: var(--font); }
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 40px 32px; }
.auth-side img { display: block; width: 140px; height: 140px; border-radius: 18px; margin-bottom: 22px; }
.auth-side h1 { margin: 0; font: 400 52px/0.92 "Anton", Impact, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.auth-tag { margin: 12px 0 0; font: italic 400 26px/1.2 "Instrument Serif", Georgia, serif; color: var(--gold); }
.auth-points { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; max-width: 46ch; }
.auth-points li { display: flex; gap: 12px; align-items: baseline; color: var(--text-2); font-size: 15.5px; }
.auth-points span { width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--gold); transform: translateY(-1px); }
.auth-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 10px; }
.auth-steps li { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-weight: 600; }
.auth-steps li span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--card-2); font-size: 13px; }
.auth-steps li.on { color: var(--text); }
.auth-steps li.on span { background: var(--gold); color: #141416; }
.auth-steps li.done span { background: rgba(76, 195, 138, .2); color: var(--good); }
.auth-card { padding: 34px 34px 28px; border-radius: 24px; background: var(--bg); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.auth-form h2 { margin: 0; color: var(--text); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.auth-form > p.muted, .step > p.muted { margin: 6px 0 22px; }
.auth-form .field > span { justify-content: space-between; }
.auth-form .field > span .link { font-size: 12.5px; padding: 0; }
.auth-form input { height: 44px; }
.btn.wide { width: 100%; height: 46px; margin-top: 6px; }
.or { position: relative; margin: 18px 0 12px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.or span { position: relative; padding: 0 12px; background: var(--bg); }
.auth-foot { margin: 20px 0 0; text-align: center; font-size: 14px; }
.auth-foot a { color: var(--gold); font-weight: 700; }
.auth-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--card-2); font-size: 13.5px; color: var(--text); }
.auth-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.plans { display: grid; gap: 12px; margin-bottom: 16px; }
.plan { display: grid; gap: 4px; text-align: left; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--text-2); }
.plan b { color: var(--text); font-size: 16px; }
.plan .price { color: var(--text); font-size: 22px; font-weight: 800; }
.plan .price small { font-size: 13px; font-weight: 600; color: var(--text-3); }
.plan.on { border-color: var(--gold); background: rgba(212, 184, 134, .08); box-shadow: 0 0 0 3px rgba(212, 184, 134, .15); }
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 16px; }
  .auth-side { text-align: center; }
  .auth-side img { width: 96px; height: 96px; margin: 0 auto 14px; }
  .auth-side h1 { font-size: 36px; }
  .auth-tag { font-size: 21px; }
  .auth-points, .auth-steps { display: none; }
  .auth-card { padding: 24px 20px; }
}

.tab-n { margin-left: 7px; min-width: 20px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--gold); color: #141416; font: 800 11px/1 var(--font); font-style: normal; }
.btabs a.on .tab-n { background: #141416; color: var(--gold); }

/* Notifications */
button.rail-b { padding: 0; cursor: pointer; font: inherit; }
.dot-n { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: #EF6B6B; color: #fff; font: 800 10.5px/1 var(--font); font-style: normal; box-shadow: 0 0 0 2px #2B2B31; }
.n-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.n-head b { color: var(--text); font-size: 15px; }
.n-head .link { font-size: 12.5px; color: var(--gold); padding: 0; }
.menu .n-row { align-items: flex-start; white-space: normal; }
.menu .n-row .mr-t b { font-weight: 600; font-size: 13.5px; line-height: 1.35; white-space: normal; }
.menu .n-row.unread .mr-t b { color: var(--text); font-weight: 700; }
.menu .n-row:not(.unread) .mr-t b { color: var(--text-2); }
.n-dot { width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--gold); }
.show-m-only { display: none; position: relative; }
@media (max-width: 1000px) { .show-m-only { display: inline-grid; } .show-m-only .dot-n { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 4px; right: 4px; } }

/* Reports */
.reps { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.rep { display: flex; flex-direction: column; padding: 20px 22px; }
.rep-h { display: flex; align-items: center; gap: 12px; }
.rep-h b { color: var(--text); font-size: 16.5px; }
.rep p { margin: 10px 0 18px; color: var(--text-2); }
.rep-a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* Connections as a list inside Settings */
.conn-list { display: grid; gap: 8px; margin-top: 14px; }
.conn-r { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.conn-r.is-on { border-color: rgba(76, 195, 138, .4); }
.conn-r .conn-ic { width: 44px; height: 44px; }
.cr-t { flex: 1; min-width: 0; display: grid; }
.cr-t b { color: var(--text); }
.cr-t small { color: var(--text-3); font-size: 12.5px; }
.cr-a { display: flex; align-items: center; gap: 12px; flex: none; }
.conn-ok { display: inline-flex; align-items: center; gap: 6px; color: #7DDBAE; font-weight: 700; font-size: 13.5px; }
.conn-ok svg { width: 16px; height: 16px; stroke-width: 2.6; }
.drawer-h .conn-ic { width: 44px; height: 44px; flex: none; }

/* Help: Ask, Guides */
.ask { display: grid; gap: 16px; }
.chat { display: grid; gap: 14px; min-height: 160px; }
.ask-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.ask-empty .ic { width: 44px; height: 44px; border-radius: 14px; }
.ask-empty .ic svg { width: 22px; height: 22px; }
.ask-empty b { color: var(--text); font-size: 18px; }
.ask-empty p { margin: 0; max-width: 52ch; }
.msg.me { justify-self: end; max-width: 70%; }
.msg.me p { margin: 0; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--gold); color: #141416; font-weight: 600; }
.msg.bot { display: flex; gap: 12px; max-width: 86%; }
.bot-av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card-3); color: var(--gold); }
.bot-b { padding: 14px 18px; border-radius: 4px 18px 18px 18px; background: var(--card); border: 1px solid var(--line); color: var(--text); line-height: 1.6; }
.bot-b p { margin: 0 0 8px; }
.bot-b ul { margin: 0 0 8px; padding-left: 18px; color: var(--text-2); }
.srcs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.srcs > span { font-size: 12.5px; color: var(--text-3); margin-right: 2px; }
.src-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--text); }
.src-chip:hover { border-color: var(--gold); }
.src-chip svg { width: 13px; height: 13px; color: var(--gold); }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.sugg .preset { border-color: rgba(212, 184, 134, .35); background: rgba(212, 184, 134, .08); font-weight: 600; }
.ask-box { position: sticky; bottom: 12px; display: flex; gap: 10px; padding: 10px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.ask-box input[type="text"] { flex: 1; height: 44px; border: 0; background: none; box-shadow: none; padding: 0 12px; font-size: 15px; }
.ask-box .btn { height: 44px; }
.guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.guide-c { display: flex; flex-direction: column; padding: 20px 22px; }
.guide-c b { color: var(--text); font-size: 16.5px; margin-bottom: 6px; }
.guide-c p { margin: 6px 0 0; color: var(--text-2); }
.guide-c .learn-link .go { transform: rotate(-90deg); }
@media (max-width: 720px) { .msg.me, .msg.bot { max-width: 100%; } .conn-r { flex-wrap: wrap; } .cr-a { width: 100%; justify-content: flex-end; } }

/* Ask: saved-chat rail and the thinking ship */
.help-ask { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 22px; align-items: start; }
.chat-side { position: sticky; top: 8px; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.cs-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cs-h b { color: var(--text); font-size: 14px; }
.cs-new { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: 600 12.5px var(--font); cursor: pointer; }
.cs-new:hover { background: var(--card-3); }
.cs-new svg { width: 13px; height: 13px; }
.cs-list { display: grid; gap: 2px; max-height: 62vh; overflow: auto; }
.cs-row { display: flex; align-items: center; border-radius: 9px; }
.cs-row:hover { background: var(--card-2); }
.cs-row.on { background: var(--card-3); }
.cs-open { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 9px 10px; text-align: left; background: none; border: 0; cursor: pointer; }
.cs-open b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; font-weight: 600; }
.cs-open small { color: var(--text-3); font-size: 11.5px; }
.cs-x { flex: none; width: 28px; height: 28px; margin-right: 4px; display: grid; place-items: center; border: 0; background: none; color: var(--text-3); border-radius: 7px; opacity: 0; cursor: pointer; }
.cs-row:hover .cs-x, .cs-row.on .cs-x { opacity: 1; }
.cs-x:hover { color: var(--bad); background: rgba(239, 107, 107, .12); }
.cs-x svg { width: 14px; height: 14px; }
.cs-empty { margin: 4px 2px; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.thinking { display: inline-flex; align-items: center; gap: 10px; color: var(--text-3); }
.thinking em { font-style: normal; font-size: 13.5px; }
.think-ship { transform-origin: 50% 85%; animation: sail 1.7s ease-in-out infinite; }
@keyframes sail { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(9deg) translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .think-ship { animation: none; } }
@media (max-width: 900px) { .help-ask { grid-template-columns: minmax(0, 1fr); } .chat-side { position: static; order: -1; } }

/* Companies */
.ct { display: grid; }
.ct b { color: var(--text); font-weight: 600; }
.ct small { color: var(--text-3); font-size: 12.5px; }
.fee { display: block; margin-top: 4px; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.vits { display: flex; gap: 6px; flex-wrap: wrap; }
.vit { display: grid; min-width: 64px; padding: 5px 9px; border-radius: 10px; background: var(--card-2); }
.vit small { font-size: 11px; color: var(--text-3); }
.vit b { font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.vit.good b { color: #7DDBAE; } .vit.fair b { color: #F0C77E; } .vit.bad b { color: #F49A9A; }
.tbl tr[data-company] { cursor: pointer; }
.co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.co { padding: 20px 22px; }
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; }
.kv + .kv { border-top: 1px solid var(--line); }
.kv > span { color: var(--text-2); font-size: 14px; }
.kv input[type="text"] { height: 38px; }
.kv b { color: var(--text); }
.vt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.vt { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line); }
.vt:hover { border-color: var(--line-2); }
.vt small { font-size: 12.5px; color: var(--text-3); }
.vt b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.vt.good b { color: var(--good); } .vt.fair b { color: var(--warn); } .vt.bad b { color: var(--bad); }
.note-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.note-add textarea { min-height: 46px; }
.inotes { display: grid; gap: 10px; max-height: 420px; overflow-y: auto; }
.inote { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); }
.inote .av { width: 32px; height: 32px; border-radius: 50%; font-size: 11px; }
.inote > div { flex: 1; min-width: 0; }
.in-h { display: flex; align-items: center; gap: 8px; }
.in-h b { color: var(--text); }
.in-h small { color: var(--text-3); font-size: 12px; }
.in-h .icon-btn { margin-left: auto; }
.inote p { margin: 4px 0 0; color: var(--text); white-space: pre-wrap; }
/* Seats: access and apps per person */
.type.t-admin { background: rgba(212, 184, 134, .15); color: var(--gold); }
.type.t-editor { background: rgba(67, 195, 183, .15); color: #7FDCD3; }
.type.t-viewer { background: rgba(191, 194, 199, .14); color: var(--silver); }
.seat-apps { display: flex; gap: 4px; flex-wrap: wrap; }
.app-t { height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text-3); font: 600 12px var(--font); display: inline-flex; align-items: center; }
.app-t.on { background: rgba(255, 255, 255, .9); border-color: transparent; color: #18181B; }
@media (max-width: 1100px) { .co-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 0; } .vits .vit:nth-child(n+3) { display: none; } }

/* Number tiles: shaded in their own colour */
.ntab { background: linear-gradient(160deg, rgba(var(--tc), .16), rgba(var(--tc), .05) 70%), var(--card); border-color: rgba(var(--tc), .22); }
.ntab:hover { border-color: rgba(var(--tc), .55); }
.ntab.on { background: linear-gradient(160deg, rgba(var(--tc), .32), rgba(var(--tc), .1) 70%), var(--card); border-color: rgba(var(--tc), .8); box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 0 0 1px rgba(var(--tc), .4) inset; }
.ntab-s { color: var(--text-2); }

/* Save bar */
.savebar { position: fixed; left: 50%; bottom: 20px; z-index: 75; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: min(680px, calc(100vw - 24px)); padding: 10px 10px 10px 18px; border-radius: 999px; background: #34343B; border: 1px solid var(--gold); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); animation: pop .15s ease; }
.savebar > span:first-child { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; }
.savebar svg { color: var(--gold); }
.toast { bottom: 90px; }

/* Home: a warm summary card and shaded number cards */
.home-hero { display: flex; align-items: center; gap: 22px; padding: 20px 24px; margin-bottom: 18px; background: radial-gradient(140% 120% at 0% 0%, rgba(212, 184, 134, .22), rgba(212, 184, 134, .05) 60%), var(--card); border-color: rgba(212, 184, 134, .3); }
.home-hero .ring { width: 78px; height: 78px; --tc: 212, 184, 134; }
.hh-t { flex: 1; min-width: 0; }
.hh-t b { color: var(--text); font-size: 19px; font-weight: 800; }
.hh-t p { margin: 4px 0 0; color: var(--text-2); }
.metric { --tc: 212, 184, 134; background: linear-gradient(160deg, rgba(var(--tc), .15), rgba(var(--tc), .04) 70%), var(--card); border-color: rgba(var(--tc), .22); }
.metric[data-wid="cash"] { --tc: 76, 195, 138; } .metric[data-wid="churn"] { --tc: 160, 138, 242; } .metric[data-wid="close"] { --tc: 111, 163, 232; }
a.metric:hover { background: linear-gradient(160deg, rgba(var(--tc), .24), rgba(var(--tc), .06) 70%), var(--card); border-color: rgba(var(--tc), .5); }
[data-wid="goals"] { background: linear-gradient(160deg, rgba(212, 184, 134, .1), transparent 60%), var(--card); }
[data-wid="offers"] { background: linear-gradient(160deg, rgba(229, 139, 176, .1), transparent 60%), var(--card); }
[data-wid="mkt"] { background: linear-gradient(160deg, rgba(67, 195, 183, .1), transparent 60%), var(--card); }
[data-wid="attention"] { background: linear-gradient(160deg, rgba(226, 174, 79, .08), transparent 60%), var(--card); }
@media (max-width: 720px) { .home-hero { flex-wrap: wrap; } .savebar { border-radius: 18px; flex-wrap: wrap; } }

/* Trend chart: coloured bars, axis and baseline */
.chart2 { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; flex: 1; }
.yax { position: relative; margin: 26px 0 26px; }
.yax span { position: absolute; right: 0; transform: translateY(50%); font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bars .col i { background: linear-gradient(180deg, #F0DDB5, #C9A86C); }
.bars .col.c-goal i { background: linear-gradient(180deg, #7FE0B0, #3FA874); }
.bars .col.c-on i { background: linear-gradient(180deg, #F0DDB5, #C9A86C); }
.bars .col.c-below i { background: linear-gradient(180deg, #F5B3B3, #D86666); }
.bars .col span { color: var(--text); }
.bars .std-line { position: absolute; left: 0; right: 0; border-top: 1.5px dashed rgba(212, 184, 134, .6); z-index: 2; pointer-events: none; }
.bars .goal-line { border-top-color: rgba(76, 195, 138, .75); }
.bars .base { position: absolute; left: 0; right: 0; bottom: 26px; border-top: 1.5px solid var(--line-2); }
.lg2 { margin-top: 10px; flex-wrap: wrap; }
.lg2 i { width: 12px; height: 12px; border-radius: 3px; }
.lg2 i.c-goal { background: #4CC38A; } .lg2 i.c-on { background: #D4B886; } .lg2 i.c-below { background: #EF6B6B; }
/* Glossary groups */
.gl-g { margin-bottom: 26px; }
.gl-g h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--text); font-size: 17px; font-weight: 800; }
.gl-g .gl-c { border-left: 3px solid rgb(var(--tc)); }

/* View bar: time period and Standard / Advanced */
.viewbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.viewbar .seg button { height: 32px; padding: 0 14px; }
.adv { margin-top: 18px; }
.kstrip.in { margin: 6px 0 14px; padding: 0; border: 0; background: none; }
.kstrip.in .kp { background: var(--card-2); border-radius: 14px; }
.kstrip.in .kp + .kp { border-left: 0; border-radius: 14px; margin-left: 8px; }
.kp.good b { color: var(--good); } .kp.bad b { color: var(--bad); }
.hist .you { stroke-width: 3; }
.drivers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.drv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); }
.drv span { color: var(--text-2); }
.drv b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adv-t { display: grid; }
.at-r { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; }
.at-r + .at-r { border-top: 1px solid var(--line); }
.at-r.head { font-size: 13px; color: var(--text-3); }
.at-r .r { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.at-r.head .r { color: var(--text-3); }
.share2 { position: relative; display: block; height: 22px; border-radius: 6px; background: var(--card-2); overflow: hidden; }
.share2 i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(212, 184, 134, .45); }
.share2.c i { background: rgba(67, 195, 183, .5); }
.share2 em { position: relative; padding-left: 8px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--text); line-height: 22px; }
@media (max-width: 900px) { .at-r { grid-template-columns: minmax(0, 1fr) 90px 90px; } .at-r > :nth-child(n+4) { display: none; } }

/* Ship in the top left */
.topnav .brand { display: flex; align-items: center; gap: 10px; }
.topnav .brand .ship { width: 40px; height: 40px; flex: none; }
.topnav .brand .bw { display: grid; gap: 3px; }
/* Connections grouped, with how-to hints for imports */
.conn-g { margin: 22px 0 0; color: var(--text); font-size: 15px; font-weight: 800; }
.cr-h { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--text-3); }
@media (max-width: 720px) { .topnav .brand .ship { width: 32px; height: 32px; } }

.sn-g { display: grid; gap: 2px; margin-bottom: 14px; }
.sn-g > b { padding: 6px 12px 4px; color: var(--text); font-size: 13.5px; font-weight: 800; }
.srow-c input[type="text"] { max-width: 340px; }

/* Hover: everything shades in its own colour (gold when it has none) */
.card, .conn-r, .person, .kv, .vt, .rep, .guide-c, .gl-c, .hchip, .res-t, .menu a, .menu button { --tc: 212, 184, 134; }
a.card:hover, .rep:hover, .guide-c:hover, .gl-c:hover, .conn-r:hover, .person:hover, .vt:hover, .hchip:hover, .tbl tbody tr:hover td {
  background: linear-gradient(160deg, rgba(var(--tc), .14), rgba(var(--tc), .04) 70%), var(--card) !important; border-color: rgba(var(--tc), .5); transition: background .15s, border-color .15s; }
.tbl tbody tr:hover td { background: rgba(212, 184, 134, .07) !important; }
.menu .mod-row:hover, .menu .mod-row:focus-visible { background: rgba(var(--tc), .16) !important; }
.menu .mod-row.on { background: rgba(var(--tc), .1); }
.btabs a:hover:not(.on) { background: rgba(255, 255, 255, .1); }
.ntab:hover { background: linear-gradient(160deg, rgba(var(--tc), .26), rgba(var(--tc), .08) 70%), var(--card); }
.vt.good:hover { --tc: 76, 195, 138; } .vt.fair:hover { --tc: 226, 174, 79; } .vt.bad:hover { --tc: 239, 107, 107; }

/* Custom widgets */
.cw-card { background: linear-gradient(160deg, rgba(var(--tc), .12), transparent 60%), var(--card); }
.custom .cw-card .cw-edit { pointer-events: auto; }
.cw-num { display: flex; align-items: baseline; gap: 12px; flex: 1; padding: 10px 0; }
.cw-num b { font-size: 44px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bars.cwb { min-height: 180px; }
.pie-w { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pie { width: 150px; height: 150px; flex: none; }
.pie-l { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; display: grid; gap: 6px; }
.pie-l li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 40px; align-items: center; gap: 8px; font-size: 13.5px; }
.pie-l i { width: 12px; height: 12px; border-radius: 3px; }
.pie-l span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-l b { color: var(--text); font-variant-numeric: tabular-nums; }
.pie-l small { color: var(--text-3); text-align: right; }
.bl-r.cw { grid-template-columns: minmax(0, 1fr) 0 110px; }
.cw-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-o { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(var(--tc), .35); background: rgba(var(--tc), .06); color: var(--text-2); font: 600 13px var(--font); }
.cw-o:hover { background: rgba(var(--tc), .16); color: var(--text); }
.cw-o.on { background: rgba(var(--tc), .28); border-color: rgb(var(--tc)); color: var(--text); }
.cw-prev { grid-template-columns: minmax(0, 1fr); }
.cw-prev .w { grid-column: span 1 !important; }
.drawer .seg { flex-wrap: wrap; }

/* Finance */
.fee-s { display: block; font-size: 12px; color: var(--text-3); }
.tot-fee { font-size: 18px; } .tot-fee small { color: var(--text-3); font-weight: 600; }
.fin-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; }
.fin-rows { display: grid; gap: 4px; margin-top: 6px; }
.fin-r { display: grid; grid-template-columns: 220px minmax(0, 1fr) 110px; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 12px; }
.fin-r:hover { background: rgba(76, 195, 138, .08); }
.fr-n { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fr-n b { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-bar { display: flex; height: 14px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.fin-bar i { display: block; height: 100%; }
.fp { background: #BFC2C7; } .fc { background: #D4B886; }
.legend i.fp, .legend i.fc { width: 12px; height: 12px; border-radius: 3px; }
.fr-v { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .fin-grid { grid-template-columns: minmax(0, 1fr); } .fin-r { grid-template-columns: minmax(0, 1fr) 90px; } .fin-bar { grid-column: 1 / -1; grid-row: 2; } }
/* People: one clean list with dividers */
.people { gap: 0; border-top: 1px solid var(--line); }
.person { padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.person:hover { background: rgba(212, 184, 134, .05) !important; border-color: var(--line) !important; }
.seat-use { background: none; padding: 6px 0; }

/* Help chat, in the style of modern AI chat apps */
.chat-home { display: grid; justify-items: center; gap: 12px; max-width: 760px; margin: 6vh auto 0; text-align: center; }
.ch-ship { width: 64px; height: 64px; }
.chat-home h2 { margin: 6px 0 0; color: var(--text); font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.chat-home > p { margin: 0 0 10px; color: var(--text-2); }
.composer { position: relative; display: flex; align-items: flex-end; gap: 8px; width: 100%; padding: 10px 10px 10px 18px; border-radius: 26px; background: var(--card-2); border: 1px solid var(--line-2); box-shadow: 0 12px 34px rgba(0, 0, 0, .28); }
.composer:focus-within { border-color: rgba(212, 184, 134, .6); }
.composer textarea { flex: 1; min-height: 28px; max-height: 200px; padding: 8px 0; border: 0; background: none; box-shadow: none !important; resize: none; color: var(--text); font: 400 16px/1.5 var(--font); }
.send { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--gold); color: #141416; transition: opacity .12s; }
.send:disabled { opacity: .4; cursor: default; }
.send:hover { filter: brightness(1.08); }
.send svg { width: 18px; height: 18px; }
.chat-home .sugg { justify-content: center; margin-top: 6px; }
.chip-q { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text-2); font: 600 13.5px var(--font); }
.chip-q:hover { background: rgba(212, 184, 134, .1); border-color: rgba(212, 184, 134, .5); color: var(--text); }
.chat-wrap { max-width: 780px; margin: 0 auto; }
.chat { gap: 22px; padding-bottom: 150px; min-height: 0; }
.msg.me { max-width: 78%; }
.msg.me p { background: var(--card-3); color: var(--text); font-weight: 500; border-radius: 22px; padding: 12px 18px; }
.msg.bot { max-width: 100%; gap: 14px; }
.bot-av { width: 34px; height: 34px; background: rgba(212, 184, 134, .14); }
.bot-av img { width: 22px; height: 22px; }
.bot-b { padding: 4px 0 0; background: none; border: 0; font-size: 15.5px; line-height: 1.7; }
.bot-b b { color: var(--text); }
.bot-b ul { color: var(--text); padding-left: 20px; }
.bot-b li { margin-bottom: 4px; }
.composer-dock { position: sticky; bottom: 0; padding: 14px 0 18px; background: linear-gradient(180deg, transparent, var(--bg) 28%); }
.fine { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--text-3); }
.typing { display: inline-flex; gap: 5px; padding: 10px 0; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); animation: blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ============================================================ review fixes */
/* Insights: two equal halves, natural heights, readable grey */
.ins-grid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); align-items: start; }
.win-l small { color: var(--text-2); }
/* one content width on every page */
.panel .page.narrow { max-width: 1400px; }
.guide { margin: 0 auto; }
/* forecast steppers line up */
.st-box { width: 118px; justify-content: flex-end; }
.st-box input[type="text"] { width: 100%; }
/* glossary: shaded cards instead of a curved edge */
.gl-g .gl-c { border-left: 1px solid var(--line); background: linear-gradient(160deg, rgba(var(--tc), .12), transparent 70%), var(--card); }
/* objection cards match */
.obj-c.real { border: 0; }
.lesson .story, .lesson .idea, .lesson .steps-l, .lesson .say, .lesson .obj-says, .lesson .obj-grid, .lesson .handles, .lesson .example { max-width: 900px; }
/* People: chips in the dark style, gold when on */
.app-t.on { background: rgba(212, 184, 134, .16); border-color: rgba(212, 184, 134, .55); color: var(--gold); }
.sm-pill { gap: 6px; }
/* sign-in polish */
input[type="password"]::placeholder { letter-spacing: normal; }
.auth-nav .btn.primary { flex: 1; height: 46px; }
/* reports never break pills or ratios */
.r-st, .r-tbl td.r, .r-tbl td.b { white-space: nowrap; }
/* save bar holds together at any width */
.savebar .btn { white-space: nowrap; flex: none; }
.savebar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* neutral change badge */
.chg.flat { background: rgba(191, 194, 199, .14); color: var(--silver); }
/* inline numbers sit next to their currency sign */
.iv input[type="text"] { field-sizing: content; min-width: 3ch; }
.iv { justify-content: flex-end; }
/* channel logos */
.ch-logo { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #fff; }
.ch-logo img { width: 18px; height: 18px; }
/* five number tiles, a finished summary */
.ntabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ntab .ntab-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vt-s { font-size: 12px; color: var(--text-2); }
.done-card { max-width: 1100px; }
/* forecast chips and presets in gold (Forecast lives in Home) */
.preset { border-color: rgba(212, 184, 134, .35); background: rgba(212, 184, 134, .08); }
.preset:hover { background: rgba(212, 184, 134, .18); }
.preset svg { color: var(--gold); }

@media (max-width: 1100px) { .ntabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vt-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .set-nav { display: block; }
  .sn-g { display: flex; flex-wrap: wrap; gap: 4px; }
  .sn-g > b { width: 100%; }
}
@media (max-width: 720px) {
  .home-hero { flex-direction: column; align-items: flex-start; }
  .hh-t { width: 100%; }
  .home-hero .btn { width: 100%; }
  .ntabs, .vt-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Marketing: each channel becomes a small card */
  .ch-r, .ch-r.tot { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 0; }
  .ch-r.head { display: none; }
  .ch-r > :nth-child(n) { display: flex !important; }
  .ch-n { grid-column: 1 / -1; }
  .ch-r .r { justify-content: space-between; align-items: center; text-align: left; }
  .ch-r .r::before { content: attr(data-l); color: var(--text-3); font-size: 12.5px; }
  .ch-r.tot > span:first-child { grid-column: 1 / -1; }
  /* dashboard channel list: bar under the name */
  .bl-r { grid-template-columns: minmax(0, 1fr) auto auto; }
  .bl-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bl-r .bl-bar { top: auto; bottom: 0; height: 3px; }
  /* header never wraps the avatar */
  .mod-sw span { display: none; }
  .topnav { gap: 6px; }
  /* team rows and offer headers wrap cleanly */
  .person .p-t { flex: 1 1 calc(100% - 60px); }
  .person .seat-apps, .person .type, .person .sm-pill { margin-left: 48px; }
  .offer-h { flex-wrap: wrap; }
  .offer-h .nm { flex-basis: 100%; }
  /* charts readable at phone width */
  .model-c .ax, .hist .ax { font-size: 26px; }
  .model-c .lbl, .model-c .lbl2 { font-size: 26px; }
  .curve .ax { font-size: 18px; }
  .curve .lbl, .curve .lbl2 { font-size: 20px; }
  .zbar .z, .bandbar .z { font-size: 10.5px; }
  .hchip { flex: 1 1 140px; }
  .savebar { left: 12px; right: 12px; transform: none; width: auto; border-radius: 18px; }
  .savebar > span:first-child { flex: 1 1 100%; }
}
@media (max-width: 720px) { .ins-grid, .reps, .conns, .guides, .gloss, .tracks, .goals { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .mod-sw span { display: revert; } .mod-sw > span:not(.ic) { display: none; } .ch-r.tot > span:last-child { display: none !important; } }

/* v2.1.1 Home: five number cards in a row, and a ring with one arc per number */
.board { grid-template-columns: repeat(60, minmax(0, 1fr)); }
.w { grid-column: span 30; }
.w.s3 { grid-column: span 15; } .w.s4 { grid-column: span 20; } .w.s6 { grid-column: span 30; } .w.s8 { grid-column: span 40; } .w.s12 { grid-column: span 60; }
.w.metric { grid-column: span 12; }
.add-w { grid-column: span 15; }
.metric .goal-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1280px) {
  .board { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .w, .w.s3, .w.s4, .w.s6 { grid-column: span 6; } .w.s8, .w.s12, .w[data-wid="attention"] { grid-column: span 12; }
  .w.metric { grid-column: span 4; } .add-w { grid-column: span 6; }
}
@media (max-width: 720px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .board > * { grid-column: 1 / -1 !important; }
}
.ring.count .n { font: 800 24px var(--font); fill: var(--text); }
.ring.count .of { font: 600 11px var(--font); fill: var(--text-3); }
.metric[data-wid="weak"] .goal-t { white-space: normal; overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* v2.1.1 marketing: add, remove and style channels */
.ch-r .ch-name { width: 100%; max-width: 260px; height: 30px; padding: 0 8px; margin: -4px 0 2px -8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-weight: 700; }
.ch-r .ch-name:hover { border-color: var(--line-2); }
.ch-r .ch-name:focus { outline: none; border-color: rgba(var(--tc), .6); background: var(--card-2); }
.ch-r .ch-name::placeholder { color: var(--text-3); font-weight: 500; }
.ch-pick { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 9px; flex: none; }
.ch-pick:hover .ic, .ch-pick:focus-visible .ic { box-shadow: 0 0 0 2px rgba(var(--tc), .55); }
.ch-r .r[data-l="Source"] { gap: 6px; align-items: center; }
.ch-x { opacity: 0; transition: opacity .15s; color: var(--text-3); }
.ch-r:hover .ch-x, .ch-x:focus-visible { opacity: 1; }
.ch-x:hover { color: var(--bad); background: rgba(239, 107, 107, .12); }
@media (hover: none) { .ch-x { opacity: 1; } }
.ch-add { padding: 12px 0; border-top: 1px solid var(--line); }
.ch-empty { padding: 28px 0; text-align: center; border-top: 1px solid var(--line); }
.ch-empty p { margin: 6px auto 0; max-width: 420px; color: var(--text-2); }
.menu .pick { padding: 8px 10px 10px; }
.menu .pick small { display: block; color: var(--text-3); font-size: 12.5px; margin: 6px 2px; }
.menu .pick-g { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.menu .pick-g button { display: grid; place-items: center; padding: 4px; border: 0; border-radius: 9px; background: none; cursor: pointer; }
.menu .pick-g button:hover { background: var(--card-3); }
.menu .pick-g button.on { box-shadow: inset 0 0 0 2px var(--line-2); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

/* v2.1.1 Home summary leads the page */
.home-hero { gap: 30px; padding: 28px 32px; margin-bottom: 22px; }
.home-hero .ring { width: 116px; height: 116px; }
.home-hero .ring .rt, .home-hero .ring .rv { stroke-width: 7; }
.home-hero .ring.count .n { font-size: 26px; }
.home-hero .ring.count .of { font-size: 10.5px; }
.hh-t h2 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; color: var(--text); }
.hh-t .hh-move { margin: 10px 0 0; font-size: 16px; color: var(--text-2); }
.hh-t .hh-move b { color: var(--gold-hi); font-weight: 700; }
.hh-t .hh-why { margin: 4px 0 0; max-width: 62ch; color: var(--text-3); font-size: 14.5px; line-height: 1.45; }
.home-hero .btn { height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 720px) { .home-hero { padding: 22px; gap: 16px; } .home-hero .ring { width: 92px; height: 92px; } .hh-t h2 { font-size: 22px; } }

/* v2.1.1 Companies vitals stay on one line */
.vits { display: grid; grid-template-columns: repeat(4, minmax(64px, auto)); flex-wrap: nowrap; }
@media (max-width: 720px) { .vits { grid-template-columns: repeat(2, minmax(64px, auto)); } }

/* v2.1.1 billing and the quiet offer of help */
.bill-in { width: min(420px, 100%); }
.srow-c .btn + .btn { margin-left: 8px; }
/* v2.1.1 linked CAC */
.btn.ghost-ok { cursor: default; background: rgba(76, 195, 138, .12); color: #7DDBAE; border-color: transparent; }
.field b { display: block; padding: 10px 0; font-size: 16px; color: var(--text); }

/* v2.1.1 tabs never disappear: under 1280px they move to their own row */
@media (max-width: 1280px) {
  .topnav { flex-wrap: wrap; row-gap: 8px; }
  .topnav .btabs { display: flex; order: 10; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .topnav .btabs::-webkit-scrollbar { display: none; }
}

/* v2.1.1 trial and paid features */
.tab-lock { width: 13px; height: 13px; margin-left: 6px; opacity: .7; }
.locked-p { display: grid; justify-items: center; gap: 12px; padding: 48px 32px; text-align: center; }
.locked-p .ic { width: 52px; height: 52px; border-radius: 16px; }
.locked-p .ic .i { width: 24px; height: 24px; }
.locked-p h2 { margin: 6px 0 0; font-size: 24px; }
.locked-p p { margin: 0; max-width: 52ch; color: var(--text-2); }
.locked-p .lk-price { color: var(--text-3); font-size: 14px; }
.locked-p .lk-price b { color: var(--text); }
.trial-c { display: flex; align-items: center; gap: 18px; padding: 18px 24px; margin-bottom: 22px; }
.trial-c > div { flex: 1; min-width: 0; }
.trial-c b { color: var(--text); font-size: 16px; }
.trial-c p { margin: 3px 0 0; color: var(--text-2); font-size: 14px; }
.trial-c.ended { border-color: rgba(212, 184, 134, .35); }
@media (max-width: 720px) { .trial-c { flex-wrap: wrap; } .trial-c .btn { width: 100%; } }

/* v2.1.1 profile menu shows who you are */
.menu .m-me { display: grid; gap: 2px; padding: 10px 12px 6px; }
.menu .m-me b { color: var(--text); font-size: 14.5px; }
.menu .m-me small { color: var(--text-3); font-size: 12.5px; }

/* v2.1.1 search boxes in menus: one focus ring, on the box */
.m-search input[type="text"]:focus, .m-search input[type="text"]:focus-visible { outline: none; border: 0; box-shadow: none; }
.m-search:focus-within { border-color: rgba(212, 184, 134, .6); box-shadow: 0 0 0 3px rgba(212, 184, 134, .14); }

/* v2.1.1 sign in and sign up: one narrow column, the mark above it, nothing beside it */
.au-body { min-height: 100vh; margin: 0; background: radial-gradient(900px 500px at 50% -10%, rgba(212, 184, 134, .14), transparent 70%), var(--bg); color: var(--text); font-family: var(--font); }
.au { width: min(420px, 100%); margin: 0 auto; padding: 56px 16px 32px; box-sizing: border-box; }
.au-mark { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; text-decoration: none; }
.au-mark span { display: grid; gap: 3px; }
.au-mark b { font: 400 26px/1 "Anton", Impact, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.au-mark i { font: italic 400 15px/1 "Instrument Serif", Georgia, serif; color: var(--gold); }
.au-card { padding: 32px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.au-card h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: var(--text); }
.au-card form { display: grid; gap: 16px; margin-top: 20px; }
.au-sub { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.au-sub b { color: var(--text); }
.au-f { display: grid; gap: 7px; }
.au-f > span:first-child { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; color: var(--text); }
.au-f em { font-style: normal; font-weight: 500; color: var(--text-3); }
.au-f input { width: 100%; height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
.au-f input:focus { outline: none; border-color: rgba(212, 184, 134, .7); box-shadow: 0 0 0 3px rgba(212, 184, 134, .16); }
.au-hint { color: var(--text-3); font-size: 12.5px; }
.au-pw { position: relative; display: block; }
.au-pw input { padding-right: 64px; }
.au-eye { position: absolute; right: 6px; top: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.au-eye:hover { background: var(--card-3); color: var(--text); }
.au-link { padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.au-link:hover { text-decoration: underline; }
.au-check { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14px; }
.au-check input { width: 18px; height: 18px; accent-color: var(--gold); }
.au-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; border: 0; border-radius: 12px; background: var(--gold); color: #17171A; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.au-btn:hover { background: var(--gold-hi); }
.au-btn.ghost { margin-top: 22px; background: var(--card-2); color: var(--text); border: 1px solid var(--line-2); }
.au-btn.ghost:hover { background: var(--card-3); }
.au-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(239, 107, 107, .12); color: #F49A9A; font-size: 13.5px; }
.au-alt { margin: 18px 0 0; text-align: center; }
.au-switch { margin: 22px 0 0; text-align: center; color: var(--text-2); font-size: 14.5px; }
.au-switch a { color: var(--gold); font-weight: 700; text-decoration: none; }
.au-switch a:hover { text-decoration: underline; }
.au-legal { margin: 28px 0 0; text-align: center; color: var(--text-3); font-size: 12.5px; }
.au-fine { margin: 16px 0 0; text-align: center; color: var(--text-3); font-size: 12.5px; }
.au-top { display: flex; align-items: center; justify-content: space-between; margin: -8px 0 12px; }
.au-back { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px 6px 2px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.au-back:hover { color: var(--text); }
.au-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.au-step { color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.au-prog { height: 3px; margin-bottom: 22px; border-radius: 3px; background: var(--card-3); overflow: hidden; }
.au-prog i { display: block; height: 100%; background: var(--gold); transition: width .25s; }
.au-code-t { justify-self: start; }
.au .step { display: grid; gap: 16px; }
.au .step[hidden] { display: none; }
.au .step h1 { margin-bottom: -10px; }
@media (max-width: 480px) { .au { padding-top: 32px; } .au-card { padding: 24px 20px; } }

/* v2.1.1 plan changes go through a confirm panel */
.plan-act { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.plan-act small { font-size: 12.5px; }
.pd-in { width: 100%; margin-top: 10px; }
.pd-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--card-2); }
.pd-sum span { color: var(--text-2); }
.pd-sum b { color: var(--text); font-size: 16px; }
.pd-confirm { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 11px 13px; border-radius: 10px; background: rgba(239, 107, 107, .1); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pd-confirm input { width: 17px; height: 17px; accent-color: var(--bad); }
.pd-in[type="date"] { font: inherit; color-scheme: dark; }
.seg.sm button { height: 30px; padding: 0 10px; font-size: 12.5px; }

/* v2.1.1 sign in, Stripe-style: mark top left, form centred, a flowing ribbon behind on the right */
.au-body { position: relative; overflow-x: hidden; background: radial-gradient(1000px 640px at 18% 0%, rgba(212, 184, 134, .10), transparent 65%), #1C1C20; }
.au-ribbon { position: fixed; top: 0; right: 0; width: min(62vw, 980px); height: 100vh; z-index: 0; pointer-events: none; }
.au-head { position: relative; z-index: 1; padding: 22px 32px 0; }
.au-head .au-mark { justify-content: flex-start; margin: 0; }
.au-head .au-mark b { font-size: 22px; }
.au-head .au-mark i { font-size: 14px; }
.au { position: relative; z-index: 1; width: min(440px, 100%); padding-top: 64px; }
.au-card { background: #26262B; border-color: rgba(255, 255, 255, .07); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .3); }
.au-card h1 { font-size: 24px; }
.au-switch, .au-legal { text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
@media (max-width: 900px) { .au-ribbon { width: 100vw; opacity: .45; } }
@media (max-width: 480px) { .au-head { padding: 18px 16px 0; } .au { padding-top: 28px; } .au-ribbon { opacity: .3; } }

/* v2.1.1 one focus ring: inputs inside a box let the box show the ring, never a second square inside it */
.iv input:focus-visible, .st-box input:focus-visible, .wi-box input:focus-visible, .au-pw input:focus-visible, .composer textarea:focus-visible, .ch-r .ch-name:focus-visible, .au-f input:focus-visible { outline: none; }
.st-box:focus-within, .wi-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .18); }

/* v2.1.1 previewing a company or a team member: a silver frame and a bar that says whose view this is */
#app.previewing::after { content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; border: 3px solid #BFC2C7; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.pv-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: #BFC2C7; color: #17171A; font-size: 14px; }
.pv-bar .i { width: 16px; height: 16px; }
.pv-bar b { font-weight: 800; }
.pv-link { color: #17171A; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pv-exit { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: #17171A; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pv-exit:hover { background: #000; }

/* v2.1.1 sign in and sign up, split: a brand panel in black, gold and silver, the form beside it */
.au-body { background: #121214; }
.au2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; width: min(1180px, calc(100% - 48px)); min-height: calc(100vh - 48px); margin: 24px auto; padding: 14px; box-sizing: border-box; border-radius: 28px; background: #1E1E22; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 40px 100px rgba(0, 0, 0, .5); }
.au-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 26px 28px 34px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(70% 55% at 50% 52%, rgba(212, 184, 134, .20), transparent 70%), radial-gradient(60% 40% at 100% 0%, rgba(191, 194, 199, .14), transparent 70%), linear-gradient(160deg, #0B0B0D 0%, #141417 55%, #0A0A0B 100%);
  border: 1px solid rgba(191, 194, 199, .14); }
.au-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(191, 194, 199, .08), transparent 22%, transparent 78%, rgba(212, 184, 134, .07)); }
.au-art-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-art .au-mark { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.au-art .au-mark b { font: 400 22px/1 "Anton", Impact, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #F3F1EC; }
.au-site { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 14px; border-radius: 999px; background: rgba(191, 194, 199, .14); border: 1px solid rgba(191, 194, 199, .22); color: #E4E5E8; font-size: 13.5px; font-weight: 600; text-decoration: none; backdrop-filter: blur(6px); }
.au-site:hover { background: rgba(191, 194, 199, .22); }
.au-site svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.au-ship { position: relative; z-index: 1; align-self: center; width: min(260px, 46%); height: auto; filter: drop-shadow(0 18px 40px rgba(212, 184, 134, .25)); }
.au-art-bot { position: relative; z-index: 1; text-align: center; }
.au-tag { margin: 0; font: italic 400 44px/1.05 "Instrument Serif", Georgia, serif; color: #E6D2A8; }
.au-by { margin: 10px 0 0; color: #BFC2C7; font-size: 13.5px; letter-spacing: .01em; }
.au-pane { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 32px 24px; }
.au-form { width: min(400px, 100%); }
.au-form h1 { margin: 0; font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: var(--text); }
.au-lead { margin: 10px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.au-lead a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.au-lead b { color: var(--text); }
.au-form form { display: grid; gap: 16px; margin-top: 28px; }
.au-form .au-btn.ghost { margin-top: 26px; }
.au-pane .au-legal { margin-top: auto; padding-top: 28px; }
.au-pane .au-alt { color: var(--text-2); font-size: 14px; }
.au-form .step h1 { margin-bottom: 0; }
.au-form .step { gap: 16px; }
.au-form .au-top { margin: 0 0 12px; }
@media (max-width: 900px) {
  .au2 { grid-template-columns: minmax(0, 1fr); width: 100%; min-height: 100vh; margin: 0; border-radius: 0; border: 0; padding: 10px; }
  .au-art { min-height: 0; padding: 18px 18px 22px; }
  .au-ship { display: none; }
  .au-art-bot { text-align: left; margin-top: 26px; }
  .au-tag { font-size: 30px; }
  .au-pane { padding: 28px 8px 16px; justify-content: flex-start; }
  .au-form h1 { font-size: 30px; }
}
.au-site { white-space: nowrap; flex: none; }
.au-form .step > .au-lead { margin-bottom: 6px; }
.au-code-t { text-align: left; }
@media (max-width: 480px) { .au-art .au-mark b { font-size: 19px; } .au-site { height: 30px; padding: 0 8px 0 10px; font-size: 12.5px; } }

/* v2.1.1 add a company and invite codes */
.nc { display: grid; gap: 14px; text-align: left; min-width: min(460px, 80vw); }
.nc h2 { margin: 0; }
.nc select { width: 100%; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: inherit; }
.nc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nc-act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.inv { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.inv-code, .inv-big code { padding: 4px 10px; border-radius: 8px; background: var(--card-3); color: var(--gold-hi); font: 700 15px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.inv-big { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--card-2); }
.inv-big code { font-size: 24px; background: none; }
@media (max-width: 560px) { .nc-two { grid-template-columns: 1fr; } }

/* v2.1.1 sign in at sea: open page, mark top left, form centred, gold and silver swells along the bottom with the ship on the crest */
.au-body { position: relative; min-height: 100vh; overflow-x: hidden; background: radial-gradient(1100px 600px at 50% -5%, rgba(191, 194, 199, .10), transparent 65%), radial-gradient(900px 500px at 85% 60%, rgba(212, 184, 134, .10), transparent 70%), #0E0E10; }
.au-sea { position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; min-height: 300px; z-index: 0; pointer-events: none; }
.au-sea svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.au-boat { position: absolute; right: 10.5%; bottom: calc(46vh * .47); width: clamp(70px, 8vw, 120px); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); transform: rotate(-4deg); }
.au-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px 0; }
.au-head .au-mark { display: inline-flex; align-items: center; gap: 10px; margin: 0; text-decoration: none; }
.au-head .au-mark b { font: 400 22px/1 "Anton", Impact, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #F3F1EC; }
.au3 { position: relative; z-index: 2; width: min(440px, 100%); margin: 0 auto; padding: 56px 16px 40px; box-sizing: border-box; }
.au3 .au-card { padding: 36px 36px 30px; border-radius: 18px; background: rgba(28, 28, 32, .92); border: 1px solid rgba(191, 194, 199, .16); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .05) inset; backdrop-filter: blur(10px); }
.au3 .au-form { width: 100%; }
.au3 .au-form h1 { font-size: 30px; }
.au3 .au-legal { margin-top: 22px; color: #9A9DA4; }
@media (max-width: 600px) { .au-head { padding: 16px 16px 0; } .au3 { padding-top: 28px; } .au3 .au-card { padding: 26px 20px 22px; } .au-sea { height: 30vh; opacity: .8; } .au-boat { display: none; } }
.au3 .step { display: grid; gap: 16px; }
.au3 .step[hidden] { display: none; }

/* v2.1.1 sign in, minimal: plain dark page, mark top left, form centred, the way back bottom left */
.au-body { background: radial-gradient(1200px 520px at 50% -12%, rgba(212, 184, 134, .07), transparent 70%), #111113; display: flex; flex-direction: column; }
.au-head { padding: 24px 32px 0; }
.au3 { flex: 1; padding: 48px 16px 32px; }
.au3 .au-card { background: #1B1B1F; border: 1px solid rgba(191, 194, 199, .12); box-shadow: 0 24px 64px rgba(0, 0, 0, .45); backdrop-filter: none; }
.au-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 32px 24px; color: #8B8E95; font-size: 13px; }
.au-foot .au-site { height: auto; padding: 0; border: 0; background: none; color: #BFC2C7; font-size: 13.5px; font-weight: 600; backdrop-filter: none; }
.au-foot .au-site:hover { background: none; color: #F3F1EC; }
@media (max-width: 600px) { .au-foot { padding: 0 16px 18px; } }

/* v2.1.1 sign in, Stripe layout in the Quartermaster dark theme:
   a top bar with the mark, faint column guides, a gold and silver silk ribbon
   behind one card, a card footer for the other path, a small copyright line. */
.au-body.st { display: block; min-height: 100vh; background: #1F1F23; color: var(--text); }
.st .st-silk { position: fixed; inset: 0 0 0 30%; z-index: 0; pointer-events: none; opacity: .9; }
.st .st-silk svg { width: 100%; height: 100%; }
.st::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(50% - 600px), rgba(255, 255, 255, .05) calc(50% - 600px), rgba(255, 255, 255, .05) calc(50% - 599px), transparent calc(50% - 599px), transparent calc(50% + 599px), rgba(255, 255, 255, .05) calc(50% + 599px), rgba(255, 255, 255, .05) calc(50% + 600px), transparent calc(50% + 600px)); }
.st .au-head { position: relative; z-index: 2; height: 64px; padding: 0 max(24px, calc(50% - 584px)); display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(31, 31, 35, .85); backdrop-filter: blur(8px); }
.st .au-head .au-mark b { font-size: 21px; color: #F3F1EC; }
.st .au3 { position: relative; z-index: 2; width: min(480px, 100%); margin: 0 auto; padding: 40px 16px 24px; }
.st .au3 .au-card { padding: 44px 48px 0; border-radius: 10px; overflow: hidden; background: #2A2A30; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 15px 35px rgba(0, 0, 0, .35), 0 5px 15px rgba(0, 0, 0, .25); backdrop-filter: none; }
.st .au-form h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: #F3F1EC; }
.st .au-form form { gap: 18px; margin-top: 26px; }
.st .au-f > span:first-child { font-size: 14px; font-weight: 500; color: #D9D7D1; }
.st .au-f input { height: 44px; border-radius: 6px; background: #222227; border-color: rgba(255, 255, 255, .12); }
.st .au-f input:focus { border-color: rgba(212, 184, 134, .8); box-shadow: 0 0 0 4px rgba(212, 184, 134, .16); }
.st .au-link { color: #D4B886; font-weight: 500; }
.st .au-check { font-size: 14px; color: #D9D7D1; }
.st .au-btn { height: 44px; border-radius: 6px; font-weight: 600; }
.st .au-alt { margin: 22px 0 0; }
.st .st-cardfoot { margin: 32px -48px 0; padding: 22px 48px; text-align: center; background: #25252A; border-top: 1px solid rgba(255, 255, 255, .06); color: #B4B2AC; font-size: 15px; }
.st .st-cardfoot a { color: #D4B886; font-weight: 600; text-decoration: none; }
.st .st-cardfoot a:hover { text-decoration: underline; }
.st .au-legal { margin-top: 18px; color: #85838C; }
.st .st-foot { position: relative; z-index: 2; padding: 8px max(24px, calc(50% - 584px)) 28px; color: #85838C; font-size: 13px; }
.st .au-form .au-top { margin-top: -20px; }
@media (max-width: 600px) { .st .au3 .au-card { padding: 28px 22px 0; } .st .st-cardfoot { margin: 26px -22px 0; padding: 18px 22px; } .st .st-silk { inset: 40% 0 0 0; opacity: .5; } }

/* v2.1.1 company badges: each company keeps its own colour */
.c-rose { --tc: 229, 139, 176; }
.av[class*="c-"] { background: rgba(var(--tc), .18); color: rgb(var(--tc)); box-shadow: inset 0 0 0 1px rgba(var(--tc), .25); }

/* v2.1.1 your own questions in Ask: a normal bubble on the right, never squeezed into the avatar column */
.chat .msg.me { display: block; grid-template-columns: none; width: fit-content; max-width: 78%; margin-left: auto; justify-self: end; }
.chat .msg.me p { white-space: pre-wrap; overflow-wrap: anywhere; }

/* v2.1.1 Companies table: plain columns, coloured numbers, no boxes or pills */
.tbl .pl { display: grid; gap: 2px; }
.tbl .pl b { color: var(--text); font-weight: 700; }
.tbl .pl small { color: var(--text-3); font-size: 13px; }
.tbl td.vc { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text-3); white-space: nowrap; }
.tbl td.vc.good { color: #7DDBAE; } .tbl td.vc.fair { color: #F0C77E; } .tbl td.vc.bad { color: #F49A9A; }
.tbl th.r { text-align: right; }
.row-go { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-3); }
.row-go:hover { background: var(--card-3); color: var(--text); }
.row-go .i { width: 16px; height: 16px; transform: rotate(-90deg); }
@media (max-width: 1100px) { .tbl th:nth-child(5), .tbl td:nth-child(5), .tbl th:nth-child(7), .tbl td:nth-child(7) { display: none; } }

/* v2.1.1 sign in, nautical: everything centred on a night sea, a faint compass rose behind the card,
   calm silver swells along the bottom; the wordmark in the corner. No ribbon, no column lines. */
.st::before { display: none; }
.au-body.st { background: radial-gradient(900px 640px at 50% 42%, #2A2A30 0%, #222227 45%, #1A1A1E 100%); }
.st .st-sea { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.st .cr { position: absolute; left: 50%; top: 46%; width: min(1100px, 150vmin); height: auto; transform: translate(-50%, -50%) rotate(-8deg); opacity: .09; }
.st .sea-lines { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22vh; min-height: 140px; }
.st .au-head { height: 72px; padding: 0 28px; border-bottom: 0; background: none; backdrop-filter: none; }
.st .au3 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 72px - 64px); padding: 8px 16px 24px; }
.st .au3 .au-card { width: 100%; }
.st .st-foot { text-align: center; padding: 0 16px 24px; }
@media (max-width: 600px) { .st .cr { width: 160vw; top: 40%; } .st .au3 { justify-content: flex-start; min-height: 0; } .st .au-head { height: 60px; padding: 0 16px; } }
.veq-t em { font-style: normal; font-size: 12px; color: var(--text-3); text-align: center; max-width: 130px; }
.veq-t i { font-style: normal; font-size: 11.5px; font-weight: 700; color: rgb(var(--tc)); }
@media (max-width: 560px) { .veq-t em, .veq-t i { display: none; } }
.st .cr { width: min(760px, 110vmin); opacity: .07; transform: translate(-50%, -50%) rotate(-12deg); }


/* v2.1.1 sign in: the box is back over the compass, easy to read */
.st .au-form h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.st .au-form .au-lead { margin-top: 6px; color: #9C9AA3; font-size: 14.5px; }
.st .au-legal { text-align: center; }
.au-btn:disabled { opacity: .45; cursor: not-allowed; }
.au-btn:disabled:hover { background: var(--gold); }
.au-note { margin: -4px 0 0; text-align: center; color: #9C9AA3; font-size: 13px; }

/* v2.1.1 sign in: labels hold only the label text; errors sit under their own field */
.au-f > label { font-size: 14px; font-weight: 500; color: #D9D7D1; }
.au-lrow { display: flex; justify-content: space-between; align-items: baseline; }
.au-ferr { margin: 2px 0 0; color: #F49A9A; font-size: 13px; }
.au-f input[aria-invalid="true"] { border-color: rgba(239, 107, 107, .7); }
.au-hint.caps { color: #F0C77E; }
.st .st-foot { display: flex; justify-content: center; gap: 18px; }
.st .st-foot a { color: #9C9AA3; text-decoration: none; }
.st .st-foot a:hover { color: #F3F1EC; }

/* v2.1.1 Terms and Privacy pages */
.legal { position: relative; z-index: 2; width: min(720px, 100%); margin: 0 auto; padding: 24px 20px 48px; box-sizing: border-box; color: #D9D7D1; line-height: 1.65; font-size: 15.5px; }
.legal h1 { margin: 6px 0 4px; font-size: 34px; letter-spacing: -.02em; color: #F3F1EC; }
.legal h2 { margin: 30px 0 8px; font-size: 18px; color: #F3F1EC; }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
.legal b { color: #F3F1EC; }
.legal a { color: #D4B886; }
.legal-date { margin: 0 0 18px; color: #9C9AA3; font-size: 14px; }
.legal-draft { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: rgba(226, 174, 79, .12); color: #F0C77E; font-size: 14px; }
.au-fine a { color: #D4B886; }

.person.pending { opacity: .85; }
.person.pending .av { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-3); }
.inv small { font-size: 12.5px; }
.chat .msg.me p { font-size: 16px; line-height: 1.5; padding: 14px 20px; border-radius: 22px 22px 6px 22px; }
.av { border-radius: 50%; }
.chat .msg.me p { border-radius: 22px; }

/* v2.1.1 Finance: the legend sits on its own line under the title */
.fin-grid .wh { flex-wrap: wrap; row-gap: 6px; }
.fin-grid .wh .legend { flex-basis: 100%; order: 3; margin: 0; }
.fin-grid .wh .sp { display: none; }
.fin-grid .legend i.fp { background: #BFC2C7; } .fin-grid .legend i.fc { background: #D4B886; }
.fin-grid .legend i.fp { background: #BFC2C7; } .fin-grid .legend i.fc { background: #D4B886; }

/* v2.1.1 save bar: centred on the content panel, not the window, and never covering the last row */
.savebar { left: calc((100vw - 64px) / 2); padding: 10px 12px 10px 18px; }
@media (max-width: 1000px) { .savebar { left: 50%; } }
body:has(.savebar) .page { padding-bottom: 96px; }

/* v2.2 reports: the monthly report, automatic saving and past reports */
.rep-main { padding: 24px 26px; margin-bottom: 28px; display: grid; gap: 20px; }
.rm-top { display: flex; gap: 14px; align-items: flex-start; }
.rm-top h2 { margin: 0 0 4px; font-size: 20px; }
.rm-top p { margin: 0; color: var(--text-2); }
.rm-auto { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rm-auto-t { display: grid; gap: 3px; max-width: 46ch; }
.rm-auto-t span { color: var(--text-2); font-size: 13.5px; }
.rm-auto-c { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.rm-past h3, .reps-h { font-size: 15px; margin: 0 0 10px; color: var(--text); }
.rm-past ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rm-past li { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 10px; }
.rm-past li:hover { background: var(--card-2); }
.rm-past li a { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 150px; }
.rm-past li a:hover b { color: var(--gold); }
.rm-past li .muted { flex: 1; font-size: 13.5px; }
@media (max-width: 640px) { .rm-auto { flex-direction: column; align-items: flex-start; } .rm-past li { flex-wrap: wrap; } }

/* v2.2 plan change history and seat warning */
details.ph { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
details.ph summary { cursor: pointer; color: var(--text-2); font-size: 14px; }
details.ph ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
details.ph li { display: grid; gap: 2px; font-size: 14px; }
.seat-over { display: block; margin-top: 4px; color: var(--warn); font-size: 13px; }

/* v2.2 save bar: the check on the gold Save button was gold too (invisible), which made the label look off-centre */
.savebar .btn svg { color: currentColor; }
.savebar > span:first-child svg { color: var(--gold); }
.savebar { padding: 8px 8px 8px 20px; }
.savebar .btn.primary { padding-left: 18px; padding-right: 20px; }

/* v2.3 Ideal customers (Marketing) */
.icp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.icp-card { display: flex; gap: 16px; align-items: center; padding: 16px 18px; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; }
.icp-card:hover { border-color: var(--line-2); background: var(--card-2); }
.icp-face { width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--card-3); overflow: hidden; display: grid; place-items: center; }
.icp-face svg { width: 100%; height: 100%; }
.icp-face.sm { width: 36px; height: 36px; }
.icp-face.lg { width: 88px; height: 88px; }
.icp-c-t { display: grid; gap: 4px; min-width: 0; flex: 1; }
.icp-c-t b { font-size: 16px; }
.icp-c-t small { color: var(--text-2); }
.icp-done { display: grid; gap: 4px; margin-top: 4px; }
.icp-done small { color: var(--text-3); font-size: 12px; }
.icp-done .gbar { height: 6px; }
.icp-empty { text-align: center; padding: 36px 28px; display: grid; justify-items: center; gap: 10px; }
.icp-empty h2 { margin: 6px 0 0; font-size: 22px; }
.icp-empty p { max-width: 56ch; color: var(--text-2); margin: 0; line-height: 1.55; }
.icp-hero { display: flex; gap: 4px; align-items: flex-end; height: 210px; }
.icp-hero-av svg { width: 110px; height: auto; }
.icp-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.icp-tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.icp-tabs a { padding: 10px 14px; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.icp-tabs a:hover { color: var(--text); }
.icp-tabs a.on { color: var(--text); border-bottom-color: var(--gold); }
.icp-prof { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.icp-who { padding: 20px; display: grid; gap: 10px; justify-items: center; text-align: center; position: sticky; top: 16px; }
.icp-who h2 { margin: 0; font-size: 20px; }
.icp-who .icp-done { width: 100%; }
.icp-body svg { width: 190px; height: auto; display: block; }
.icp-facts { width: 100%; margin: 4px 0 0; display: grid; gap: 6px; text-align: left; }
.icp-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.icp-facts dt { color: var(--text-3); }
.icp-facts dd { margin: 0; color: var(--text); text-align: right; }
.icp-who-a { display: flex; gap: 8px; margin-top: 6px; }
.icp-miss { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.icp-say { display: grid; gap: 14px; }
.icp-sec { padding: 18px 20px; }
.icp-sec h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; }
.icp-sec h4 { margin: 0 0 8px; font-size: 13px; color: var(--text-3); font-weight: 600; }
.icp-pos { font-size: 18px; line-height: 1.5; margin: 0; color: var(--text); }
.icp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.icp-lines, .icp-where, .icp-avoid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.icp-lines li { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: var(--card-2); }
.icp-where li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); }
.icp-where span { color: var(--text-2); font-size: 14px; }
.icp-where .warn-t { color: var(--warn); }
.icp-avoid li { color: var(--text-2); padding-left: 14px; position: relative; }
.icp-avoid li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 2px; background: var(--text-3); }
.icp-objs { display: grid; gap: 10px; }
.icp-obj { padding: 12px 14px; border-radius: 12px; background: var(--card-2); }
.icp-obj b { color: var(--text); }
.icp-obj p { margin: 4px 0 0; color: var(--text-2); line-height: 1.5; }
.icp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.icp-chips .chip, .icp-sugg .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 14px; color: var(--text); }
.icp-chips .chip.on { background: rgba(212, 184, 134, .14); border-color: rgba(212, 184, 134, .45); }
.icp-chips .chip button { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; padding: 0; }
.icp-chips .chip button:hover { background: var(--card-3); color: var(--text); }
.icp-chips .chip svg, .icp-sugg .chip svg { width: 13px; height: 13px; }
.icp-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.icp-sugg .chip.add { cursor: pointer; color: var(--text-2); background: transparent; border-style: dashed; font: inherit; font-size: 14px; }
.icp-sugg .chip.add:hover { color: var(--text); border-color: var(--gold); }
.icp-add { margin-top: 8px; width: 100%; }
.icp-steps { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; padding: 0; }
.icp-steps button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.icp-steps span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--card-3); font-size: 12px; font-weight: 700; }
.icp-steps .on button { color: var(--text); border-color: var(--gold); }
.icp-steps .on span { background: var(--gold); color: #1a1a1a; }
.icp-steps .done span { background: rgba(76, 195, 138, .2); color: var(--good); }
.icp-build { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }
.icp-form { padding: 22px 24px; display: grid; gap: 18px; }
.icp-form h2 { margin: 0; font-size: 20px; }
.icp-form > p.muted { margin: -12px 0 0; }
.icp-f { display: grid; gap: 6px; }
.icp-f > label { font-weight: 600; color: var(--text); font-size: 14.5px; }
.icp-f input[type=text] { width: 100%; }
.icp-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.icp-seg button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; }
.icp-seg button:hover { color: var(--text); border-color: var(--text-3); }
.icp-seg button[aria-pressed=true] { background: var(--gold); border-color: var(--gold); color: #1a1a1a; font-weight: 600; }
.icp-nav { display: flex; gap: 8px; align-items: center; padding-top: 6px; border-top: 1px solid var(--line); }
.icp-live { padding: 18px; display: grid; justify-items: center; gap: 8px; position: sticky; top: 16px; text-align: center; }
.icp-live .icp-done { width: 100%; }
.icp-av-ed { display: grid; gap: 14px; }
.icp-av-ed > .btn { justify-self: start; }
.icp-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.icp-opts button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.icp-opts button[aria-checked=true] { border-color: var(--gold); color: var(--text); background: rgba(212, 184, 134, .14); }
.icp-opts.swatches button { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.icp-opts.swatches button[aria-checked=true] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
.icp-setup { display: grid; gap: 18px; padding: 8px 4px; max-width: 640px; }
.icp-setup-h { display: flex; gap: 16px; align-items: center; }
.icp-setup-h h2 { margin: 0 0 4px; font-size: 20px; }
.icp-setup-h p { margin: 0; }
.icp-setup > .btn { justify-self: start; }
.icp-chat-h { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; }
.icp-chat-h small { display: block; color: var(--text-3); }
.icp-chat-h .icp-face { width: 48px; height: 48px; }
.icp-mood { margin-left: auto; display: grid; gap: 4px; min-width: 120px; font-size: 12px; color: var(--text-3); }
.icp-mood .gbar { height: 6px; }
.icp-practice .msg.bot { display: flex; gap: 10px; align-items: flex-start; }
.icp-listen { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.icp-listen:hover { color: var(--text); border-color: var(--gold); }
.icp-listen svg { width: 14px; height: 14px; }
.icp-first { text-align: center; padding: 30px 0; }
.icp-end { text-align: center; font-weight: 600; padding: 10px; border-radius: 12px; background: var(--card-2); }
.icp-end.won { color: var(--good); }
.icp-end.lost, .icp-end.quiet { color: var(--bad); }
.icp-coach { padding: 18px 20px; margin-top: 12px; display: grid; gap: 10px; }
.icp-coach h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.icp-coach h4 { margin: 6px 0 0; font-size: 13px; color: var(--text-3); }
.icp-coach ul { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 4px; }
.icp-coach > .btn { justify-self: start; }
.icp-scores { display: grid; gap: 8px; }
.icp-scores div { display: grid; grid-template-columns: 1fr 120px 20px; gap: 10px; align-items: center; font-size: 14px; color: var(--text-2); }
.icp-scores .gbar { height: 6px; }
.cs-none { padding: 8px 12px; }
.composer.mail textarea { min-height: 120px; }
@media (max-width: 1000px) { .icp-prof, .icp-build { grid-template-columns: 1fr; } .icp-who, .icp-live { position: static; } .icp-live { display: none; } }
@media (max-width: 640px) { .icp-two { grid-template-columns: 1fr; } .icp-scores div { grid-template-columns: 1fr 80px 20px; } .icp-hero-av svg { width: 80px; height: auto; } .icp-hero { height: 150px; } }

/* v2.3 Content calendar (Marketing) */
.cal-empty { text-align: center; padding: 40px 28px; display: grid; justify-items: center; gap: 10px; }
.cal-empty h2 { margin: 4px 0 0; font-size: 22px; }
.cal-empty p { max-width: 58ch; margin: 0; color: var(--text-2); line-height: 1.55; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav h2 { margin: 0 6px; font-size: 22px; min-width: 190px; text-align: center; }
.cal-nav .flip svg { transform: rotate(180deg); }
.cal-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.cal-strip div { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 2px; }
.cal-strip b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cal-strip span { color: var(--text-2); font-size: 13px; }
.cal-strip .cs-published b { color: var(--good); }
.cal-strip .cs-scheduled b { color: var(--blue); }
.cal-strip .cs-waiting b { color: var(--warn); }
.cal-strip .cs-missed b { color: var(--bad); }
.cal-gap { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(226, 174, 79, .1); color: var(--text); font-size: 14px; }
.cal-gap svg { width: 16px; height: 16px; color: var(--warn); flex: none; }
.cal-grid { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.cal-dow span { padding: 10px 12px; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.cal-week { border-bottom: 1px solid var(--line); position: relative; }
.cal-week:last-child { border-bottom: 0; }
.cal-bands { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0 4px; padding: 6px 4px 0; }
.cal-band { height: 22px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--cc) 30%, transparent); border-left: 3px solid var(--cc); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; text-align: left; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-band[data-cont] { border-left-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-day { min-height: 116px; padding: 6px 6px 8px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-day:last-child { border-right: 0; }
.cal-day.out { background: rgba(0, 0, 0, .12); }
.cal-day.out .cd-h span { color: var(--text-3); }
.cd-h { display: flex; align-items: center; justify-content: space-between; height: 24px; }
.cd-h span { font-size: 13px; font-weight: 600; color: var(--text-2); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal-day.today .cd-h span { background: var(--gold); color: #1a1a1a; }
.cd-add { opacity: 0; width: 22px; height: 22px; border-radius: 6px; border: 0; background: var(--card-3); color: var(--text-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.cd-add svg { width: 13px; height: 13px; }
.cal-day:hover .cd-add, .cd-add:focus-visible { opacity: 1; }
.cal-pill { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 4px 6px; border-radius: 8px; border: 0; border-left: 3px solid var(--pc); background: var(--card-2); color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.cal-pill:hover { background: var(--card-3); }
.cal-pill .pp { flex: none; font-size: 10.5px; font-weight: 700; color: var(--pc); width: 18px; }
.cal-pill .pt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-pill.st-missed .pt { text-decoration: line-through; color: var(--text-3); }
.cal-pill.st-waiting { box-shadow: inset 0 0 0 1px rgba(226, 174, 79, .55); }
.cal-pill.st-published .pt::after { content: " \2713"; color: var(--good); }
.cal-more { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; text-align: left; padding: 2px 6px; cursor: pointer; }
.cal-more:hover { color: var(--text); }
.cal-list { display: grid; gap: 16px; }
.cal-lday h4 { margin: 0 0 8px; font-size: 13.5px; color: var(--text-3); }
.cal-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-left: 4px solid var(--pc); font: inherit; color: var(--text); text-align: left; cursor: pointer; margin-bottom: 6px; }
.cal-row:hover { background: var(--card-2); }
.cr-pl { width: 110px; flex: none; font-size: 13px; color: var(--text-2); }
.cr-t { flex: 1; min-width: 0; display: grid; }
.cr-t small { color: var(--text-3); }
.cal-st { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--card-3); color: var(--text-2); white-space: nowrap; }
.cal-st.st-published { color: var(--good); } .cal-st.st-scheduled { color: var(--blue); } .cal-st.st-waiting { color: var(--warn); } .cal-st.st-missed { color: var(--bad); } .cal-st.st-approved { color: var(--teal); }
.cal-none { padding: 24px; text-align: center; }
.cal-camps { margin-top: 22px; }
.cal-camps h3 { margin: 0 0 10px; font-size: 16px; }
.cal-camp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cal-camp { display: grid; gap: 3px; padding: 14px 16px; border-left: 4px solid var(--cc); text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.cal-camp:hover { background: var(--card-2); }
.cal-camp small { color: var(--text-3); } .cal-camp span { color: var(--text-2); font-size: 13.5px; }
.cal-drawer { width: min(460px, 100vw); }
.cal-drawer .drawer-b { display: grid; gap: 16px; }
.cal-f { display: grid; gap: 6px; }
.cal-f > label { font-weight: 600; font-size: 14px; }
.cal-f input[type=text], .cal-f input[type=url], .cal-f input[type=date], .cal-f input[type=time], .cal-f textarea { width: 100%; }
.cal-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cal-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cal-res { display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.cal-colors { display: flex; gap: 8px; }
.cal-colors button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--cc); cursor: pointer; }
.cal-colors button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cc); }
.cal-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cal-stats div { padding: 10px; border-radius: 12px; background: var(--card-2); display: grid; text-align: center; }
.cal-stats b { font-size: 18px; } .cal-stats span { font-size: 12px; color: var(--text-3); }
.cal-d-act { display: flex; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.cal-approve { padding: 14px; border-radius: 14px; background: rgba(226, 174, 79, .1); border: 1px solid rgba(226, 174, 79, .35); display: grid; gap: 10px; }
.cal-approve div { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-fb { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--card-2); color: var(--text-2); font-size: 14px; }
.cal-fb svg { width: 16px; height: 16px; flex: none; }
.cal-pv { display: grid; justify-items: center; padding: 16px; border-radius: 16px; background: var(--bg); }

/* Post previews, each in its platform's own style */
.pv { width: 300px; max-width: 100%; border-radius: 14px; overflow: hidden; font-size: 13px; line-height: 1.45; color: #1c1e21; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); }
.pv p { margin: 0; padding: 8px 12px 12px; }
.pv-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.pv-top small { display: block; color: #65676b; font-size: 11.5px; }
.pv-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #D4B886; color: #1a1a1a; font-weight: 700; font-size: 11px; flex: none; }
.pv-img { display: grid; place-items: center; text-align: center; padding: 16px; color: #fff; font-weight: 700; font-size: 16px; background: linear-gradient(135deg, #3a3b40, #6b5a3e); }
.pv-img.sq { aspect-ratio: 1; }
.pv-img.wide { aspect-ratio: 16 / 9; }
.pv-acts { display: flex; gap: 14px; padding: 10px 12px 0; }
.pv svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv.ig .pv-img { background: linear-gradient(135deg, #833ab4, #fd1d1d 60%, #fcb045); }
.pv-bar { display: flex; justify-content: space-around; padding: 8px; border-top: 1px solid #e4e6eb; color: #65676b; font-weight: 600; }
.pv.fb .pv-img { background: linear-gradient(135deg, #4267B2, #8aa4dc); }
.pv.li .pv-img { background: linear-gradient(135deg, #0A66C2, #6fa8dc); }
.pv.tt { background: #000; width: 220px; }
.pv.tt .pv-img.tall { aspect-ratio: 9 / 16; position: relative; place-items: end start; padding: 12px; background: linear-gradient(180deg, #1d1d1d, #2b0f1f 70%, #000); }
.tt-side { position: absolute; right: 10px; bottom: 70px; display: grid; gap: 14px; color: #fff; }
.tt-cap { display: grid; gap: 4px; text-align: left; font-size: 12.5px; font-weight: 400; padding-right: 44px; }
.tt-cap b { font-weight: 700; }
.pv.yt { background: #0f0f0f; color: #fff; padding-bottom: 10px; }
.pv.yt .pv-img { background: linear-gradient(135deg, #2a2a2a, #5a1a1a); position: relative; }
.yt-play { width: 54px; height: 38px; border-radius: 10px; background: #FF0000; display: grid; place-items: center; }
.yt-play svg { fill: #fff; stroke: none; width: 20px; height: 20px; }
.pv.yt > b { display: block; padding: 10px 12px 2px; font-size: 14px; }
.pv.yt > small { padding: 0 12px; color: #aaa; }
.pv.em { padding: 4px 0; }
.em-row { display: flex; gap: 10px; padding: 10px 12px; align-items: flex-start; }
.em-row > div { display: grid; min-width: 0; flex: 1; }
.em-row b { font-size: 13.5px; }
.em-sub { font-weight: 700; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-pre { color: #5f6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-row small { color: #5f6368; }
.pv.bl { padding-bottom: 4px; }
.pvb-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #f1f3f4; font-size: 11px; color: #5f6368; }
.pvb-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c4c7c5; }
.pvb-bar span { margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #fff; }
.pv.bl h4 { margin: 0; padding: 12px 12px 0; font-size: 17px; line-height: 1.3; }
.pv.gg { padding: 12px 14px; display: grid; gap: 2px; }
.pv.gg small { font-size: 11.5px; color: #202124; }
.gg-url { color: #202124; font-size: 12px; }
.gg-h { color: #1a0dab; font-size: 17px; font-weight: 400; }
.pv.gg p { padding: 2px 0 0; color: #4d5156; }
.pv.sm { background: #f2f2f7; padding: 14px; display: grid; gap: 6px; }
.sm-from { text-align: center; font-size: 11px; color: #8e8e93; }
.sm-b { justify-self: start; max-width: 85%; padding: 8px 12px; border-radius: 18px; background: #e5e5ea; color: #000; }
.pv.ev { display: flex; gap: 12px; padding: 14px; align-items: center; }
.pv.ev p { padding: 2px 0 0; color: #65676b; }
.ev-date { width: 54px; flex: none; border-radius: 10px; overflow: hidden; text-align: center; border: 1px solid #e4e6eb; display: grid; }
.ev-date small { background: #E2AE4F; color: #fff; font-weight: 700; padding: 2px 0; text-transform: uppercase; font-size: 10.5px; }
.ev-date b { font-size: 22px; padding: 2px 0 4px; }
@media (max-width: 900px) { .cal-strip { grid-template-columns: repeat(3, 1fr); } .cal-day { min-height: 90px; } .cal-pill .pt { display: none; } .cal-pill { justify-content: center; } }
@media (max-width: 640px) { .cal-strip { grid-template-columns: repeat(2, 1fr); } .cal-nav h2 { min-width: 0; font-size: 18px; } .cal-day { min-height: 64px; padding: 4px 2px; } .cal-dow span { padding: 8px 4px; font-size: 11px; } .cal-stats { grid-template-columns: repeat(3, 1fr); } }

.cal-tools .dd { width: 190px; }
.cal-tools .seg { flex: none; }
.cal-band { background: color-mix(in srgb, var(--cc) 20%, var(--card)); }

/* v2.3 Notifications panel */
.nt-drawer { width: min(440px, 100vw); display: flex; flex-direction: column; }
.nt-drawer .drawer-h { gap: 8px; }
.nt-drawer .drawer-h > div { flex: 1; }
.nt-tabs { margin: 0 20px 6px; align-self: flex-start; }
.nt-tabs em { font-style: normal; font-size: 12px; color: var(--text-3); margin-left: 4px; }
.nt-tabs button[aria-pressed=true] em { color: inherit; }
.nt-list { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 14px; }
.nt-g h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.nt-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; position: relative; }
.nt-row + .nt-row { margin-top: 4px; }
.nt-row:hover { background: var(--card-2); }
.nt-row.unread { background: rgba(212, 184, 134, .07); box-shadow: inset 3px 0 0 var(--gold); }
.nt-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.nt-t b { font-weight: 600; color: var(--text); line-height: 1.4; }
.nt-row.unread .nt-t b { font-weight: 700; }
.nt-t small { color: var(--text-3); font-size: 12.5px; }
.nt-a { margin-top: 6px; }
.nt-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 16px; }
.nt-empty p { margin: 0; max-width: 32ch; }
.nt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); }
.nt-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.nt-foot a:hover { color: var(--text); }
.nt-foot svg { width: 16px; height: 16px; }
.show-m-only .dot-n { min-width: 18px; width: auto; height: 18px; font-size: 11px; }
.sw-btn { width: 44px; height: 26px; border-radius: 999px; border: 0; background: var(--card-3); position: relative; cursor: pointer; padding: 0; transition: background .15s; }
.sw-btn i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sw-btn[aria-checked=true] { background: var(--gold); }
.sw-btn[aria-checked=true] i { transform: translateX(18px); }
.sw-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* v2.3 Listen: read any lesson, guide, term or answer aloud */
.listen-b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; flex: none; }
.listen-b:hover { color: var(--text); border-color: var(--gold); }
.listen-b svg { width: 14px; height: 14px; }
.listen-b.on { color: #1a1a1a; background: var(--gold); border-color: var(--gold); }
.lesson-top, .gc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bot-b .listen-b { margin-top: 8px; }

/* v2.3 The value equation as a real fraction: Value = (Dream outcome x Likelihood) over (Time delay x Effort) */
.veq { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 22px 16px; margin: 6px 0 4px; border-radius: 16px; background: var(--card-2); }
.veq-f { display: inline-grid; justify-items: center; gap: 10px; }
.veq-r { display: flex; align-items: flex-start; gap: 14px; }
.veq-bar { display: block; width: 100%; min-width: 260px; height: 3px; border-radius: 2px; background: var(--silver); opacity: .7; }
.veq-eq, .veq-x { font-size: 26px; color: var(--text-3); line-height: 1; align-self: center; }
.veq-x { font-size: 22px; margin-top: -24px; }
.veq-t { --tc: 212, 184, 134; display: grid; justify-items: center; gap: 3px; min-width: 96px; }
.veq-t.c-gold { --tc: 212, 184, 134; } .veq-t.c-green { --tc: 76, 195, 138; } .veq-t.c-violet { --tc: 160, 138, 242; } .veq-t.c-blue { --tc: 111, 163, 232; } .veq-t.c-rose { --tc: 228, 130, 176; }
.veq-t b { font-size: 30px; line-height: 1; font-weight: 800; color: rgb(var(--tc)); }
.veq-t small { font-size: 13px; font-weight: 600; color: var(--text); }
@media (max-width: 560px) { .veq-bar { min-width: 180px; } .veq-t { min-width: 70px; } .veq-t b { font-size: 24px; } .veq-x { margin-top: -10px; } }
.veq-t em { max-width: 180px; }

/* v2.3 Conversation lessons */
.lc-chat { display: grid; gap: 10px; margin: 6px 0 10px; }
.lc-m { max-width: 78%; display: grid; gap: 4px; }
.lc-m p { margin: 0; padding: 11px 15px; border-radius: 18px; line-height: 1.5; }
.lc-m.them { justify-self: start; }
.lc-m.them p { background: var(--card-3); border-bottom-left-radius: 6px; color: var(--text); }
.lc-m.you { justify-self: end; text-align: right; }
.lc-m.you p { background: rgba(212, 184, 134, .16); border: 1px solid rgba(212, 184, 134, .35); border-bottom-right-radius: 6px; color: var(--text); text-align: left; }
.lc-who { font-size: 11.5px; color: var(--text-3); font-weight: 600; padding: 0 6px; }
.lc-m small { color: var(--gold); font-size: 12.5px; padding: 0 6px; }
@media (max-width: 640px) { .lc-m { max-width: 92%; } }
.lc-m.you p { background: rgba(191, 194, 199, .12); border-color: rgba(191, 194, 199, .3); }

/* v2.3 .me is the header avatar only; chat bubbles (.msg.me) were inheriting its 32px circle */

/* v2.3 readability: secondary text meets the 4.5 : 1 contrast guideline; goal bars keep their width on mid-size screens */
:root { --text-3: #9C9AA3; }
@media (max-width: 1280px) { .gl-r { grid-template-columns: minmax(0, 1fr) auto; } .gl-r .gbar { grid-column: 1 / -1; grid-row: 2; } }

/* v2.3 what each end of a 1 to 10 score means; dialog text lines up with its title; the save bar never hides the last buttons */
.rate-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.nc > p, .nc > .muted, .modal .nc p { margin-left: 0; padding-left: 0; text-align: left; }
.nc { text-align: left; }
body:has(.savebar) .page { padding-bottom: 120px; }

/* v2.3 Advanced: what moves the forecast most; goals at this pace */
.sens { display: grid; gap: 10px; }
.sens-r { display: grid; grid-template-columns: minmax(180px, 1.4fr) 1fr 130px 110px 100px; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--card-2); }
.sens-n { display: grid; } .sens-n small { color: var(--gold); font-size: 12px; }
.sens-bar { height: 8px; border-radius: 999px; background: var(--card-3); overflow: hidden; } .sens-bar i { display: block; height: 100%; background: var(--good); border-radius: 999px; }
.sens-v, .sens-k { display: grid; text-align: right; } .sens-v small, .sens-k > small { color: var(--text-3); font-size: 12px; }
.sens-k small.up { color: var(--good); } .sens-k small.down { color: var(--bad); }
.gp { display: grid; gap: 10px; }
.gp-r { display: grid; grid-template-columns: auto minmax(160px, 1fr) 2fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--card-2); }
.gp-n { display: grid; } .gp-n small { color: var(--text-3); } .gp-v { color: var(--text-2); }
@media (max-width: 900px) { .sens-r { grid-template-columns: 1fr 1fr; } .sens-bar { grid-column: 1 / -1; grid-row: 2; } .gp-r { grid-template-columns: auto 1fr; } .gp-v { grid-column: 1 / -1; } }

/* v2.3 avatars come alive a little: a slow breath and an occasional blink (off when the device asks for less motion) */
@keyframes av-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.008); } }
@keyframes av-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.icp-body .av-fig, .icp-hero-av .av-fig, .icp-chat-h .av-fig { transform-origin: 100px 370px; animation: av-breathe 4.5s ease-in-out infinite; }
.avatar-svg .av-eye { transform-box: view-box; animation: av-blink 5.5s infinite; }
.icp-face.sm .av-eye { animation: none; }
@media (prefers-reduced-motion: reduce) { .avatar-svg .av-fig, .avatar-svg .av-eye { animation: none !important; } }

/* v2.4 Practice: a chat-app layout with a game feel (a glowing start screen, a live HUD, a scored debrief) */
.pr-page .panel-h { display: none; }
.pr-page.page, .page.pr-page { padding: 0; max-width: none; }
.pr { display: grid; grid-template-columns: 264px 1fr; min-height: calc(100vh - 120px); }
.pr-side { border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; background: rgba(0, 0, 0, .12); }
.pr-back { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
.pr-back:hover { background: var(--card-2); }
.pr-back > svg { width: 16px; height: 16px; color: var(--text-3); }
.pr-back .icp-face.sm { width: 30px; height: 30px; }
.pr-new { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.pr-new:hover { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .12); }
.pr-new svg { width: 16px; height: 16px; color: var(--gold); }
.pr-side h4 { margin: 10px 8px 4px; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.pr-list { display: grid; gap: 2px; overflow-y: auto; }
.pr-row { position: relative; display: flex; align-items: center; gap: 6px; border-radius: 10px; }
.pr-row:hover, .pr-row.on { background: var(--card-2); }
.pr-row.on { box-shadow: inset 3px 0 0 var(--gold); }
.pr-open { flex: 1; min-width: 0; display: grid; text-align: left; padding: 8px 10px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.pr-open b { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-open small { font-size: 12px; color: var(--text-3); }
.pr-tag { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--card-3); color: var(--text-2); flex: none; }
.pr-tag.good { color: var(--good); background: rgba(76, 195, 138, .12); } .pr-tag.bad { color: var(--bad); background: rgba(239, 107, 107, .12); }
.pr-del { opacity: 0; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--text-3); display: grid; place-items: center; cursor: pointer; margin-right: 4px; }
.pr-del svg { width: 15px; height: 15px; }
.pr-row:hover .pr-del, .pr-del:focus-visible { opacity: 1; }
.pr-del:hover { color: var(--bad); background: var(--card-3); }
.pr-none { color: var(--text-3); font-size: 13.5px; padding: 8px; margin: 0; }
.pr-main { position: relative; display: flex; flex-direction: column; min-width: 0; }

/* The start screen: a quiet glow and a faint grid, the customer centre stage */
.pr-start { position: relative; flex: 1; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 40px 24px; overflow: hidden; isolation: isolate; }
.pr-start::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(212, 184, 134, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 184, 134, .05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 70%); mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 70%); }
.pr-start::after { content: ""; position: absolute; left: 50%; top: 30%; width: 720px; height: 420px; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(closest-side, rgba(212, 184, 134, .14), transparent); animation: pr-drift 14s ease-in-out infinite alternate; }
@keyframes pr-drift { to { transform: translate(-50%, -56%) scale(1.08); } }
.pr-hero { display: flex; align-items: center; gap: 22px; max-width: 760px; }
.pr-avatar svg { width: 170px; height: auto; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .45)); }
.pr-hero h1 { margin: 0 0 6px; font-size: 34px; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(212, 184, 134, .25); }
.pr-hero p { margin: 0; color: var(--text-2); line-height: 1.5; max-width: 52ch; }
.pr-composer { width: min(720px, 100%); }
.pr-start .pr-composer { box-shadow: 0 0 0 1px rgba(212, 184, 134, .25), 0 20px 50px rgba(0, 0, 0, .35); }
.pr-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 760px; }
.pr-pills .dd { width: auto; min-width: 0; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; background: var(--card); }
.pr-brief { display: flex; gap: 10px; align-items: flex-start; max-width: 620px; padding: 14px 18px; border-radius: 14px; background: rgba(212, 184, 134, .08); border: 1px solid rgba(212, 184, 134, .3); color: var(--text); line-height: 1.5; }
.pr-brief svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; }
.pr-go { padding: 12px 26px; font-size: 16px; box-shadow: 0 0 30px rgba(212, 184, 134, .35); }
.pr-mode { margin: 0; color: var(--text-3); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.pr-mode svg { width: 14px; height: 14px; }

/* The session: a HUD on top, the chat in the middle, the box docked at the bottom */
.pr-session { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pr-hud { position: sticky; top: 0; z-index: 5; display: grid; gap: 10px; padding: 14px 24px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pr-who { display: flex; align-items: center; gap: 12px; }
.pr-who > div { display: grid; flex: 1; min-width: 0; } .pr-who small { color: var(--text-3); }
.pr-face { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--card-3); display: grid; place-items: center; flex: none; box-shadow: 0 0 0 2px var(--line-2); transition: box-shadow .3s; }
.pr-face svg { width: 100%; height: 100%; }
.pr-face.mood-happy { box-shadow: 0 0 0 2px var(--good), 0 0 18px rgba(76, 195, 138, .35); }
.pr-face.mood-annoyed { box-shadow: 0 0 0 2px var(--bad), 0 0 18px rgba(239, 107, 107, .35); }
.pr-face.mood-doubtful, .pr-face.mood-thinking { box-shadow: 0 0 0 2px var(--warn); }
.pr-meters { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 16px; align-items: center; }
.pr-meter span { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-bottom: 5px; }
.pr-meter span b { color: var(--text); font-weight: 600; }
.pr-track { height: 8px; border-radius: 999px; background: var(--card-3); overflow: hidden; }
.pr-track i { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.4, 0, .2, 1), background .5s; }
.m-int .pr-track i { background: linear-gradient(90deg, #6FA3E8, var(--gold)); }
.m-mood .pr-track i { background: linear-gradient(90deg, var(--bad), var(--warn) 45%, var(--good)); background-size: 250% 100%; }
.pr-stages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.pr-stages span { text-align: center; font-size: 11.5px; padding: 5px 2px; border-radius: 8px; background: var(--card-2); color: var(--text-3); border: 1px solid transparent; transition: all .3s; }
.pr-stages span.done { color: var(--good); background: rgba(76, 195, 138, .1); }
.pr-stages span.on { color: var(--text); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .14), 0 0 16px rgba(212, 184, 134, .2); }
.pr-hint { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; background: var(--card-2); color: var(--text-2); animation: pr-slide .25s ease; }
.pr-hint svg { width: 15px; height: 15px; flex: none; }
.pr-hint.go { background: rgba(212, 184, 134, .12); color: var(--text); box-shadow: inset 3px 0 0 var(--gold); }
.pr-hint.warn { background: rgba(226, 174, 79, .1); box-shadow: inset 3px 0 0 var(--warn); color: var(--text); }
.pr-hint.bad { background: rgba(239, 107, 107, .1); box-shadow: inset 3px 0 0 var(--bad); color: var(--text); }
.pr-hint.good { background: rgba(76, 195, 138, .1); box-shadow: inset 3px 0 0 var(--good); color: var(--text); }
@keyframes pr-slide { from { opacity: 0; transform: translateY(-4px); } }
.pr-scroll { flex: 1; overflow-y: auto; padding: 20px 24px 8px; }
.pr-scroll .chat { max-width: 780px; margin: 0 auto; padding-bottom: 24px; }
.pr-dock { position: sticky; bottom: 0; padding: 12px 24px 20px; background: linear-gradient(transparent, var(--bg) 30%); }
.pr-dock .pr-composer { margin: 0 auto; }
.pr-first { text-align: center; color: var(--text-3); padding: 40px 0; }

/* The debrief: a big score, then what to keep and fix */
.pr-debrief { display: grid; grid-template-columns: 140px 1fr; gap: 22px; margin-top: 18px; padding: 22px; border-radius: 18px; background: linear-gradient(160deg, rgba(212, 184, 134, .1), rgba(255, 255, 255, .02)); border: 1px solid rgba(212, 184, 134, .3); animation: pr-slide .3s ease; }
.pr-score { display: grid; place-items: center; align-content: center; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle, rgba(212, 184, 134, .18), transparent 70%); box-shadow: 0 0 0 3px var(--gold), 0 0 40px rgba(212, 184, 134, .35); }
.pr-score b { font-size: 42px; line-height: 1; } .pr-score span { font-size: 12px; color: var(--text-3); }
.pr-debrief h3 { margin: 0 0 12px; font-size: 20px; }
.pr-debrief h4 { margin: 14px 0 6px; font-size: 13px; color: var(--text-3); }
.pr-debrief ul { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 4px; }
.pr-again { margin-top: 16px; }
@media (max-width: 1000px) { .pr { grid-template-columns: 1fr; } .pr-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 220px; } .pr-meters { grid-template-columns: 1fr 1fr; } .pr-stages { grid-column: 1 / -1; } }
@media (max-width: 640px) { .pr-hero { flex-direction: column; text-align: center; } .pr-avatar svg { width: 130px; height: auto; } .pr-hero h1 { font-size: 26px; } .pr-debrief { grid-template-columns: 1fr; justify-items: center; } .pr-stages span { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .pr-start::after, .pr-hint, .pr-debrief { animation: none; } }
.panel:has(.pr) > .panel-h { display: none; }
.panel:has(.pr) .page { padding: 0; max-width: none; }
.pr-stages span svg { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; }

/* v2.4 Black Mast models: choose like a chat app's model picker */
.bm-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.bm-model { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bm-model:hover { transform: translateY(-2px); border-color: var(--text-3); }
.bm-model.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 184, 134, .14), 0 0 22px rgba(212, 184, 134, .18); color: var(--text); }
.bm-m-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bm-m-h b { color: var(--text); font-size: 15px; }
.bm-model small { color: var(--text-3); font-size: 12px; }
.bm-setup { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(226, 174, 79, .1); color: var(--text); font-size: 14px; line-height: 1.5; }
.bm-setup svg { width: 16px; height: 16px; color: var(--warn); flex: none; margin-top: 3px; }
.bm-setup code { background: var(--card-3); padding: 1px 6px; border-radius: 6px; }

/* Practice start: avatar, title, one line, then one box with Setup inside it. */
.pr-start > .pr-avatar { display: block; margin-bottom: -6px; }
.pr-start > h1 { margin: 0; font-size: 34px; letter-spacing: -.02em; text-align: center; text-shadow: 0 2px 30px rgba(212, 184, 134, .25); }
.pr-line { margin: -8px 0 6px; color: var(--text-2); text-align: center; max-width: 56ch; line-height: 1.5; }
.pr-box { width: min(720px, 100%); display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 10px 20px; border-radius: 26px; background: var(--card-2); border: 1px solid var(--line-2); box-shadow: 0 0 0 1px rgba(212, 184, 134, .18), 0 20px 50px rgba(0, 0, 0, .35); }
.pr-box:focus-within { border-color: rgba(212, 184, 134, .6); }
.pr-box textarea { width: 100%; min-height: 52px; max-height: 200px; padding: 4px 0; border: 0; background: none; box-shadow: none !important; resize: none; color: var(--text); font: 400 16px/1.5 var(--font); }
.pr-box textarea:focus-visible { outline: none; }
.pr-box-brief { margin: 4px 0 6px; color: var(--text-2); line-height: 1.5; }
.pr-box-brief b { color: var(--text); }
.pr-tools { display: flex; align-items: center; gap: 8px; margin-left: -8px; }
.pr-tools .sp { flex: 1; }
.pr-tool { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 600 13.5px var(--font); cursor: pointer; }
.pr-tool:hover, .pr-tool[aria-expanded=true] { background: rgba(255, 255, 255, .07); color: var(--text); }
.pr-tool svg { width: 17px; height: 17px; }
.pr-tool.icon { width: 40px; padding: 0; justify-content: center; }
.pr-tool.icon svg { width: 20px; height: 20px; }
.pr-sum { color: var(--text-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-setup { width: min(720px, 100%); padding: 4px 0; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); }
.pr-opt + .pr-opt { border-top: 1px solid var(--line); }
.pr-opt-h { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 0; background: none; color: var(--text); font: 500 14.5px var(--font); text-align: left; cursor: pointer; }
.pr-opt-h:hover { background: rgba(255, 255, 255, .03); }
.pr-opt-h span { flex: 1; }
.pr-opt-h em { font-style: normal; color: var(--text-3); font-size: 14px; }
.pr-opt-h svg { width: 16px; height: 16px; color: var(--text-3); transition: transform .15s; }
.pr-opt.open .pr-opt-h svg { transform: rotate(180deg); }
.pr-opt-b { display: grid; gap: 10px; padding: 0 20px 16px; }
.pr-opt-b small { color: var(--text-3); font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) { .pr-start > h1 { font-size: 26px; } .pr-sum { display: none; } }

/* One message box everywhere: voice mode while empty, the up arrow once you type. */
.pr-box .send { display: none; }
.pr-box:has(textarea:not(:placeholder-shown)) .send, .pr-box:not(:has(textarea)) .send { display: grid; }
.pr-box:has(textarea:not(:placeholder-shown)) .pr-voice { display: none; }
.pr-voice { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--gold); color: #141416; cursor: pointer; }
.pr-voice svg { width: 20px; height: 20px; }
.pr-voice:hover { filter: brightness(1.08); }
.pr-voice.on { box-shadow: 0 0 0 4px rgba(212, 184, 134, .25); animation: pq-pulse 1.8s ease-in-out infinite; }
@keyframes pq-pulse { 50% { box-shadow: 0 0 0 8px rgba(212, 184, 134, .08); } }
.pr-dock .pr-box { margin: 0 auto; }
.pr-box.mail textarea { min-height: 110px; }
/* In a chat: who, three equal meters, one quiet tip. */
.pq-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pq-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; height: 8px; }
.pq-steps i { border-radius: 999px; background: var(--card-3); }
.pq-steps i.done { background: var(--gold); opacity: .55; }
.pq-steps i.on { background: var(--gold); box-shadow: 0 0 10px rgba(212, 184, 134, .5); }
.pq-tip { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-2); font-size: 13.5px; }
.pq-tip svg { width: 15px; height: 15px; flex: none; color: var(--gold); }
.pq-tip.warn svg { color: var(--warn); } .pq-tip.bad svg { color: var(--bad); } .pq-tip.good svg { color: var(--good); }
.pr-who .pr-end { flex: none; }
@media (max-width: 640px) { .pq-meters { grid-template-columns: 1fr; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .pr-voice.on { animation: none; } }

/* Practice chat list: "..." menu, pinned chats, rename in place, share list. */
.pr-open b svg { width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; color: var(--gold); }
.pr-more:hover { color: var(--text); }
.pr-more[aria-expanded=true] { opacity: 1; background: var(--card-3); color: var(--text); }
.pr-rename { flex: 1; padding: 6px 8px; }
.pr-rename input { width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(212, 184, 134, .6); background: var(--card); color: var(--text); font: 500 14px var(--font); }
.menu button.danger, .menu button.danger svg { color: var(--bad); }
.pr-share { display: grid; gap: 6px; margin: 14px 0; max-height: 280px; overflow: auto; }
.pr-share label { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; }
.pr-share label:has(input:checked) { border-color: rgba(212, 184, 134, .6); background: rgba(212, 184, 134, .08); }
.pr-share input { width: 18px; height: 18px; accent-color: var(--gold); }
.pr-share span { display: grid; } .pr-share small { color: var(--text-3); }

/* Voice: Pause and Stop show only while a reply is being spoken. */
.pr-speak { display: none; gap: 2px; }
.pr-box.speaking .pr-speak { display: inline-flex; }
.pr-box.speaking .pr-voice { box-shadow: 0 0 0 4px rgba(212, 184, 134, .25); }
.pr-speak .pr-tool.icon { color: var(--gold); }
.icp-listen.on { color: var(--gold); border-color: rgba(212, 184, 134, .6); }

/* Profile voice row */
.icp-voice-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 14px; padding: 6px 0; border-top: 1px solid var(--line); }
.icp-voice-row > span { color: var(--text-3); font-size: 13.5px; }
.icp-voice-row .pr-tool small { color: var(--text-3); font-weight: 500; margin-left: 6px; }

/* Forms inside a dialog always fit the dialog (the Delete button used to stick out). */
.modal .nc { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.modal .nc-act { flex-wrap: wrap; }

/* 3D avatars: head and shoulders on a light tile, like a polished icon set */
img.av3d { display: block; max-width: 100%; height: auto; background: linear-gradient(160deg, #F1F0ED, #E3E1DC); }
.icp-face img.av3d, .pr-face img.av3d { width: 100%; height: 100%; object-fit: cover; }
.icp-body img.av3d { width: 230px; margin: 0 auto; border-radius: 30px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.pr-avatar { display: block; }
.pr-avatar img.av3d { width: 200px; border-radius: 30px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.icp-hero-av img.av3d { width: 120px; border-radius: 22px; }
.tpl-card .icp-face { background: #E9E7E3; }
/* Practice tab: people to practice with, and recent chats */
.pq-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pq-person { display: grid; justify-items: center; gap: 6px; padding: 20px 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); color: var(--text); text-decoration: none; text-align: center; }
.pq-person:hover { border-color: rgba(240, 149, 79, .55); background: var(--card-2); }
.pq-person small { color: var(--text-3); min-height: 1.4em; }
.pq-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: rgb(240, 149, 79); font-weight: 600; font-size: 13.5px; }
.pq-go svg { width: 15px; height: 15px; }
.pq-recent { display: grid; gap: 4px; }
.pq-recent h3 { margin: 0 0 8px; }
.pq-chat { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.pq-chat:hover { background: rgba(255, 255, 255, .05); }
.pq-chat > span:nth-child(2) { flex: 1; display: grid; } .pq-chat small { color: var(--text-3); }
.pq-chev { width: 16px; height: 16px; color: var(--text-3); transform: rotate(-90deg); }

/* Template gallery */
.tpl-filter { margin-bottom: 16px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.tpl-card { display: grid; justify-items: center; gap: 4px; padding: 20px 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.tpl-card:hover { border-color: rgba(240, 149, 79, .55); background: var(--card-2); }
.tpl-card small { color: var(--text-2); min-height: 2.8em; }
.tpl-ind { margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(240, 149, 79, .12); color: rgb(240, 149, 79); font-size: 12.5px; }

/* Ideal Customers app color: orange */
.mod-orange, body.mod-orange { --m: 240, 149, 79; }
.c-orange { --tc: 240, 149, 79; }
.ic.orange { background: rgba(240, 149, 79, .16); color: #F0954F; }

/* Template page: one industry dropdown */
.tpl-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.tpl-lab { color: var(--text-2); font-weight: 600; }
.ind-dd { min-width: 260px; justify-content: space-between; }
.tpl-count { color: var(--text-3); font-size: 13.5px; }
.menu .m-sp { width: 16px; flex: none; }
.menu .ind-head { display: flex; align-items: center; gap: 10px; padding: 11px 8px 5px; color: var(--text-2); font-weight: 600; }
.menu .ind-head .ic { width: 24px; height: 24px; }
.menu .ind-head span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .m-group + .m-group .ind-head { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.menu .m-search { position: sticky; top: 0; z-index: 1; }

/* Page header actions always look like buttons (owner: they read as plain text) */
.acts .btn.quiet { border-color: var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text); }
.acts .btn.quiet:hover { background: rgba(255, 255, 255, .07); }
.acts .btn.quiet.danger { color: #F49A9A; border-color: rgba(239, 107, 107, .35); }

/* Click a customer's name to rename them */
.icp-name-btn { display: inline-flex; align-items: center; gap: 8px; padding: 2px 8px; margin: 0 -8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: text; }
.icp-name-btn svg { width: 15px; height: 15px; color: var(--text-3); opacity: 0; transition: opacity .15s; }
.icp-name-btn:hover { background: rgba(255, 255, 255, .05); } .icp-name-btn:hover svg, .icp-name-btn:focus-visible svg { opacity: 1; }
.icp-name-edit input { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(212, 184, 134, .6); background: var(--card-2); color: var(--text); font: 600 20px var(--font); text-align: center; }
.ic.orange { background: #F0954F; color: #1B1209; }

/* KayKit avatars sit on a soft tile in their chosen background color */
img.av3d.kk { background: linear-gradient(160deg, color-mix(in srgb, var(--bg, #E6E3DE) 60%, #ffffff), var(--bg, #E6E3DE)); }
img.av3d.kk-wait { animation: kk-wait 1.2s ease-in-out infinite; }
@keyframes kk-wait { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { img.av3d.kk-wait { animation: none; } }

/* 2D avatars: sizes, and a little life (blink, breathe) */
svg.av2 { display: block; width: 100%; height: auto; }
.icp-body svg.av2 { width: 230px; margin: 0 auto; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .3)); }
.pr-avatar svg.av2 { width: 200px; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .3)); }
.icp-hero-av svg.av2 { width: 120px; }
.icp-face svg.av2, .pr-face svg.av2 { width: 100%; height: 100%; }
svg.av2 .av2-eyes { transform-box: fill-box; transform-origin: center; animation: av2-blink 5.2s infinite; }
svg.av2 .av2-pupils { transition: transform .12s ease-out; }
.icp-body svg.av2 .av2-breathe, .pr-avatar svg.av2 .av2-breathe { animation: av2-breathe 4.6s ease-in-out infinite; }
@keyframes av2-blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes av2-breathe { 50% { transform: translateY(-1.2px); } }
@media (prefers-reduced-motion: reduce) { svg.av2 .av2-eyes, svg.av2 .av2-breathe { animation: none !important; } }

/* Icon tiles: a lit, layered finish instead of a flat fill (owner 2026-10-21: "more premium") */
.mod-orchid, body.mod-orchid { --m: 214, 128, 220; }
.c-orchid, .c-orchid.c-orchid { --tc: 214, 128, 220; }
.ic.orchid { background: #D680DC; color: #22102A; }
.ic.gold, .ic.teal, .ic.violet, .ic.blue, .ic.green, .ic.silver, .ic.amber, .ic.red, .ic.rose, .ic.orange, .ic.orchid {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 3px 10px -2px rgba(0, 0, 0, .45);
}
.goal .ic, .ntab .ic, .conn-ic, .track-ic {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 3px 10px -2px rgba(0, 0, 0, .45);
}

/* Revenue card: the title and its key get room to breathe */
.fin-grid .wh { row-gap: 12px; margin-bottom: 26px; }
.fin-grid .wh .h { gap: 12px; }
.fin-grid .wh .legend { padding-left: 40px; gap: 22px; }

/* Ideal customer profile, trimmed: one line about them, three sections, the rest folds away */
.icp-who-l { margin: 4px 0 16px; color: var(--text-3); text-align: center; }
.icp-more { margin-top: 4px; }
.icp-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; color: var(--text-2); margin-bottom: 16px; }
.icp-more > summary::-webkit-details-marker { display: none; }
.icp-more > summary svg { width: 16px; height: 16px; transition: transform .15s; }
.icp-more[open] > summary svg { transform: rotate(180deg); }
.icp-more > summary:hover { color: var(--text); border-color: rgba(var(--m), .5); }
.icp-more > summary:focus-visible { outline: 2px solid rgb(var(--m)); outline-offset: 2px; }
.icp-more > .icp-sec + .icp-sec, .icp-more > summary + .icp-sec { margin-top: 0; }
.icp-more > .icp-sec { margin-bottom: 16px; }

/* Builder: a slim progress line instead of numbered pills; the person comes into focus */
.icp-steps { display: none; }
.icp-prog { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin: -4px 0 22px; }
.icp-prog span { display: block; height: 100%; border-radius: 4px; background: rgb(var(--m)); transition: width .3s ease; }
.icp-step-h { display: flex; align-items: baseline; gap: 12px; }
.icp-step-h h2 { margin: 0; }
.icp-step-h small { margin-left: auto; color: var(--text-3); font-weight: 600; }
.icp-forming svg.av2 { filter: grayscale(calc(1 - var(--f))) blur(calc((1 - var(--f)) * 9px)) drop-shadow(0 16px 30px rgba(0, 0, 0, .3)); opacity: calc(.35 + var(--f) * .65); transition: filter .5s ease, opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { .icp-forming svg.av2, .icp-prog span { transition: none; } }

/* Builder sections: one question per colored row, one open at a time (owner 2026-10-21: clean, easy to follow) */
.fsec { --tc: 191, 194, 199; border: 1px solid var(--line); border-radius: 16px; margin: 0 0 10px; background: rgba(255, 255, 255, .015); transition: border-color .15s, background .15s; }
.fsec.open { border-color: rgba(var(--tc), .45); background: rgba(var(--tc), .05); }
.fsec-h { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; border-radius: 16px; }
.fsec-h:focus-visible { outline: 2px solid rgb(var(--tc)); outline-offset: 2px; }
.fsec-t { font-weight: 700; color: var(--text); }
.fsec-v { margin-left: auto; min-width: 0; max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgb(var(--tc)); font-weight: 600; font-size: 14px; }
.fsec-v i { font-style: normal; color: var(--text-3); }
.fsec-c { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: transform .15s; }
.fsec.open .fsec-c { transform: rotate(180deg); }
.fsec-b { display: none; padding: 0 16px 18px 58px; }
.fsec.open .fsec-b { display: block; }
.fsec .icp-seg button[aria-pressed="true"] { background: rgb(var(--tc)); border-color: rgb(var(--tc)); color: #141416; }
.fsec .chip.on { background: rgba(var(--tc), .16); border-color: rgba(var(--tc), .5); color: var(--text); }
.fsec .icp-sugg { margin-top: 10px; }
.fsec .icp-add { margin-top: 10px; }
.money-in { position: relative; max-width: 260px; }
.money-in span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-weight: 700; pointer-events: none; }
.money-in input { padding-left: 30px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .fsec-b { padding-left: 16px; } .fsec-v { max-width: 38%; } }

/* Profile as a bio: their story, the basics, what makes them tick, then what to say */
.icp-bio h3, .icp-traits-c h3, .icp-say2 h3 { margin: 0 0 14px; font-size: 18px; }
.icp-bio p { margin: 0 0 14px; font-size: 16px; line-height: 1.75; color: var(--text-2); max-width: 68ch; }
.icp-bio p:first-of-type { color: var(--text); font-size: 17px; }
.icp-bio .icp-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.icp-bio .icp-facts div { padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.icp-bio .icp-facts dt { font-size: 12px; color: var(--text-3); }
.icp-bio .icp-facts dd { margin: 2px 0 0; font-weight: 700; }
.icp-traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.trait { --tc: 191, 194, 199; padding: 14px 16px; border-radius: 16px; background: rgba(var(--tc), .06); border: 1px solid rgba(var(--tc), .2); }
.trait h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14.5px; }
.trait ul { margin: 0; padding-left: 18px; color: var(--text-2); line-height: 1.6; }
.trait li + li { margin-top: 4px; }
.icp-say2 h4 { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; font-size: 15px; }
.icp-say2 .icp-pos { font-size: 16.5px; line-height: 1.65; }
.icp-prof .icp-say > .card + .card { margin-top: 16px; }

/* Avatars feel alive: a slow breath and sway, the odd glance; eyes follow the mouse only on hover */
.icp-body svg.av2 .av2-breathe, .pr-avatar svg.av2 .av2-breathe, .icp-hero-av svg.av2 .av2-breathe, .tpl-card:hover svg.av2 .av2-breathe, .pq-person:hover svg.av2 .av2-breathe, .icp-card:hover svg.av2 .av2-breathe {
  transform-box: view-box; transform-origin: 100px 200px; animation: av2-idle 6.5s ease-in-out infinite; animation-delay: var(--av2d, 0s); }
.icp-body svg.av2:not(.av2-track) .av2-pupils, .pr-avatar svg.av2:not(.av2-track) .av2-pupils, .icp-hero-av svg.av2:not(.av2-track) .av2-pupils { animation: av2-glance 9s ease-in-out infinite; animation-delay: var(--av2d, 0s); }
@keyframes av2-idle { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-1.5px) rotate(.7deg); } 55% { transform: translateY(-.4px) rotate(0); } 80% { transform: translateY(-1.3px) rotate(-.6deg); } }
@keyframes av2-glance { 0%, 38%, 100% { transform: translate(0, 0); } 44%, 58% { transform: translate(2px, -.6px); } 64%, 76% { transform: translate(-1.6px, .4px); } 82% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { svg.av2 .av2-breathe, svg.av2 .av2-pupils { animation: none !important; } }

/* Builder progress: one short bar per step; done ones filled, the current one lit */
.icp-prog { display: none; }
.icp-prog2 { display: flex; gap: 6px; margin: -2px 0 24px; }
.icp-prog2 button { all: unset; flex: 1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); cursor: pointer; transition: background .2s, box-shadow .2s; }
.icp-prog2 button:hover { background: rgba(255, 255, 255, .16); }
.icp-prog2 button.done { background: rgba(var(--m), .55); }
.icp-prog2 button.on { background: linear-gradient(90deg, rgb(var(--m)), rgba(var(--m), .7)); box-shadow: 0 0 12px rgba(var(--m), .45); }
.icp-prog2 button:focus-visible { outline: 2px solid rgb(var(--m)); outline-offset: 3px; }
.icp-step-h small { padding: 4px 10px; border-radius: 999px; background: rgba(var(--m), .12); color: rgb(var(--m)); font-size: 12.5px; font-weight: 700; }

/* How they look: a character creator. Tabs on top, rows you flip through, the person on a lit stage. */
.cc { padding: 0; overflow: hidden; }
.cc-tabs { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--m), .07), transparent); }
.cc-tabs [role="tab"] { all: unset; cursor: pointer; padding: 8px 20px; border-radius: 999px; font-weight: 700; color: var(--text-3); letter-spacing: .01em; transition: color .15s, background .15s; }
.cc-tabs [role="tab"]:hover { color: var(--text); }
.cc-tabs [role="tab"][aria-selected="true"] { color: #141416; background: rgb(var(--m)); box-shadow: 0 4px 16px rgba(var(--m), .35); }
.cc-arrow { all: unset; cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-3); }
.cc-arrow:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.cc-arrow svg { width: 16px; height: 16px; } .cc-arrow.fwd svg, .cc-step.fwd svg { transform: scaleX(-1); }
.cc-tabs button:focus-visible, .cc-step:focus-visible, .cc-name:focus-visible { outline: 2px solid rgb(var(--m)); outline-offset: 2px; }
.cc-main { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; min-height: 460px; }
.cc-list { padding: 18px; border-right: 1px solid var(--line); }
.cc-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; position: relative; }
.cc-row + .cc-row, .cc-opts + .cc-row { margin-top: 6px; }
.cc-row.on { background: rgba(var(--m), .1); }
.cc-row.on::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: rgb(var(--m)); }
.cc-name { all: unset; cursor: pointer; flex: 1; font-weight: 700; color: var(--text-2); }
.cc-row.on .cc-name { color: var(--text); }
.cc-cyc { display: flex; align-items: center; gap: 4px; }
.cc-step { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--text-3); }
.cc-step:hover { color: rgb(var(--m)); background: rgba(var(--m), .12); }
.cc-step svg { width: 15px; height: 15px; }
.cc-val { min-width: 128px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--text); }
.cc-val i { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.cc-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 8px 8px 14px; }
.cc-opts button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text-2); background: rgba(255, 255, 255, .05); }
.cc-opts button:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.cc-opts button[aria-checked="true"] { color: #141416; background: rgb(var(--m)); }
.cc-opts.cc-sw button { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.cc-opts.cc-sw button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--panel, #232327), 0 0 0 4px rgb(var(--m)); }
.cc-opts button:focus-visible { outline: 2px solid rgb(var(--m)); outline-offset: 2px; }
.cc-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px; background: radial-gradient(60% 55% at 50% 42%, rgba(var(--m), .16), transparent 70%), radial-gradient(120% 90% at 50% 100%, rgba(0, 0, 0, .35), transparent 60%); }
.cc-person svg.av2 { width: min(340px, 70%); margin: 0 auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45)); }
.cc-plate { text-align: center; } .cc-plate b { display: block; font-size: 20px; } .cc-plate span { color: var(--text-3); font-size: 14px; }
.cc-foot { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .cc-main { grid-template-columns: 1fr; } .cc-list { border-right: 0; border-top: 1px solid var(--line); order: 2; } .cc-tabs { overflow-x: auto; justify-content: flex-start; } }

/* Profile sections, FAQ style: one row per topic, open what you need */
.icp-bio.pad { padding: 26px 28px; }
.icp-bio h3 { font-size: 20px; margin-bottom: 14px; }
.pacc-list { display: grid; gap: 10px; margin-top: 16px; }
.pacc { --tc: 191, 194, 199; border: 1px solid var(--line); border-radius: 18px; background: var(--panel, rgba(255, 255, 255, .02)); transition: border-color .15s, background .15s; }
.pacc[open] { border-color: rgba(var(--tc), .4); background: linear-gradient(180deg, rgba(var(--tc), .06), transparent 140px); }
.pacc > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; border-radius: 18px; }
.pacc > summary::-webkit-details-marker { display: none; }
.pacc > summary:hover .pacc-t { color: rgb(var(--tc)); }
.pacc > summary:focus-visible { outline: 2px solid rgb(var(--tc)); outline-offset: 2px; }
.pacc-t { font-weight: 700; font-size: 16px; transition: color .15s; }
.pacc-h { margin-left: auto; color: var(--text-3); font-size: 13.5px; white-space: nowrap; }
.pacc-c { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: transform .2s; }
.pacc[open] .pacc-c { transform: rotate(180deg); }
.pacc-b { padding: 2px 20px 20px 62px; }
.pacc-b h4 { margin: 22px 0 10px; font-size: 14.5px; color: var(--text-2); }
.pacc-b .icp-pos { margin: 0; font-size: 16.5px; line-height: 1.65; }
.pacc .icp-traits { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.trait-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trait-chips span { padding: 5px 11px; border-radius: 999px; font-size: 13.5px; line-height: 1.35; background: rgba(var(--tc), .14); color: var(--text); }
.trait { background: rgba(var(--tc), .05); border-color: rgba(var(--tc), .16); }
@media (max-width: 720px) { .pacc-b { padding-left: 20px; } .pacc-h { display: none; } }

/* Bio card: a colored header, the bio in their voice, and the basics as colored tiles */
.icp-bio2 { padding: 0; overflow: hidden; }
.bio-h { display: flex; align-items: center; gap: 12px; padding: 18px 26px; background: linear-gradient(100deg, rgba(240, 149, 79, .2), rgba(240, 149, 79, .04)); border-bottom: 1px solid rgba(240, 149, 79, .22); }
.bio-h h3 { margin: 0; font-size: 19px; }
.bio-note { margin-left: auto; font-size: 13px; color: var(--text-3); }
.bio-b { padding: 22px 26px 6px; }
.bio-b p { margin: 0 0 14px; font-size: 16px; line-height: 1.75; color: var(--text-2); max-width: 70ch; }
.bio-b p:first-child { font-size: 17.5px; color: var(--text); }
.bio-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 18px 26px 24px; }
.bio-facts > div { --tc: 191, 194, 199; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--tc), .08); border: 1px solid rgba(var(--tc), .2); }
.bio-facts .ic { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.bio-facts > div > span:not(.ic) { display: flex; flex-direction: column; min-width: 0; }
.bio-facts dt { font-size: 12px; line-height: 1.2; color: var(--text-3); }
.bio-facts dd { margin: 3px 0 0; font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--text); }

/* Topic rows wear their color all the time, not only when open */
.pacc { background: linear-gradient(100deg, rgba(var(--tc), .13), rgba(var(--tc), .04)); border-color: rgba(var(--tc), .28); }
.pacc:hover { border-color: rgba(var(--tc), .5); }
.pacc[open] { background: linear-gradient(180deg, rgba(var(--tc), .12), rgba(var(--tc), .03) 160px); border-color: rgba(var(--tc), .5); }
.pacc > summary .pacc-t { color: var(--text); }
.pacc > summary:hover .pacc-t { color: var(--text); }
.pacc-c { margin-left: auto; color: rgb(var(--tc)); }
@media (max-width: 720px) { .bio-h, .bio-b, .bio-facts { padding-left: 18px; padding-right: 18px; } }
.bio-h h3 { color: var(--text); }
.bio-h { background: linear-gradient(100deg, rgba(67, 195, 183, .2), rgba(67, 195, 183, .04)); border-bottom-color: rgba(67, 195, 183, .24); }
.pacc-b .trait h4 { margin: 0 0 12px; color: var(--text); }
.pacc-b .icp-avoid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pacc-b .icp-avoid li { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; background: rgba(var(--tc), .08); border: 1px solid rgba(var(--tc), .18); }
.pacc-b .icp-avoid li::before { content: ''; position: absolute; left: 16px; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: rgb(var(--tc)); transform: translateY(-50%) rotate(45deg); }
.pacc-b .icp-avoid li::after { content: ''; position: absolute; left: 16px; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: rgb(var(--tc)); transform: translateY(-50%) rotate(-45deg); }

/* Section colors win over each component default */
.pacc.c-gold, .trait.c-gold, .fsec.c-gold, .bio-facts > .c-gold { --tc: 212, 184, 134; }
.pacc.c-teal, .trait.c-teal, .fsec.c-teal, .bio-facts > .c-teal { --tc: 67, 195, 183; }
.pacc.c-violet, .trait.c-violet, .fsec.c-violet, .bio-facts > .c-violet { --tc: 160, 138, 242; }
.pacc.c-green, .trait.c-green, .fsec.c-green, .bio-facts > .c-green { --tc: 76, 195, 138; }
.pacc.c-silver, .trait.c-silver, .fsec.c-silver, .bio-facts > .c-silver { --tc: 191, 194, 199; }
.pacc.c-amber, .trait.c-amber, .fsec.c-amber, .bio-facts > .c-amber { --tc: 226, 174, 79; }
.pacc.c-rose, .trait.c-rose, .fsec.c-rose, .bio-facts > .c-rose { --tc: 229, 139, 176; }
.pacc.c-orange, .trait.c-orange, .fsec.c-orange, .bio-facts > .c-orange { --tc: 240, 149, 79; }
.pacc.c-orchid, .trait.c-orchid, .fsec.c-orchid, .bio-facts > .c-orchid { --tc: 214, 128, 220; }
.pacc.c-blue, .trait.c-blue, .fsec.c-blue, .bio-facts > .c-blue { --tc: 111, 163, 232; }

/* Premium color: strong at the leading edge, fading to nothing (owner 2026-10-21) */
.pacc { background: linear-gradient(90deg, rgba(var(--tc), .2) 0%, rgba(var(--tc), .07) 28%, rgba(var(--tc), 0) 62%), var(--panel, #232327); border-color: rgba(255, 255, 255, .07); box-shadow: inset 3px 0 0 rgba(var(--tc), .85); }
.pacc:hover { border-color: rgba(var(--tc), .35); }
.pacc[open] { background: linear-gradient(90deg, rgba(var(--tc), .2) 0%, rgba(var(--tc), .06) 28%, rgba(var(--tc), 0) 62%) top / 100% 72px no-repeat, var(--panel, #232327); border-color: rgba(var(--tc), .3); }
.trait { background: linear-gradient(135deg, rgba(var(--tc), .16), rgba(var(--tc), .03) 45%, transparent 75%); border-color: rgba(255, 255, 255, .07); }
.bio-h { background: linear-gradient(90deg, rgba(67, 195, 183, .22), rgba(67, 195, 183, .06) 30%, transparent 65%); border-bottom-color: rgba(255, 255, 255, .07); }

.icp-bio2 .bio-facts { padding: 18px 26px 24px; margin: 0; }

.bio-more { all: unset; cursor: pointer; font-weight: 700; color: rgb(67, 195, 183); white-space: nowrap; }
.bio-more:hover { text-decoration: underline; }
.bio-more:focus-visible { outline: 2px solid rgb(67, 195, 183); outline-offset: 2px; border-radius: 4px; }

/* Even tints, no fades (owner 2026-10-21); bio text all white and easy to read */
.pacc, .pacc[open] { background: rgba(var(--tc), .09); border-color: rgba(var(--tc), .3); box-shadow: none; }
.pacc:hover { border-color: rgba(var(--tc), .5); }
.trait { background: rgba(var(--tc), .08); border-color: rgba(var(--tc), .22); }
.bio-h { background: rgba(67, 195, 183, .12); border-bottom-color: rgba(67, 195, 183, .25); }
.bio-facts > div { background: rgba(var(--tc), .1); border-color: rgba(var(--tc), .26); }
.bio-b p, .bio-b p:first-child { color: var(--text); font-size: 16.5px; line-height: 1.75; }

/* Basics: even columns; the last tile stretches to finish its row */
.bio-facts > div:last-child:nth-child(4n + 3) { grid-column: span 2; }
.bio-facts > div:last-child:nth-child(4n + 2) { grid-column: span 3; }
.bio-facts > div:last-child:nth-child(4n + 1) { grid-column: span 4; }
@media (max-width: 1100px) { .bio-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bio-facts > div:last-child { grid-column: auto; } .bio-facts > div:last-child:nth-child(odd) { grid-column: span 2; } }
.icp-prof > * { min-width: 0; }
/* Bio: the opening in white, the rest a soft gray */
.bio-b p { color: var(--text-2); font-size: 16px; line-height: 1.75; }
.bio-b p:first-child { color: var(--text); font-size: 17px; }
/* Avatars at rest: brows lift now and then, a small smile, a slow nod */
.icp-body svg.av2 .av2-brows, .pr-avatar svg.av2 .av2-brows, .icp-hero-av svg.av2 .av2-brows { animation: av2-brow 7.5s ease-in-out infinite; animation-delay: var(--av2d, 0s); }
.icp-body svg.av2 .av2-mouth, .pr-avatar svg.av2 .av2-mouth, .icp-hero-av svg.av2 .av2-mouth { transform-box: fill-box; transform-origin: center; animation: av2-smile 11s ease-in-out infinite; animation-delay: var(--av2d, 0s); }
@keyframes av2-brow { 0%, 62%, 74%, 100% { transform: translateY(0); } 66%, 70% { transform: translateY(-2px); } }
@keyframes av2-smile { 0%, 40%, 60%, 100% { transform: scale(1); } 48%, 54% { transform: scale(1.08, 1.12); } }
@media (prefers-reduced-motion: reduce) { svg.av2 .av2-brows, svg.av2 .av2-mouth { animation: none !important; } }
/* Practice start: a small picture beside "Sell to Dana", like a chat app greeting */
.pr-hello { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 6px; }
.pr-hello h1 { margin: 0; }
.pr-avatar.sm svg.av2 { width: 64px; height: 64px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.pr-hello h1 { color: var(--text); }

/* Brand marks: the brand's color with a white mark, or one of our colors if the person picks one */
.ic.brand { background-color: var(--bc, #3a3a40); background-image: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 10px -2px rgba(0, 0, 0, .45); color: #fff; }
.ic.brand.gold, .ic.brand.teal, .ic.brand.violet, .ic.brand.blue, .ic.brand.green, .ic.brand.silver, .ic.brand.rose, .ic.brand.orange, .ic.brand.orchid, .ic.brand.amber { color: #141416; }
.ic.brand svg { width: 15px; height: 15px; stroke: none; }
.conn-ic.brand { background: var(--bc); color: #fff; }
.conn-ic.brand svg { width: 20px; height: 20px; stroke: none; }
.pick-g .ic.brand { width: 28px; height: 28px; }
.bio-facts .ic { display: grid; place-items: center; }

/* Live practice score: a running score, one chip per stage, and what the last message did */
.ps-row { display: flex; align-items: center; gap: 14px; }
.ps-total { display: grid; place-items: center; min-width: 64px; padding: 6px 10px; border-radius: 14px; background: var(--card-3); line-height: 1.1; }
.ps-total b { font-size: 22px; font-weight: 800; } .ps-total small { font-size: 11.5px; color: var(--text-3); }
.ps-total.hi { background: rgba(76, 195, 138, .16); color: #6fdcaa; } .ps-total.mid { background: rgba(212, 184, 134, .16); color: var(--gold); } .ps-total.lo { background: rgba(239, 107, 107, .14); color: #f08a8a; }
.ps-stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; flex: 1; min-width: 0; }
.ps-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; background: var(--card-3); border: 1px solid transparent; min-width: 0; }
.ps-chip i { font-style: normal; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ps-chip b { font-size: 14px; } .ps-chip.empty b { color: var(--text-3); }
.ps-chip.hi { background: rgba(76, 195, 138, .12); } .ps-chip.hi b { color: #6fdcaa; }
.ps-chip.mid { background: rgba(212, 184, 134, .12); } .ps-chip.mid b { color: var(--gold); }
.ps-chip.lo { background: rgba(239, 107, 107, .1); } .ps-chip.lo b { color: #f08a8a; }
.ps-chip.cur { border-color: rgba(var(--m), .7); box-shadow: 0 0 0 1px rgba(var(--m), .25); }
.ps-last { margin: 0; font-size: 13.5px; color: var(--text-2); } .ps-last b { margin-right: 6px; color: var(--text); }
.ps-last.good b { color: #6fdcaa; } .ps-last.bad b { color: #f08a8a; }
.ps-learn > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.ps-learn > summary::-webkit-details-marker { display: none; }
.ps-learn > summary svg { width: 15px; height: 15px; } .ps-learn .ps-c { transition: transform .15s; } .ps-learn[open] .ps-c { transform: rotate(180deg); }
.ps-learn > summary:hover { color: var(--text); } .ps-learn > summary:focus-visible { outline: 2px solid rgb(var(--m)); outline-offset: 2px; border-radius: 6px; }
.ps-learn ul { margin: 8px 0 0; padding-left: 20px; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.pq-pat { padding: 22px 24px; margin-top: 16px; }
.pq-pat h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; } .pq-pat h3 svg { width: 18px; height: 18px; color: rgb(var(--m)); }
.pq-pat .muted { margin: 0 0 14px; }
.ps-stages.wide { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-bottom: 14px; }
.pq-pat-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pq-pat-g > div { padding: 12px 14px; border-radius: 14px; background: var(--card-3); } .pq-pat-g .wide { grid-column: 1 / -1; }
.pq-pat-g small { display: block; font-size: 12px; color: var(--text-3); } .pq-pat-g b { font-size: 15px; }
.icp-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; }
.icp-tabs button:hover { color: var(--text); } .icp-tabs button.on { color: var(--text); border-bottom-color: var(--gold); } .icp-tabs button:focus-visible { outline: 2px solid rgb(var(--m)); outline-offset: 2px; border-radius: 6px; }
.menu .menu-h { display: block; padding: 8px 12px 4px; font-size: 12px; color: var(--text-3); font-weight: 600; }
@media (max-width: 760px) { .ps-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Help start: the ship beside the title, like "Sell to" in practice */
.help-start .pr-hello { margin-bottom: 0; }
.help-start .pr-hello h2 { margin: 0; }
.help-ship { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(160deg, rgba(212, 184, 134, .28), rgba(212, 184, 134, .08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 10px 26px rgba(0, 0, 0, .35); }
.help-ship.xs { width: 34px; height: 34px; border-radius: 10px; }
.pr-side-h { display: flex; align-items: center; gap: 10px; padding: 2px 4px 6px; color: var(--text); font-weight: 600; font-size: 15px; }
.pr-side-foot { margin-top: auto; padding-top: 10px; }
.pr-side-foot .btn { width: 100%; justify-content: center; }
.help-pr .pr-start { gap: 14px; }
.help-pr .pr-start .composer { width: min(720px, 100%); }
.help-pr .pr-start .sugg { justify-content: center; max-width: 720px; }
.help-pr .pr-start > p.pr-line { margin-bottom: 2px; }
.help-pr .pr-main .chat-wrap { width: 100%; padding: 20px 16px 0; flex: 1; overflow-y: auto; }
.help-pr .pr-main .composer-dock { padding: 14px 16px 18px; }
.msg.bot .bot-av { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(160deg, rgba(212, 184, 134, .26), rgba(212, 184, 134, .08)); display: grid; place-items: center; flex: none; }
/* Reading voice picker */
.vpick { display: grid; gap: 6px; }
.vp-h { font-size: 12px; color: var(--text-3); }
.vp-g { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-g button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; }
.vp-g button svg { width: 13px; height: 13px; }
.vp-g button:hover { color: var(--text); border-color: rgba(var(--m), .5); }
.vp-g button[aria-pressed="true"] { background: rgb(var(--m)); border-color: rgb(var(--m)); color: #141416; }
.vp-g button:focus-visible { outline: 2px solid rgb(var(--m)); outline-offset: 2px; }
/* First Mate card */
.mate { display: grid; gap: 14px; text-align: left; }
.mate-h { display: flex; align-items: center; gap: 14px; }
.mate-h h2 { margin: 0; font-size: 20px; } .mate-h p { margin: 2px 0 0; color: var(--text-3); font-size: 14px; }
.mate-av { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; font-weight: 800; font-size: 18px; color: #141416; background: linear-gradient(160deg, #E6CFA2, #C9A86E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 20px rgba(0, 0, 0, .35); }
.mate-note { margin: 0; color: var(--text-2); }
.mate-thread { display: grid; gap: 8px; max-height: 260px; overflow: auto; padding: 4px; }
.mate-m { max-width: 85%; } .mate-m.me { margin-left: auto; text-align: right; }
.mate-m small { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.mate-m p { margin: 0; display: inline-block; padding: 9px 13px; border-radius: 14px; background: var(--card-3); text-align: left; }
.mate-m.me p { background: rgba(212, 184, 134, .18); }
.mate textarea { width: 100%; resize: vertical; }
.mate-a { display: flex; justify-content: flex-end; gap: 8px; }

.mates { display: grid; gap: 6px; min-width: 280px; }
.mate-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mate-r .btn svg { width: 14px; height: 14px; }

/* First Mate card, centered: picture, name, title, then message and email */
.mate-h { flex-direction: column; text-align: center; gap: 4px; }
.mate-av { width: 84px; height: 84px; border-radius: 26px; font-size: 26px; margin-bottom: 8px; }
.mate-h h2 { font-size: 22px; }
.mate-t { margin: 0; color: rgb(212, 184, 134); font-weight: 700; }
.mate-co { margin: 0; color: var(--text-3); font-size: 13.5px; }
.mate-a { justify-content: center; }
.p-title { display: block; width: 100%; max-width: 220px; margin: 2px 0; padding: 2px 6px; font-size: 13px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-2); }
.p-title:hover, .p-title:focus { border-color: var(--line-2); background: var(--card-2); }
/* Unfinished customers only: red under half, yellow otherwise */
.icp-done.low .gbar i { background: #EF6B6B; } .icp-done.mid .gbar i { background: #E2AE4F; }
.icp-done.low small { color: #f08a8a; } .icp-done.mid small { color: #E2AE4F; }

/* Calendar: each platform's own mark on its own color */
.cal-mk { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--pc); color: #fff; }
.cal-mk svg { width: 11px; height: 11px; stroke-width: 2.4; }
.cal-mk svg path[fill="currentColor"] { stroke: none; }
.cr-pl { display: inline-flex; align-items: center; gap: 8px; }
.cal-dd { display: flex; align-items: center; gap: 10px; }
.cal-dd .cal-mk { width: 30px; height: 30px; border-radius: 9px; } .cal-dd .cal-mk svg { width: 16px; height: 16px; }
.cal-dd .dd { flex: 1; }

/* Onboard a client: plan cards and First Mate chips instead of browser dropdowns */
.modal:has(.ob), .modal:has(.mate) { width: min(700px, 94vw); text-align: left; }
.nc.ob { width: 100%; }
.mate { min-width: 0; }
.ob fieldset { border: 0; margin: 4px 0 0; padding: 0; }
.ob legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.ob-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob-plans legend { grid-column: 1 / -1; }
.ob-plan, .ob-mate { position: relative; cursor: pointer; }
.ob-plan input, .ob-mate input { position: absolute; opacity: 0; pointer-events: none; }
.ob-pc { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card-2); transition: border-color .15s, background .15s; }
.ob-pc b { font-size: 15.5px; } .ob-pc em { font-style: normal; color: var(--gold); font-weight: 700; } .ob-pc small { color: var(--text-3); }
.ob-plan:hover .ob-pc { border-color: rgba(212, 184, 134, .5); }
.ob-plan input:checked + .ob-pc { border-color: var(--gold); background: rgba(212, 184, 134, .1); box-shadow: 0 0 0 1px var(--gold); }
.ob-plan input:focus-visible + .ob-pc, .ob-mate input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.ob-mates { display: flex; flex-wrap: wrap; gap: 8px; } .ob-mates legend { width: 100%; }
.ob-mate span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); font-weight: 600; }
.ob-mate span i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; color: #141416; background: linear-gradient(160deg, #E6CFA2, #C9A86E); }
.ob-mate span small { color: var(--text-3); font-weight: 500; }
.ob-mate input:checked + span { border-color: var(--gold); background: rgba(212, 184, 134, .12); }
/* Invite preview: the branded email as the client will see it */
.mail-pv { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: #f6f4ef; color: #1d1d20; text-align: left; }
.mail-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #141416; color: #fff; border-bottom: 3px solid #D4B886; }
.mail-top small { display: block; color: #b9b9c0; font-size: 12px; }
.mail-body { padding: 18px 22px; } .mail-body h3 { margin: 0 0 8px; font-size: 18px; } .mail-body p { margin: 0 0 10px; line-height: 1.55; }
.mail-cta span { display: inline-block; padding: 10px 20px; border-radius: 999px; background: #D4B886; color: #141416; font-weight: 700; }
.mail-code { color: #5c5c63; font-size: 14px; }
@media (max-width: 640px) { .ob-plans { grid-template-columns: 1fr; } }

/* Onboard a client page */
.ob-wrap { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 24px; align-items: start; }
.ob-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: sticky; top: 16px; }
.ob-steps button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--text-3); font-weight: 600; }
.ob-steps button span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--card-3); font-size: 13px; color: var(--text-2); }
.ob-steps button span svg { width: 14px; height: 14px; }
.ob-steps li.on button { background: rgba(var(--m), .12); color: var(--text); } .ob-steps li.on button span { background: rgb(var(--m)); color: #141416; }
.ob-steps li.done button { color: var(--text-2); } .ob-steps li.done button span { background: rgba(76, 195, 138, .2); color: #6fdcaa; }
.ob-steps button:focus-visible { outline: 2px solid rgb(var(--m)); outline-offset: 2px; }
.ob-card { padding: 28px; display: grid; gap: 16px; } .ob-card h2 { margin: 0; } .ob-card > .muted { margin: -8px 0 0; }
.opt { font-style: normal; font-weight: 500; color: var(--text-3); font-size: 12.5px; }
.ob-logo { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 14px; border: 1px dashed var(--line-2); }
.ob-logo-pv { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--card-3); color: var(--text-3); overflow: hidden; flex: none; } .ob-logo-pv img { width: 100%; height: 100%; object-fit: contain; }
.ob-logo p { margin: 2px 0 8px; } .ob-logo .btn + .btn { margin-left: 6px; }
.ob-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ob-pgrid.one { grid-template-columns: minmax(0, 320px); }
.ob-pcard { --tc: 191, 194, 199; all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 3px; padding: 16px; border-radius: 16px; border: 1px solid rgba(var(--tc), .28); background: rgba(var(--tc), .06); }
.ob-pcard.c-teal { --tc: 67, 195, 183; } .ob-pcard.c-violet { --tc: 160, 138, 242; } .ob-pcard.c-gold { --tc: 212, 184, 134; } .ob-pcard.c-silver { --tc: 191, 194, 199; }
.ob-pdot { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--tc)); margin-bottom: 6px; }
.ob-pcard b { font-size: 16px; } .ob-pcard em { font-style: normal; font-weight: 700; color: rgb(var(--tc)); } .ob-pcard small { color: var(--text-3); line-height: 1.4; }
.ob-pcard:hover { border-color: rgba(var(--tc), .6); } .ob-pcard[aria-pressed="true"] { border-color: rgb(var(--tc)); background: rgba(var(--tc), .14); box-shadow: 0 0 0 1px rgb(var(--tc)); }
.ob-pcard:focus-visible, .ob-mgr:focus-visible { outline: 2px solid rgb(var(--m)); outline-offset: 2px; }
.ob-sub { margin: 8px 0 0; font-size: 15px; }
.ob-mgrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob-mgr { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card-2); }
.ob-mgr i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-style: normal; font-weight: 800; color: #141416; background: linear-gradient(160deg, #E6CFA2, #C9A86E); }
.ob-mgr span { display: grid; } .ob-mgr small { color: var(--text-3); }
.ob-mgr[aria-pressed="true"] { border-color: var(--gold); background: rgba(212, 184, 134, .1); box-shadow: 0 0 0 1px var(--gold); }
.ob-stripe { justify-self: start; }
.ob-note { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-2); } .ob-note p { margin: 2px 0 8px; } .ob-note > svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
.ob-rev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ob-rev div { padding: 12px 14px; border-radius: 12px; background: var(--card-2); } .ob-rev dt { font-size: 12px; color: var(--text-3); } .ob-rev dd { margin: 2px 0 0; font-weight: 700; }
.ob-nav { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .ob-wrap { grid-template-columns: 1fr; } .ob-steps { position: static; grid-template-columns: repeat(3, 1fr); } .ob-pgrid, .ob-mgrs, .ob-rev { grid-template-columns: 1fr; } }

/* Client onboarding tracker */
.obt { margin-bottom: 16px; }
.obt-n { font-weight: 700; color: var(--text-2); }
.obt-bar { height: 8px; border-radius: 8px; background: var(--card-3); overflow: hidden; margin: 2px 0 12px; }
.obt-bar i { display: block; height: 100%; border-radius: 8px; background: var(--gold); transition: width .3s; }
.obt.done .obt-bar i { background: #4CC38A; }
.obt-next { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--text-2); } .obt-next svg { width: 15px; height: 15px; color: var(--gold); }
.obt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.obt-list li > button, .obt-list li > div { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.obt-list li > button { cursor: pointer; } .obt-list li > button:hover { border-color: rgba(212, 184, 134, .5); }
.obt-list li > button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.obt-c { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; }
.obt-c svg { width: 13px; height: 13px; }
.is-done .obt-c { background: #4CC38A; border-color: #4CC38A; color: #0B1A12; }
.obt-l { display: grid; font-weight: 600; } .obt-l small { font-weight: 500; color: var(--text-3); font-size: 12px; }
.is-done .obt-l { color: var(--text-2); }
.ob-tag { display: block; color: var(--gold); font-weight: 600; } .ob-tag.ok { color: #6fdcaa; }
@media (max-width: 900px) { .obt-list { grid-template-columns: 1fr; } }
.obt-next svg { transform: rotate(-90deg); }
.obt .wh { flex-wrap: nowrap; }
.pv .ph { font-style: normal; color: var(--text-3); opacity: .7; }

/* Profile photos */
img.pic { object-fit: cover; display: block; }
.user img.me { width: 100%; height: 100%; border-radius: 50%; }
img.mate-av { width: 96px; height: 96px; border-radius: 28px; margin-bottom: 8px; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
.person img.av { width: 36px; height: 36px; border-radius: 50%; flex: none; }
img.ob-face, span.ob-face { width: 40px; height: 40px; border-radius: 12px; flex: none; }
span.ob-face { display: grid; place-items: center; font-weight: 800; color: #141416; background: linear-gradient(160deg, #E6CFA2, #C9A86E); }
.ph-row { display: flex; align-items: center; gap: 10px; }
.ph-big { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; color: #141416; background: linear-gradient(160deg, #E6CFA2, #C9A86E); }
/* Title in white, company in gray */
.mate-t { color: var(--text); }
/* Platform settings: a full-width email box and a proper account managers list */
.plat-in { width: 100%; min-width: 280px; }
.plat-sec { padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--line); }
.plat-sec h3 { margin: 0; font-size: 15px; } .plat-sec > .muted { margin: 4px 0 12px; }
.mates { display: grid; gap: 0; min-width: 0; }
.mate-r { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mate-r:last-child { border-bottom: 0; }
.mate-r .mate-co { flex: 1; min-width: 0; font-weight: 600; color: var(--text); font-size: 15px; margin: 0; }
.mate-r .btn { display: inline-flex; align-items: center; gap: 8px; }
.mini { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; color: #141416; background: linear-gradient(160deg, #E6CFA2, #C9A86E); }
.mate-r .btn img.mini, img.mini { width: 22px !important; height: 22px !important; border-radius: 50%; object-fit: cover; flex: none; margin: 0; }
.plat-sec { border-top: 0; margin-top: 0; }

/* Preferences: compact pickers */
.pref-pick { display: flex; align-items: center; gap: 8px; } .pref-pick .dd { min-width: 240px; }
.ok-t { color: #6fdcaa; font-weight: 600; }
/* Profile photo stays inside its circle in the header */
.topnav .user img.me, .user img.me { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* Company brand settings */
.brand-sec { padding: 18px 0 6px; } .brand-sec h3 { margin: 0; font-size: 15px; } .brand-sec > .muted { margin: 4px 0 6px; }
.cpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp-sw { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.cp-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold); }
.cp-sw:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cp-hex { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card-2); }
.cp-hex span { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.cp-hex input { width: 78px; border: 0; background: none; padding: 2px; font: inherit; font-size: 13px; color: var(--text); }
.fpick { display: flex; gap: 8px; flex-wrap: wrap; }
.fpick button { display: grid; justify-items: center; gap: 2px; width: 76px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); cursor: pointer; }
.fpick button b { font-size: 22px; } .fpick button small { font-family: inherit; color: var(--text-3); font-size: 12px; }
.fpick button[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.brand-pv { margin: 10px 0 4px; border-radius: 16px; overflow: hidden; background: #f6f4ef; color: #1d1d20; font-family: var(--bf); max-width: 460px; }
.bp-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--b2); color: #fff; border-bottom: 4px solid var(--b1); }
.bp-top span { opacity: .75; font-size: 13px; } .brand-pv p { margin: 14px 18px; }
.bp-btn { display: inline-block; margin: 0 18px 16px; padding: 8px 16px; border-radius: 999px; background: var(--b1); color: #141416; font-weight: 700; }
/* A partner's client's report wears that company's brand */
.paper.branded { font-family: var(--bf); } .paper.branded .r-cover { background: var(--b2); border-bottom-color: var(--b1); }

.seat-form { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 8px; }
@media (max-width: 760px) { .seat-form { grid-template-columns: 1fr; } }
.metric[data-wid="weak"] { --tc: 229, 139, 176; }
[data-wid="weak"] .spark path { stroke: #E58BB0; }

/* Agency Management: black with the ship's wheel */
.mod-black, body.mod-black { --m: 232, 232, 236; }
.c-black, .c-black.c-black { --tc: 232, 232, 236; }
.ic.black { background-color: #0b0b0d; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75), 0 3px 10px -2px rgba(0, 0, 0, .5); }
.menu .mod-hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--line-2); }

/* Agreements */
.ag { padding: 24px; } .ag h3 { margin: 0 0 10px; font-size: 15px; } .ag-h { margin-top: 22px !important; color: var(--text-2); }
.ag-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); margin-bottom: 8px; }
.ag-row.cur { border-color: rgba(212, 184, 134, .5); }
.ag-t { flex: 1; display: grid; min-width: 0; } .ag-t small { color: var(--text-3); }
.ag-cur { color: var(--gold); font-weight: 700; font-size: 13px; }
.ag-note { margin: 14px 0 0; }
.plat-page { padding: 24px; }
.savebar.steady { animation: none; }

/* Onboarding plan step: two clear colored sections */
.ob-band { --bc: 212, 184, 134; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(var(--bc), .12); border: 1px solid rgba(var(--bc), .35); }
.ob-band.red { --bc: 239, 107, 107; margin-top: 10px; }
.ob-band svg { width: 18px; height: 18px; color: rgb(var(--bc)); flex: none; }
.ob-band b { display: block; } .ob-band small { color: var(--text-2); }
.ob-card h2 { color: var(--text); }
.ob-err { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(239, 107, 107, .12); border: 1px solid rgba(239, 107, 107, .4); color: #f3a0a0; font-weight: 600; }
.ob-err svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------- Agreements: client signing */
.ag-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.ag-draft { background: rgba(191, 194, 199, .14); color: var(--text-2); }
.ag-sent { background: rgba(212, 184, 134, .16); color: var(--gold); }
.ag-signed { background: rgba(76, 195, 138, .16); color: var(--good); }
.agc-list { display: grid; gap: 8px; margin-top: 10px; }
.agc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.agc.signed { border-color: rgba(76, 195, 138, .35); }
.agc .av { width: 34px; height: 34px; flex: none; font-size: 13px; }
.agc-t { flex: 1; display: grid; min-width: 0; }
.agc-t b { color: var(--text); font-size: 14.5px; }
.agc-t small { color: var(--text-3); font-size: 12.5px; }
.agc .btn { flex: none; }
.ag-h { margin: 18px 0 8px; }
.empty-big.sm { padding: 30px 24px; }
.ag-modal { display: grid; gap: 4px; max-width: 520px; }
.ag-modal h2 { margin: 0; color: var(--text); }
.ag-modal > p { margin: 0 0 6px; }
.ag-modal h3 { margin: 14px 0 6px; font-size: 14px; color: var(--text); }
.ag-state { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(76, 195, 138, .1); border: 1px solid rgba(76, 195, 138, .3); margin: 6px 0; }
.ag-state.pend { background: rgba(212, 184, 134, .1); border-color: rgba(212, 184, 134, .32); }
.ag-state b { display: block; color: var(--text); }
.ag-sum { display: grid; gap: 1px; margin: 4px 0 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.ag-sum > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 11px 14px; background: var(--card-2); }
.ag-sum dt { margin: 0; color: var(--text-3); font-size: 13px; }
.ag-sum dd { margin: 0; color: var(--text); font-size: 13.5px; }
.ag-trail { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ag-trail li { font-size: 13px; color: var(--text); padding: 8px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); }
/* Onboarding agreement step */
.ag-pack { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-2); margin: 4px 0 14px; }
.ag-pack b { display: block; color: var(--text); }
.ag-pack small { color: var(--text-2); }
.ag-num .ag-numin { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text-3); }
.ag-num .ag-numin input { height: 42px; padding: 0; border: 0; background: none; box-shadow: none; }
.ag-num .ag-numin input:focus { outline: none; box-shadow: none; }
.ag-pct { font-style: normal; color: var(--text-3); }
.ag-check { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); margin-top: 14px; cursor: pointer; }
.ag-check input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--gold); }
.ag-check b { display: block; color: var(--text); font-size: 14px; }
.ag-check small { display: block; font-size: 12.5px; line-height: 1.45; }
.ag-prev { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.ag-prev h3 { margin: 0 0 8px; font-size: 14px; color: var(--text); }
/* Signing page (sign.html, on the auth sea theme) */
.sign-main { width: min(600px, 100%); }
.au3 .sign-card { padding: 30px 32px 26px; }
.sign-form { width: 100%; }
.sign-pill { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--gold); background: rgba(212, 184, 134, .14); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.sign-form h1 { font-size: 26px; margin: 0 0 8px; }
.sign-sum { margin: 16px 0 4px; }
.sign-fine { margin: 10px 2px 0; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.sign-h { margin: 22px 0 2px; font-size: 15px; font-weight: 700; color: var(--text); }
.sign-sig { font-family: 'Instrument Serif', Georgia, serif; font-size: 22px !important; font-style: italic; }
.sign-agree { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-2); cursor: pointer; }
.sign-agree input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--gold); }
.sign-paysub { margin: 2px 0 0; }
.sign-stripe { display: inline-flex; justify-content: center; width: 100%; height: 46px; align-items: center; box-sizing: border-box; background: var(--card-2); color: var(--text); border: 1px solid var(--line-2); font-weight: 600; }
.sign-stripe:hover { background: var(--card-3); }
.sign-paid { margin-top: 4px; }
/* Agreement obligations (what Black Mast provides) */
.ag-obl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ag-obl li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); }
.ag-obl li > svg { width: 16px; height: 16px; flex: none; color: var(--good); }
.ag-obl li.tone-bad > svg { color: var(--bad); }
.ag-obl span { flex: 1; display: grid; min-width: 0; }
.ag-obl b { color: var(--text); font-size: 13.5px; }
.ag-obl small { color: var(--text-3); font-size: 12.5px; }
.ag-obl-n { font-style: normal; font-size: 12px; font-weight: 700; color: var(--good); white-space: nowrap; }
.ag-obl li.tone-bad .ag-obl-n { color: var(--bad); }
/* ---------------------------------------------------------- Content Fit (calendar post) */
.cf-wrap { border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 4px; }
.cf-empty { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.cf-empty p { margin: 2px 0 8px; }
.cf-ctl { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; }
.cf-for { font-size: 13.5px; color: var(--text-2); }
.cf-for b, .cf-name { color: var(--text); }
.cf-goal { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-3); margin-bottom: 10px; }
.cf-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-2); }
.cf-head.cf-good { border-color: rgba(76, 195, 138, .4); background: rgba(76, 195, 138, .08); }
.cf-head.cf-ok { border-color: rgba(226, 174, 79, .4); background: rgba(226, 174, 79, .08); }
.cf-head.cf-bad { border-color: rgba(239, 107, 107, .4); background: rgba(239, 107, 107, .08); }
.cf-score { display: flex; align-items: baseline; gap: 2px; }
.cf-score b { font-size: 30px; font-weight: 800; color: var(--text); line-height: 1; }
.cf-score small { color: var(--text-3); font-size: 13px; }
.cf-good .cf-score b { color: var(--good); } .cf-ok .cf-score b { color: var(--warn); } .cf-bad .cf-score b { color: var(--bad); }
.cf-vd { display: grid; gap: 3px; }
.cf-vd > b { font-size: 15px; color: var(--text); }
.cf-vd span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.cf-vd span svg { width: 13px; height: 13px; }
.cf-why { margin: 10px 2px; font-size: 13px; font-style: italic; color: var(--text-2); }
.cf-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 10px 0; }
.cf-dim { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.cf-dim span { width: 72px; flex: none; }
.cf-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.cf-bar b { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.cf-bar.ok b { background: var(--warn); } .cf-bar.bad b { background: var(--bad); }
.cf-flags { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.cf-flags li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 8px 10px; border-radius: 10px; background: rgba(239, 107, 107, .1); border: 1px solid rgba(239, 107, 107, .25); }
.cf-flags svg { width: 14px; height: 14px; color: var(--bad); flex: none; }
.cf-edits { margin: 10px 0; } .cf-edits b, .cf-comments b { display: block; font-size: 13px; color: var(--text); margin-bottom: 6px; }
.cf-edits ul { margin: 0; padding-left: 18px; } .cf-edits li { font-size: 13px; color: var(--text-2); margin: 3px 0; }
.cf-comments { margin: 10px 0; }
.cf-cm { margin: 5px 0; padding: 8px 12px; border-radius: 12px 12px 12px 3px; background: var(--card-3, var(--card-2)); border: 1px solid var(--line); font-size: 13px; color: var(--text); }
.cf-recheck { margin-top: 4px; }

/* Main contact: name and email side by side */
.mc-two { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; width: 100%; }
@media (max-width: 640px) { .mc-two { grid-template-columns: 1fr; } }

/* Industry menu: each section folds open and closed */
.menu button.ind-head { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; font-weight: 600; border-radius: 10px; }
.menu button.ind-head:hover { background: var(--card-2); color: var(--text); }
.menu .ind-head em { font-style: normal; font-weight: 500; color: var(--text-3); font-size: 12px; }
.menu .ind-head .ind-chev { width: 14px; height: 14px; flex: none; transition: transform .15s; color: var(--text-3); }
.menu .m-group.open .ind-head .ind-chev { transform: rotate(180deg); }
.menu .m-group.coll:not(.open) > [data-name] { display: none; }
.menu.searching .m-group.coll > [data-name]:not([style*="none"]) { display: flex; }
.menu.searching .ind-head .ind-chev { visibility: hidden; }

/* Warned save for settings that change what clients receive */
.crit-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(212, 184, 134, .1); border: 1px solid rgba(212, 184, 134, .4); font-size: 13px; color: var(--text-2); width: 100%; }
.crit-bar > span:first-child { display: flex; gap: 8px; align-items: flex-start; flex: 1; min-width: 200px; }
.crit-bar svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 2px; }
.crit-bar b { color: var(--text); }
.crit-acts { display: flex; gap: 6px; }
.srow-c:has(.crit-bar), .srow-c:has(.bill-err) { flex-wrap: wrap; }
.srow-c .crit-bar { flex: 1 0 100%; }

/* Insight cards: an even tint and colored edge instead of a bent side bar; room under Working well */
.ins::before { display: none; }
.ins.t-bad { background: color-mix(in srgb, var(--bad) 6%, var(--card)); border-color: color-mix(in srgb, var(--bad) 38%, transparent); }
.ins.t-fair { background: color-mix(in srgb, var(--warn) 6%, var(--card)); border-color: color-mix(in srgb, var(--warn) 38%, transparent); }
.ins.t-good { background: color-mix(in srgb, var(--good) 6%, var(--card)); border-color: color-mix(in srgb, var(--good) 38%, transparent); }
.wins .wh { margin-bottom: 14px; }

/* Real brand marks in brand colors: connections, menus, chips, where to reach them */
.conn-ic.brand svg { color: var(--bc); }
.conn-ic.brand.lt { background: var(--bc) !important; } .conn-ic.brand.lt svg { color: #141416; }
.bmk { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--bc, #3a3a40); color: #fff; vertical-align: -4px; margin-right: 7px; }
.bmk.lt { color: #141416; }
.bmk[style*="#000000"] { background: #0b0b0d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.bmk svg { width: 12px; height: 12px; stroke: none; }
.bmk.glyph { background: var(--card-3, #3a3a40); color: var(--text-2); }
.bmk.glyph svg { stroke: currentColor; fill: none; width: 13px; height: 13px; }
.menu .bmk { margin-right: 0; }
.chip .bmk { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; } .chip .bmk svg { width: 11px; height: 11px; }
.icp-where b { display: flex; align-items: center; }
.icp-where b .bmk { margin-right: 9px; }
.menu button > .bmk, .menu a > .bmk { flex: none; width: 22px; height: 22px; border-radius: 7px; }
.menu button .bmk svg, .menu a .bmk svg, .chip .bmk svg { color: inherit; }

/* Billing: next bill and recent months */
.bill-next { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 4px 0 14px; border-radius: 16px; background: color-mix(in srgb, var(--good) 7%, var(--card-2)); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }
.bill-next .bn-t { flex: 1; display: grid; gap: 2px; } .bill-next .bn-t b { font-size: 24px; } .bill-next .bn-t small { color: var(--text-2); font-size: 14px; }
.binv { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.inv-h { display: grid; gap: 2px; padding: 12px 16px; background: var(--card-2); } .inv-h small { color: var(--text-3); }
.inv-r { display: grid; grid-template-columns: 1.1fr 1.4fr .8fr .7fr; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.inv-r b { color: var(--text); text-align: right; } .inv-st { justify-self: end; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--card-3, #3a3a40); color: var(--text-2); }
@media (max-width: 640px) { .inv-r { grid-template-columns: 1fr 1fr; } .bill-next { flex-wrap: wrap; } }

/* Settings menu: a colored tile per page, calmer group labels, a clear selected row */
.set-nav .sn-g > b { display: block; padding: 14px 12px 6px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.set-nav a { height: 46px; gap: 12px; }
.set-nav a .ic { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.set-nav a .ic svg { width: 15px; height: 15px; }
.set-nav a.on { background: var(--card-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 600; }
.set-nav a:not(.on) .ic { opacity: .85; }

/* Settings: danger zone and grouped payment links */
.danger-z { margin-top: 18px; padding: 4px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--bad) 38%, transparent); background: color-mix(in srgb, var(--bad) 5%, transparent); }
.danger-z h3 { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--bad); } .danger-z h3 svg { width: 16px; height: 16px; }
.danger-z .srow:last-child { border-bottom: 0; }
.pl-count { margin: 4px 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--card-2); color: var(--text-2); font-size: 14px; } .pl-count b { color: var(--text); }
.pl-grp { margin-bottom: 14px; padding: 4px 16px 0; border: 1px solid var(--line); border-radius: 14px; }
.pl-h { display: flex; align-items: center; gap: 12px; padding: 12px 0 6px; } .pl-h > div { display: grid; } .pl-h small { color: var(--text-3); font-size: 13px; }
.pl-grp .srow:last-child { border-bottom: 0; }
.pl-grp .srow-c { gap: 10px; } .pl-grp .pill { flex: none; }
.pl-grp .srow-c { align-items: center; flex-wrap: nowrap; }
.menu .m-foot { position: sticky; bottom: -6px; margin: 6px -6px -6px; padding: 6px; background: #26262B; border-top: 1px solid var(--line-2); z-index: 1; }

/* Content calendar redesign: tabs, big centered month, platform blocks, week view, campaigns table */
.cal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px 0 18px; }
.cal-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 12px; border: 0; background: none; color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.cal-tabs button svg { width: 16px; height: 16px; }
.cal-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--teal, #43C3B7); }
.cal-tabs em { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 99px; background: var(--card-3); color: var(--text-2); }
.cal-head2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 16px; }
.cal-head2 .ch-l { display: flex; align-items: center; gap: 6px; }
.cal-head2 .flip svg { transform: rotate(180deg); }
.cal-title { margin: 0; text-align: center; font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.cal-title span { color: var(--text-3); font-weight: 700; }
.cal-title small { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); letter-spacing: 0; margin-top: 4px; }
.cal-head2 .cal-tools { justify-content: flex-end; }
@media (max-width: 900px) { .cal-head2 { grid-template-columns: 1fr; justify-items: center; } .cal-head2 .cal-tools { justify-content: center; } .cal-title { font-size: 30px; } }
.cal-dow span { text-align: center; text-transform: none; font-size: 13px; letter-spacing: .02em; }
.cal-day { min-height: 128px; gap: 4px; }
.cal-pill.blk { --pk: color-mix(in srgb, var(--pc) 82%, #101014); gap: 7px; padding: 5px 7px 5px 5px; border-radius: 8px; background: var(--pk); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .3); font-size: 12.5px; text-align: left; }
.cal-pill.blk:hover { background: color-mix(in srgb, var(--pc) 92%, #101014); filter: none; }
.cal-pill.blk.lt { color: #141416; }
.cal-pill.blk .cal-mk { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); color: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.cal-pill.blk.lt .cal-mk { background: rgba(0, 0, 0, .14); }
.cal-pill.blk .cal-mk svg { width: 12px; height: 12px; color: inherit; }
.cal-pill.blk .pt { display: grid; min-width: 0; flex: 1; line-height: 1.2; }
.cal-pill.blk .pt b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-pill.blk .pt small { opacity: .85; font-size: 11px; }
.cal-pill.blk .pk { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .28); }
.cal-pill.blk .pk svg { width: 10px; height: 10px; }
.cal-pill.blk.st-published .pt::after { content: none; }
.cal-pill.blk.st-missed { opacity: .5; } .cal-pill.blk.st-missed .pt b { text-decoration: line-through; color: inherit; }
.cal-pill.blk.st-waiting { box-shadow: inset 0 0 0 2px #E2AE4F, 0 1px 2px rgba(0, 0, 0, .3); }
.cal-pill.blk.st-planned { background: color-mix(in srgb, var(--pc) 55%, #1a1a1f); }
.cal-week2 { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
.wk-h, .wk-all, .wk-g { display: grid; grid-template-columns: 64px repeat(7, 1fr); }
.wk-h { border-bottom: 1px solid var(--line); }
.wk-d { display: grid; justify-items: center; gap: 2px; padding: 10px 0; }
.wk-d small { color: var(--text-3); font-weight: 600; font-size: 12.5px; }
.wk-d b { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; }
.wk-d.today small { color: var(--gold); } .wk-d.today b { background: var(--gold); color: #141416; }
.wk-all { border-bottom: 1px solid var(--line); min-height: 40px; }
.wk-all > span { font-size: 11.5px; color: var(--text-3); padding: 10px 6px; text-align: right; }
.wk-all > div { padding: 4px; border-left: 1px solid var(--line); display: grid; gap: 4px; align-content: start; position: relative; }
.wk-all > div .cd-add { position: absolute; top: 4px; right: 4px; }
.wk-all > div:hover .cd-add { opacity: 1; }
.wk-scroll { max-height: 640px; overflow-y: auto; }
.wk-hrs span { display: block; font-size: 11.5px; color: var(--text-3); text-align: right; padding: 0 8px 0 0; transform: translateY(-7px); }
.wk-col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 51px, var(--line) 51px, var(--line) 52px); }
.wk-col.today { background-color: rgba(212, 184, 134, .04); }
.wk-ev { position: absolute; z-index: 1; } .wk-ev .cal-pill.blk { height: 46px; align-items: flex-start; }
.wk-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--gold); z-index: 2; } .wk-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.camp-t { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
.camp-r { display: grid; grid-template-columns: 2.2fr 1.6fr .6fr .8fr .6fr .9fr; gap: 12px; align-items: center; width: 100%; padding: 14px 18px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text-2); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.camp-r:hover { background: var(--card-2); }
.camp-hd { border-top: 0; cursor: default; color: var(--text-3); font-size: 12.5px; font-weight: 600; } .camp-hd:hover { background: none; }
.camp-n { display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; align-items: center; } .camp-n i { width: 12px; height: 12px; border-radius: 4px; background: var(--cc); grid-row: span 2; }
.camp-n b { color: var(--text); } .camp-n small { color: var(--text-3); grid-column: 2; }
.camp-r .cal-st { justify-self: start; }
@media (max-width: 760px) { .camp-r { grid-template-columns: 1fr 1fr; } .camp-hd { display: none; } }

/* Platforms look like their own brands, everywhere a platform appears (owner 2026-10-22).
   bf-* = brand tiles (badges, connections, channel icons); pf-* = calendar blocks and marks. */
.bf-instagram, .pf-instagram { --bfill: radial-gradient(circle at 28% 108%, #FFD600 0%, #FF7A00 22%, #FF0069 48%, #D300C5 72%, #7638FA 100%); }
.bf-facebook, .pf-facebook { --bfill: linear-gradient(180deg, #2A7FFF, #0866FF); }
.bf-messenger { --bfill: radial-gradient(circle at 20% 100%, #0099FF 0%, #A033FF 60%, #FF5280 90%, #FF7061 100%); }
.bf-meta { --bfill: linear-gradient(135deg, #0081FB, #0064E0); }
.bf-tiktok, .pf-tiktok { --bfill: #0B0B0D; }
.bf-youtube, .pf-youtube { --bfill: linear-gradient(180deg, #FF2A2A, #E50000); }
.bf-linkedin, .pf-linkedin { --bfill: linear-gradient(180deg, #1B78D6, #0A66C2); }
.bf-googleads, .pf-google { --bfill: linear-gradient(135deg, #4285F4 0%, #4285F4 55%, #34A853 100%); }
.bf-google, .bf-googleanalytics, .bf-googlesearchconsole { --bfill: #FFFFFF; }
.bf-x, .bf-threads { --bfill: #0B0B0D; }
.bf-pinterest { --bfill: #E60023; } .bf-snapchat { --bfill: #FFFC00; } .bf-whatsapp { --bfill: linear-gradient(180deg, #5FFC7B, #25D366); }
.bf-gmail { --bfill: #FFFFFF; } .bf-wordpress { --bfill: #21759B; } .bf-shopify { --bfill: #5E8E3E; } .bf-stripe { --bfill: linear-gradient(135deg, #7A73FF, #635BFF); }
.bf-mailchimp { --bfill: #FFE01B; } .bf-yelp { --bfill: #D32323; } .bf-nextdoor { --bfill: #1B8751; } .bf-reddit { --bfill: #FF4500; } .bf-spotify { --bfill: #1ED760; } .bf-calendly { --bfill: #006BFF; }
.pf-email { --bfill: linear-gradient(180deg, #E6CC97, #C9A86A); } .pf-blog { --bfill: linear-gradient(180deg, #3FB8AD, #23968C); }
.pf-sms { --bfill: linear-gradient(180deg, #A48BF5, #7B61E0); } .pf-event { --bfill: linear-gradient(180deg, #E9B75A, #C8902F); }
/* tiles */
.bmk[class*="bf-"], .conn-ic.brand[class*="bf-"], .ic.brand[class*="bf-"] { background: var(--bfill, var(--bc)) !important; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 6px -1px rgba(0, 0, 0, .45); }
.conn-ic.brand[class*="bf-"] svg, .ic.brand[class*="bf-"] svg { color: #fff; }
.bf-tiktok, .bf-x, .bf-threads { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 2px 6px -1px rgba(0, 0, 0, .45) !important; }
.bf-tiktok svg, .pf-tiktok .cal-mk svg, .cal-mk.pf-tiktok svg { filter: drop-shadow(-1px -1px 0 #25F4EE) drop-shadow(1px 1px 0 #FE2C55); }
.bf-snapchat, .bf-mailchimp { color: #141416 !important; } .conn-ic.brand.bf-snapchat svg, .conn-ic.brand.bf-mailchimp svg, .ic.brand.bf-snapchat svg { color: #141416; }
.bf-google svg, .bf-gmail svg { color: #4285F4 !important; } .bf-gmail svg { color: #EA4335 !important; } .bf-googleanalytics svg { color: #E37400 !important; } .bf-googlesearchconsole svg { color: #458CF5 !important; }
/* calendar blocks: the post block itself wears the platform's fill */
.cal-pill.blk[class*="pf-"] { background: var(--bfill); color: #fff; }
.cal-pill.blk.pf-instagram { background: linear-gradient(100deg, #7638FA 0%, #D300C5 30%, #FF0069 62%, #FF7A00 88%, #FFD600 118%); }
.cal-pill.blk.pf-tiktok { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 3px 0 0 #25F4EE, 0 1px 2px rgba(0, 0, 0, .3); }
.cal-pill.blk[class*="pf-"]:hover { filter: brightness(1.08); }
.cal-pill.blk.pf-email, .cal-pill.blk.pf-event { color: #141416; }
.cal-pill.blk[class*="pf-"] .cal-mk { background: rgba(255, 255, 255, .22); }
.cal-pill.blk.pf-email .cal-mk, .cal-pill.blk.pf-event .cal-mk { background: rgba(0, 0, 0, .14); }
.cal-pill.blk.st-planned[class*="pf-"] { filter: saturate(.7) brightness(.82); }
.cal-pill.blk.st-waiting[class*="pf-"] { box-shadow: inset 0 0 0 2px #E2AE4F; }
/* the mark on its own (list view, editor) */
.cal-mk[class*="pf-"] { background: var(--bfill); color: #fff; }
.cal-mk.pf-email, .cal-mk.pf-event { color: #141416; }

/* Calendar block polish (owner 2026-10-22): no check marks, missed stays readable, better YouTube, LinkedIn, TikTok, blog */
.cal-pill.blk.st-missed { opacity: 1; } .cal-pill.blk.st-missed .pt b { text-decoration: none; }
.cal-pill.blk.st-missed[class*="pf-"] { filter: none; box-shadow: inset 0 0 0 2px #EF6B6B, 0 1px 2px rgba(0, 0, 0, .3); }
.cal-pill.blk .pmiss { opacity: 1 !important; font-weight: 700; }
.cal-pill.blk.st-planned[class*="pf-"] { filter: none; }
/* YouTube: the red with the white tile and red play, like the real logo */
.pf-youtube { --bfill: linear-gradient(180deg, #FF1F1F 0%, #D90000 100%); }
.cal-pill.blk.pf-youtube .cal-mk, .bf-youtube.bmk { background: #fff; color: #FF0000; }
.bf-youtube { --bfill: #FFFFFF; } .conn-ic.brand.bf-youtube svg, .ic.brand.bf-youtube svg, .bmk.bf-youtube svg { color: #FF0000 !important; }
/* LinkedIn: deep LinkedIn blue, white tile with the blue mark */
.pf-linkedin { --bfill: linear-gradient(180deg, #0A66C2 0%, #004182 100%); }
.cal-pill.blk.pf-linkedin .cal-mk { background: #fff; color: #0A66C2; }
/* TikTok: true black with the cyan and pink split along the edges */
.cal-pill.blk.pf-tiktok { background: linear-gradient(100deg, #000 0%, #16161B 100%); box-shadow: inset 3px 0 0 #25F4EE, inset -3px 0 0 #FE2C55, inset 0 0 0 1px rgba(255, 255, 255, .1); }
.cal-pill.blk.pf-tiktok .cal-mk { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
/* Blog or website: graphite instead of the flat green */
.pf-blog { --bfill: linear-gradient(180deg, #5E6878 0%, #3F4757 100%); }

/* Calendar: past days fade, today stands out in gold */
.cal-day.past { background: rgba(0, 0, 0, .18); }
.cal-day.past .cd-h span { color: var(--text-3); }
.cal-day.past .cal-pill, .wk-col.past .cal-pill, .cal-day.out .cal-pill { opacity: .5; }
.cal-day.past .cal-pill:hover, .wk-col.past .cal-pill:hover { opacity: .85; }
.cal-day.today { background: rgba(212, 184, 134, .08); box-shadow: inset 0 0 0 2px rgba(212, 184, 134, .75); position: relative; z-index: 1; }
.cd-today { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--gold); margin-right: auto; margin-left: 6px; letter-spacing: .02em; }
.wk-col.past { background-color: rgba(0, 0, 0, .14); } .wk-d.past small, .wk-d.past b { color: var(--text-3); }
.wk-col.today { background-color: rgba(212, 184, 134, .07); box-shadow: inset 0 0 0 1px rgba(212, 184, 134, .45); }
.cal-pill.blk.st-missed .pt { text-decoration: none; color: inherit; }

/* Calendar month title: bold and in its own container (owner 2026-10-22) */
.cal-title { display: inline-flex; justify-self: center; padding: 12px 30px 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); font-size: 36px; font-weight: 800; }
.cal-title span { color: var(--text); font-weight: 800; }
.cal-title { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 12px; white-space: nowrap; color: var(--text) !important; opacity: 1; -webkit-text-fill-color: var(--text); }
.cal-title small { flex-basis: 100%; text-align: center; -webkit-text-fill-color: var(--text-2); }

/* Campaigns (owner 2026-10-22): no bars across the calendar; colored chips, a tag on each post, colorful cards, custom color and icon */
.camp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.camp-chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); background: color-mix(in srgb, var(--cc) 12%, var(--card)); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.camp-chip:hover { background: color-mix(in srgb, var(--cc) 20%, var(--card)); }
.camp-chip.on { background: color-mix(in srgb, var(--cc) 28%, var(--card)); box-shadow: 0 0 0 2px var(--cc); }
.camp-chip b { display: block; font-size: 13.5px; } .camp-chip small { color: var(--text-2); font-size: 12px; }
.camp-chip.clear { padding: 8px 14px; --cc: var(--silver); color: var(--text-2); }
.cc-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 100%, #fff 18%), var(--cc)); color: #141416; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 6px -2px rgba(0, 0, 0, .5); }
.cc-ic svg { width: 16px; height: 16px; } .cc-ic.big { width: 44px; height: 44px; border-radius: 13px; } .cc-ic.big svg { width: 22px; height: 22px; }
.pc-tag { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
.cal-pill.blk { position: relative; }
.camp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.camp-card { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 16%, var(--card)), var(--card) 70%); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.camp-card:hover { border-color: var(--cc); }
.cc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cc-st { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--card-3); color: var(--text-2); }
.cc-st.live { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); } .cc-st.soon { color: var(--blue, #6FA3E8); }
.cc-name { font-size: 17px; } .cc-goal { color: var(--text-2); font-size: 14px; } .cc-dates { color: var(--text-3); font-size: 13px; }
.cc-bar { height: 6px; border-radius: 99px; background: var(--card-3); overflow: hidden; } .cc-bar i { display: block; height: 100%; background: var(--cc); border-radius: 99px; }
.cc-stats { display: flex; gap: 18px; color: var(--text-3); font-size: 12.5px; } .cc-stats b { display: block; color: var(--text); font-size: 18px; }
.camp-card.add { --cc: var(--gold); place-content: center; justify-items: center; text-align: center; min-height: 220px; border-style: dashed; background: transparent; color: var(--text-2); }
.camp-card.add svg { width: 26px; height: 26px; color: var(--gold); } .camp-card.add span { font-size: 13px; }
.camp-icons { display: grid; grid-template-columns: repeat(6, 40px); gap: 8px; }
.camp-icons button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-2); cursor: pointer; }
.camp-icons button svg { width: 18px; height: 18px; }
.camp-icons button[aria-pressed="true"] { background: var(--cc); color: #141416; border-color: transparent; }
.cal-pill.blk .pc-tag { top: auto; bottom: 6px; right: 7px; }

/* Company details: three clear groups; brand controls beside a live preview */
.set-sec { margin-top: 18px; padding: 6px 18px 4px; border: 1px solid var(--line); border-radius: 16px; }
.set-sec-h { display: flex; align-items: center; gap: 12px; padding: 12px 0 8px; } .set-sec-h h3 { margin: 0; font-size: 15px; } .set-sec-h p { margin: 2px 0 0; }
.set-sec .srow:last-child { border-bottom: 0; }
.brand-2 { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 22px; align-items: start; padding: 6px 0 16px; }
.brand-2 .bf { display: grid; gap: 8px; margin-bottom: 16px; } .brand-2 .bf > b { font-size: 14px; font-weight: 600; }
.bp-wrap { position: sticky; top: 16px; display: grid; gap: 8px; } .bp-wrap .brand-pv { margin: 0; }
@media (max-width: 900px) { .brand-2 { grid-template-columns: 1fr; } }
.cal-title { background: rgba(var(--m, 212, 184, 134), .14); border-color: rgba(var(--m, 212, 184, 134), .38); }

/* Onboarding Agreement step: every Section 20 field, grouped */
.ag-blk { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-2); }
.ag-blk h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px; } .ag-blk h3 svg { width: 16px; height: 16px; color: var(--gold); }
.ag-blk .au-f.wide { display: grid; } .ag-blk textarea { width: 100%; resize: vertical; }
.ag-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ag-hint { align-self: center; margin: 0; }
.ag-seg { margin-bottom: 10px; }
.ag-miss, .ag-ready { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 10px; padding: 12px 14px; border-radius: 12px; }
.ag-miss { background: rgba(226, 174, 79, .1); border: 1px solid rgba(226, 174, 79, .4); } .ag-miss svg { color: var(--warn); width: 16px; height: 16px; flex: none; margin-top: 2px; } .ag-miss small { display: block; color: var(--text-2); margin-top: 2px; }
.ag-ready { background: color-mix(in srgb, var(--good) 10%, transparent); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); } .ag-ready svg { color: var(--good); width: 16px; height: 16px; }
.modal .ag-full { max-width: 860px; } .msa-paper { background: #fff; border-radius: 12px; padding: 28px 32px; max-height: 62vh; overflow-y: auto; margin: 12px 0; }
@media (max-width: 640px) { .ag-three { grid-template-columns: 1fr; } .msa-paper { padding: 18px; } }

/* Company menu: a quiet link to QuarterMaster-only accounts */
.menu .m-plat em { font-style: normal; font-size: 12px; color: var(--text-3); }

/* Signing page: the full agreement on paper, then only the signature block */
.sign-doc { background: #fff; border-radius: 14px; padding: 26px 28px; max-height: 60vh; overflow-y: auto; margin: 8px 0 18px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.sign-doc:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sign-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#sdate[readonly] { opacity: .8; }
@media (max-width: 560px) { .sign-two { grid-template-columns: 1fr; } .sign-doc { padding: 16px; } }

/* Signing page: room for the agreement; signature lines wrap cleanly */
.sign-main.au3 { max-width: 860px; width: 100%; }
.sign-main .sign-card { max-width: none; width: 100%; }

/* Agreements View: the actual agreement first */
.ag-mh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ag-more { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; } .ag-more summary { cursor: pointer; font-weight: 600; }
.modal:has(.ag-full) { width: min(900px, 100%); text-align: left; }
.msa-paper { text-align: left; }
.msa-paper .msa-sig h4 { text-align: left; }
.msa-paper p, .sign-doc p { max-width: none; }

/* The agreement as its own page */
.ag-page { max-width: 980px; margin: 0 auto; }
.msa-paper.full { max-height: none; overflow: visible; padding: 48px 56px; margin: 16px 0; }
@media (max-width: 700px) { .msa-paper.full { padding: 22px 18px; } }

/* Client flow: pay this month, steps in emails, welcome email on the agreement page */
.sign-pay { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(212, 184, 134, .45); background: rgba(212, 184, 134, .08); margin: 6px 0 10px; } .sign-pay b { display: block; font-size: 20px; } .sign-pay small { color: var(--text-2); }
.mail-steps { margin: 8px 0 12px; padding-left: 20px; } .mail-steps li { margin: 4px 0; }
.ag-welcome { margin: 14px 0; padding: 18px; } .ag-welcome .mail-pv { margin: 10px 0; }
.ag-welcome .wh { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .ag-welcome .wh .h { display: flex; align-items: center; gap: 10px; font-weight: 700; }

/* Plan and price: a summary card above the details; seat note spaced */
.pp-hero { display: flex; align-items: center; gap: 14px; padding: 18px 20px; margin: 6px 0 12px; border-radius: 16px; background: rgba(var(--tc, 212, 184, 134), .1); border: 1px solid rgba(var(--tc, 212, 184, 134), .35); }
.pp-hero .ic { width: 44px; height: 44px; border-radius: 13px; } .pp-hero .ic svg { width: 22px; height: 22px; }
.pp-t { flex: 1; display: grid; gap: 2px; } .pp-t b { font-size: 18px; } .pp-t small { color: var(--text-2); }
.pp-p { display: grid; justify-items: end; gap: 6px; } .pp-p b { font-size: 26px; font-weight: 800; } .pp-p b small { font-size: 14px; color: var(--text-2); font-weight: 600; }
.plan-sum .srow-c small { margin-left: 6px; }
.pp-t b, .pp-p b { color: var(--text); }

/* Team: each role card wears its own color and icon */
.roles .role { border: 1px solid rgba(var(--tc, 191, 194, 199), .3); background: rgba(var(--tc, 191, 194, 199), .07); }
.roles .role .ic { margin-bottom: 8px; }

/* Post editor: actions on top, fields first, a compact preview below */
.cal-top-act { display: flex; justify-content: flex-end; gap: 6px; margin: -4px 0 2px; }
.cal-pvd { border: 1px solid var(--line); border-radius: 14px; padding: 4px 12px 10px; } .cal-pvd summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 0; font-weight: 600; color: var(--text-2); } .cal-pvd summary svg { width: 16px; height: 16px; }
.cal-pvd .cal-pv { padding: 10px; } .cal-pvd .pv { width: 250px; }
.cal-drawer .cal-dd .cal-mk { display: none; }
.cal-f input[type=url], .cal-f input[type=date], .cal-f input[type=time] { height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; color-scheme: dark; box-sizing: border-box; }
.cal-f input[type=url]:focus, .cal-f input[type=date]:focus, .cal-f input[type=time]:focus { outline: none; border-color: rgba(var(--m, 212, 184, 134), .7); }

/* Editing a post or campaign is real work: a full-screen workspace, not a side panel (owner 2026-10-22) */
.drawer.cal-drawer { left: 0; right: 0; width: auto; border-left: 0; animation: none; background: var(--bg, #17171a); box-shadow: none; }
.cal-drawer .drawer-h { max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 22px 32px; gap: 10px; }
.cal-drawer .drawer-h > div { flex: 1; min-width: 0; } .cal-drawer .drawer-h b { font-size: 24px; }
.cal-drawer .drawer-b { max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 8px 32px 48px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 16px 36px; align-content: start; overflow-y: auto; }
.cal-drawer .drawer-b > * { grid-column: 1; }
.cal-drawer .drawer-b > .cal-pvd, .cal-drawer .drawer-b > .cal-fit, .cal-drawer .drawer-b > .cal-stats { grid-column: 2; }
.cal-drawer .drawer-b > .cal-pvd { grid-row: 1 / span 6; align-self: start; position: sticky; top: 0; }
.cal-drawer .cal-colors { flex-wrap: wrap; }
@media (max-width: 900px) { .cal-drawer .drawer-b { grid-template-columns: 1fr; padding: 8px 16px 40px; } .cal-drawer .drawer-b > * { grid-column: 1 !important; grid-row: auto !important; position: static !important; } .cal-drawer .drawer-h { padding: 16px; } }

/* Every real-work panel opens full screen, centered and readable (owner 2026-10-22) */
.drawer.work { left: 0; right: 0; width: auto; border-left: 0; animation: none; background: var(--bg, #17171a); box-shadow: none; }
.drawer.work .drawer-h, .drawer.work .drawer-b, .drawer.work .drawer-f { max-width: 860px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.drawer.work .drawer-h { padding: 22px 32px; } .drawer.work .drawer-h b { font-size: 22px; }
.drawer.work .drawer-b { padding: 8px 32px 32px; overflow-y: auto; flex: 1; }
.drawer.work .drawer-f { padding: 14px 32px 24px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .drawer.work .drawer-h, .drawer.work .drawer-b, .drawer.work .drawer-f { padding-left: 16px; padding-right: 16px; } }
.drawer.work { overflow-y: auto; } .drawer.work .drawer-b { flex: none; overflow: visible; } .drawer.work .drawer-f { border-top: 0; padding-top: 4px; }

/* App-colored highlights (owner 2026-10-22): selected and focused states follow each app's color;
   gold stays in Agency Management. One token, --hl. */
body { --hl: var(--m, 212, 184, 134); }
body.mod-black { --hl: 212, 184, 134; }
.seg button[aria-pressed="true"] { background: rgba(var(--hl), .2); color: var(--text); box-shadow: inset 0 0 0 1px rgba(var(--hl), .45); }
.set-nav a.on { background: rgba(var(--hl), .12); box-shadow: inset 0 0 0 1px rgba(var(--hl), .4); }
.icp-tabs button.on, .cal-tabs button[aria-selected="true"] { border-bottom-color: rgb(var(--hl)); }
.sw input:focus-visible + i { box-shadow: 0 0 0 3px rgba(var(--hl), .35); }
.sw-btn:focus-visible, .ob-plan input:focus-visible + .ob-pc, .ob-mate input:focus-visible + span, .obt-list li > button:focus-visible, .cp-sw:focus-visible, .sign-doc:focus-visible { outline-color: rgb(var(--hl)); }
.ob-mgr[aria-pressed="true"] { border-color: rgb(var(--hl)); background: rgba(var(--hl), .1); box-shadow: 0 0 0 1px rgb(var(--hl)); }
.fpick button[aria-pressed="true"] { border-color: rgb(var(--hl)); box-shadow: 0 0 0 1px rgb(var(--hl)); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline-color: rgb(var(--hl)); }

/* Channel library menu: paid and unpaid tags */
.menu .ch-paid, .menu .ch-free { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; flex: none; }
.menu .ch-paid { background: rgba(212, 184, 134, .16); color: var(--gold); } .menu .ch-free { background: rgba(76, 195, 138, .14); color: var(--good); }

/* Post editor, visual: grouped sections with colored icon heads, brand tiles, status chips, result tiles */
.ped-sec { padding: 16px 18px 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.ped-sec h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; }
.ped-sec .cal-f { margin-bottom: 12px; } .ped-sec .cal-f > label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.ped-count { font-style: normal; margin-left: auto; font-size: 12px; color: var(--text-3); }
.ped-plats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ped-plat { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.ped-plat .cal-mk { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; } .ped-plat .cal-mk svg { width: 17px; height: 17px; }
.ped-plat:hover { border-color: var(--line-2); color: var(--text); }
.ped-plat.on { border-color: rgb(var(--hl)); background: rgba(var(--hl), .12); color: var(--text); box-shadow: 0 0 0 1px rgb(var(--hl)); }
.ped-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.ped-st { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card-2); color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ped-st svg { width: 15px; height: 15px; }
.ped-st.on { background: rgba(var(--tc), .18); border-color: rgba(var(--tc), .6); color: rgb(var(--tc)); }
.ped-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.ped-r { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; padding: 12px; border-radius: 14px; background: rgba(var(--tc), .07); border: 1px solid rgba(var(--tc), .3); }
.ped-r .ic { grid-row: span 2; } .ped-r span { font-size: 12.5px; color: var(--text-2); }
.ped-r input { width: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 20px; font-weight: 800; padding: 0; outline: none; }
@media (max-width: 640px) { .ped-plats { grid-template-columns: repeat(3, 1fr); } .ped-res { grid-template-columns: 1fr; } }

/* Post composer (owner 2026-10-22): full screen, dark, form left, live preview and customer comments right */
.cmp { position: fixed; inset: 0; z-index: 61; display: flex; flex-direction: column; background: var(--bg, #17171a); }
.cmp-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: #111114; }
.cmp-top > b { font-size: 17px; text-align: center; } .cmp-top > .btn { justify-self: start; }
.cmp-acts { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.cmp-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cmp-left { overflow-y: auto; padding: 22px 28px 60px; display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--line); }
.cmp-right { overflow-y: auto; padding: 18px 28px 60px; background: #121215; display: grid; gap: 14px; align-content: start; justify-items: center; }
.cmp-sec { border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.cmp-sec summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.cmp-sec summary::-webkit-details-marker { display: none; }
.cmp-sec summary > span { flex: 1; display: grid; } .cmp-sec summary small { color: var(--text-3); font-size: 12.5px; margin-top: 1px; }
.cmp-chev { width: 16px; height: 16px; color: var(--text-3); transition: transform .15s; } .cmp-sec[open] .cmp-chev { transform: rotate(180deg); }
.cmp-b { padding: 4px 16px 6px; border-top: 1px solid var(--line); } .cmp-b .cal-f { margin: 12px 0; } .cmp-b .cal-f > label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); margin-bottom: 6px; }
.cmp-drop { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 22px; border-radius: 14px; border: 1.5px dashed var(--line-2); background: var(--card-2); color: var(--text-2); font: inherit; cursor: pointer; }
.cmp-drop:hover { border-color: rgb(var(--hl)); color: var(--text); } .cmp-drop svg { width: 22px; height: 22px; color: rgb(var(--hl)); } .cmp-drop small { color: var(--text-3); }
.cmp-img { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.cmp-img img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; } .cmp-img > div { flex: 1; display: grid; } .cmp-img small { color: var(--text-3); }
.cmp-note { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-3); font-size: 12.5px; } .cmp-note svg { width: 14px; height: 14px; }
.cmp-pv .pv { width: 380px; }
.cmp-pv .pv-img img, .pv-img.has img { width: 100%; height: 100%; object-fit: cover; display: block; }
img.pv-av { object-fit: cover; padding: 0; }
.cmp-pred { width: 380px; max-width: 100%; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); box-sizing: border-box; }
.cmp-pred span { display: inline-flex; align-items: center; gap: 5px; } .cmp-pred svg { width: 15px; height: 15px; } .cmp-pred b { color: var(--text); }
.cmp-pred small { flex-basis: 100%; color: var(--text-3); font-size: 11.5px; }
.cmp-pred i { font-style: normal; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; } .cmp-pred i svg { width: 11px; height: 11px; } .cmp-pred i.up { color: var(--good); } .cmp-pred i.dn { color: var(--bad); }
.cmp-cms { width: 380px; max-width: 100%; display: grid; gap: 10px; }
.cmp-cms-h { display: grid; gap: 2px; } .cmp-cms-h small { color: var(--text-3); }
.cmp-cm { display: flex; gap: 10px; align-items: flex-start; }
.cmp-face { width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: hidden; background: var(--card-3); display: grid; place-items: center; font-size: 12px; font-weight: 700; } .cmp-face svg { width: 100%; height: 100%; }
.cmp-cm > div { flex: 1; padding: 9px 13px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.cmp-cm b { font-size: 13px; } .cmp-cm b small { font-weight: 500; color: var(--text-3); font-style: italic; } .cmp-cm p { margin: 3px 0 0; font-size: 14px; color: var(--text); }
.cmp-cm.thought > div { background: rgba(var(--hl), .08); border-color: rgba(var(--hl), .35); }
.cmp-tag { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--card-3); }
.cmp-tag.good { color: var(--good); } .cmp-tag.ok { color: var(--warn); } .cmp-tag.bad { color: var(--bad); }
.cmp-edits { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } .cmp-edits b { display: flex; align-items: center; gap: 6px; } .cmp-edits b svg { width: 15px; height: 15px; color: var(--gold); } .cmp-edits ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; }
@media (max-width: 900px) { .cmp-main { grid-template-columns: 1fr; overflow-y: auto; } .cmp-left, .cmp-right { overflow: visible; border-right: 0; } .cmp-top { grid-template-columns: auto 1fr; } .cmp-top > b { display: none; } }
.pv-img { position: relative; overflow: hidden; } .pv-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pv-img .yt-play { position: relative; z-index: 1; }
.cmp-sec summary > .ic { flex: none; width: 32px; height: 32px; } .cmp-sec summary > span:not(.ic) { flex: 1; }

/* Composer comments, platform style: one per ideal customer, then the scoring */
.cmp-cms { gap: 14px; } .cmp-cms-t { font-size: 14px; color: var(--text-2); font-weight: 600; }
.cmp-cm { align-items: flex-start; } .cmp-cm-b { flex: 1; padding: 0 !important; background: none !important; border: 0 !important; }
.cmp-cm-b p { margin: 2px 0 0; font-size: 14px; color: var(--text); line-height: 1.4; } .cmp-cm-b p b { margin-right: 4px; }
.cmp-cm-b small { display: flex; gap: 14px; margin-top: 4px; font-size: 12px; color: var(--text-3); font-weight: 600; }
.cmp-sc { margin-left: auto; padding: 0 7px; border-radius: 99px; background: var(--card-2); } .cmp-sc.good { color: var(--good); } .cmp-sc.ok { color: var(--warn); } .cmp-sc.bad { color: var(--bad); }
.cmp-heart { width: 15px; height: 15px; flex: none; margin-top: 6px; fill: none; stroke: var(--text-3); stroke-width: 2; }
.cmp-details { width: 380px; max-width: 100%; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.cmp-details summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; } .cmp-details summary::-webkit-details-marker { display: none; } .cmp-details summary b { flex: 1; } .cmp-details summary svg { width: 16px; height: 16px; }
.cmp-details[open] .cmp-chev { transform: rotate(180deg); } .cmp-details .cf-wrap { padding: 0 14px 14px; margin: 0; }

/* Counts inside the post like the real apps; a clear fit badge on each comment */
.pv-acts { align-items: center; } .pv-acts .pv-n { font-style: normal; font-size: 13px; font-weight: 700; color: #262626; margin: 0 12px 0 4px; }
.pv-cnt { display: flex; justify-content: space-between; padding: 8px 12px 6px; font-size: 12.5px; color: #65676b; } .pv-cnt span { display: inline-flex; align-items: center; gap: 5px; } .pv-cnt svg { width: 14px; height: 14px; fill: #1877f2; stroke: none; }
.tt-side .pv-n { font-style: normal; color: #fff; font-size: 11.5px; font-weight: 700; margin: -4px 0 6px; text-align: center; }
.cmp-fit { flex: none; display: grid; justify-items: center; align-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--card-2); border: 1.5px solid currentColor; line-height: 1; }
.cmp-fit b { font-size: 17px; font-weight: 800; } .cmp-fit small { font-size: 10px; font-weight: 700; text-transform: lowercase; opacity: .85; margin-top: 2px; }
.cmp-fit.good { color: var(--good); } .cmp-fit.ok { color: var(--warn); } .cmp-fit.bad { color: var(--bad); }

/* Scoring details: no repeats of what the comments already show */
.cmp-details .cf-wrap > label, .cmp-details .cf-comments { display: none; }
.cmp-details .cf-ctl { margin-top: 4px; }

/* See it in a feed: phone frame or desktop page, with the post among others */
.cmp-pvbar { width: 380px; max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fd-stage { flex: 1; min-height: 0; overflow: auto; display: grid; justify-items: center; padding: 26px 16px 60px; background: #0e0e11; }
.fd-app { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; color: #111; border-bottom: 1px solid #eee; } .fd-app .cal-mk { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; } .fd-app .cal-mk svg { width: 14px; height: 14px; }
.fd-phone { width: 390px; height: 780px; border-radius: 46px; border: 12px solid #000; background: #f2f2f4; box-shadow: 0 0 0 2px #333, 0 30px 80px rgba(0, 0, 0, .6); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.fd-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; border-radius: 16px; background: #000; z-index: 2; }
.fd-phone .fd-app { padding-top: 44px; }
.fd-scroll { flex: 1; overflow-y: auto; display: grid; gap: 10px; padding: 10px 0; align-content: start; }
.fd-post { position: relative; display: grid; justify-items: center; } .fd-post .pv { width: 100%; max-width: 100%; border-radius: 0; box-shadow: none; }
.fd-desk .fd-post .pv { width: 500px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.fd-post.fake { opacity: .92; } .fd-post.mine .pv { outline: 3px solid rgb(var(--hl)); outline-offset: -3px; }
.fd-you { position: absolute; top: 8px; right: 10px; padding: 3px 10px; border-radius: 99px; background: rgb(var(--hl)); color: #141416; font-size: 12px; font-weight: 800; }
.fd-desk { width: min(1180px, 100%); border-radius: 14px; overflow: hidden; background: #f0f2f5; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.fd-desk-bar { display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #e4e6eb; } .fd-desk-bar .fd-app { border: 0; } .fd-search { width: 240px; height: 32px; margin-right: 16px; border-radius: 99px; background: #f0f2f5; }
.fd-desk-main { display: grid; grid-template-columns: 220px 1fr 220px; gap: 20px; padding: 18px; align-items: start; }
.fd-col { display: grid; gap: 14px; justify-items: center; } .fd-side { display: grid; gap: 10px; } .fd-side i { height: 36px; border-radius: 8px; background: #e4e6eb; } .fd-side.r i { height: 70px; }
@media (max-width: 900px) { .fd-desk-main { grid-template-columns: 1fr; } .fd-side { display: none; } .fd-desk .fd-post .pv { width: 100%; } }

/* Real-platform details and a lighter stage behind the post */
.cmp-right { background: #24242a; }
.pv-acts .liked svg { fill: #ff3040; stroke: #ff3040; } .pv-acts .pv-sp { flex: 1; } .pv-acts > svg, .pv-acts > span > svg { width: 24px; height: 24px; }
.pv-likes, .pv-more, .pv-time { margin: 0; padding: 0 12px 4px !important; font-size: 13px; color: #262626; } .pv-more { color: #737373; } .pv-time { color: #737373; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; padding-bottom: 12px !important; }
.cmp-details summary { gap: 12px; } .cmp-ds { flex: 1; display: grid; } .cmp-ds b { font-size: 14.5px; } .cmp-ds small { color: var(--text-3); font-size: 12.5px; }
.cmp-details:not([open]) { border-color: rgba(var(--hl), .45); background: rgba(var(--hl), .07); }
.cmp-details:not([open]):hover { background: rgba(var(--hl), .12); }
.cmp-right { background: #303037; } .cmp-right .cmp-cm-b small { color: var(--text-2); }

/* Scoring card: bigger summary, colorful measures, quote, alerts, numbered fixes (owner 2026-10-22) */
.cmp-details summary { padding: 16px; } .cmp-details summary .cmp-fit { width: 56px; height: 56px; border-radius: 14px; } .cmp-details summary .cmp-fit b { font-size: 22px; }
.cmp-ds b { font-size: 17px !important; font-weight: 800; line-height: 1.25; } .cmp-ds small { font-size: 13.5px !important; }
.cmp-details .cf-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.cmp-details .cf-dim { --t: 191, 194, 199; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 8px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--t), .08); border: 1px solid rgba(var(--t), .3); }
.cmp-details .cf-dim.t-good { --t: 76, 195, 138; } .cmp-details .cf-dim.t-ok { --t: 226, 174, 79; } .cmp-details .cf-dim.t-bad { --t: 239, 107, 107; }
.cmp-details .cf-dim > svg { width: 16px; height: 16px; color: rgb(var(--t)); } .cmp-details .cf-dim > span { font-size: 13px; color: var(--text); font-weight: 600; }
.cmp-details .cf-dim > b { font-size: 15px; color: rgb(var(--t)); } .cmp-details .cf-dim > b small { font-size: 11px; color: var(--text-3); font-weight: 600; }
.cmp-details .cf-dim .cf-bar { grid-column: 1 / -1; height: 5px; }
.cmp-details .cf-why { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(var(--hl), .1); border-left: 3px solid rgb(var(--hl)); margin: 12px 0; }
.cmp-details .cf-why svg { width: 18px; height: 18px; flex: none; color: rgb(var(--hl)); margin-top: 2px; } .cmp-details .cf-why p { margin: 0; font-style: italic; font-size: 14.5px; color: var(--text); }
.cmp-details .cf-flags { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; } .cmp-details .cf-flags li { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(239, 107, 107, .1); border: 1px solid rgba(239, 107, 107, .35); font-size: 13.5px; } .cmp-details .cf-flags svg { width: 15px; height: 15px; color: var(--bad); flex: none; }
.cmp-details .cf-edits { padding: 14px; border-radius: 14px; background: rgba(212, 184, 134, .08); border: 1px solid rgba(212, 184, 134, .35); margin: 10px 0; }
.cmp-details .cf-edits > b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; } .cmp-details .cf-edits > b svg { width: 17px; height: 17px; color: var(--gold); }
.cmp-details .cf-edits ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; } .cmp-details .cf-edits li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text); }
.cmp-details .cf-edits li i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #141416; font-style: normal; font-size: 12px; font-weight: 800; }

/* Platform-true previews (owner references 2026-10-22) */
.pv svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv .pv-top { align-items: center; } .pv-dots { margin-left: auto; color: #65676b; } .pv-dots svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.pv-sp { flex: 1; }
.fb-cnt { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; color: #65676b; }
.fb-rx, .li-rx { display: inline-flex; } .fb-rx i, .li-rx i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; margin-left: -4px; } .fb-rx i:first-child, .li-rx i:first-child { margin-left: 0; }
.fb-rx svg, .li-rx svg { width: 10px; height: 10px; fill: #fff; stroke: none; }
.rx-like { background: linear-gradient(#18a0fb, #1877f2); } .rx-love { background: linear-gradient(#ff6680, #e61739); } .rx-cele { background: linear-gradient(#6dae4f, #3f8e3f); }
.fb-bar { display: flex; justify-content: space-around; padding: 6px 4px 8px; margin: 0 12px; border-top: 1px solid #ced0d4; color: #65676b; font-size: 13.5px; font-weight: 600; }
.fb-bar span, .li-bar span { display: inline-flex; align-items: center; gap: 6px; } .fb-bar svg { width: 18px; height: 18px; }
.li-bar { display: flex; align-items: center; gap: 16px; padding: 10px 14px; color: #404040; font-size: 14px; font-weight: 600; } .li-bar svg { width: 20px; height: 20px; }
.li-more { color: #666; font-weight: 600; } .pv.li small { line-height: 1.35; }
.pv.tt { background: #000; } .pv.tt .pv-img.tall { position: relative; display: block; aspect-ratio: 9 / 16; background: linear-gradient(180deg, #2b2b2b, #111); }
.tt-top { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 16px; color: rgba(255, 255, 255, .7); font-size: 14px; } .tt-top b { color: #fff; border-bottom: 2px solid #fff; padding-bottom: 2px; }
.tt-side { position: absolute; right: 10px; bottom: 80px; display: grid; gap: 16px; justify-items: center; color: #fff; z-index: 2; }
.tt-side > span { display: grid; justify-items: center; } .tt-side svg { width: 32px; height: 32px; fill: #fff; stroke: none; } .tt-side em { font-style: normal; font-size: 12px; font-weight: 700; }
.tt-av { position: relative; } .tt-av .pv-av { width: 44px; height: 44px; border: 2px solid #fff; border-radius: 50%; } .tt-av i { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: #fe2c55; display: grid; place-items: center; } .tt-av i svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; }
.tt-cap { position: absolute; left: 12px; right: 70px; bottom: 16px; display: grid; gap: 4px; color: #fff; font-size: 13px; z-index: 2; } .tt-cap small { display: flex; align-items: center; gap: 6px; } .tt-cap small svg { width: 13px; height: 13px; }
.pv.yt { background: #0f0f0f; color: #f1f1f1; } .yt-b { padding: 10px 12px 14px; display: grid; gap: 10px; } .yt-t { font-size: 16px; line-height: 1.3; }
.yt-ch { display: flex; align-items: center; gap: 10px; } .yt-ch small { display: block; color: #aaa; font-size: 12px; } .yt-sub { margin-left: auto; background: #f1f1f1; color: #0f0f0f; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 99px; }
.yt-pills { display: flex; gap: 8px; flex-wrap: wrap; } .yt-pills span { display: inline-flex; align-items: center; gap: 6px; background: #272727; padding: 7px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; } .yt-pills svg { width: 16px; height: 16px; }
.yt-desc { background: #272727; border-radius: 10px; padding: 10px 12px; font-size: 13px; } .yt-desc p { margin: 4px 0 0; color: #f1f1f1; } .yt-cm { font-size: 15px; }
.pv.bl2 { background: #fff; color: #333; } .bl-b { padding: 14px 18px 12px; display: grid; gap: 8px; }
.bl-au { display: flex; align-items: center; gap: 10px; } .bl-au b { font-size: 13px; font-weight: 500; } .bl-au small { display: block; color: #777; font-size: 12px; }
.pv.bl2 h4 { margin: 4px 0 0; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 24px; color: #555; } .pv.bl2 p { margin: 0; color: #555; font-size: 14px; line-height: 1.5; }
.bl-foot { display: flex; align-items: center; gap: 14px; padding-top: 10px; margin-top: 6px; border-top: 1px solid #ddd; color: #555; font-size: 13px; } .bl-foot span { display: inline-flex; align-items: center; gap: 5px; } .bl-foot svg { width: 17px; height: 17px; }
.bl-heart svg { color: #e2484e; } .bl-heart.on svg { fill: #e2484e; }
.pv.tt { width: 340px; } .cmp-pv .pv.tt { width: 340px; } .fd-post .pv.tt { width: 100%; } .pv.tt .pv-img.tall { padding: 0; }

/* Notifications: group by company */
.nt-by { display: inline-flex; gap: 4px; margin-left: auto; } .nt-by button { border: 0; background: none; color: var(--text-3); font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 8px; cursor: pointer; } .nt-by button[aria-pressed="true"] { background: rgba(var(--hl), .16); color: var(--text); }
.nt-co { display: inline-flex; align-items: center; gap: 8px; } .nt-co .av { width: 22px; height: 22px; } .nt-co em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.nt-drawer .nt-by { display: flex; justify-content: flex-end; margin: -4px 20px 4px; }

/* Campaign cards, cleaner (owner 2026-10-22): one surface, color as an accent strip, calmer stats */
.camp-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.camp-card { position: relative; overflow: hidden; gap: 6px; padding: 20px 20px 18px; background: var(--card); border: 1px solid var(--line); }
.camp-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--cc); }
.camp-card:hover { border-color: color-mix(in srgb, var(--cc) 60%, transparent); background: var(--card-2); }
.camp-card .cc-top { margin-bottom: 8px; } .camp-card .cc-ic.big { width: 38px; height: 38px; border-radius: 11px; } .camp-card .cc-ic.big svg { width: 19px; height: 19px; }
.camp-card .cc-name { font-size: 17px; font-weight: 700; color: var(--text); }
.camp-card .cc-goal { color: var(--text-2); font-size: 14px; } .camp-card .cc-dates { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.camp-card .cc-bar { height: 4px; margin: 10px 0 6px; } 
.camp-card .cc-stats { gap: 0; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.camp-card .cc-stats > span { flex: 1; text-align: center; border-left: 1px solid var(--line); } .camp-card .cc-stats > span:first-child { border-left: 0; text-align: left; } .camp-card .cc-stats > span:last-child { text-align: right; }
.camp-card .cc-stats b { font-size: 20px; }
.camp-card.add { background: transparent; border: 1.5px dashed var(--line-2); min-height: 0; }
.camp-card.add::before { display: none; } .camp-card.add:hover { border-color: rgb(var(--hl)); background: rgba(var(--hl), .06); }
.camp-card.add svg { width: 22px; height: 22px; color: rgb(var(--hl)); } .camp-card.add b { color: var(--text); font-size: 15px; } .camp-card.add span { color: var(--text-3); }

/* TikTok fixes: the avatar stays a small circle; the calendar block uses a clean, flat TikTok look */
.pv .tt-av img.pv-av, .cmp-pv .pv-img .tt-av img, .pv-img .tt-av img { position: static; inset: auto; width: 44px !important; height: 44px !important; border-radius: 50%; object-fit: cover; border: 2px solid #fff; display: block; }
.cal-pill.blk.pf-tiktok { background: #121214; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cal-pill.blk.pf-tiktok .cal-mk, .cal-mk.pf-tiktok, .bmk.bf-tiktok, .conn-ic.brand.bf-tiktok, .ped-plat .cal-mk.pf-tiktok { background: #000 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; }
.cal-mk.pf-tiktok svg, .bf-tiktok svg, .cal-pill.blk.pf-tiktok .cal-mk svg { filter: none !important; color: #fff !important; }
.cal-mk.pf-tiktok, .bf-tiktok { position: relative; }
.cal-mk.pf-tiktok::after, .bmk.bf-tiktok::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #25F4EE 50%, #FE2C55 50%); }

/* Collapsed score card: ring, verdict, one clear button (owner 2026-10-22) */
.cmp-details, .cmp-details:not([open]) { background: var(--card); border: 1px solid var(--line); }
.cmp-details:not([open]):hover { background: var(--card-2); border-color: var(--line-2); }
.cmp-details summary { align-items: center; gap: 14px; padding: 14px 16px; }
.sc-ring { position: relative; width: 52px; height: 52px; flex: none; display: grid; place-items: center; }
.sc-ring svg { position: absolute; inset: 0; width: 52px; height: 52px; transform: rotate(-90deg); } .sc-ring circle { fill: none; stroke-width: 5; } .sc-ring .trk { stroke: var(--card-3); } .sc-ring .val { stroke-linecap: round; }
.sc-ring b { position: relative; font-size: 17px; font-weight: 800; color: var(--text); }
.sc-ring.good .val { stroke: var(--good); } .sc-ring.ok .val { stroke: var(--warn); } .sc-ring.bad .val { stroke: var(--bad); }
.sc-txt { flex: 1; display: grid; gap: 2px; min-width: 0; } .sc-txt b { font-size: 16px; font-weight: 800; } .sc-txt b.good { color: var(--good); } .sc-txt b.ok { color: var(--warn); } .sc-txt b.bad { color: var(--bad); } .sc-txt small { color: var(--text-3); font-size: 13px; }
.sc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; background: var(--card-3); color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; }
.sc-btn .cmp-chev { width: 14px; height: 14px; color: var(--text-2); }
.cmp-details[open] .sc-btn { background: none; color: var(--text-3); }
.cmp-details summary .sc-ring svg { width: 52px !important; height: 52px !important; }
.sc-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Emails page */
.em-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.em-list { display: grid; gap: 6px; position: sticky; top: 16px; }
.em-item { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.em-item span { display: grid; } .em-item small { color: var(--text-3); font-size: 12.5px; }
.em-item.on { border-color: rgba(var(--hl), .6); background: rgba(var(--hl), .1); }
.em-view { display: grid; gap: 12px; } .em-meta { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.em-meta small { display: block; color: var(--text-3); font-size: 12px; } .em-meta span { color: var(--text-2); font-size: 14px; }
.em-frame { width: 100%; height: 860px; border: 0; border-radius: 16px; background: #050505; }
@media (max-width: 900px) { .em-wrap { grid-template-columns: 1fr; } .em-meta { grid-template-columns: 1fr; } .em-list { position: static; } }

/* Ten starting people in the appearance editor */
.cc-bases { display: grid; gap: 8px; padding: 14px 16px 6px; } .cc-bases > b { font-size: 13.5px; color: var(--text-2); }
.cc-bases > div { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.cc-base { padding: 0; border: 2px solid transparent; border-radius: 14px; background: none; cursor: pointer; overflow: hidden; aspect-ratio: 1; } .cc-base svg { width: 100%; height: 100%; display: block; }
.cc-base:hover, .cc-base:focus-visible { border-color: rgb(var(--hl)); }
@media (max-width: 800px) { .cc-bases > div { grid-template-columns: repeat(5, 1fr); } }

/* Prospects */
.prs-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.prs-tile { display: flex; align-items: center; gap: 12px; padding: 16px; } .prs-tile small { display: block; color: var(--text-3); font-size: 12.5px; } .prs-tile b { font-size: 22px; }
.prs-filt { margin-bottom: 12px; }
.prs-list { padding: 4px; } .prs-row { display: grid; grid-template-columns: 40px 1.6fr 110px 130px 1.4fr; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; color: var(--text); text-decoration: none; } .prs-row + .prs-row { border-top: 1px solid var(--line); } .prs-row:hover { background: var(--card-2); }
.prs-av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--hl), .14); color: rgb(var(--hl)); font-weight: 800; }
.prs-who, .prs-next, .prs-val { display: grid; min-width: 0; } .prs-who small, .prs-next small, .prs-val small { color: var(--text-3); font-size: 12.5px; } .prs-who b, .prs-next b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prs-val { font-weight: 700; } .prs-next.late small { color: var(--bad); font-weight: 700; }
.prs-st { justify-self: start; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: rgba(var(--tc), .16); color: rgb(var(--tc)); }
.pp-wrap { display: grid; gap: 14px; max-width: 860px; } .pp-wrap textarea { width: 100%; }
@media (max-width: 800px) { .prs-tiles { grid-template-columns: 1fr 1fr; } .prs-row { grid-template-columns: 40px 1fr auto; } .prs-row .prs-val, .prs-row .prs-next { display: none; } }
.prs-row .prs-val { display: block; white-space: nowrap; } .prs-row .prs-val small { display: inline; }

/* Our numbers (Black Mast itself) */
.ours-est { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-color: rgba(var(--hl), .45); background: rgba(var(--hl), .08); margin-bottom: 16px; }
.ours-est b { display: block; } .ours-est p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.ours-hero { display: flex; gap: 22px; align-items: center; padding: 22px 24px; margin-bottom: 16px; }
.ours-hero h2 { margin: 0 0 6px; } .ours-hero p { margin: 0 0 4px; } .ours-hero small { color: var(--text-2); font-size: 14px; }
.ours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ours-t { display: grid; gap: 6px; justify-items: start; padding: 20px; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.ours-t small { color: var(--text-2); font-size: 13.5px; } .ours-t > b { font-size: 30px; line-height: 1.1; } .ours-t span { color: var(--text-3); font-size: 13px; min-height: 1em; }
.ours-t > b.good { color: var(--green, #4ade80); } .ours-t > b.bad { color: var(--red, #f87171); } .ours-t > b.fair { color: rgb(var(--hl)); }
.ours-t:hover, .ours-t:focus-visible { border-color: rgba(var(--hl), .6); }
@media (max-width: 900px) { .ours-grid { grid-template-columns: repeat(2, 1fr); } }

/* Month title sits on the page with no box behind it (owner, 2026-10-22) */
.cal-title { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0; }

/* Pricing (price book) */
.pb-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pb-main, .pb-side { display: grid; gap: 16px; }
.pb-grp, .pb-rules, .pb-hist { padding: 18px 20px; }
.pb-h { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .pb-h b { display: block; } .pb-h small { color: var(--text-2); font-size: 13.5px; }
.pb-row { display: grid; grid-template-columns: 1fr 190px 190px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pb-n { font-weight: 600; }
.pb-in { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2, rgba(255,255,255,.03)); }
.pb-in input { width: 100%; min-width: 0; border: 0; background: none; color: var(--text); font: 600 15px inherit; font-family: inherit; text-align: right; outline: none; }
.pb-in span { color: var(--text-3); } .pb-in em { font-style: normal; color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.pb-in:focus-within { border-color: rgba(var(--hl), .7); }
.pb-save { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; margin-bottom: 16px; border-color: rgba(var(--hl), .5); background: rgba(var(--hl), .08); }
.pb-save p { margin: 4px 0 8px; color: var(--text-2); font-size: 14px; } .pb-save input { width: 100%; max-width: 420px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; }
.pb-acts { display: flex; gap: 8px; }
.pb-links { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 18px 20px; align-items: start; } .pb-links p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; } .pb-links .btn { grid-column: 2; justify-self: start; }
.pb-v { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } .pb-v small { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; }
.pb-vn { flex: none; width: 34px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--hl), .14); color: rgb(var(--hl)); font-weight: 800; font-size: 12.5px; }
.pb-c { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; align-items: center; }
.pb-ch { color: var(--text-3); font-size: 12.5px; } .pb-ch b { font-weight: 600; }
.pb-c .good { color: var(--text-2); } .pb-c .fair { color: rgb(var(--hl)); } .pb-c .bad { color: var(--red, #f87171); font-weight: 600; }
.pb-empty { padding: 10px 0 0; border-top: 1px solid var(--line); margin: 0; }
@media (max-width: 1000px) { .pb-wrap { grid-template-columns: 1fr; } .pb-row { grid-template-columns: 1fr 1fr; } .pb-row .pb-n { grid-column: 1 / -1; } .pb-save { grid-template-columns: 1fr; } }

/* Long app names stay on one line; tabs tighten instead (Agency Management has 8 tabs) */
.mod-sw span { white-space: nowrap; }
.btabs { min-width: 0; overflow-x: auto; scrollbar-width: none; } .btabs::-webkit-scrollbar { display: none; }
.btabs a { white-space: nowrap; flex: none; }
@media (max-width: 1600px) { .btabs { gap: 0; } .btabs a { padding-left: 10px; padding-right: 10px; } }

/* Team (Agency Management) */
.tm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.tm-tile { display: grid; gap: 6px; justify-items: start; padding: 18px 20px; } .tm-tile small { color: var(--text-2); font-size: 13.5px; } .tm-tile b { font-size: 28px; line-height: 1.1; }
.tm-un { padding: 18px 20px; margin-bottom: 16px; }
.tm-ur { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tm-card { display: grid; gap: 14px; padding: 20px; align-content: start; }
.tm-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; } .tm-top small { display: block; color: var(--text-2); font-size: 13px; }
.tm-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--hl), .16); color: rgb(var(--hl)); font-weight: 800; object-fit: cover; }
.tm-role { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.06); }
.tm-role.c-gold { color: #D4B886; background: rgba(212,184,134,.14); } .tm-role.c-blue { color: #7AA7F5; background: rgba(59,130,246,.14); } .tm-role.c-teal { color: #5FD4C8; background: rgba(67,195,183,.14); } .tm-role.c-silver { color: #BFC2C7; background: rgba(191,194,199,.12); }
.tm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .tm-stats small { display: block; color: var(--text-3); font-size: 12.5px; } .tm-stats b { font-size: 18px; } .tm-stats b.bad { color: var(--red, #f87171); }
.tm-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; } .tm-bar span { display: block; height: 100%; border-radius: 6px; background: rgb(var(--hl)); }
.tm-cos { display: grid; gap: 6px; } .tm-cos a { display: flex; gap: 10px; align-items: center; color: var(--text); padding: 6px 8px; margin: 0 -8px; border-radius: 10px; } .tm-cos a:hover { background: rgba(255,255,255,.05); }
.tm-none { margin: 0; }
@media (max-width: 900px) { .tm-tiles { grid-template-columns: repeat(2, 1fr); } }

/* Templates (Agency Management) */
.tp-lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.tp-li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 16px 18px; color: var(--text); }
.tp-li span b { display: block; } .tp-li small { color: var(--text-2); font-size: 13px; } .tp-li:hover { border-color: rgba(var(--hl), .6); }
.tp-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tp-card { padding: 18px 20px; display: grid; gap: 12px; }
.tp-seg { justify-self: start; }
.tp-list { list-style: none; margin: 0; padding: 0; }
.tp-step { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.tp-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--hl), .14); color: rgb(var(--hl)); font-weight: 800; font-size: 12.5px; }
.tp-step input, .tp-rec input, .tp-add input, .tp-add select { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--text); font: inherit; min-width: 0; }
.tp-step input:hover, .tp-rec input:hover { border-color: var(--line); } .tp-step input:focus, .tp-rec input:focus, .tp-add input:focus { border-color: rgba(var(--hl), .7); outline: none; background: rgba(255,255,255,.03); }
.tp-auto { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; color: #4CC38A; white-space: nowrap; } .tp-auto svg { width: 14px; height: 14px; }
.tp-btns { display: flex; gap: 2px; }
.tp-add { display: flex; gap: 8px; } .tp-add input { flex: 1; border-color: var(--line); background: rgba(255,255,255,.03); } .tp-add select { border-color: var(--line); background: var(--card); }
.tp-back { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tp-back small { color: var(--text-3); margin-right: 4px; }
.tp-foot { display: flex; justify-content: flex-end; }
.tp-every { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); } .tp-every > b { font-size: 13.5px; color: var(--text-2); }
.tp-rec { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; } .tp-rec input { margin-left: -12px; }
@media (max-width: 1000px) { .tp-wrap, .tp-lib { grid-template-columns: 1fr; } }
.tp-li > svg:last-child { transform: rotate(-90deg); color: var(--text-3); }

/* Playbook (Agency Management) */
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pl-card { padding: 20px 22px; display: grid; gap: 12px; border-top: 3px solid var(--pl-c, rgb(var(--hl))); }
.pl-card.c-gold { --pl-c: #D4B886; } .pl-card.c-teal { --pl-c: #43C3B7; } .pl-card.c-rose { --pl-c: #E58BB0; } .pl-card.c-blue { --pl-c: #6F9BF0; }
.pl-h { display: flex; gap: 12px; align-items: center; } .pl-h h2 { margin: 0; font-size: 20px; }
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pl-play { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .pl-play.ed { grid-template-columns: 30px 1fr auto; align-items: start; }
.pl-play b { display: block; } .pl-play p { margin: 3px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.pl-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--pl-c); background: color-mix(in srgb, var(--pl-c) 16%, transparent); } .pl-n svg { width: 14px; height: 14px; }
.pl-play.fixed b { color: var(--text); } .pl-play.fixed p { color: var(--text-3); }
.pl-play.ed div { display: grid; gap: 6px; } .pl-play.ed input, .pl-play.ed textarea { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; resize: vertical; } .pl-play.ed input { font-weight: 700; }
.pl-play.ed input:focus, .pl-play.ed textarea:focus { outline: none; border-color: var(--pl-c); }
.pl-card > .btn { justify-self: start; }
.pl-links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.pl-link { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.05); color: var(--text); font-size: 13.5px; font-weight: 600; } .pl-link svg { width: 14px; height: 14px; transform: rotate(-90deg); color: var(--text-3); } .pl-link:hover { background: rgba(255,255,255,.09); }
@media (max-width: 1000px) { .pl-grid { grid-template-columns: 1fr; } }

/* Wide screens: the page title row lines up with the centered content column (owner 2026-10-22) */
@media (min-width: 761px) { .panel-h { padding-left: max(32px, calc((100% - 1400px) / 2 + 32px)); padding-right: max(32px, calc((100% - 1400px) / 2 + 32px)); } }
/* Guarantee wording gets its own full line so it is never cut off */
.offer-grt { flex-wrap: wrap; } .offer-grt .grt-help { margin-left: auto; } .offer-grt .grt-in { order: 5; flex: 1 1 100%; }

/* More tabs menu (Agency Management has more tabs than fit) */
.tab-more { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 600 14px var(--font); cursor: pointer; white-space: nowrap; flex: none; }
.tab-more:hover { color: var(--text); } .tab-more.on { background: var(--text); color: #141416; } .tab-more svg { width: 14px; height: 14px; }
.tab-more { height: 34px; font-size: 13.5px; }

/* Guarantee cards, cleaner (owner 2026-10-22): one-color level gauge, quote with an accent edge, no label, no top stripe */
.g-cards2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-bottom: 22px; }
.gcard2 { --zc: 226, 174, 79; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; }
.gcard2.z-bad { --zc: 239, 107, 107; } .gcard2.z-good { --zc: 76, 195, 138; }
.gc2-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .gc2-h b { font-size: 16px; color: var(--text); line-height: 1.3; }
.gc2-lv { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 9px; border-radius: 9px; background: rgba(var(--zc), .12); color: rgb(var(--zc)); font-size: 12.5px; font-weight: 700; }
.gc2-bars { display: inline-flex; gap: 2px; align-items: flex-end; } .gc2-bars i { width: 4px; border-radius: 2px; background: rgba(var(--zc), .25); }
.gc2-bars i:nth-child(1) { height: 6px; } .gc2-bars i:nth-child(2) { height: 9px; } .gc2-bars i:nth-child(3) { height: 12px; } .gc2-bars i:nth-child(4) { height: 15px; } .gc2-bars i.on { background: rgb(var(--zc)); }
.gc2-one { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.gc2-q { margin: auto 0 0; padding: 14px 16px; border-radius: 12px; background: var(--card-2); border-left: 3px solid rgb(var(--zc)); display: grid; gap: 10px; }
.gc2-q p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.5; }
.gc2-copy { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--text-2); font: 600 12.5px var(--font); cursor: pointer; } .gc2-copy svg { width: 13px; height: 13px; } .gc2-copy:hover { color: var(--text); border-color: var(--line-2); }
/* Boldness scale matches the card gauges: tinted segments, colored labels */
.gm-track.big { gap: 4px; height: 34px; } .gm-track.big .gm-z { border-radius: 9px; } .gm-track.big .gm-z + .gm-z { border-left: 0; }
.gm-track.big .gm-z.bad { background: rgba(239,107,107,.14); } .gm-track.big .gm-z.fair { background: rgba(226,174,79,.14); } .gm-track.big .gm-z.good { background: rgba(76,195,138,.14); }
.gm-track.big .gm-z.bad em { color: #EF6B6B; } .gm-track.big .gm-z.fair em { color: #E2AE4F; } .gm-track.big .gm-z.good em { color: #4CC38A; } .gm-track.big .gm-z em { font-size: 12.5px; }
.gm-track.big .gm-z:last-child { background: rgba(76,195,138,.26); }

/* Guarantees, redesigned: objection picker, then only its guarantees */
.go-picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.go-pick { display: grid; gap: 8px; justify-items: start; align-content: start; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.go-pick b { font-size: 15px; line-height: 1.3; } .go-pick small { color: var(--text-3); font-size: 12.5px; }
.go-pick:hover { border-color: var(--line-2); }
.go-pick.on { border-color: rgb(var(--tc, 212, 184, 134)); background: rgba(var(--tc, 212, 184, 134), .1); box-shadow: inset 0 0 0 1px rgb(var(--tc, 212, 184, 134)); }
.go-why { margin: 0 0 14px; font-size: 15px; color: var(--text-2); }
.gc2-acts { display: flex; gap: 8px; margin-top: auto; }
.gcard2 .gc2-q { margin: 0; flex: 1; }
.go-tip { display: flex; gap: 10px; align-items: center; margin: 8px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text-2); font-size: 14px; } .go-tip svg { width: 18px; height: 18px; color: #E2AE4F; flex: none; } .go-tip b { color: var(--text); }
@media (max-width: 1100px) { .go-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Color pass (owner 2026-10-22: color, tinted containers, consistent pills) */
.c-rose { --tc: 229, 139, 176; } .c-violet { --tc: 160, 138, 242; }
/* Guarantees */
.go-pick { background: rgba(var(--tc, 212, 184, 134), .07); border-color: rgba(var(--tc, 212, 184, 134), .22); }
.go-pick:hover { background: rgba(var(--tc, 212, 184, 134), .12); border-color: rgba(var(--tc, 212, 184, 134), .45); }
.go-pick.on { background: rgba(var(--tc, 212, 184, 134), .2); border-color: rgb(var(--tc, 212, 184, 134)); box-shadow: inset 0 0 0 1px rgb(var(--tc, 212, 184, 134)), 0 10px 30px rgba(var(--tc, 212, 184, 134), .12); }
.go-pick .ic { width: 38px; height: 38px; } .go-pick.on small { color: rgb(var(--tc, 212, 184, 134)); font-weight: 600; }
.go-why { display: flex; gap: 14px; align-items: center; margin: 0 0 16px; padding: 16px 18px; border-radius: 16px; background: rgba(var(--tc), .12); border: 1px solid rgba(var(--tc), .35); }
.go-why p { margin: 0; color: var(--text-2); font-size: 14.5px; } .go-why b { display: block; color: var(--text); font-size: 16px; margin-bottom: 2px; }
.gcard2 { background: rgba(var(--zc), .05); border-color: rgba(var(--zc), .22); }
.gcard2 .gc2-q { background: rgba(var(--zc), .09); }
.go-tip { background: rgba(226, 174, 79, .08); border-color: rgba(226, 174, 79, .3); }
/* Folding sections in the post composer */
.cmp-sec { --tc: 212, 184, 134; overflow: hidden; border-color: rgba(var(--tc), .28); }
.cmp-sec summary { background: rgba(var(--tc), .12); }
.cmp-sec summary:hover { background: rgba(var(--tc), .18); }
.cmp-sec[open] summary { border-bottom: 1px solid rgba(var(--tc), .22); }
.cmp-sec .cmp-chev { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: rgba(var(--tc), .2); color: rgb(var(--tc)); flex: none; }
.cmp-sec summary:hover .cmp-chev { background: rgba(var(--tc), .32); }
/* Forecast levers */
.levers .lever2 { display: grid; gap: 12px; padding: 14px; margin-top: 10px; border-radius: 14px; background: rgba(var(--tc), .07); border: 1px solid rgba(var(--tc), .2); }
.levers .lever2 + .lever2 { border-top: 1px solid rgba(var(--tc), .2); }
.levers .lever2.on { background: rgba(var(--tc), .16); border-color: rgba(var(--tc), .6); }
.lever2 .lever-t { display: flex; gap: 12px; align-items: center; } .lever2 .lever-t > span { display: grid; min-width: 0; }
.lever2 .lever-t b { font-weight: 600; font-size: 14.5px; } .lever2.on .lever-t small { color: rgb(var(--tc)); font-weight: 600; }
.stepper2 { display: grid; grid-template-columns: 44px 1fr 44px; gap: 0; height: 42px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(var(--tc), .3); background: var(--bg); }
.stepper2 button { width: auto; height: 100%; border: 0; border-radius: 0; background: rgba(var(--tc), .12); color: rgb(var(--tc)); font: 600 20px var(--font); }
.stepper2 button:hover { background: rgba(var(--tc), .25); color: var(--text); }
.stepper2 .st-box { height: 100%; border: 0; border-radius: 0; background: none; justify-content: center; }
.stepper2 .st-box input { text-align: center; font-size: 16px; font-weight: 700; }
.stepper2 .st-box { gap: 3px; } .stepper2 .st-box input { flex: 0 1 auto; width: 7ch; text-align: right; } .stepper2 .st-box input:only-child, .stepper2 .st-box i + input:last-child { text-align: left; } .stepper2 .st-box i { font-size: 15px; }
/* Advanced sections announce themselves when switched on */
.adv { border-color: rgba(212,184,134,.35); background: linear-gradient(rgba(212,184,134,.05), rgba(212,184,134,.05)), var(--card); margin-bottom: 18px; }
.adv-new { animation: advIn 1.6s ease; } @keyframes advIn { 0%, 40% { box-shadow: 0 0 0 2px rgba(212,184,134,.8); } 100% { box-shadow: 0 0 0 0 rgba(212,184,134,0); } }
@media (prefers-reduced-motion: reduce) { .adv-new { animation: none; } }

/* Partners (Agency Management) */
.pt-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; background: rgba(var(--tc), .18); color: rgb(var(--tc)); font-weight: 800; font-size: 15px; border: 1px solid rgba(var(--tc), .4); }
.pt-mark.lg { width: 40px; height: 40px; font-size: 15px; margin-right: 4px; }
.pt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.pt-tile { display: grid; gap: 6px; justify-items: start; padding: 18px 20px; background: rgba(var(--tc), .07); border-color: rgba(var(--tc), .25); } .pt-tile small { color: var(--text-2); font-size: 13.5px; } .pt-tile b { font-size: 28px; line-height: 1.1; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pt-card { display: grid; gap: 14px; padding: 20px; color: var(--text); background: rgba(var(--tc), .06); border-color: rgba(var(--tc), .25); } .pt-card:hover { border-color: rgba(var(--tc), .6); background: rgba(var(--tc), .1); }
.pt-h { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; } .pt-h small { display: block; color: var(--text-2); font-size: 13px; } .pt-h > svg { transform: rotate(-90deg); color: var(--text-3); width: 16px; }
.pt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pt-stats small { display: block; color: var(--text-3); font-size: 12.5px; } .pt-stats b { font-size: 17px; } .pt-owed { color: #4CC38A; }
.pt-disc { justify-self: start; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: rgba(var(--tc), .16); color: rgb(var(--tc)); }
.pt-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; } .pt-main, .pt-side { display: grid; gap: 16px; }
.pt-sec { padding: 18px 20px; display: grid; gap: 12px; }
.pt-money { background: rgba(76, 195, 138, .06); border-color: rgba(76, 195, 138, .28); }
.pt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-f { display: grid; gap: 6px; } .pt-f > span:first-child { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pt-f input, .pt-f textarea { height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; } .pt-f textarea { height: auto; padding: 10px 12px; resize: vertical; }
.pt-f input:focus, .pt-f textarea:focus { outline: none; border-color: rgba(var(--hl), .7); }
.pt-disc-in .pb-in input { height: auto; border: 0; padding: 0; background: none; }
.pt-colors { display: flex; gap: 8px; } .pt-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: rgb(var(--tc)); cursor: pointer; } .pt-sw.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--card) inset; }
.pt-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pt-sum > div { padding: 12px 14px; border-radius: 12px; background: rgba(76, 195, 138, .1); } .pt-sum small { display: block; color: var(--text-2); font-size: 12.5px; } .pt-sum b { font-size: 22px; }
.pt-cl { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); }
.panel-h h1 .pt-mark { vertical-align: middle; }
@media (max-width: 1000px) { .pt-wrap, .pt-form, .pt-tiles { grid-template-columns: 1fr; } }

/* Email sequences (Marketing) */
.sq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 18px; align-items: start; }
.sq-left { position: sticky; top: 16px; } .sq-right { display: grid; gap: 16px; }
.sq-form { padding: 20px; display: grid; gap: 14px; background: rgba(212,184,134,.05); border-color: rgba(212,184,134,.25); }
.sq-f { display: grid; gap: 6px; } .sq-f > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.sq-f input, .sq-f textarea, .sq-subj input { width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; resize: vertical; }
.sq-f input:focus, .sq-f textarea:focus, .sq-subj input:focus, .sq-body:focus { outline: none; border-color: rgba(var(--hl), .7); }
.sq-seg { justify-self: start; flex-wrap: wrap; }
.sq-note { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 12px; border-radius: 11px; background: rgba(76,195,138,.08); color: var(--text-2); font-size: 13.5px; } .sq-note svg { width: 16px; height: 16px; color: #4CC38A; flex: none; }
.sq-go { justify-self: stretch; justify-content: center; height: 44px; }
/* each draft is a compose window: window bar, From, To, Subject, the email on paper, then the check */
.sq-mail { --tc: 212, 184, 134; padding: 0; overflow: hidden; display: grid; background: var(--card); border-color: rgba(var(--tc), .32); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.sq-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(var(--tc), .14); border-bottom: 1px solid rgba(var(--tc), .22); } .sq-bar b { font-size: 13.5px; }
.sq-lights { display: inline-flex; gap: 6px; } .sq-lights i { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--tc), .55); } .sq-lights i + i { opacity: .6; } .sq-lights i + i + i { opacity: .35; }
.sq-when { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(var(--tc), .2); color: rgb(var(--tc)); font-size: 12.5px; font-weight: 700; } .sq-when svg { width: 13px; height: 13px; }
.sq-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--line); } .sq-row > span { font-size: 13px; color: var(--text-3); }
.sq-row p { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; } .sq-row p i { font-style: normal; color: var(--text-3); } .sq-row small { color: var(--text-3); font-size: 12.5px; }
.sq-to { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border-radius: 999px; background: rgba(var(--tc), .16); color: var(--text); font-size: 13px; font-weight: 600; } .sq-to svg { width: 14px; height: 14px; color: rgb(var(--tc)); }
.sq-subj input { width: 100%; padding: 4px 0; border: 0; background: none; color: var(--text); font: 700 16px var(--font); } .sq-subj input:focus { outline: none; box-shadow: 0 1px 0 rgba(var(--tc), .8); }
.sq-paper { padding: 18px; background: rgba(var(--tc), .05); }
.sq-body { display: block; width: 100%; min-height: 230px; padding: 22px 24px; border-radius: 10px; border: 1px solid #E4DCCB; background: #FBF8F2; color: #26252A; font: 400 15px/1.65 -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; resize: vertical; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.sq-body:focus { outline: none; border-color: rgb(var(--tc)); box-shadow: 0 0 0 3px rgba(var(--tc), .3); }
.sq-mail.writing .sq-body { caret-color: transparent; } .sq-mail.writing .sq-by img { animation: sq-bob 1s ease-in-out infinite; }
@keyframes sq-bob { 50% { transform: translateY(-2px) rotate(-6deg); } }
.sq-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); }
.sq-by { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font-size: 13px; font-weight: 600; color: var(--text-2); } .sq-by small { font-weight: 400; color: var(--text-3); } .sq-by small::before { content: '\00B7'; margin-right: 7px; }
.sq-chk { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; max-width: 300px; } .sq-chk svg { width: 13px; height: 13px; flex: none; }
.sq-chk.good { background: rgba(76,195,138,.14); color: #4CC38A; } .sq-chk.fair { background: rgba(226,174,79,.14); color: #E2AE4F; }
.sq-chat { min-height: 520px; background: rgba(212,184,134,.05); border-color: rgba(212,184,134,.25); }
@media (max-width: 640px) { .sq-row { grid-template-columns: 52px 1fr; padding: 8px 14px; } .sq-paper { padding: 10px; } .sq-body { padding: 16px; } .sq-by small { display: none; } }
.sq-empty .learn-link { margin-top: 6px; }
@media (max-width: 1000px) { .sq-wrap { grid-template-columns: 1fr; } .sq-left { position: static; } }

/* Ad copy coach (Marketing) */
.ad-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ad-left { display: grid; gap: 16px; } .ad-right { position: sticky; top: 16px; display: grid; gap: 16px; }
.ad-step { --tc: 212, 184, 134; padding: 18px 20px; display: grid; gap: 14px; background: rgba(var(--tc), .05); border-color: rgba(var(--tc), .25); }
.ad-sh { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center; } .ad-sh b { display: block; font-size: 16px; } .ad-sh small { color: var(--text-2); font-size: 13px; }
.ad-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: rgba(var(--tc), .18); color: rgb(var(--tc)); }
.ad-f { display: grid; gap: 6px; } .ad-f > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.ad-f input { width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; } .ad-f input:focus { outline: none; border-color: rgb(var(--tc)); }
.ad-seg { flex-wrap: wrap; justify-self: start; }
.ad-idea { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(var(--tc), .2); background: rgba(var(--tc), .06); color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ad-idea svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: rgb(var(--tc)); } .ad-idea:hover { background: rgba(var(--tc), .12); } .ad-idea.on { border-color: rgb(var(--tc)); background: rgba(var(--tc), .16); }
.ad-pv { padding: 0; overflow: hidden; background: #FFFFFF; color: #050505; border-color: transparent; }
.ad-pv-h { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px 8px; } .ad-pv-h b { display: block; font-size: 14.5px; color: #050505; } .ad-pv-h small { color: #65676B; font-size: 12.5px; } .ad-dots svg { width: 18px; color: #65676B; }
.ad-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ad-pv-t { margin: 0; padding: 0 14px 12px; font-size: 14.5px; line-height: 1.45; color: #050505; } .ad-pv-t .muted { color: #8A8D91; }
.ad-pv-img { position: relative; aspect-ratio: 1.2; display: grid; place-items: end center; padding: 16px; background: linear-gradient(135deg, #3B4A5A, #1F2833); }
.ad-pv-img small { color: rgba(255,255,255,.55); font-size: 12px; text-align: center; }
.ad-pv-f { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; background: #F0F2F5; } .ad-pv-f small { color: #65676B; font-size: 12px; text-transform: uppercase; } .ad-pv-f b { display: block; color: #050505; font-size: 15px; }
.ad-pv-btn { padding: 8px 14px; border-radius: 6px; background: #E4E6EB; color: #050505; font-weight: 700; font-size: 14px; }
.ad-chk { padding: 18px 20px; display: grid; gap: 4px; }
.ad-chk-h { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 8px; } .ad-chk-h b { display: block; font-size: 16px; } .ad-chk-h small { color: var(--text-2); font-size: 13px; }
.ad-ring { width: 58px; height: 58px; } .ad-ring text { font: 800 11px var(--font); fill: var(--text); }
.ad-ci { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .ad-ci svg { width: 16px; height: 16px; margin-top: 2px; }
.ad-ci.ok svg { color: #4CC38A; } .ad-ci.no svg { color: #EF6B6B; } .ad-ci b { font-size: 14px; font-weight: 600; } .ad-ci.ok b { color: var(--text-2); } .ad-ci small { display: block; color: var(--text-2); font-size: 13px; }
.ad-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 1100px) { .ad-wrap { grid-template-columns: 1fr; } .ad-right { position: static; } }

/* One sub-tab style everywhere (owner 2026-10-22): the same white pill as the main tabs */
.lab-nav, .tabs, .icp-tabs, .cal-tabs { flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); width: max-content; max-width: 100%; }
.lab-nav a, .tabs a, .icp-tabs a, .icp-tabs button, .cal-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0 !important; border-radius: 999px; background: none; color: var(--text-2); font: 600 14px var(--font); white-space: nowrap; cursor: pointer; box-shadow: none; margin: 0; }
.lab-nav a:hover, .tabs a:hover, .icp-tabs a:hover, .icp-tabs button:hover, .cal-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.lab-nav a.on, .tabs a.on, .icp-tabs a.on, .icp-tabs button.on, .cal-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .92) !important; color: #18181B !important; box-shadow: none; }

/* Build an offer: chat or step by step (owner 2026-10-22) */
.og-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.og-card { display: grid; gap: 10px; justify-items: start; padding: 28px; text-align: left; font: inherit; color: var(--text); cursor: pointer; background: rgba(var(--tc), .08); border-color: rgba(var(--tc), .3); }
.og-card:hover { background: rgba(var(--tc), .14); border-color: rgb(var(--tc)); } .og-card .ic { width: 46px; height: 46px; } .og-card b { font-size: 20px; } .og-card p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.og-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: rgb(var(--tc)); font-weight: 700; font-size: 14px; } .og-go svg { width: 15px; height: 15px; transform: rotate(-90deg); }
.og-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .og-seg button svg { width: 15px; height: 15px; }
.og-prog { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 18px; }
.og-dot { display: grid; gap: 8px; justify-items: start; padding: 0; border: 0; background: none; color: var(--text-3); font: 600 12.5px var(--font); cursor: pointer; text-align: left; }
.og-dot::before { content: ''; display: block; width: 100%; height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); }
.og-dot.done::before { background: rgba(212,184,134,.6); } .og-dot.on::before { background: #D4B886; box-shadow: 0 0 12px rgba(212,184,134,.5); }
.og-dot i { display: none; } .og-dot.on, .og-dot.done { color: var(--text); }
.b-steps.quiz[data-cur="1"] > :not(:nth-child(1)) { display: none; } .b-steps.quiz[data-cur="2"] > :not(:nth-child(2)) { display: none; } .b-steps.quiz[data-cur="3"] > :not(:nth-child(3)) { display: none; } .b-steps.quiz[data-cur="4"] > :not(:nth-child(4)) { display: none; } .b-steps.quiz[data-cur="5"] > :not(:nth-child(5)) { display: none; } .b-steps.quiz[data-cur="6"] > :not(:nth-child(6)) { display: none; } .b-steps.quiz[data-cur="7"] > :not(:nth-child(7)) { display: none; }
.og-quiz { display: grid; gap: 14px; align-content: start; }
.og-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .og-next { transform: rotate(-90deg); }
.og-chatwrap { align-items: start; }
.og-chat { display: grid; grid-template-rows: 1fr auto; gap: 12px; padding: 16px; min-height: 560px; max-height: 72vh; background: rgba(160,138,242,.05); border-color: rgba(160,138,242,.25); }
.og-thread { overflow-y: auto; display: grid; gap: 12px; align-content: start; padding: 4px; }
.og-m { display: flex; gap: 10px; align-items: flex-end; max-width: 86%; } .og-m p { margin: 0; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.og-m.og-ai p { background: var(--card-2); border-bottom-left-radius: 5px; } .og-m.og-me { justify-self: end; } .og-m.og-me p { background: rgba(212,184,134,.18); border: 1px solid rgba(212,184,134,.3); border-bottom-right-radius: 5px; }
.og-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 36px; }
.og-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(160,138,242,.4); background: rgba(160,138,242,.1); color: var(--text); font: 600 13px var(--font); cursor: pointer; } .og-chip:hover { background: rgba(160,138,242,.22); }
.og-chip.num { width: 38px; padding: 7px 0; text-align: center; } .og-chip.quiet { border-color: var(--line); background: none; color: var(--text-2); }
.chatbar { margin: 0; }
@media (max-width: 900px) { .og-choose { grid-template-columns: 1fr; } .og-prog { grid-template-columns: repeat(4, 1fr); } }

/* Lead magnets: format, name, check, next (owner 2026-10-22) */
.lm-fmts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.lm-fmt { display: grid; gap: 8px; justify-items: start; align-content: start; padding: 16px; border-radius: 16px; border: 1px solid rgba(var(--tc), .25); background: rgba(var(--tc), .07); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lm-fmt b { font-size: 14.5px; line-height: 1.3; } .lm-fmt small { font-size: 12.5px; font-weight: 700; color: rgb(var(--tc)); }
.lm-fmt:hover { background: rgba(var(--tc), .13); border-color: rgba(var(--tc), .5); }
.lm-fmt.on { background: rgba(var(--tc), .2); border-color: rgb(var(--tc)); box-shadow: inset 0 0 0 1px rgb(var(--tc)), 0 10px 30px rgba(var(--tc), .12); }
.lm-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lm-name { --tc: 212, 184, 134; padding: 20px; display: grid; gap: 16px; background: rgba(var(--tc), .06); border-color: rgba(var(--tc), .3); }
.lm-big { padding: 22px; border-radius: 14px; background: rgba(var(--tc), .14); border: 1px dashed rgba(var(--tc), .5); font: 800 26px/1.2 var(--font); color: var(--text); text-align: center; letter-spacing: -.01em; }
.lm-big span { color: var(--text-3); font-weight: 600; font-size: 16px; }
.lm-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lm-check { padding: 18px 20px; display: grid; gap: 12px; }
.lm-ch-h { display: flex; justify-content: space-between; align-items: center; } .lm-ch-h b { font-size: 16px; }
.lm-score { padding: 4px 10px; border-radius: 9px; font-weight: 800; font-size: 13px; background: rgba(255,255,255,.07); color: var(--text-2); } .lm-score.fair { background: rgba(226,174,79,.15); color: #E2AE4F; } .lm-score.good { background: rgba(76,195,138,.15); color: #4CC38A; }
.lm-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lm-rule { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lm-rule i { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-2); display: grid; place-items: center; } .lm-rule i svg { width: 14px; height: 14px; }
.lm-rule b { display: block; font-size: 13.5px; } .lm-rule small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.lm-rule.on { border-color: rgba(76,195,138,.45); background: rgba(76,195,138,.08); } .lm-rule.on i { background: #4CC38A; border-color: #4CC38A; color: #0B0B0C; }
.lm-next { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; padding: 18px 20px; background: rgba(212,184,134,.08); border-color: rgba(212,184,134,.35); }
.lm-next > div { display: flex; gap: 12px; align-items: center; } .lm-next b { display: block; } .lm-next small { color: var(--text-2); font-size: 13.5px; }
@media (max-width: 1200px) { .lm-fmts { grid-template-columns: repeat(3, 1fr); } .lm-grid { grid-template-columns: 1fr; } }

/* Offers: See details (owner 2026-10-22: see how it works, then edit it) */

.offer-h .od-open { flex: none; }
.od .drawer-b { display: grid; gap: 16px; }
.od-hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 20px 22px; border-radius: 18px; background: rgba(229,139,176,.08); border: 1px solid rgba(229,139,176,.28); }
.od-score { display: grid; justify-items: center; gap: 8px; } .od-score .fig { font-size: 46px; font-weight: 800; line-height: 1; }
.od-how b { display: block; margin-bottom: 4px; } .od-how p { margin: 0; color: var(--text-2); line-height: 1.55; }
.od-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.od-part { padding: 16px 18px; border-radius: 16px; background: rgba(var(--tc), .07); border: 1px solid rgba(var(--tc), .24); display: grid; gap: 10px; }
.od-part.drag { background: rgba(var(--tc), .14); border-color: rgba(var(--tc), .6); box-shadow: 0 0 0 1px rgba(var(--tc), .35); }
.od-ph { display: flex; align-items: center; gap: 8px; } .od-ph b { font-size: 15px; }
.od-n { margin-left: auto; font-size: 24px; font-weight: 800; color: rgb(var(--tc)); } .od-n small { font-size: 13px; font-weight: 600; color: var(--text-3); }
.od-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(var(--tc), .24); color: var(--text); font-size: 12px; font-weight: 700; } .od-tag svg { width: 12px; height: 12px; }
.od-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; } .od-bar i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--tc)); }
.od-part p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.od-lift { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: rgba(212,184,134,.1); border: 1px solid rgba(212,184,134,.4); }
.od-lift p { margin: 2px 0 0; color: var(--text-2); } .od-lift p b { color: var(--gold); font-size: 16px; }
.od-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.od-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: rgba(var(--tc), .06); border: 1px solid rgba(var(--tc), .2); }
.od-row p, .od-row ul { margin: 4px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.5; } .od-row ul { padding-left: 18px; }
.od-f { display: flex; gap: 10px; }
.od-editing { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(229,139,176,.1); border: 1px solid rgba(229,139,176,.35); } .od-editing p { flex: 1; margin: 0; } .od-editing .btn { flex: none; }
@media (max-width: 700px) { .od-hero { grid-template-columns: 1fr; justify-items: start; } .od-parts, .od-more { grid-template-columns: 1fr; } .od-lift { grid-template-columns: auto 1fr; } .od-lift .btn { grid-column: 1 / -1; } }

/* Dictation: red while listening, dimmed while the words are worked out */
.pr-tool.rec { color: #EF6B6B; background: rgba(239,107,107,.16); animation: rec-pulse 1.2s ease-in-out infinite; } .pr-tool.busy { opacity: .5; cursor: progress; }
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 6px rgba(239,107,107,.18); } }
@media (prefers-reduced-motion: reduce) { .pr-tool.rec { animation: none; } }

/* Sales pipeline (owner 2026-10-22): deals by confidence level, momentum, and what needs a push */
.sl-range { margin-right: 4px; }
.sl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.sl-tile { display: grid; gap: 4px; justify-items: start; padding: 18px 20px; background: rgba(var(--tc), .08); border-color: rgba(var(--tc), .3); }
.sl-tile small { color: var(--text-2); font-size: 13.5px; margin-top: 6px; } .sl-tile b { font-size: 28px; line-height: 1.1; } .sl-tile span { color: var(--text-3); font-size: 13px; }
.sl-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.sl-col { display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 12px; border-radius: 18px; background: rgba(var(--tc), .06); border: 1px solid rgba(var(--tc), .24); min-height: 320px; transition: background .15s, border-color .15s; }
.sl-col.over { background: rgba(var(--tc), .16); border-color: rgba(var(--tc), .7); }
.sl-col header { display: grid; gap: 2px; padding: 2px 4px 6px; border-bottom: 2px solid rgba(var(--tc), .5); } .sl-col header div { display: flex; align-items: center; gap: 8px; } .sl-col header small { color: var(--text-3); font-size: 12.5px; }
.sl-pct { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: rgba(var(--tc), .2); color: rgb(var(--tc)); font-size: 12.5px; font-weight: 800; }
.sl-list { display: grid; gap: 8px; align-content: start; }
.sl-empty { margin: 6px 4px; color: var(--text-3); font-size: 13px; line-height: 1.45; }
.sl-deal { display: grid; gap: 8px; padding: 12px 12px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: grab; }
.sl-deal:hover { border-color: rgba(var(--tc), .55); } .sl-deal.dragging { opacity: .45; } .sl-deal.stuck { border-color: rgba(239,107,107,.45); }
.sl-open { display: grid; gap: 2px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; } .sl-open b { font-size: 14.5px; line-height: 1.3; } .sl-open small { color: var(--text-3); font-size: 12.5px; }
.sl-dm { display: flex; align-items: center; gap: 8px; } .sl-val { font-weight: 800; font-size: 15px; }
.sl-days { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 12px; } .sl-days svg { width: 12px; height: 12px; } .sl-days.bad { color: #EF6B6B; }
.sl-next { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); line-height: 1.4; } .sl-next svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: rgb(var(--tc)); } .sl-next.none { color: #E2AE4F; } .sl-next.none svg { color: #E2AE4F; }
.sl-arrows { display: flex; align-items: center; gap: 6px; } .sl-arrows .sp { flex: 1; }
.sl-mv { width: 30px; height: 26px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line-2); background: none; color: var(--text-2); cursor: pointer; } .sl-mv svg { width: 15px; height: 15px; }
.sl-mv.fwd { border-color: rgba(76,195,138,.5); background: rgba(76,195,138,.12); color: #4CC38A; } .sl-mv.fwd:hover { background: rgba(76,195,138,.26); } .sl-mv.back:hover { background: rgba(255,255,255,.06); color: var(--text); }
.sl-under { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; margin-top: 18px; align-items: start; }
.sl-closedwrap { display: grid; gap: 12px; } .sl-closed { min-height: 0; } .sl-closed .sl-deal { cursor: default; }
.sl-feed ul, .sl-push ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sl-move { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.03); }
.sl-move > svg { width: 16px; height: 16px; } .sl-move.up > svg { color: #4CC38A; } .sl-move.down > svg { color: #E58BB0; } .sl-move b { display: block; font-size: 13.5px; } .sl-move small { color: var(--text-3); font-size: 12.5px; }
.sl-pl { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(229,139,176,.25); background: rgba(229,139,176,.06); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.sl-pl:hover { background: rgba(229,139,176,.14); } .sl-pl small { grid-column: 1; color: var(--text-3); font-size: 12.5px; } .sl-pl svg { grid-row: 1 / span 2; grid-column: 2; width: 15px; height: 15px; color: var(--text-3); }
.sl-feed, .sl-push { padding: 16px 18px; }
.sl-drawer .drawer-b { display: grid; gap: 16px; }
.sl-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sl-f { display: grid; gap: 6px; } .sl-f > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.sl-f input, .sl-f textarea { width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; resize: vertical; color-scheme: dark; box-sizing: border-box; }
.sl-f input:focus, .sl-f textarea:focus { outline: none; border-color: rgba(var(--hl), .7); }
.sl-levels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sl-lv { display: grid; gap: 2px; padding: 10px; border-radius: 12px; border: 1px solid rgba(var(--tc), .3); background: rgba(var(--tc), .06); color: var(--text); text-align: left; font: inherit; cursor: pointer; } .sl-lv b { font-size: 13.5px; } .sl-lv small { color: var(--text-3); font-size: 12px; }
.sl-lv:hover { background: rgba(var(--tc), .14); } .sl-lv.on { background: rgba(var(--tc), .24); border-color: rgb(var(--tc)); box-shadow: 0 0 0 1px rgb(var(--tc)); } .sl-lv.on small { color: var(--text-2); }
.sl-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .sl-hist li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); }
.sl-hist li > svg { width: 15px; height: 15px; color: var(--text-3); } .sl-hist li.up > svg { color: #4CC38A; } .sl-hist li.down > svg { color: #E58BB0; } .sl-hist b { display: block; font-size: 13.5px; } .sl-hist small { color: var(--text-3); font-size: 12.5px; }
.sl-df { display: flex; gap: 10px; align-items: center; } .sl-df .sp { flex: 1; }
@media (max-width: 1100px) { .sl-under { grid-template-columns: 1fr 1fr; } .sl-closedwrap { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .sl-tiles { grid-template-columns: 1fr 1fr; } .sl-board { grid-template-columns: repeat(4, 78vw); scroll-snap-type: x mandatory; } .sl-col { scroll-snap-align: start; } .sl-under, .sl-closedwrap { grid-template-columns: 1fr; } .sl-levels { grid-template-columns: 1fr 1fr; } }
.sl-mv.fwd svg { transform: scaleX(-1); } .sl-pl svg { transform: rotate(-90deg); }

/* Logins vault (owner 2026-10-22): encrypted client logins, simple and good looking */
.vxt { --vc: #888; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--vc); color: #fff; font: 800 15px var(--font); letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.vxt.lt { color: #18181B; } .vxt.lg { width: 52px; height: 52px; border-radius: 15px; font-size: 19px; }
.vx-gate { max-width: 720px; margin: 0 auto; padding: 26px 28px; display: grid; gap: 18px; background: rgba(var(--tc), .06); border-color: rgba(var(--tc), .3); }
.vx-gh { display: flex; gap: 14px; align-items: flex-start; } .vx-gh h3 { margin: 0 0 4px; font-size: 20px; } .vx-gh p { margin: 0; color: var(--text-2); }
.vx-safe { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .vx-safe li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); color: var(--text-2); font-size: 14px; line-height: 1.5; } .vx-safe svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #4CC38A; }
.vx-note { display: flex; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(111,163,232,.1); color: var(--text-2); font-size: 13.5px; line-height: 1.5; } .vx-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #6FA3E8; }
.vx-form { display: grid; gap: 12px; } .vx-form .btn { justify-self: start; } .vx-unlock { grid-template-columns: 1fr auto; align-items: end; } .vx-unlock .btn { height: 44px; }
.vx-f { display: grid; gap: 6px; } .vx-f > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.vx-f input, .vx-f textarea { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; box-sizing: border-box; } .vx-f textarea { height: auto; padding: 10px 14px; resize: vertical; }
.vx-f input:focus, .vx-f textarea:focus { outline: none; border-color: rgba(var(--hl), .7); box-shadow: 0 0 0 3px rgba(var(--hl), .15); }
.vx-meter { display: grid; gap: 6px; } .vx-meter i { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; } .vx-meter i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #EF6B6B; transition: width .2s, background .2s; }
.vx-meter.s1 i::after { width: 25%; } .vx-meter.s2 i::after { width: 50%; background: #E2AE4F; } .vx-meter.s3 i::after { width: 75%; background: #4CC38A; } .vx-meter.s4 i::after { width: 100%; background: #4CC38A; } .vx-meter small { color: var(--text-3); font-size: 12.5px; }
.vx-forgot summary { cursor: pointer; color: var(--text-3); font-size: 13.5px; } .vx-forgot p { color: var(--text-2); font-size: 13.5px; }
.vx-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .vx-bar .sp { flex: 1; }
.vx-search { display: flex; align-items: center; gap: 8px; min-width: 260px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); } .vx-search svg { width: 16px; height: 16px; color: var(--text-3); } .vx-search input { flex: 1; border: 0; background: none; color: var(--text); font: inherit; outline: none; }
.vx-search.big { height: 50px; margin-bottom: 6px; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .vx-chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text-2); font: 600 13px var(--font); cursor: pointer; } .vx-chips button b { margin-left: 4px; color: var(--text-3); }
.vx-chips button[aria-pressed="true"] { background: rgba(var(--hl), .18); border-color: rgba(var(--hl), .5); color: var(--text); }
.vx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.vx-item { padding: 16px 18px; display: grid; gap: 10px; border-top: 3px solid var(--vc); }
.vx-ih { display: flex; align-items: center; gap: 12px; } .vx-ih > div { flex: 1; min-width: 0; } .vx-ih b { display: block; font-size: 15px; } .vx-ih small { display: block; color: var(--text-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-row { display: grid; grid-template-columns: 76px 1fr auto auto; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.03); } .vx-row > span { color: var(--text-3); font-size: 12.5px; }
.vx-row code { font: 500 13.5px ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-row code.dots { letter-spacing: .12em; color: var(--text-2); } .vx-row code.rev { color: var(--gold); }
.vx-notes { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; } .vx-by { color: var(--text-3); font-size: 12px; }
.vx-empty, .vx-addmore { margin-top: 14px; padding: 20px 22px; display: grid; gap: 12px; } .vx-empty h3 { margin: 0; } .vx-empty p { margin: 0; color: var(--text-2); }
.vx-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vx-qt, .vx-type { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: 600 13.5px var(--font); text-align: left; cursor: pointer; } .vx-qt .vxt, .vx-type .vxt { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.vx-qt:hover, .vx-type:hover { border-color: rgba(var(--hl), .6); background: rgba(var(--hl), .1); } .vx-qt.more svg { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: rgba(255,255,255,.06); box-sizing: border-box; }
.vx-none { margin: 20px 4px; }
.vx-drawer .drawer-b { display: grid; gap: 14px; } .vx-tg h4 { margin: 8px 0; font-size: 13.5px; color: var(--text-2); } .vx-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.vx-pick { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); } .vx-pick > div { flex: 1; } .vx-pick b { display: block; font-size: 17px; } .vx-pick small { color: var(--text-3); }
.vx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vx-pw { display: flex; gap: 6px; align-items: center; } .vx-pw input { flex: 1; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; } .vx-pw .btn { flex: none; height: 44px; }
.vx-df { display: flex; gap: 10px; align-items: center; } .vx-df .sp { flex: 1; }
.vx-list { padding: 6px; display: grid; } .vx-cl { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; color: var(--text); text-decoration: none; } .vx-cl:hover { background: rgba(255,255,255,.04); } .vx-cl + .vx-cl { border-top: 1px solid var(--line); }
.vx-cl small { display: block; color: var(--text-3); font-size: 12.5px; } .vx-cl > svg { width: 16px; height: 16px; color: var(--text-3); transform: rotate(-90deg); }
.vx-st { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.06); color: var(--text-3); } .vx-st svg { width: 12px; height: 12px; } .vx-st.good { background: rgba(76,195,138,.14); color: #4CC38A; } .vx-st.lock { background: rgba(191,194,199,.12); color: var(--silver); }
.vx-tiles { grid-template-columns: repeat(2, minmax(0, 260px)); }
@media (max-width: 700px) { .vx-two, .vx-unlock { grid-template-columns: 1fr; } .vx-row { grid-template-columns: 64px 1fr auto auto; } .vx-grid { grid-template-columns: 1fr; } .vx-search { min-width: 0; flex: 1 1 100%; } .vx-pw { flex-wrap: wrap; } }

/* Sales: close rate banner, Follow-ups, Scorecard */
.sl-close { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-bottom: 16px; padding: 14px 18px; background: rgba(var(--tc), .08); border-color: rgba(var(--tc), .35); } .sl-close p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }
.fu-wrap { display: grid; gap: 14px; max-width: 980px; }
.fu-sec { padding: 14px 16px; background: rgba(var(--tc), .05); border-color: rgba(var(--tc), .28); } .fu-sec ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; } .fu-sec > p { margin: 4px 0 0; }
.fu-h { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid rgba(var(--tc), .45); } .fu-h b { font-size: 15px; } .fu-h span { padding: 1px 9px; border-radius: 999px; background: rgba(var(--tc), .2); color: rgb(var(--tc)); font-size: 12.5px; font-weight: 800; }
.fu-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.fu-main { display: grid; gap: 2px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; min-width: 0; } .fu-main b { font-size: 14.5px; } .fu-main small { color: var(--text-3); font-size: 12.5px; }
.fu-st { padding: 3px 10px; border-radius: 999px; background: rgba(var(--tc), .16); color: rgb(var(--tc)); font-size: 12px; font-weight: 700; white-space: nowrap; }
.fu-due { color: var(--text-2); font-size: 13px; white-space: nowrap; } .fu-due.bad { color: #EF6B6B; font-weight: 700; } .fu-acts { display: flex; gap: 6px; }
.sc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sc-card { padding: 16px; display: grid; gap: 10px; align-content: start; background: rgba(var(--tc), .07); border-color: rgba(var(--tc), .28); } .sc-card.hit { background: rgba(var(--tc), .14); border-color: rgba(var(--tc), .6); }
.sc-h { display: flex; align-items: center; gap: 8px; } .sc-h b { font-size: 14px; } .sc-hit { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(var(--tc), .25); font-size: 12px; font-weight: 700; } .sc-hit svg { width: 12px; height: 12px; }
.sc-n { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .sc-n > b { font-size: 34px; line-height: 1; } .sc-n span { color: var(--text-3); font-size: 13px; display: inline-flex; align-items: baseline; gap: 4px; }
.sc-n input { width: 52px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: 600 13px var(--font); }
.sc-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; } .sc-bar i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--tc)); }
.sc-auto { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 12px; } .sc-auto svg { width: 12px; height: 12px; } .sc-step { display: flex; gap: 6px; align-items: center; }
.sc-trend { padding: 18px 20px; } .sc-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; align-items: end; height: 170px; margin: 12px 0 6px; }
.sc-col { height: 100%; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; } .sc-col i { align-self: end; width: 70%; max-width: 46px; border-radius: 8px 8px 3px 3px; background: rgba(76,195,138,.45); } .sc-col.now i { background: #4CC38A; }
.sc-col small { color: var(--text-3); font-size: 11.5px; } .sc-v { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
@media (max-width: 1200px) { .sc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .sc-grid { grid-template-columns: 1fr 1fr; } .fu-row { grid-template-columns: 1fr auto; } .fu-acts { grid-column: 1 / -1; } .sl-close { grid-template-columns: auto 1fr; } .sl-close .btn { grid-column: 1 / -1; } }

/* Pipeline board, HubSpot-style but neater (owner 2026-10-22): six columns with totals, compact cards, filters, list view */
.sl-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .sl-tools .sp { flex: 1; }
.sl-view button svg { width: 15px; height: 15px; } .sl-search { min-width: 220px; height: 40px; }
.sl-fsel { display: grid; gap: 4px; } .sl-fsel span { font-size: 12px; color: var(--text-3); font-weight: 600; }
.sl-fsel select { height: 40px; padding: 0 30px 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B4B2AC' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--text); font: 500 13.5px var(--font); appearance: none; color-scheme: dark; cursor: pointer; }
.sl-clear { align-self: center; color: var(--gold); font-size: 13.5px; }
.sl-board { grid-template-columns: repeat(6, minmax(232px, 1fr)); gap: 10px; }
.sl-col { grid-template-rows: auto 1fr auto; gap: 8px; padding: 0; min-height: 420px; overflow: hidden; }
.sl-col header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; border-bottom: 3px solid rgb(var(--tc)); background: rgba(var(--tc), .1); } .sl-col header b { font-size: 13.5px; } .sl-col header .sl-pct { margin-left: auto; }
.sl-cnt { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--text-2); font-size: 12px; font-weight: 700; text-align: center; }
.sl-col .sl-list { padding: 0 8px; max-height: 62vh; overflow-y: auto; }
.sl-col footer { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(var(--tc), .25); background: rgba(var(--tc), .06); font-size: 12.5px; color: var(--text-3); } .sl-col footer b { color: var(--text); font-weight: 700; }
.sl-col.closed { opacity: .92; }
.sl-deal { gap: 8px; padding: 11px 12px 9px; border-radius: 12px; }
.sl-kv { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .sl-kv dt { font-size: 11.5px; color: var(--text-3); } .sl-kv dd { margin: 1px 0 0; font-size: 13.5px; font-weight: 700; } .sl-kv dd.bad { color: #EF6B6B; }
.sl-foot { display: flex; align-items: center; gap: 6px; min-height: 26px; } .sl-foot .sp { flex: 1; } .sl-foot .sl-days { margin-left: 0; }
.sl-own { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(var(--tc, 212,184,134), .25); color: var(--text); font-size: 10.5px; font-weight: 800; } .sl-own.sm { width: 22px; height: 22px; margin-right: 6px; vertical-align: middle; }
.sl-hs { padding: 2px 7px; border-radius: 6px; background: rgba(255,122,89,.16); color: #FF9A80; font-size: 11px; font-weight: 700; }
.sl-mv { width: 28px; height: 24px; opacity: .0; transition: opacity .15s; } .sl-deal:hover .sl-mv, .sl-deal:focus-within .sl-mv { opacity: 1; } @media (hover: none) { .sl-mv { opacity: 1; } }
.sl-under { grid-template-columns: 1fr 1fr; }
.sl-table { padding: 0; overflow-x: auto; } .sl-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sl-table th { text-align: left; padding: 12px 14px; color: var(--text-3); font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap; } .sl-table th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .sl-table th button.on { color: var(--gold); } .sl-table th button.on::after { content: ' \2193'; }
.sl-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } .sl-table tbody tr:hover td { background: rgba(255,255,255,.025); } .sl-table td.num { font-weight: 700; text-align: right; } .sl-table td.bad { color: #EF6B6B; font-weight: 700; }
.sl-table tfoot td { border-bottom: 0; color: var(--text-2); }
.sl-tn { display: grid; gap: 1px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; } .sl-tn small { color: var(--text-3); font-size: 12.5px; }
@media (max-width: 760px) { .sl-board { grid-template-columns: repeat(6, 80vw); } .sl-under { grid-template-columns: 1fr; } .sl-search { flex: 1 1 100%; } }
.sl-board { grid-template-columns: repeat(6, minmax(196px, 1fr)); } .sl-col.closed header .sl-cnt { margin-left: auto; } .sl-view button { display: inline-flex; align-items: center; gap: 6px; }

/* Quotes and the pipeline in the Forecast */
.sl-q { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(160,138,242,.08); border: 1px solid rgba(160,138,242,.3); } .sl-q small { display: block; color: var(--text-3); font-size: 12.5px; }
.sl-qbtn { justify-self: start; }
.qe .drawer-b { grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); }
.qe .drawer-b > .qe-left { grid-column: 1; display: grid; gap: 14px; align-content: start; } .qe .drawer-b > .qe-right { grid-column: 2; grid-row: 1; position: sticky; top: 0; align-self: start; }
.qe-sec h4 { margin: 0 0 8px; font-size: 13px; color: var(--text-2); } .qe-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qe-picks { display: flex; flex-wrap: wrap; gap: 6px; } .qe-pick { display: inline-grid; grid-template-columns: auto auto; gap: 0 6px; align-items: center; padding: 7px 11px; border-radius: 12px; border: 1px solid rgba(160,138,242,.35); background: rgba(160,138,242,.08); color: var(--text); font: 600 13px var(--font); cursor: pointer; text-align: left; }
.qe-pick svg { width: 14px; height: 14px; grid-row: 1 / span 2; color: #A08AF2; } .qe-pick small { grid-column: 2; color: var(--text-3); font-weight: 500; font-size: 11.5px; } .qe-pick:hover { background: rgba(160,138,242,.18); } .qe-pick.quiet { border-color: var(--line-2); background: none; }
.qe-head, .qe-line { display: grid; grid-template-columns: 1fr 64px 110px 110px 30px; gap: 6px; align-items: center; } .qe-head { font-size: 12px; color: var(--text-3); padding: 0 2px 4px; } .qe-line + .qe-line { margin-top: 6px; }
.qe-line input, .qe-line select { width: 100%; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; box-sizing: border-box; color-scheme: dark; }
.qe-money { position: relative; } .qe-money i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--text-3); } .qe-money input { padding-left: 20px; }
.qe-total { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; border-radius: 14px; background: rgba(76,195,138,.08); border: 1px solid rgba(76,195,138,.3); } .qe-total small { display: block; color: var(--text-3); font-size: 12px; } .qe-total b { font-size: 20px; }
.qe-total em { display: block; font-style: normal; color: var(--text-3); font-size: 12px; margin-top: 2px; } .qe-total em input { width: 44px; padding: 1px 4px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; }
.qe-f { display: flex; gap: 10px; align-items: center; } .qe-f .sp { flex: 1; }
.qe-pv { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); transform-origin: top left; }
.qp { background: #FBF8F2; color: #26252A; padding: 34px 38px; font-size: 14px; line-height: 1.5; }
.qp-h { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding-bottom: 18px; border-bottom: 2px solid #E4DCCB; } .qp-h img, .qp-h .av, .qp-h span { max-width: 64px; max-height: 64px; }
.qp-h h1 { margin: 0; font-size: 28px; letter-spacing: -.02em; color: #18181B; } .qp-h p { margin: 0; color: #77736A; } .qp-h dl { margin: 0; display: grid; gap: 4px; text-align: right; } .qp-h dt { display: inline; color: #77736A; margin-right: 6px; } .qp-h dd { display: inline; margin: 0; font-weight: 700; } .qp-h dl div { white-space: nowrap; }
.qp-for { margin: 16px 0; font-size: 15px; } .qp-t { width: 100%; border-collapse: collapse; } .qp-t th { text-align: left; font-size: 12px; color: #77736A; font-weight: 600; padding: 8px 0; border-bottom: 1px solid #E4DCCB; }
.qp-t td { padding: 12px 0; border-bottom: 1px solid #EEE7D9; vertical-align: top; } .qp-t td small { display: block; color: #77736A; font-size: 12.5px; } .qp-t .num { text-align: right; padding-left: 12px; white-space: nowrap; }
.qp-sum { display: grid; justify-content: end; gap: 6px; margin: 16px 0; } .qp-sum div { display: flex; gap: 30px; justify-content: space-between; min-width: 240px; } .qp-sum span { color: #77736A; } .qp-sum .big b { font-size: 20px; color: #18181B; }
.qp-g { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #EFF7F1; border: 1px solid #CDE6D4; } .qp-g svg { width: 20px; height: 20px; color: #2E8B57; flex: none; } .qp-g p { margin: 2px 0 0; }
.qp-n { margin: 16px 0 0; color: #4A4740; white-space: pre-line; } .qp-f { margin-top: 24px; padding-top: 12px; border-top: 1px solid #E4DCCB; color: #77736A; font-size: 12.5px; }
.qp-wrap { max-width: 860px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
@media print { .qp-wrap { box-shadow: none; max-width: none; border-radius: 0; } .lab-nav, .no-print { display: none !important; } }
.pf { padding: 16px 18px; margin-bottom: 16px; background: rgba(var(--tc), .06); border-color: rgba(var(--tc), .3); } .pf .pb-h .btn { margin-left: auto; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 6px; } .pf-m { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); } .pf-m small { color: var(--text-3); font-size: 12.5px; } .pf-m b { font-size: 22px; } .pf-m span { color: var(--text-3); font-size: 12.5px; }
.pf-bar { position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 4px; } .pf-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; } .pf-bar .tot { background: rgba(76,195,138,.25); } .pf-bar .w { background: #4CC38A; }
@media (max-width: 900px) { .qe .drawer-b { grid-template-columns: 1fr; } .qe .drawer-b > .qe-right { grid-column: 1; grid-row: auto; position: static; } .pf-grid { grid-template-columns: 1fr; } .qe-head { display: none; } .qe-line { grid-template-columns: 1fr 60px; } .qe-line .qe-money, .qe-line select { grid-column: span 1; } }
.pf-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; } .pf-bar .tot { background: rgba(76,195,138,.25); } .pf-bar .w { background: #4CC38A; } .pf .pb-h .btn svg { transform: rotate(-90deg); }
.qe .drawer-f { max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 14px 32px 20px; }

/* Quick Audit (owner spec C) */
.au-ring .rt { fill: none; stroke: rgba(var(--tc), .18); stroke-width: 9; } .au-ring .rv { fill: none; stroke: rgb(var(--tc)); stroke-width: 9; stroke-linecap: round; } .au-ring text { fill: var(--text); font: 800 22px var(--font); }
.au-bar { display: block; height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; } .au-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold); } .au-bar.wide { margin-bottom: 18px; }
.au-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.au-rail { display: grid; gap: 6px; position: sticky; top: 16px; }
.au-rs { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.au-rs b { display: block; font-size: 14px; } .au-rs small { color: var(--text-3); font-size: 12px; } .au-rs em { font-style: normal; font-weight: 800; color: rgb(var(--tc)); }
.au-rs:hover { border-color: rgba(var(--tc), .5); } .au-rs.on { background: rgba(var(--tc), .14); border-color: rgba(var(--tc), .7); }
.au-sec { padding: 20px 22px; display: grid; gap: 14px; background: rgba(var(--tc), .05); border-color: rgba(var(--tc), .3); }
.au-sh { display: flex; align-items: center; gap: 12px; } .au-sh h2 { margin: 0; font-size: 20px; } .au-sh .sp { flex: 1; }
.au-q { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.au-ql { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .au-ql b { font-size: 15px; }
.au-from { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(76,195,138,.14); color: #4CC38A; font-size: 12px; font-weight: 700; } .au-from svg { width: 12px; height: 12px; }
.au-numrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .au-to { color: var(--text-3); }
.au-num { position: relative; display: inline-flex; align-items: center; } .au-num input { width: 160px; height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: 600 15px var(--font); }
.au-num.cur input { padding-left: 24px; } .au-num i { position: absolute; left: 11px; font-style: normal; color: var(--text-3); } .au-num em { margin-left: 6px; font-style: normal; color: var(--text-3); }
.au-num input:focus, .au-q textarea:focus { outline: none; border-color: rgba(var(--tc), .8); box-shadow: 0 0 0 3px rgba(var(--tc), .18); }
.au-seg { margin-left: auto; } .au-dk { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 13.5px; } .au-dk svg { width: 15px; height: 15px; }
.au-q textarea { width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; resize: vertical; box-sizing: border-box; }
.au-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; } .au-opt { padding: 8px 13px; border-radius: 12px; border: 1px solid rgba(var(--tc), .35); background: rgba(var(--tc), .06); color: var(--text); font: 600 13.5px var(--font); cursor: pointer; }
.au-opt:hover { background: rgba(var(--tc), .14); } .au-opt.on { background: rgba(var(--tc), .26); border-color: rgb(var(--tc)); box-shadow: 0 0 0 1px rgb(var(--tc)); } .au-opt.dk { border-color: var(--line-2); background: none; color: var(--text-2); } .au-opt.dk.on { background: rgba(255,255,255,.08); box-shadow: none; color: var(--text); }
.au-nav { display: flex; gap: 10px; align-items: center; } .au-nav .sp { flex: 1; }
.au-name { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.au-others { margin-top: 18px; padding: 16px 18px; } .au-o { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none; } .au-o:hover { background: rgba(255,255,255,.04); } .au-o small { color: var(--text-3); font-size: 12.5px; } .au-o svg { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 15px; height: 15px; color: var(--text-3); transform: rotate(-90deg); }
.au-res { display: grid; gap: 16px; }
.au-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 22px 24px; background: rgba(212,184,134,.07); border-color: rgba(212,184,134,.3); --tc: 212, 184, 134; }
.au-hv { display: flex; align-items: center; gap: 18px; } .au-hv small, .au-val small { color: var(--text-3); font-size: 12.5px; } .au-hv b { display: block; font-size: 24px; } .au-hv p, .au-val p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }
.au-val b { display: block; font-size: 38px; color: var(--gold); line-height: 1.1; }
.au-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } .au-tile { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; text-align: center; background: rgba(var(--tc), .07); border-color: rgba(var(--tc), .28); } .au-tile b { font-size: 13px; }
.au-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.au-leaks, .au-qw, .au-icp { padding: 18px 20px; background: rgba(var(--tc), .05); border-color: rgba(var(--tc), .28); }
.au-leak { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); } .au-leak:first-of-type { border-top: 0; }
.au-ln { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--tc), .2); color: rgb(var(--tc)); font-weight: 800; } .au-leak p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.au-leak strong { font-size: 20px; text-align: right; white-space: nowrap; } .au-leak strong small { display: block; font-size: 12px; color: var(--text-3); font-weight: 500; }
.au-wins { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 10px; } .au-wins li b { display: block; } .au-wins li span { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.au-icp dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; margin: 10px 0 0; } .au-icp dt { color: var(--text-3); } .au-icp dd { margin: 0; } .au-icp .pb-h .btn { margin-left: auto; }
.au-next { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: rgba(var(--tc), .07); border-color: rgba(var(--tc), .3); } .au-next div { flex: 1; } .au-next p { margin: 2px 0 0; color: var(--text-2); }
.au-call .drawer-b { display: grid; gap: 16px; } .au-say { display: flex; gap: 12px; padding: 16px 18px; border-radius: 16px; background: rgba(var(--tc), .12); border: 1px solid rgba(var(--tc), .4); } .au-say svg { width: 20px; height: 20px; color: rgb(var(--tc)); flex: none; margin-top: 2px; } .au-say small { color: var(--text-3); font-size: 12px; } .au-say p { margin: 2px 0 0; font-size: 20px; line-height: 1.4; font-weight: 600; }
.au-call .au-q { padding: 18px 20px; } .au-call .au-ql b { font-size: 17px; } .au-cf { display: flex; gap: 10px; align-items: center; } .au-cf .sp { flex: 1; }
@media print { .au-rail, .au-vseg, .au-others, .au-name .btn { display: none !important; } .au-res .card { break-inside: avoid; } }
@media (max-width: 1100px) { .au-tiles { grid-template-columns: repeat(4, 1fr); } .au-two { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .au-wrap { grid-template-columns: 1fr; } .au-rail { position: static; grid-template-columns: 1fr 1fr; } .au-hero { grid-template-columns: 1fr; } .au-name { grid-template-columns: 1fr; } .au-seg { margin-left: 0; } .au-tiles { grid-template-columns: repeat(2, 1fr); } }

/* Walk Me Through It (owner spec D) */
.wm-link { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; color: var(--text-2); font-weight: 600; font-size: 13.5px; text-decoration: none; } .wm-link svg { width: 15px; height: 15px; } .wm-link:hover { color: var(--text); }
.wm-choose { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wm-choose a.og-card { text-decoration: none; color: var(--text); }
.wm-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); gap: 16px; align-items: start; margin-bottom: 18px; }
.wm-chat { background: rgba(212,184,134,.05); border-color: rgba(212,184,134,.25); }
.wm-panel { padding: 18px 20px; display: grid; gap: 12px; position: sticky; top: 16px; background: rgba(212,184,134,.05); border-color: rgba(212,184,134,.28); --tc: 212, 184, 134; }
.wm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wm-n { padding: 12px 14px; border-radius: 12px; background: rgba(var(--tc), .09); border: 1px solid rgba(var(--tc), .25); display: grid; gap: 2px; }
.wm-n small { color: var(--text-3); font-size: 12px; } .wm-n b { font-size: 20px; } .wm-n .vt-s { font-size: 12px; font-weight: 700; } .vt-s.good { color: #4CC38A; } .vt-s.fair { color: #E2AE4F; } .vt-s.bad { color: #EF6B6B; } .vt-s.empty { color: var(--text-3); }
.wm-rows { display: grid; gap: 4px; } .wm-r { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 13.5px; } .wm-r span { color: var(--text-2); } .wm-r.empty b { color: var(--text-3); font-weight: 500; }
.wm-r em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .wm-r em.you { background: rgba(111,163,232,.16); color: #8FB8F0; } .wm-r em.qm { background: rgba(76,195,138,.14); color: #4CC38A; }
.wm-save { justify-self: stretch; justify-content: center; height: 44px; }
@media (max-width: 1000px) { .wm-wrap, .wm-choose { grid-template-columns: 1fr; } .wm-panel { position: static; } }
.og-chip svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
/* Composer: sections size to their content; overflow hidden on a grid item let the column squeeze them (owner bug 2026-10-22) */
.cmp-left { grid-auto-rows: max-content; } .cmp-left > * { min-height: max-content; }

/* Forecast lever: one clean surface between minus and plus (owner bug 2026-10-22) */
.stepper2 .st-box, .stepper2 .st-box input { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none; }
.stepper2 .st-box { display: flex; align-items: center; justify-content: center; padding: 0 8px; } .stepper2 .st-box input { width: 6ch; padding: 0; }
.stepper2:focus-within { border-color: rgba(var(--tc), .8); box-shadow: 0 0 0 3px rgba(var(--tc), .18); }

/* Ad preview: phone-feed width, square image in the brand colors with the headline set in it (owner: bad) */
.ad-right .ad-pv { width: 100%; max-width: 420px; justify-self: center; border-radius: 18px; box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.ad-right .ad-chk { width: 100%; max-width: 420px; justify-self: center; box-sizing: border-box; }
.ad-pv-img { aspect-ratio: 1 / 1; place-items: center; padding: 28px; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, rgba(212,184,134,.55), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(67,195,183,.45), transparent 60%), linear-gradient(160deg, #2B3440, #151A21); }
.ad-pv-img::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); }
.ad-banner { position: relative; left: auto; right: auto; top: auto; max-width: 88%; padding: 0; background: none; color: #FFFFFF; font: 400 clamp(26px, 3.2vw, 38px)/1.02 'Anton', 'Inter', sans-serif; letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.ad-pv-img small { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.4); color: rgba(255,255,255,.85); font-size: 11.5px; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.ad-pv-btn { background: #D8DADF; }
/* Top tabs: more air between them (owner 2026-10-22: felt suffocating) */
.topnav .btabs { gap: 14px; margin-left: 18px; } .topnav .btabs a { padding: 0 18px; }
.lab-nav { gap: 6px; } .lab-nav a { padding-left: 20px; padding-right: 20px; }
.stepper2 .st-box input, .stepper2 .st-box input:only-child, .stepper2 .st-box i + input:last-child { text-align: center !important; }
.pf-bar { height: 8px; } .pf-m .pf-bar span { display: block; height: 8px; top: 0; bottom: auto; font-size: 0; line-height: 0; padding: 0; margin: 0; }
/* Email chat fits the window; preview drafts while you answer */
.sq-chat { min-height: 0; height: clamp(420px, calc(100vh - 230px), 760px); position: sticky; top: 16px; }
.sq-mail.preview { opacity: .9; } .sq-mail.preview .sq-body { cursor: default; } .sq-mail.preview .sq-bar b::after { content: " \00B7 preview"; color: var(--text-3); font-weight: 500; }
.sq-pvnote { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(212,184,134,.1); border: 1px solid rgba(212,184,134,.35); color: var(--text-2); font-size: 13.5px; line-height: 1.5; } .sq-pvnote svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 2px; } .sq-pvnote b { color: var(--text); }

/* Quick Audit, polished (owner 2026-10-22) */
.qa-top { display: grid; grid-template-columns: minmax(220px, auto) 1fr auto auto; gap: 22px; align-items: center; margin-bottom: 16px; padding: 18px 22px; background: linear-gradient(120deg, rgba(212,184,134,.12), rgba(212,184,134,.03) 60%); border-color: rgba(212,184,134,.3); --tc: 212, 184, 134; }
.qa-who { display: flex; align-items: center; gap: 12px; min-width: 0; } .qa-who b { display: block; font-size: 16px; } .qa-who small { color: var(--text-3); font-size: 12.5px; }
.qa-av { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: rgba(212,184,134,.22); color: var(--gold); font: 800 20px var(--font); } .qa-av.self { background: none; }
.qa-wf { display: grid; gap: 6px; min-width: 260px; } .qa-wf input { width: 100%; padding: 6px 10px; border-radius: 9px; border: 1px solid transparent; background: rgba(255,255,255,.04); color: var(--text); font: inherit; box-sizing: border-box; }
.qa-wf .qa-name { font: 700 17px var(--font); } .qa-wf input:hover { border-color: var(--line-2); } .qa-wf input:focus { outline: none; border-color: rgba(212,184,134,.7); background: var(--card-2); }
.qa-prog { display: grid; gap: 10px; min-width: 0; } .qa-pl { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .qa-pl small { color: var(--text-3); font-size: 12.5px; }
.qa-segs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .qa-segs span { height: 8px; border-radius: 99px; background: rgba(var(--tc), .16); overflow: hidden; } .qa-segs i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--tc)); transition: width .25s; }
.au-q { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px 18px; } .au-q.done { border-color: rgba(var(--tc), .35); }
.au-qn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--tc), .16); color: rgb(var(--tc)); font-weight: 800; font-size: 13.5px; } .au-q.done .au-qn { background: rgb(var(--tc)); color: #17171A; } .au-qn svg { width: 15px; height: 15px; }
.au-qb { display: grid; gap: 10px; min-width: 0; } .au-q .au-ql b { font-size: 15.5px; }
.au-numrow { gap: 10px; } .au-seg { margin-left: 0; } .au-seg button { font-size: 12.5px; }
.au-opt { padding: 11px 14px; border-radius: 12px; text-align: left; }
.au-send { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start; padding: 18px 20px; background: rgba(var(--tc), .06); border-color: rgba(var(--tc), .3); } .au-send p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }
.au-sendf { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; } .au-sendf input { flex: 1 1 240px; height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; } .au-sendf input:focus { outline: none; border-color: rgba(var(--tc), .8); }
@media (max-width: 1100px) { .qa-top { grid-template-columns: 1fr auto; } .qa-who { grid-column: 1 / -1; } .qa-prog { grid-column: 1 / -1; } }
@media print { .au-send { display: none !important; } }
.au-hint { margin: -4px 0 2px; color: var(--text-3); font-size: 13px; line-height: 1.45; }
.au-num em { white-space: nowrap; }
.au-chips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; order: 3; } .au-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(var(--tc), .3); background: rgba(var(--tc), .06); color: var(--text-2); font: 600 12.5px var(--font); cursor: pointer; } .au-chip:hover { background: rgba(var(--tc), .16); color: var(--text); } .au-chip.on { background: rgba(var(--tc), .28); border-color: rgb(var(--tc)); color: var(--text); }
.au-numrow { flex-wrap: wrap; } .au-numrow .au-seg { order: 2; }
.au-stars { display: flex; flex-wrap: wrap; gap: 6px; } .au-star { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(226,174,79,.35); background: rgba(226,174,79,.07); color: var(--text); font: 700 13.5px var(--font); cursor: pointer; } .au-star svg { width: 14px; height: 14px; color: #E2AE4F; } .au-star:hover { background: rgba(226,174,79,.16); } .au-star.on { background: rgba(226,174,79,.3); border-color: #E2AE4F; box-shadow: 0 0 0 1px #E2AE4F; }

/* Quick Audit, cleaner */
.au-q { padding: 14px 18px; gap: 12px; } .au-qb { gap: 10px; } .au-numrow { gap: 8px; align-items: center; }
.au-num input { width: 220px; }
.au-chips { order: 0; flex-basis: auto; } .au-chip.dk { border-color: var(--line-2); background: none; color: var(--text-3); } .au-chip.dk.on { background: rgba(255,255,255,.08); color: var(--text); }
.au-tip { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--text-3); cursor: help; } .au-tip > svg { width: 15px; height: 15px; } .au-tip:hover, .au-tip:focus { color: var(--text); outline: none; }
.au-tipb { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 300px; padding: 9px 12px; border-radius: 10px; background: #0F0F11; border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; font-weight: 500; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; } .au-tip:hover .au-tipb, .au-tip:focus .au-tipb { opacity: 1; }
.au-ok { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(var(--tc)); color: #17171A; } .au-ok svg { width: 14px; height: 14px; }
.au-rs { padding: 12px 14px; }
.qa-bar { display: block; height: 10px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; } .qa-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #C9A86E, #E6D2A8); transition: width .3s; }
.qa-score { display: flex; align-items: center; gap: 12px; padding-left: 18px; border-left: 1px solid rgba(212,184,134,.25); } .qa-score b { display: block; font-size: 14px; } .qa-score small { color: var(--text-3); font-size: 12.5px; }

/* Quick Audit as a guided workbook (owner 2026-10-23): one question on the left, the picture building on the right */
.qx-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.qx-left { display: grid; gap: 14px; min-width: 0; }
.qx-steps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.qx-step { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text-3); font: 600 11.5px var(--font); text-align: center; cursor: pointer; overflow: hidden; }
.qx-step .ic { width: 30px; height: 30px; border-radius: 10px; opacity: .55; } .qx-step .ic svg { width: 15px; height: 15px; }
.qx-step span { line-height: 1.2; } .qx-step > i { position: absolute; left: 0; bottom: 0; height: 3px; background: rgb(var(--tc)); }
.qx-step:hover { color: var(--text); border-color: rgba(var(--tc), .45); } .qx-step:hover .ic, .qx-step.done .ic, .qx-step.on .ic { opacity: 1; }
.qx-step.on { color: var(--text); background: rgba(var(--tc), .12); border-color: rgba(var(--tc), .7); } .qx-step.done { color: var(--text-2); }
.qx { padding: 24px 28px 18px; display: grid; gap: 18px; background: linear-gradient(160deg, rgba(var(--tc), .1), rgba(var(--tc), .02) 45%), var(--card); border-color: rgba(var(--tc), .35); min-height: 430px; align-content: start; }
.qx-sec { display: flex; align-items: center; gap: 12px; } .qx-sec b { display: block; font-size: 14px; } .qx-sec small { color: var(--text-3); font-size: 12.5px; }
.qx-pos { margin-left: auto; padding: 4px 11px; border-radius: 999px; background: rgba(var(--tc), .16); color: rgb(var(--tc)); font-weight: 800; font-size: 12.5px; }
.qx-q h2 { margin: 6px 0 0; font-size: 28px; line-height: 1.2; letter-spacing: -.015em; } .qx-q p { margin: 8px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.5; max-width: 62ch; }
.qx-a { display: grid; gap: 12px; }
.qx-box { display: flex; align-items: center; gap: 8px; width: min(100%, 460px); height: 64px; padding: 0 18px; border-radius: 16px; border: 1.5px solid rgba(var(--tc), .35); background: rgba(0,0,0,.22); box-sizing: border-box; cursor: text; }
.qx-box:focus-within { border-color: rgb(var(--tc)); box-shadow: 0 0 0 4px rgba(var(--tc), .16); }
.qx-box i { font-style: normal; font-size: 24px; color: var(--text-3); } .qx-box input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 700 26px var(--font); outline: none; } .qx-box em { font-style: normal; color: var(--text-3); font-size: 15px; white-space: nowrap; }
.qx-chips { display: flex; flex-wrap: wrap; gap: 8px; } .qx-chip { padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(var(--tc), .32); background: rgba(var(--tc), .07); color: var(--text-2); font: 600 13.5px var(--font); cursor: pointer; }
.qx-chip:hover { background: rgba(var(--tc), .16); color: var(--text); } .qx-chip.on { background: rgb(var(--tc)); border-color: rgb(var(--tc)); color: #17171A; }
.qx-text { width: 100%; height: 60px; padding: 0 18px; border-radius: 16px; border: 1.5px solid rgba(var(--tc), .35); background: rgba(0,0,0,.22); color: var(--text); font: 600 19px var(--font); box-sizing: border-box; } .qx-text:focus { outline: none; border-color: rgb(var(--tc)); box-shadow: 0 0 0 4px rgba(var(--tc), .16); }
.qx-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .qx-opts.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qx-opts.n6, .qx-opts.multi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qx-opt { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--line-2); background: rgba(255,255,255,.025); color: var(--text); font: 600 15px var(--font); text-align: left; cursor: pointer; transition: border-color .12s, background .12s, transform .12s; }
.qx-opt:hover { border-color: rgba(var(--tc), .6); background: rgba(var(--tc), .08); } .qx-opt:active { transform: scale(.99); }
.qx-opt.on { border-color: rgb(var(--tc)); background: rgba(var(--tc), .18); box-shadow: 0 0 0 1px rgb(var(--tc)) inset; }
.qx-radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--line-2); box-sizing: border-box; } .qx-opt.on .qx-radio { border: 6px solid rgb(var(--tc)); background: #17171A; }
.qx-check { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 2px solid var(--line-2); box-sizing: border-box; } .qx-check svg { width: 13px; height: 13px; opacity: 0; } .qx-opt.on .qx-check { background: rgb(var(--tc)); border-color: rgb(var(--tc)); color: #17171A; } .qx-opt.on .qx-check svg { opacity: 1; }
.qx-note { margin: -2px 0 0; color: var(--text-3); font-size: 12.5px; }
.qx-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; } .qx-scale button { height: 54px; border-radius: 12px; border: 1.5px solid var(--line-2); background: rgba(255,255,255,.025); color: var(--text-2); font: 800 17px var(--font); cursor: pointer; }
.qx-scale button:hover { border-color: rgba(var(--tc), .6); color: var(--text); } .qx-scale button.fill { background: rgba(var(--tc), .14); border-color: rgba(var(--tc), .35); color: var(--text); } .qx-scale button.on { background: rgb(var(--tc)); border-color: rgb(var(--tc)); color: #17171A; }
.qx-ends { display: flex; justify-content: space-between; color: var(--text-3); font-size: 12.5px; margin-top: -4px; }
.qx-stars { display: flex; flex-wrap: wrap; gap: 8px; } .qx-star { display: inline-flex; align-items: center; gap: 7px; height: 50px; padding: 0 16px; border-radius: 14px; border: 1.5px solid rgba(226,174,79,.35); background: rgba(226,174,79,.06); color: var(--text); font: 700 15px var(--font); cursor: pointer; }
.qx-star svg { width: 18px; height: 18px; color: #E2AE4F; fill: #E2AE4F; } .qx-star:hover { background: rgba(226,174,79,.16); } .qx-star.on { background: #E2AE4F; border-color: #E2AE4F; color: #17171A; } .qx-star.on svg { color: #17171A; fill: #17171A; }
.qx-dk { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-3); font-size: 13px; } .qx-dk svg { width: 14px; height: 14px; }
.qx-f { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(var(--tc), .18); } .qx-f .sp { flex: 1; } .qx-f .btn.on { color: var(--text); background: rgba(255,255,255,.07); }
.qx-keys { margin: -8px 0 0; text-align: right; color: var(--text-3); font-size: 11.5px; }
.qx-pic { position: sticky; top: 16px; display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, #23232A, #1C1C21); border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.qx-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px 4px; } .qx-ph b { font-size: 15px; } .qx-ph small { color: var(--text-3); font-size: 12px; }
.qx-blk { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); } .qx-blk h4 { margin: 0 0 10px; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.qx-icp { display: flex; align-items: center; gap: 12px; } .qx-icp b { display: block; font-size: 15px; } .qx-icp small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; } .qx-icp .btn { margin-left: auto; }
.qx-av { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #F0A060, #D9774A); color: #1B1310; font: 800 19px var(--font); }
.qx-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 12px 0 0; font-size: 13.5px; } .qx-dl dt { color: var(--text-3); } .qx-dl dd { margin: 0; color: var(--text); }
.qx-vits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qx-v { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); display: grid; gap: 1px; } .qx-v small { color: var(--text-3); font-size: 11.5px; } .qx-v b { font-size: 19px; } .qx-v span { color: var(--text-3); font-size: 11.5px; font-weight: 700; }
.qx-v.good { border-color: rgba(76,195,138,.4); } .qx-v.good span { color: #4CC38A; } .qx-v.fair { border-color: rgba(226,174,79,.4); } .qx-v.fair span { color: #E2AE4F; } .qx-v.bad { border-color: rgba(239,107,107,.45); } .qx-v.bad span { color: #EF6B6B; }
.qx-veq { display: flex; align-items: center; gap: 14px; } .qx-frac { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto 2px auto; gap: 6px 8px; align-items: center; justify-items: center; }
.qx-frac span { display: grid; justify-items: center; } .qx-frac span b { font-size: 18px; } .qx-frac span small { color: var(--text-3); font-size: 10.5px; } .qx-frac em { font-style: normal; color: var(--text-3); } .qx-frac i { grid-column: 1 / -1; width: 100%; height: 2px; background: rgba(229,139,176,.6); border-radius: 2px; }
.qx-vs { margin-left: auto; display: grid; justify-items: end; } .qx-vs b { font-size: 26px; color: #E58BB0; } .qx-vs span { color: var(--text-3); font-size: 12px; font-weight: 700; }
.qx-bars { display: grid; gap: 7px; } .qx-bar { display: grid; grid-template-columns: 118px 1fr 28px; gap: 10px; align-items: center; font-size: 12.5px; } .qx-bar span { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qx-bar i { height: 7px; border-radius: 99px; background: rgba(var(--tc), .14); overflow: hidden; } .qx-bar i b { display: block; height: 100%; border-radius: inherit; background: rgb(var(--tc)); transition: width .3s; } .qx-bar em { font-style: normal; font-weight: 800; text-align: right; color: rgb(var(--tc)); } .qx-bar.off span { color: var(--text-3); }
.qx-bars.big .qx-bar { grid-template-columns: 170px 1fr 96px; font-size: 14px; } .qx-bars.big .qx-bar i { height: 10px; } .qx-bars.big .qx-bar.off em { color: var(--text-3); font-weight: 500; font-size: 12.5px; }
.qx-leak { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13.5px; } .qx-leak + .qx-leak { border-top: 1px solid var(--line); } .qx-leak b { color: #EF8F8F; white-space: nowrap; } .qx-leak small { color: var(--text-3); font-weight: 500; }
.qr { display: grid; gap: 16px; }
.qr-snapbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(111,163,232,.1); border: 1px solid rgba(111,163,232,.35); } .qr-snapbar span { flex: 1; } .qr-snapbar svg { width: 16px; height: 16px; color: #6FA3E8; }
.qr-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 26px 28px; background: radial-gradient(120% 140% at 0% 0%, rgba(212,184,134,.16), transparent 60%), var(--card); border-color: rgba(212,184,134,.35); }
.qr-score { display: flex; align-items: center; gap: 20px; } .qr-score small, .qr-val small { color: var(--text-3); font-size: 12.5px; } .qr-score b { display: block; font-size: 28px; letter-spacing: -.01em; } .qr-score p, .qr-val p { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; }
.qr-val { padding-left: 28px; border-left: 1px solid rgba(212,184,134,.25); } .qr-val b { display: block; font-size: 44px; line-height: 1.05; color: var(--gold); letter-spacing: -.02em; }
.qr-acts { display: grid; gap: 8px; justify-items: stretch; }
.qr-vits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qr-v { padding: 16px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 2px; } .qr-v small { color: var(--text-3); font-size: 12.5px; } .qr-v b { font-size: 28px; } .qr-v span { font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.qr-v.good { border-color: rgba(76,195,138,.45); background: linear-gradient(180deg, rgba(76,195,138,.09), transparent), var(--card); } .qr-v.good span { color: #4CC38A; } .qr-v.fair { border-color: rgba(226,174,79,.45); background: linear-gradient(180deg, rgba(226,174,79,.09), transparent), var(--card); } .qr-v.fair span { color: #E2AE4F; } .qr-v.bad { border-color: rgba(239,107,107,.5); background: linear-gradient(180deg, rgba(239,107,107,.1), transparent), var(--card); } .qr-v.bad span { color: #EF6B6B; }
.qr-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.qr-card { padding: 20px 22px; } .qr-card h3 { margin: 0 0 12px; font-size: 16px; }
.qr-leak, .qr-win { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 12px 0; } .qr-win { grid-template-columns: auto 1fr; } .qr-leak + .qr-leak, .qr-win + .qr-win { border-top: 1px solid var(--line); }
.qr-leak p, .qr-win p { margin: 3px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; } .qr-leak strong { font-size: 20px; text-align: right; white-space: nowrap; color: #EF8F8F; } .qr-leak strong small { display: block; color: var(--text-3); font-size: 11.5px; font-weight: 500; }
.qr-n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(239,107,107,.16); color: #EF8F8F; font-weight: 800; font-size: 13px; } .qr-n.g { background: rgba(76,195,138,.16); color: #4CC38A; }
.qr-icp .qx-icp { margin-bottom: 2px; } .qr-send { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .qr-icp .qr-send:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.qr-send input { flex: 1 1 260px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; } .qr-send input:focus { outline: none; border-color: rgba(var(--hl), .7); }
.qr-hist { display: grid; gap: 4px; } .qr-h { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .qr-h:hover, .qr-h.on { background: rgba(255,255,255,.05); }
.qr-h b { font-size: 16px; color: var(--gold); } .qr-h small { color: var(--text-3); } .qr-h svg { width: 15px; height: 15px; color: var(--text-3); transform: rotate(-90deg); }
.qr-next { display: flex; align-items: center; gap: 16px; padding: 18px 22px; } .qr-next div { flex: 1; } .qr-next p { margin: 2px 0 0; color: var(--text-2); }
/* the branded PDF report */
.qrp-wrap { max-width: 860px; margin: 0 auto; }
.qrp { background: #FBF8F2; color: #222126; padding: 44px 52px; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.4); font-size: 14.5px; line-height: 1.55; }
.qrp-cover { display: flex; gap: 22px; align-items: center; padding-bottom: 22px; border-bottom: 3px solid #D4B886; } .qrp-cover img { border-radius: 14px; } .qrp-mark { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 18px; background: #18181B; color: #D4B886; font: 800 34px var(--font); }
.qrp-kind { margin: 0; font: 400 15px/1 'Anton', Impact, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #A7894F; } .qrp-cover h1 { margin: 6px 0 4px; font-size: 32px; color: #18181B; letter-spacing: -.02em; } .qrp-cover p { margin: 0; color: #6B675E; }
.qrp-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; } .qrp-big { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; background: #F1EBDD; } .qrp-big b { font-size: 46px; line-height: 1; color: #18181B; letter-spacing: -.02em; } .qrp-big span { color: #6B675E; font-size: 13px; } .qrp-big strong { color: #18181B; font-size: 15px; } .qrp-big.gold b { color: #8F6E2F; }
.qrp-sec { margin: 26px 0 0; break-inside: avoid; } .qrp-sec h2, .qrp-next h2 { margin: 0 0 12px; font-size: 19px; color: #18181B; padding-bottom: 6px; border-bottom: 1px solid #E4DCCB; }
.qrp-t { width: 100%; border-collapse: collapse; } .qrp-t td { padding: 10px 0; border-bottom: 1px solid #EEE7D9; vertical-align: top; } .qrp-t td.n { font-weight: 800; white-space: nowrap; padding: 10px 14px; text-align: right; } .qrp-t td:last-child { width: 150px; font-weight: 700; color: #6B675E; } .qrp-t .good { color: #2E8B57; } .qrp-t .fair { color: #B07A1E; } .qrp-t .bad { color: #C0392B; }
.qrp-bars { display: grid; gap: 8px; } .qrp-bars div { display: grid; grid-template-columns: 170px 1fr 100px; gap: 12px; align-items: center; } .qrp-bars i { height: 10px; border-radius: 99px; background: #ECE4D4; overflow: hidden; } .qrp-bars i b { display: block; height: 100%; background: #C9A86E; border-radius: inherit; } .qrp-bars em { font-style: normal; font-weight: 800; text-align: right; color: #6B675E; }
.qrp-item { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 10px 0; } .qrp-item + .qrp-item { border-top: 1px solid #EEE7D9; } .qrp-item > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #18181B; color: #D4B886; font-weight: 800; font-size: 12.5px; } .qrp-item p { margin: 2px 0 0; color: #4A4740; }
.qrp-dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; margin: 0; } .qrp-dl dt { color: #8A857A; } .qrp-dl dd { margin: 0; }
.qrp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .qrp-steps div { padding: 14px 16px; border-radius: 12px; background: #F1EBDD; } .qrp-steps p { margin: 4px 0 0; color: #4A4740; font-size: 13.5px; }
.qrp-pk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .qrp-pk div { padding: 16px; border-radius: 12px; border: 1px solid #E4DCCB; } .qrp-pk b { display: block; font: 400 18px/1.1 'Anton', Impact, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #18181B; } .qrp-pk strong { display: block; margin: 4px 0 6px; color: #8F6E2F; } .qrp-pk p { margin: 0; color: #4A4740; font-size: 13px; }
.qrp-g { padding: 10px 0 10px 14px; border-left: 3px solid #2E8B57; margin: 0 0 10px; } .qrp-g p { margin: 2px 0 0; color: #4A4740; }
.qrp-next { margin: 28px 0 0; padding: 20px 22px; border-radius: 14px; background: #18181B; color: #F3F1EC; break-inside: avoid; } .qrp-next h2 { color: #F3F1EC; border-color: rgba(255,255,255,.15); } .qrp-next p { margin: 0 0 6px; color: #D9D5CC; } .qrp-link { font-weight: 800; color: #D4B886 !important; }
.qrp-foot { margin-top: 26px; padding-top: 12px; border-top: 1px solid #E4DCCB; color: #8A857A; font-size: 12px; text-align: center; }
@media print { .qrp-wrap { max-width: none; } .qrp { box-shadow: none; border-radius: 0; padding: 0; } .qrp-break { break-before: page; } }
@media (max-width: 1100px) { .qx-wrap { grid-template-columns: 1fr; } .qx-pic { position: static; } .qr-vits { grid-template-columns: 1fr 1fr; } .qr-two { grid-template-columns: 1fr; } .qr-hero { grid-template-columns: 1fr; } .qr-val { padding-left: 0; border-left: 0; } }
@media (max-width: 760px) { .qx-steps { grid-template-columns: repeat(4, 1fr); } .qx-q h2 { font-size: 22px; } .qx-opts, .qx-opts.n3, .qx-opts.n6, .qx-opts.multi { grid-template-columns: 1fr; } .qx-scale { grid-template-columns: repeat(5, 1fr); } .qrp { padding: 24px; } .qrp-sum, .qrp-steps, .qrp-pk { grid-template-columns: 1fr; } }
.qx-frac { display: grid; grid-template-columns: none; grid-template-rows: none; gap: 6px; justify-items: center; } .qx-frac .r { display: flex; align-items: center; gap: 10px; } .qx-frac i { width: 100%; min-width: 110px; }
.qrp-bars div { grid-template-columns: 170px 1fr 110px; } .qrp-bars em { white-space: nowrap; font-size: 12.5px; }
/* Audit round 3: colourful picture blocks, type-in boxes, the value equation by name */
.qx-blk { background: rgba(var(--tc, 255,255,255), .06); border-color: rgba(var(--tc, 255,255,255), .22); } .qx-blk h4 { display: flex; align-items: center; gap: 7px; color: rgb(var(--tc, 180,178,172)); font-size: 13px; font-weight: 700; } .qx-blk h4 svg { width: 15px; height: 15px; }
.qx-blk.c-red { --tc: 239, 107, 107; }
.qx-pic { background: radial-gradient(130% 70% at 100% 0%, rgba(212,184,134,.14), transparent 55%), linear-gradient(180deg, #23232A, #1C1C21); } .qx-ph b { background: linear-gradient(90deg, #E6D2A8, #D4B886); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 16px; }
.qx-blk .qx-v { background: rgba(0,0,0,.18); }
.qx-frac { gap: 8px; } .qx-frac .r { gap: 14px; align-items: flex-start; } .qx-frac span { min-width: 74px; } .qx-frac span b { font-size: 20px; } .qx-frac span small { font-size: 10.5px; line-height: 1.2; text-align: center; max-width: 80px; margin-top: 2px; } .qx-frac em { margin-top: 4px; } .qx-frac i { background: rgba(229,139,176,.7); }
.qx-veq { flex-wrap: wrap; } .qx-vs { margin-left: auto; text-align: right; }
.qx-extra { height: 52px; font-size: 16px; font-weight: 500; }
.qr-h3 { margin: 4px 0 -4px; font-size: 16px; }
.qx-opt span { min-width: 0; overflow-wrap: anywhere; } .qx-pic, .qx-blk, .qx-left { min-width: 0; } .qx-bar span { min-width: 0; }
.qx-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } .qx-step { padding: 12px 6px 14px; font-size: 12.5px; }
.qx-q h2 em { font-style: italic; color: rgb(var(--tc)); }
.qx-fl { justify-self: start; } .qx-fm { justify-self: center; } .qx-fr { justify-self: end; }
.qx-idk { gap: 6px; border: 1.5px dashed rgba(var(--tc), .5); background: rgba(var(--tc), .06); color: var(--text); } .qx-idk svg { width: 15px; height: 15px; } .qx-idk:hover { background: rgba(var(--tc), .16); } .qx-idk.on { border-style: solid; background: rgba(var(--tc), .22); }
details.au-others > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; } details.au-others > summary::-webkit-details-marker { display: none; } details.au-others > summary .au-sumt { flex: 1; min-width: 0; } details.au-others > summary small { display: block; color: var(--text-3); font-size: 12.5px; } details.au-others .au-chev { width: 16px; height: 16px; color: var(--text-3); transition: transform .15s; } details.au-others[open] .au-chev { transform: rotate(180deg); } details.au-others[open] > summary { margin-bottom: 8px; }
@media (max-width: 760px) { .qx-steps { grid-template-columns: repeat(5, 1fr); } .qx-step > span:not(.ic) { display: none; } .qx-step { padding: 10px 4px; } .qx-f { grid-template-columns: auto 1fr auto; } }
.qx-wrap + details.au-others, .qr + details.au-others { margin-top: 20px; } details.au-others { padding: 14px 18px; }
.au-orow, .qr-hrow { display: flex; align-items: center; gap: 6px; } .au-orow .au-o, .qr-hrow .qr-h { flex: 1; min-width: 0; }
.qx-pos { white-space: nowrap; flex: none; }

/* Security */
.sec-gate { display: grid; grid-template-columns: minmax(0, 360px) auto; gap: 10px; align-items: end; margin-top: 14px; } .sec-pw { display: grid; gap: 6px; width: 100%; } .sec-acts { display: flex; gap: 8px; margin: 14px 0 4px; }
@media (max-width: 640px) { .sec-gate { grid-template-columns: 1fr; } }