/* [next]/internal/font/google/onest_c49c86b7.module.css [app-client] (css) */
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/4084ce120da2621a-s.2x4a0-syw-9dj.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/16d91c780434f2ce-s.0shchh0jtv0ui.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/ef79401ea952b7f0-s.3t69pc-7h-e66.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/8800dfc60902df36-s.p.3nasnllvo8ig4.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Onest Fallback;
  src: local(Arial);
  ascent-override: 92.2%;
  descent-override: 28.99%;
  line-gap-override: 0.0%;
  size-adjust: 105.2%;
}

.onest_c49c86b7-module___bgsDG__className {
  font-family: Onest, Onest Fallback;
  font-style: normal;
}

.onest_c49c86b7-module___bgsDG__variable {
  --font-onest: "Onest", "Onest Fallback";
}

/* [project]/app/styles/tokens/palette.css [app-client] (css) */
:root {
  --c-blue-75: #9cade2;
  --c-blue-62: #594cf0;
  --c-blue-61: #2f57e0;
  --c-blue-52: #1877f2;
  --c-blue-52b: #2f8fd8;
  --c-blue-52c: #2647bd;
  --c-blue-45: #1f3b9c;
  --c-blue-39: #1f6fa8;
  --c-blue-39b: #3a4f8d;
  --c-violet-59: #8a4ade;
  --c-warm-98: #fafaf9;
  --c-warm-97: #f7f7f6;
  --c-warm-95: #f2f2f0;
  --c-warm-95b: #f4f4f2;
  --c-warm-94b: #f1f0ee;
  --c-warm-93: #eeeeec;
  --c-warm-92: #ecebe9;
  --c-warm-91: #e9e9e6;
  --c-warm-89: #e6e4e1;
  --c-warm-89b: #e6e6e2;
  --c-warm-83: #d8d6d1;
  --c-warm-78: #c9c9c4;
  --c-warm-77: #c9c7c1;
  --c-warm-75: #c2c2bc;
  --c-warm-75b: #c4c1bb;
  --c-warm-71: #b8b6b0;
  --c-warm-64: #a8a5a0;
  --c-warm-62: #a3a09a;
  --c-warm-61: #a09e97;
  --c-warm-52: #898781;
  --c-warm-45: #78756f;
  --c-warm-41: #6a6a67;
  --c-warm-40: #6b6862;
  --c-warm-32: #56534d;
  --c-warm-31: #52514e;
  --c-warm-28: #4a4844;
  --c-warm-23: #3d3b36;
  --c-warm-22: #3a3a38;
  --c-white: #fff;
  --c-grey-97: #f8f8f8;
  --c-grey-89b: #e4e4e4;
  --c-grey-64: #a3a3a3;
  --c-grey-60: #9a9a9a;
  --c-grey-54: #8a8a8a;
  --c-grey-48: #7a7a7a;
  --c-grey-42: #6a6a6a;
  --c-grey-40: #5a6470;
  --c-grey-27: #444;
  --c-grey-20: #333;
  --c-grey-16: #282826;
  --c-grey-16b: #2a2a2a;
  --c-grey-13: #222;
  --c-grey-09: #161616;
  --c-grey-09b: #16161a;
  --c-grey-07: #111;
  --c-grey-04: #0b0b0b;
  --c-black: #000;
  --c-green-97: #f0fdf4;
  --c-green-93: #dcfce7;
  --c-green-73: #86efac;
  --c-green-53: #4fbf7e;
  --c-green-40: #1baf7a;
  --c-green-39: #10b981;
  --c-green-36: #16a34a;
  --c-green-34: #0ca30c;
  --c-green-34b: #0ca35a;
  --c-green-29: #0a8a4c;
  --c-green-29b: #15803d;
  --c-green-28: #1f6f4a;
  --c-green-26: #0a7a0a;
  --c-green-26b: #0a7a3a;
  --c-green-26c: #0a7a45;
  --c-green-24: #166534;
  --c-green-19: #006300;
  --c-green-11: #12201c;
  --c-green-05: #0a100e;
  --c-red-97: #fef2f2;
  --c-red-96: #fdecec;
  --c-red-94: #fee2e2;
  --c-red-68: #ff5c5c;
  --c-red-65: #e07b6e;
  --c-red-59: #e34948;
  --c-red-52: #d03b3b;
  --c-red-51b: #d3392f;
  --c-red-51: #dc2626;
  --c-red-50: #d1392f;
  --c-red-47: #bd3232;
  --c-red-46: #c02a2a;
  --c-red-44: #c02a20;
  --c-red-42: #b02f26;
  --c-red-42b: #b42020;
  --c-red-42c: #b91c1c;
  --c-red-40: #a82c24;
  --c-red-34: #9a3412;
  --c-orange-96: #fff7ed;
  --c-orange-92: #ffedd5;
  --c-orange-91: #eceae6;
  --c-orange-72: #fdba74;
  --c-orange-57: #e8a13a;
  --c-orange-54: #fab219;
  --c-orange-53: #e07b2e;
  --c-orange-50: #f59e0b;
  --c-orange-48: #ea580c;
  --c-orange-46: #eda100;
  --c-orange-43: #c07a1a;
  --c-orange-42: #b56221;
  --c-orange-40: #c2410c;
  --c-orange-33: #8a5620;
  --c-orange-27: #8a5a00;
  --c-orange-24: #7a5300;
  --c-orange-18: #5c3f00;
  --c-amber-99: #fcfcfb;
  --ink-deep-rgb: 11, 11, 11;
  --brand-rgb: 47, 87, 224;
  --c-white-rgb: 255, 255, 255;
  --c-black-rgb: 0, 0, 0;
  --success-rgb: 12, 163, 90;
  --danger-rgb: 209, 57, 47;
  --warning-rgb: 224, 123, 46;
  --c-red-52-rgb: 208, 59, 59;
  --c-orange-46-rgb: 237, 161, 0;
  --brand-facebook-rgb: 24, 119, 242;
  --c-green-05-rgb: 10, 16, 14;
  --c-blue-62-rgb: 89, 76, 240;
  --c-green-34-rgb: 12, 163, 12;
  --c-red-51b-rgb: 211, 57, 47;
  --c-red-51-rgb: 220, 38, 38;
  --c-green-40-rgb: 27, 175, 122;
  --c-violet-59-rgb: 138, 74, 222;
  --c-orange-57-rgb: 232, 161, 58;
  --c-red-59-rgb: 227, 73, 72;
  --c-blue-39-rgb: 31, 111, 168;
  --c-orange-54-rgb: 250, 178, 25;
  --c-blue-52b-rgb: 47, 143, 216;
}

/* [project]/app/styles/tokens/semantic.css [app-client] (css) */
:root {
  --brand: var(--c-blue-61);
  --brand-strong: var(--c-blue-52c);
  --brand-deep: var(--c-blue-45);
  --brand-accent: var(--c-violet-59);
  --brand-facebook: var(--c-blue-52);
  --ink: var(--c-grey-09);
  --ink-deep: var(--c-grey-04);
  --text-secondary: var(--c-warm-32);
  --text-muted: var(--c-warm-52);
  --text-dim: var(--c-warm-62);
  --card: var(--c-white);
  --surface-sunken: var(--c-warm-98);
  --band-muted: var(--c-warm-95b);
  --surface-muted: var(--c-warm-95);
  --success: var(--c-green-34b);
  --success-strong: var(--c-green-29);
  --success-deep: var(--c-green-26b);
  --danger: var(--c-red-50);
  --danger-strong: var(--c-red-42);
  --warning: var(--c-orange-53);
  --warning-strong: var(--c-orange-42);
  --bg-top: var(--c-grey-16);
  --bg-bottom: var(--c-green-11);
  --ink-soft: var(--c-grey-97);
  --nav-fg: rgba(var(--c-white-rgb), .8);
  --nav-fg-strong: var(--c-white);
  --nav-hover-bg: rgba(var(--c-white-rgb), .06);
  --nav-active-bg: rgba(var(--c-white-rgb), .1);
  --agent-1: var(--brand);
  --agent-2: var(--c-green-40);
  --agent-3: var(--c-violet-59);
  --agent-4: var(--c-orange-57);
  --agent-5: var(--c-red-59);
  --agent-6: var(--c-blue-39);
  --agent-1-rgb: var(--brand-rgb);
  --agent-2-rgb: var(--c-green-40-rgb);
  --agent-3-rgb: var(--c-violet-59-rgb);
  --agent-4-rgb: var(--c-orange-57-rgb);
  --agent-5-rgb: var(--c-red-59-rgb);
  --agent-6-rgb: var(--c-blue-39-rgb);
}

/* [project]/app/styles/tokens/system.css [app-client] (css) */
:root {
  --band-pad: clamp(56px, 7vh, 88px);
  --sidebar-w: 300px;
  --header-h: 48px;
  --gutter: 4px;
  --slide-dur: .25s;
  --slide-ease: cubic-bezier(.25, .46, .45, .94);
  --font-sans: var(--font-onest), "TT Commons Pro", "TTCommonsPro",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

/* [project]/app/styles/parts/00-base.css [app-client] (css) */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg-bottom);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  color: inherit;
  background: none;
  border: 0;
  font-family: inherit;
}

/* [project]/app/styles/parts/01-auth.css [app-client] (css) */
.authWrap {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  display: grid;
}

.authCard {
  background: var(--c-white);
  width: min(400px, 100%);
  box-shadow: 0 24px 70px rgba(var(--c-black-rgb), .4);
  border-radius: 20px;
  padding: 32px 30px 28px;
}

.authBrand {
  background: linear-gradient(135deg, var(--brand), var(--brand-accent));
  width: 44px;
  height: 44px;
  color: var(--c-white);
  border-radius: 12px;
  place-items: center;
  margin: 0 auto 18px;
  font-size: 22px;
  font-weight: 700;
  display: grid;
}

.authBrand svg {
  width: 23px;
  height: 23px;
}

.authTitle {
  color: var(--ink);
  text-align: center;
  font-size: 22px;
  font-weight: 620;
}

.authSub {
  color: var(--c-grey-42);
  text-align: center;
  margin-top: 5px;
  margin-bottom: 22px;
  font-size: 14px;
}

.authError {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 10px 12px 10px 36px;
  font-size: 13.5px;
  position: relative;
}

.authError:before {
  content: "";
  background: var(--danger);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 2px);
  left: 12px;
}

.authField {
  margin-bottom: 14px;
  display: block;
}

.authField span {
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 550;
  display: block;
}

.authField input {
  border: 1px solid var(--c-grey-89b);
  width: 100%;
  height: 44px;
  color: var(--ink);
  border-radius: 11px;
  outline: none;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}

.authField input::placeholder {
  color: var(--c-grey-64);
}

.authField input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15);
}

.authPw {
  position: relative;
}

.authPw input {
  padding-right: 44px;
}

.authPwToggle {
  width: 34px;
  height: 34px;
  color: var(--c-grey-54);
  border-radius: 8px;
  place-items: center;
  transition: color .15s, background-color .15s;
  display: grid;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.authPwToggle:hover {
  color: var(--c-grey-20);
  background: rgba(var(--c-black-rgb), .05);
}

.authBtn {
  background: var(--ink);
  width: 100%;
  height: 46px;
  color: var(--ink-soft);
  border-radius: 999px;
  margin-top: 6px;
  font-size: 15.5px;
  font-weight: 620;
  transition: opacity .15s, transform .15s;
}

.authBtn:hover:not(:disabled) {
  opacity: .92;
}

.authBtn:active:not(:disabled) {
  transform: scale(.99);
}

.authBtn:disabled {
  opacity: .55;
  cursor: default;
}

.authAlt {
  text-align: center;
  color: var(--c-grey-42);
  margin-top: 18px;
  font-size: 14px;
}

.authAlt a {
  color: var(--brand);
  font-weight: 600;
}

.authForgot {
  text-align: right;
  margin: -4px 0 14px;
  font-size: 13px;
}

.authForgot a {
  color: var(--text-muted);
}

.authForgot a:hover {
  color: var(--brand);
}

.authNote {
  background: var(--surface-sunken);
  color: var(--text-muted);
  text-align: center;
  border-radius: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
}

.authError a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.authWait {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* [project]/app/styles/parts/02-shell.css [app-client] (css) */
.appRoot {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.sidebar {
  z-index: 1;
  width: var(--sidebar-w);
  height: 100vh;
  color: var(--nav-fg);
  flex-direction: column;
  padding: 2px 8px 12px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.sidebarTop {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.sidebarSpacer {
  flex: auto;
}

.sidebarBottom {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.sidebarDivider {
  background: rgba(var(--c-white-rgb), .08);
  height: 1px;
  margin: 8px;
}

.navRow {
  height: 44px;
  color: var(--nav-fg);
  transition: background-color var(--slide-dur) var(--slide-ease),
    color .2s cubic-bezier(.4, 0, .2, 1);
  white-space: nowrap;
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.45;
  display: flex;
}

.navRow:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-fg-strong);
}

.navRow.active, .navRow.active:hover {
  color: var(--nav-fg-strong);
  background: none;
}

.navRow.lg {
  color: var(--nav-fg-strong);
  font-size: 18px;
}

.iconSquare {
  background: rgba(var(--c-white-rgb), .1);
  width: 32px;
  height: 32px;
  color: var(--c-white);
  border-radius: 10px;
  flex: 0 0 32px;
  place-items: center;
  font-size: 14px;
  font-weight: 620;
  display: grid;
}

.iconSquare svg {
  width: 18px;
  height: 18px;
}

.navRow .label {
  text-overflow: ellipsis;
  padding-block: 1px;
  line-height: 1.45;
  overflow: hidden;
}

.badge {
  background: var(--c-red-68);
  width: 20px;
  height: 20px;
  color: var(--c-white);
  border-radius: 999px;
  place-items: center;
  margin-left: auto;
  font-size: 12px;
  font-weight: 620;
  display: grid;
}

.addRow {
  height: 44px;
  color: var(--nav-fg);
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 550;
  transition: background-color .2s, color .2s;
  display: flex;
}

.addRow:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-fg-strong);
}

.addRow .iconSquare {
  background: rgba(var(--c-white-rgb), .06);
}

.newFlowForm {
  background: var(--nav-hover-bg);
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 8px;
  display: flex;
}

.newFlowForm .iconSquare {
  background: rgba(var(--c-white-rgb), .06);
}

.newFlowInput {
  min-width: 0;
  color: var(--nav-fg-strong);
  background: none;
  border: 0;
  outline: none;
  flex: auto;
  font-family: inherit;
  font-size: 15px;
  font-weight: 550;
}

.newFlowInput::placeholder {
  color: rgba(var(--c-white-rgb), .4);
}

.newFlowCancel {
  width: 26px;
  height: 26px;
  color: rgba(var(--c-white-rgb), .55);
  border-radius: 8px;
  flex: none;
  place-items: center;
  transition: background-color .15s, color .15s;
  display: grid;
}

.newFlowCancel:hover {
  background: rgba(var(--c-white-rgb), .12);
  color: var(--c-white);
}

.newFlowCancel svg {
  width: 15px;
  height: 15px;
}

.header {
  z-index: 3;
  height: var(--header-h);
  pointer-events: none;
  align-items: stretch;
  padding: 0 12px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.tabs {
  pointer-events: auto;
  align-items: stretch;
  gap: 4px;
  margin: 0 auto;
  display: flex;
}

.tab {
  height: var(--header-h);
  color: rgba(var(--c-white-rgb), .7);
  align-items: center;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 470;
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
  display: inline-flex;
  position: relative;
}

.tab > .lbl {
  z-index: 1;
  padding-bottom: 2px;
  line-height: 1;
  position: relative;
}

.tab:hover {
  color: var(--c-white);
}

.tab.active {
  color: var(--ink);
}

.tabBg {
  display: none;
}

.tab.active .tabBg {
  background: var(--card);
  z-index: 0;
  border-radius: 12px 12px 0 0;
  display: block;
  position: absolute;
  inset: 6px 0 -1px;
}

.tab.active .tabBg:before, .tab.active .tabBg:after {
  content: "";
  background: var(--card);
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: 0;
}

.tab.active .tabBg:before {
  -webkit-mask: radial-gradient(circle 12px at 0 0, transparent 11.5px, var(--c-black) 12px);
  -webkit-mask: radial-gradient(circle 12px at 0 0, transparent 11.5px, var(--c-black) 12px);
  mask: radial-gradient(circle 12px at 0 0, transparent 11.5px, var(--c-black) 12px);
  left: -12px;
}

.tab.active .tabBg:after {
  -webkit-mask: radial-gradient(circle 12px at 100% 0, transparent 11.5px, var(--c-black) 12px);
  -webkit-mask: radial-gradient(circle 12px at 100% 0, transparent 11.5px, var(--c-black) 12px);
  mask: radial-gradient(circle 12px at 100% 0, transparent 11.5px, var(--c-black) 12px);
  right: -12px;
}

.card {
  top: var(--header-h);
  z-index: 2;
  width: calc(100vw - 2 * var(--gutter));
  height: calc(100vh - var(--header-h));
  margin-left: var(--gutter);
  background: var(--card);
  cursor: default;
  transition: transform var(--slide-dur) var(--slide-ease);
  will-change: transform;
  border-radius: 16px 16px 0 0;
  position: absolute;
  left: 0;
  overflow: auto;
  transform: translateX(0);
}

.appRoot[data-collapsed="false"] .card {
  transform: translateX(calc(var(--sidebar-w) - var(--gutter)));
}

.bump {
  background: rgba(var(--c-white-rgb), .92);
  width: 18px;
  height: 52px;
  box-shadow: 2px 0 10px rgba(var(--c-black-rgb), .28);
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transition: opacity var(--slide-dur) var(--slide-ease),
    transform var(--slide-dur) var(--slide-ease),
    width .15s ease, background-color .15s ease;
  border-radius: 0 9px 9px 0;
  place-items: center;
  display: grid;
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%)translateX(-100%);
}

.appRoot[data-collapsed="true"] .bump {
  opacity: 1;
  transform: translateY(-50%)translateX(0);
}

.bump:hover {
  background: var(--c-white);
  width: 22px;
}

.bumpDots {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.bumpDots i {
  background: var(--ink);
  border-radius: 50%;
  width: 3px;
  height: 3px;
}

/* [project]/app/styles/parts/03-onboarding.css [app-client] (css) */
.modalOverlay {
  z-index: 50;
  background: rgba(var(--c-green-05-rgb), .55);
  -webkit-backdrop-filter: blur(8px);
  place-items: center;
  padding: 16px;
  animation: .25s both overlayIn;
  display: grid;
  position: fixed;
  inset: 0;
}

@keyframes overlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modalCard {
  background: var(--card);
  text-align: center;
  width: min(440px, 100%);
  box-shadow: 0 24px 70px rgba(var(--c-black-rgb), .4);
  border-radius: 24px;
  padding: 34px 30px 28px;
  animation: .4s cubic-bezier(.25, .46, .45, .94) both modalIn;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(14px)scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.flowHero {
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
  display: flex;
}

.flowNode {
  color: var(--c-white);
  flex: none;
  place-items: center;
  display: grid;
}

.flowNode svg {
  width: 20px;
  height: 20px;
}

.flowNode.src, .flowNode.dst {
  border-radius: 13px;
  width: 48px;
  height: 48px;
}

.flowNode.src {
  background: var(--brand);
}

.flowNode.dst {
  background: var(--ink);
}

.flowNode.hub {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-accent) 100%);
  width: 60px;
  height: 60px;
  box-shadow: 0 8px 22px rgba(var(--brand-rgb), .45);
  border-radius: 17px;
  position: relative;
}

.flowNode.hub svg {
  width: 26px;
  height: 26px;
}

.flowNode.hub:after {
  content: "";
  border: 2px solid rgba(var(--brand-rgb), .5);
  border-radius: 22px;
  animation: 1.9s ease-out infinite hubPulse;
  position: absolute;
  inset: -6px;
}

@keyframes hubPulse {
  0% {
    opacity: .7;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.flowLink {
  background: rgba(var(--c-black-rgb), .12);
  width: 30px;
  height: 2px;
  position: relative;
  overflow: hidden;
}

.flowLink:after {
  content: "";
  background: var(--brand);
  width: 45%;
  height: 100%;
  animation: 1.6s linear infinite flowTravel;
  position: absolute;
  top: 0;
  left: -45%;
}

@keyframes flowTravel {
  from {
    left: -45%;
  }

  to {
    left: 100%;
  }
}

.modalTitle {
  color: var(--ink);
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 620;
}

.modalSub {
  color: var(--c-grey-42);
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.5;
}

.modalForm {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.modalInput {
  border: 1px solid var(--c-grey-89b);
  height: 48px;
  color: var(--ink);
  border-radius: 12px;
  outline: none;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}

.modalInput::placeholder {
  color: var(--c-grey-60);
}

.modalInput:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15);
}

.modalBtn {
  background: var(--ink);
  height: 48px;
  color: var(--ink-soft);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 620;
  transition: opacity .15s, transform .15s;
}

.modalBtn:hover:not(:disabled) {
  opacity: .92;
}

.modalBtn:active:not(:disabled) {
  transform: scale(.98);
}

.modalBtn:disabled {
  opacity: .45;
  cursor: default;
}

/* [project]/app/styles/parts/04-dialogs.css [app-client] (css) */
.dlgOverlay {
  z-index: 200;
  background: rgba(var(--c-green-05-rgb), .55);
  -webkit-backdrop-filter: blur(8px);
  place-items: center;
  padding: 16px;
  animation: .2s both overlayIn;
  display: grid;
  position: fixed;
  inset: 0;
}

.dlgCard {
  background: var(--card);
  width: min(420px, 100%);
  box-shadow: 0 24px 70px rgba(var(--c-black-rgb), .4);
  border-radius: 22px;
  padding: 28px 28px 22px;
  animation: .32s cubic-bezier(.25, .46, .45, .94) both modalIn;
}

.dlgIcon {
  background: var(--c-red-96);
  width: 46px;
  height: 46px;
  color: var(--c-red-52);
  border-radius: 14px;
  place-items: center;
  margin-bottom: 16px;
  display: grid;
}

.dlgIcon svg {
  width: 24px;
  height: 24px;
}

.dlgTitle {
  color: var(--ink);
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 620;
  line-height: 1.3;
}

.dlgBody {
  color: var(--c-grey-42);
  white-space: pre-line;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
}

.dlgInput {
  border: 1px solid var(--c-grey-89b);
  width: 100%;
  height: 46px;
  color: var(--ink);
  border-radius: 12px;
  outline: none;
  margin-top: 18px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}

.dlgInput::placeholder {
  color: var(--c-grey-60);
}

.dlgInput:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15);
}

.dlgActions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  display: flex;
}

.dlgBtn {
  cursor: pointer;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  height: 44px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 620;
  transition: opacity .15s, transform .15s, background-color .15s;
}

.dlgBtn:active:not(:disabled) {
  transform: scale(.98);
}

.dlgBtn:disabled {
  opacity: .45;
  cursor: default;
}

.dlgBtn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.dlgBtn.ghost {
  background: var(--surface-muted);
  color: var(--ink);
}

.dlgBtn.ghost:hover:not(:disabled) {
  background: var(--c-warm-91);
}

.dlgBtn.primary {
  background: var(--ink);
  color: var(--ink-soft);
}

.dlgBtn.primary:hover:not(:disabled) {
  opacity: .92;
}

.dlgBtn.primary.danger {
  background: var(--c-red-52);
  color: var(--c-white);
}

.dlgBtn.primary.danger:hover:not(:disabled) {
  background: var(--c-red-47);
  opacity: 1;
}

@media (max-width: 480px) {
  .dlgActions {
    flex-direction: column-reverse;
  }

  .dlgBtn {
    width: 100%;
  }
}

.empty {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  height: 100%;
  display: flex;
}

.emptyIcon {
  background: var(--surface-muted);
  width: 44px;
  height: 44px;
  color: var(--ink);
  border-radius: 999px;
  place-items: center;
  display: grid;
}

.emptyIcon svg {
  width: 20px;
  height: 20px;
}

.emptyText {
  color: var(--c-grey-27);
  font-size: 16px;
  font-weight: 500;
}

.pillBtn {
  background: var(--ink);
  height: 48px;
  color: var(--ink-soft);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 620;
  transition: transform .15s, opacity .15s;
  display: inline-flex;
}

.pillBtn:hover {
  opacity: .92;
}

.pillBtn:active {
  transform: scale(.98);
}

/* [project]/app/styles/parts/05-overview-header.css [app-client] (css) */
.ovPage {
  --series: var(--brand);
  --ov-ink: var(--ink);
  --ov-ink2: var(--c-warm-31);
  --ov-muted: var(--text-muted);
  --ov-grid: var(--c-warm-89b);
  --ov-hair: rgba(var(--ink-deep-rgb), .1);
  --ov-track: var(--c-warm-93);
  color: var(--ov-ink2);
  padding: 28px 40px 44px;
}

.ovHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
  display: flex;
}

.ovTitle {
  color: var(--ov-ink);
  font-size: 24px;
  font-weight: 620;
}

.ovSub {
  color: var(--ov-ink2);
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 14px;
  display: flex;
}

.ovDot {
  background: var(--c-green-34);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px rgba(var(--c-green-34-rgb), .15);
  border-radius: 50%;
}

.ovDot.off {
  background: var(--c-warm-77);
  box-shadow: 0 0 0 3px rgba(var(--ink-deep-rgb), .06);
}

.ovBadge {
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  display: inline-flex;
}

.ovTeam .ta-r {
  text-align: right;
}

.ovAgentBtn {
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid #0000;
  padding: 0;
}

.ovAgentBtn:hover {
  color: var(--brand);
  border-bottom-color: rgba(var(--brand-rgb), .4);
}

/* [project]/app/styles/parts/06-powerdial-search.css [app-client] (css) */
.asEmpty {
  text-align: center;
  padding: 30px 0;
}

.pdSearchRow {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.pdSearchRow .lpSearchWrap {
  flex: 1;
  min-width: 240px;
}

.pdSearchRow .lpSearch {
  width: 100%;
}

.pdSearchNote {
  color: var(--brand);
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
}

.pdRowsEmpty {
  text-align: center;
  color: var(--c-warm-45);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 20px;
  font-size: 14px;
  display: flex;
}

.pdRowsEmpty strong {
  color: var(--ink);
  font-size: 15px;
}

.pdRowsEmptySub {
  max-width: 340px;
  color: var(--text-muted);
  font-size: 13px;
}

/* [project]/app/styles/parts/07-callback-modal.css [app-client] (css) */
.cbModal {
  background: var(--c-white);
  width: min(440px, 100vw - 32px);
  box-shadow: 0 24px 70px rgba(var(--ink-deep-rgb), .28);
  border-radius: 16px;
  padding: 20px 22px 18px;
}

.cbHead {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  display: flex;
}

.cbTitle {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.cbSub {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: 13px;
}

.cbSoon {
  margin-bottom: 12px;
}

.cbInput {
  width: 100%;
}

.cbActions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  display: flex;
}

/* [project]/app/styles/parts/08-confirm-dialog.css [app-client] (css) */
.confirmModal {
  background: var(--c-white);
  width: min(420px, 100vw - 32px);
  box-shadow: 0 24px 70px rgba(var(--ink-deep-rgb), .28);
  border-radius: 16px;
  padding: 22px 22px 18px;
}

.confirmTitle {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.confirmBody {
  color: var(--text-secondary);
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
}

.confirmActions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  display: flex;
}

.confirmGo {
  background: var(--ink-deep);
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
}

.confirmGo.danger {
  background: var(--c-red-51);
}

.confirmGo.danger:hover {
  background: var(--c-red-42c);
}

.confirmGo:disabled {
  opacity: .6;
  cursor: default;
}

.pdRowActions {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .06);
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
}

.pdRowSet {
  flex: 1;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.pdRowSetField {
  flex-direction: column;
  flex: 1;
  gap: 5px;
  min-width: 0;
  max-width: 200px;
  display: flex;
}

.pdRowSetField > span {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}

.pdRowActions .pdRowDelete {
  flex: none;
}

.pdRowDelete, .csDelete {
  border: 1px solid rgba(var(--c-red-51-rgb), .25);
  background: var(--c-white);
  color: var(--c-red-51);
  cursor: pointer;
  border-radius: 8px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .14s, border-color .14s;
}

.pdRowDelete:hover, .csDelete:hover {
  background: var(--c-red-97);
  border-color: var(--c-red-51);
}

.csDeleteRow {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .06);
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
}

.csSuppress {
  border: 1px solid rgba(var(--warning-rgb), .3);
  background: var(--c-white);
  color: var(--warning-strong);
  cursor: pointer;
  border-radius: 8px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .14s, border-color .14s;
}

.csSuppress:hover {
  background: var(--c-orange-96);
  border-color: var(--warning);
}

/* [project]/app/styles/parts/09-agent-stats-periods.css [app-client] (css) */
.asPeriods {
  background: var(--c-warm-95b);
  border-radius: 10px;
  gap: 4px;
  margin: 0 20px 4px;
  padding: 4px;
  display: flex;
}

.asPeriod {
  color: var(--c-warm-45);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  flex: 1;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .14s, color .14s;
}

.asPeriod:hover {
  color: var(--ink);
}

.asPeriod.on {
  background: var(--c-white);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb), .1);
}

.asGrid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  display: grid;
}

.asStat {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--surface-sunken);
  border-radius: 12px;
  padding: 13px 14px;
}

.asLabel {
  color: var(--text-muted);
  margin-bottom: 3px;
  font-size: 12px;
  display: block;
}

.asStat strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.2;
  display: block;
}

.asStat strong.good {
  color: var(--success-strong);
}

.asSub {
  color: var(--text-dim);
  margin-top: 2px;
  font-size: 11.5px;
  display: block;
}

.asCols > .srcSection {
  border-top: 0;
  padding-top: 0;
}

.asDispos {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.asDispoTop {
  color: var(--ink);
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  font-size: 13px;
  display: flex;
}

.asDispoN {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.srcFill.good {
  background: var(--success);
}

/* [project]/app/styles/parts/10-agent-stats-recent.css [app-client] (css) */
.asDim {
  color: var(--text-dim);
}

.asRecent {
  flex-direction: column;
  display: flex;
}

.asCall {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  font-size: 13px;
  display: flex;
}

.asCall:last-child {
  border-bottom: 0;
}

.asCall .csHistDot {
  margin-top: 0;
}

.asCallName {
  min-width: 0;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-weight: 550;
  overflow: hidden;
}

.asCallOut {
  color: var(--text-muted);
  text-transform: capitalize;
  flex: none;
  font-size: 12.5px;
}

.asCallWhen {
  text-align: right;
  width: 44px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 12px;
}

@media (max-width: 820px) {
  .asGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* [project]/app/styles/parts/11-overview-panels.css [app-client] (css) */
.ovNum {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.ovNum strong {
  color: var(--ink);
  font-weight: 650;
}

.ovYou {
  background: var(--surface-muted);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 5px;
  margin-left: 7px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
}

.ovEmpty {
  color: var(--text-muted);
  text-align: center;
  padding: 26px 0;
  font-size: 13.5px;
}

.ovSplit {
  background: var(--surface-muted);
  border-radius: 999px;
  gap: 2px;
  height: 12px;
  margin-bottom: 16px;
  display: flex;
  overflow: hidden;
}

.ovSplitSeg {
  height: 100%;
  transition: width .3s;
}

.ovDispos {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.ovDispo {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 13.5px;
  display: flex;
}

.ovDispo:last-child {
  border-bottom: 0;
}

.ovDot {
  border-radius: 3px;
  flex: none;
  width: 9px;
  height: 9px;
}

.ovDispoName {
  min-width: 0;
  color: var(--ink);
  flex: 1;
}

.ovDispoN {
  flex: none;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.ovDispoN strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.ovDispoPct {
  text-align: right;
  width: 34px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.dispo-booked {
  background: var(--success);
}

.dispo-interested {
  background: var(--c-green-53);
}

.dispo-callback {
  background: var(--c-orange-57);
}

.dispo-voicemail {
  background: var(--c-blue-75);
}

.dispo-no-answer {
  background: var(--c-warm-77);
}

.dispo-not-interested {
  background: var(--c-red-65);
}

.dispo-wrong-number {
  background: var(--danger);
}

.dispo-voicemail-inbound {
  background: var(--c-blue-52b);
}

.dispo-none {
  background: var(--c-warm-91);
}

.ovStats {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
  display: grid;
}

.ovStat {
  border: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--surface-sunken);
  border-radius: 11px;
  padding: 11px 13px;
}

.ovStatLabel {
  color: var(--text-muted);
  margin-bottom: 3px;
  font-size: 12px;
  display: block;
}

.ovStat strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 650;
}

.ovStat strong.bad {
  color: var(--danger);
}

.ovSubHead {
  margin-top: 20px;
}

.ovRange {
  border: 1px solid var(--ov-hair);
  color: var(--ov-ink2);
  background: var(--c-white);
  border-radius: 10px;
  flex: none;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
}

.ovKpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
  display: grid;
}

.kpi {
  border: 1px solid var(--ov-hair);
  background: var(--c-white);
  border-radius: 16px;
  padding: 16px 18px;
}

.kpiLabel {
  color: var(--ov-muted);
  margin-bottom: 10px;
  font-size: 13px;
}

.kpiValue {
  color: var(--ov-ink);
  font-size: 28px;
  font-weight: 620;
  line-height: 1;
}

.kpiDelta {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
}

.kpiDelta.up {
  color: var(--c-green-19);
}

.kpiDelta.up:before {
  content: "↑ ";
}

.kpiDelta.down {
  color: var(--c-red-46);
}

.kpiDelta.down:before {
  content: "↓ ";
}

.kpiDelta.flat {
  color: var(--ov-muted);
}

.ovGrid {
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  display: grid;
}

.panel {
  border: 1px solid var(--ov-hair);
  background: var(--c-white);
  border-radius: 16px;
  padding: 20px;
}

.panelHead {
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  display: flex;
}

.panelHead h2 {
  color: var(--ov-ink);
  font-size: 16px;
  font-weight: 620;
}

.panelMeta {
  color: var(--ov-muted);
  font-size: 12px;
}

.bars {
  border-bottom: 1px solid var(--ov-grid);
  align-items: flex-end;
  gap: 12px;
  height: 180px;
  padding-top: 22px;
  display: flex;
}

.barCol {
  flex-direction: column;
  flex: 1;
  align-items: center;
  height: 100%;
  display: flex;
}

.barTrack {
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.bar {
  background: var(--series);
  border-radius: 4px 4px 0 0;
  width: 66%;
  max-width: 34px;
  min-height: 4px;
}

.barVal {
  color: var(--ov-ink2);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: -20px;
}

.barLbl {
  color: var(--ov-muted);
  margin-top: 8px;
  font-size: 12px;
}

.srcRow + .srcRow {
  margin-top: 16px;
}

.srcTop {
  color: var(--ov-ink);
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 13px;
  display: flex;
}

.srcCount {
  color: var(--ov-muted);
  font-variant-numeric: tabular-nums;
}

.srcTrack {
  background: var(--ov-track, var(--c-warm-93));
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.srcFill {
  background: var(--series, var(--brand));
  border-radius: 999px;
  height: 100%;
}

.leadsTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.leadsTable th {
  text-align: left;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ov-muted);
  border-bottom: 1px solid var(--ov-hair);
  padding: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
}

.leadsTable td {
  border-bottom: 1px solid var(--ov-hair);
  color: var(--ov-ink2);
  padding: 13px 0;
}

.leadsTable tr:last-child td {
  border-bottom: 0;
}

.ltName {
  color: var(--ov-ink);
  font-weight: 550;
}

.ltTime {
  color: var(--ov-muted);
  font-variant-numeric: tabular-nums;
}

.badge {
  border-radius: 999px;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.badge.new {
  background: rgba(var(--brand-rgb), .1);
  color: var(--brand-deep);
}

.badge.contacted {
  background: rgba(var(--c-orange-54-rgb), .16);
  color: var(--c-orange-27);
}

.badge.qualified {
  background: rgba(var(--c-green-34-rgb), .12);
  color: var(--c-green-26);
}

@media (max-width: 920px) {
  .ovKpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .ovGrid {
    grid-template-columns: 1fr;
  }
}

/* [project]/app/styles/parts/12-funnel-toolbar.css [app-client] (css) */
.flowPage {
  --fp-ink: var(--ink);
  --fp-ink2: var(--c-warm-31);
  --fp-muted: var(--text-muted);
  --fp-hair: rgba(var(--ink-deep-rgb), .1);
  flex-direction: column;
  height: 100%;
  display: flex;
}

.flowToolbar {
  border-bottom: 1px solid var(--fp-hair);
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  display: flex;
}

.flowTbLeft {
  color: var(--fp-ink);
  align-items: center;
  gap: 10px;
  font-size: 15px;
  display: flex;
}

.flowTbTag {
  color: var(--fp-muted);
  background: var(--surface-muted);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
}

.flowTbRight {
  gap: 8px;
  display: flex;
}

.ghostBtn {
  border: 1px solid var(--fp-hair);
  background: var(--c-white);
  height: 36px;
  color: var(--fp-ink);
  border-radius: 10px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 550;
  transition: background-color .15s;
}

.ghostBtn:hover {
  background: var(--c-warm-97);
}

.darkBtn {
  background: var(--ink);
  height: 36px;
  color: var(--ink-soft);
  border-radius: 10px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  transition: opacity .15s;
}

.darkBtn:hover {
  opacity: .92;
}

.flowCanvas {
  background-color: var(--c-warm-97);
  background-image: radial-gradient(rgba(var(--ink-deep-rgb), .09) 1px, transparent 1px);
  background-size: 22px 22px;
  flex: auto;
  padding: 48px 40px;
  overflow: auto;
}

.flowChain {
  --node-h: 80px;
  align-items: flex-start;
  min-width: min-content;
  display: flex;
}

.flowLoading {
  color: var(--fp-muted);
  font-size: 14px;
}

.flowSaved {
  color: var(--fp-muted);
  font-size: 12.5px;
}

/* [project]/app/styles/parts/13-funnel-nodes.css [app-client] (css) */
.fsources {
  flex-direction: column;
  flex: none;
  gap: 10px;
  display: flex;
}

.faddSource, .faddStep {
  height: var(--node-h);
  box-sizing: border-box;
  border: 2px dashed var(--c-warm-75);
  background: var(--c-white);
  width: 236px;
  color: var(--fp-muted);
  cursor: pointer;
  border-radius: 14px;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color .15s, color .15s, background-color .15s;
  display: flex;
}

.faddSource:hover {
  border-color: var(--brand-facebook);
  color: var(--brand-facebook);
  background: rgba(var(--brand-facebook-rgb), .05);
}

.faddStep {
  width: 170px;
}

.faddStep:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(var(--brand-rgb), .05);
}

.faddSourceIcon {
  place-items: center;
  width: 24px;
  height: 24px;
  display: grid;
}

.faddSourceIcon svg {
  width: 18px;
  height: 18px;
}

.fnode {
  position: relative;
}

.fnodeDel {
  background: var(--c-white);
  border: 1px solid var(--fp-hair);
  width: 22px;
  height: 22px;
  color: var(--c-grey-54);
  cursor: pointer;
  opacity: 0;
  border-radius: 50%;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  transition: opacity .15s, color .15s, border-color .15s;
  display: grid;
  position: absolute;
  top: -8px;
  right: -8px;
}

.fnode:hover .fnodeDel {
  opacity: 1;
}

.fnodeDel:hover {
  color: var(--c-red-52);
  border-color: rgba(var(--c-red-52-rgb), .5);
}

.fnode.action {
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.fnode.unset {
  border-style: dashed;
}

.fnode.unset .fnodeDesc {
  color: var(--c-orange-43);
}

.fnodeSync {
  width: 28px;
  height: 28px;
  color: var(--c-warm-31);
  background: rgba(var(--ink-deep-rgb), .06);
  cursor: pointer;
  border-radius: 8px;
  flex: none;
  place-items: center;
  margin-left: auto;
  transition: background-color .15s, transform .1s;
  display: grid;
}

.fnodeSync svg {
  width: 14px;
  height: 14px;
}

.fnodeSync:hover:not(:disabled) {
  background: rgba(var(--ink-deep-rgb), .13);
  color: var(--ink);
}

.fnodeSync:active:not(:disabled) {
  transform: scale(.92);
}

.fnodeSync:disabled {
  opacity: .3;
  cursor: default;
}

.fnodeSyncing {
  border: 2px solid rgba(var(--ink-deep-rgb), .2);
  border-top-color: var(--c-warm-31);
  border-radius: 50%;
  width: 13px;
  height: 13px;
  animation: .7s linear infinite fnodeSpin;
}

@keyframes fnodeSpin {
  to {
    transform: rotate(360deg);
  }
}

.fnodeSync ~ .fnodeTest {
  margin-left: 0;
}

.fnodeTest {
  width: 28px;
  height: 28px;
  color: var(--brand-facebook);
  background: rgba(var(--brand-facebook-rgb), .1);
  cursor: pointer;
  border-radius: 8px;
  flex: none;
  place-items: center;
  margin-left: auto;
  transition: background-color .15s, transform .1s;
  display: grid;
}

.fnodeTest svg {
  width: 13px;
  height: 13px;
  margin-left: 1px;
}

.fnodeTest:hover:not(:disabled) {
  background: rgba(var(--brand-facebook-rgb), .22);
}

.fnodeTest:active:not(:disabled) {
  transform: scale(.92);
}

.fnodeTest:disabled {
  opacity: .3;
  cursor: default;
}

/* [project]/app/styles/parts/14-funnel-run-states.css [app-client] (css) */
@keyframes nodePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .35);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(var(--brand-rgb), 0);
  }
}

.fnode.running {
  animation: 1s ease-in-out infinite nodePulse;
  border-color: var(--brand) !important;
}

.fnode.trigger.running {
  border-color: var(--brand-facebook) !important;
}

.fnode.ok {
  background: rgba(var(--success-rgb), .07);
  border-color: var(--success) !important;
}

.fnode.ok .fnodeDesc {
  color: var(--success-deep);
}

.fnode.failed {
  background: rgba(var(--c-red-52-rgb), .06);
  border-color: var(--c-red-52) !important;
}

.fnode.failed .fnodeDesc {
  color: var(--c-red-42b);
}

.fnode.skipped {
  opacity: .75;
  border-color: var(--c-warm-78) !important;
}

.fconn.done {
  background: var(--success);
}

.fconn.done:after {
  border-left-color: var(--success);
}

.flowTestSummary {
  color: var(--success-deep);
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12.5px;
  font-weight: 550;
  transition: background-color .15s;
}

.flowTestSummary:hover {
  background: rgba(var(--success-rgb), .1);
}

/* [project]/app/styles/parts/15-funnel-step-email.css [app-client] (css) */
.emailCfg {
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: start;
  gap: 28px;
  display: grid;
}

@media (max-width: 860px) {
  .emailCfg {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

.emailCfgMain {
  min-width: 0;
}

.ecBlock {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .08);
  margin-bottom: 22px;
  padding-bottom: 22px;
}

.ecBlock:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ecHead {
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(var(--ink-deep-rgb), .45);
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 650;
  display: block;
}

.ecSub {
  margin-top: 16px;
  display: block;
}

.ecSub:first-of-type {
  margin-top: 0;
}

.ecSubLabel {
  color: var(--ink);
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 550;
  display: block;
}

.ecSubHead {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
  display: flex;
}

.ecSubHead .ecSubLabel {
  margin-bottom: 0;
}

.ecSub input, .ecSub textarea {
  width: 100%;
  margin-bottom: 0;
}

.ecSub input {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  height: 42px;
  font: inherit;
  background: var(--c-white);
  color: var(--ink);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.ecSub input:focus {
  border-color: rgba(var(--brand-rgb), .55);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
  outline: 0;
}

.ecVars {
  margin-top: 10px;
}

.ecBlock .whHint {
  display: block;
}

/* [project]/app/styles/parts/16-funnel-step-sms.css [app-client] (css) */
.smsCfg {
  min-width: 0;
}

.phoneAdd {
  gap: 8px;
  display: flex;
}

.phoneAdd input {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  min-width: 0;
  height: 42px;
  font: inherit;
  background: var(--c-white);
  color: var(--ink);
  border-radius: 10px;
  flex: 1;
  padding: 0 12px;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.phoneAdd input:focus {
  border-color: rgba(var(--brand-rgb), .55);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
  outline: 0;
}

.phoneAddBtn {
  background: var(--ink, var(--c-grey-07));
  height: 42px;
  color: var(--c-white);
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  flex: none;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  transition: opacity .15s;
}

.phoneAddBtn:hover {
  opacity: .85;
}

.phoneErr {
  color: var(--c-red-42b);
  margin-top: 7px;
  font-size: 12.5px;
  display: block;
}

.phoneList {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  display: flex;
}

.phoneChip {
  background: rgba(var(--ink-deep-rgb), .06);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 6px 11px;
  font-size: 13px;
  font-weight: 550;
  display: inline-flex;
}

.phoneChipX {
  color: rgba(var(--ink-deep-rgb), .45);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1;
  transition: color .15s;
}

.phoneChipX:hover {
  color: var(--c-red-42b);
}

.smsCfg .ecSub input, .smsCfg .ecSub textarea {
  width: 100%;
}

.emailPreview {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: rgba(var(--ink-deep-rgb), .025);
  border-radius: 14px;
  min-width: 0;
  padding: 16px;
  position: sticky;
  top: 0;
}

.emailPreviewHead {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.emailPreviewHead .cfgLabel {
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(var(--ink-deep-rgb), .45);
  margin: 0;
  font-size: 11px;
  font-weight: 650;
}

.previewTag {
  color: var(--success-deep);
  background: rgba(var(--success-rgb), .12);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 550;
}

.previewWarn {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 9px;
  margin-bottom: 10px;
  padding: 8px 10px 8px 34px;
  font-size: 12.5px;
  line-height: 1.45;
  position: relative;
}

.previewWarn:before {
  content: "";
  background: var(--warning);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: .5lh;
  left: 10px;
}

.previewMail {
  background: var(--c-white);
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb), .06);
  border-radius: 10px;
  overflow: hidden;
}

.previewSubject {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: rgba(var(--ink-deep-rgb), .015);
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
}

.lbChipAdd {
  color: rgba(var(--ink-deep-rgb), .6);
  border-style: dashed !important;
}

.lbChipAdd:hover {
  color: var(--ink);
  border-color: rgba(var(--brand-rgb), .5) !important;
}

.srcNewSheet {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.srcNewSheet input {
  border: 1px solid rgba(var(--brand-rgb), .5);
  width: 150px;
  height: 30px;
  font: inherit;
  background: var(--c-white);
  color: var(--ink);
  border-radius: 999px;
  padding: 0 9px;
  font-size: 13px;
}

.srcNewSheet input:focus {
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
  outline: 0;
}

.srcNewSheetGo {
  background: var(--ink, var(--c-grey-07));
  height: 30px;
  color: var(--c-white);
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
}

.srcNewSheetGo:disabled {
  opacity: .45;
  cursor: default;
}

.lpChipShared {
  background: rgba(var(--c-orange-46-rgb), .18);
  width: 16px;
  height: 16px;
  color: var(--c-orange-27);
  cursor: pointer;
  border-radius: 5px;
  place-items: center;
  margin-left: 6px;
  font-size: 10px;
  line-height: 1;
  display: inline-grid;
}

.lpChipShared:hover {
  background: rgba(var(--c-orange-46-rgb), .34);
}

/* [project]/app/styles/parts/17-agent-stats-summary.css [app-client] (css) */
.asWarnNum {
  color: var(--c-orange-27);
}

.asSummary {
  border: 1px solid rgba(var(--brand-rgb), .22);
  background: rgba(var(--brand-rgb), .05);
  border-radius: 14px;
  margin-bottom: 20px;
  padding: 16px 18px;
}

.asSummaryHead {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  display: flex;
}

.asSummaryTitle {
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.asSummaryTag {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
}

.asSummaryDay {
  color: var(--c-warm-31);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  overflow: hidden;
}

.asSummaryNav {
  flex: none;
  gap: 4px;
  display: flex;
}

.asStep {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  width: 26px;
  height: 26px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 7px;
  font-size: 15px;
  line-height: 1;
  transition: background-color .15s, opacity .15s;
}

.asStep:hover:not(:disabled) {
  background: rgba(var(--ink-deep-rgb), .05);
}

.asStep:disabled {
  opacity: .35;
  cursor: default;
}

.asStepRefresh {
  font-size: 13px;
}

.asSummaryHeadline {
  color: var(--ink);
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.4;
}

.asSummaryText {
  color: var(--c-warm-22);
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
}

.asObjLabel {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.asObjections {
  margin-bottom: 12px;
}

.asObj {
  align-items: baseline;
  gap: 9px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
}

.asObjCount {
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  color: var(--brand);
  flex: none;
  font-weight: 700;
}

.asObjTopic {
  color: var(--ink);
  font-weight: 550;
}

.asObjNote {
  color: var(--c-warm-41);
  font-weight: 400;
}

.asWorked ul {
  color: var(--c-warm-22);
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.asWorked li {
  margin-bottom: 3px;
}

.asStatBtn {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.asStatBtn:hover {
  border-color: rgba(var(--brand-rgb), .4);
  background: rgba(var(--brand-rgb), .04);
}

.asStatBtn.on {
  border-color: rgba(var(--brand-rgb), .65);
  background: rgba(var(--brand-rgb), .07);
}

.asDispoBtn {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  margin: 0 -8px;
  padding: 6px 8px;
  transition: background-color .15s;
  display: block;
}

.asDispoBtn:hover {
  background: rgba(var(--ink-deep-rgb), .04);
}

.asDispoBtn.on {
  background: rgba(var(--brand-rgb), .08);
}

.asPeople {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .1);
  margin-top: 22px;
  padding-top: 18px;
}

.asPeopleHead {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  display: flex;
}

.asPeopleHead h4 {
  margin: 0;
}

.asPeopleClose {
  flex: none;
}

.asPeopleList {
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  border-radius: 11px;
  max-height: 320px;
  overflow-y: auto;
}

.asPerson {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .06);
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  display: flex;
}

.asPerson:last-child {
  border-bottom: 0;
}

.asPersonName {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 140px;
  min-width: 0;
  font-weight: 550;
  overflow: hidden;
}

.asPersonPhone {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.asPersonStage {
  background: rgba(var(--ink-deep-rgb), .06);
  border-radius: 999px;
  flex: none;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 550;
}

.asPersonOut {
  color: var(--c-warm-31);
  text-align: right;
  flex: 0 0 110px;
}

.asPersonWhen {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

@media (max-width: 720px) {
  .asPersonPhone, .asPersonStage {
    display: none;
  }
}

.dupeBadge {
  background: var(--c-red-96);
  color: var(--c-red-44);
  letter-spacing: .06em;
  vertical-align: middle;
  border-radius: 5px;
  margin-left: 7px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-block;
}

.lpDots {
  min-width: 40px;
  padding: 0 10px;
  font-size: 18px;
  line-height: 1;
}

/* [project]/app/styles/parts/18-duplicates.css [app-client] (css) */
.dupScope {
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  display: flex;
}

.dupScopeOpt {
  text-align: left;
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  font: inherit;
  cursor: pointer;
  border-radius: 12px;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  transition: border-color .15s, background-color .15s;
  display: flex;
}

.dupScopeOpt:hover:not(:disabled) {
  border-color: rgba(var(--brand-rgb), .4);
}

.dupScopeOpt.on {
  border-color: rgba(var(--brand-rgb), .65);
  background: rgba(var(--brand-rgb), .05);
}

.dupScopeOpt:disabled {
  opacity: .5;
  cursor: default;
}

.dupScopeRadio {
  border: 2px solid rgba(var(--ink-deep-rgb), .25);
  border-radius: 50%;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  transition: border-color .15s;
}

.dupScopeOpt.on .dupScopeRadio {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 3px var(--brand);
}

.dupScopeOpt strong {
  color: var(--ink);
  font-size: 14px;
  display: block;
}

.dupScopeSub {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: 12.5px;
  display: block;
}

.dupSheetPick {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px 30px;
  display: flex;
}

.dupSheetChip {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  font-size: 13px;
  display: inline-flex;
}

.dupSheetCount {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dupResults {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.dupEmpty {
  text-align: center;
  padding: 30px 12px;
}

.dupEmpty h3 {
  margin: 0 0 6px;
}

.dupEmpty p {
  color: var(--text-muted);
  margin: 0 0 16px;
}

.dupBar {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .08);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 12px;
  display: flex;
}

.dupBarLeft {
  align-items: center;
  gap: 16px;
  display: flex;
}

.dupCount {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.dupLink {
  font: inherit;
  color: var(--brand);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.dupLink:hover {
  text-decoration: underline;
}

.dupGroups {
  flex-direction: column;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 8px;
  display: flex;
}

.dupGroup {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  border-radius: 12px;
  overflow: hidden;
}

.dupGroupHead {
  background: rgba(var(--ink-deep-rgb), .03);
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .08);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  display: flex;
}

.dupMatch {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
}

.dupRow {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  display: flex;
}

.dupRow:last-child {
  border-bottom: 0;
}

.dupRow.keeper {
  background: rgba(var(--success-rgb), .045);
}

.dupRow.picked {
  background: rgba(var(--brand-rgb), .06);
}

.dupCheck {
  flex: none;
  padding-top: 2px;
}

.dupMain {
  flex: 1;
  min-width: 0;
}

.dupNameRow {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.dupName {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.dupKeepTag {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--success-strong);
  background: rgba(var(--success-rgb), .12);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
}

.dupContact {
  color: var(--c-warm-41);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 2px 0 6px;
  font-size: 12.5px;
  overflow: hidden;
}

.dupSigs {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.dupSig {
  background: rgba(var(--ink-deep-rgb), .05);
  color: var(--c-warm-31);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 550;
}

.dupSig.s-value {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-deep);
}

.dupSig.s-calls {
  background: rgba(var(--brand-rgb), .1);
  color: var(--brand-strong);
}

.dupSigNone {
  color: var(--text-dim);
  font-size: 11.5px;
  font-style: italic;
}

.dupSide {
  flex-direction: column;
  flex: none;
  align-items: flex-end;
  gap: 8px;
  display: flex;
}

.dupWhen {
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 12px;
}

.dupRowBtns {
  gap: 6px;
  display: flex;
}

.dupMini {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-white);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 550;
}

.dupMini:hover:not(:disabled) {
  background: rgba(var(--ink-deep-rgb), .05);
}

.dupActionBar {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  display: flex;
}

.dupSelCount {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.dupActionBtns {
  gap: 8px;
  display: flex;
}

@media (max-width: 720px) {
  .dupSide {
    align-items: flex-start;
  }
}

.ldHistFilters {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  display: flex;
}

/* [project]/app/styles/parts/19-timeline-and-editor-toggles.css [app-client] (css) */
.csHistDot.ev {
  background: var(--text-dim);
}

.csHistDot.ev-stage {
  background: var(--brand);
}

.csHistDot.ev-email {
  background: var(--c-orange-46);
}

.csHistDot.ev-sms {
  background: var(--c-red-59);
}

.csHistDot.ev-created {
  background: var(--success);
}

.csHistDot.ev-callback {
  background: var(--brand-accent);
}

.csHistDot.ev-field {
  background: var(--c-green-40);
}

.csHistDot.ev-sheet {
  background: var(--c-grey-40);
}

.formBadges {
  flex: none;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.formLive {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-deep);
  letter-spacing: .02em;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  font-size: 11px;
  font-weight: 650;
  display: inline-flex;
}

.formLiveDot {
  background: var(--success);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 2s ease-in-out infinite formLivePulse;
}

@keyframes formLivePulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .formLiveDot {
    animation: none;
  }
}

.metaTip {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-radius: 11px;
  gap: 11px;
  margin-top: 18px;
  padding: 13px 14px;
  display: flex;
}

.metaTip.compact {
  margin-top: 14px;
}

.metaTipIcon {
  background: var(--warning);
  width: 19px;
  height: 19px;
  color: var(--c-white);
  border-radius: 50%;
  flex: none;
  place-items: center;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.metaTipBody {
  color: var(--notice-text);
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.55;
}

.metaTipBody strong {
  color: var(--ink);
  font-weight: 650;
}

.metaFoot {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .08);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  display: flex;
}

.metaFoot .whHint {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.previewFrame {
  background: var(--c-white);
  border: 0;
  width: 100%;
  height: 420px;
  display: block;
}

.fmtRow {
  background: rgba(var(--ink-deep-rgb), .06);
  border-radius: 8px;
  flex: none;
  gap: 2px;
  padding: 2px;
  display: inline-flex;
}

.fmtBtn {
  color: rgba(var(--ink-deep-rgb), .6);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 550;
  transition: background-color .15s, color .15s;
}

.fmtBtn:hover {
  color: var(--ink);
}

.fmtBtn.on {
  background: var(--c-white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(var(--ink-deep-rgb), .12);
}

.codeArea {
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
}

.segRow {
  background: rgba(var(--ink-deep-rgb), .06);
  border-radius: 10px;
  gap: 4px;
  margin-bottom: 10px;
  padding: 3px;
  display: inline-flex;
}

.segBtn {
  color: rgba(var(--ink-deep-rgb), .62);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 550;
  transition: background-color .15s, color .15s;
}

.segBtn:hover {
  color: var(--ink);
}

.segBtn.on {
  background: var(--c-white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(var(--ink-deep-rgb), .12);
}

.mateList {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  border-radius: 10px;
  max-height: 210px;
  padding: 4px;
  overflow-y: auto;
}

.mateRow {
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  font-size: 13px;
  display: flex;
}

.mateRow:hover {
  background: rgba(var(--ink-deep-rgb), .04);
}

.mateRow input {
  margin: 0;
}

.mateName {
  font-weight: 550;
}

.mateEmail {
  color: rgba(var(--ink-deep-rgb), .55);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.matePending {
  color: var(--c-orange-27);
  background: rgba(var(--c-orange-46-rgb), .14);
  border-radius: 999px;
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 550;
}

.whVarBtn {
  cursor: pointer;
  font: inherit;
  border: 0;
  transition: background-color .15s;
}

.whVarBtn:hover {
  background: rgba(var(--brand-rgb), .14);
}

.cfgField {
  margin-bottom: 14px;
  display: block;
}

.cfgField > span {
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 550;
  display: block;
}

.cfgField input {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  width: 100%;
  height: 42px;
  color: var(--ink);
  border-radius: 10px;
  outline: none;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.cfgField input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
}

.cfgActions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  display: flex;
}

/* [project]/app/styles/parts/20-webhook-config.css [app-client] (css) */
.metaModal.metaModalWide {
  width: min(1040px, 100%);
  max-height: 90vh;
}

.whCfg {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0 28px;
  display: grid;
}

.whCfg > .whSection {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  padding: 18px 0;
}

.whRequest {
  grid-column: 1 / -1;
  border-top: 0 !important;
  padding-top: 0 !important;
}

.whPayload {
  grid-area: 2 / 2 / span 3;
}

@media (max-width: 900px) {
  .whCfg {
    grid-template-columns: 1fr;
  }

  .whPayload {
    grid-area: auto / 1;
  }
}

.whSection h4 {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.whRow {
  align-items: center;
  gap: 8px;
  display: flex;
}

.whRow > .whInput, .whRow > .whField {
  flex: 1;
  min-width: 0;
}

.whMt {
  margin-top: 8px;
}

.whInput, .whArea {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  width: 100%;
  height: 42px;
  color: var(--ink);
  border-radius: 10px;
  outline: none;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.whArea {
  resize: vertical;
  height: auto;
  padding: 10px 12px;
  line-height: 1.5;
}

.whInput:focus, .whArea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
}

.whMono {
  font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
  font-size: 13px;
}

.whField {
  display: block;
}

.whField > span {
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 550;
  display: block;
}

.whHint {
  color: var(--text-muted);
  margin-top: 6px;
  font-size: 12.5px;
}

.whHint code {
  background: var(--surface-muted);
  border-radius: 5px;
  padding: 1px 5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}

.whDel {
  width: 34px;
  height: 34px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  flex: none;
  font-size: 13px;
  transition: background .15s, color .15s;
}

.whDel:hover {
  background: rgba(var(--c-red-59-rgb), .1);
  color: var(--c-red-59);
}

.whAdd {
  border: 1px dashed rgba(var(--ink-deep-rgb), .18);
  color: var(--ink);
  cursor: pointer;
  background: none;
  border-radius: 9px;
  margin-top: 10px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 550;
  transition: border-color .15s, background .15s;
}

.whAdd:hover {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .06);
}

.whVars {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  display: flex;
}

.whVarsLabel {
  color: var(--text-muted);
  font-size: 12.5px;
}

.whVar {
  background: var(--surface-muted);
  color: var(--c-warm-23);
  border-radius: 6px;
  padding: 3px 7px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* [project]/app/styles/parts/21-recently-closed.css [app-client] (css) */
.pdClosed {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  margin-top: 20px;
  padding-top: 16px;
}

.pdClosed .twH4 {
  margin-top: 0 !important;
}

.pdClosedEmpty {
  font-size: 12.5px;
}

.pdClosedList {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.pdClosedRow {
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  display: flex;
}

.pdClosedTick {
  background: rgba(var(--success-rgb), .14);
  width: 18px;
  height: 18px;
  color: var(--success-strong);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  display: grid;
}

.pdClosedMain {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.pdClosedLead {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
}

.pdClosedBy {
  color: var(--text-muted);
  font-size: 11.5px;
}

/* [project]/app/styles/parts/22-members.css [app-client] (css) */
.mbPage {
  flex-direction: column;
  gap: 18px;
  display: flex;
}

.mbTop {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  display: flex;
}

.mbTopStats {
  color: var(--text-muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-size: 13.5px;
  display: flex;
}

.mbTopStat {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.mbTopStat strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
}

.mbTopPending strong {
  color: var(--warning-strong);
}

.mbErr {
  margin: 0;
}

.mbList {
  --mb-cols: 34px minmax(150px, 1.4fr) 78px 168px 118px 116px 74px;
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.mbCols, .mbRow {
  grid-template-columns: var(--mb-cols);
  align-items: center;
  gap: 12px;
  display: grid;
}

.mbCols {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 14px 2px;
  font-size: 10.5px;
  font-weight: 700;
}

.mbCols > span {
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: inline-flex;
}

.mbRow {
  background: var(--c-white);
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 12px;
  padding: 11px 14px;
}

.mbRowPending {
  background: var(--surface-sunken);
  border-style: dashed;
}

.mbAvatar {
  background: var(--ink);
  width: 34px;
  height: 34px;
  color: var(--c-white);
  border-radius: 999px;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.mbAvatar.pending {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.mbWho {
  min-width: 0;
}

.mbName {
  color: var(--ink);
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  display: flex;
}

.mbNameBtn {
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  overflow: hidden;
}

.mbNameBtn:hover {
  text-decoration: underline;
}

.mbEmail {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.mbYou {
  background: var(--surface-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 5px;
  flex: none;
  padding: 1px 5px;
  font-size: 9.5px;
  font-weight: 700;
}

.mbDot {
  background: var(--success);
  border-radius: 999px;
  flex: none;
  width: 6px;
  height: 6px;
}

.mbDot.mbDotCall {
  background: var(--warning);
}

.mbLeads {
  font-variant-numeric: tabular-nums;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.mbLeads strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.mbLeadsL {
  color: var(--text-muted);
  font-size: 11.5px;
}

.mbPending {
  color: var(--text-muted);
  font-size: 12px;
}

.mbNumber, .mbRole, .mbFlows {
  min-width: 0;
}

.mbPlain {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  display: block;
  overflow: hidden;
}

.mbRolePill {
  background: var(--surface-muted);
  color: var(--text-secondary);
  text-transform: capitalize;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-block;
}

.mbFlowsBtn {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 12.5px;
  overflow: hidden;
}

.mbFlowsBtn:hover {
  background: var(--surface-muted);
}

.mbActions {
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.mbCopy {
  padding: 5px 9px;
  font-size: 12px;
}

.mbRemove {
  width: 26px;
  height: 26px;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  flex: none;
  font-size: 12px;
}

.mbRemove:hover {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger);
}

.mbLeaverList {
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.mbLeaverOpt {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  cursor: pointer;
  text-align: left;
  border-radius: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 11px 13px;
  display: flex;
}

.mbLeaverOpt:hover {
  border-color: var(--brand);
  background: var(--surface-sunken);
}

.mbLeaverName {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.mbLeaverSub {
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 1040px) {
  .mbCols {
    display: none;
  }

  .mbRow {
    grid-template-columns: 34px 1fr;
    row-gap: 10px;
    padding: 14px;
  }

  .mbLeads, .mbNumber, .mbRole, .mbFlows, .mbActions {
    grid-column: 2;
  }

  .mbNumber:before, .mbRole:before, .mbFlows:before {
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    display: block;
  }

  .mbNumber:before {
    content: "Calls from";
  }

  .mbRole:before {
    content: "Role";
  }

  .mbFlows:before {
    content: "Flows";
  }

  .mbActions {
    justify-content: flex-start;
  }
}

/* [project]/app/styles/parts/23-missed-calls.css [app-client] (css) */
.pdMissed {
  border: 1px solid rgba(var(--danger-rgb), .28);
  background: rgba(var(--danger-rgb), .08);
  height: 34px;
  color: var(--danger-strong);
  cursor: pointer;
  border-radius: 999px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
}

.pdMissed:hover {
  background: rgba(var(--danger-rgb), .16);
}

.mcList {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.mcRow {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--c-white);
  border-radius: 12px;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  display: flex;
}

.mcDot {
  background: var(--danger);
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
}

.mcDot.vm {
  background: var(--c-blue-52b);
}

.mcMain {
  flex: 1;
  min-width: 0;
}

.mcName {
  color: var(--ink);
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
}

.mcVmTag {
  background: rgba(var(--c-blue-52b-rgb), .14);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--c-blue-39);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
}

.mcSub {
  color: var(--text-muted);
  font-size: 12.5px;
}

.mcActions {
  flex: none;
  align-items: center;
  gap: 8px;
  display: flex;
}

/* [project]/app/styles/parts/24-dialpad.css [app-client] (css) */
.csNew {
  border: 1px solid rgba(var(--brand-rgb), .25);
  background: rgba(var(--brand-rgb), .05);
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 13px 14px;
}

.csNewHead {
  color: var(--c-blue-39b);
  margin-bottom: 9px;
  font-size: 13px;
}

.csNewHead strong {
  color: var(--brand-deep);
  font-weight: 650;
}

.dpad {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.dpadHead {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  display: flex;
}

.dpadTyped {
  min-width: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
}

.dpadHint {
  letter-spacing: 0;
  color: var(--c-warm-71);
  font-size: 13px;
  font-weight: 400;
}

.dpadClose {
  width: 26px;
  height: 26px;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  flex: none;
  font-size: 12px;
}

.dpadClose:hover {
  background: rgba(var(--ink-deep-rgb), .06);
  color: var(--ink);
}

.dpadKeys {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}

.dpadKey {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  cursor: pointer;
  border-radius: 11px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  height: 52px;
  font-family: inherit;
  transition: background .1s, transform 60ms;
  display: flex;
}

.dpadKey:hover {
  background: var(--c-warm-95b);
}

.dpadKey:active {
  background: var(--c-warm-91);
  transform: scale(.96);
}

.dpadNum {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
}

.dpadSub {
  letter-spacing: .08em;
  color: var(--c-warm-71);
  font-size: 9px;
  font-weight: 600;
}

.dpadFoot {
  text-align: center;
}

/* [project]/app/styles/parts/25-pip-call.css [app-client] (css) */
.pipBody {
  background: var(--c-grey-09b);
  color: var(--c-white);
  font-family: var(--font-onest), system-ui, -apple-system, sans-serif;
  margin: 0;
  overflow: hidden;
}

.pipBody * {
  font-family: inherit;
}

.pip {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding: 14px;
  display: flex;
}

.pipTop {
  align-items: center;
  gap: 10px;
  display: flex;
}

.pipPulse {
  background: var(--success);
  border-radius: 50%;
  flex: none;
  width: 10px;
  height: 10px;
  animation: 1.4s ease-out infinite icPulse;
}

.pip.dialing .pipPulse {
  background: var(--c-orange-57);
}

.pip.wrapup .pipPulse {
  background: var(--text-muted);
  animation: none;
}

.pipWho {
  min-width: 0;
}

.pipName {
  color: var(--c-white);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 650;
  overflow: hidden;
}

.pipTime {
  color: var(--c-warm-64);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

.pipBtns {
  gap: 6px;
  display: flex;
}

.pipBtn {
  background: rgba(var(--c-white-rgb), .12);
  height: 36px;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}

.pipBtn:hover:not(:disabled) {
  background: rgba(var(--c-white-rgb), .22);
}

.pipBtn:disabled {
  opacity: .4;
  cursor: default;
}

.pipBtn.on {
  background: var(--warning);
}

.pipBtn.hang {
  background: var(--danger);
}

.pipBtn.hang:hover {
  background: var(--danger-strong);
}

.pipBtn.done {
  background: var(--success);
}

.pipBtn.done:hover {
  background: var(--success-strong);
}

/* [project]/app/styles/parts/26-call-session-list.css [app-client] (css) */
.csHeadBtns {
  align-items: center;
  gap: 4px;
  display: flex;
}

.csBtnAdd {
  color: var(--text-secondary);
  border-style: dashed !important;
}

.csBtnAdd:hover {
  color: var(--ink);
  border-style: solid !important;
}

.csAddEmail {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.csAddEmailIn {
  width: 100%;
  font-size: 13px;
}

.csAddEmailRow {
  gap: 6px;
  display: flex;
}

.csAddEmailBtn {
  flex: 1;
  justify-content: center;
  padding: 8px 10px;
  font-size: 12.5px;
}

.csLocked {
  border: 1px dashed rgba(var(--ink-deep-rgb), .18);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  text-align: center;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 14px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
}

.csLockedIcon {
  font-size: 18px;
}

.csLockedName {
  color: var(--ink);
  font-weight: 700;
}

.csLockedSkip {
  margin-top: 8px;
}

.csWarn {
  text-align: center;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 14px;
  line-height: 1.5;
  display: flex;
}

.csWarn.recent, .csWarn.handled {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
}

.csWarn.recent .csWarnIcon {
  color: var(--warning);
}

.csWarn.handled .csWarnIcon {
  color: var(--success);
}

.csWarnIcon {
  font-size: 22px;
  line-height: 1;
}

.csWarnText {
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  display: flex;
}

.csWarnText strong {
  color: var(--ink);
  font-size: 14px;
}

.csWarnBtns {
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  display: flex;
}

.csWarnBtns .csBtn {
  flex: 1;
  justify-content: center;
}

.csWarnGo {
  background: var(--c-orange-48);
  border-color: var(--c-orange-48);
  color: var(--c-white);
}

.csWarnGo:hover {
  background: var(--c-orange-40);
}

.csNav {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--surface-sunken);
  border-radius: 10px;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
  padding: 3px;
  display: flex;
}

.csNavBtn {
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  font-size: 17px;
  line-height: 1;
  transition: background .14s;
}

.csNavBtn:hover:not(:disabled) {
  background: var(--c-white);
  color: var(--ink);
}

.csNavBtn:disabled {
  opacity: .3;
  cursor: default;
}

.csNavPos {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 650;
}

.csNavPos span {
  color: var(--text-dim);
  font-weight: 500;
}

/* [project]/app/styles/parts/27-mini-call.css [app-client] (css) */
.pdHost[hidden] {
  display: none;
}

.miniCall {
  z-index: 550;
  background: var(--c-grey-09b);
  box-shadow: 0 16px 40px rgba(var(--c-black-rgb), .34);
  border-radius: 14px;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 12px;
  animation: .24s cubic-bezier(.2, .7, .4, 1) both icIn;
  display: flex;
  position: fixed;
  bottom: 22px;
  right: 22px;
}

.miniMain {
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 2px;
  font-family: inherit;
  display: flex;
}

.miniMain:hover {
  background: rgba(var(--c-white-rgb), .07);
}

.miniPulse {
  background: var(--success);
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
  animation: 1.4s ease-out infinite icPulse;
}

.miniCall.dialing .miniPulse {
  background: var(--c-orange-57);
}

.miniCall.wrapup .miniPulse {
  background: var(--text-muted);
  animation: none;
}

.miniText {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.miniName {
  color: var(--c-white);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
  font-size: 13.5px;
  font-weight: 650;
  overflow: hidden;
}

.miniTime {
  color: var(--c-warm-64);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.miniBtn {
  background: rgba(var(--c-white-rgb), .1);
  width: 36px;
  height: 36px;
  color: var(--c-orange-91);
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  place-items: center;
  transition: background .14s, color .14s;
  display: grid;
}

.miniBtn svg {
  width: 17px;
  height: 17px;
}

.miniBtn:hover:not(:disabled) {
  background: rgba(var(--c-white-rgb), .22);
  color: var(--c-white);
}

.miniBtn.on {
  background: var(--warning);
  color: var(--c-white);
}

.miniBtn:disabled {
  opacity: .35;
  cursor: default;
}

.miniHang {
  white-space: nowrap;
  background: var(--danger);
  height: 36px;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
}

.miniHang:hover {
  background: var(--danger-strong);
}

.miniHang.miniWrap {
  background: var(--success);
}

.miniHang.miniWrap:hover {
  background: var(--success-strong);
}

/* [project]/app/styles/parts/28-incoming-call.css [app-client] (css) */
.icWrap {
  z-index: 500;
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.icCard {
  background: var(--c-grey-09b);
  color: var(--c-white);
  box-shadow: 0 18px 44px rgba(var(--c-black-rgb), .36);
  border-radius: 14px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 18px;
  animation: .24s cubic-bezier(.2, .7, .4, 1) both icIn;
  display: flex;
}

@keyframes icIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}

.icPulse {
  background: var(--success);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: 1.2s ease-out infinite icPulse;
}

@keyframes icPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--success-rgb), .6);
  }

  70% {
    box-shadow: 0 0 0 9px rgba(var(--success-rgb), 0);
  }
}

.icMain {
  min-width: 200px;
}

.icLabel {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--success);
  font-size: 10.5px;
  font-weight: 700;
}

.icName {
  font-size: 17px;
  font-weight: 650;
}

.icSub {
  color: var(--c-warm-64);
  font-size: 12px;
}

.icActions {
  gap: 8px;
  display: flex;
}

.icAccept, .icReject {
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  height: 38px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
}

.icAccept {
  background: var(--success);
  color: var(--c-white);
}

.icAccept:hover {
  background: var(--success-strong);
}

.icReject {
  background: rgba(var(--c-white-rgb), .12);
  color: var(--c-orange-91);
}

.icReject:hover {
  background: rgba(var(--danger-rgb), .85);
  color: var(--c-white);
}

.csHistIn {
  background: rgba(var(--success-rgb), .14);
  color: var(--success-strong);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.ldAudio {
  width: 100%;
  height: 32px;
  margin-top: 6px;
}

.icLast {
  color: var(--brand-deep);
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
}

.pdUnreach {
  z-index: 240;
  border: 1px solid var(--notice-border);
  background: var(--card);
  max-width: 460px;
  box-shadow: 0 8px 24px rgba(var(--c-black-rgb), .14);
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
  position: fixed;
  bottom: 16px;
  left: 16px;
}

.pdUnreachDot {
  background: var(--warning-strong);
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
}

.pdUnreachText {
  min-width: 0;
  color: var(--text-secondary);
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
}

.pdUnreachText strong {
  color: var(--ink);
}

.pdUnreachBtn {
  border: 1px solid rgba(var(--ink-deep-rgb), .2);
  background: var(--card);
  height: 32px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  flex: none;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.pdUnreachBtn:hover {
  border-color: var(--ink);
}

/* [project]/app/styles/parts/29-recording-player.css [app-client] (css) */
.recPlayer {
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  background: var(--c-white);
  border-radius: 11px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 10px;
  display: flex;
}

.recPlayerErr {
  color: var(--c-red-42b);
  justify-content: center;
  font-size: 12.5px;
}

.recPlay {
  background: var(--brand);
  width: 34px;
  height: 34px;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  flex: none;
  place-items: center;
  transition: transform .1s, background-color .15s;
  display: grid;
}

.recPlay:hover {
  background: var(--brand-strong);
}

.recPlay:active {
  transform: scale(.93);
}

.recPlay svg {
  width: 16px;
  height: 16px;
}

.recSpin {
  border: 2px solid rgba(var(--c-white-rgb), .4);
  border-top-color: var(--c-white);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: .7s linear infinite recSpin;
}

@keyframes recSpin {
  to {
    transform: rotate(360deg);
  }
}

.recSkip {
  width: 30px;
  height: 30px;
  color: var(--c-warm-31);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  flex: none;
  place-items: center;
  transition: background-color .15s, color .15s;
  display: grid;
}

.recSkip:hover {
  background: rgba(var(--ink-deep-rgb), .06);
  color: var(--ink);
}

.recSkip svg {
  width: 18px;
  height: 18px;
}

.recScrub {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.recRange {
  appearance: none;
  background: linear-gradient(to right,
    var(--brand) 0%,
    var(--brand) var(--pct, 0%),
    rgba(var(--ink-deep-rgb), .12) var(--pct, 0%),
    rgba(var(--ink-deep-rgb), .12) 100%);
  cursor: pointer;
  border-radius: 999px;
  outline: none;
  width: 100%;
  height: 6px;
}

.recRange::-webkit-slider-thumb {
  appearance: none;
  background: var(--brand);
  border: 2px solid var(--c-white);
  width: 14px;
  height: 14px;
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb), .3);
  cursor: pointer;
  border-radius: 50%;
}

.recRange::-moz-range-thumb {
  background: var(--brand);
  border: 2px solid var(--c-white);
  width: 14px;
  height: 14px;
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb), .3);
  cursor: pointer;
  border-radius: 50%;
}

.recTimes {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  justify-content: space-between;
  font-size: 11px;
  display: flex;
}

.recRate {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  min-width: 34px;
  height: 26px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--c-warm-31);
  cursor: pointer;
  border-radius: 7px;
  flex: none;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 650;
  transition: background-color .15s;
}

.recRate:hover {
  background: rgba(var(--ink-deep-rgb), .05);
  color: var(--ink);
}

/* [project]/app/styles/parts/30-csv-import.css [app-client] (css) */
.impDrop {
  border: 2px dashed rgba(var(--ink-deep-rgb), .14);
  background: var(--surface-sunken);
  text-align: center;
  cursor: pointer;
  border-radius: 16px;
  padding: 42px 20px;
  transition: border-color .15s, background .15s;
}

.impDrop:hover {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .03);
}

.impDropIcon {
  background: var(--c-white);
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  width: 40px;
  height: 40px;
  color: var(--brand);
  border-radius: 50%;
  place-items: center;
  margin: 0 auto 12px;
  font-size: 18px;
  display: grid;
}

.impDropTitle {
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
}

.impDropSub {
  color: var(--text-muted);
  margin-top: 3px;
  font-size: 13px;
}

.impHint {
  text-align: center;
  margin-top: 14px;
}

.impBar {
  color: var(--text-secondary);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  display: flex;
}

.impBar .metaMuted {
  align-items: center;
  display: inline-flex;
}

.impMap {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 12px;
  max-height: 44vh;
  overflow-y: auto;
}

.impRow {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

.impRow:last-child {
  border-bottom: 0;
}

.impCol {
  flex: 1;
  min-width: 0;
}

.impColName {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
}

.impColSample {
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.impArrow {
  color: var(--c-warm-77);
  flex: none;
}

.sel.impSelect {
  flex: 0 0 200px;
  width: 200px;
}

/* [project]/app/styles/parts/31-csv-import-mapping.css [app-client] (css) */
.impReviewH {
  margin: 0 !important;
}

.impSearch {
  width: 160px;
  height: 32px;
  font-size: 13px;
}

.impRows {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 12px;
  max-height: 38vh;
  overflow-y: auto;
}

.impNoRows {
  text-align: center;
  padding: 24px;
}

.impLead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  display: flex;
}

.impLead:last-child {
  border-bottom: 0;
}

.impLeadMain {
  flex: 1;
  min-width: 0;
}

.impLead.out {
  background: var(--surface-sunken);
}

.impLead.out .impCardName, .impLead.out .impCardSub {
  color: var(--c-warm-77);
  text-decoration: line-through;
}

.impLead.bad .impCardSub {
  color: var(--warning-strong);
}

.impRowX {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  min-width: 30px;
  height: 28px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  flex: none;
  padding: 0 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: border-color .14s, background .14s, color .14s;
}

.impRowX:hover {
  border-color: var(--danger);
  background: rgba(var(--danger-rgb), .07);
  color: var(--danger-strong);
}

.impLead.out .impRowX {
  border-color: rgba(var(--ink-deep-rgb), .2);
  color: var(--ink);
}

.impLead.out .impRowX:hover {
  border-color: var(--success);
  background: rgba(var(--success-rgb), .08);
  color: var(--success-strong);
}

.impPreview {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.impCard {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--surface-sunken);
  border-radius: 10px;
  padding: 10px 12px;
}

.impCardName {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.impCardSub {
  color: var(--text-muted);
  font-size: 12px;
}

.impCardExtra {
  color: var(--text-dim);
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
  font-size: 11.5px;
  display: flex;
}

.impCardExtra b {
  color: var(--c-warm-40);
  font-weight: 600;
}

.impCount {
  background: rgba(var(--success-rgb), .08);
  color: var(--c-green-26c);
  border-radius: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 13.5px;
}

.impCount strong {
  font-size: 17px;
  font-weight: 700;
}

.impSkip {
  color: var(--warning-strong);
}

.impDone {
  text-align: center;
  padding: 30px 0 20px;
}

.impDoneTick {
  background: rgba(var(--success-rgb), .12);
  width: 52px;
  height: 52px;
  color: var(--success);
  border-radius: 50%;
  place-items: center;
  margin: 0 auto 14px;
  font-size: 24px;
  font-weight: 700;
  display: grid;
}

.impDoneTitle {
  color: var(--ink);
  font-size: 19px;
  font-weight: 650;
}

.impDoneSub {
  color: var(--text-muted);
  margin-top: 5px;
  font-size: 13.5px;
}

/* [project]/app/styles/parts/32-info-tooltip.css [app-client] (css) */
.infoBtn {
  background: rgba(var(--ink-deep-rgb), .1);
  width: 15px;
  height: 15px;
  color: var(--c-warm-40);
  cursor: help;
  vertical-align: middle;
  border: 0;
  border-radius: 50%;
  place-items: center;
  margin-left: 6px;
  padding: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  transition: background .14s, color .14s;
  display: inline-grid;
}

.infoBtn:hover, .infoBtn:focus-visible {
  background: var(--ink-deep);
  color: var(--c-white);
  outline: none;
}

.infoTip {
  z-index: 400;
  background: var(--c-grey-09b);
  color: var(--c-orange-91);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 12px 34px rgba(var(--c-black-rgb), .3);
  pointer-events: none;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  animation: .13s both infoIn;
  position: fixed;
}

@keyframes infoIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.infoTip.below {
  animation-name: infoInDown;
}

@keyframes infoInDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.infoTip strong {
  color: var(--c-white);
  font-weight: 650;
}

.infoTip code {
  background: rgba(var(--c-white-rgb), .12);
  border-radius: 4px;
  padding: 1px 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.pdListsLabel, .lpSheetsLabel {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  align-items: center;
  margin-right: 4px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.seNote {
  margin-top: 14px;
}

/* [project]/app/styles/parts/33-kanban.css [app-client] (css) */
.lpView {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  border-radius: 10px;
  gap: 2px;
  padding: 2px;
  display: flex;
}

.lpViewBtn {
  width: 32px;
  height: 30px;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  place-items: center;
  transition: background .14s, color .14s;
  display: grid;
}

.lpViewBtn svg {
  width: 16px;
  height: 16px;
}

.lpViewBtn:hover {
  color: var(--ink);
}

.lpViewBtn.on {
  background: var(--ink-deep);
  color: var(--c-white);
}

.leadsPage.board {
  flex-direction: column;
  height: calc(100vh - 4rem);
  display: flex;
  overflow: hidden;
}

/* [project]/app/styles/parts/34-kanban-columns.css [app-client] (css) */
.lpBoardWrap {
  flex: 1;
  min-height: 0;
  margin-top: 4px;
  display: flex;
}

.kbBoard {
  flex: 1;
  gap: 12px;
  min-height: 0;
  padding-bottom: 8px;
  display: flex;
  overflow: auto hidden;
}

.kbCol {
  flex-direction: column;
  flex: 0 0 300px;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.kbColHead {
  border-radius: 10px;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 11px 14px;
  display: flex;
}

.kbColHeadMain {
  flex: 1;
  min-width: 0;
}

.kbColName {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
}

.kbColEdit {
  width: 26px;
  height: 26px;
  color: var(--c-warm-40);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: 0;
  border-radius: 7px;
  flex: none;
  font-size: 15px;
  line-height: 1;
  transition: opacity .14s, background .14s;
}

.kbCol:hover .kbColEdit {
  opacity: 1;
}

.kbColEdit:hover {
  background: rgba(var(--ink-deep-rgb), .08);
}

.kbAddCol {
  border: 1px dashed rgba(var(--ink-deep-rgb), .16);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 10px;
  flex: 0 0 190px;
  align-self: flex-start;
  padding: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .14s, color .14s, background .14s;
}

.kbAddCol:hover {
  border-color: rgba(var(--ink-deep-rgb), .35);
  background: rgba(var(--ink-deep-rgb), .02);
  color: var(--ink);
}

.seTints {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.seTint {
  cursor: pointer;
  width: 34px;
  height: 34px;
  box-shadow: inset 0 0 0 1px rgba(var(--ink-deep-rgb), .08);
  border: 2px solid #0000;
  border-radius: 9px;
}

.seTint.on {
  border-color: var(--ink-deep);
}

.kbColFold {
  width: 22px;
  height: 22px;
  color: var(--c-warm-40);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  flex: none;
  place-items: center;
  transition: opacity .14s, background .14s;
  display: grid;
}

.kbCol:hover .kbColFold, .kbColFold:focus-visible {
  opacity: 1;
}

.kbColFold:hover {
  background: rgba(var(--ink-deep-rgb), .08);
}

.kbColFolded {
  flex: 0 0 44px;
}

.kbSpine {
  width: 100%;
  min-height: 0;
  color: var(--ink);
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: 11px 0 14px;
  font-family: inherit;
  transition: filter .14s;
  display: flex;
}

.kbSpine:hover {
  filter: brightness(.97);
}

.kbSpine.over {
  box-shadow: inset 0 0 0 2px rgba(var(--ink-deep-rgb), .35);
}

.kbSpineCount {
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 12px;
  font-weight: 650;
}

.kbSpineName {
  writing-mode: vertical-rl;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-height: 0;
  font-size: 13px;
  font-weight: 650;
  overflow: hidden;
  transform: rotate(180deg);
}

.kbSpineChev {
  color: var(--c-warm-40);
  flex: none;
  transform: rotate(180deg);
}

/* [project]/app/styles/parts/35-kanban-drag.css [app-client] (css) */
.kbColMeta {
  color: var(--c-warm-40);
  margin-top: 1px;
  font-size: 12px;
}

.kbColBody {
  -webkit-user-select: none;
  user-select: none;
  border-radius: 12px;
  flex: 1;
  min-height: 0;
  padding: 2px;
  transition: background .15s;
  overflow: hidden auto;
}

.kbColBody.over {
  background: rgba(var(--ink-deep-rgb), .035);
}

.kbEmpty {
  text-align: center;
  color: var(--c-warm-77);
  border: 1px dashed rgba(var(--ink-deep-rgb), .1);
  border-radius: 10px;
  padding: 22px 0;
  font-size: 12.5px;
}

.kbSlot {
  display: block;
}

.kbGap {
  background: rgba(var(--ink-deep-rgb), .05);
  border: 1px dashed rgba(var(--ink-deep-rgb), .14);
  border-radius: 10px;
  margin-bottom: 8px;
}

.kbCard {
  cursor: grab;
  touch-action: none;
  margin-bottom: 8px;
}

.kbCard:active {
  cursor: grabbing;
}

.kbFloat {
  z-index: 300;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 14px 28px rgba(var(--c-black-rgb), .22));
  opacity: .97;
  position: fixed;
  top: 0;
  left: 0;
}

body.kbDragging {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

body.kbDragging * {
  cursor: grabbing !important;
}

/* [project]/app/styles/parts/36-lead-card.css [app-client] (css) */
.lcCard {
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  background: var(--c-white);
  border-radius: 10px;
  padding: 12px;
  transition: border-color .14s, box-shadow .14s;
}

.kbCard:hover .lcCard {
  border-color: rgba(var(--ink-deep-rgb), .2);
  box-shadow: 0 2px 8px rgba(var(--c-black-rgb), .06);
}

.lcTop {
  align-items: center;
  gap: 10px;
  display: flex;
}

.lcAvatar {
  width: 32px;
  height: 32px;
  color: var(--c-white);
  border-radius: 9px;
  flex: none;
  place-items: center;
  font-size: 11.5px;
  font-weight: 650;
  display: grid;
}

.lcWho {
  flex: 1;
  min-width: 0;
}

.lcName {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.lcSub {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.lcAge {
  color: var(--c-warm-71);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 11.5px;
}

.lcFoot {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .06);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  display: flex;
}

.lcSource, .lcOutcome, .lcCb {
  background: var(--c-warm-95b);
  color: var(--c-warm-40);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
}

.lcOutcome {
  background: rgba(var(--warning-rgb), .12);
  color: var(--warning-strong);
}

.lcCb {
  background: rgba(var(--brand-rgb), .09);
  color: var(--brand-deep);
}

/* [project]/app/styles/parts/37-toasts.css [app-client] (css) */
.toaster {
  z-index: 600;
  pointer-events: none;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  display: flex;
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.toast {
  background: var(--c-grey-09b);
  color: var(--c-orange-91);
  box-shadow: 0 14px 34px rgba(var(--c-black-rgb), .3);
  pointer-events: auto;
  border-radius: 12px;
  align-items: center;
  gap: 11px;
  padding: 11px 12px 11px 14px;
  font-size: 14px;
  font-weight: 550;
  animation: .26s cubic-bezier(.2, .8, .3, 1) both toastIn;
  display: flex;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(12px)scale(.96);
  }
}

.toastIcon {
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.toast.success .toastIcon {
  background: var(--success);
  color: var(--c-white);
}

.toast.error .toastIcon {
  background: var(--danger);
  color: var(--c-white);
}

.toast.info .toastIcon {
  background: rgba(var(--c-white-rgb), .18);
  color: var(--c-white);
}

.toastMsg {
  white-space: nowrap;
}

.toastX {
  width: 22px;
  height: 22px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
}

.toastX:hover {
  background: rgba(var(--c-white-rgb), .1);
  color: var(--c-white);
}

.btnState {
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-width: 104px;
  transition: background .2s;
  display: inline-flex;
}

.btnState.ok {
  background: var(--success) !important;
  opacity: 1 !important;
}

.btnTick {
  background: rgba(var(--c-white-rgb), .25);
  border-radius: 50%;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 800;
  animation: .3s cubic-bezier(.2, .9, .3, 1.4) both tickPop;
  display: inline-grid;
}

@keyframes tickPop {
  from {
    opacity: 0;
    transform: scale(.4);
  }
}

.btnSpin {
  border: 2px solid rgba(var(--c-white-rgb), .35);
  border-top-color: var(--c-white);
  border-radius: 50%;
  width: 13px;
  height: 13px;
  animation: .6s linear infinite pdSpin;
}

/* [project]/app/styles/parts/38-lead-detail.css [app-client] (css) */
.ldModal {
  background: var(--c-white);
  width: min(940px, 100%);
  height: min(680px, 100vh - 48px);
  box-shadow: 0 24px 70px rgba(var(--c-black-rgb), .4);
  border-radius: 18px;
  flex-direction: column;
  animation: .24s cubic-bezier(.25, .46, .45, .94) both modalIn;
  display: flex;
  overflow: hidden;
}

.ldTop {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  display: flex;
}

.ldTitle {
  color: var(--ink);
  font-size: 19px;
  font-weight: 650;
}

.ldMeta {
  color: var(--text-muted);
  margin-top: 1px;
  font-size: 13px;
}

.ldBody {
  flex: 1;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 0;
  display: grid;
}

.ldNav {
  border-right: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--surface-sunken);
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  display: flex;
}

.ldNavItem {
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 550;
  transition: background .14s, color .14s;
  display: flex;
}

.ldNavItem:hover {
  background: rgba(var(--ink-deep-rgb), .04);
  color: var(--ink);
}

.ldNavItem.active {
  background: var(--c-white);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(var(--c-black-rgb), .06);
  font-weight: 650;
}

.ldNavCount {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 650;
}

.ldPane {
  min-height: 0;
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.ldH {
  color: var(--ink);
  align-items: center;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 650;
  display: flex;
}

.ldH:not(:first-child) {
  margin-top: 24px;
}

.ldHFlush {
  margin: 0 !important;
}

.ldGrid {
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  display: grid;
}

.ldReadonly {
  border-bottom: 1px dashed rgba(var(--ink-deep-rgb), .12);
  min-height: 42px;
  color: var(--ink);
  overflow-wrap: anywhere;
  cursor: default;
  -webkit-user-select: text;
  user-select: text;
  align-items: center;
  padding: 0 0 10px;
  font-size: 14px;
  font-weight: 550;
  display: flex;
}

.ldLocked {
  background: var(--surface-muted);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 6px;
  margin-left: 8px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
}

.ldFacts .cfgField {
  margin-bottom: 4px;
}

.ldFacts .cfgLabel {
  color: var(--text-dim);
  text-transform: capitalize;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 500;
}

.ldNotes {
  min-height: 220px;
}

.ldTimeline {
  flex-direction: column;
  display: flex;
}

.ldActionGrid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.ldAction {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  flex-direction: column;
  gap: 3px;
  padding: 16px;
  font-family: inherit;
  transition: border-color .14s, box-shadow .14s;
  display: flex;
}

.ldAction:hover:not(:disabled) {
  border-color: var(--brand);
  box-shadow: 0 2px 10px rgba(var(--brand-rgb), .1);
}

.ldAction:disabled {
  opacity: .5;
  cursor: default;
}

.ldActionTitle {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
}

.ldActionSub {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  overflow: hidden;
}

.ldActionHint {
  margin-top: 14px;
}

.ldCb {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.ldCbRow {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ldCbRow .whInput {
  flex: 1;
  min-width: 180px;
}

.ldCbCurrent {
  background: rgba(var(--brand-rgb), .08);
  color: var(--brand);
  border: 0;
}

.ldFoot {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--surface-sunken);
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  display: flex;
}

.ldFootLeft, .ldFootMid, .ldFootRight {
  align-items: center;
  gap: 10px;
  display: flex;
}

.ldFootMid {
  border-right: 1px solid rgba(var(--ink-deep-rgb), .1);
  margin-left: auto;
  padding-right: 12px;
}

.ldAct {
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  transition: background-color .14s;
}

.ldAct.call {
  background: var(--success);
}

.ldAct.call:hover:not(:disabled) {
  background: var(--success-strong);
}

.ldAct.msg {
  background: var(--brand);
}

.ldAct.msg:hover:not(:disabled) {
  background: var(--brand-strong);
}

.ldAct:disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

.ldDelete {
  border: 1px solid rgba(var(--danger-rgb), .25);
  background: var(--c-white);
  color: var(--danger-strong);
  cursor: pointer;
  border-radius: 9px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}

.ldDelete:hover {
  background: rgba(var(--danger-rgb), .08);
}

.ldErr {
  color: var(--danger);
  font-size: 13px;
}

.ldSaved {
  color: var(--success-strong);
  font-size: 13px;
  font-weight: 550;
}

.ldHist {
  max-height: 320px;
}

@media (max-width: 800px) {
  .ldBody {
    grid-template-columns: 1fr;
  }

  .ldNav {
    border-right: 0;
    border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
    flex-direction: row;
    overflow-x: auto;
  }

  .ldGrid, .ldActionGrid {
    grid-template-columns: 1fr;
  }
}

.lpTable tbody tr.lpClickable {
  cursor: pointer;
}

.lpTable tbody tr.lpClickable:hover {
  background: var(--surface-sunken);
}

/* [project]/app/styles/parts/39-lead-sheets.css [app-client] (css) */
.lpSheets {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  display: flex;
}

.lpChipNew {
  color: var(--text-muted);
  border-style: dashed;
}

.lpChipNew:hover {
  color: var(--ink);
}

.srcSheets {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  margin-top: 16px;
  padding-top: 16px;
}

.lpSelectBtn.on {
  border-color: rgba(var(--ink-deep-rgb), .35);
  background: var(--surface-muted);
}

.lpBulk {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--surface-sunken);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 10px 14px;
  display: flex;
}

.lpBulkCount {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.lpBulkActions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.lpBulkStatus {
  min-width: 150px;
}

.lpCheckCol {
  width: 34px;
  padding-right: 0 !important;
}

.lpTable tbody tr.lpPicked {
  background: var(--c-warm-95b);
}

.lpMine {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  height: 34px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 9px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.lpMine:hover {
  border-color: rgba(var(--ink-deep-rgb), .28);
  color: var(--ink);
}

.lpMine.on {
  border-color: rgba(var(--brand-rgb), .4);
  background: rgba(var(--brand-rgb), .08);
  color: var(--ink);
}

.lpMineTrack {
  background: rgba(var(--ink-deep-rgb), .18);
  border-radius: 999px;
  flex: none;
  width: 28px;
  height: 16px;
  transition: background .15s;
  position: relative;
}

.lpMine.on .lpMineTrack {
  background: var(--brand);
}

.lpMineKnob {
  background: var(--c-white);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  transition: transform .15s;
  position: absolute;
  top: 2px;
  left: 2px;
}

.lpMine.on .lpMineKnob {
  transform: translateX(12px);
}

/* [project]/app/styles/parts/40-add-lead.css [app-client] (css) */
.lpHeadRight {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.lpAdd {
  white-space: nowrap;
  flex: none;
}

.lpRunOpt {
  margin-top: 16px;
}

.sel {
  min-width: 150px;
  display: inline-block;
  position: relative;
}

.sel.whFull, .sel.micSelect {
  width: 100%;
  display: block;
}

.sel.whMethod {
  min-width: 104px;
}

.cfgLabel {
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 550;
  display: block;
}

/* [project]/app/styles/parts/41-select.css [app-client] (css) */
.selBtn {
  box-sizing: border-box;
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  width: 100%;
  height: 42px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.selBtn:hover:not(:disabled) {
  border-color: rgba(var(--ink-deep-rgb), .24);
}

.sel.open .selBtn, .selBtn:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
  outline: none;
}

.selBtn:disabled {
  opacity: .5;
  cursor: default;
}

.selValue {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  line-height: 1.45;
  display: block;
  overflow: hidden;
}

.selValue.ph {
  color: var(--text-dim);
}

.selChev {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex: none;
  transition: transform .18s cubic-bezier(.25, .46, .45, .94);
}

.sel.open .selChev {
  transform: rotate(180deg);
}

.selList {
  z-index: 200;
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--c-white);
  box-shadow: 0 12px 34px rgba(var(--c-black-rgb), .14);
  border-radius: 12px;
  padding: 5px;
  animation: .14s cubic-bezier(.25, .46, .45, .94) both selIn;
  position: fixed;
  overflow-y: auto;
}

@keyframes selIn {
  from {
    opacity: 0;
    transform: translateY(-4px)scale(.98);
  }
}

.selOpt {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  font-family: inherit;
  display: flex;
}

.selOpt.active {
  background: var(--c-warm-95b);
}

.selOpt.on {
  color: var(--brand);
}

.selOpt.on.active {
  background: rgba(var(--brand-rgb), .08);
}

.selOptText {
  min-width: 0;
  display: block;
}

.selOptLabel {
  color: inherit;
  font-size: 14px;
  font-weight: 550;
  display: block;
}

.selOpt:not(.on) .selOptLabel {
  color: var(--ink);
}

.selOptHint {
  color: var(--text-muted);
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.4;
  display: block;
}

.selTick {
  width: 15px;
  height: 15px;
  color: var(--brand);
  flex: none;
}

/* [project]/app/styles/parts/42-email-templates.css [app-client] (css) */
.tplHead {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  display: flex;
}

.tplIntro {
  max-width: 560px;
  line-height: 1.55;
}

.tplHead .cfgSave {
  flex: none;
}

.tplList {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  display: grid;
}

.tplCard {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--c-white);
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  padding: 16px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  display: block;
}

.tplCard:hover {
  border-color: rgba(var(--ink-deep-rgb), .2);
  box-shadow: 0 2px 12px rgba(var(--c-black-rgb), .05);
}

.tplName {
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}

.tplSubject {
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 550;
  overflow: hidden;
}

.tplBody {
  color: var(--text-muted);
  -webkit-line-clamp: 3;
  line-clamp: 3;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.tplEmpty {
  text-align: center;
  border: 1px dashed rgba(var(--ink-deep-rgb), .14);
  border-radius: 16px;
  padding: 56px 20px;
}

.tplEmpty h3 {
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 650;
}

.tplEmpty p {
  color: var(--text-muted);
  margin-bottom: 16px;
  font-size: 14px;
}

.tplVar {
  cursor: pointer;
  border: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.tplVar:hover {
  background: rgba(var(--brand-rgb), .12);
  color: var(--brand);
}

.whPort {
  flex: 0 0 90px !important;
}

.setH4 {
  margin-top: 20px !important;
}

/* [project]/app/styles/parts/43-powerdial-team.css [app-client] (css) */
.pdSent {
  padding: 5px 10px;
  font-size: 12.5px;
}

.pdEmail {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  height: 46px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 12px;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .15s, background .15s;
  display: inline-flex;
}

.pdEmail:hover:not(:disabled) {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .06);
  color: var(--brand);
}

.pdEmail:disabled {
  opacity: .4;
  cursor: default;
}

.pdTeamHead {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.pdTeamHead .twH4 {
  margin: 0 !important;
}

.pdTeamAdd {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: border-color .14s, background .14s;
}

.pdTeamAdd:hover {
  border-color: rgba(var(--ink-deep-rgb), .32);
  background: var(--surface-sunken);
}

.pdTeamList {
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  display: flex;
}

.pdTeamRow {
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  display: flex;
}

.pdTeamAvatar {
  background: var(--ink-deep);
  width: 32px;
  height: 32px;
  color: var(--c-white);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
}

.pdTeamAvatar.pending {
  background: var(--c-white);
  color: var(--text-dim);
  border: 1px dashed rgba(var(--ink-deep-rgb), .2);
}

.pdTeamMain {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.pdTeamName {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  overflow: hidden;
}

.pdTeamRole {
  background: var(--surface-muted);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
}

.pdTeamSub {
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

.pdTeamSub.dialing {
  color: var(--text-secondary);
  font-weight: 550;
}

.pdTeamDot {
  background: var(--c-green-39);
  border: 2px solid var(--c-white);
  border-radius: 50%;
  width: 9px;
  height: 9px;
  position: absolute;
  bottom: -2px;
  right: -2px;
}

.pdTeamDot.oncall {
  background: var(--c-orange-50);
}

.pdTeamCalls {
  background: var(--c-warm-95b);
  border-radius: 8px;
  flex-direction: column;
  flex: none;
  align-items: center;
  padding: 3px 8px;
  line-height: 1;
  display: flex;
}

.pdTeamCallsN {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
}

.pdTeamCallsL {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 2px;
  font-size: 9px;
  font-weight: 600;
}

.pdTeamCalls.zero {
  background: none;
}

.pdTeamCalls.zero .pdTeamCallsN {
  color: var(--c-warm-75b);
}

.pdTeamDel {
  width: 24px;
  height: 24px;
  color: var(--c-warm-71);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: 0;
  border-radius: 7px;
  flex: none;
  font-size: 11px;
  transition: opacity .14s, background .14s, color .14s;
}

.pdTeamRow:hover .pdTeamDel {
  opacity: 1;
}

.pdTeamDel:hover {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger);
}

.pdHistoryBy, .pdHistBy {
  color: var(--text-muted);
  text-transform: none;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 600;
}

.pdHistoryRow {
  gap: 8px;
}

.pdHistoryOutcome {
  flex: none;
}

.pdHistoryBy {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* [project]/app/styles/parts/44-call-wrapup.css [app-client] (css) */
.metaModal.wrap {
  width: min(880px, 100%);
}

.wrapBadge {
  background: var(--surface-muted);
  color: var(--text-secondary);
  vertical-align: middle;
  border-radius: 7px;
  margin-left: 10px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 650;
  display: inline-block;
}

.wrapBadge.good {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-strong);
}

.wrapBadge.warn {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning-strong);
}

.wrapCols {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0 28px;
  display: grid;
}

.wrapCols > .srcSection {
  border-top: 0;
  padding-top: 0;
}

.wrapDisps {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.wrapDisp {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  cursor: pointer;
  text-align: left;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-family: inherit;
  transition: border-color .14s, background .14s;
  display: flex;
}

.wrapDispText {
  display: block;
}

.wrapDispLabel {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  display: block;
}

.wrapDispSub {
  color: var(--text-muted);
  margin-top: 1px;
  font-size: 12px;
  display: block;
}

.wrapDisp:hover {
  background: var(--surface-sunken);
  border-color: rgba(var(--ink-deep-rgb), .2);
}

.wrapDisp.good:hover, .wrapDisp.good.on {
  border-color: var(--success);
  background: rgba(var(--success-rgb), .08);
}

.wrapDisp.warn:hover, .wrapDisp.warn.on {
  border-color: var(--warning);
  background: rgba(var(--warning-rgb), .08);
}

.wrapDisp.bad:hover, .wrapDisp.bad.on {
  border-color: var(--danger);
  background: rgba(var(--danger-rgb), .07);
}

.wrapDisp.on:not(.good):not(.warn):not(.bad) {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .07);
}

.wrapDisp kbd {
  background: rgba(var(--ink-deep-rgb), .06);
  color: var(--text-muted);
  border-radius: 5px;
  flex: none;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}

.wrapCb {
  margin-top: 4px;
}

.wrapSoon, .wrapSms {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.wrapSoonBtn {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  color: var(--ink);
  cursor: pointer;
  border-radius: 9px;
  padding: 7px 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 550;
  transition: border-color .14s, background .14s;
}

.wrapSoonBtn:hover {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .06);
}

.wrapSmsActions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  display: flex;
}

.wrapFoot {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  margin-top: 20px;
  padding-top: 16px;
}

.wrapFootLeft {
  gap: 8px;
  display: flex;
}

.wrapFoot .cfgSave {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.wrapFoot kbd {
  background: rgba(var(--c-white-rgb), .22);
  border-radius: 5px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}

.wrapFootLeft kbd {
  background: rgba(var(--ink-deep-rgb), .06);
  color: var(--text-muted);
}

@media (max-width: 820px) {
  .wrapCols {
    grid-template-columns: 1fr;
  }
}

.pdDue {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning-strong);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-block;
}

.pdDueDot {
  background: var(--warning);
  vertical-align: middle;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  display: inline-block;
}

/* [project]/app/styles/parts/45-mic-check.css [app-client] (css) */
.micSelect {
  width: 100%;
}

.micMeterWrap {
  margin: 18px 0 16px;
}

.micMeter {
  background: var(--surface-muted);
  border-radius: 999px;
  height: 12px;
  position: relative;
  overflow: hidden;
}

.micFill {
  background: linear-gradient(90deg, var(--success) 0%, var(--success) 60%, var(--c-orange-57) 78%, var(--danger) 100%);
  background-size: 300px 100%;
  border-radius: 999px;
  height: 100%;
  transition: width 60ms linear;
}

.micZone.hot {
  background: rgba(var(--danger-rgb), .35);
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 85%;
}

.micPeak {
  background: var(--ink);
  border-radius: 2px;
  width: 2px;
  transition: left .12s linear;
  position: absolute;
  top: -2px;
  bottom: -2px;
}

.micVerdict {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 550;
}

.micVerdict.good {
  color: var(--success-strong);
}

.micVerdict.warn {
  color: var(--warning-strong);
}

.micVerdict.bad {
  color: var(--danger);
}

.micActions {
  gap: 10px;
  display: flex;
}

.micRec {
  background: var(--danger);
}

.micRec:hover:not(:disabled) {
  background: var(--danger-strong);
}

.micPhone {
  margin-top: 16px;
}

/* [project]/app/styles/parts/46-powerdial-bar.css [app-client] (css) */
.pdHost {
  height: 100%;
  min-height: 0;
}

.pdPage {
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 22px 26px 26px;
  display: flex;
}

.pdLoading {
  min-height: 60vh;
  color: var(--text-muted);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 550;
  display: flex;
}

.pdSpinner {
  border: 2.5px solid rgba(var(--ink-deep-rgb), .1);
  border-top-color: var(--brand);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  animation: .7s linear infinite pdSpin;
}

@keyframes pdSpin {
  to {
    transform: rotate(360deg);
  }
}

.pdEmpty {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 40px 26px;
  display: flex;
}

.pdEmpty h2 {
  color: var(--ink);
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 650;
}

.pdEmpty p {
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 auto 18px;
  font-size: 14px;
  line-height: 1.55;
}

.pdBar {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  display: flex;
}

.pdBarLeft, .pdBarRight {
  align-items: center;
  gap: 12px;
  display: flex;
}

.pdDevice {
  color: var(--text-muted);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.pdDevice:before {
  content: "";
  background: var(--c-warm-83);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.pdDevice.ready {
  color: var(--success-strong);
}

.pdDevice.ready:before {
  background: var(--success);
}

.pdDevice.error {
  color: var(--danger);
}

.pdDevice.error:before {
  background: var(--danger);
}

.pdCallerId, .pdProgress {
  color: var(--text-muted);
  font-size: 13px;
}

.pdDevice.offline {
  color: var(--warning-strong);
}

.pdDevice.offline:before {
  background: var(--warning-strong);
}

/* [project]/app/styles/parts/47-powerdial-columns.css [app-client] (css) */
.pdErr {
  margin-bottom: 14px;
}

.pdMain {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: stretch;
  gap: 20px;
  min-height: 0;
  display: grid;
}

.pdSide {
  align-self: start;
  max-height: 100%;
  overflow-y: auto;
}

.pdCard {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--c-white);
  border-radius: 18px;
  padding: 22px;
  transition: border-color .2s, box-shadow .2s;
}

.pdCardHead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  display: flex;
}

.pdName {
  color: var(--ink);
  font-size: 24px;
  font-weight: 650;
  line-height: 1.3;
}

.pdPhone {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  font-size: 15px;
}

.pdMeta {
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  display: flex;
}

.pdAge, .pdAttempts {
  color: var(--text-muted);
  font-size: 12px;
}

.pdAttempts {
  color: var(--warning-strong);
}

.pdAnswers {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 20px;
  padding: 16px 0;
  display: grid;
}

.pdAnswer dt {
  color: var(--text-muted);
  text-transform: capitalize;
  margin-bottom: 2px;
  font-size: 12px;
}

.pdAnswer dd {
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 14px;
  font-weight: 550;
}

.pdDialer {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  align-items: center;
  gap: 18px;
  padding-top: 16px;
  display: flex;
}

.pdTimer {
  color: var(--success-strong);
  font-variant-numeric: tabular-nums;
  min-width: 76px;
  font-size: 22px;
  font-weight: 600;
}

.pdTimer.dim {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 550;
}

.pdButtons {
  flex: 1;
  gap: 10px;
  display: flex;
}

.pdCall, .pdHang, .pdMute {
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  transition: background .15s, transform .1s;
  display: inline-flex;
}

.pdCall {
  background: var(--success);
  color: var(--c-white);
}

.pdCall:hover:not(:disabled) {
  background: var(--success-strong);
}

.pdCall:disabled {
  opacity: .4;
  cursor: default;
}

.pdHang {
  background: var(--danger);
  color: var(--c-white);
}

.pdHang:hover {
  background: var(--danger-strong);
}

.pdMute {
  background: var(--surface-muted);
  color: var(--ink);
}

.pdMute.on {
  background: var(--warning);
  color: var(--c-white);
}

.pdCall kbd, .pdHang kbd, .pdDisp kbd {
  background: rgba(var(--c-white-rgb), .22);
  border-radius: 5px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}

.pdDisp kbd {
  background: rgba(var(--ink-deep-rgb), .06);
  color: var(--text-muted);
}

.pdSide {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--c-white);
  border-radius: 18px;
  padding: 18px;
}

.pdSide h4 {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.pdDisps {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.pdDisp {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  height: 40px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  transition: border-color .15s, background .15s;
  display: flex;
}

.pdDisp:hover {
  background: var(--surface-sunken);
  border-color: rgba(var(--ink-deep-rgb), .2);
}

.pdDisp.good:hover {
  border-color: var(--success);
  background: rgba(var(--success-rgb), .07);
}

.pdDisp.warn:hover {
  border-color: var(--warning);
  background: rgba(var(--warning-rgb), .07);
}

.pdDisp.bad:hover {
  border-color: var(--danger);
  background: rgba(var(--danger-rgb), .06);
}

.pdUpNext {
  margin-top: 18px;
}

.pdNextRow {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13.5px;
  display: flex;
}

.pdNextRow:last-child {
  border-bottom: 0;
}

.pdNextName {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.pdNextAge {
  color: var(--text-muted);
  flex: none;
  padding-left: 10px;
  font-size: 12px;
}

@media (max-width: 1000px) {
  .pdMain {
    grid-template-columns: 1fr;
  }
}

/* [project]/app/styles/parts/48-twilio-connection.css [app-client] (css) */
.twCols {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0 28px;
  display: grid;
}

.twCols > .srcSection {
  border-top: 0;
  padding-top: 0;
}

.twSpan {
  grid-column: 1 / -1;
}

.twH4 {
  margin-top: 18px !important;
}

.twFacts {
  grid-template-columns: repeat(2, 1fr);
}

.twSteps {
  color: var(--text-secondary);
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.65;
}

.twSteps code {
  background: var(--surface-muted);
  border-radius: 5px;
  padding: 1px 5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}

.twCaps {
  gap: 5px;
  display: inline-flex;
}

.twCap {
  background: var(--surface-muted);
  letter-spacing: .02em;
  color: var(--c-warm-71);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: line-through;
}

.twCap.on {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-strong);
  text-decoration: none;
}

.twNumList {
  flex-direction: column;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.twNumList li {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.twLink {
  color: var(--brand);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 550;
}

.twLink:hover {
  text-decoration: underline;
}

.twOk {
  border: 1px solid var(--notice-border);
  background: var(--notice-bg);
  color: var(--notice-text);
  overflow-wrap: anywhere;
  border-radius: 10px;
  padding: 12px 14px 12px 38px;
  font-size: 13.5px;
  line-height: 1.55;
  position: relative;
}

.twOk:before {
  content: "";
  background: var(--success);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-ok) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-ok) center / contain no-repeat;
  mask: var(--notice-icon-ok) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 4px);
  left: 14px;
}

.twMt {
  margin-top: 10px;
}

.twTestRow {
  align-items: center;
  gap: 8px;
  display: flex;
}

.twTestRow .whInput {
  flex: 1;
  min-width: 0;
}

.twTestRow .ghostBtn {
  flex: none;
}

.twMsg .metaItemName {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.twMsg + .twMsg {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .05);
}

.twMsgPeek {
  color: var(--text-muted);
  font-weight: 400;
}

.twMsgOpen {
  padding: 4px 0 12px;
}

.twBubble {
  background: var(--surface-muted);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 12px 12px 12px 4px;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.5;
}

.twNote {
  border: 1px solid var(--notice-border);
  background: var(--notice-bg);
  color: var(--notice-text);
  border-radius: 10px;
  margin-top: 14px;
  padding: 12px 14px 12px 38px;
  font-size: 13px;
  line-height: 1.55;
  position: relative;
}

.twNote:before {
  content: "";
  background: var(--warning);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 4px);
  left: 14px;
}

@media (max-width: 900px) {
  .twCols {
    grid-template-columns: 1fr;
  }
}

.twPushHint {
  margin-bottom: 12px;
}

.twSaveBtn {
  background: var(--ink);
  height: 38px;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  margin-top: 12px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 640;
}

.twSaveBtn:disabled {
  opacity: .6;
  cursor: default;
}

.metaOk {
  background: rgba(var(--success-rgb), .1);
  border: 1px solid rgba(var(--success-rgb), .35);
  color: var(--text-secondary);
  border-radius: 9px;
  margin-top: 10px;
  padding: 9px 12px;
  font-size: 13px;
}

.twOr {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  align-items: center;
  gap: 12px;
  margin: 26px 0 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.twOr:before, .twOr:after {
  content: "";
  background: rgba(var(--ink-deep-rgb), .1);
  flex: 1;
  height: 1px;
}

/* [project]/app/styles/parts/49-source-rows.css [app-client] (css) */
.srcOpts {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.srcOpt {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--surface-sunken);
  cursor: pointer;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  display: flex;
}

.srcOpt:hover {
  border-color: rgba(var(--ink-deep-rgb), .16);
}

.srcOptText {
  min-width: 0;
  display: block;
}

.srcOptTitle {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  display: block;
}

.srcOptDesc {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  display: block;
}

.srcSwitch {
  cursor: pointer;
  background: none;
  border: 0;
  flex: none;
  padding: 0;
  line-height: 0;
  display: block;
}

.srcSwitchTrack {
  background: rgba(var(--ink-deep-rgb), .18);
  border-radius: 999px;
  width: 26px;
  height: 15px;
  padding: 2px;
  transition: background .18s;
  display: block;
}

.srcSwitch.on .srcSwitchTrack {
  background: var(--success);
}

.srcSwitch:hover .srcSwitchTrack {
  background: rgba(var(--ink-deep-rgb), .28);
}

.srcSwitch.on:hover .srcSwitchTrack {
  background: var(--success-strong);
}

.srcSwitchKnob {
  background: var(--c-white);
  width: 11px;
  height: 11px;
  box-shadow: 0 1px 2px rgba(var(--c-black-rgb), .2);
  border-radius: 50%;
  transition: transform .18s cubic-bezier(.25, .46, .45, .94);
  display: block;
  transform: translateX(0);
}

.srcSwitch.on .srcSwitchKnob {
  transform: translateX(11px);
}

/* [project]/app/styles/parts/50-funnel-live-toggle.css [app-client] (css) */
.fnode.trigger.off {
  border-color: rgba(var(--ink-deep-rgb), .1);
  background: var(--surface-sunken);
}

.fnode.trigger.off .fnodeIcon, .fnode.trigger.off .fnodeTitle, .fnode.trigger.off .fnodeDesc {
  opacity: .45;
}

.fnode.trigger.off:hover {
  border-color: rgba(var(--ink-deep-rgb), .2);
  box-shadow: none;
}

.liveToggle {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  height: 34px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .15s, color .15s, background .15s;
  display: inline-flex;
}

.liveToggle.on {
  border-color: rgba(var(--success-rgb), .35);
  background: rgba(var(--success-rgb), .07);
  color: var(--success-strong);
}

.liveDot {
  background: var(--c-warm-77);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.liveToggle.on .liveDot {
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(var(--success-rgb), .5);
  animation: 1.8s ease-out infinite livePulse;
}

@keyframes livePulse {
  70% {
    box-shadow: 0 0 0 6px rgba(var(--success-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
  }
}

.liveTrack {
  background: rgba(var(--ink-deep-rgb), .12);
  border-radius: 999px;
  width: 30px;
  height: 18px;
  padding: 2px;
  transition: background .18s;
  display: block;
}

.liveToggle.on .liveTrack {
  background: var(--success);
}

.liveKnob {
  background: var(--c-white);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: transform .18s cubic-bezier(.25, .46, .45, .94);
  display: block;
  transform: translateX(0);
}

.liveToggle.on .liveKnob {
  transform: translateX(12px);
}

.autoPill {
  cursor: default;
}

.autoPillMain {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.autoPill .infoBtn {
  margin-left: 2px;
}

.flowLiveErr {
  color: var(--danger);
  font-size: 13px;
}

/* [project]/app/styles/parts/51-activity-log.css [app-client] (css) */
.actStats {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
  display: grid;
}

.actStat {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--surface-sunken);
  border-radius: 12px;
  padding: 12px 14px;
}

.actStatLabel {
  color: var(--text-muted);
  margin-bottom: 4px;
  font-size: 12px;
  display: block;
}

.actStat strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 650;
}

.actStat strong.bad {
  color: var(--danger);
}

.actEmpty {
  text-align: center;
  padding: 26px 0;
}

.actTable {
  width: 100%;
}

.actWhen {
  white-space: nowrap;
  color: var(--text-muted);
}

.actSteps {
  gap: 4px;
  display: flex;
}

.actPip {
  background: var(--c-warm-83);
  border-radius: 2px;
  width: 8px;
  height: 8px;
}

.actPip.good {
  background: var(--success);
}

.actPip.bad {
  background: var(--danger);
}

.actPip.skip {
  background: var(--c-warm-83);
}

.actStatus {
  text-transform: capitalize;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 650;
  display: inline-block;
}

.actStatus.ok {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-strong);
}

.actStatus.failed {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger-strong);
}

.actStatus.stopped {
  background: rgba(var(--warning-rgb), .12);
  color: var(--warning-strong);
}

.actErr {
  color: var(--danger-strong);
  overflow-wrap: anywhere;
  margin-top: 4px;
  font-size: 12px;
}

.actMs {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: 12px;
}

/* [project]/app/styles/parts/52-funnel-test-run.css [app-client] (css) */
.fnodeErr {
  color: var(--danger);
  font-weight: 550;
}

.fnodeWhy {
  background: var(--danger);
  width: 22px;
  height: 22px;
  color: var(--c-white);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--danger-rgb), .35);
  border-radius: 50%;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  position: absolute;
  top: -8px;
  left: -8px;
}

.fnodeWhy:hover {
  background: var(--danger-strong);
}

.flowTestSummary.failed {
  color: var(--danger);
}

.runErrBanner {
  border: 1px solid var(--notice-border);
  background: var(--notice-bg);
  color: var(--notice-text);
  overflow-wrap: anywhere;
  border-radius: 10px;
  padding: 12px 14px 12px 38px;
  font-size: 14px;
  font-weight: 550;
  position: relative;
}

.runErrBanner:before {
  content: "";
  background: var(--danger);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 4px);
  left: 14px;
}

.runCols {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0 28px;
  display: grid;
}

.runCol {
  min-width: 0;
}

.runLine {
  color: var(--c-warm-23);
  overflow-wrap: anywhere;
  font-size: 13px;
}

.runCol .testPre {
  max-height: 340px;
  overflow: auto;
}

@media (max-width: 900px) {
  .runCols {
    grid-template-columns: 1fr;
  }
}

/* [project]/app/styles/parts/53-source-details.css [app-client] (css) */
.srcCfg {
  grid-template-columns: 1.25fr 1fr;
  align-items: start;
  gap: 0 28px;
  display: grid;
}

.srcSection {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  min-width: 0;
  padding: 18px 0;
}

.srcSection h4 {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.srcMeta {
  border-top: 0;
  grid-column: 1 / -1;
  padding-top: 0;
}

.srcQuestions {
  grid-column: 1;
}

.srcPayload {
  grid-column: 2;
}

.srcFacts {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 20px;
  margin: 0;
  display: grid;
}

.srcFacts dt {
  color: var(--text-muted);
  margin-bottom: 3px;
  font-size: 12px;
}

.srcFacts dd {
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 14px;
  font-weight: 550;
}

.srcTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}

.srcQuestions .srcTable {
  table-layout: fixed;
}

.srcQuestions .srcTable th:nth-child(2), .srcQuestions .srcTable td:nth-child(2) {
  width: 110px;
}

.srcQuestions .srcTable th:nth-child(3), .srcQuestions .srcTable td:nth-child(3) {
  width: 38%;
}

.srcTable th {
  text-align: left;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  padding: 0 10px 8px 0;
  font-size: 11.5px;
  font-weight: 600;
}

.srcTable td {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  vertical-align: top;
  padding: 10px 10px 10px 0;
}

.srcTable tr:last-child td {
  border-bottom: 0;
}

.srcQLabel {
  color: var(--ink);
  font-weight: 550;
}

.srcQKey {
  color: var(--text-muted);
  overflow-wrap: anywhere;
  margin-top: 2px;
}

.srcQuestions .whVar {
  overflow-wrap: anywhere;
  max-width: 100%;
  display: inline-block;
}

.srcQuestions .srcType {
  overflow-wrap: anywhere;
  max-width: 100%;
}

.srcQOpts {
  color: var(--text-muted);
  margin-top: 4px;
  font-size: 12px;
}

.srcType {
  background: var(--surface-muted);
  color: var(--c-warm-23);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-block;
}

.srcPayload .testPre {
  max-height: 420px;
  overflow: auto;
}

@media (max-width: 900px) {
  .srcCfg {
    grid-template-columns: 1fr;
  }

  .srcQuestions, .srcPayload {
    grid-column: 1;
  }
}

/* [project]/app/styles/parts/54-funnel-node-card.css [app-client] (css) */
.testPre {
  background: var(--c-warm-97);
  border: 1px solid rgba(var(--ink-deep-rgb), .07);
  color: var(--c-warm-22);
  white-space: pre;
  border-radius: 10px;
  margin: 0;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
}

.cfgDelete {
  height: 38px;
  color: var(--c-red-52);
  background: rgba(var(--c-red-52-rgb), .08);
  cursor: pointer;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 600;
}

.cfgDelete:hover {
  background: rgba(var(--c-red-52-rgb), .14);
}

.cfgSave {
  background: var(--ink);
  height: 38px;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 10px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 620;
}

.cfgSave:hover {
  opacity: .92;
}

.fstep {
  align-items: center;
  display: flex;
}

.fnode {
  width: 236px;
  height: var(--node-h);
  box-sizing: border-box;
  background: var(--c-white);
  border: 1px solid var(--fp-hair);
  box-shadow: 0 2px 8px rgba(var(--c-black-rgb), .05);
  cursor: default;
  border-radius: 14px;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  transition: box-shadow .15s, border-color .15s;
  display: flex;
  position: relative;
}

.fnode:hover {
  border-color: rgba(var(--brand-rgb), .45);
  box-shadow: 0 4px 14px rgba(var(--c-black-rgb), .08);
}

.fnode.trigger {
  border-color: rgba(var(--brand-facebook-rgb), .35);
  cursor: pointer;
}

.fnode.trigger:hover {
  border-color: rgba(var(--brand-facebook-rgb), .6);
  box-shadow: 0 2px 10px rgba(var(--brand-facebook-rgb), .12);
}

.fnodeIcon {
  width: 40px;
  height: 40px;
  color: var(--c-white);
  border-radius: 11px;
  flex: 0 0 40px;
  place-items: center;
  display: grid;
}

.fnodeIcon svg {
  width: 20px;
  height: 20px;
}

.fnodeBody {
  min-width: 0;
}

.fnodeChip {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fp-muted);
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  display: inline-block;
}

.fnodeTitle {
  color: var(--fp-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
}

.fnodeDesc {
  color: var(--fp-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
  overflow: hidden;
}

.fconn {
  height: 2px;
  margin-top: calc(var(--node-h) / 2 - 1px);
  background: var(--c-warm-78);
  flex: 0 0 44px;
  transition: background-color .35s;
  position: relative;
}

.fconn:after {
  content: "";
  border-left: 6px solid var(--c-warm-78);
  border-top: 4px solid #0000;
  border-bottom: 4px solid #0000;
  transition: border-left-color .35s;
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
}

.fadd {
  flex-direction: column;
  flex: none;
  align-items: center;
  gap: 8px;
  display: flex;
  position: relative;
}

.faddBtn {
  border: 2px dashed var(--c-warm-75);
  background: var(--c-white);
  width: 46px;
  height: 46px;
  color: var(--fp-muted);
  border-radius: 12px;
  place-items: center;
  transition: border-color .15s, color .15s, background-color .15s;
  display: grid;
}

.faddBtn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(var(--brand-rgb), .05);
}

.faddBtn svg {
  width: 20px;
  height: 20px;
}

.faddLabel {
  color: var(--fp-muted);
  font-size: 12px;
  font-weight: 550;
}

.fpicker {
  z-index: 10;
  background: var(--c-white);
  border: 1px solid var(--fp-hair);
  width: 264px;
  box-shadow: 0 16px 40px rgba(var(--c-black-rgb), .18);
  border-radius: 14px;
  padding: 8px;
  animation: .14s both fpickerIn;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes fpickerIn {
  from {
    opacity: 0;
    transform: translateX(-50%)translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%)translateY(0);
  }
}

.fpickerHead {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fp-muted);
  padding: 8px 8px 6px;
  font-size: 11px;
  font-weight: 700;
}

.fpickerItem {
  text-align: left;
  border-radius: 10px;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 8px;
  transition: background-color .12s;
  display: flex;
}

.fpickerItem:hover {
  background: var(--c-warm-95b);
}

.fpickerIcon {
  width: 32px;
  height: 32px;
  color: var(--c-white);
  border-radius: 9px;
  flex: 0 0 32px;
  place-items: center;
  display: grid;
}

.fpickerIcon svg {
  width: 17px;
  height: 17px;
}

.fpickerText {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.fpickerTitle {
  color: var(--fp-ink);
  font-size: 14px;
  font-weight: 600;
}

.fpickerDesc {
  color: var(--fp-muted);
  font-size: 12px;
}

/* [project]/app/styles/parts/55-leads-page.css [app-client] (css) */
.leadsPage {
  --lp-ink: var(--ink);
  --lp-ink2: var(--c-warm-31);
  --lp-muted: var(--text-muted);
  --lp-hair: rgba(var(--ink-deep-rgb), .09);
  --lp-row: rgba(var(--ink-deep-rgb), .02);
  color: var(--lp-ink2);
  padding: 26px 32px 40px;
}

.lpHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  display: flex;
}

.lpTitle {
  color: var(--lp-ink);
  font-size: 24px;
  font-weight: 620;
}

.lpSub {
  color: var(--lp-muted);
  margin-top: 4px;
  font-size: 14px;
}

.lpSearchWrap {
  flex: none;
  position: relative;
}

.lpSearchIcon {
  width: 17px;
  height: 17px;
  color: var(--lp-muted);
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.lpSearch {
  border: 1px solid var(--lp-hair);
  background: var(--c-white);
  width: 340px;
  height: 40px;
  color: var(--lp-ink);
  border-radius: 10px;
  outline: none;
  padding: 0 32px 0 36px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.lpSearch::placeholder {
  color: var(--lp-muted);
}

.lpSearchClear {
  background: var(--c-warm-94b);
  width: 20px;
  height: 20px;
  color: var(--c-warm-45);
  cursor: pointer;
  border: 0;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.lpSearchClear:hover {
  background: var(--c-warm-89);
  color: var(--lp-ink);
}

.lpSug {
  z-index: 40;
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  width: 340px;
  box-shadow: 0 12px 34px rgba(var(--ink-deep-rgb), .13);
  border-radius: 12px;
  padding: 5px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
}

.lpSugHead {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 9px 7px;
  font-size: 10.5px;
  font-weight: 650;
}

.lpSugItem {
  width: 100%;
  color: var(--lp-ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 13px;
  display: flex;
}

.lpSugItem.on {
  background: var(--c-warm-95b);
}

.lpSugKey {
  color: var(--ink-deep);
  background: var(--c-warm-94b);
  border-radius: 5px;
  padding: 2px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

.lpSugVal {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.lpSugCount {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 11.5px;
}

.lpSugEmpty {
  color: var(--text-dim);
  padding: 8px 9px 10px;
  font-size: 12.5px;
}

.lpSugFoot {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  color: var(--text-dim);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 9px 3px;
  font-size: 11px;
  display: flex;
}

.lpSugFound {
  color: var(--text-secondary);
  flex: none;
  font-weight: 650;
}

.lpSugTip code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
}

.lpSearch:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
}

.lpFilters {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

.lpChip {
  border: 1px solid var(--lp-hair);
  background: var(--c-white);
  height: 34px;
  color: var(--lp-ink2);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 550;
  transition: background-color .15s, border-color .15s, color .15s;
  display: inline-flex;
}

.lpChip:hover {
  background: var(--c-warm-97);
}

.lpChip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--c-white);
}

.lpChipCount {
  background: rgba(var(--ink-deep-rgb), .07);
  color: var(--lp-muted);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 600;
}

.lpChip.active .lpChipCount {
  background: rgba(var(--c-white-rgb), .22);
  color: var(--c-white);
}

.lpChipSheet {
  position: relative;
}

.lpChipEdit {
  width: 18px;
  height: 18px;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  border-radius: 5px;
  place-items: center;
  max-width: 0;
  margin: 0 -4px 0 -2px;
  transition: opacity .12s, max-width .12s, background-color .12s;
  display: grid;
  overflow: hidden;
}

.lpChipSheet:hover .lpChipEdit, .lpChipSheet:focus-within .lpChipEdit {
  opacity: .7;
  max-width: 20px;
}

.lpChipEdit:hover {
  background: rgba(var(--ink-deep-rgb), .1);
  opacity: 1 !important;
}

.lpChip.active .lpChipEdit:hover {
  background: rgba(var(--c-white-rgb), .25);
}

.lpChipEdit svg {
  width: 12px;
  height: 12px;
}

.lpChipDot {
  background: var(--c-orange-46);
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.shtInfoRow {
  border: 1px solid var(--notice-border);
  background: var(--notice-bg);
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px 12px 38px;
  display: flex;
  position: relative;
}

.shtInfoRow:before {
  content: "";
  background: var(--text-muted);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-info) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-info) center / contain no-repeat;
  mask: var(--notice-icon-info) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 4px);
  left: 14px;
}

.shtInfoRow strong {
  color: var(--ink);
  font-size: 13.5px;
  display: block;
}

.shtInfoRow .whHint {
  margin-top: 2px;
}

.shtInfoRow .ghostBtn {
  flex: none;
}

.lpTableWrap {
  border: 1px solid var(--lp-hair);
  background: var(--c-white);
  border-radius: 16px;
  overflow: hidden;
}

.lpTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.lpTable th {
  text-align: left;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-muted);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--lp-hair);
  padding: 13px 18px;
  font-size: 11px;
  font-weight: 600;
}

.lpTable td {
  border-bottom: 1px solid var(--lp-hair);
  color: var(--lp-ink2);
  vertical-align: middle;
  padding: 12px 18px;
}

.lpTable tbody tr:last-child td {
  border-bottom: 0;
}

.lpTable tbody tr:hover {
  background: var(--lp-row);
}

.ta-r {
  text-align: right;
}

.lpMono {
  font-variant-numeric: tabular-nums;
}

.lpTime {
  color: var(--lp-muted);
  font-variant-numeric: tabular-nums;
}

.lpLead {
  align-items: center;
  gap: 12px;
  display: flex;
}

.lpAvatar {
  width: 36px;
  height: 36px;
  color: var(--c-white);
  border-radius: 50%;
  flex: 0 0 36px;
  place-items: center;
  font-size: 12.5px;
  font-weight: 620;
  display: grid;
}

.lpLeadText {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.lpName {
  color: var(--lp-ink);
  font-weight: 600;
}

.lpEmail {
  color: var(--lp-muted);
  font-size: 12.5px;
}

.lpSource {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.lpSourceDot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.lpStatusCell {
  position: relative;
}

.lpStatus {
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px 0 11px;
  font-size: 12.5px;
  font-weight: 600;
  transition: filter .15s;
  display: inline-flex;
}

.lpStatus:hover {
  filter: brightness(.97);
}

.lpStatus svg {
  opacity: .6;
}

.st-new {
  background: rgba(var(--brand-rgb), .1);
  color: var(--brand-deep);
}

.st-contacted {
  background: rgba(var(--c-orange-57-rgb), .18);
  color: var(--c-orange-27);
}

.st-qualified {
  background: rgba(var(--c-green-34-rgb), .12);
  color: var(--c-green-26);
}

.st-won {
  background: var(--success);
  color: var(--c-white);
}

.st-lost {
  background: rgba(var(--ink-deep-rgb), .06);
  color: var(--c-grey-42);
}

.st-unreachable {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger-strong);
}

.lpOutcome {
  color: var(--text-muted);
  margin-top: 3px;
  padding-left: 2px;
  font-size: 11.5px;
  display: block;
}

.lpDot {
  border-radius: 50%;
  width: 9px;
  height: 9px;
  padding: 0;
}

.lpMenu {
  z-index: 200;
  background: var(--c-white);
  border: 1px solid var(--lp-hair);
  width: 176px;
  box-shadow: 0 14px 34px rgba(var(--c-black-rgb), .16);
  border-radius: 12px;
  padding: 6px;
  animation: .13s both fpickerIn;
  position: fixed;
}

.lpMenuItem {
  width: 100%;
  color: var(--lp-ink);
  text-align: left;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  font-size: 13.5px;
  font-weight: 550;
  transition: background-color .12s;
  display: flex;
}

.lpMenuItem:hover {
  background: var(--c-warm-95b);
}

.lpMenuItem.current {
  background: var(--c-warm-94b);
}

.lpMenuHead {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 9px 8px;
  font-size: 10.5px;
  font-weight: 650;
}

.lpDot.good {
  background: var(--c-green-36);
}

.lpLogCell {
  white-space: nowrap;
}

.lpLogBtn {
  border: 1px solid var(--lp-hair);
  background: var(--c-white);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color .14s, color .14s, background .14s;
  display: inline-flex;
}

.lpLogBtn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(var(--brand-rgb), .05);
}

.lpLogN {
  background: var(--c-warm-94b);
  text-align: center;
  min-width: 16px;
  color: var(--c-warm-45);
  border-radius: 20px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
}

.lpLogBtn:hover .lpLogN {
  background: rgba(var(--brand-rgb), .12);
  color: var(--brand);
}

.lpEmpty {
  text-align: center;
  color: var(--lp-muted);
  padding: 40px;
  font-size: 14px;
}

.lpBackdrop {
  z-index: 199;
  position: fixed;
  inset: 0;
}

.navGear {
  width: 28px;
  height: 28px;
  color: rgba(var(--c-white-rgb), .7);
  opacity: 0;
  cursor: pointer;
  border-radius: 8px;
  flex: none;
  place-items: center;
  margin-left: auto;
  transition: opacity .15s, background-color .15s, color .15s;
  display: grid;
}

.navRow:hover .navGear, .navGear:focus-visible {
  opacity: 1;
}

.navGear:hover {
  background: rgba(var(--c-white-rgb), .14);
  color: var(--c-white);
}

.navGear svg {
  width: 16px;
  height: 16px;
}

/* [project]/app/styles/parts/56-flow-settings.css [app-client] (css) */
.appRoot[data-collapsed="false"] .setPage {
  max-width: calc(100% - var(--sidebar-w) + var(--gutter));
}

.setPage {
  --set-ink: var(--ink);
  --set-ink2: var(--c-warm-31);
  --set-muted: var(--text-muted);
  --set-hair: rgba(var(--ink-deep-rgb), .1);
  color: var(--set-ink2);
  gap: 40px;
  padding: 28px 32px 44px;
  display: flex;
}

.setNav {
  flex: 0 0 184px;
}

.setNavTitle {
  color: var(--set-ink);
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 620;
}

.setWs {
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  display: flex;
}

.setWsAvatar {
  background: var(--c-blue-62);
  width: 32px;
  height: 32px;
  color: var(--c-white);
  border-radius: 9px;
  place-items: center;
  font-size: 13px;
  font-weight: 620;
  display: grid;
}

.setWsAvatarFlow {
  background: var(--brand);
}

.setWsName {
  color: var(--set-ink);
  font-size: 15px;
  font-weight: 600;
}

.setNavList {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.setNavItem {
  text-align: left;
  color: var(--set-muted);
  padding: 7px 0;
  font-size: 15px;
  font-weight: 550;
  transition: color .15s;
}

.setNavItem:hover {
  color: var(--set-ink2);
}

.setNavItem.active {
  color: var(--set-ink);
  font-weight: 600;
}

.setContent {
  flex: auto;
  min-width: 0;
}

.setContentTitle {
  color: var(--set-ink);
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 620;
}

.setGrid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  display: grid;
}

.setPlat {
  border: 1px solid var(--set-hair);
  background: var(--c-white);
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.setPlat:not(.connected):hover {
  border-color: rgba(var(--ink-deep-rgb), .22);
  box-shadow: 0 2px 10px rgba(var(--c-black-rgb), .05);
  cursor: pointer;
}

.setPlat.connected {
  background: rgba(var(--c-blue-62-rgb), .09);
  border-color: rgba(var(--c-blue-62-rgb), .28);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
}

.setPlat.connected:hover {
  border-color: rgba(var(--c-blue-62-rgb), .5);
  box-shadow: 0 2px 10px rgba(var(--c-blue-62-rgb), .12);
}

.metaOverlay {
  z-index: 100;
  background: rgba(var(--c-green-05-rgb), .5);
  -webkit-backdrop-filter: blur(6px);
  place-items: center;
  padding: 24px;
  animation: .2s both overlayIn;
  display: grid;
  position: fixed;
  inset: 0;
}

.metaModal {
  background: var(--c-white);
  width: min(520px, 100%);
  max-height: 80vh;
  box-shadow: 0 24px 70px rgba(var(--c-black-rgb), .4);
  border-radius: 18px;
  flex-direction: column;
  animation: .28s cubic-bezier(.25, .46, .45, .94) both modalIn;
  display: flex;
}

.metaHead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .08);
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
  display: flex;
}

.metaTitle {
  color: var(--ink);
  font-size: 18px;
  font-weight: 620;
}

.metaSub {
  color: var(--success-deep);
  margin-top: 2px;
  font-size: 13px;
  font-weight: 550;
}

.metaClose {
  width: 32px;
  height: 32px;
  color: var(--c-grey-48);
  border-radius: 9px;
  font-size: 15px;
  transition: background-color .15s, color .15s;
}

.metaClose:hover {
  background: rgba(var(--c-black-rgb), .05);
  color: var(--c-grey-13);
}

.metaBody {
  padding: 18px 22px 22px;
  overflow: auto;
}

.metaSection + .metaSection {
  margin-top: 20px;
}

.metaSection h3 {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
}

.metaList {
  flex-direction: column;
  gap: 2px;
  list-style: none;
  display: flex;
}

.metaList li {
  background: var(--c-warm-97);
  border-radius: 9px;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 10px;
  display: flex;
}

.metaRowBtn {
  background: var(--c-warm-97);
  text-align: left;
  cursor: pointer;
  border-radius: 9px;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  transition: background-color .12s;
  display: flex;
}

.metaRowBtn:hover {
  background: var(--c-warm-92);
}

.metaBack {
  color: var(--brand);
  cursor: pointer;
  padding: 2px 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.metaDrillHead {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.metaAdSub {
  color: var(--text-muted);
  font-weight: 450;
}

.metaStatus {
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.metaStatus.active {
  color: var(--success-deep);
}

.metaStatus.paused {
  color: var(--c-orange-27);
}

.metaItemName {
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
}

.metaItemMeta {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}

.metaPage + .metaPage {
  margin-top: 12px;
}

.metaPageName {
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.metaIndent {
  margin-left: 0;
}

.metaMuted {
  color: var(--text-muted);
  padding: 4px 0;
  font-size: 13px;
}

.metaErr {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 10px;
  padding: 12px 14px 12px 38px;
  font-size: 14px;
  position: relative;
}

.metaErr:before {
  content: "";
  background: var(--danger);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 4px);
  left: 14px;
}

.setPlatIcon {
  border-radius: 10px;
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 17px;
  font-weight: 700;
  display: grid;
}

.setPlatText {
  min-width: 0;
}

.setPlatName {
  color: var(--set-ink);
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
}

.setPlatAction {
  color: var(--c-green-28);
  margin-top: 2px;
  font-size: 13px;
  font-weight: 550;
}

.setPlatAction.ok {
  color: var(--set-muted);
}

.setPlaceholder {
  border: 1px dashed var(--set-hair);
  text-align: center;
  color: var(--set-muted);
  border-radius: 14px;
  padding: 40px;
  font-size: 14px;
}

.aiCtx {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .08);
  max-width: 620px;
  margin-top: 28px;
  padding-top: 24px;
}

.aiCtxTitle {
  color: var(--set-ink);
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.aiCtxLede {
  color: var(--set-muted);
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
}

/* [project]/app/styles/parts/57-powerdial-call-modal.css [app-client] (css) */
.pdReady {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--c-white);
  text-align: center;
  border-radius: 18px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 56px 28px 44px;
  display: flex;
}

.pdReadyLead {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  display: flex;
}

.pdReadyLead .pdName {
  letter-spacing: -.015em;
  font-size: 30px;
}

.pdReadyLead .pdPhone {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}

.pdReadyMeta {
  justify-content: center;
  margin-top: 10px;
}

.pdCallBig {
  border-radius: 999px;
  gap: 12px;
  min-height: 56px;
  padding: 16px 32px;
  font-size: 17px;
}

.pdReadyHint {
  color: var(--c-warm-61);
  max-width: 360px;
  font-size: 13px;
  line-height: 1.55;
}

.pdReadyHint kbd {
  background: rgba(var(--ink-deep-rgb), .05);
  color: var(--c-warm-40);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 11px;
}

.pdCallModal {
  z-index: 60;
  background: rgba(var(--ink-deep-rgb), .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  padding: 28px;
  animation: .2s ease-out pdModalIn;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes pdModalIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.pdCallModalCard {
  background: var(--c-white);
  width: 100%;
  max-width: 1240px;
  max-height: calc(100vh - 56px);
  box-shadow: 0 24px 64px rgba(var(--ink-deep-rgb), .24);
  border-radius: 22px;
  flex-direction: column;
  animation: .24s cubic-bezier(.2, .7, .4, 1) pdCardIn;
  display: flex;
  overflow: hidden;
}

@keyframes pdCardIn {
  from {
    opacity: 0;
    transform: translateY(12px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.pdCallModalCard .pdCardHead {
  padding: 24px 28px 20px;
}

.pdCallModalCard .pdName {
  font-size: 26px;
}

.pdCallModalBody {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  padding: 24px 36px 32px;
  display: grid;
  overflow-y: auto;
}

.pdCallModalLeft {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.pdCallModalLeft .pdAnswers {
  border-top: none;
  margin: 0;
  padding: 0;
}

.pdSecH {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
}

.pdCallModalLeft .pdSecH:not(:first-child) {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .06);
  margin-top: 20px;
  padding-top: 16px;
}

.pdPrevNotes {
  background: var(--surface-sunken);
  border: 1px solid rgba(var(--ink-deep-rgb), .07);
  color: var(--ink);
  white-space: pre-wrap;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.55;
}

.pdHistory {
  flex-direction: column;
  display: flex;
}

.pdHistRow {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  display: flex;
}

.pdHistRow:last-child {
  border-bottom: 0;
}

.pdHistWhen {
  color: var(--text-muted);
  flex: none;
  min-width: 74px;
}

.pdHistWhat {
  min-width: 0;
  color: var(--ink);
  text-transform: capitalize;
  flex: 1;
  font-weight: 550;
}

.pdHistDur {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.pdCallModalNotes {
  margin-top: auto;
}

.pdCallModalRight {
  border-left: 1px solid rgba(var(--ink-deep-rgb), .07);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 18px;
  padding-left: 28px;
  display: flex;
}

.pdTimerBig {
  letter-spacing: -.02em;
  text-align: center;
  padding: 12px 0;
  font-size: 32px;
  font-weight: 650;
}

.pdButtonsStack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.pdButtonsStack .pdHang, .pdButtonsStack .pdMute, .pdButtonsStack .pdEmail {
  justify-content: center;
  width: 100%;
}

@media (max-width: 780px) {
  .pdCallModalBody {
    grid-template-columns: 1fr;
  }

  .pdCallModalRight {
    border-left: none;
    border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
    padding-top: 20px;
    padding-left: 0;
  }
}

.pdList {
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.pdListFilters {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.pdSheetPick {
  flex: none;
  align-items: center;
  gap: 8px;
  display: flex;
}

.pdSheetSelect {
  min-width: 200px;
  max-width: 280px;
}

@media (max-width: 900px) {
  .pdSheetPick {
    flex: 100%;
  }

  .pdSheetSelect {
    flex: 1;
    max-width: none;
  }
}

.pdChip {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  color: var(--c-warm-28);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 550;
  transition: border-color .15s, background .15s;
  display: inline-flex;
}

.pdChip:hover:not(:disabled) {
  border-color: rgba(var(--ink-deep-rgb), .25);
}

.pdChipOn {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--c-white);
}

.pdChipNew {
  color: var(--text-muted);
  border-style: dashed;
}

.pdChipNew:hover {
  color: var(--ink);
  border-color: rgba(var(--ink-deep-rgb), .35);
}

.pdChipEmpty:not(.pdChipOn) {
  color: var(--c-warm-71);
}

.pdChipPick {
  margin-left: auto;
}

.linkOut {
  color: var(--brand);
  border-bottom: 1px solid rgba(var(--brand-rgb), .28);
  overflow-wrap: anywhere;
  cursor: pointer;
  text-decoration: none;
}

.linkOut:hover {
  border-bottom-color: var(--brand);
  background: rgba(var(--brand-rgb), .07);
}

.linkOut.mail:after {
  content: none;
}

button.linkOut {
  border: 0;
  border-bottom: 1px solid rgba(var(--brand-rgb), .28);
  font: inherit;
  text-align: left;
  background: none;
  border-radius: 0;
  padding: 0;
}

.ecOthers {
  color: var(--text-muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  display: flex;
}

.ecOther {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  color: var(--ink);
  cursor: pointer;
  border-radius: 7px;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 12px;
}

.ecOther:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.linkOut[target="_blank"]:after {
  content: "↗";
  opacity: .7;
  margin-left: 2px;
  font-size: .85em;
}

/* [project]/app/styles/parts/58-callback-reminders.css [app-client] (css) */
.cbToasts {
  z-index: 150;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.cbToast {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  border-left: 3px solid var(--warning);
  background: var(--c-white);
  box-shadow: 0 12px 34px rgba(var(--c-black-rgb), .16);
  border-radius: 12px;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 15px;
  animation: .22s cubic-bezier(.25, .46, .45, .94) both cbIn;
  display: flex;
}

@keyframes cbIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.cbToast.late {
  border-left-color: var(--danger);
}

.cbToastMain {
  flex: 1;
  min-width: 0;
}

.cbToastTitle {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warning-strong);
  font-size: 11px;
  font-weight: 700;
}

.cbToast.late .cbToastTitle {
  color: var(--danger-strong);
}

.cbToastBody {
  color: var(--ink);
  margin-top: 2px;
  font-size: 13.5px;
}

.cbToastActions {
  align-items: center;
  gap: 4px;
  display: flex;
}

.cbCall {
  background: var(--success);
  height: 32px;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
}

.cbCall:hover {
  background: var(--success-strong);
}

.cbDismiss {
  width: 28px;
  height: 32px;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 12px;
}

.cbDismiss:hover {
  color: var(--ink);
}

.cbConfirm {
  background: var(--c-white);
  width: min(400px, 100vw - 32px);
  box-shadow: 0 24px 70px rgba(var(--ink-deep-rgb), .28);
  border-radius: 16px;
  padding: 22px;
}

.cbConfirmTitle {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.cbConfirmSub {
  color: var(--text-secondary);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.cbConfirmActions {
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  display: flex;
}

.cbConfirmActions button {
  justify-content: center;
  width: 100%;
}

.cbHead {
  background: var(--ink);
  box-shadow: 0 12px 34px rgba(var(--c-black-rgb), .16);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  animation: .22s cubic-bezier(.25, .46, .45, .94) both cbIn;
  display: flex;
}

.cbHeadCount {
  color: var(--ink-soft);
  font-size: 12.5px;
}

.cbHeadCount strong {
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.cbCollapse {
  width: 22px;
  height: 22px;
  color: var(--ink-soft);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  flex: none;
  place-items: center;
  display: grid;
}

.cbCollapse:hover {
  background: rgba(var(--c-white-rgb), .14);
  color: var(--c-white);
}

.cbPill {
  background: var(--ink);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(var(--c-black-rgb), .16);
  border: 0;
  border-radius: 999px;
  align-self: flex-end;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 10px;
  font-size: 13px;
  animation: .22s cubic-bezier(.25, .46, .45, .94) both cbIn;
  display: inline-flex;
}

.cbPill:hover {
  color: var(--c-white);
}

.cbPillCount {
  background: var(--warning);
  min-width: 22px;
  height: 22px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  flex: none;
  place-items: center;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.cbPill.late .cbPillCount {
  background: var(--danger);
  color: var(--c-white);
}

.cbPillText {
  white-space: nowrap;
}

/* [project]/app/styles/parts/59-calendar.css [app-client] (css) */
.calPage {
  flex-direction: column;
  height: calc(100vh - 4rem);
  padding: 22px 26px 26px;
  display: flex;
}

.calBar {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  display: flex;
}

.calBarLeft {
  align-items: center;
  gap: 14px;
  display: flex;
}

.calTitle {
  color: var(--ink);
  font-size: 22px;
  font-weight: 650;
}

.calNav {
  align-items: center;
  gap: 4px;
  display: flex;
}

.calNavBtn {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  width: 30px;
  height: 30px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
}

.calNavBtn:hover {
  border-color: rgba(var(--ink-deep-rgb), .3);
}

.calToday {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  height: 30px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}

.calToday:hover {
  border-color: rgba(var(--ink-deep-rgb), .3);
}

.calBarRight {
  align-items: center;
  gap: 12px;
  display: flex;
}

.calSummary {
  color: var(--text-muted);
  font-size: 13px;
}

.calOverdue {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger-strong);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 650;
}

.calGrid {
  background: rgba(var(--ink-deep-rgb), .08);
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 14px;
  flex: 1;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 1px;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.calDow {
  background: var(--surface-sunken);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  grid-row: 1;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 700;
}

.calCell {
  background: var(--c-white);
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  padding: 6px;
  display: flex;
  overflow: hidden;
}

.calCell.out {
  background: var(--surface-sunken);
}

.calCell.out .calDate {
  color: var(--c-warm-77);
}

.calDate {
  color: var(--text-secondary);
  flex: none;
  padding: 2px 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.calCell.today .calDate {
  background: var(--ink-deep);
  width: 22px;
  height: 22px;
  color: var(--c-white);
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
}

.calEvents {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-height: 0;
  display: flex;
  overflow-y: auto;
}

.calEvent {
  background: rgba(var(--brand-rgb), .09);
  width: 100%;
  color: var(--brand-deep);
  text-align: left;
  cursor: pointer;
  border: 0;
  border-radius: 6px;
  align-items: baseline;
  gap: 6px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12px;
  transition: background .14s;
  display: flex;
}

.calEvent.late {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger-strong);
}

.calEvent.late:hover {
  background: rgba(var(--danger-rgb), .18);
}

.calEventTime {
  font-variant-numeric: tabular-nums;
  flex: none;
  font-weight: 650;
}

.calEventName {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.calActions {
  gap: 8px;
  display: flex;
}

.calEvent {
  cursor: grab;
}

.calEvent:active {
  cursor: grabbing;
}

.calDragging {
  opacity: .4;
}

.calCell.calDrop {
  background: rgba(var(--brand-rgb), .08);
  box-shadow: inset 0 0 0 2px var(--brand);
}

.calCell.out.calDrop {
  background: rgba(var(--brand-rgb), .08);
}

.calEvent {
  background: rgba(var(--ev-rgb, var(--brand-rgb)), .09);
  color: var(--brand-deep);
  border-left: 3px solid var(--ev, var(--brand));
  padding-left: 5px;
}

.calEvent:hover {
  background: rgba(var(--ev-rgb, var(--brand-rgb)), .18);
}

.calScope {
  background: var(--surface-muted);
  border-radius: 8px;
  padding: 2px;
  display: inline-flex;
}

.calScopeBtn {
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
}

.calScopeBtn.on {
  background: var(--c-white);
  color: var(--ink);
  font-weight: 600;
}

.calKey {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 12px;
  display: flex;
}

.calKeyItem {
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
  display: inline-flex;
}

.calKeyItem:disabled {
  cursor: default;
}

.calKeyOff {
  opacity: .4;
}

.calKeyDot {
  background: var(--ev, var(--brand));
  border-radius: 999px;
  flex: none;
  width: 9px;
  height: 9px;
}

/* [project]/app/styles/parts/60-call-screen.css [app-client] (css) */
.csOverlay {
  z-index: 70;
  background: rgba(var(--c-green-05-rgb), .5);
  -webkit-backdrop-filter: blur(6px);
  place-items: center;
  padding: 24px;
  animation: .2s both overlayIn;
  display: grid;
  position: fixed;
  inset: 0;
}

.csStage {
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  width: min(1180px, 100%);
  height: min(760px, 100vh - 48px);
  display: flex;
}

.csStage.withScript {
  width: min(1180px, 100%);
}

.csCard {
  background: var(--c-white);
  width: min(1180px, 100%);
  height: 100%;
  box-shadow: 0 24px 70px rgba(var(--c-black-rgb), .4);
  border-radius: 20px;
  flex-direction: column;
  animation: .24s cubic-bezier(.25, .46, .45, .94) both modalIn;
  display: flex;
  overflow: hidden;
}

.csStage.withScript .csCard {
  flex: auto;
  width: auto;
  min-width: 0;
}

.csScriptCard {
  background: var(--c-white);
  max-width: 42vw;
  height: 100%;
  box-shadow: 0 24px 70px rgba(var(--c-black-rgb), .4);
  border-radius: 20px;
  flex-direction: column;
  flex: 0 0 380px;
  animation: .24s cubic-bezier(.25, .46, .45, .94) both modalIn;
  display: flex;
  overflow: hidden;
}

.csScriptHead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px 20px;
  display: flex;
}

.csScriptSelect {
  flex: 1;
  min-width: 0;
}

.csScriptTitle {
  color: var(--text-muted);
  flex: 1;
  font-weight: 600;
}

.csScriptBody {
  min-height: 0;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
  padding: 20px;
  font-size: 15px;
  line-height: 1.6;
  overflow-y: auto;
}

.csScriptToggle {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-white);
  height: 32px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color .15s, border-color .15s;
}

.csScriptToggle:hover {
  background: rgba(var(--ink-deep-rgb), .05);
}

.csScriptToggle.on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--c-white);
}

@media (max-width: 900px) {
  .csStage.withScript .csCard {
    display: none;
  }

  .csScriptCard {
    flex: 1;
    max-width: none;
  }
}

.scList {
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

.scRow {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 11px;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  transition: border-color .15s, background-color .15s;
  display: flex;
}

.scRow:hover {
  border-color: rgba(var(--brand-rgb), .4);
  background: rgba(var(--brand-rgb), .04);
}

.scRowTitle {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.scRowMeta {
  color: var(--text-muted);
  flex: none;
  font-size: 12px;
}

.scBodyEdit {
  font-family: inherit;
  line-height: 1.55;
}

.csWonBadge {
  background: rgba(var(--success-rgb), .16);
  color: var(--success-deep);
  letter-spacing: .06em;
  vertical-align: middle;
  border-radius: 5px;
  margin-left: 7px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-block;
}

/* [project]/app/styles/parts/61-call-screen-columns.css [app-client] (css) */
.csHead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  flex: none;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  display: flex;
}

.csHeadMain {
  min-width: 0;
}

.csName {
  color: var(--ink);
  font-size: 24px;
  font-weight: 650;
  line-height: 1.25;
}

.csPhone {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.csHeadMeta {
  text-align: right;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin-left: auto;
  display: flex;
}

.csStatus {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.csAge {
  color: var(--text-muted);
  font-size: 12px;
}

.csBody {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 0;
  display: grid;
}

.csLeft {
  flex-direction: column;
  min-height: 0;
  padding: 20px 24px 24px;
  display: flex;
  overflow-y: auto;
}

.csH {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
}

.csFacts {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px 20px;
  margin: 0 0 20px;
  display: grid;
}

.csFact dt {
  color: var(--text-muted);
  text-transform: capitalize;
  margin-bottom: 2px;
  font-size: 11.5px;
}

.csFact dd {
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 14px;
  font-weight: 550;
}

.csNotes {
  flex: none;
  margin-bottom: 20px;
}

.csNotesHead {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.csSaved {
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 550;
  transition: color .2s;
}

.csSaved.saved {
  color: var(--success-strong);
}

.csNoteBox {
  resize: vertical;
  min-height: 130px;
}

.csBtn svg {
  flex: none;
  width: 15px;
  height: 15px;
}

.csHistory {
  flex-direction: column;
  display: flex;
}

.csHistScroll {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--surface-sunken);
  border-radius: 12px;
  max-height: 420px;
  padding: 12px 14px;
  overflow-y: auto;
}

.csHistItem {
  gap: 10px;
  padding-bottom: 12px;
  display: flex;
  position: relative;
}

.csHistItem:last-child {
  padding-bottom: 0;
}

.csHistItem:not(:last-child):before {
  content: "";
  background: rgba(var(--ink-deep-rgb), .1);
  width: 1px;
  position: absolute;
  top: 13px;
  bottom: 0;
  left: 3px;
}

.csHistDot {
  z-index: 1;
  background: var(--success);
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  position: relative;
}

.csHistDot.miss {
  background: var(--c-warm-83);
}

.csHistBody {
  flex: 1;
  min-width: 0;
}

.csHistTop {
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  display: flex;
}

.csHistWho {
  color: var(--ink);
  font-weight: 650;
}

.csHistOut {
  color: var(--text-secondary);
  text-transform: capitalize;
}

.csHistTag {
  text-transform: capitalize;
  white-space: nowrap;
  border-radius: 20px;
  align-items: center;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 650;
  display: inline-flex;
}

.csHistTag.good {
  background: var(--c-green-93);
  color: var(--c-green-29b);
}

.csHistTag.bad {
  background: var(--c-red-94);
  color: var(--c-red-42c);
}

.csHistTag.info {
  background: var(--c-orange-92);
  color: var(--c-red-34);
}

.csHistTag.miss {
  background: var(--c-warm-94b);
  color: var(--c-warm-45);
}

.csHistDur, .csHistWhen {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.csHistWhen {
  margin-left: auto;
}

.csHistNote {
  border-left: 2px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  color: var(--ink);
  white-space: pre-wrap;
  border-radius: 8px;
  margin-top: 4px;
  padding: 7px 10px;
  font-size: 12.5px;
  line-height: 1.5;
}

.csHistDot.vm {
  background: var(--warning);
}

.csSaved.error {
  color: var(--danger);
}

/* [project]/app/styles/parts/62-call-screen-rail.css [app-client] (css) */
.csRight {
  border-left: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--c-amber-99);
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 20px 24px 24px;
  display: flex;
  overflow-y: auto;
}

.csDial {
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 14px;
  display: flex;
}

.csTimer {
  color: var(--success-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  font-weight: 650;
  display: inline-flex;
}

.csRecChip {
  border: 1px solid rgba(var(--c-red-51b-rgb), .4);
  background: var(--c-white);
  height: 30px;
  font: inherit;
  letter-spacing: .02em;
  color: var(--c-red-44);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 650;
  transition: background-color .15s, border-color .15s;
  display: inline-flex;
}

.csRecChip:hover {
  background: rgba(var(--c-red-51b-rgb), .06);
}

.csRecChipDot {
  background: var(--danger);
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.csRecChip.on {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--c-white);
}

.csRecChip.on .csRecChipDot {
  background: var(--c-white);
  box-shadow: 0 0 0 0 rgba(var(--c-white-rgb), .7);
  animation: 1.6s ease-out infinite livePulse;
}

.csTimer.dim {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 550;
}

.csReady {
  color: var(--text-muted);
  font-size: 14px;
}

.csBtn {
  justify-content: center;
  width: 100%;
}

.csWrap {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.csVerdict {
  text-align: center;
  background: var(--surface-muted);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: 650;
}

.csVerdict.good {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-strong);
}

.csVerdict.warn {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning-strong);
}

.csDisps {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.csDisps .wrapDisp {
  padding: 7px 10px;
}

.csCb {
  margin-top: 4px;
}

.csWrapContact {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .08);
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
}

.csWrapFoot {
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  display: flex;
}

.csWrapRow {
  gap: 8px;
  display: flex;
}

@media (max-width: 900px) {
  .csBody {
    grid-template-columns: 1fr;
  }

  .csRight {
    border-left: 0;
    border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  }
}

.pdCall.csBusy, .csBtn.csBusy {
  cursor: progress;
  opacity: .82;
}

.csSpin {
  border: 2px solid rgba(var(--c-white-rgb), .35);
  border-top-color: var(--c-white);
  border-radius: 50%;
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  animation: .7s linear infinite pdSpin;
}

/* [project]/app/styles/parts/63-powerdial-expanded-row.css [app-client] (css) */
.pdBodyH {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
}

.pdBodyH:not(:first-child) {
  margin-top: 18px;
}

.pdSubOutcome {
  color: var(--text-muted);
  font-weight: 500;
}

.pdTimeline {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--c-white);
  border-radius: 10px;
  flex-direction: column;
  max-height: 200px;
  padding: 12px 14px;
  display: flex;
  overflow-y: auto;
}

.pdTlItem {
  gap: 12px;
  padding-bottom: 14px;
  display: flex;
  position: relative;
}

.pdTlItem:last-child {
  padding-bottom: 0;
}

.pdTlItem:not(:last-child):before {
  content: "";
  background: rgba(var(--ink-deep-rgb), .1);
  width: 1px;
  position: absolute;
  top: 14px;
  bottom: 0;
  left: 4px;
}

.pdTlDot {
  z-index: 1;
  background: var(--success);
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  position: relative;
}

.pdTlDot.miss {
  background: var(--c-warm-83);
}

.pdTlBody {
  flex: 1;
  min-width: 0;
}

.pdTlTop {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.pdTlWho {
  color: var(--ink);
  font-weight: 650;
}

.pdTlOutcome {
  color: var(--text-secondary);
  text-transform: capitalize;
}

.pdTlDur, .pdTlWhen {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.pdTlWhen {
  margin-left: auto;
}

.pdTlNote {
  border-left: 2px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--surface-sunken);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 9px;
  margin-top: 5px;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.5;
}

.pdNoteBox {
  box-sizing: border-box;
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  width: 100%;
  min-height: 76px;
  color: var(--ink);
  resize: vertical;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
}

.pdNoteBox:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
  outline: 0;
}

.pdNoteState {
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  margin-left: 8px;
  font-weight: 600;
}

.pdNoteState.bad {
  color: var(--danger-strong);
}

.pdTlDot.vm {
  background: var(--warning);
}

/* [project]/app/styles/parts/64-lead-picker.css [app-client] (css) */
.lpk .metaBody {
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.lpkTools {
  margin-bottom: 12px;
}

.lpkFilters {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-bottom: 14px;
  display: flex;
}

.lpkDiv {
  background: rgba(var(--ink-deep-rgb), .12);
  width: 1px;
  height: 18px;
  margin: 0 4px;
}

.lpkHead {
  padding: 12px 0 8px;
}

.lpkCheck {
  color: var(--text-secondary);
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 550;
  display: inline-flex;
}

.lpkRows {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 12px;
  flex: 1;
  min-height: 0;
  max-height: 46vh;
  overflow-y: auto;
}

.lpkEmpty {
  text-align: center;
  padding: 30px;
}

.lpkRow {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  cursor: pointer;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

.lpkRow:last-child {
  border-bottom: 0;
}

.lpkRow:hover {
  background: var(--surface-sunken);
}

.lpkRow.on {
  background: rgba(var(--ink-deep-rgb), .04);
}

.lpkMain {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.lpkName {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.lpkSub {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.lpkMeta {
  flex: none;
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.lpkOutcome, .lpkTries {
  color: var(--text-muted);
  font-size: 12px;
}

.lpkFoot {
  gap: 12px;
}

.lpkSave {
  flex: 1;
  max-width: 280px;
}

/* [project]/app/styles/parts/65-list-builder.css [app-client] (css) */
.lbChips {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.lbChip {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 550;
  transition: border-color .14s, background .14s;
}

.lbChip:hover {
  border-color: rgba(var(--ink-deep-rgb), .3);
}

.lbChip.on {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--c-white);
}

.lbCount {
  background: var(--surface-sunken);
  border: 1px solid rgba(var(--ink-deep-rgb), .07);
  color: var(--text-secondary);
  border-radius: 12px;
  margin-top: 18px;
  padding: 14px;
  font-size: 14px;
}

.lbCount strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 650;
}

.lbCountWarn {
  color: var(--warning-strong);
}

/* [project]/app/styles/parts/66-powerdial-list.css [app-client] (css) */
.pdListRows {
  flex: 1;
  min-height: 0;
  margin: -2px;
  padding: 2px 2px 6.5rem;
  overflow-y: auto;
}

.pdRow {
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  background: var(--c-white);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: border-color .14s, box-shadow .14s;
  position: relative;
  overflow: hidden;
}

.pdRow:last-child {
  margin-bottom: 0;
}

.pdRow:hover {
  border-color: rgba(var(--ink-deep-rgb), .2);
  box-shadow: 0 2px 10px rgba(var(--c-black-rgb), .05);
}

.pdRow.pdSel {
  border-color: rgba(var(--ink-deep-rgb), .18);
  background: var(--c-warm-97);
}

.pdRow.called {
  background: var(--surface-sunken);
  border-color: rgba(var(--ink-deep-rgb), .06);
}

.pdRow.called .pdRowName, .pdRow.called .pdRowAvatar {
  opacity: .5;
}

.pdRowHead {
  text-align: left;
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  grid-template-columns: 16px 16px 34px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  display: grid;
}

.pdRowIndex {
  color: var(--c-warm-71);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
}

.pdGrip {
  width: 100%;
  height: 100%;
  color: var(--c-warm-77);
  cursor: grab;
  touch-action: none;
  opacity: 0;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  transition: opacity .12s, color .12s;
  display: grid;
}

.pdRow:hover .pdGrip {
  opacity: 1;
}

.pdGrip:hover {
  color: var(--ink);
}

.pdGrip:active {
  cursor: grabbing;
}

.pdGap {
  border: 1px dashed rgba(var(--ink-deep-rgb), .16);
  background: rgba(var(--ink-deep-rgb), .04);
  border-radius: 12px;
  margin-bottom: 8px;
}

.pdFloatRow {
  z-index: 300;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 12px 26px rgba(var(--c-black-rgb), .22));
  position: fixed;
  top: 0;
  left: 0;
}

.pdFloatInner {
  background: var(--c-white);
  border-color: rgba(var(--ink-deep-rgb), .25);
  margin: 0;
}

.pdGrip.pdGripOn {
  opacity: 1;
  color: var(--ink);
}

.pdChipReset {
  color: var(--text-muted);
}

.pdCall.pdAutoCall {
  background: var(--ink-deep);
}

.pdCall.pdAutoCall:hover:not(:disabled) {
  background: var(--c-grey-16b);
}

.pdRowAvatar {
  width: 34px;
  height: 34px;
  color: var(--c-white);
  letter-spacing: .02em;
  border-radius: 10px;
  place-items: center;
  font-size: 12.5px;
  font-weight: 650;
  display: grid;
}

.pdRow.pdOpen .pdRowChevron {
  transform: rotate(90deg);
}

.pdRow.pdOpen .pdRowHead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
}

.pdRowMain {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.pdRowName {
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  overflow: hidden;
}

.pdRowPhone {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.pdRowMeta {
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.pdRowAge, .pdRowMeta .srcType, .pdRowMeta .pdAttempts {
  color: var(--text-muted);
  font-size: 12px;
}

.pdRowDone {
  color: var(--success-strong);
  background: rgba(var(--success-rgb), .1);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
}

.pdRowChevron {
  color: var(--c-warm-77);
  font-size: 18px;
  transition: transform .18s, color .15s;
}

.pdRow.sel .pdRowChevron {
  color: var(--c-warm-28);
  transform: rotate(90deg);
}

.pdRowBody {
  background: var(--surface-sunken);
  padding: 16px 16px 18px 84px;
  animation: .2s ease-out pdRowIn;
}

@keyframes pdRowIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pdRowBody .pdAnswers {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.pdHistory {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .06);
  margin-top: 16px;
  padding-top: 14px;
}

.pdHistory h5 {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
}

.pdHistoryRow {
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  display: flex;
}

.pdHistoryOutcome {
  color: var(--ink);
  text-transform: capitalize;
  font-weight: 550;
}

.pdHistoryAge {
  color: var(--text-muted);
  font-size: 12px;
}

.pdTeam h4 {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
}

.pdStickyBar {
  z-index: 40;
  pointer-events: none;
  justify-content: center;
  padding: 0 20px;
  display: flex;
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
}

.pdStickyCard {
  pointer-events: auto;
  background: var(--c-white);
  box-shadow: 0 12px 40px rgba(var(--ink-deep-rgb), .18),
              0 0 0 1px rgba(var(--ink-deep-rgb), .08);
  border-radius: 999px;
  align-items: center;
  gap: 24px;
  max-width: min(720px, 100vw - 40px);
  padding: 12px 12px 12px 22px;
  display: inline-flex;
}

.pdStickyLead {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.pdStickyName {
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
}

.pdStickyPhone {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.pdStickyCard .pdCallBig {
  flex-shrink: 0;
  min-height: 48px;
  padding: 12px 24px;
  font-size: 15px;
}

.pdMain {
  padding-bottom: 0;
}

@media (max-width: 780px) {
  .pdStickyCard {
    border-radius: 20px;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
  }

  .pdStickyCard .pdCallBig {
    width: 100%;
  }
}

.pdMore {
  text-align: center;
  letter-spacing: .02em;
  color: var(--text-muted);
  padding: 18px 0;
  font-size: 12px;
  font-weight: 600;
}

.pdOnCall {
  background: var(--c-orange-96);
  color: var(--warning-strong);
  letter-spacing: .04em;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 5px;
  max-width: 11ch;
  margin-left: 7px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-block;
  overflow: hidden;
}

.pdRow.pdHeld .pdRowAvatar, .pdRow.pdHeld .pdRowPhone {
  opacity: .55;
}

/* [project]/app/styles/parts/67-messages.css [app-client] (css) */
.tabBadge {
  background: var(--danger);
  min-width: 17px;
  height: 17px;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  border-radius: 999px;
  place-items: center;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-grid;
}

.msgPage {
  background: var(--c-white);
  grid-template-columns: 340px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  display: grid;
}

.msgList {
  border-right: 1px solid rgba(var(--ink-deep-rgb), .09);
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.msgListHead {
  flex: none;
  padding: 20px 20px 12px;
}

.msgTitle {
  color: var(--ink);
  margin: 0;
  font-size: 22px;
  font-weight: 620;
}

.msgSub {
  color: var(--text-muted);
  margin-top: 3px;
  font-size: 13px;
}

.msgFilters {
  align-items: center;
  gap: 8px;
  padding: 0 20px 12px;
  display: flex;
}

.msgInbox {
  flex: 1;
  min-width: 0;
}

.msgUnreadToggle {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  height: 34px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  flex: none;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 550;
  transition: background-color .14s, border-color .14s;
}

.msgUnreadToggle:hover {
  background: var(--surface-sunken);
}

.msgUnreadToggle.on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--c-white);
}

.msgThreads {
  flex: 1;
  min-height: 0;
  padding: 0 12px 16px;
  overflow-y: auto;
}

.msgThread {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 11px;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  transition: background-color .12s;
  display: flex;
}

.msgThread:hover {
  background: var(--surface-sunken);
}

.msgThread.active {
  background: rgba(var(--brand-rgb), .07);
}

.msgAvatar {
  letter-spacing: .02em;
  width: 34px;
  height: 34px;
  color: var(--c-white);
  border-radius: 10px;
  flex: none;
  place-items: center;
  font-size: 12.5px;
  font-weight: 650;
  display: grid;
}

.msgThreadMain {
  flex: 1;
  min-width: 0;
}

.msgThreadTop {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.msgThreadName {
  min-width: 0;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.msgThread.unread .msgThreadName {
  font-weight: 700;
}

.msgThreadWhen {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 11.5px;
}

.msgThreadPreview {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 12.5px;
  display: block;
  overflow: hidden;
}

.msgThread.unread .msgThreadPreview {
  color: var(--text-secondary);
}

.msgYou {
  color: var(--text-dim);
}

.msgUnreadDot {
  background: var(--brand);
  min-width: 18px;
  height: 18px;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  flex: none;
  place-items: center;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.msgPane {
  background: var(--c-amber-99);
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.msgPaneHead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--c-white);
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  display: flex;
}

.msgPaneMain {
  flex: 1;
  min-width: 0;
}

.msgPaneName {
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
}

.msgPaneName.link {
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}

.msgPaneName.link:hover {
  color: var(--brand);
  text-underline-offset: 2px;
  text-decoration: underline;
}

.msgPaneSub {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  font-size: 12.5px;
}

.msgPaneActions {
  flex: none;
  gap: 8px;
  display: flex;
}

.msgBack {
  flex: none;
  width: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: none;
}

.msgChannels {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--c-white);
  flex: none;
  gap: 4px;
  padding: 8px 24px 0;
  display: flex;
}

.msgChannelTab {
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 10px;
  font-size: 13.5px;
  font-weight: 600;
  transition: color .14s, border-color .14s;
  display: inline-flex;
}

.msgChannelTab:hover {
  color: var(--ink);
}

.msgChannelTab.on {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

.msgChannelDot {
  background: var(--brand);
  min-width: 17px;
  height: 17px;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  place-items: center;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
}

.msgChannelEmpty {
  text-align: center;
  max-width: 300px;
  color: var(--text-muted);
  margin: auto;
  font-size: 13.5px;
  line-height: 1.55;
}

.msgScroll {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  padding: 20px 24px;
  display: flex;
  overflow-y: auto;
}

.msgDay {
  background: rgba(var(--ink-deep-rgb), .05);
  color: var(--text-muted);
  border-radius: 999px;
  align-self: center;
  margin: 6px 0;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.msgBubbleRow {
  max-width: 100%;
  display: flex;
}

.msgBubbleRow.out {
  justify-content: flex-end;
}

.msgBubble {
  max-width: min(560px, 78%);
  color: var(--ink);
  background: var(--c-white);
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  border-radius: 14px;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.45;
  display: flex;
}

.msgText {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}

.msgQuoteToggle {
  background: rgba(var(--ink-deep-rgb), .07);
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
  border: 0;
  border-radius: 5px;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1.5;
  display: inline-block;
}

.msgQuoteToggle:hover {
  background: rgba(var(--ink-deep-rgb), .13);
  color: var(--ink);
}

.msgBubbleRow.out .msgQuoteToggle {
  background: rgba(var(--c-white-rgb), .18);
  color: rgba(var(--c-white-rgb), .85);
}

.msgBubbleRow.out .msgQuoteToggle:hover {
  background: rgba(var(--c-white-rgb), .3);
  color: var(--c-white);
}

.msgQuoted {
  border-left: 2px solid rgba(var(--ink-deep-rgb), .15);
  color: var(--text-muted);
  white-space: pre-wrap;
  margin-top: 8px;
  padding-left: 10px;
  font-size: 13px;
  display: block;
}

.msgBubbleRow.out .msgQuoted {
  border-left-color: rgba(var(--c-white-rgb), .35);
  color: rgba(var(--c-white-rgb), .8);
}

.msgMeta {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 1px;
  font-size: 10.5px;
  display: flex;
}

.msgBubbleRow.out .msgMeta {
  color: rgba(var(--c-white-rgb), .7);
}

.msgBubble:has(.msgSubject) {
  display: block;
}

.msgBubble:has(.msgSubject) .msgText {
  display: block;
}

.msgBubble:has(.msgSubject) .msgMeta {
  text-align: right;
  margin-top: 4px;
  display: block;
}

.msgBubbleRow.out .msgBubble {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--c-white);
}

.msgSubject {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 650;
}

.msgFailed {
  color: var(--danger-strong);
  font-weight: 650;
}

.msgBubbleRow.out .msgFailed {
  color: var(--c-orange-91);
}

.msgComposer {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--c-white);
  flex: none;
  padding: 12px 24px 16px;
}

.msgComposerBar {
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}

.msgTemplatePick {
  flex: none;
  width: 200px;
}

.msgComposerHint {
  min-width: 0;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 12px;
  overflow: hidden;
}

.msgSubjectInput {
  width: 100%;
  margin-bottom: 8px;
}

.msgComposerRow {
  align-items: flex-end;
  gap: 8px;
  display: flex;
}

.msgInput {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  min-width: 0;
  min-height: 44px;
  max-height: 180px;
  font: inherit;
  color: var(--ink);
  resize: vertical;
  border-radius: 12px;
  flex: 1;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.45;
}

.msgInput:focus {
  border-color: var(--brand);
  outline: none;
}

.msgSend {
  flex: none;
  height: 44px;
}

.msgEmpty {
  text-align: center;
  flex: 1;
  place-items: center;
  padding: 40px;
  display: grid;
}

.msgEmptyInner {
  max-width: 360px;
}

.msgEmptyTitle {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.msgEmptyBody {
  color: var(--text-muted);
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
}

.msgThreadsEmpty {
  color: var(--text-muted);
  padding: 24px 20px;
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .msgPage {
    grid-template-columns: 1fr;
  }

  .msgPage.reading .msgList, .msgPage:not(.reading) .msgPane {
    display: none;
  }

  .msgBack {
    place-items: center;
    display: grid;
  }
}

.msgAiBtn {
  border: 1px solid rgba(var(--brand-rgb), .35);
  background: var(--card);
  height: 30px;
  color: var(--brand);
  cursor: pointer;
  border-radius: 8px;
  flex: none;
  padding: 0 11px;
  font-size: 12.5px;
  font-weight: 620;
}

.msgAiBtn:hover:not(:disabled) {
  background: rgba(var(--brand-rgb), .07);
}

.msgAiBtn:disabled {
  opacity: .6;
  cursor: default;
}

/* [project]/app/styles/parts/68-callback-scheduler.css [app-client] (css) */
.calEventLen {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex: none;
  margin-left: auto;
  padding-left: 4px;
  font-size: 10px;
  font-weight: 650;
}

.csCbOpen {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  cursor: pointer;
  text-align: left;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  font-family: inherit;
  transition: border-color .14s;
  display: flex;
}

.csCbOpen:hover {
  border-color: var(--brand);
}

.csCbWhen {
  min-width: 0;
  color: var(--ink);
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
}

.csCbLen {
  background: var(--surface-muted);
  color: var(--text-secondary);
  border-radius: 6px;
  flex: none;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 650;
}

.csCbChevron {
  color: var(--text-dim);
  flex: none;
  font-size: 16px;
}

.cbsModal {
  background: var(--c-white);
  width: min(880px, 100vw - 32px);
  height: min(560px, 100vh - 48px);
  box-shadow: 0 24px 70px rgba(var(--ink-deep-rgb), .28);
  border-radius: 18px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.cbsBody {
  flex: 1;
  grid-template-columns: 216px minmax(0, 1fr);
  min-height: 0;
  display: grid;
}

.cbsRail {
  border-right: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--surface-sunken);
  flex-direction: column;
  gap: 18px;
  padding: 16px 18px;
  display: flex;
  overflow-y: auto;
}

.cbsField {
  flex-direction: column;
  gap: 7px;
  display: flex;
}

.cbsFieldEnd {
  margin-top: auto;
}

.cbsDiary {
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.cbsHead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  display: flex;
}

.cbsTitle {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.cbsSub {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: 13px;
}

.cbsLabel {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.cbsMinsWrap {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 0;
  display: flex;
}

.cbsMinsWrap:focus-within {
  border-color: var(--brand);
}

.cbsMins {
  width: 68px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: none;
  border: 0;
  outline: none;
  padding: 9px 0 9px 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 650;
}

.cbsMins::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cbsMins::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cbsMins[type="number"] {
  appearance: textfield;
}

.cbsMinsUnit {
  color: var(--text-muted);
  font-size: 12.5px;
}

.cbsPresets {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.cbsPreset {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  border-radius: 9px;
  padding: 8px 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 550;
  transition: border-color .14s, background-color .14s;
}

.cbsPreset:hover {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .06);
}

.cbsDayBar {
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 8px;
  display: flex;
}

.cbsNav {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  width: 28px;
  height: 28px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1;
}

.cbsNav:hover {
  background: var(--surface-sunken);
}

.cbsDayName {
  min-width: 132px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
}

.cbsScope {
  background: var(--c-warm-95b);
  border-radius: 9px;
  flex-direction: column;
  gap: 3px;
  padding: 3px;
  display: flex;
}

.cbsScopeBtn {
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
}

.cbsScopeBtn.on {
  background: var(--c-white);
  color: var(--ink);
}

.cbsWeek {
  flex: none;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 20px 10px;
  display: grid;
}

.cbsWeekDay {
  background: var(--surface-sunken);
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 0 6px;
  font-family: inherit;
  transition: background-color .14s, border-color .14s;
  display: flex;
}

.cbsWeekDay:hover {
  background: var(--surface-muted);
}

.cbsWeekDay.on {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .08);
}

.cbsWeekDow {
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
}

.cbsWeekNum {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 650;
}

.cbsWeekDay.today .cbsWeekNum {
  color: var(--brand);
}

.cbsWeekCount {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 650;
}

.cbsWeekCount.none {
  color: var(--c-warm-75);
}

.cbsGrid {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  flex: 1;
  min-height: 0;
  padding: 0 20px;
  display: flex;
  overflow-y: auto;
}

.cbsGutter {
  flex: 0 0 46px;
  padding-top: 8px;
}

.cbsHour {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  position: relative;
}

.cbsHour span {
  position: absolute;
  top: -6px;
  right: 8px;
}

.cbsLane {
  border-left: 1px solid rgba(var(--ink-deep-rgb), .09);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  flex: 1;
  min-width: 0;
  margin: 8px 0 16px;
  position: relative;
}

.cbsLine {
  background: rgba(var(--ink-deep-rgb), .06);
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
}

.cbsPast {
  background: repeating-linear-gradient(-45deg,
    rgba(var(--ink-deep-rgb), .035),
    rgba(var(--ink-deep-rgb), .035) 5px,
    transparent 5px,
    transparent 10px);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.cbsBooking {
  border-left: 3px solid var(--brand);
  background: rgba(var(--brand-rgb), .13);
  pointer-events: none;
  border-radius: 7px;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.cbsBooking.other {
  border-left-color: var(--c-warm-71);
  background: rgba(var(--ink-deep-rgb), .05);
  opacity: .75;
}

.cbsBookingName {
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
}

.cbsBookingWho {
  color: var(--text-muted);
  flex: none;
  font-size: 10.5px;
}

.cbsGhost {
  border: 2px solid var(--success);
  background: rgba(var(--success-rgb), .16);
  color: var(--success-deep);
  font-variant-numeric: tabular-nums;
  cursor: grab;
  touch-action: none;
  z-index: 2;
  border-radius: 7px;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  position: absolute;
  left: 6px;
  right: 6px;
}

.cbsGhost.dragging {
  cursor: grabbing;
  box-shadow: 0 6px 18px rgba(var(--ink-deep-rgb), .18);
}

.cbsGhostGrip {
  opacity: .7;
  flex: none;
  font-size: 10px;
}

.cbsGhost.clash {
  border-color: var(--danger);
  background: rgba(var(--danger-rgb), .14);
  color: var(--danger-strong);
}

.cbsFoot {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--surface-sunken);
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 20px 14px;
  display: flex;
}

.cbsSummary {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.cbsSummary strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.cbsFree {
  color: var(--success-strong);
  font-size: 12px;
}

.cbsWarn {
  color: var(--danger-strong);
  font-size: 12px;
  font-weight: 550;
}

.cbsActions {
  flex: none;
  gap: 8px;
  display: flex;
}

@media (max-width: 720px) {
  .cbsModal {
    height: min(620px, 100vh - 32px);
  }

  .cbsBody {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: 1fr;
  }

  .cbsRail {
    border-right: 0;
    border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    overflow-x: auto;
  }

  .cbsFieldEnd {
    margin-top: 0;
    margin-left: auto;
  }

  .cbsPresets, .cbsScope {
    flex-direction: row;
  }
}

.cbsNudge {
  color: var(--warning-strong);
  margin-top: 7px;
  font-size: 12px;
}

.cbsDayPick {
  min-width: 132px;
  position: relative;
}

.cbsDayName {
  width: 100%;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 7px;
  align-items: center;
  gap: 6px;
  margin-left: -6px;
  padding: 3px 6px;
  font-size: 14.5px;
  font-weight: 650;
  display: inline-flex;
}

.cbsDayName:hover, .cbsDayName.on {
  background: var(--surface-muted);
}

.cbsDayCaret {
  border-left: 4px solid #0000;
  border-right: 4px solid #0000;
  border-top: 5px solid var(--text-dim);
  width: 0;
  height: 0;
}

.cbsPick {
  z-index: 20;
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  width: 256px;
  box-shadow: 0 18px 44px rgba(var(--c-black-rgb), .18);
  border-radius: 12px;
  max-height: min(340px, 100vh - 160px);
  padding: 10px;
  position: absolute;
  top: calc(100% + 6px);
  left: -6px;
  overflow-y: auto;
}

.cbsPickBar {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}

.cbsPickMonth {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
}

.cbsNav:disabled {
  opacity: .35;
  cursor: default;
}

.cbsPickGrid {
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  display: grid;
}

.cbsPickDow {
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 4px;
  font-size: 9.5px;
  font-weight: 700;
}

.cbsPickDay {
  aspect-ratio: 1;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  place-items: center;
  font-size: 12.5px;
  display: grid;
  position: relative;
}

.cbsPickDay:hover:not(:disabled) {
  background: var(--surface-muted);
}

.cbsPickDay.out {
  color: var(--text-dim);
}

.cbsPickDay.past {
  color: var(--c-warm-77);
  cursor: default;
}

.cbsPickDay.today {
  color: var(--brand);
  font-weight: 700;
}

.cbsPickDay.on {
  background: var(--brand);
  color: var(--c-white);
  font-weight: 650;
}

.cbsPickDot {
  background: var(--brand);
  border-radius: 999px;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: 3px;
}

.cbsPickDay.on .cbsPickDot {
  background: var(--c-white);
}

.cbsPickDay.past .cbsPickDot {
  background: var(--c-warm-77);
}

.cbsPickToday {
  border: 0;
  border-top: 1px solid rgba(var(--ink-deep-rgb), .08);
  width: 100%;
  font: inherit;
  color: var(--brand);
  cursor: pointer;
  background: none;
  margin-top: 8px;
  padding: 8px 0 2px;
  font-size: 12.5px;
}

.cbsPickToday:hover {
  text-decoration: underline;
}

/* [project]/app/styles/parts/69-recordings.css [app-client] (css) */
.ovRecPanel {
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.ovRecPanel .ovRecs {
  overscroll-behavior: contain;
  padding-right: 10px;
  position: absolute;
  inset: 58px 10px 20px 20px;
  overflow-y: auto;
}

.ovRecs {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.ovRec {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .06);
  padding-bottom: 14px;
}

.ovRec:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ovRecTop {
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  display: flex;
}

.ovRecName {
  min-width: 0;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
}

.ovRecTag {
  background: var(--surface-muted);
  color: var(--text-secondary);
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
}

.ovRecTag.vm {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning-strong);
}

.ovRecWhen {
  text-align: right;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 1 0 auto;
  font-size: 12px;
}

.ovRecSub {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  font-size: 12.5px;
}

.ovRec .recPlayer {
  margin-top: 7px;
}

.asRecHead {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.asRecHead h4 {
  margin: 0;
}

.asRecBtn {
  border-radius: 8px;
  flex: none;
  height: 28px;
  padding: 0 11px;
  font-size: 12.5px;
}

.asRecBtn.on {
  border-color: rgba(var(--brand-rgb), .65);
  background: rgba(var(--brand-rgb), .07);
  color: var(--brand-deep);
}

.asRecordings {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.asRecording {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  padding-bottom: 12px;
}

.asRecording:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.asRecordingTop {
  align-items: center;
  gap: 10px;
  font-size: 13px;
  display: flex;
}

.asRecording .recPlayer {
  margin-top: 6px;
}

@media (max-width: 920px) {
  .ovRecPanel {
    min-height: 0;
  }

  .ovRecPanel .ovRecs {
    max-height: 420px;
    padding-right: 4px;
    position: static;
    inset: auto;
  }
}

/* [project]/app/styles/parts/70-verify-banner.css [app-client] (css) */
.verifyBanner {
  top: var(--header-h);
  z-index: 4;
  background: var(--warning);
  color: var(--c-white);
  box-shadow: 0 1px 6px rgba(var(--c-black-rgb), .18);
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13.5px;
  line-height: 1.4;
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
}

.verifyBannerDot {
  background: var(--c-white);
  opacity: .9;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.verifyBannerText {
  flex: auto;
  min-width: 0;
}

.verifyBannerBtn {
  background: rgba(var(--c-white-rgb), .18);
  color: var(--c-white);
  cursor: pointer;
  border-radius: 7px;
  flex: none;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color .15s;
}

.verifyBannerBtn:hover:not(:disabled) {
  background: rgba(var(--c-white-rgb), .28);
}

.verifyBannerBtn:disabled {
  opacity: .6;
  cursor: default;
}

.verifyBannerClose {
  width: 24px;
  height: 24px;
  color: var(--c-white);
  opacity: .75;
  cursor: pointer;
  border-radius: 6px;
  flex: none;
  place-items: center;
  display: grid;
}

.verifyBannerClose:hover {
  opacity: 1;
  background: rgba(var(--c-white-rgb), .18);
}

@media (max-width: 640px) {
  .verifyBanner {
    flex-wrap: wrap;
  }

  .verifyBannerText {
    flex: 100%;
    order: -1;
  }
}

/* [project]/app/styles/parts/71-compliance.css [app-client] (css) */
.cmpWrap {
  flex-direction: column;
  gap: 18px;
  max-width: 780px;
  display: flex;
}

.cmpCard {
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  background: var(--card);
  border-radius: 14px;
  padding: 20px 22px;
}

.cmpTitle {
  color: var(--ink);
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 650;
}

.cmpSub {
  color: var(--text-secondary);
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
}

.cmpNote {
  color: var(--text-muted);
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.cmpToggle {
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 14px;
  display: flex;
}

.cmpRow {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.cmpField {
  flex-direction: column;
  gap: 5px;
  min-width: 110px;
  display: flex;
}

.cmpFieldWide {
  flex: 220px;
}

.cmpField span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.cmpField select {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 14px;
}

.cmpField select:disabled {
  opacity: .5;
  cursor: default;
}

.cmpAdd {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.cmpAdd input {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  min-width: 0;
  color: var(--ink);
  border-radius: 9px;
  flex: 150px;
  padding: 9px 11px;
  font-size: 14px;
}

.cmpAdd input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
  outline: none;
}

.cmpAdd button {
  background: var(--ink);
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 9px;
  flex: none;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
}

.cmpAdd button:disabled {
  opacity: .5;
  cursor: default;
}

.cmpAdd button.cmpDanger {
  background: var(--danger);
  color: var(--c-white);
}

.cmpEmpty {
  color: var(--text-dim);
  margin: 14px 0 0;
  font-size: 13.5px;
}

.cmpList {
  flex-direction: column;
  gap: 2px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.cmpItem {
  background: var(--surface-sunken);
  border-radius: 9px;
  align-items: baseline;
  gap: 10px;
  padding: 9px 11px;
  display: flex;
}

.cmpItem:hover {
  background: var(--surface-muted);
}

.cmpItemValue {
  color: var(--ink);
  flex: none;
  font-size: 14px;
  font-weight: 600;
}

.cmpItemReason {
  min-width: 0;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
  font-size: 12.5px;
  overflow: hidden;
}

.cmpItemRemove {
  color: var(--danger);
  cursor: pointer;
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
}

.cmpItemRemove:hover {
  text-decoration: underline;
}

.dzone {
  border: 1px solid rgba(var(--danger-rgb), .28);
  background: var(--card);
  border-radius: 14px;
  margin-top: 26px;
  padding: 22px 24px;
}

.dzone h4 {
  color: var(--ink);
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 650;
}

.dzone p {
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
}

.dzoneFoot {
  color: var(--text-muted) !important;
  font-size: 12.5px !important;
}

.dzoneOn {
  border-color: var(--danger);
  background: rgba(var(--danger-rgb), .05);
}

.dzoneCount {
  color: var(--danger-strong) !important;
  font-size: 15px !important;
}

.dzoneCount strong {
  color: var(--danger-strong);
  font-size: 22px;
  font-weight: 650;
}

.dzoneBtn {
  background: var(--danger);
  height: 38px;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
}

.dzoneBtn:hover:not(:disabled) {
  background: var(--danger-strong);
}

.dzoneBtn:disabled {
  opacity: .6;
  cursor: default;
}

.dzoneUndo {
  border: 1px solid rgba(var(--ink-deep-rgb), .2);
  background: var(--card);
  height: 38px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 9px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
}

.dzoneUndo:hover:not(:disabled) {
  border-color: var(--ink);
}

.dzoneConfirm {
  max-width: 420px;
  margin-top: 4px;
}

.dzoneConfirm label span {
  color: var(--text-muted);
  margin-bottom: 6px;
  font-size: 12.5px;
  display: block;
}

.dzoneConfirm input {
  border: 1px solid rgba(var(--ink-deep-rgb), .16);
  background: var(--card);
  width: 100%;
  height: 38px;
  color: var(--ink);
  border-radius: 9px;
  padding: 0 12px;
  font-size: 13.5px;
}

.dzoneConfirm input:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .14);
  outline: 0;
}

.dzoneActions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.dzoneErr {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 9px;
  margin: 10px 0;
  padding: 9px 12px 9px 36px;
  font-size: 13px;
  position: relative;
}

.dzoneErr:before {
  content: "";
  background: var(--danger);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 1px);
  left: 12px;
}

/* [project]/app/styles/parts/72-site-header.css [app-client] (css) */
body:has(.mktRoot) {
  background: var(--card);
}

.mktRoot {
  --mkt-header-h: 72px;
  --page-max: 1500px;
  --page-gutter: 64px;
  --page-pad: max(var(--page-gutter),
    calc((100% - var(--page-max)) / 2));
  background: var(--card);
  min-height: 100%;
  color: var(--ink);
}

.mktNav {
  height: var(--mkt-header-h);
  padding: 0 var(--page-pad);
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  z-index: 120;
  background: var(--card);
  align-items: center;
  gap: 36px;
  transition: transform .24s, box-shadow .2s, border-color .2s;
  display: flex;
  position: sticky;
  top: 0;
}

.mktNav[data-hidden="true"] {
  transform: translateY(-100%);
}

.mktNav[data-stuck="true"] {
  background: var(--card);
  border-bottom-color: rgba(var(--ink-deep-rgb), .1);
  box-shadow: 0 1px 16px rgba(var(--c-black-rgb), .06);
}

@media (prefers-reduced-motion: reduce) {
  .mktNav {
    transition: none;
  }

  .mktNav[data-hidden="true"] {
    transform: none;
  }
}

.mktBrand {
  flex: none;
  align-items: center;
  gap: 10px;
  display: flex;
}

.mktBrandMark {
  background: var(--ink);
  width: 30px;
  height: 30px;
  color: var(--c-white);
  border-radius: 9px;
  place-items: center;
  display: grid;
}

.mktBrandMark svg {
  width: 17px;
  height: 17px;
}

.mktBrandName {
  letter-spacing: -.015em;
  color: var(--ink);
  font-size: 19px;
  font-weight: 650;
}

.mktNavLinks {
  color: var(--text-secondary);
  align-items: center;
  gap: 26px;
  font-size: 14.5px;
  font-weight: 500;
  display: flex;
}

.mktNavLinks a:hover {
  color: var(--ink);
}

.mktNavEnd {
  flex: none;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  display: flex;
}

.mktNavLogin {
  color: var(--text-secondary);
  font-size: 14.5px;
  font-weight: 550;
}

.mktNavLogin:hover {
  color: var(--ink);
}

.mktNavCta {
  background: var(--brand);
  height: 38px;
  color: var(--c-white);
  border-radius: 10px;
  align-items: center;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .15s;
  display: inline-flex;
}

.mktNavCta:hover {
  background: var(--brand-strong);
  color: var(--c-white);
}

@media (max-width: 860px) {
  .mktNav {
    gap: 16px;
    padding: 0 20px;
  }

  .mktNavLinks {
    display: none;
  }
}

@media (max-width: 480px) {
  .mktNavLogin {
    display: none;
  }
}

/* [project]/app/styles/parts/73-landing.css [app-client] (css) */
.mktEyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.mktH1 {
  letter-spacing: -.035em;
  color: var(--ink);
  margin: 20px 0 0;
  font-size: clamp(38px, 4.7vw, 66px);
  font-weight: 650;
  line-height: 1;
}

.mktH1Accent {
  color: var(--brand);
}

.mktH2 {
  letter-spacing: -.03em;
  max-width: 640px;
  color: var(--ink);
  margin: 10px 0 0;
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 650;
  line-height: 1.04;
}

.mktLede {
  max-width: 480px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.6;
}

.mktBtn {
  border-radius: 999px;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 620;
  transition: background-color .15s, border-color .15s;
  display: inline-flex;
}

.mktBtnPrimary {
  background: var(--brand);
  color: var(--c-white);
}

.mktBtnPrimary:hover {
  background: var(--brand-strong);
  color: var(--c-white);
}

.mktBtnGhost {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  color: var(--ink);
  padding: 0 26px;
  font-weight: 600;
}

.mktBtnGhost:hover {
  border-color: rgba(var(--ink-deep-rgb), .3);
  color: var(--ink);
}

.mktCtaRow {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  display: flex;
}

.mktMicroLabel {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.mktDot, .mktDotWhite, .mktDotRed, .mktDotGrey, .mktDotWarn {
  border-radius: 999px;
  flex: none;
  width: 7px;
  height: 7px;
}

.mktDot {
  background: var(--success);
}

.mktDotWhite {
  background: var(--c-white);
  width: 6px;
  height: 6px;
}

.mktDotRed {
  background: var(--c-red-59);
  width: 8px;
  height: 8px;
}

.mktDotGrey {
  background: var(--c-warm-77);
  width: 6px;
  height: 6px;
}

.mktDotWarn {
  background: var(--warning);
  width: 8px;
  height: 8px;
}

.mktLive {
  color: var(--success);
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 620;
  display: inline-flex;
}

.mktAvatar, .mktAvatarSm, .mktAvatarMd, .mktAvatarLg {
  color: var(--c-white);
  flex: none;
  place-items: center;
  font-weight: 650;
  display: grid;
}

.mktAvatar {
  border-radius: 13px;
  width: 46px;
  height: 46px;
  font-size: 15px;
}

.mktAvatarSm {
  border-radius: 9px;
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.mktAvatarMd {
  border-radius: 10px;
  width: 36px;
  height: 36px;
  font-size: 12.5px;
  position: relative;
}

.mktAvatarLg {
  border-radius: 12px;
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.tintBrand {
  background: var(--brand);
}

.tintDeep {
  background: var(--brand-deep);
}

.tintGreen {
  background: var(--success);
}

.tintOrange {
  background: var(--warning);
}

.tintViolet {
  background: var(--brand-accent);
}

.tintRed {
  background: var(--danger);
}

.tintAmber {
  background: var(--c-orange-57);
}

.mktWhoText {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.mktBadgeWarn {
  background: rgba(var(--warning-rgb), .12);
  color: var(--warning-strong);
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 650;
}

.mktTag {
  background: rgba(var(--ink-deep-rgb), .05);
  color: var(--c-warm-45);
  white-space: nowrap;
  border-radius: 6px;
  flex: none;
  padding: 3px 8px;
  font-size: 11.5px;
}

.mktKbd {
  background: rgba(var(--ink-deep-rgb), .06);
  color: var(--text-secondary);
  border-radius: 6px;
  margin-left: auto;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 650;
}

.mktHero {
  min-height: calc(100vh - var(--mkt-header-h));
  min-height: calc(100dvh - var(--mkt-header-h));
  padding: 48px var(--page-pad) 56px;
  grid-template-columns: minmax(0, 1fr) 580px;
  align-content: center;
  align-items: center;
  gap: 60px;
  display: grid;
}

.mktShot {
  background: var(--card);
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  box-shadow: 0 24px 60px rgba(var(--ink-deep-rgb), .14);
  border-radius: 22px;
  overflow: hidden;
}

.mktShotBar {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--c-warm-98);
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 18px 0 20px;
  display: flex;
}

.mktShotTitle {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.mktShotBar .mktLive {
  margin-left: auto;
}

.mktPill {
  background: rgba(var(--ink-deep-rgb), .05);
  color: var(--c-warm-45);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
}

.mktOnCall {
  background: var(--ink);
  padding: 18px;
}

.mktOnCallTop {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--success);
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.mktTimer {
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
}

.mktOnCallWho {
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  display: flex;
}

.mktWhoName {
  letter-spacing: -.015em;
  color: var(--c-white);
  font-size: 19px;
  font-weight: 620;
}

.mktWhoMeta {
  color: rgba(var(--c-white-rgb), .55);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.mktEnd {
  background: var(--danger);
  min-width: 48px;
  height: 48px;
  color: var(--c-white);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 620;
  display: inline-flex;
}

.mktOnCallActions {
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.mktCallAction {
  background: rgba(var(--c-white-rgb), .08);
  height: 40px;
  color: rgba(var(--c-white-rgb), .82);
  border-radius: 10px;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.mktShotBlock {
  padding: 16px 18px 18px;
}

.mktShotBlockLined {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  padding-bottom: 16px;
}

.mktDispos {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
  display: flex;
}

.mktDispo {
  border: 1px solid rgba(var(--ink-deep-rgb), .13);
  height: 36px;
  color: var(--ink);
  border-radius: 9px;
  align-items: center;
  padding: 0 15px;
  font-size: 13.5px;
  font-weight: 580;
  display: inline-flex;
}

.mktDispo.isPrimary {
  border-color: var(--success);
  background: var(--success);
  color: var(--c-white);
  font-weight: 620;
}

.mktUpNextHead {
  align-items: center;
  gap: 10px;
  display: flex;
}

.mktUpNextHint {
  color: var(--text-muted);
  margin-left: auto;
  font-size: 12.5px;
}

.mktUpNext {
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  display: flex;
}

.mktQueueRow {
  background: var(--c-warm-98);
  border: 1px solid rgba(var(--ink-deep-rgb), .06);
  border-radius: 11px;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  display: grid;
}

.mktQueueName {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
}

.mktQueueMeta, .mktQueueWhen {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.mktShotFoot {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  color: var(--c-warm-45);
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  font-size: 13px;
  display: flex;
}

.mktBand {
  background: var(--band-muted);
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  min-height: 100dvh;
  padding: 28px var(--page-pad);
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.mktBandHead {
  width: 100%;
  max-width: var(--page-max);
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  margin: 0 auto;
  display: flex;
}

.mktBandNote {
  max-width: 380px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.mktStage {
  width: 100%;
  max-width: var(--page-max);
  margin: 74px auto 0;
  padding: 40px 0 24px;
  position: relative;
}

.mktScreen {
  background: var(--card);
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  box-shadow: 0 30px 70px rgba(var(--ink-deep-rgb), .13);
  border-radius: 16px;
  margin-right: 320px;
  overflow: hidden;
}

.mktScreenBar {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--c-warm-98);
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 18px;
  display: flex;
}

.mktScreenBarEnd {
  align-items: center;
  gap: 10px;
  margin-left: auto;
  display: flex;
}

.mktFromLabel {
  color: var(--text-muted);
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  display: inline-flex;
}

.mktSelect {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  height: 28px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-weight: 600;
  display: inline-flex;
}

.mktSelectLg {
  border-radius: 10px;
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
}

.mktCaret {
  color: var(--c-warm-71);
}

.mktBarStat {
  color: var(--c-warm-45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12.5px;
}

.mktBarMissed {
  background: rgba(var(--c-red-59-rgb), .1);
  height: 28px;
  color: var(--c-red-47);
  white-space: nowrap;
  border-radius: 8px;
  align-items: center;
  padding: 0 11px;
  font-size: 12.5px;
  font-weight: 620;
  display: inline-flex;
}

.mktBarChip {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  height: 28px;
  color: var(--text-secondary);
  white-space: nowrap;
  border-radius: 8px;
  align-items: center;
  padding: 0 11px;
  font-size: 12.5px;
  font-weight: 580;
  display: inline-flex;
}

.mktToggleOn, .mktToggleOff {
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  height: 28px;
  padding: 0 6px 0 11px;
  font-size: 12.5px;
  font-weight: 620;
  display: inline-flex;
}

.mktToggleOn {
  background: var(--success);
  color: var(--c-white);
}

.mktToggleOff {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  color: var(--text-secondary);
  font-weight: 600;
}

.mktSwitch {
  background: rgba(var(--ink-deep-rgb), .1);
  border-radius: 999px;
  align-items: center;
  width: 28px;
  height: 16px;
  padding: 2px;
  display: inline-flex;
}

.mktSwitch.isOn {
  background: rgba(var(--c-white-rgb), .3);
  justify-content: flex-end;
}

.mktSwitchKnob {
  background: var(--c-white);
  width: 12px;
  height: 12px;
  box-shadow: 0 1px 2px rgba(var(--c-black-rgb), .2);
  border-radius: 999px;
}

.mktScreenBody {
  padding: 18px 76px 0 18px;
}

.mktScreenTools {
  align-items: center;
  gap: 12px;
  display: flex;
}

.mktSearch {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  height: 38px;
  color: var(--c-warm-64);
  border-radius: 10px;
  flex: 1;
  align-items: center;
  padding: 0 13px;
  font-size: 13.5px;
  display: inline-flex;
}

.mktFilters {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  display: flex;
}

.mktFilterLabel {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
  font-size: 12px;
  font-weight: 700;
}

.mktFilter {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  height: 28px;
  color: var(--text-secondary);
  white-space: nowrap;
  border-radius: 8px;
  align-items: center;
  padding: 0 11px;
  font-size: 12.5px;
  font-weight: 560;
  display: inline-flex;
}

.mktFilter.isActive {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--c-white);
  font-weight: 640;
}

.mktRows {
  max-height: 366px;
  -webkit-mask-image: linear-gradient(to bottom,
    var(--ink) 0,
    var(--ink) 78%,
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    var(--ink) 0,
    var(--ink) 78%,
    transparent 100%);
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
  display: flex;
  overflow: hidden;
}

.mktRow {
  border: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--card);
  border-radius: 10px;
  grid-template-columns: 14px 16px 30px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  display: grid;
}

.mktRow.isSelected {
  border-color: rgba(var(--ink-deep-rgb), .2);
}

.mktRow.isCalled {
  background: var(--c-warm-98);
  opacity: .7;
}

.mktRow .mktAvatarSm {
  width: 30px;
  height: 30px;
  font-size: 11.5px;
}

.mktGrip {
  color: var(--c-warm-77);
  font-size: 13px;
}

.mktRowNum {
  color: var(--c-warm-71);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
}

.mktRowName {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.mktRowPhone {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.mktRowMeta {
  align-items: center;
  gap: 9px;
  display: inline-flex;
}

.mktRowAge {
  color: var(--c-warm-64);
  white-space: nowrap;
  font-size: 12px;
}

.mktCalled {
  color: var(--success);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 620;
}

.mktChevron {
  color: var(--c-warm-77);
  font-size: 16px;
}

.mktFloat {
  background: var(--card);
  box-shadow: 0 26px 60px rgba(var(--ink-deep-rgb), .2),
    0 0 0 1px rgba(var(--ink-deep-rgb), .07);
  border-radius: 18px;
  position: absolute;
}

.mktFloatCall {
  background: var(--ink);
  box-shadow: 0 24px 55px rgba(var(--ink-deep-rgb), .34);
  border-radius: 16px;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  display: flex;
  top: -26px;
  left: 96px;
}

.mktFloatCallName {
  letter-spacing: -.01em;
  color: var(--c-white);
  font-size: 17px;
  font-weight: 620;
}

.mktFloatCall .mktAvatar {
  border-radius: 12px;
  width: 44px;
  height: 44px;
}

.mktFloatCall .mktWhoMeta {
  font-size: 12.5px;
}

.mktFloatTimer {
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 620;
  display: inline-flex;
}

.mktFloatCallBtns {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.mktFloatCallBtns .mktCallAction {
  background: rgba(var(--c-white-rgb), .1);
  height: 38px;
  color: rgba(var(--c-white-rgb), .85);
  border-radius: 9px;
  flex: none;
  padding: 0 14px;
}

.mktHangUp {
  background: var(--danger);
  height: 38px;
  color: var(--c-white);
  border-radius: 9px;
  align-items: center;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 620;
  display: inline-flex;
}

.mktFloatTeam {
  width: 360px;
  padding: 20px 22px;
  top: 0;
  right: 0;
}

.mktPanelHead {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.mktPanelTitle {
  letter-spacing: -.01em;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
}

.mktPanelAction {
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
}

.mktTeam {
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
  display: flex;
}

.mktTeamRow {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  display: grid;
}

.mktPresence {
  border: 2px solid var(--card);
  background: var(--success);
  border-radius: 999px;
  width: 11px;
  height: 11px;
  position: absolute;
  bottom: -2px;
  right: -2px;
}

.mktPresence.isReady {
  background: var(--brand);
}

.mktTeamName {
  color: var(--ink);
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 620;
  display: inline-flex;
}

.mktOwnerTag {
  background: rgba(var(--ink-deep-rgb), .06);
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.mktTeamStatus {
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
  overflow: hidden;
}

.mktTeamStatus.isLive {
  color: var(--brand);
}

.mktTeamCount {
  color: var(--ink);
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  display: flex;
}

.mktTeamCount.isOffline {
  color: var(--c-warm-77);
}

.mktTeamCountN {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 650;
}

.mktTeamCountLbl {
  letter-spacing: .04em;
  font-size: 10.5px;
}

.mktPanelSplit {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .08);
  margin-top: 20px;
  padding-top: 16px;
}

.mktClosed {
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  display: flex;
}

.mktClosedRow {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  display: grid;
}

.mktTick {
  color: var(--success);
  font-size: 14px;
  font-weight: 700;
}

.mktClosedName {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.mktClosedBy {
  color: var(--text-muted);
  font-size: 12px;
}

.mktFloatRow {
  width: 520px;
  box-shadow: 0 26px 60px rgba(var(--ink-deep-rgb), .22),
    0 0 0 1px rgba(var(--ink-deep-rgb), .07);
  grid-template-columns: 22px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  display: grid;
  bottom: -24px;
  left: -28px;
}

.mktGripLg {
  color: var(--c-warm-77);
  font-size: 19px;
}

.mktFloatRowName {
  letter-spacing: -.015em;
  color: var(--ink);
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 620;
  display: inline-flex;
}

.mktFloatRowMeta {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.mktFloatRowEnd {
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.mktBadgeWarnLg {
  background: rgba(var(--warning-rgb), .13);
  color: var(--warning-strong);
  white-space: nowrap;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 650;
}

.mktFloatRowTried {
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 13px;
}

.mktFloatWrap {
  width: 360px;
  box-shadow: 0 30px 70px rgba(var(--ink-deep-rgb), .24),
    0 0 0 1px rgba(var(--ink-deep-rgb), .07);
  border-radius: 20px;
  padding: 20px;
  top: 40px;
  right: 0;
}

.mktAnswered {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-deep);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 650;
  display: inline-flex;
}

.mktWrapTitle {
  color: var(--ink);
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 650;
}

.mktWrapList {
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.mktWrapItem {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  display: flex;
}

.mktWrapItem.isPrimary {
  border-color: var(--success);
  background: var(--success);
}

.mktWrapLabel {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 640;
}

.mktWrapSub {
  color: var(--text-muted);
  font-size: 12px;
}

.mktWrapItem.isPrimary .mktWrapLabel {
  color: var(--c-white);
}

.mktWrapItem.isPrimary .mktWrapSub {
  color: rgba(var(--c-white-rgb), .75);
}

.mktWrapKey {
  background: rgba(var(--ink-deep-rgb), .06);
  color: var(--c-warm-45);
  border-radius: 6px;
  flex: none;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 650;
}

.mktWrapItem.isPrimary .mktWrapKey {
  background: rgba(var(--c-white-rgb), .22);
  color: var(--c-white);
}

.mktWrapFoot {
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  display: flex;
}

.mktRedial {
  border: 1px solid rgba(var(--ink-deep-rgb), .13);
  height: 42px;
  color: var(--text-secondary);
  border-radius: 10px;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 580;
  display: inline-flex;
}

.mktSaveNext {
  background: var(--brand);
  height: 42px;
  color: var(--c-white);
  border-radius: 10px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 620;
  display: inline-flex;
}

.mktKbdOn {
  background: rgba(var(--c-white-rgb), .22);
  border-radius: 5px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 11px;
}

@media (max-width: 1180px) {
  .mktStage {
    flex-direction: column;
    gap: 20px;
    padding: 0;
    display: flex;
  }

  .mktScreen {
    margin-right: 0;
  }

  .mktFloat {
    width: auto;
    position: static;
  }

  .mktFloatCall {
    display: none;
  }

  .mktFloatRow {
    grid-template-columns: 22px 44px minmax(0, 1fr) auto;
  }

  .mktScreenBody {
    padding-right: 18px;
  }
}

@media (max-width: 900px) {
  .mktHero {
    padding: 56px var(--page-pad) 64px;
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .mktLede {
    max-width: none;
  }

  .mktBand {
    padding: 64px var(--page-pad) 72px;
  }

  .mktBandHead {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .mktBandNote {
    max-width: none;
  }

  .mktScreenBar, .mktScreenTools {
    display: none;
  }
}

@media (max-width: 620px) {
  .mktHero {
    padding: 40px var(--page-pad) 48px;
  }

  .mktBand {
    padding: 48px var(--page-pad) 56px;
  }

  .mktRow {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .mktGrip, .mktRowNum, .mktChevron, .mktRowMeta .mktTag, .mktRowAge {
    display: none;
  }

  .mktQueueRow {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .mktQueueWhen {
    display: none;
  }

  .mktFloatRow {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .mktGripLg, .mktFloatRowEnd {
    display: none;
  }

  .mktOnCallActions {
    flex-wrap: wrap;
  }

  .mktCallAction {
    flex: calc(50% - 4px);
  }
}

/* [project]/app/styles/parts/74-landing-funnels.css [app-client] (css) */
.mktBandAlt {
  background: var(--card);
}

.mktH2Wide {
  max-width: 860px;
}

.mktFlowStage {
  width: 100%;
  max-width: var(--page-max);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  margin: 56px auto 0;
  display: grid;
}

.mktFlowCard {
  background: var(--card);
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  box-shadow: 0 24px 55px rgba(var(--ink-deep-rgb), .1);
  border-radius: 16px;
  overflow: hidden;
}

.mktFlowCardBar {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--c-warm-98);
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 18px;
  display: flex;
}

.mktFlowName {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.mktFlowLive {
  background: var(--success);
  height: 28px;
  color: var(--c-white);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  padding: 0 6px 0 11px;
  font-size: 12.5px;
  font-weight: 620;
  display: inline-flex;
}

.mktFlowLive .mktDot {
  background: var(--c-white);
}

.mktFlowNodes {
  flex-direction: column;
  padding: 20px 22px 22px;
  display: flex;
}

.mktNodeWrap {
  flex-direction: column;
  display: flex;
}

.mktConn {
  background: rgba(var(--ink-deep-rgb), .13);
  width: 2px;
  height: 18px;
  margin-left: 21px;
}

.mktNode {
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(var(--ink-deep-rgb), .04);
  border-radius: 12px;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  display: flex;
}

.mktNodeIcon {
  width: 34px;
  height: 34px;
  color: var(--c-white);
  border-radius: 10px;
  flex: none;
  place-items: center;
  display: grid;
}

.mktNodeIcon svg {
  width: 18px;
  height: 18px;
}

.tintFacebook {
  background: var(--brand-facebook);
}

.mktNodeBody {
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.mktNodeChip {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
}

.mktNodeTitle {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 620;
}

.mktNodeDesc {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  overflow: hidden;
}

.mktNodeEnd {
  background: rgba(var(--brand-rgb), .09);
  color: var(--brand-deep);
  border-radius: 999px;
  align-self: flex-start;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 620;
  display: inline-flex;
}

.mktNodeEndDot {
  background: var(--brand);
  border-radius: 999px;
  width: 7px;
  height: 7px;
}

.mktFlowLog {
  background: var(--c-warm-98);
  border: 1px solid rgba(var(--ink-deep-rgb), .07);
  border-radius: 16px;
  padding: 20px 22px 22px;
}

.mktFlowLogHead {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.mktFlowLogCount {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

.mktFlowLogRows {
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  display: flex;
}

.mktRunRow {
  background: var(--card);
  border-radius: 9px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  display: grid;
}

.mktRunMark {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.mktRunMark.ok {
  color: var(--success);
}

.mktRunMark.stopped {
  color: var(--warning-strong);
}

.mktRunName {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.mktRunDetail {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.mktRunDetail.stopped {
  color: var(--warning-strong);
}

.mktRunWhen {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  display: inline-flex;
}

.mktRunMs {
  background: rgba(var(--ink-deep-rgb), .05);
  color: var(--c-warm-45);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .mktFlowStage {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
}

@media (max-width: 620px) {
  .mktFlowNodes {
    padding: 16px;
  }

  .mktNode {
    gap: 11px;
    padding: 10px 12px;
  }

  .mktNodeDesc {
    display: none;
  }

  .mktFlowLog {
    padding: 16px;
  }

  .mktRunMs {
    display: none;
  }
}

/* [project]/app/styles/parts/75-landing-floor.css [app-client] (css) */
.mktFloorStage {
  width: 100%;
  max-width: var(--page-max);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin: 64px auto 0;
  display: grid;
}

.mktFloorMain, .mktFloorSide {
  flex-direction: column;
  gap: 24px;
  display: flex;
}

.mktFloorPanel {
  background: var(--card);
  border: 1px solid rgba(var(--ink-deep-rgb), .07);
  box-shadow: 0 18px 44px rgba(var(--ink-deep-rgb), .07);
  border-radius: 16px;
  flex-direction: column;
  padding: 26px 28px;
  display: flex;
}

.mktFloorTeam {
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  display: flex;
}

.mktFloorLock {
  flex-direction: column;
  display: flex;
}

.mktLockRow {
  background: var(--surface-sunken);
  border: 1px solid rgba(var(--ink-deep-rgb), .07);
  opacity: .72;
  border-radius: 12px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 15px 16px;
  display: grid;
}

.mktLockChip {
  background: rgba(var(--warning-rgb), .13);
  color: var(--warning-strong);
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
}

.mktLockChip svg {
  width: 13px;
  height: 13px;
}

.mktLockNote {
  color: var(--text-muted);
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.mktTotals {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  display: grid;
}

.mktTotal {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.mktTotalN {
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 650;
}

.mktTotalLbl {
  color: var(--text-muted);
  font-size: 12px;
}

.mktAccess {
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.mktAccessRow {
  background: var(--surface-sunken);
  border-radius: 10px;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 13px;
  display: flex;
}

.mktAccessName {
  color: var(--ink);
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
}

.mktAccessFlows {
  color: var(--brand);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 550;
  overflow: hidden;
}

@media (max-width: 1180px) {
  .mktFloorStage {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 40px;
  }

  .mktFloorSide {
    gap: 20px;
  }
}

@media (max-width: 620px) {
  .mktFloorPanel {
    padding: 18px;
  }

  .mktFloorTeam {
    gap: 15px;
  }

  .mktTotalN {
    font-size: 22px;
  }

  .mktLockRow {
    grid-template-columns: 32px minmax(0, 1fr);
    row-gap: 10px;
  }

  .mktLockChip {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* [project]/app/styles/parts/76-landing-compliance.css [app-client] (css) */
.mktCompStage {
  width: 100%;
  max-width: var(--page-max);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin: 64px auto 0;
  display: grid;
}

.mktCompList {
  flex-direction: column;
  display: flex;
}

.mktCompCount {
  color: var(--text-muted);
  font-size: 12.5px;
}

.mktCompRows {
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.mktCompRow {
  background: var(--surface-sunken);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  display: flex;
}

.mktCompWho {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
}

.mktCompReason {
  white-space: nowrap;
  background: rgba(var(--ink-deep-rgb), .05);
  color: var(--c-warm-45);
  border-radius: 999px;
  flex: none;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 650;
}

.mktCompReason.sms_stop {
  background: rgba(var(--brand-rgb), .1);
  color: var(--brand-deep);
}

.mktCompReason.complaint {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger-strong);
}

.mktCompBlock {
  border-color: rgba(var(--danger-rgb), .18);
}

.mktCompBadge {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger-strong);
  border-radius: 999px;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 650;
  display: inline-flex;
}

.mktCompBadge svg {
  width: 14px;
  height: 14px;
}

.mktCompSpoken {
  color: var(--ink);
  text-wrap: pretty;
  margin: 14px 0 0;
  font-size: 16.5px;
  line-height: 1.5;
}

.mktCompSpoken strong {
  color: var(--danger-strong);
  font-weight: 680;
}

.mktHoursRow {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  display: flex;
}

.mktHoursVal {
  background: var(--surface-sunken);
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 19px;
  font-weight: 650;
}

.mktHoursTo, .mktHoursZone {
  color: var(--text-muted);
  font-size: 13px;
}

@media (max-width: 1180px) {
  .mktCompStage {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
}

@media (max-width: 620px) {
  .mktCompRow {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }

  .mktCompSpoken {
    font-size: 15px;
  }

  .mktHoursZone {
    flex: 100%;
  }
}

/* [project]/app/styles/parts/77-landing-sequence.css [app-client] (css) */
.seqScene {
  min-height: 100dvh;
  padding: 28px var(--page-pad);
  background: var(--c-warm-95b);
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.seqScene:nth-child(2n) {
  background: var(--card);
}

.seqViz {
  width: 100%;
}

.seqViz > * {
  zoom: .94;
}

.seqRail {
  display: none;
}

@media (max-width: 1180px) {
  .seqViz {
    overscroll-behavior-x: contain;
    padding-bottom: 14px;
    overflow-x: auto;
  }
}

@media (max-width: 900px) {
  .seqScene {
    padding: 64px var(--page-pad);
  }
}

@media (max-width: 620px) {
  .seqScene {
    padding: 48px var(--page-pad);
  }
}

@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
  .seq[data-live="true"] {
    background: var(--c-warm-95b);
    height: 500vh;
    position: relative;
  }

  .seq[data-live="true"] .seqStage {
    grid-template-areas: "scene";
    height: 100dvh;
    display: grid;
    position: sticky;
    top: 0;
    overflow: hidden;
  }

  .seq[data-live="true"] .seqScene {
    height: 100%;
    min-height: 0;
    padding: 28px var(--page-pad);
    background: none;
    border-top: 0;
    grid-area: scene;
    transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .5s;
  }

  .seq[data-live="true"] .seqScene[data-state="on"] {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
    transform: none;
  }

  .seq[data-live="true"] .seqScene[data-state="next"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 34px, 0);
  }

  .seq[data-live="true"] .seqScene[data-state="past"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -34px, 0);
  }

  .seq[data-live="true"] .seqHead {
    flex: none;
  }

  .seq[data-live="true"] .seqScene[data-state="on"] .mktEyebrow, .seq[data-live="true"] .seqScene[data-state="on"] .mktH2, .seq[data-live="true"] .seqScene[data-state="on"] .mktBandNote {
    animation: .7s cubic-bezier(.22, 1, .36, 1) both seqRise;
  }

  .seq[data-live="true"] .seqScene[data-state="on"] .mktH2 {
    animation-delay: 40ms;
  }

  .seq[data-live="true"] .seqScene[data-state="on"] .mktBandNote {
    animation-delay: .1s;
  }

  .seq[data-live="true"] .seqViz {
    flex: auto;
    align-items: center;
    min-height: 0;
    display: flex;
  }

  .seq[data-live="true"] .seqViz > * {
    width: 100%;
  }

  .seq[data-live="true"] .mktStage, .seq[data-live="true"] .mktFlowStage, .seq[data-live="true"] .mktFloorStage, .seq[data-live="true"] .mktCompStage {
    margin-top: 0;
  }

  .seq[data-live="true"] .seqScene[data-state="on"] .seqViz > * > * > * > * {
    animation: .72s cubic-bezier(.22, 1, .36, 1) both seqPanel;
  }

  .seq[data-live="true"] .seqScene[data-state="on"] .seqViz > * > * > * > :first-child {
    animation-delay: 80ms;
  }

  .seq[data-live="true"] .seqScene[data-state="on"] .seqViz > * > * > * > :nth-child(2) {
    animation-delay: .16s;
  }

  .seq[data-live="true"] .seqScene[data-state="on"] .seqViz > * > * > * > :nth-child(3) {
    animation-delay: .22s;
  }

  .seq[data-live="true"] .seqScene[data-state="on"] .seqViz > * > * > * > :nth-child(n+4) {
    animation-delay: .28s;
  }

  .seq[data-live="true"] .seqRail {
    z-index: 3;
    flex-direction: column;
    gap: 4px;
    display: flex;
    position: absolute;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
  }

  .seqRailItem {
    width: 22px;
    height: 22px;
    color: var(--text-muted);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    transition: color .25s;
    display: flex;
    position: relative;
  }

  .seqRailItem:hover, .seqRailItem[data-on="true"] {
    color: var(--ink);
  }

  .seqRailDot {
    background: rgba(var(--ink-deep-rgb), .22);
    border-radius: 999px;
    width: 6px;
    height: 6px;
    transition: background-color .25s, transform .25s;
  }

  .seqRailItem[data-on="true"] .seqRailDot {
    background: var(--brand);
    transform: scale(1.5);
  }

  .seqRailLabel {
    background: var(--ink);
    color: var(--ink-soft);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    border-radius: 7px;
    padding: 4px 9px;
    font-size: 11.5px;
    transition: opacity .22s, transform .22s;
    position: absolute;
    top: 50%;
    right: calc(100% + 4px);
    transform: translateY(-50%)translateX(6px);
  }

  .seqRail:hover .seqRailLabel, .seqRailItem:focus-visible .seqRailLabel {
    opacity: 1;
    transform: translateY(-50%);
  }
}

@keyframes seqRise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes seqPanel {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0)scale(.986);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* [project]/app/styles/parts/78-landing-what.css [app-client] (css) */
.wiBand {
  min-height: 100dvh;
  padding: var(--band-pad) var(--page-pad);
  background: var(--ink);
  align-items: center;
  display: flex;
}

.wiCard {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}

.wiHead {
  justify-content: space-between;
  align-items: flex-end;
  gap: 80px;
  display: flex;
}

.wiTitle {
  letter-spacing: -.035em;
  max-width: 700px;
  color: var(--c-white);
  text-wrap: pretty;
  margin: 0;
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 650;
  line-height: 1.06;
}

.wiNote {
  max-width: 340px;
  color: rgba(var(--c-white-rgb), .6);
  text-wrap: pretty;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.wiSteps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  margin: 200px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.wiStep {
  padding-right: 28px;
}

.wiStep:last-child {
  padding-right: 0;
}

.wiRule {
  align-items: center;
  gap: 12px;
  display: flex;
}

.wiDot {
  background: rgba(var(--c-white-rgb), .35);
  border-radius: 999px;
  flex: none;
  width: 11px;
  height: 11px;
}

.wiDot.is-start {
  background: var(--brand);
}

.wiDot.is-end {
  background: var(--success);
}

.wiLine {
  background: rgba(var(--c-white-rgb), .14);
  flex: 1;
  height: 1px;
}

.wiNum {
  letter-spacing: .1em;
  color: rgba(var(--c-white-rgb), .35);
  font-variant-numeric: tabular-nums;
  margin-top: 30px;
  font-size: 12px;
  font-weight: 700;
  display: block;
}

.wiStepTitle {
  letter-spacing: -.02em;
  color: var(--c-white);
  margin: 12px 0 0;
  font-size: 25px;
  font-weight: 620;
}

.wiStepBody {
  max-width: 200px;
  color: rgba(var(--c-white-rgb), .5);
  text-wrap: pretty;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .wiBand {
    padding: 72px var(--page-pad);
  }

  .wiSteps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 48px;
    margin-top: 88px;
  }
}

@media (max-width: 900px) {
  .wiHead {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .wiNote {
    max-width: none;
  }

  .wiSteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wiStep {
    padding-right: 20px;
  }
}

@media (max-width: 620px) {
  .wiBand {
    padding: 56px var(--page-pad);
  }

  .wiSteps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
  }

  .wiStep, .wiStep:last-child {
    padding-right: 0;
  }

  .wiStepTitle {
    font-size: 24px;
  }

  .wiStepBody {
    max-width: none;
  }
}

/* [project]/app/styles/parts/79-landing-walkthrough.css [app-client] (css) */
.wtBand {
  min-height: 100dvh;
  padding: var(--band-pad) var(--page-pad);
  background: var(--band-muted);
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.wtInner {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}

.wtHead {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  display: flex;
}

.wtEyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.wtTitle {
  letter-spacing: -.03em;
  max-width: 780px;
  color: var(--ink);
  margin: 12px 0 0;
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 650;
  line-height: 1.05;
}

.wtLede {
  max-width: 340px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.wtBody {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  margin-top: clamp(32px, 4.5vh, 60px);
  display: grid;
}

.wtNav {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.wtTab {
  text-align: left;
  border-radius: 12px;
  width: 100%;
  padding: 16px 18px 16px 20px;
  transition: background-color .2s;
  display: block;
  position: relative;
}

.wtTab:hover {
  background: rgba(var(--ink-deep-rgb), .03);
}

.wtTab[data-on="true"] {
  background: var(--card);
  box-shadow: 0 10px 30px rgba(var(--ink-deep-rgb), .06);
}

.wtTab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.wtTabHead {
  align-items: baseline;
  gap: 14px;
  display: flex;
}

.wtNum {
  letter-spacing: .08em;
  color: var(--c-warm-71);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  transition: color .2s;
}

.wtTab[data-on="true"] .wtNum {
  color: var(--brand);
}

.wtStepTitle {
  letter-spacing: -.02em;
  color: var(--c-warm-45);
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 640;
  line-height: 1.25;
  transition: color .2s;
}

.wtTab[data-on="true"] .wtStepTitle {
  color: var(--ink);
}

.wtTabDetail {
  padding: 12px 0 2px 34px;
  display: block;
}

.wtTabDetail[hidden] {
  display: none;
}

.wtStepBody {
  color: var(--text-secondary);
  text-wrap: pretty;
  font-size: 15px;
  line-height: 1.6;
  display: block;
}

.wtProgress {
  transform-origin: 0;
  background: var(--brand);
  border-radius: 999px;
  width: 100%;
  height: 2px;
  animation: 6s linear forwards wtFill;
  position: absolute;
  bottom: 0;
  left: 0;
}

@keyframes wtFill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.wtStage {
  min-height: 420px;
  position: relative;
}

.wtPanel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  align-items: center;
  transition: opacity .35s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .35s;
  display: flex;
  position: absolute;
  inset: 0;
  transform: translate3d(0, 12px, 0);
}

.wtPanel[data-on="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
  transform: none;
}

.wtPanel > * {
  width: 100%;
}

.wtArt {
  min-width: 0;
}

.wtScreen {
  background: var(--card);
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  box-shadow: 0 24px 55px rgba(var(--ink-deep-rgb), .1);
  border-radius: 16px;
  padding-bottom: 18px;
  overflow: hidden;
}

.wtScreenBar {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  background: var(--c-warm-98);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 18px;
  display: flex;
}

.wtBarStrong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 650;
}

.wtBarMuted {
  color: var(--text-muted);
  font-size: 12.5px;
}

.wtWho {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.wtDot, .wtDotWhite {
  border-radius: 999px;
  flex: none;
  width: 7px;
  height: 7px;
}

.wtDot {
  background: var(--success);
}

.wtDotWhite {
  background: var(--c-white);
  width: 6px;
  height: 6px;
}

.wtMapRows {
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 0;
  display: flex;
}

.wtMapRow {
  background: var(--c-warm-98);
  border: 1px solid rgba(var(--ink-deep-rgb), .06);
  border-radius: 11px;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  display: grid;
}

.wtMapCol {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 620;
  overflow: hidden;
}

.wtMapSample {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.wtArrow {
  text-align: center;
  color: var(--c-warm-71);
  font-size: 13px;
}

.wtSelect {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  height: 34px;
  color: var(--ink);
  white-space: nowrap;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  overflow: hidden;
}

.wtSelect.isExtra {
  color: var(--text-muted);
  font-weight: 550;
}

.wtCaret {
  color: var(--c-warm-71);
}

.wtModalHead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  padding: 18px 20px 14px;
}

.wtModalTitle {
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  display: block;
}

.wtModalSub {
  color: var(--text-muted);
  margin-top: 3px;
  font-size: 13px;
  display: block;
}

.wtPage {
  color: var(--text-secondary);
  padding: 16px 20px 10px;
  font-size: 13px;
  font-weight: 650;
}

.wtForms {
  flex-direction: column;
  gap: 8px;
  padding: 0 18px;
  display: flex;
}

.wtFormRow {
  background: var(--c-warm-98);
  border: 1px solid rgba(var(--ink-deep-rgb), .06);
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  display: flex;
}

.wtFormName {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.wtLiveBadge {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-deep);
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 650;
  display: inline-flex;
}

.wtReady {
  color: var(--success);
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 620;
  display: inline-flex;
}

.wtToggleOn {
  background: var(--success);
  height: 26px;
  color: var(--c-white);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 620;
  display: inline-flex;
}

.wtQueue {
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 0;
  display: flex;
}

.wtQueueRow {
  background: var(--card);
  border: 1px solid rgba(var(--ink-deep-rgb), .07);
  border-radius: 12px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  display: grid;
}

.wtQueueRow.isDue {
  border-color: rgba(var(--success-rgb), .45);
}

.wtAvatar {
  width: 34px;
  height: 34px;
  color: var(--c-white);
  border-radius: 10px;
  place-items: center;
  font-size: 12px;
  font-weight: 650;
  display: grid;
}

.wtOrange {
  background: var(--warning);
}

.wtViolet {
  background: var(--brand-accent);
}

.wtRed {
  background: var(--danger);
}

.wtName {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 620;
}

.wtMeta {
  color: var(--text-muted);
  font-size: 12.5px;
}

.wtTag {
  background: rgba(var(--ink-deep-rgb), .05);
  color: var(--c-warm-45);
  border-radius: 999px;
  flex: none;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 640;
}

.wtTag.isDue {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-deep);
}

.wtCallBtn {
  background: var(--success);
  height: 46px;
  color: var(--c-white);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  margin: 14px 18px 0;
  font-size: 15.5px;
  font-weight: 650;
  display: flex;
}

.wtScreenDark {
  background: var(--ink);
  border-color: rgba(var(--c-white-rgb), .08);
  padding: 22px;
}

.wtAnswered {
  background: rgba(var(--success-rgb), .16);
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 650;
  display: inline-flex;
}

.wtWrapAsk {
  color: var(--c-white);
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 650;
}

.wtOutcomes {
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.wtOutcome {
  background: rgba(var(--c-white-rgb), .07);
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
}

.wtOutcome.isPrimary {
  background: var(--success);
}

.wtOutcomeLabel {
  color: var(--c-white);
  font-size: 14.5px;
  font-weight: 640;
}

.wtOutcomeSub {
  color: rgba(var(--c-white-rgb), .55);
  font-size: 12.5px;
}

.wtOutcome.isPrimary .wtOutcomeSub {
  color: rgba(var(--c-white-rgb), .75);
}

.wtOutcomeKey {
  background: rgba(var(--c-white-rgb), .12);
  color: rgba(var(--c-white-rgb), .75);
  border-radius: 6px;
  margin-left: auto;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 650;
}

.wtWrapFoot {
  background: var(--brand);
  height: 44px;
  color: var(--c-white);
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 620;
  display: flex;
}

.wtKbd {
  background: rgba(var(--c-white-rgb), .22);
  border-radius: 5px;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 11.5px;
}

@media (max-width: 1080px) {
  .wtBand {
    min-height: 0;
  }

  .wtBody {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .wtStage {
    min-height: 380px;
  }
}

@media (max-width: 620px) {
  .wtHead {
    gap: 18px;
  }

  .wtLede {
    max-width: none;
  }

  .wtTab {
    padding: 14px;
  }

  .wtTabDetail {
    padding-left: 0;
  }

  .wtStage {
    min-height: 340px;
  }

  .wtMapRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .wtArrow {
    display: none;
  }

  .wtScreenBar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    height: auto;
    padding: 12px 14px;
  }
}

/* [project]/app/styles/parts/80-landing-mobile.css [app-client] (css) */
.msBand {
  background: var(--ink);
  height: 100dvh;
  min-height: 560px;
  padding: var(--band-pad) var(--page-pad) 0;
  align-items: stretch;
  display: flex;
  position: relative;
  overflow: hidden;
}

.msInner {
  width: 100%;
  max-width: var(--page-max);
  flex-direction: column;
  margin: 0 auto;
  display: flex;
}

.msHead {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  display: flex;
}

.msEyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--c-white-rgb), .45);
  font-size: 12px;
  font-weight: 700;
}

.msTitle {
  letter-spacing: -.03em;
  max-width: 720px;
  color: var(--c-white);
  margin: 12px 0 0;
  font-size: clamp(34px, 3.3vw, 52px);
  font-weight: 650;
  line-height: 1.03;
}

.msLede {
  max-width: 400px;
  color: rgba(var(--c-white-rgb), .55);
  text-wrap: pretty;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
}

.msGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(28px, 4.5vh, 56px);
  display: grid;
}

.msPoint {
  border-top: 1px solid rgba(var(--c-white-rgb), .16);
  flex-direction: column;
  padding-top: 18px;
  display: flex;
}

.msPointTitle {
  letter-spacing: -.012em;
  color: var(--c-white);
  text-wrap: pretty;
  font-size: 17px;
  font-weight: 640;
}

.msPointBody {
  color: rgba(var(--c-white-rgb), .52);
  text-wrap: pretty;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.msPhones {
  flex: auto;
  justify-content: center;
  align-items: flex-start;
  gap: 44px;
  min-height: 0;
  margin-top: clamp(24px, 4vh, 56px);
  display: flex;
  overflow: hidden;
}

.msPhoneHigh {
  flex: none;
}

.msPhoneLow {
  flex: none;
  margin-top: 50px;
}

@media (max-width: 1280px) {
  .msPhones {
    transform-origin: top;
    transform: scale(.86);
  }
}

@media (max-width: 1080px) {
  .msGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
  }

  .msPhones {
    transform: scale(.72);
  }
}

@media (max-width: 760px) {
  .msBand {
    height: auto;
    min-height: 100dvh;
  }

  .msHead {
    gap: 20px;
  }

  .msGrid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .msPhones > div:not(.msPhoneHigh) {
    display: none;
  }

  .msPhoneHigh {
    margin-top: 0;
  }

  .msPhones {
    transform: scale(.9);
  }
}

@media (max-height: 900px) {
  .msLede {
    font-size: 15px;
  }

  .msPointTitle {
    font-size: 15.5px;
  }

  .msPointBody {
    font-size: 13px;
    line-height: 1.42;
  }
}

.msBand:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--ink-deep-rgb), 0) 0%,
    rgba(var(--ink-deep-rgb), .7) 55%,
    var(--ink) 100%);
  height: 190px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* [project]/app/styles/parts/81-landing-getstarted.css [app-client] (css) */
.gsBand {
  padding: var(--band-pad) var(--page-pad);
  background: var(--card);
}

.gsInner {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}

.gsHead {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  display: flex;
}

.gsEyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.gsTitle {
  letter-spacing: -.03em;
  max-width: 720px;
  color: var(--ink);
  margin: 12px 0 0;
  font-size: clamp(30px, 3.3vw, 46px);
  font-weight: 650;
  line-height: 1.03;
}

.gsLede {
  max-width: 380px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.gsSteps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.gsStep {
  border-left: 1px solid rgba(var(--ink-deep-rgb), .12);
  padding: 0 40px;
}

.gsStep:first-child {
  border-left: 0;
  padding-left: 0;
}

.gsStepHead {
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.gsStepNum {
  letter-spacing: .08em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
}

.gsStepTitle {
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  font-size: 22px;
  font-weight: 640;
}

.gsStepBody {
  max-width: 400px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.gsCta {
  background: var(--ink);
  border-radius: 24px;
  grid-template-columns: minmax(0, 1fr) 620px;
  align-items: center;
  gap: 80px;
  margin-top: 80px;
  padding: 56px 64px;
  display: grid;
}

.gsBadge {
  background: rgba(var(--c-white-rgb), .1);
  height: 30px;
  color: var(--c-white);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 12.5px;
  font-weight: 620;
  display: inline-flex;
}

.gsBadgeDot {
  background: var(--success);
  border-radius: 999px;
  width: 7px;
  height: 7px;
}

.gsCtaTitle {
  letter-spacing: -.03em;
  max-width: 460px;
  color: var(--c-white);
  margin: 20px 0 0;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 650;
  line-height: 1.06;
}

.gsCtaBody {
  max-width: 430px;
  color: rgba(var(--c-white-rgb), .55);
  text-wrap: pretty;
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.gsForm {
  background: var(--card);
  border-radius: 20px;
  padding: 34px;
}

.gsFields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.gsField {
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.gsFieldWide {
  grid-column: 1 / -1;
}

.gsLabel {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.gsInput {
  background: var(--c-warm-98);
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  min-height: 50px;
  color: var(--ink);
  border-radius: 11px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}

.gsInput:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
  outline: none;
}

.gsInput[aria-invalid="true"] {
  border-color: var(--danger);
}

.gsTextarea {
  resize: vertical;
  min-height: 76px;
  padding: 14px 16px;
  line-height: 1.5;
}

.gsError {
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 600;
}

.gsPot {
  width: 1px;
  height: 1px;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}

.gsFoot {
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  display: flex;
}

.gsSubmit {
  background: var(--brand);
  height: 52px;
  color: var(--c-white);
  border-radius: 12px;
  align-items: center;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 640;
  transition: background-color .15s;
  display: inline-flex;
}

.gsSubmit:hover:not(:disabled) {
  background: var(--brand-strong);
}

.gsSubmit:disabled {
  opacity: .6;
  cursor: default;
}

.gsFootNote {
  color: var(--text-muted);
  text-wrap: pretty;
  flex: 200px;
  font-size: 13.5px;
  line-height: 1.5;
}

.gsSent {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 340px;
  display: flex;
}

.gsSentMark {
  background: rgba(var(--success-rgb), .12);
  width: 44px;
  height: 44px;
  color: var(--success-deep);
  border-radius: 999px;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  display: grid;
}

.gsSentTitle {
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 18px 0 0;
  font-size: 21px;
  font-weight: 650;
}

.gsSentBody {
  max-width: 420px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .gsCta {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 44px;
  }

  .gsCtaTitle, .gsCtaBody {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .gsHead {
    gap: 20px;
  }

  .gsSteps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .gsStep {
    border-left: 0;
    border-top: 1px solid rgba(var(--ink-deep-rgb), .12);
    padding: 20px 0 0;
  }

  .gsStep:first-child {
    border-top: 1px solid rgba(var(--ink-deep-rgb), .12);
    padding-top: 20px;
  }
}

@media (max-width: 620px) {
  .gsCta {
    border-radius: 18px;
    padding: 28px 22px;
  }

  .gsForm {
    padding: 22px;
  }

  .gsFields {
    grid-template-columns: minmax(0, 1fr);
  }

  .gsSent {
    min-height: 0;
  }
}

/* [project]/app/styles/parts/82-landing-scene-cards.css [app-client] (css) */
.seqVizMobile {
  display: none;
}

@media (max-width: 1180px) {
  .seqViz {
    display: none;
  }

  .seqVizMobile {
    width: 100%;
    margin-top: 30px;
    display: block;
  }

  .mvCard {
    background: var(--card);
    border: 1px solid rgba(var(--ink-deep-rgb), .09);
    width: 100%;
    box-shadow: 0 18px 40px rgba(var(--ink-deep-rgb), .09);
    border-radius: 16px;
    overflow: hidden;
  }

  .mvBar {
    border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
    background: var(--c-warm-98);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    display: flex;
  }

  .mvLive {
    color: var(--danger);
    font-variant-numeric: tabular-nums;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 650;
    display: inline-flex;
  }

  .mvDot {
    background: var(--danger);
    border-radius: 999px;
    flex: none;
    width: 7px;
    height: 7px;
  }

  .mvWho {
    color: var(--ink);
    font-size: 14px;
    font-weight: 640;
  }

  .mvPill {
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand);
    border-radius: 999px;
    flex: none;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 650;
  }

  .mvBody {
    padding: 14px 16px 16px;
  }

  .mvFoot {
    color: var(--text-muted);
    text-wrap: pretty;
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
  }

  .mvAsk {
    color: var(--ink);
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 650;
  }

  .mvChoice {
    border: 1px solid rgba(var(--ink-deep-rgb), .09);
    color: var(--ink);
    border-radius: 11px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 620;
    display: flex;
  }

  .mvChoice + .mvChoice {
    margin-top: 8px;
  }

  .mvChoiceWin {
    background: var(--success);
    border-color: var(--success);
    color: var(--c-white);
  }

  .mvKey {
    background: rgba(var(--ink-deep-rgb), .06);
    color: var(--text-muted);
    border-radius: 6px;
    flex: none;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 650;
  }

  .mvChoiceWin .mvKey {
    background: rgba(var(--c-white-rgb), .22);
    color: var(--c-white);
  }

  .mvFlowRow {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 12px;
    display: grid;
  }

  .mvRail {
    flex-direction: column;
    align-items: center;
    padding-top: 5px;
    display: flex;
  }

  .mvNode {
    background: rgba(var(--ink-deep-rgb), .25);
    border-radius: 999px;
    flex: none;
    width: 9px;
    height: 9px;
  }

  .mvNode.is-in {
    background: var(--brand);
  }

  .mvNode.is-out {
    background: var(--success);
  }

  .mvStem {
    background: rgba(var(--ink-deep-rgb), .14);
    flex: 1;
    width: 1px;
    margin: 4px 0;
  }

  .mvFlowText {
    flex-direction: column;
    padding-bottom: 16px;
    display: flex;
  }

  .mvFlowRow:last-child .mvFlowText {
    padding-bottom: 0;
  }

  .mvFlowTag {
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 640;
  }

  .mvFlowDetail {
    color: var(--text-muted);
    margin-top: 2px;
    font-size: 12.5px;
  }

  .mvLogRow {
    border-bottom: 1px solid rgba(var(--ink-deep-rgb), .06);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    display: grid;
  }

  .mvLogRow:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .mvTime {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
  }

  .mvWhat {
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
  }

  .mvBy {
    color: var(--text-muted);
    font-size: 12px;
  }

  .mvSlot {
    background: var(--c-warm-98);
    border: 1px solid rgba(var(--ink-deep-rgb), .06);
    border-radius: 11px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    display: flex;
  }

  .mvSlot + .mvSlot {
    margin-top: 8px;
  }

  .mvSlotOn {
    background: var(--brand);
    border-color: var(--brand);
  }

  .mvSlotTime {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex: none;
    font-size: 12.5px;
    font-weight: 650;
  }

  .mvSlotName {
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 620;
  }

  .mvSlotOn .mvSlotTime {
    color: rgba(var(--c-white-rgb), .75);
  }

  .mvSlotOn .mvSlotName {
    color: var(--c-white);
  }
}

@media (max-width: 620px) {
  .seqVizMobile {
    margin-top: 24px;
  }

  .mvBody {
    padding: 13px 14px 14px;
  }

  .mvBar {
    padding: 12px 14px;
  }
}

/* [project]/app/styles/parts/83-webhook-source.css [app-client] (css) */
.urlModal {
  background: var(--card);
  border-radius: 16px;
  width: min(620px, 94vw);
  overflow: hidden;
}

.urlBody {
  padding: 18px 20px 20px;
}

.urlBox {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-warm-98);
  border-radius: 11px;
  align-items: stretch;
  gap: 0;
  display: flex;
  overflow: hidden;
}

.urlText {
  min-width: 0;
  color: var(--ink);
  word-break: break-all;
  flex: 1;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
}

.urlCopy {
  border: 0;
  border-left: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--brand);
  color: var(--c-white);
  cursor: pointer;
  flex: none;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 640;
}

.urlCopy:hover {
  filter: brightness(1.06);
}

.urlWarn {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  text-wrap: pretty;
  border-radius: 10px;
  margin: 14px 0 0;
  padding: 12px 14px 12px 38px;
  font-size: 13px;
  line-height: 1.55;
  position: relative;
}

.urlWarn:before {
  content: "";
  background: var(--warning);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 4px);
  left: 14px;
}

.urlWarn strong {
  color: var(--ink);
}

.urlHelp {
  margin-top: 18px;
}

.urlHelpTitle {
  color: var(--ink);
  font-size: 13px;
  font-weight: 640;
}

.urlPre {
  background: var(--ink);
  color: var(--c-white);
  border-radius: 10px;
  margin: 8px 0 0;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  overflow-x: auto;
}

.urlNote {
  color: var(--text-muted);
  text-wrap: pretty;
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
}

.urlDone {
  background: var(--ink);
  width: 100%;
  height: 44px;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  margin-top: 20px;
  font-size: 14.5px;
  font-weight: 640;
}

.srcUrlNote {
  color: var(--text-muted);
  text-wrap: pretty;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
}

.srcRotate {
  border: 1px solid rgba(var(--danger-rgb), .4);
  background: var(--card);
  height: 36px;
  color: var(--danger);
  cursor: pointer;
  border-radius: 9px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 620;
}

.srcRotate:hover:not(:disabled) {
  background: rgba(var(--danger-rgb), .06);
}

.srcRotate:disabled {
  opacity: .55;
  cursor: default;
}

.srcUrlWarn {
  color: var(--text-muted);
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.urlAi {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .08);
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
}

.urlAiBtn {
  border: 1px solid rgba(var(--ink-deep-rgb), .18);
  background: var(--card);
  height: 34px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 9px;
  flex: none;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .14s, background-color .14s;
}

.urlAiBtn:hover {
  border-color: var(--ink);
  background: var(--surface-sunken);
}

.urlAiNote {
  min-width: 200px;
  color: var(--text-muted);
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
}

/* [project]/app/styles/parts/84-ai-reply-step.css [app-client] (css) */
.fpickerBadge, .fnodeBadge {
  background: rgba(var(--ink-deep-rgb), .07);
  color: var(--text-muted);
  letter-spacing: .06em;
  vertical-align: 1px;
  border-radius: 5px;
  margin-left: 7px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-block;
}

.aiCfg {
  flex-direction: column;
  gap: 18px;
  display: flex;
}

.aiToggle {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-warm-98);
  cursor: pointer;
  border-radius: 11px;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  display: flex;
}

.aiToggle input {
  flex: none;
  margin-top: 2px;
}

.aiToggle strong {
  color: var(--ink);
  font-size: 13.5px;
  display: block;
}

.aiToggleNote {
  color: var(--text-muted);
  text-wrap: pretty;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  display: block;
}

.aiAttached {
  border-left: 2px solid rgba(var(--brand-rgb), .28);
  margin-top: 14px;
  padding-left: 14px;
}

.aiRetired {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  text-wrap: pretty;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 12px 14px 12px 38px;
  font-size: 13px;
  line-height: 1.55;
  position: relative;
}

.aiRetired:before {
  content: "";
  background: var(--warning);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 4px);
  left: 14px;
}

.aiRetired strong {
  color: var(--ink);
}

.aiGrid {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0 28px;
  display: grid;
}

.aiCol {
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  display: flex;
}

@media (max-width: 900px) {
  .aiGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

.aiPrimer {
  background: rgba(var(--brand-rgb), .07);
  border: 1px solid rgba(var(--brand-rgb), .24);
  color: var(--text-secondary);
  text-wrap: pretty;
  border-radius: 11px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.55;
}

.aiPrimer strong {
  color: var(--ink);
}

.aiHint {
  color: var(--text-muted);
  text-wrap: pretty;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  display: block;
}

.aiHint strong {
  color: var(--text-secondary);
}

.aiFacts {
  min-height: 260px;
  line-height: 1.6;
}

.aiCfg .sel {
  width: 100%;
}

.aiDone {
  background: var(--c-warm-98);
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  color: var(--text-secondary);
  text-wrap: pretty;
  border-radius: 9px;
  margin-top: 9px;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.5;
}

.aiDoneTag {
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 700;
  display: block;
}

.aiCheckRow {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  display: flex;
}

.aiCheckBtn {
  border: 1px solid var(--brand);
  background: var(--card);
  height: 36px;
  color: var(--brand);
  cursor: pointer;
  border-radius: 9px;
  flex: none;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 640;
}

.aiCheckBtn:hover:not(:disabled) {
  background: rgba(var(--brand-rgb), .07);
}

.aiCheckBtn:disabled {
  opacity: .6;
  cursor: default;
}

.aiCheckNote {
  min-width: 160px;
  color: var(--text-muted);
  text-wrap: pretty;
  flex: 1;
  font-size: 12px;
  line-height: 1.45;
}

.aiReview {
  border: 1px solid var(--notice-border);
  background: var(--notice-bg);
  border-radius: 10px;
  margin-top: 12px;
  padding: 12px 13px;
}

.aiReviewTop {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  display: flex;
}

.aiReviewPill {
  background: var(--warning);
  color: var(--c-white);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
  flex: none;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
}

.aiReview.isReady .aiReviewPill {
  background: var(--success);
}

.aiReviewVerdict {
  min-width: 180px;
  color: var(--ink);
  text-wrap: pretty;
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
}

.aiGaps {
  flex-direction: column;
  gap: 11px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.aiGaps li {
  border-left: 2px solid rgba(var(--ink-deep-rgb), .14);
  flex-direction: column;
  gap: 3px;
  padding-left: 11px;
  display: flex;
}

.aiGapTopic {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
}

.aiGapWhy {
  color: var(--text-secondary);
  text-wrap: pretty;
  font-size: 12.5px;
  line-height: 1.5;
}

.aiGapAdd {
  border: 1px dashed rgba(var(--ink-deep-rgb), .22);
  background: var(--card);
  max-width: 100%;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  border-radius: 7px;
  align-self: flex-start;
  margin-top: 3px;
  padding: 4px 9px;
  font-size: 11.5px;
  line-height: 1.4;
}

.aiGapAdd:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.aiGood {
  color: var(--text-muted);
  flex-direction: column;
  gap: 4px;
  margin-top: 11px;
  font-size: 12px;
  display: flex;
}

.aiWarn {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  text-wrap: pretty;
  border-radius: 9px;
  margin-top: 9px;
  padding: 10px 12px 10px 36px;
  font-size: 12.5px;
  line-height: 1.5;
  position: relative;
}

.aiWarn:before {
  content: "";
  background: var(--warning);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 2px);
  left: 12px;
}

.aiTurns {
  align-items: center;
  gap: 10px;
  display: flex;
}

.aiTurnsInput {
  width: 88px;
}

.aiTurnsUnit {
  color: var(--text-muted);
  font-size: 13.5px;
}

.aiRules {
  background: var(--c-warm-98);
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 11px;
  padding: 13px 15px;
}

.aiRulesHead {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  display: block;
}

.aiRules ul {
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
}

.aiRules li {
  color: var(--text-muted);
  text-wrap: pretty;
  font-size: 12.5px;
  line-height: 1.5;
}

/* [project]/app/styles/parts/85-funnel-branching.css [app-client] (css) */
.flowChain {
  flex-direction: column;
  gap: 18px;
}

.fsourceRow {
  align-items: flex-start;
  min-width: min-content;
  display: flex;
}

.fsharedRow {
  border-top: 1px dashed rgba(var(--ink-deep-rgb), .14);
  padding-top: 4px;
}

.fsharedTag {
  height: var(--node-h);
  box-sizing: border-box;
  border: 1px dashed rgba(var(--ink-deep-rgb), .2);
  background: var(--c-warm-98);
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  width: 236px;
  padding: 0 16px;
  display: flex;
}

.fsharedTitle {
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 650;
}

.fsharedNote {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
}

.fbranches {
  border-left: 2px solid rgba(var(--brand-rgb), .28);
  flex-direction: column;
  gap: 10px;
  margin: 0 6px;
  padding: 10px 0 10px 14px;
  display: flex;
}

.fbranch {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.fbranchLabel {
  letter-spacing: .02em;
  color: var(--fp-muted);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 650;
}

.fbranchRow {
  align-items: center;
  display: flex;
}

.fnodeSmall {
  transform-origin: 0;
  min-width: 0;
  transform: scale(.92);
}

.faddBranch {
  width: auto;
  min-width: 104px;
  height: 52px;
  font-size: 12.5px;
}

.swCfg {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.swPrimer {
  background: rgba(var(--brand-rgb), .07);
  border: 1px solid rgba(var(--brand-rgb), .22);
  color: var(--text-secondary);
  text-wrap: pretty;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
}

.swPrimer strong {
  color: var(--ink);
}

.swCase {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-warm-98);
  border-radius: 11px;
  padding: 12px 13px;
}

.swCaseTop {
  align-items: center;
  gap: 10px;
  display: flex;
}

.swNum {
  background: var(--brand);
  width: 22px;
  height: 22px;
  color: var(--c-white);
  border-radius: 999px;
  flex: none;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
}

.swNumElse {
  background: rgba(var(--ink-deep-rgb), .18);
  color: var(--text-secondary);
}

.swLabel {
  flex: 1;
  min-width: 0;
}

.swMove {
  gap: 4px;
  display: flex;
}

.swMove button {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  width: 26px;
  height: 26px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 7px;
  font-size: 12px;
}

.swMove button:hover:not(:disabled) {
  color: var(--ink);
}

.swMove button:disabled {
  opacity: .35;
  cursor: default;
}

.swDel:hover {
  color: var(--danger) !important;
  border-color: rgba(var(--danger-rgb), .4) !important;
}

.swRule {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  display: flex;
}

.swIf {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.swField {
  width: 150px;
}

.swOp {
  flex: none;
  width: 150px;
}

.swValue {
  flex: 1;
  min-width: 120px;
}

.swAdd {
  border: 1px dashed rgba(var(--ink-deep-rgb), .25);
  background: var(--card);
  height: 36px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 9px;
  align-self: flex-start;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 620;
}

.swAdd:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.swElse {
  border: 1px dashed rgba(var(--ink-deep-rgb), .16);
  border-radius: 11px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  display: flex;
}

.swElse strong {
  color: var(--ink);
  font-size: 13.5px;
  display: block;
}

.swElseNote {
  color: var(--text-muted);
  text-wrap: pretty;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  display: block;
}

/* [project]/app/styles/parts/86-attachments.css [app-client] (css) */
.fpickerBody {
  overflow: visible;
}

.fpickerRow {
  position: relative;
}

.fpickerChev {
  color: var(--c-warm-71);
  flex: none;
  margin-left: auto;
  padding-left: 6px;
  font-size: 17px;
  line-height: 1;
}

.fpickerItem.hasPanel .fpickerChev {
  color: var(--brand);
}

.fpickerItem.hasPanel {
  background: var(--c-warm-95b);
}

.fpickerFlyout {
  z-index: 20;
  padding-left: 12px;
  animation: .12s both fpickerFlyIn;
  position: absolute;
  top: -8px;
  left: 100%;
}

.fpickerFlyoutCard {
  background: var(--c-white);
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  width: 300px;
  box-shadow: 0 18px 44px rgba(var(--c-black-rgb), .18);
  border-radius: 12px;
  padding: 12px;
}

@keyframes fpickerFlyIn {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
}

.fpickerFlyoutHead {
  color: var(--text-muted);
  margin-bottom: 9px;
  font-size: 12px;
}

.fpickerFlyoutHead strong {
  color: var(--ink);
}

.fpickerAttach {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 11px 12px;
  transition: border-color .15s, background .15s;
  display: flex;
}

.fpickerAttach + .fpickerAttach {
  margin-top: 8px;
}

.fpickerAttach:hover:not(:disabled) {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .05);
}

.fpickerAttach:disabled {
  opacity: .55;
  cursor: default;
}

.fpickerAttachTop {
  align-items: center;
  gap: 8px;
  display: flex;
}

.fpickerAttachLabel {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 640;
}

.fpickerAttachDesc {
  color: var(--text-muted);
  text-wrap: pretty;
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .fpickerFlyout {
    padding-left: 0;
    animation: none;
    position: static;
  }

  .fpickerFlyoutCard {
    width: auto;
    box-shadow: none;
    margin: 6px 0 4px;
  }
}

.fnodeIcon {
  position: relative;
  overflow: visible;
}

.fnodeAttach {
  background: var(--ink);
  width: 19px;
  height: 19px;
  color: var(--c-white);
  box-shadow: 0 0 0 2px var(--card);
  border-radius: 999px;
  place-items: center;
  display: grid;
  position: absolute;
  bottom: -5px;
  right: -5px;
}

.fnodeIcon .fnodeAttach svg {
  width: 12px;
  height: 12px;
}

.fnodeSmall .fnodeAttach {
  bottom: -4px;
  right: -4px;
}

.fpickerAttachIcon {
  background: var(--ink);
  width: 22px;
  height: 22px;
  color: var(--c-white);
  border-radius: 999px;
  flex: none;
  place-items: center;
  display: grid;
}

.fpickerAttachIcon svg {
  width: 13px;
  height: 13px;
}

/* [project]/app/styles/parts/87-admin.css [app-client] (css) */
.adminRoot {
  background: var(--c-warm-98);
  min-height: 100vh;
}

.adminWrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.adminHead {
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
}

.adminHead h1 {
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  font-size: 22px;
  font-weight: 660;
}

.adminRefresh {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  height: 32px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 600;
}

.adminRefresh:hover:not(:disabled) {
  color: var(--ink);
}

.adminStats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
  display: grid;
}

.adminStat {
  background: var(--card);
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 11px;
  flex-direction: column;
  padding: 13px 15px;
  display: flex;
}

.adminStat.isBad {
  border-color: rgba(var(--danger-rgb), .4);
  background: rgba(var(--danger-rgb), .05);
}

.adminStatN {
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 660;
}

.adminStat.isBad .adminStatN {
  color: var(--danger);
}

.adminStatL {
  color: var(--text-muted);
  margin-top: 1px;
  font-size: 12.5px;
}

.adminStatS {
  color: var(--c-warm-71);
  margin-top: 2px;
  font-size: 11.5px;
}

.adminTabs {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .1);
  gap: 4px;
  margin-bottom: 16px;
  display: flex;
}

.adminTab {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  font-size: 13.5px;
  font-weight: 620;
  display: inline-flex;
}

.adminTab.on {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

.adminBad {
  background: var(--danger);
  color: var(--c-white);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

.adminMint {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  display: flex;
}

.adminMint input {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  min-width: 180px;
  height: 38px;
  color: var(--ink);
  border-radius: 9px;
  flex: 1;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13.5px;
}

.adminMint .adminNarrow {
  flex: none;
  width: 84px;
}

.adminMint button {
  background: var(--ink);
  height: 38px;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  flex: none;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 640;
}

.adminMade {
  background: rgba(var(--success-rgb), .08);
  border: 1px solid rgba(var(--success-rgb), .35);
  border-radius: 11px;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 13px 15px;
  display: flex;
}

.adminMade code {
  letter-spacing: .06em;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.adminMade span {
  min-width: 180px;
  color: var(--text-secondary);
  flex: 1;
  font-size: 12.5px;
}

.adminMade button {
  color: var(--success-deep);
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 620;
}

.adminTable {
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 11px;
  width: 100%;
  overflow: hidden;
}

.adminTable th {
  text-align: left;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--c-warm-98);
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .08);
  padding: 10px 13px;
  font-size: 11.5px;
  font-weight: 700;
}

.adminTable td {
  color: var(--ink);
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .06);
  vertical-align: top;
  padding: 11px 13px;
  font-size: 13px;
}

.adminTable tr:last-child td {
  border-bottom: 0;
}

.adminTable code {
  letter-spacing: .04em;
  font-size: 12.5px;
}

.adminTable tr.isSpent td {
  color: var(--text-muted);
}

.adminTable tr.isSpent code {
  text-decoration: line-through;
}

.adminLink {
  color: var(--brand);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 620;
}

.adminLink:disabled {
  opacity: .5;
  cursor: default;
}

.adminDim {
  color: var(--text-muted);
  font-size: 12px;
}

.adminErr {
  color: var(--danger);
  word-break: break-word;
  max-width: 460px;
  font-size: 12px;
}

.adminEmpty {
  text-align: center;
  color: var(--text-muted);
  padding: 22px 13px;
  font-size: 13px;
}

.adminWarn {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 12px 14px 12px 38px;
  font-size: 13px;
  position: relative;
}

.adminWarn:before {
  content: "";
  background: var(--warning);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 4px);
  left: 14px;
}

.adminReq {
  background: var(--card);
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 11px;
  padding: 14px 15px;
}

.adminReq + .adminReq {
  margin-top: 8px;
}

.adminReqTop {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  display: flex;
}

.adminReqTop strong {
  color: var(--ink);
  font-size: 14.5px;
}

.adminReqCo {
  color: var(--text-secondary);
  font-size: 13px;
}

.adminReqWhen {
  color: var(--text-muted);
  margin-left: auto;
  font-size: 12px;
}

.adminReqContact {
  color: var(--text-muted);
  gap: 14px;
  margin-top: 4px;
  font-size: 12.5px;
  display: flex;
}

.adminReqContact a {
  color: var(--brand);
}

.adminReqDetail {
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.adminReq.isUrgent {
  border-color: rgba(var(--danger-rgb), .4);
  background: rgba(var(--danger-rgb), .04);
}

.adminNote {
  max-width: 62ch;
  color: var(--text-muted);
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
}

/* [project]/app/styles/parts/88-support.css [app-client] (css) */
.supPage {
  min-height: 70vh;
  padding: 72px var(--page-pad) 96px;
  background: var(--c-warm-98);
}

.supInner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.supEyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.supTitle {
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 10px 0 0;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 650;
  line-height: 1.05;
}

.supLede {
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.supForm {
  flex-direction: column;
  gap: 18px;
  margin-top: 30px;
  display: flex;
}

.supField {
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.supLabel {
  color: var(--ink);
  font-size: 13px;
  font-weight: 640;
}

.supForm input:not([type="hidden"]), .supForm textarea {
  box-sizing: border-box;
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  width: 100%;
  color: var(--ink);
  border-radius: 10px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14.5px;
}

.supForm textarea {
  resize: vertical;
  line-height: 1.55;
}

.supForm input:focus-visible, .supForm textarea:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
  outline: none;
}

.supRow {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}

.supHoney {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
  left: -9999px;
}

.supErr {
  color: var(--danger);
  font-size: 12.5px;
}

.supWarn {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  text-wrap: pretty;
  border-radius: 11px;
  padding: 13px 15px 13px 39px;
  font-size: 13.5px;
  line-height: 1.55;
  position: relative;
}

.supWarn:before {
  content: "";
  background: var(--danger);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 5px);
  left: 15px;
}

.supWarn strong {
  color: var(--ink);
}

.supBtn {
  background: var(--ink);
  height: 46px;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  align-self: flex-start;
  padding: 0 26px;
  font-size: 15px;
  font-weight: 640;
}

.supBtn:hover:not(:disabled) {
  filter: brightness(1.15);
}

.supBtn:disabled {
  opacity: .6;
  cursor: default;
}

.supFoot {
  color: var(--text-muted);
  text-wrap: pretty;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.supDone {
  background: var(--card);
  border: 1px solid rgba(var(--success-rgb), .35);
  border-radius: 14px;
  margin-top: 30px;
  padding: 26px;
}

.supDone h2 {
  color: var(--ink);
  margin: 0;
  font-size: 20px;
  font-weight: 650;
}

.supDone p {
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
}

@media (max-width: 620px) {
  .supPage {
    padding-top: 48px;
  }

  .supRow {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* [project]/app/styles/parts/89-get-number.css [app-client] (css) */
.gnWrap {
  width: 100%;
}

.gnCompact {
  max-width: 1060px;
  margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 56px) 32px;
}

.gnHead {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 14px;
  display: flex;
}

.gnHeadText {
  flex: 420px;
  min-width: 0;
}

.gnTitle {
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  font-size: 22px;
  font-weight: 650;
}

.gnSub b {
  color: var(--text-secondary);
  font-weight: 650;
}

.gnSub {
  max-width: 68ch;
  color: var(--text-secondary);
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.gnPrice {
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 26px;
  font-weight: 700;
}

.gnPrice span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.gnField {
  flex: 0 260px;
  min-width: 0;
}

.gnField > span {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.gnField input {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-white);
  width: 100%;
  font: inherit;
  color: var(--ink);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 14px;
}

.gnField input:focus {
  outline: 2px solid rgba(var(--brand-rgb), .35);
  outline-offset: 1px;
  border-color: var(--brand);
}

.gnControls {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
  display: flex;
}

.gnSearch {
  flex: 380px;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.gnSearchField {
  flex: 260px;
  min-width: 0;
}

.gnSearchField > span {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.gnSearchField input {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-white);
  width: 100%;
  font: inherit;
  color: var(--ink);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 14px;
}

.gnSearchField input:focus {
  outline: 2px solid rgba(var(--brand-rgb), .35);
  outline-offset: 1px;
  border-color: var(--brand);
}

.gnBtn, .gnGhost {
  font: inherit;
  cursor: pointer;
  border-radius: 9px;
  flex: none;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
}

.gnBtn {
  background: var(--ink);
  color: var(--c-white);
  border: 0;
}

.gnBtn:hover:not(:disabled) {
  background: var(--ink-deep);
}

.gnGhost {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-white);
  color: var(--ink);
}

.gnGhost:hover:not(:disabled) {
  background: var(--surface-muted);
}

.gnBtn:disabled, .gnGhost:disabled {
  opacity: .55;
  cursor: default;
}

.gnLink {
  font: inherit;
  color: var(--brand);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
}

.gnTable {
  --gn-cols: 230px 120px minmax(150px, 1fr) 120px 92px;
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  border-radius: 12px;
  overflow: hidden;
}

.gnCols, .gnRow {
  grid-template-columns: var(--gn-cols);
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  display: grid;
}

.gnFeeHead {
  text-align: right;
}

.gnCols {
  background: var(--surface-sunken);
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .08);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 700;
}

.gnScroll {
  overscroll-behavior: contain;
  max-height: clamp(320px, 48vh, 640px);
  overflow-y: auto;
}

.gnRow + .gnRow {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .06);
}

.gnRow:hover {
  background: var(--surface-sunken);
}

.gnNum {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}

.gnNum small {
  letter-spacing: 0;
  color: var(--text-muted);
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 500;
  display: block;
}

.gnNet {
  font-variant-numeric: tabular-nums;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.gnNet small {
  color: var(--text-dim);
  margin-top: 1px;
  font-size: 11px;
  display: block;
}

.gnDoes {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
}

.gnDoes em {
  color: var(--success);
  margin-top: 1px;
  font-size: 11px;
  font-style: normal;
  display: block;
}

.gnFee {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.gnFee small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

.gnBuy {
  border: 1px solid rgba(var(--ink-deep-rgb), .16);
  background: var(--c-white);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 8px;
  justify-self: end;
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 600;
}

.gnBuy:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--c-white);
}

.gnBuy:disabled {
  opacity: .5;
  cursor: default;
}

.gnMuted {
  text-align: center;
  color: var(--text-muted);
  padding: 28px 16px;
  font-size: 13.5px;
}

.gnErr {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 9px;
  margin-bottom: 14px;
  padding: 9px 12px 9px 36px;
  font-size: 13px;
  position: relative;
}

.gnErr:before {
  content: "";
  background: var(--danger);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 1px);
  left: 12px;
}

.gnFoot {
  color: var(--text-muted);
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
}

.gnMore {
  min-height: 56px;
  color: var(--text-muted);
  place-items: center;
  padding: 16px;
  font-size: 12.5px;
  display: grid;
}

.gnMoreEnd {
  text-align: center;
  max-width: 44ch;
}

.gnMoreDot {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.gnSpin {
  border: 2px solid rgba(var(--ink-deep-rgb), .12);
  border-top-color: var(--brand);
  border-radius: 50%;
  width: 13px;
  height: 13px;
  animation: .7s linear infinite pdSpin;
}

.gnSim {
  border: 1px dashed rgba(var(--ink-deep-rgb), .16);
  background: var(--surface-sunken);
  border-radius: 14px;
  flex-wrap: wrap;
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  padding: 12px 16px;
  display: flex;
}

.gnSimText {
  flex: 320px;
  min-width: 0;
}

.gnSimText h3 {
  color: var(--ink);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  display: flex;
}

.gnSimFree {
  background: rgba(var(--success-rgb), .12);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--success-strong);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
}

.gnSimText p {
  max-width: 96ch;
  color: var(--text-secondary);
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.gnSimCatch {
  color: var(--text-muted);
}

.gnSimBtn {
  flex: none;
  text-decoration: none;
}

.gnDone {
  border: 1px solid rgba(var(--success-rgb), .3);
  background: rgba(var(--success-rgb), .06);
  text-align: center;
  border-radius: 14px;
  padding: 26px 20px;
}

.gnDoneNum {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--ink);
  font-size: 24px;
  font-weight: 650;
}

.gnDone p {
  max-width: 40ch;
  color: var(--text-secondary);
  margin: 8px auto 0;
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .gnCols {
    display: none;
  }

  .gnRow {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 14px;
    display: flex;
  }

  .gnNum {
    flex: 100%;
    font-size: 17px;
  }

  .gnNet, .gnDoes, .gnFee {
    text-align: left;
    color: var(--text-secondary);
    align-items: baseline;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
  }

  .gnNet small, .gnNet em {
    display: none;
  }

  .gnNet:before, .gnDoes:before, .gnFee:before {
    content: attr(data-label) ": ";
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
  }

  .gnBuy {
    margin-left: auto;
  }

  .gnSearch {
    flex-direction: column;
    align-items: stretch;
  }

  .gnSearchField {
    flex: none;
  }

  .gnSearch .gnBtn, .gnSearch .gnGhost {
    width: 100%;
  }
}

.pdEmptyWide {
  justify-content: flex-start;
  min-height: 0;
  padding-top: 32px;
}

.pdEmptyWide .gnWrap {
  text-align: left;
  width: 100%;
}

.pdEmptyWide .gnSub {
  max-width: 68ch;
  margin: 5px 0 0;
}

.pdEmptyWide .gnSimText p {
  max-width: 96ch;
  margin: 4px 0 0;
}

.pdEmptyWide .gnFoot {
  max-width: none;
  margin: 0 0 14px;
}

.pdEmptyBuy {
  align-items: stretch;
  height: 100%;
  min-height: 0;
  padding-bottom: 24px;
}

.pdEmptyBuy .gnCompact, .pdEmptyBuy .gnTable {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}

.pdEmptyBuy .gnScroll {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.gnPrice.free {
  letter-spacing: -.02em;
  color: var(--c-green-28);
  font-variant-numeric: normal;
  font-size: 19px;
}

.gnPrice.free span {
  margin-left: 6px;
}

.gnFeeFree {
  color: var(--c-green-28);
  font-style: normal;
  font-weight: 600;
}

.gnCap {
  max-width: 520px;
  padding: 28px 4px;
}

.gnCapBtn {
  background: var(--brand);
  height: 40px;
  color: var(--c-white);
  border-radius: 10px;
  align-items: center;
  margin-top: 16px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}

.gnCapBtn:hover {
  background: var(--brand-strong);
  color: var(--c-white);
}

.gnDoneBtn {
  background: var(--brand);
  height: 38px;
  font: inherit;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  align-items: center;
  margin-top: 18px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}

.gnDoneBtn:hover {
  background: var(--brand-strong);
}

.gnHave {
  max-width: 520px;
  padding: 24px 4px;
}

.gnHaveNum {
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
}

.gnHave .gnSub {
  margin-top: 8px;
}

/* [project]/app/styles/parts/90-legal.css [app-client] (css) */
.legalPage {
  padding: 64px var(--page-pad) 110px;
  background: var(--c-warm-98);
}

.legalInner {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.legalEyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.legalTitle {
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 10px 0 0;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 650;
  line-height: 1.05;
}

.legalLede {
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 14px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
}

.legalMeta {
  color: var(--text-dim);
  margin: 16px 0 0;
  font-size: 13px;
}

.legalHead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .1);
  padding-bottom: 34px;
}

.legalCard {
  border: 1px solid rgba(var(--brand-rgb), .24);
  background: rgba(var(--brand-rgb), .045);
  border-radius: 16px;
  margin-top: 34px;
  padding: 26px 28px;
}

.legalCard h2 {
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 650;
}

.legalTicks {
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.legalTicks li {
  color: var(--text-secondary);
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  position: relative;
}

.legalTicks li:before {
  content: "✓";
  color: var(--success-strong);
  font-weight: 700;
  position: absolute;
  left: 2px;
}

.legalNote {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .09);
  color: var(--text-muted);
  margin: 16px 0 0;
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.55;
}

.legalPart {
  border-top: 2px solid var(--ink);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 58px 0 0;
  padding-top: 30px;
  font-size: 24px;
  font-weight: 650;
}

.legalPartLede {
  color: var(--text-muted);
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

.legalSection {
  margin-top: 44px;
  scroll-margin-top: 80px;
}

.legalSection h2 {
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 650;
  position: relative;
}

.legalNum {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.legalSection h3 {
  color: var(--ink);
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 650;
}

.legalSection p {
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.68;
}

.legalSection strong {
  color: var(--ink);
  font-weight: 640;
}

.legalSection a {
  color: var(--brand-deep);
  text-underline-offset: 2px;
  text-decoration: underline;
}

.legalAnchor {
  color: var(--text-dim);
  opacity: 0;
  text-decoration: none;
  transition: opacity .14s;
  position: absolute;
  left: -22px;
}

.legalSection h2:hover .legalAnchor {
  opacity: 1;
}

.legalList, .legalCrosses {
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
}

.legalList li, .legalCrosses li {
  color: var(--text-secondary);
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.65;
  position: relative;
}

.legalList li:before {
  content: "";
  background: rgba(var(--ink-deep-rgb), .3);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 10px;
  left: 6px;
}

.legalCrosses li:before {
  content: "✕";
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  left: 2px;
}

.legalSplit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
  display: grid;
}

.legalHalf {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  border-radius: 13px;
  padding: 18px 20px;
}

.legalHalf p {
  color: var(--text-secondary);
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
}

.legalHalfFoot {
  color: var(--text-dim) !important;
  margin: 0 !important;
  font-size: 13px !important;
}

.legalCallout {
  border: 1px solid var(--notice-border);
  background: var(--notice-bg);
  color: var(--notice-text);
  border-radius: 11px;
  margin: 0 0 16px;
  padding: 16px 18px 16px 42px;
  font-size: 14.5px;
  line-height: 1.65;
  position: relative;
}

.legalCallout:before {
  content: "";
  background: var(--text-muted);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-info) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-info) center / contain no-repeat;
  mask: var(--notice-icon-info) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 8px);
  left: 18px;
}

.legalCallout.warn:before {
  background: var(--warning);
  -webkit-mask-image: var(--notice-icon-alert);
  -webkit-mask-image: var(--notice-icon-alert);
  mask-image: var(--notice-icon-alert);
}

.legalTableWrap {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  border-radius: 12px;
  margin: 0 0 18px;
  overflow-x: auto;
}

.legalTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
}

.legalTable th {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--surface-sunken);
  text-align: left;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
  padding: 11px 14px;
  font-size: 12.5px;
  font-weight: 650;
}

.legalTable td {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  color: var(--text-secondary);
  vertical-align: top;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
}

.legalTable tr:last-child td {
  border-bottom: 0;
}

.legalAddress {
  color: var(--text-secondary);
  margin: 0 0 14px;
  font-size: 15px;
  font-style: normal;
  line-height: 1.7;
}

.mktFoot {
  padding: 26px var(--page-pad) 34px;
  border-top: 1px solid rgba(var(--ink-deep-rgb), .09);
  background: var(--c-warm-98);
}

.mktFootInner {
  max-width: 1180px;
  color: var(--text-muted);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  font-size: 13px;
  display: flex;
}

.mktFootLinks {
  flex-wrap: wrap;
  gap: 18px;
  display: flex;
}

.mktFootLinks a {
  color: var(--text-muted);
  text-decoration: none;
}

.mktFootLinks a:hover {
  color: var(--ink);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .legalPage {
    padding-top: 44px;
  }

  .legalCard {
    padding: 20px;
  }

  .legalAnchor {
    display: none;
  }
}

/* [project]/app/styles/parts/91-clients.css [app-client] (css) */
.clPage {
  color: var(--c-warm-31);
  padding: 26px 32px 40px;
}

.clHeader {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
  display: flex;
}

.clTitle {
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  font-size: 24px;
  font-weight: 650;
}

.clSub {
  color: var(--text-muted);
  margin-top: 3px;
  font-size: 13.5px;
}

.clHeadRight {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.clSearch {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  width: 220px;
  height: 34px;
  color: var(--ink);
  border-radius: 10px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13.5px;
}

.clSearch:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
  outline: 0;
}

.clChips {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  display: flex;
}

.clGrid {
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
  display: grid;
}

.clCard {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--card);
  text-align: left;
  cursor: pointer;
  border-radius: 13px;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  font-family: inherit;
  transition: border-color .14s, box-shadow .14s;
  display: flex;
}

.clCard:hover {
  border-color: rgba(var(--ink-deep-rgb), .24);
  box-shadow: 0 2px 10px rgba(var(--c-black-rgb), .05);
}

.clCardTop {
  align-items: center;
  gap: 11px;
  min-width: 0;
  display: flex;
}

.clCardMain {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.clCardName {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 650;
  overflow: hidden;
}

.clAvatar {
  background: var(--ink);
  width: 34px;
  height: 34px;
  color: var(--c-white);
  border-radius: 10px;
  flex: none;
  place-items: center;
  font-size: 12px;
  font-weight: 650;
  display: grid;
}

.clAvatar.sm {
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.clStatus {
  letter-spacing: .02em;
  background: var(--surface-muted);
  color: var(--text-secondary);
  border-radius: 999px;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 650;
}

.clStatus.st-active {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-deep);
}

.clStatus.st-onboarding {
  background: rgba(var(--brand-rgb), .1);
  color: var(--brand-deep);
}

.clStatus.st-paused {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning-strong);
}

.clStatus.st-former {
  background: rgba(var(--ink-deep-rgb), .07);
  color: var(--text-muted);
}

.clCardFacts {
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  display: flex;
}

.clCardFacts > span {
  background: var(--surface-sunken);
  border-radius: 7px;
  padding: 2px 8px;
}

.clCardFacts > span.clDue {
  background: rgba(var(--warning-rgb), .12);
  color: var(--warning-strong);
  font-weight: 600;
}

.clCardFacts > span.clDue.late {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger-strong);
}

.clCardFoot {
  color: var(--text-dim);
  font-size: 11.5px;
}

.clEmpty {
  text-align: center;
  padding: 60px 20px;
}

.clEmpty h2 {
  color: var(--ink);
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 650;
}

.clEmpty p {
  max-width: 44ch;
  color: var(--text-muted);
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.55;
}

.clBack {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 9px;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px 12px 6px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.clBack:hover {
  border-color: rgba(var(--ink-deep-rgb), .28);
  color: var(--ink);
}

.clHero {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .09);
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 20px;
  display: flex;
}

.clHeroMain {
  flex: 1;
  min-width: 0;
}

.clHeroName {
  letter-spacing: -.02em;
  color: var(--ink);
  text-overflow: ellipsis;
  margin: 0;
  font-size: 26px;
  font-weight: 650;
  overflow: hidden;
}

.clHeroFacts {
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
  font-size: 13px;
  display: flex;
}

.clHeroTodo {
  color: var(--warning-strong);
  font-weight: 650;
}

.clHeroRight {
  flex: none;
}

.clStatusSel {
  width: 180px;
}

.clLayout {
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: start;
  gap: 26px;
  display: grid;
}

.clMain {
  min-width: 0;
}

.clNav {
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  background: var(--surface-sunken);
  border-radius: 13px;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  display: flex;
  position: sticky;
  top: 16px;
}

.clNavItem {
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 550;
  display: flex;
}

.clNavItem:hover {
  background: rgba(var(--ink-deep-rgb), .04);
  color: var(--ink);
}

.clNavItem.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(var(--c-black-rgb), .06);
  font-weight: 650;
}

.clNavCount {
  background: rgba(var(--ink-deep-rgb), .08);
  color: var(--text-secondary);
  border-radius: 999px;
  flex: none;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 650;
}

.clNavItem.active .clNavCount {
  background: rgba(var(--brand-rgb), .12);
  color: var(--brand-deep);
}

.clSection {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--card);
  border-radius: 14px;
  padding: 18px 20px;
}

.clSectionH {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.clSectionN {
  background: rgba(var(--ink-deep-rgb), .07);
  letter-spacing: 0;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
}

.clNone {
  color: var(--text-muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.clDeleteBtn {
  margin-top: 16px;
}

.clCallBtn {
  flex: none;
}

.clLogForm {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .08);
  margin-bottom: 20px;
  padding-bottom: 18px;
}

.clLogRow {
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}

.clLogType {
  flex: none;
  width: 190px;
}

.clLogSummary {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  min-width: 0;
  height: 38px;
  color: var(--ink);
  border-radius: 10px;
  flex: 1;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
}

.clLogDate {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  width: 150px;
  height: 38px;
  color: var(--text-secondary);
  border-radius: 10px;
  flex: none;
  padding: 0 10px;
  font-family: inherit;
  font-size: 13px;
}

.clLogBody {
  box-sizing: border-box;
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  width: 100%;
  min-height: 64px;
  color: var(--ink);
  resize: vertical;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
}

.clLogSummary:focus, .clLogDate:focus, .clLogBody:focus, .clNotes:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
  outline: 0;
}

.clTimeline {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.clTlItem {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.clTlItem:last-child {
  border-bottom: 0;
}

.clTlDot {
  background: var(--text-dim);
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
}

.clTlDot.t-meeting {
  background: var(--brand);
}

.clTlDot.t-call {
  background: var(--success);
}

.clTlDot.t-sms {
  background: var(--c-red-59);
}

.clTlDot.t-email {
  background: var(--c-orange-46);
}

.clTlDot.t-status {
  background: var(--brand-accent);
}

.clTlBody {
  flex: 1;
  min-width: 0;
}

.clTlTop {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.clTlSummary {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.clTlTag {
  background: var(--surface-sunken);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 11px;
}

.clTlAuto {
  background: rgba(var(--ink-deep-rgb), .05);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
}

.clTlWhen {
  color: var(--text-dim);
  white-space: nowrap;
  margin-left: auto;
  font-size: 12px;
}

.clTlNote {
  color: var(--text-secondary);
  white-space: pre-wrap;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
}

.clTlWho {
  color: var(--text-dim);
  margin-top: 3px;
  font-size: 12px;
}

.clTaskAdd {
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

.clTaskAdd input[type="text"] {
  flex: 1;
  min-width: 0;
}

.clTaskAdd input {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  height: 38px;
  color: var(--ink);
  border-radius: 10px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13.5px;
}

.clTaskAdd input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
  outline: 0;
}

.clTasks {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.clTask {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  display: flex;
}

.clTask label {
  cursor: pointer;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.clTaskTitle {
  color: var(--ink);
  font-size: 14px;
}

.clTasks.done .clTaskTitle {
  color: var(--text-dim);
  text-decoration: line-through;
}

.clTaskDue {
  background: var(--surface-sunken);
  color: var(--text-muted);
  border-radius: 7px;
  flex: none;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
}

.clTaskDue.soon {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning-strong);
}

.clTaskDue.late {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger-strong);
}

.clTaskDone {
  color: var(--text-dim);
  flex: none;
  font-size: 11.5px;
}

.clTaskX {
  width: 24px;
  height: 24px;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  flex: none;
  font-size: 12px;
}

.clTaskX:hover {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger-strong);
}

.clSubH {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 18px 0 6px;
  font-size: 11px;
  font-weight: 700;
}

.clContacts {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.clContact {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .05);
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  display: flex;
}

.clContactMain {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.clContactName {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.clContactSub {
  color: var(--text-muted);
  font-size: 12.5px;
}

.clAddContact {
  margin-top: 4px;
}

.clPicker {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--surface-sunken);
  border-radius: 12px;
  margin-top: 12px;
  padding: 14px;
}

.clPicker > input {
  box-sizing: border-box;
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  width: 100%;
  height: 36px;
  color: var(--ink);
  border-radius: 9px;
  margin-bottom: 10px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13.5px;
}

.clCandidates {
  max-height: 240px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.clCandidates button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  display: flex;
}

.clCandidates button:hover {
  background: var(--card);
}

.clCandName {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.clCandSub {
  color: var(--text-muted);
  font-size: 12px;
}

.clAbout {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}

.clNotesField {
  grid-column: 1 / -1;
}

.clNotes {
  box-sizing: border-box;
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  width: 100%;
  min-height: 90px;
  color: var(--ink);
  resize: vertical;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .clLayout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .clNav {
    flex-flow: wrap;
    position: static;
  }

  .clNavItem {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .clAbout {
    grid-template-columns: 1fr;
  }

  .clLogRow {
    flex-wrap: wrap;
  }

  .clLogType, .clLogDate, .clHeroRight, .clStatusSel {
    width: 100%;
  }
}

.mcTabs {
  background: rgba(var(--ink-deep-rgb), .05);
  border-radius: 10px;
  gap: 2px;
  margin-bottom: 16px;
  padding: 2px;
  display: flex;
}

.mcTab {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
}

.mcTab.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(var(--c-black-rgb), .07);
}

.mcCount {
  background: rgba(var(--ink-deep-rgb), .08);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 11px;
}

.mcList {
  max-height: 300px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.mcList button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 9px;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  display: flex;
}

.mcList button:hover {
  border-color: rgba(var(--ink-deep-rgb), .14);
  background: var(--surface-sunken);
}

.mcName {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.mcSub {
  color: var(--text-muted);
  font-size: 12px;
}

.ckPanel {
  max-width: 720px;
}

.ckPanel h4 {
  color: var(--ink);
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 650;
}

.ckLede {
  color: var(--text-muted);
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
}

.ckList {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.ckItem {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .06);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  display: flex;
}

.ckOrder {
  font-variant-numeric: tabular-nums;
  width: 20px;
  color: var(--text-dim);
  flex: none;
  font-size: 12px;
}

.ckTitle {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  min-width: 0;
  height: 36px;
  color: var(--ink);
  border-radius: 9px;
  flex: 1;
  padding: 0 11px;
  font-family: inherit;
  font-size: 13.5px;
}

.ckTitle:focus, .ckDue input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
  outline: 0;
}

.ckDue {
  color: var(--text-muted);
  flex: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: inline-flex;
}

.ckDue input {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--card);
  width: 58px;
  height: 36px;
  color: var(--ink);
  border-radius: 9px;
  padding: 0 8px;
  font-family: inherit;
  font-size: 13px;
}

.ckBtns {
  flex: none;
  gap: 2px;
  display: inline-flex;
}

.ckBtns button {
  width: 26px;
  height: 26px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  font-size: 12px;
}

.ckBtns button:hover:not(:disabled) {
  background: rgba(var(--ink-deep-rgb), .07);
  color: var(--ink);
}

.ckBtns button:disabled {
  opacity: .3;
  cursor: default;
}

.ckBtns .ckX:hover {
  background: rgba(var(--danger-rgb), .1);
  color: var(--danger-strong);
}

.ckActions {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  display: flex;
}

.ckFoot {
  color: var(--text-dim);
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
}

.ldAct.ldClient {
  border: 1px solid rgba(var(--ink-deep-rgb), .2);
  background: var(--card);
  color: var(--ink);
}

.ldAct.ldClient:hover {
  border-color: var(--ink);
  background: var(--surface-sunken);
}

/* [project]/app/styles/parts/92-pricing.css [app-client] (css) */
.prPage {
  padding: 72px var(--page-pad) 96px;
  background: var(--card);
}

.prIntro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.prTitle {
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 14px 0 16px;
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 650;
  line-height: 1.06;
}

.prIntro .prLede {
  margin: 0 auto;
}

.prCards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
}

.prCard {
  background: var(--band-muted);
  border-radius: 22px;
  flex-direction: column;
  padding: 32px 30px;
  display: flex;
}

.prCard.dark {
  background: var(--ink);
  color: var(--c-white);
}

.prCardLabel {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.prCard.dark .prCardLabel {
  color: rgba(var(--c-white-rgb), .55);
}

.prPrice {
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
  display: flex;
}

.prPriceNum {
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.prCard.dark .prPriceNum {
  color: var(--c-white);
}

.prPricePer {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
}

.prCard.dark .prPricePer {
  color: rgba(var(--c-white-rgb), .6);
}

.prCardBody {
  color: var(--text-secondary);
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
}

.prCard.dark .prCardBody {
  color: rgba(var(--c-white-rgb), .75);
}

.prCardEnd {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  display: flex;
}

.prStepper {
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px;
  display: flex;
}

.prStepper.dark {
  background: rgba(var(--c-white-rgb), .12);
}

.prStepper.big {
  background: var(--card);
}

.prStep {
  width: 34px;
  height: 34px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  place-items: center;
  font-size: 19px;
  line-height: 1;
  display: grid;
}

.prStepper.dark .prStep {
  color: var(--c-white);
}

.prStepper.big .prStep {
  width: 40px;
  height: 40px;
  font-size: 21px;
}

.prStep:hover:not(:disabled) {
  background: var(--surface-muted);
}

.prStepper.dark .prStep:hover:not(:disabled) {
  background: rgba(var(--c-white-rgb), .14);
}

.prStep:disabled {
  opacity: .35;
  cursor: default;
}

.prSeats {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  font-size: 17px;
  font-weight: 700;
}

.prStepper.big .prSeats {
  min-width: 34px;
  color: var(--ink);
  font-size: 19px;
}

.prPill {
  background: var(--brand);
  height: 44px;
  font: inherit;
  color: var(--c-white);
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  align-items: center;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
}

.prPill:hover:not(:disabled) {
  background: var(--brand-strong);
}

.prPill:disabled {
  opacity: .6;
  cursor: default;
}

.prSection {
  max-width: 980px;
  margin: 56px auto 0;
}

.prH2 {
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 22px;
  font-size: 22px;
  font-weight: 700;
}

.prList {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 13px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.prItem {
  color: var(--text-secondary);
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
}

.prTick {
  color: var(--success);
  flex: none;
  margin-top: 1px;
  font-weight: 700;
}

.prExtras {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  display: grid;
}

.prExtra {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  border-radius: 16px;
  padding: 24px 24px 22px;
}

.prExtraHead {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.prExtraHead h3 {
  color: var(--ink);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.prExtraPrice {
  color: var(--ink);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
}

.prExtraUnit {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.prExtra p {
  color: var(--text-secondary);
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
}

.prPicker {
  background: var(--band-muted);
  text-align: center;
  border-radius: 22px;
  max-width: 640px;
  margin: 72px auto 0;
  padding: 44px 40px 40px;
}

.prPickerTitle {
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
}

.prPickerRow {
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  display: flex;
}

.prPickerLabel {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
}

.prPickerTotal {
  justify-content: center;
  align-items: baseline;
  gap: 9px;
  margin-top: 26px;
  display: flex;
}

.prPickerNum {
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
}

.prPickerPer {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
}

.prPickerMaths {
  color: var(--text-muted);
  margin: 10px 0 0;
  font-size: 13.5px;
}

.prBigCta {
  box-sizing: border-box;
  background: var(--brand);
  width: 100%;
  height: 56px;
  font: inherit;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  font-size: 17px;
  font-weight: 700;
  display: inline-flex;
}

.prBigCta:hover:not(:disabled) {
  background: var(--brand-strong);
}

.prBigCta:disabled {
  opacity: .6;
  cursor: default;
}

.prFine {
  color: var(--text-muted);
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.prError {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 10px;
  margin: 12px 0 0;
  padding: 9px 12px 9px 36px;
  font-size: 13.5px;
  line-height: 1.5;
  position: relative;
}

.prError:before {
  content: "";
  background: var(--danger);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 1px);
  left: 12px;
}

.prCard.dark .prError {
  background: rgba(var(--c-white-rgb), .06);
  border-color: rgba(var(--c-white-rgb), .14);
  color: rgba(var(--c-white-rgb), .85);
}

.prNotes {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px 44px;
  max-width: 980px;
  margin: 56px auto 0;
  display: grid;
}

.prNote h3 {
  color: var(--ink);
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.prNote p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
}

.prNote a {
  color: var(--brand);
}

.prNote a:hover {
  color: var(--brand-strong);
}

@media (max-width: 560px) {
  .prPage {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .prPicker {
    padding: 34px 22px 30px;
  }

  .prPickerRow {
    flex-direction: column;
    gap: 12px;
  }

  .prCardEnd {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .prCardEnd .prStepper, .prPill {
    justify-content: center;
  }
}

/* [project]/app/styles/parts/93-billing.css [app-client] (css) */
.blWrap {
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
  display: flex;
}

.blCard {
  background: var(--card);
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  border-radius: 14px;
  padding: 20px 22px;
}

.blCardTitle {
  color: var(--ink);
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
}

.blPlanTop {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.blPlanName {
  color: var(--ink);
  margin-right: 10px;
  font-size: 17px;
  font-weight: 700;
}

.blStatus {
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--surface-muted);
  color: var(--text-secondary);
  vertical-align: 2px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}

.blStatus-active, .blStatus-comped {
  background: rgba(var(--success-rgb), .1);
  color: var(--success-deep);
}

.blStatus-past_due, .blStatus-unpaid, .blStatus-none {
  background: var(--surface-muted);
  color: var(--warning-strong);
}

.blPlanNote {
  color: var(--text-secondary);
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.blPlanNote a {
  color: var(--brand);
}

.blWarn {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 9px;
  margin: 12px 0 0;
  padding: 10px 12px 10px 36px;
  font-size: 13px;
  line-height: 1.55;
  position: relative;
}

.blWarn:before {
  content: "";
  background: var(--warning);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 2px);
  left: 12px;
}

.blMeter + .blMeter {
  margin-top: 20px;
}

.blMeterTop {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.blMeterLabel {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.blMeterCount {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
}

.blMeterCount.blFull {
  color: var(--warning-strong);
}

.blTrack {
  background: var(--surface-muted);
  border-radius: 999px;
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
}

.blFill {
  background: var(--success);
  border-radius: 999px;
  height: 100%;
}

.blFill.blFillFull {
  background: var(--warning);
}

.blMeterNote {
  color: var(--text-muted);
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.blRow {
  border-top: 1px solid var(--surface-muted);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  display: flex;
}

.blRow:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.blRowMain {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.blRowLabel {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.blRowSub {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.blStepper {
  background: var(--surface-muted);
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 4px;
  display: flex;
}

.blStepper button {
  background: var(--card);
  width: 30px;
  height: 30px;
  color: var(--ink);
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  font-size: 17px;
  line-height: 1;
}

.blStepper button:disabled {
  opacity: .35;
  cursor: default;
}

.blStepper span {
  text-align: center;
  min-width: 26px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
}

.blFoot {
  color: var(--text-muted);
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
}

.blRowValue {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 15px;
  font-weight: 700;
}

/* [project]/app/styles/parts/94-getting-started.css [app-client] (css) */
.obBox {
  background: var(--surface-sunken);
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 14px;
  margin-bottom: 20px;
  padding: 18px 20px 6px;
}

.obBoxSmall {
  padding-bottom: 18px;
}

.obHead {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.obHeadMain {
  min-width: 0;
}

.obTitle {
  color: var(--ink);
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.obSub {
  color: var(--text-muted);
  margin: 3px 0 0;
  font-size: 13px;
}

.obHeadEnd {
  flex: none;
  align-items: center;
  gap: 12px;
  display: flex;
}

.obTrack {
  background: var(--surface-muted);
  border-radius: 999px;
  width: 90px;
  height: 5px;
  overflow: hidden;
}

.obFill {
  background: var(--success);
  border-radius: 999px;
  height: 100%;
  transition: width .24s;
}

.obToggle {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.obToggle:hover {
  color: var(--ink);
}

.obList {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.obStep {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  display: flex;
}

.obStep:first-child {
  border-top: 0;
  padding-top: 2px;
}

.obMark {
  border: 1.5px solid rgba(var(--ink-deep-rgb), .18);
  color: #0000;
  border-radius: 999px;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.obDone .obMark {
  background: var(--success);
  border-color: var(--success);
  color: var(--c-white);
}

.obStepMain {
  flex: 1;
  min-width: 0;
}

.obStepTop {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.obStepTitle {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.obDone .obStepTitle {
  color: var(--text-muted);
}

.obTag {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
}

.obDetail {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.obWhy {
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.obDone .obWhy {
  color: var(--text-muted);
}

.obGo {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-white);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  align-self: center;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

.obGo:hover {
  background: var(--ink);
  color: var(--c-white);
  border-color: var(--ink);
}

@media (max-width: 640px) {
  .obStep {
    flex-wrap: wrap;
  }

  .obGo {
    margin-left: 32px;
  }
}

/* [project]/app/styles/parts/95-tour.css [app-client] (css) */
.tourRoot {
  z-index: 900;
  position: fixed;
  inset: 0;
}

.tourBlock {
  cursor: default;
  position: absolute;
  inset: 0;
}

.tourHole {
  box-shadow: 0 0 0 9999px rgba(var(--ink-deep-rgb), .62);
  pointer-events: none;
  border-radius: 10px;
  transition: top .22s cubic-bezier(.25, .46, .45, .94), left .22s cubic-bezier(.25, .46, .45, .94), width .22s cubic-bezier(.25, .46, .45, .94), height .22s cubic-bezier(.25, .46, .45, .94);
  position: fixed;
}

.tourHole:after {
  content: "";
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(var(--c-white-rgb), .9);
  position: absolute;
  inset: 0;
}

.tourDim {
  background: rgba(var(--ink-deep-rgb), .62);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.tourCard {
  background: var(--c-white);
  width: 380px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 24px 60px rgba(var(--c-black-rgb), .32);
  border-radius: 14px;
  padding: 18px 20px 16px;
  animation: .2s cubic-bezier(.25, .46, .45, .94) both tourIn;
  position: fixed;
}

.tourCard:focus {
  outline: none;
}

.tourCardMid {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes tourIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.tourCardMid {
  animation: none;
}

.tourStepOf {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 700;
}

.tourTitle {
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 5px 0 0;
  font-size: 17px;
  font-weight: 650;
}

.tourBody {
  color: var(--text-secondary);
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.tourFoot {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  display: flex;
}

.tourDots {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.tourDot {
  background: rgba(var(--ink-deep-rgb), .16);
  border-radius: 999px;
  width: 5px;
  height: 5px;
}

.tourDot.past {
  background: rgba(var(--brand-rgb), .4);
}

.tourDot.on {
  background: var(--brand);
  width: 16px;
}

.tourBtns {
  flex: none;
  align-items: center;
  gap: 6px;
  display: flex;
}

.tourGhost, .tourNext {
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
}

.tourGhost {
  color: var(--text-muted);
  background: none;
  border: 0;
}

.tourGhost:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.tourNext {
  background: var(--ink);
  color: var(--c-white);
  border: 0;
}

.tourNext:hover {
  background: var(--ink-deep);
}

@media (max-width: 640px) {
  .tourCard, .tourCardMid {
    width: auto;
    max-width: none;
    bottom: 16px;
    right: 16px;
    transform: none;
    top: auto !important;
    left: 16px !important;
  }

  .tourFoot {
    flex-direction: column;
    align-items: stretch;
  }

  .tourDots {
    justify-content: center;
  }

  .tourBtns {
    justify-content: flex-end;
  }
}

.tourAgain {
  font: inherit;
  color: var(--brand);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
}

.tourAgain:hover {
  color: var(--brand-deep);
}

.setNavTour {
  text-align: left;
  align-self: flex-start;
  margin-top: 18px;
}

/* [project]/app/styles/parts/96-diagnostics.css [app-client] (css) */
.brWrap {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.brTop {
  color: var(--text-muted);
  font-size: 13px;
}

.brTop strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.brCritCount {
  color: var(--danger-strong);
  font-weight: 600;
}

.brList {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.brItem {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  border-radius: 12px;
  overflow: hidden;
}

.brItem.crit {
  border-left: 3px solid var(--danger);
}

.brHead {
  width: 100%;
  font: inherit;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  grid-template-columns: minmax(0, 1fr) auto auto auto 20px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: grid;
}

.brHead:hover {
  background: var(--surface-sunken);
}

.brName {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
}

.brCount {
  background: var(--surface-muted);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  border-radius: 999px;
  flex: none;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
}

.brWhen {
  color: var(--text-muted);
  flex: none;
  font-size: 12px;
}

.brChev {
  color: var(--text-dim);
  place-items: center;
  font-size: 15px;
  display: grid;
}

.brBody {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .06);
  padding: 4px 14px 14px;
}

.brMsg {
  color: var(--text-secondary);
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.brFacts {
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 12px 0 0;
  display: flex;
}

.brFacts div {
  min-width: 0;
}

.brFacts dt {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
}

.brFacts dd {
  color: var(--ink);
  margin: 1px 0 0;
  font-size: 12.5px;
}

.brLabel {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 16px 0 6px;
  font-size: 10px;
  font-weight: 700;
}

.brPre {
  background: var(--surface-sunken);
  color: var(--ink);
  white-space: pre;
  border-radius: 9px;
  margin: 0;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
}

.brTrail {
  background: var(--surface-sunken);
  border-radius: 9px;
  max-height: 260px;
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  list-style: none;
  overflow-y: auto;
}

.brTrail li {
  color: var(--text-secondary);
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  display: flex;
}

.brT {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  color: var(--text-dim);
  flex: none;
}

.brTrail code {
  color: var(--text-muted);
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.brBtns {
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.brCopy, .brGhost {
  font: inherit;
  cursor: pointer;
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

.brCopy {
  background: var(--ink);
  color: var(--c-white);
  border: 0;
}

.brCopy:hover {
  background: var(--ink-deep);
}

.brGhost {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-white);
  color: var(--ink);
}

.brGhost:hover:not(:disabled) {
  background: var(--surface-muted);
}

.brGhost:disabled {
  opacity: .55;
  cursor: default;
}

.brClean {
  border: 1px solid rgba(var(--success-rgb), .28);
  background: rgba(var(--success-rgb), .05);
  border-radius: 12px;
  flex-direction: column;
  gap: 5px;
  padding: 22px 20px;
  display: flex;
}

.brClean strong {
  color: var(--ink);
  font-size: 14px;
}

.brClean span {
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.brMuted {
  color: var(--text-muted);
  padding: 24px 0;
  font-size: 13.5px;
}

.ebPage {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  border-radius: 14px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 52ch;
  margin: 60px auto;
  padding: 24px;
  display: flex;
}

.ebPage h2 {
  color: var(--ink);
  margin: 0;
  font-size: 17px;
  font-weight: 650;
}

.ebPage p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.ebBtn {
  background: var(--ink);
  font: inherit;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  margin-top: 4px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
}

.ebBtn:hover {
  background: var(--ink-deep);
}

.brAccounts {
  background: rgba(var(--brand-rgb), .1);
  color: var(--brand-deep);
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
}

.brNote {
  color: var(--success-strong);
  margin-left: 12px;
  font-size: 12.5px;
}

.pfWrap {
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
  display: flex;
}

.pfCard {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  background: var(--c-white);
  border-radius: 12px;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  display: flex;
}

.pfCardHead h3 {
  color: var(--ink);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  display: flex;
}

.pfCardHead p {
  max-width: 60ch;
  color: var(--text-muted);
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.pfOk, .pfPending {
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
}

.pfOk {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-strong);
}

.pfPending {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning-strong);
}

.pfRow {
  align-items: center;
  gap: 8px;
  display: flex;
}

.pfFields {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.pfField {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.pfField > span {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
}

.pfInput {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-white);
  width: 100%;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  border-radius: 9px;
  flex: auto;
  padding: 9px 11px;
  font-size: 14px;
}

.pfInput:focus {
  outline: 2px solid rgba(var(--brand-rgb), .35);
  outline-offset: 1px;
  border-color: var(--brand);
}

.pfBtn {
  background: var(--ink);
  font: inherit;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  flex: none;
  align-self: flex-start;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
}

.pfBtn:hover:not(:disabled) {
  background: var(--ink-deep);
}

.pfBtn:disabled {
  opacity: .5;
  cursor: default;
}

.pfMuted {
  color: var(--text-muted);
  padding: 24px 0;
  font-size: 13.5px;
}

.mcMismatch {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 8px;
  margin-top: 6px;
  padding: 7px 10px 7px 32px;
  font-size: 12px;
  line-height: 1.45;
  position: relative;
}

.mcMismatch:before {
  content: "";
  background: var(--warning);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh - 1px);
  left: 10px;
}

.mcMismatch strong {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 700;
}

/* [project]/app/styles/parts/97-meetings.css [app-client] (css) */
.csMeetOpen {
  border: 1px solid rgba(var(--brand-rgb), .28);
  background: rgba(var(--brand-rgb), .05);
  width: 100%;
  font: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: 12px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  margin-top: 8px;
  padding: 11px 14px;
  display: grid;
}

.csMeetOpen:hover {
  background: rgba(var(--brand-rgb), .1);
}

.csMeetLabel {
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 650;
}

.csMeetSub {
  color: var(--text-muted);
  grid-column: 1;
  font-size: 12px;
}

.csMeetOpen .csCbChevron {
  grid-area: 1 / 2 / span 2;
}

.mtgModal {
  background: var(--c-white);
  width: min(520px, 100vw - 32px);
  max-height: calc(100vh - 48px);
  box-shadow: 0 24px 70px rgba(var(--ink-deep-rgb), .28);
  border-radius: 18px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.mtgHead {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px 14px;
  display: flex;
}

.mtgHead h2 {
  color: var(--ink);
  margin: 0;
  font-size: 19px;
  font-weight: 650;
}

.mtgHead p {
  max-width: 46ch;
  color: var(--text-muted);
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.mtgClose {
  width: 28px;
  height: 28px;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  flex: none;
  font-size: 14px;
}

.mtgClose:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.mtgBody {
  flex-direction: column;
  flex: 1;
  gap: 14px;
  min-height: 0;
  padding: 0 22px 6px;
  display: flex;
  overflow-y: auto;
}

.mtgPresets {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.mtgPreset {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
}

.mtgPreset:hover {
  background: var(--surface-muted);
}

.mtgField {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.mtgField > span {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
}

.mtgInput {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-white);
  width: 100%;
  font: inherit;
  color: var(--ink);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 14px;
}

.mtgInput:focus {
  outline: 2px solid rgba(var(--brand-rgb), .35);
  outline-offset: 1px;
  border-color: var(--brand);
}

.mtgArea {
  resize: vertical;
  min-height: 54px;
}

.mtgHint {
  color: var(--text-muted);
  font-size: 11.5px;
}

.mtgLengths {
  gap: 6px;
  display: flex;
}

.mtgLen {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: 9px;
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
}

.mtgLen.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--c-white);
  font-weight: 600;
}

.mtgWarn {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 9px;
  padding: 8px 11px 8px 35px;
  font-size: 12.5px;
  position: relative;
}

.mtgWarn:before {
  content: "";
  background: var(--warning);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: .5lh;
  left: 11px;
}

.mtgFoot {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 18px;
  display: flex;
}

.mtgBook {
  background: var(--ink);
  font: inherit;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
}

.mtgBook:hover:not(:disabled) {
  background: var(--ink-deep);
}

.mtgBook:disabled {
  opacity: .5;
  cursor: default;
}

/* [project]/app/styles/parts/98-verification.css [app-client] (css) */
.nvWrap {
  background: var(--c-white);
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  border-radius: 14px;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 26px 28px 22px;
  display: flex;
}

@media (max-width: 620px) {
  .nvWrap {
    padding: 20px 18px 18px;
  }
}

.nvHead {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.nvTitle {
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.nvSub {
  color: var(--text-secondary);
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.nvPill {
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.nvPill:before {
  content: "";
  background: currentColor;
  border-radius: 999px;
  width: 6px;
  height: 6px;
}

.nvPill.draft {
  color: var(--text-muted);
  background: rgba(var(--ink-deep-rgb), .06);
}

.nvPill.wait {
  color: var(--warning);
  background: rgba(var(--warning-rgb), .12);
}

.nvPill.good {
  color: var(--success);
  background: rgba(var(--success-rgb), .12);
}

.nvPill.bad {
  color: var(--danger);
  background: rgba(var(--danger-rgb), .12);
}

.nvNotice {
  border-radius: 10px;
  padding: 11px 14px 11px 38px;
  font-size: 13px;
  line-height: 1.55;
  position: relative;
}

.nvNotice:before {
  content: "";
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 3px);
  left: 14px;
}

.nvNotice.wait {
  color: var(--notice-text);
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
}

.nvNotice.wait:before {
  background: var(--warning);
}

.nvNotice.bad {
  color: var(--notice-text);
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
}

.nvNotice.bad:before {
  background: var(--danger);
}

.nvList {
  background: rgba(var(--ink-deep-rgb), .09);
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  border-radius: 12px;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  overflow: hidden;
}

.nvItem {
  background: var(--c-white);
  padding: 16px 18px;
}

.nvItem.on {
  background: var(--surface-sunken);
}

.nvItemHead {
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.nvItemHead h3 {
  color: var(--ink);
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.nvCheck {
  border: 1.5px solid rgba(var(--ink-deep-rgb), .18);
  width: 20px;
  height: 20px;
  color: var(--c-white);
  border-radius: 999px;
  flex: none;
  place-items: center;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1;
  display: grid;
}

.nvItem.on .nvCheck {
  border-color: var(--success);
  background: var(--success);
}

.nvDesc {
  color: var(--text-secondary);
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
}

.nvEg {
  color: var(--text-muted);
  margin: 5px 0 0;
  font-size: 12px;
  font-style: italic;
  line-height: 1.55;
}

.nvInput {
  margin: 10px 0 0;
}

.nvText {
  align-items: center;
  gap: 10px;
  display: flex;
}

.nvLine, .nvArea {
  border: 1px solid rgba(var(--ink-deep-rgb), .18);
  background: var(--c-white);
  min-width: 0;
  color: var(--ink);
  font: inherit;
  border-radius: 8px;
  flex: 1;
  padding: 9px 11px;
  font-size: 13.5px;
}

.nvArea {
  resize: vertical;
  line-height: 1.55;
}

.nvLine:focus, .nvArea:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}

.nvState {
  min-width: 52px;
  color: var(--text-muted);
  flex: none;
  font-size: 12px;
}

.nvFile {
  cursor: pointer;
  margin-top: 16px;
  display: block;
}

.nvFile input {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
}

.nvFile span {
  border: 1.5px dashed rgba(var(--ink-deep-rgb), .2);
  text-align: center;
  color: var(--brand);
  background: var(--c-white);
  border-radius: 12px;
  padding: 22px 18px;
  font-size: 14px;
  font-weight: 600;
  display: block;
}

.nvFile:hover span {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .03);
}

.nvFile input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.nvFoot {
  align-items: center;
  gap: 14px;
  display: flex;
}

.nvActions {
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  display: flex;
}

.nvSend {
  background: var(--brand);
  color: var(--c-white);
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  align-self: flex-start;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
}

.nvSend:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.nvLeft {
  color: var(--text-muted);
  font-size: 12.5px;
}

.nvErr {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: 9px;
  padding: 10px 13px 10px 37px;
  font-size: 13px;
  position: relative;
}

.nvErr:before {
  content: "";
  background: var(--danger);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 2px);
  left: 13px;
}

.nvLoading {
  color: var(--text-muted);
  padding: 22px 0;
  font-size: 13.5px;
}

.nvDone {
  border: 1px solid rgba(var(--success-rgb), .3);
  background: rgba(var(--success-rgb), .06);
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  display: flex;
}

.nvDone p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 13.5px;
}

@media (max-width: 620px) {
  .nvHead {
    flex-direction: column;
    gap: 12px;
  }
}

.nvAddr {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.nvAddrField {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.nvAddrField > span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.nvAddrField em {
  color: var(--text-muted);
  font-style: normal;
}

.nvAddrWide {
  grid-column: 1 / -1;
}

.nvAddrSave {
  background: var(--brand);
  color: var(--c-white);
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  grid-column: 1 / -1;
  place-self: flex-start start;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
}

.nvAddrSave:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 620px) {
  .nvAddr {
    grid-template-columns: 1fr;
  }
}

.nvRail {
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.nvRailStep button {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--c-white);
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 7px;
  font-size: 12.5px;
  display: inline-flex;
}

.nvRailStep button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.nvRailStep.on button {
  border-color: var(--brand);
  color: var(--ink);
  font-weight: 600;
}

.nvRailStep.done button {
  color: var(--text-secondary);
}

.nvRailDot {
  background: rgba(var(--ink-deep-rgb), .08);
  border-radius: 999px;
  flex: none;
  place-items: center;
  width: 19px;
  height: 19px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  display: grid;
}

.nvRailStep.done .nvRailDot, .nvSummary li.done .nvRailDot {
  background: var(--success);
  color: var(--c-white);
}

.nvRailStep.on .nvRailDot {
  background: var(--brand);
  color: var(--c-white);
}

@media (max-width: 720px) {
  .nvRailName {
    display: none;
  }

  .nvRailStep button {
    padding: 6px;
  }
}

.nvIntro {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  display: flex;
}

.nvNeed {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .08);
  width: 100%;
  color: var(--ink);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 14px 0;
  font-size: 13.5px;
  list-style: none;
  display: grid;
}

.nvNeed li {
  align-items: center;
  gap: 9px;
  display: flex;
}

.nvNeedDot {
  background: var(--brand);
  border-radius: 999px;
  flex: none;
  width: 5px;
  height: 5px;
}

@media (max-width: 620px) {
  .nvNeed {
    grid-template-columns: 1fr;
  }
}

.nvNote {
  color: var(--text-secondary);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.nvNote strong {
  color: var(--ink);
}

.nvPrivacy {
  background: var(--surface-sunken);
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  border-radius: 12px;
  padding: 15px 17px;
}

.nvPrivacy h3 {
  color: var(--ink);
  margin: 0 0 5px;
  font-size: 13.5px;
  font-weight: 600;
}

.nvPrivacy p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.nvStep {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.nvCount {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
}

.nvQ {
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.nvTextStep {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.nvTextStep .nvLine, .nvTextStep .nvArea {
  width: 100%;
}

.nvFileNote {
  color: var(--text-muted);
  margin: 8px 0 0;
  font-size: 12px;
}

.nvSummary {
  background: rgba(var(--ink-deep-rgb), .09);
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  border-radius: 12px;
  flex-direction: column;
  gap: 1px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  overflow: hidden;
}

.nvSummary li {
  background: var(--c-white);
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  font-size: 13.5px;
  display: flex;
}

.nvSummaryName {
  color: var(--ink);
  flex: 1;
}

.nvNav {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .08);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  display: flex;
}

.nvBack {
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
}

.nvBack:hover {
  color: var(--ink);
}

.nvSkip {
  font: inherit;
  color: var(--brand);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

.nvSkip:hover {
  text-decoration: underline;
}

.nvWrap, .nvWrap p {
  text-align: left;
}

.nvWrap p {
  max-width: none;
  margin: 0;
}

.nvWrap .nvSub {
  color: var(--text-secondary);
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.nvWrap .nvNote {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.nvWrap .nvDesc {
  color: var(--text-secondary);
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.nvWrap .nvEg {
  color: var(--text-muted);
  margin: 5px 0 0;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.55;
}

.nvWrap .nvCount {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.nvWrap .nvFileNote {
  text-align: center;
  color: var(--text-muted);
  margin: 10px 0 0;
  font-size: 12px;
}

.nvWrap .nvPrivacy p, .nvWrap .nvDone p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.nvActions {
  justify-content: flex-end;
}

.nvActions .nvLeft {
  margin-right: auto;
}

.nvTextStep, .nvAddr {
  align-items: stretch;
}

.nvTextStep .nvAddrSave, .nvAddr .nvAddrSave {
  place-self: flex-end end;
}

.nvRailStep.locked button {
  opacity: .45;
  cursor: not-allowed;
}

.nvRailStep.locked button:hover {
  border-color: rgba(var(--ink-deep-rgb), .12);
  color: var(--text-muted);
}

.nvWrap ::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

.nvReview {
  background: rgba(var(--ink-deep-rgb), .09);
  border: 1px solid rgba(var(--ink-deep-rgb), .09);
  border-radius: 12px;
  flex-direction: column;
  gap: 1px;
  margin: 4px 0 0;
  display: flex;
  overflow: hidden;
}

.nvReviewRow {
  background: var(--c-white);
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 15px;
  display: grid;
}

.nvReviewRow dt {
  color: var(--text-muted);
  grid-column: 1;
  font-size: 12px;
  font-weight: 600;
}

.nvReviewRow dd {
  color: var(--ink);
  overflow-wrap: anywhere;
  grid-column: 1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.nvChange {
  border: 1px solid rgba(var(--ink-deep-rgb), .14);
  background: var(--c-white);
  font: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 7px;
  grid-area: 1 / 2 / span 2;
  align-self: center;
  padding: 5px 11px;
  font-size: 12.5px;
}

.nvChange:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.nvMissing {
  color: var(--text-muted);
  font-style: italic;
}

.nvFileName {
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

.nvDocHelp {
  background: var(--surface-sunken);
  border: 1px solid rgba(var(--ink-deep-rgb), .08);
  border-radius: 12px;
  padding: 14px 16px;
}

.nvWrap .nvDocLead {
  color: var(--ink);
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.nvDocCols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  display: grid;
}

.nvDocOk, .nvDocNo {
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.45;
  list-style: none;
  display: flex;
}

.nvDocOk li, .nvDocNo li {
  grid-template-columns: 15px 1fr;
  gap: 7px;
  display: grid;
}

.nvDocOk li:before {
  content: "✓";
  color: var(--success);
  font-weight: 700;
}

.nvDocNo li:before {
  content: "✕";
  color: var(--danger);
  font-weight: 700;
}

.nvDocOk li {
  color: var(--ink);
}

.nvDocNo li {
  color: var(--text-muted);
}

.nvWrap .nvDocNote {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .08);
  color: var(--text-secondary);
  margin: 11px 0 0;
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 620px) {
  .nvDocCols {
    grid-template-columns: 1fr;
  }
}

.nvSent {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.nvReview.flat .nvReviewRow {
  grid-template-columns: 1fr;
}

.nvSentNote {
  color: var(--text-muted);
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
}

/* [project]/app/styles/parts/99-dialer-page.css [app-client] (css) */
.pdxPage {
  padding: 72px var(--page-pad) 96px;
  background: var(--card);
}

.pdxIntro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.pdxTitle {
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
  margin: 14px 0 16px;
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 650;
  line-height: 1.06;
}

.pdxLede {
  max-width: 480px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.6;
}

.pdxBento {
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
}

.pdxTile {
  background: var(--band-muted);
  border-radius: 22px;
  flex-direction: column;
  grid-column: span 2;
  gap: 22px;
  min-width: 0;
  padding: 34px;
  display: flex;
}

.pdxWide {
  grid-column: span 4;
}

.pdxDark {
  background: var(--ink);
  color: var(--c-white);
}

.pdxTileHead h2 {
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
}

.pdxDark .pdxTileHead h2 {
  color: var(--c-white);
}

.pdxTileHead p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
}

.pdxDark .pdxTileHead p {
  color: rgba(var(--c-white-rgb), .7);
}

.pdxTileNote {
  color: rgba(var(--c-white-rgb), .55);
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.pdxPanel, .pdxCard {
  background: var(--card);
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb), .06);
  border-radius: 16px;
  flex-direction: column;
  display: flex;
}

.pdxPanel {
  gap: 5px;
  padding: 12px;
}

.pdxCard {
  gap: 12px;
  padding: 16px 18px;
}

.pdxHair {
  background: rgba(var(--ink-deep-rgb), .07);
  height: 1px;
}

.pdxPhone .pdxHair {
  background: rgba(var(--c-white-rgb), .1);
}

.pdxRow {
  border: 1px solid #0000;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.pdxRow.isOn {
  background: rgba(var(--brand-rgb), .07);
  border-color: rgba(var(--brand-rgb), .25);
}

.pdxRow.isFaded {
  opacity: .55;
}

.pdxRowNum {
  width: 14px;
  color: var(--text-muted);
  flex: none;
  font-size: 12px;
  font-weight: 700;
}

.pdxAvatar {
  border-radius: 999px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.pdvOrange {
  background: rgba(var(--warning-rgb), .18);
  color: var(--warning-strong);
}

.pdvViolet {
  background: rgba(var(--c-violet-59-rgb), .16);
  color: var(--brand-accent);
}

.pdvRed {
  background: rgba(var(--danger-rgb), .14);
  color: var(--danger-strong);
}

.pdvBlue {
  background: rgba(var(--brand-rgb), .14);
  color: var(--brand-deep);
}

.pdxBrand {
  background: var(--brand);
  width: 40px;
  height: 40px;
  color: var(--c-white);
  font-size: 13px;
}

.pdxRowWho {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.pdxRowName {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.pdxRowPhone, .pdxRowMeta {
  color: var(--text-muted);
  font-size: 12px;
}

.pdxRowEnd {
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.pdxBadge {
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
}

.pdxBadge.callback, .pdxBadge.due {
  color: var(--warning-strong);
  background: rgba(var(--warning-rgb), .14);
}

.pdxBadge.source, .pdxBadge.retry {
  color: var(--text-secondary);
  background: var(--surface-muted);
  font-weight: 600;
}

.pdxBadge.fresh {
  color: var(--success-deep);
  background: rgba(var(--success-rgb), .12);
}

.pdxCalled {
  color: var(--success);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
}

.pdxPhone {
  background: rgba(var(--c-white-rgb), .08);
  border-radius: 16px;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  display: flex;
}

.pdxPhoneTop {
  color: rgba(var(--c-white-rgb), .6);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.pdxReady {
  align-items: center;
  gap: 6px;
  display: flex;
}

.pdxFrom {
  white-space: nowrap;
}

.pdxFrom b {
  color: rgba(var(--c-white-rgb), .85);
  font-weight: 650;
}

.pdxDot {
  border-radius: 999px;
  flex: none;
  width: 7px;
  height: 7px;
  display: inline-block;
}

.pdxDot.ok {
  background: var(--success);
}

.pdxDot.live {
  background: var(--c-red-59);
}

.pdxOnCall {
  align-items: center;
  gap: 12px;
  display: flex;
}

.pdxCallName {
  white-space: nowrap;
  font-size: 15px;
  font-weight: 650;
}

.pdxCallSub {
  color: rgba(var(--c-white-rgb), .6);
  white-space: nowrap;
  font-size: 12px;
}

.pdxTimer {
  font-variant-numeric: tabular-nums;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.pdxKeys {
  gap: 8px;
  display: flex;
}

.pdxKey {
  background: rgba(var(--c-white-rgb), .12);
  text-align: center;
  white-space: nowrap;
  border-radius: 999px;
  flex: 1;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 600;
}

.pdxKey.hang {
  background: var(--c-red-59);
  font-weight: 700;
}

.pdxOutcome {
  border: 1px solid #0000;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  display: flex;
}

.pdxOutcome.isGood {
  background: rgba(var(--success-rgb), .1);
  border-color: rgba(var(--success-rgb), .3);
}

.pdxOutcomeName {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.pdxOutcome.isGood .pdxOutcomeName {
  color: var(--success-deep);
  font-weight: 650;
}

.pdxOutcomeKey {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

.pdxOutcome.isGood .pdxOutcomeKey {
  background: var(--card);
  color: var(--success-deep);
}

.pdxCbHead {
  align-items: center;
  gap: 12px;
  display: flex;
}

.pdxCbIcon {
  background: rgba(var(--warning-rgb), .14);
  border-radius: 11px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 17px;
  display: grid;
}

.pdxCbName {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
}

.pdxCbBody {
  color: var(--text-secondary);
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.pdxCbDue {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 650;
}

.pdxMicro {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.pdxChips {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.pdxChip {
  background: var(--surface-muted);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 550;
}

.pdxChip.isOn {
  background: var(--ink);
  color: var(--c-white);
  font-weight: 650;
}

.pdxChip.isNew {
  background: rgba(var(--brand-rgb), .07);
  color: var(--brand);
}

.pdxSection {
  max-width: 1020px;
  margin: 130px auto 0;
}

.pdxSectionHead {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
}

.pdxH2 {
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
  margin: 12px 0 16px;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 650;
  line-height: 1.12;
}

.pdxSectionLede {
  max-width: 460px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.65;
}

.pdxSteps {
  background: var(--ink);
  color: var(--c-white);
  border-radius: 26px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 48px;
  padding: 52px;
  display: grid;
}

.pdxStepNum {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--c-white-rgb), .45);
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.pdxStep h3 {
  letter-spacing: -.01em;
  margin: 10px 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.pdxStep p {
  color: rgba(var(--c-white-rgb), .65);
  text-wrap: pretty;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

.pdxReceipt {
  background: rgba(var(--c-white-rgb), .07);
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  display: flex;
}

.pdxReceipt span {
  color: rgba(var(--c-white-rgb), .85);
  overflow-wrap: anywhere;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  display: flex;
}

.pdxOk {
  color: var(--c-green-53);
  flex: none;
}

.pdxSplit {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
  gap: 56px;
  max-width: 1020px;
  margin: 130px auto 0;
  display: grid;
}

.pdxFlip {
  margin-top: 110px;
}

.pdxSplitText {
  max-width: 420px;
}

.pdxSplitText p {
  color: var(--text-secondary);
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.65;
}

.pdxSplitText p:last-child {
  margin-bottom: 0;
}

.pdxOrder {
  background: var(--band-muted);
  border-radius: 22px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 34px;
  display: flex;
}

.pdxOrderRow {
  background: var(--card);
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb), .06);
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  display: flex;
}

.pdxOrderRow .pdxRowNum {
  width: 16px;
}

.pdxOrderRow .pdxBadge {
  margin-left: auto;
}

.pdxAuto {
  background: var(--ink);
  min-width: 0;
  color: var(--c-white);
  border-radius: 22px;
  flex-direction: column;
  gap: 18px;
  padding: 34px;
  display: flex;
}

.pdxAutoHead {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.pdxAutoName {
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 650;
  display: flex;
}

.pdxAutoName .pdxDot {
  width: 8px;
  height: 8px;
}

.pdxToggle {
  box-sizing: border-box;
  background: var(--success);
  border-radius: 999px;
  justify-content: flex-end;
  width: 40px;
  height: 23px;
  padding: 2px;
  display: inline-flex;
}

.pdxKnob {
  background: var(--c-white);
  border-radius: 999px;
  width: 19px;
  height: 19px;
}

.pdxAutoRows {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.pdxAutoRow {
  background: rgba(var(--c-white-rgb), .08);
  color: rgba(var(--c-white-rgb), .9);
  border: 1px solid #0000;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 650;
  display: flex;
}

.pdxAutoRow.isNext {
  background: rgba(var(--brand-rgb), .35);
  border-color: rgba(var(--c-blue-62-rgb), .6);
  color: var(--c-white);
}

.pdxAutoMeta {
  color: rgba(var(--c-white-rgb), .55);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  display: flex;
}

.pdxAutoRow.isNext .pdxAutoMeta {
  color: rgba(var(--c-white-rgb), .7);
}

.pdxKeyCap {
  background: rgba(var(--c-white-rgb), .15);
  color: var(--c-white);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.pdxKeyCap.light {
  background: var(--c-white);
  color: var(--ink);
}

.pdxAutoFoot {
  color: rgba(var(--c-white-rgb), .55);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

.pdxCta {
  text-align: center;
  max-width: 640px;
  margin: 130px auto 0;
}

.pdxCta h2 {
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 10px;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
}

.pdxCta p {
  color: var(--text-secondary);
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
}

.pdxCtaRow {
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  display: flex;
}

.pdxCtaMain, .pdxCtaAlt {
  border-radius: 999px;
  align-items: center;
  height: 50px;
  padding: 0 26px;
  font-size: 16px;
  display: inline-flex;
}

.pdxCtaMain {
  background: var(--brand);
  color: var(--c-white);
  font-weight: 700;
}

.pdxCtaMain:hover {
  background: var(--brand-strong);
  color: var(--c-white);
}

.pdxCtaAlt {
  background: var(--band-muted);
  color: var(--ink);
  font-weight: 650;
}

.pdxCtaAlt:hover {
  background: var(--c-warm-92);
  color: var(--ink);
}

@media (max-width: 1000px) {
  .pdxBento {
    grid-template-columns: repeat(2, 1fr);
  }

  .pdxTile {
    grid-column: span 1;
  }

  .pdxWide {
    grid-column: span 2;
  }
}

@media (max-width: 700px) {
  .pdxPage {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .pdxBento {
    grid-template-columns: 1fr;
  }

  .pdxTile, .pdxWide {
    grid-column: span 1;
    padding: 26px 22px;
  }

  .pdxSection, .pdxSplit {
    margin-top: 72px;
  }

  .pdxSteps {
    gap: 32px;
    padding: 32px 26px;
  }

  .pdxOrder, .pdxAuto {
    padding: 24px 20px;
  }

  .pdxRowEnd .pdxRowMeta {
    display: none;
  }

  .pdxFlip .pdxAuto {
    order: 2;
  }
}

/* [project]/app/styles/parts/100-funnel-step-conversation.css [app-client] (css) */
.wcChannels {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.wcChannel {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  font: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 550;
}

.wcChannel:hover {
  border-color: rgba(var(--brand-rgb), .4);
  color: var(--ink);
}

.wcChannel.on {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .07);
  color: var(--brand-deep);
  font-weight: 650;
}

.wcWarn {
  border: 1px solid var(--notice-border);
  background: var(--notice-bg);
  color: var(--notice-text);
  border-radius: 10px;
  margin-top: 10px;
  padding: 11px 13px 11px 37px;
  font-size: 13px;
  line-height: 1.55;
  position: relative;
}

.wcWarn:before {
  content: "";
  background: var(--warning);
  width: 16px;
  height: 16px;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  -webkit-mask: var(--notice-icon-alert) center / contain no-repeat;
  mask: var(--notice-icon-alert) center / contain no-repeat;
  position: absolute;
  top: calc(.5lh + 3px);
  left: 13px;
}

.wcWarn strong {
  color: var(--ink);
}

.wcWarn em {
  color: var(--ink);
  font-style: normal;
  font-weight: 650;
}

.srcCat {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.srcCard {
  border: 1px solid rgba(var(--ink-deep-rgb), .12);
  background: var(--card);
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  transition: border-color .15s, background .15s;
  display: flex;
}

.srcCard:hover:not(:disabled) {
  border-color: rgba(var(--brand-rgb), .5);
  background: rgba(var(--brand-rgb), .04);
}

.srcCard:disabled {
  opacity: .55;
  cursor: default;
}

.srcCardIcon {
  background: var(--ink);
  width: 36px;
  height: 36px;
  color: var(--c-white);
  border-radius: 10px;
  flex: none;
  place-items: center;
  display: grid;
}

.srcCardIcon svg {
  width: 18px;
  height: 18px;
}

.srcCardText {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.srcCardName {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
}

.srcCardDesc {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.srcCardGo {
  white-space: nowrap;
  color: var(--text-muted);
  flex: none;
  align-self: center;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
}

.srcCardGo.connect {
  background: rgba(var(--brand-rgb), .08);
  color: var(--brand);
  border-radius: 999px;
  padding: 4px 10px;
}

.srcSoon {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .08);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  display: flex;
}

.srcSoonLabel {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
}

.srcSoonItem {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12.5px;
}

.srcConnect {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.srcConnect p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.srcConnectBtn {
  background: var(--brand);
  height: 40px;
  color: var(--c-white);
  border-radius: 10px;
  align-items: center;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}

.srcConnectBtn:hover {
  background: var(--brand-strong);
  color: var(--c-white);
}

.srcConnectAlt {
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  margin-top: -4px;
  padding: 0;
  font-size: 13px;
  font-weight: 550;
}

.srcConnectAlt:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

.srcBack {
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  margin-top: 14px;
  padding: 0;
  font-size: 13px;
}

.srcBack:hover {
  color: var(--ink);
}

.cfgNote {
  background: rgba(var(--brand-rgb), .06);
  color: var(--text-secondary);
  border-radius: 10px;
  margin: -6px 0 16px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
}

.cfgSetUp {
  background: var(--brand);
  height: 38px;
  font: inherit;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  align-items: center;
  margin: -6px 0 16px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}

.cfgSetUp:hover {
  background: var(--brand-strong);
}

/* [project]/app/styles/parts/101-funnels-page.css [app-client] (css) */
.fxPage {
  padding: 72px var(--page-pad) 96px;
  background: var(--card);
}

.fxIntro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.fxTitle {
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
  margin: 14px 0 16px;
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 650;
  line-height: 1.06;
}

.fxLede {
  max-width: 500px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.6;
}

.fxHero {
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
}

.fxTile {
  background: var(--band-muted);
  border-radius: 22px;
  flex-direction: column;
  min-width: 0;
  padding: 26px;
  display: flex;
}

.fxCard {
  background: var(--card);
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb), .06);
  border-radius: 16px;
  flex-direction: column;
  flex: 1;
  display: flex;
}

.fxCardHead {
  border-bottom: 1px solid rgba(var(--ink-deep-rgb), .07);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  display: flex;
}

.fxFlowName {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.fxLive {
  color: var(--text-muted);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.fxDot {
  background: var(--success);
  border-radius: 999px;
  flex: none;
  width: 7px;
  height: 7px;
  display: inline-block;
}

.fxToggle {
  box-sizing: border-box;
  background: var(--success);
  border-radius: 999px;
  justify-content: flex-end;
  width: 34px;
  height: 20px;
  padding: 2px;
  display: inline-flex;
}

.fxKnob {
  background: var(--c-white);
  border-radius: 999px;
  width: 16px;
  height: 16px;
}

.fxChain {
  flex-direction: column;
  align-items: stretch;
  padding: 18px;
  display: flex;
}

.fxNode {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.fxNodeText {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.fxNodeKind {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
}

.fxNodeLine {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 650;
  overflow: hidden;
}

.fxStub {
  background: rgba(var(--ink-deep-rgb), .12);
  width: 2px;
  height: 16px;
  margin: 0 auto;
  display: block;
}

.fxQueue {
  background: var(--ink);
  color: var(--c-white);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 650;
  display: flex;
}

.fxIcon {
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 15px;
  line-height: 1;
  display: grid;
}

.fxIcon svg {
  width: 17px;
  height: 17px;
}

.fxIcon.big {
  border-radius: 11px;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  font-size: 16px;
}

.fxIcon.mid {
  border-radius: 10px;
  width: 34px;
  height: 34px;
}

.fxIcon.mid svg {
  width: 18px;
  height: 18px;
}

.tFacebook {
  background: rgba(var(--brand-facebook-rgb), .1);
  color: var(--brand-facebook);
}

.tAmber {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning-strong);
}

.tRed {
  background: rgba(var(--danger-rgb), .12);
  color: var(--danger-strong);
}

.tYellow {
  background: rgba(var(--c-orange-46-rgb), .12);
  color: var(--c-orange-27);
}

.tViolet {
  background: rgba(var(--c-violet-59-rgb), .14);
  color: var(--brand-accent);
}

.tBlue {
  background: rgba(var(--brand-rgb), .08);
  color: var(--brand);
}

.tDeep {
  background: rgba(var(--brand-rgb), .12);
  color: var(--brand-deep);
}

.tGreen {
  background: rgba(var(--success-rgb), .12);
  color: var(--success-deep);
}

.tGrey {
  background: var(--surface-muted);
  color: var(--text-secondary);
}

.fxLog {
  flex-direction: column;
  padding: 8px 10px;
  display: flex;
}

.fxLogRow {
  align-items: center;
  gap: 11px;
  padding: 10px 8px;
  display: flex;
}

.fxLogMark {
  color: var(--success);
  flex: none;
  font-size: 13px;
  font-weight: 700;
}

.fxLogMark.stopped {
  color: var(--warning-strong);
}

.fxLogWho {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.fxLogName {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.fxLogWhat {
  color: var(--text-muted);
  font-size: 11.5px;
}

.fxLogWhat.stopped {
  color: var(--warning-strong);
}

.fxLogWhen {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
  margin-left: auto;
  font-size: 11.5px;
}

.fxLogNote {
  border-top: 1px solid rgba(var(--ink-deep-rgb), .07);
  color: var(--text-muted);
  margin: auto 0 0;
  padding: 12px 18px 16px;
  font-size: 12.5px;
  line-height: 1.55;
}

.fxSection {
  max-width: 1060px;
  margin: 130px auto 0;
}

.fxSectionHead {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
}

.fxH2 {
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
  margin: 12px 0 16px;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 650;
  line-height: 1.12;
}

.fxSectionLede {
  max-width: 460px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.65;
}

.fxBlocks {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  display: grid;
}

.fxBlock {
  border: 1px solid rgba(var(--ink-deep-rgb), .1);
  border-radius: 16px;
  min-width: 0;
  padding: 26px;
}

.fxBlock h3 {
  color: var(--ink);
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.fxBlock p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.fxSplit {
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 56px;
  max-width: 1020px;
  margin: 130px auto 0;
  display: grid;
}

.fxSplitText {
  max-width: 420px;
}

.fxSplitText p {
  color: var(--text-secondary);
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.65;
}

.fxSplitText p:last-child {
  margin-bottom: 0;
}

.fxSources {
  background: var(--band-muted);
  border-radius: 22px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 30px;
  display: flex;
}

.fxSource {
  background: var(--card);
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb), .06);
  border-radius: 14px;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  display: flex;
}

.fxSourceText {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.fxSourceName {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.fxSourceSub {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.fxSystems {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  display: grid;
}

.fxSystem {
  background: var(--band-muted);
  border-radius: 22px;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  display: flex;
}

.fxSystem h3 {
  color: var(--ink);
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.fxSystem p {
  color: var(--text-secondary);
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
}

.fxSteps {
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.fxStep {
  background: var(--card);
  box-shadow: 0 1px 2px rgba(var(--ink-deep-rgb), .05);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 13px;
}

.fxStep.last {
  background: var(--ink);
  box-shadow: none;
  color: var(--c-white);
}

.fxArrow {
  color: var(--text-muted);
  padding-left: 13px;
}

.fxCta {
  text-align: center;
  max-width: 640px;
  margin: 130px auto 0;
}

.fxCta h2 {
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 10px;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
}

.fxCta p {
  color: var(--text-secondary);
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
}

.fxCtaRow {
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  display: flex;
}

.fxCtaMain, .fxCtaAlt {
  border-radius: 999px;
  align-items: center;
  height: 50px;
  padding: 0 26px;
  font-size: 16px;
  display: inline-flex;
}

.fxCtaMain {
  background: var(--brand);
  color: var(--c-white);
  font-weight: 700;
}

.fxCtaMain:hover {
  background: var(--brand-strong);
  color: var(--c-white);
}

.fxCtaAlt {
  background: var(--band-muted);
  color: var(--ink);
  font-weight: 650;
}

.fxCtaAlt:hover {
  background: var(--c-warm-92);
  color: var(--ink);
}

@media (max-width: 1000px) {
  .fxBlocks, .fxSystems {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .fxHero, .fxSplit {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .fxPage {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .fxBlocks, .fxSystems {
    grid-template-columns: 1fr;
  }

  .fxSection, .fxSplit, .fxCta {
    margin-top: 72px;
  }

  .fxTile, .fxSources, .fxSystem {
    padding: 22px 18px;
  }
}

/* [project]/app/styles/parts/102-extension-connect.css [app-client] (css) */
.xcPage {
  background: var(--band-muted);
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  display: grid;
}

.xcCard {
  background: var(--card);
  width: 100%;
  max-width: 400px;
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb), .08);
  border-radius: 18px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px 30px;
  display: flex;
}

.xcTitle {
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.xcText {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
}

.xcBtn {
  background: var(--brand);
  height: 42px;
  font: inherit;
  color: var(--c-white);
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
  padding: 0 22px;
  font-size: 14.5px;
  font-weight: 650;
  display: inline-flex;
}

.xcBtn:hover:not(:disabled) {
  background: var(--brand-strong);
  color: var(--c-white);
}

.xcBtn:disabled {
  opacity: .55;
  cursor: default;
}

.xcError {
  color: var(--danger-strong);
  margin: 0;
  font-size: 13.5px;
}

/* [project]/app/styles/parts/103-checkbox.css [app-client] (css) */
:root input[type="checkbox"] {
  appearance: none;
  box-sizing: border-box;
  border: 1.5px solid rgba(var(--ink-deep-rgb), .26);
  background: var(--card) center / 12px 12px no-repeat;
  width: 16px;
  height: 16px;
  box-shadow: none;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 5px;
  outline: none;
  flex: none;
  padding: 0;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}

:root input[type="checkbox"]:hover:not(:disabled) {
  border-color: rgba(var(--ink-deep-rgb), .42);
}

:root input[type="checkbox"]:checked, :root input[type="checkbox"]:indeterminate {
  border-color: var(--brand);
  background-color: var(--brand);
}

:root input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

:root input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

:root input[type="checkbox"]:checked:hover:not(:disabled), :root input[type="checkbox"]:indeterminate:hover:not(:disabled) {
  border-color: var(--brand-strong);
  background-color: var(--brand-strong);
}

:root input[type="checkbox"]:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18);
}

:root input[type="checkbox"]:disabled {
  opacity: .5;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  :root input[type="checkbox"] {
    transition: none;
  }
}

/* [project]/app/styles/parts/104-notice.css [app-client] (css) */
:root {
  --notice-bg: var(--surface-sunken);
  --notice-border: rgba(var(--ink-deep-rgb), .1);
  --notice-text: var(--text-secondary);
  --notice-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm-.9 3.6h1.8l-.25 5.6h-1.3Zm.9 6.9a1.05 1.05 0 1 1 0 2.1 1.05 1.05 0 0 1 0-2.1Z'/%3E%3C/svg%3E");
  --notice-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 3.3a1.05 1.05 0 1 1 0 2.1 1.05 1.05 0 0 1 0-2.1Zm-.9 3.3h1.8v5.8h-1.8Z'/%3E%3C/svg%3E");
  --notice-icon-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM4.3 8.1 5.4 7l1.6 1.6L10.6 5l1.1 1.1L7 10.8Z'/%3E%3C/svg%3E");
}

/* [project]/app/globals.css [app-client] (css) */


/*# sourceMappingURL=%5Broot-of-the-server%5D__01jl2z3._.css.map*/