/* Customer CRM landing hero. Kept separate from the shared product-page theme. */
.crm-hero {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.12fr);
  gap: clamp(36px, 5vw, 76px); align-items: center;
  min-height: 0; padding: 88px 0 76px;
}
.crm-hero .crm-hero-label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  color: #a9c4ff; font-size: 14px; font-weight: 500; letter-spacing: .01em;
}
.crm-hero .crm-hero-label svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.crm-hero h1 {
  max-width: 12ch; margin: 0; font-size: clamp(48px, 4.55vw, 72px);
  font-weight: 400; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance;
}
.crm-hero .crm-hero-intro {
  max-width: 46ch; margin: 23px 0 0; color: #c1cce0;
  font-size: 18px; line-height: 1.6;
}
.crm-hero .crm-hero-benefits { display: grid; gap: 15px; margin: 28px 0 0; padding: 0; list-style: none; }
.crm-hero .crm-hero-benefits li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: #a9b8d0; }
.crm-hero .crm-hero-benefits svg { width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0; fill: none; stroke: #78dbc9; stroke-width: 1.5; }
.crm-hero .crm-hero-benefits strong { display: block; color: #eff3fb; font-size: 15px; font-weight: 600; }
.crm-hero .crm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }
.crm-hero .crm-hero-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 650; line-height: 1.4; }
.crm-hero .crm-hero-start { background: #96b8ff; color: #081426; border: 1px solid #96b8ff; }
.crm-hero .crm-hero-watch { color: #e2eafa; border: 1px solid #344761; background: #0c172b; }
.crm-hero .crm-hero-watch svg { width: 15px; height: 15px; fill: currentColor; }
.crm-hero .crm-hero-actions a:hover { filter: brightness(1.12); }
.crm-hero .crm-hero-note { margin: 13px 0 0; font-size: 12px; line-height: 1.5; color: #8e9fb8; }
.crm-hero .crm-preview { min-width: 0; border: 1px solid #30415f; border-radius: 20px; background: #0a1426; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(0,0,0,.65); }
.crm-hero .crm-preview-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 20px 22px; border-bottom: 1px solid #25334d; }
.crm-hero .crm-preview-brand { display: flex; align-items: center; gap: 10px; color: #f2f5ff; font-size: 14px; font-weight: 650; }
.crm-hero .crm-preview-brand svg { width: 27px; height: 27px; padding: 5px; border-radius: 7px; color: #8baeff; background: #1c2b48; stroke: currentColor; stroke-width: 1.7; fill: none; }
.crm-hero .crm-preview-example { padding: 4px 8px; border: 1px solid #34415b; border-radius: 6px; color: #9eacc4; font-size: 10px; line-height: 1.4; }
.crm-hero .crm-preview-tabs { display: flex; padding: 0 22px; gap: 22px; border-bottom: 1px solid #26354f; }
.crm-hero .crm-preview-tabs button { min-width: 0; padding: 16px 0 14px; border: 0; border-bottom: 2px solid transparent; color: #94a5c1; background: none; cursor: pointer; font-size: 13px; font-weight: 550; line-height: 1.35; }
.crm-hero .crm-preview-tabs button[aria-selected="true"] { border-bottom-color: #93b5ff; color: #e9f0ff; }
.crm-hero .crm-preview-body { padding: 22px; }
.crm-hero [role="tabpanel"] { width: 100%; margin: 0; min-height: 345px; }
.crm-hero [hidden] { display: none !important; }
.crm-hero .crm-panel-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.crm-hero .crm-panel-heading h2 { font: 600 20px/1.2 var(--hx26-body, sans-serif); letter-spacing: -.02em; }
.crm-hero .crm-panel-heading > span { color: #96a7c3; font-size: 11px; }
.crm-hero .crm-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.crm-hero .crm-lane { min-width: 0; }
.crm-hero .crm-lane-title { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; color: #becbe0; font-size: 11px; line-height: 1.3; }
.crm-hero .crm-lane-title::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #82b0ff; }
.crm-hero .crm-lane:nth-child(2) .crm-lane-title::before { background: #bb9afa; }
.crm-hero .crm-lane:nth-child(3) .crm-lane-title::before { background: #78dbc9; }
.crm-hero .crm-lead { display: flex; flex-direction: column; min-height: 180px; padding: 14px 12px; border: 1px solid #293956; border-radius: 11px; background: #101e35; }
.crm-hero .crm-lead.is-selected { border-color: #6c95ed; background: #152743; }
.crm-hero .crm-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #29466a; color: #cbe0ff; font-size: 11px; font-weight: 650; }
.crm-hero .crm-lane:nth-child(2) .crm-avatar { background: #352d54; color: #d7c5ff; }
.crm-hero .crm-lane:nth-child(3) .crm-avatar { background: #1d423f; color: #adede3; }
.crm-hero .crm-lead > strong { margin-top: 11px; color: #f1f4fc; font-size: 13px; line-height: 1.3; }
.crm-hero .crm-lead > small { margin-top: 5px; color: #95a9c6; font-size: 10px; line-height: 1.45; }
.crm-hero .crm-lead-value { display: grid; gap: 4px; margin-top: 16px; }
.crm-hero .crm-lead-value small { color: #95a9c6; font-size: 10px; }
.crm-hero .crm-lead-value b { color: #e1ecff; font-size: 19px; line-height: 1.2; font-weight: 550; }
.crm-hero .crm-lead > span:last-child { margin-top: auto; padding-top: 16px; color: #bfd1ef; font-size: 10px; line-height: 1.4; }
.crm-hero .crm-followup { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 20px; padding: 16px 14px; border: 1px solid #315856; border-radius: 11px; background: #102b2f; }
.crm-hero .crm-followup > svg { width: 24px; height: 24px; color: #8ce3d2; stroke: currentColor; fill: none; stroke-width: 1.5; }
.crm-hero .crm-followup strong { display: block; color: #d8f6ee; font-size: 13px; line-height: 1.4; }
.crm-hero .crm-followup small { display: block; margin-top: 3px; color: #9ebcbd; font-size: 11px; }
.crm-hero .crm-followup button { min-height: 40px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #b9f2e7; font-size: 12px; cursor: pointer; }
.crm-hero .crm-person { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.crm-hero .crm-person .crm-avatar { width: 42px; height: 42px; font-size: 14px; }
.crm-hero .crm-person strong { display: block; color: #f0f4fc; font-size: 18px; }
.crm-hero .crm-person small { display: block; margin-top: 3px; font-size: 12px; color: #9caecc; }
.crm-hero .crm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin: 0; }
.crm-hero .crm-fields dt { color: #94a5c1; font-size: 11px; }
.crm-hero .crm-fields dd { margin: 4px 0 0; color: #ecf1fa; font-size: 13px; overflow-wrap: anywhere; }
.crm-hero .crm-customer-note { margin-top: 22px; padding: 15px; border-left: 2px solid #89adf5; background: #111f37; border-radius: 0 8px 8px 0; }
.crm-hero .crm-customer-note small { color: #9eafd1; font-size: 11px; }
.crm-hero .crm-customer-note p { margin: 6px 0 0; color: #d9e4f6; font-size: 14px; line-height: 1.5; }
.crm-hero .crm-action-top { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; color: #a5bfff; font-size: 12px; }
.crm-hero .crm-action-top svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.crm-hero .crm-action-title { margin: 0; font: 600 26px/1.2 var(--hx26-body, sans-serif); letter-spacing: -.02em; }
.crm-hero .crm-action-copy { margin: 14px 0 20px; max-width: 45ch; color: #b8c7de; font-size: 15px; line-height: 1.6; }
.crm-hero .crm-action-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-hero .crm-action-meta span { padding: 6px 10px; background: #152a3b; border: 1px solid #2c495b; border-radius: 7px; font-size: 11px; color: #c7e3e8; }
.crm-hero .crm-context-link { display: inline-flex; padding: 0; margin-top: 24px; border: 0; border-bottom: 1px solid #607fa8; color: #b5d0ff; background: none; cursor: pointer; font-size: 13px; }
.crm-hero .crm-preview-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 14px 22px; border-top: 1px solid #26354f; color: #8f9fb9; font-size: 10px; }
.crm-hero .crm-preview-foot span:last-child { color: #96cfc5; }
.crm-hero a:focus-visible, .crm-hero button:focus-visible { outline: 2px solid #a2c7ff; outline-offset: 4px; }
@media (max-width: 1100px) {
  .crm-hero { gap: 32px; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); padding-top: 64px; }
  .crm-hero h1 { font-size: 52px; }
  .crm-hero .crm-preview-body { padding: 16px; }
  .crm-hero .crm-preview-tabs { padding: 0 16px; gap: 18px; }
}
@media (max-width: 880px) {
  .crm-hero { grid-template-columns: minmax(0,1fr); max-width: 700px; padding: 52px 0 36px; }
  .crm-hero h1 { max-width: 17ch; font-size: clamp(42px,6.7vw,62px); }
  .crm-hero .crm-hero-intro { max-width: 52ch; }
  .crm-hero .crm-hero-benefits { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  .crm-hero .crm-hero-benefits li { display: block; font-size: 12px; }
  .crm-hero .crm-hero-benefits svg { margin-bottom: 7px; }
  .crm-hero .crm-hero-benefits strong { margin-bottom: 4px; font-size: 13px; }
}
@media (max-width: 520px) {
  .crm-hero { width: calc(100% - 36px); gap: 28px; padding-top: 34px; }
  .crm-hero .crm-hero-label { font-size: 12px; margin-bottom: 18px; }
  .crm-hero h1 { font-size: 43px; line-height: 1.05; }
  .crm-hero .crm-hero-intro { font-size: 16px; margin-top: 18px; }
  .crm-hero .crm-hero-benefits { margin-top: 22px; gap: 12px; }
  .crm-hero .crm-hero-benefits { grid-template-columns: 1fr; }
  .crm-hero .crm-hero-benefits li { display: flex; }
  .crm-hero .crm-hero-benefits strong { margin-bottom: 1px; }
  .crm-hero .crm-hero-actions { margin-top: 24px; gap: 9px; }
  .crm-hero .crm-hero-actions a { padding: 11px 14px; font-size: 12px; }
  .crm-hero .crm-preview { border-radius: 14px; }
  .crm-hero .crm-preview-head { padding: 15px 13px; gap: 8px; }
  .crm-hero .crm-preview-brand { font-size: 12px; }
  .crm-hero .crm-preview-example { font-size: 9px; }
  .crm-hero .crm-preview-tabs { padding-inline: 12px; gap: 15px; }
  .crm-hero .crm-preview-tabs button { font-size: 11px; padding-block: 14px 12px; }
  .crm-hero .crm-preview-body { padding: 16px 10px; }
  .crm-hero .crm-board { gap: 6px; }
  .crm-hero .crm-lane-title { font-size: 10px; min-height: 27px; align-items: baseline; gap: 5px; }
  .crm-hero .crm-lead { padding: 11px 8px; min-height: 178px; }
  .crm-hero .crm-lead > strong { font-size: 12px; }
  .crm-hero .crm-lead > small, .crm-hero .crm-lead > span:last-child { font-size: 9px; }
  .crm-hero .crm-lead-value small { font-size: 9px; }
  .crm-hero .crm-lead-value b { font-size: 17px; }
  .crm-hero .crm-followup { padding: 12px 9px; gap: 8px; }
  .crm-hero .crm-followup strong { font-size: 12px; }
  .crm-hero .crm-followup > svg { width: 20px; }
  .crm-hero .crm-followup button { font-size: 10px; }
  .crm-hero .crm-preview-foot { padding-inline: 13px; }
}

/* Brand tokens also theme the example interface, so it belongs to each site. */
.crm-hero {
 --ch-ink:#eef3fc; --ch-muted:#aebdd4; --ch-line:#30415f; --ch-panel:#0a1426;
 --ch-card:#101e35; --ch-selected:#162b49; --ch-accent:#a9c4ff; --ch-tint:#1c3457;
 --ch-button:#a9c4ff; --ch-button-ink:#09162a; --ch-shadow:rgba(0,0,0,.25);
 width:min(1380px,calc(100% - 80px)); margin:0 auto; padding:210px 0 72px;
 font-family:var(--font-body,system-ui,sans-serif); color:var(--ch-ink);
}
.crm-hero[data-crm-brand="med"] {
 --ch-ink:#1b2a34; --ch-muted:#54626e; --ch-line:#cddfdc; --ch-panel:#ffffff;
 --ch-card:#f5f8f7; --ch-selected:#eaf6f2; --ch-accent:#087262; --ch-tint:#e0f1eb;
 --ch-button:#0a7c6c; --ch-button-ink:#ffffff; --ch-shadow:rgba(20,70,60,.13);
}
.crm-hero[data-crm-brand="beauty"] {
 --ch-ink:#281d16; --ch-muted:#716252; --ch-line:#ded2c0; --ch-panel:#fffdf9;
 --ch-card:#f8f3e9; --ch-selected:#f6ecdc; --ch-accent:#80521c; --ch-tint:#f1e4ce;
 --ch-button:#80521c; --ch-button-ink:#ffffff; --ch-shadow:rgba(87,58,21,.13);
}
.crm-hero[data-crm-brand="gym"] {
 --ch-ink:#f5f7ef; --ch-muted:#b5c2b9; --ch-line:#3d4c3c; --ch-panel:#121814;
 --ch-card:#1b241e; --ch-selected:#253324; --ch-accent:#c8ff3d; --ch-tint:#2c3c22;
 --ch-button:#c8ff3d; --ch-button-ink:#18200b;
 background:#0a0c0c; box-shadow:0 0 0 100vmax #0a0c0c; clip-path:inset(0 -100vmax);
}
.crm-hero[data-crm-brand="hospitality"] {
 --ch-ink:#f7f1e6; --ch-muted:#bcac90; --ch-line:#514129; --ch-panel:#130f09;
 --ch-card:#211b12; --ch-selected:#302617; --ch-accent:#e8c27a; --ch-tint:#3b2f1d;
 --ch-button:#e8c27a; --ch-button-ink:#211707; padding-top:324px;
}
.crm-hero h1 {font-family:var(--font-display,Georgia,serif); color:var(--ch-ink); max-width:15ch; font-size:clamp(44px,4.1vw,64px); overflow-wrap:anywhere; hyphens:auto;}
.crm-hero[data-crm-brand="gym"] h1 {font-family:var(--font-body,system-ui,sans-serif);font-weight:650;letter-spacing:-.045em;}
.crm-hero .crm-hero-label,.crm-hero .crm-hero-benefits svg {color:var(--ch-accent);stroke:currentColor;}
.crm-hero .crm-hero-intro,.crm-hero .crm-hero-benefits li,.crm-hero .crm-hero-note {color:var(--ch-muted);}
.crm-hero .crm-hero-benefits strong {color:var(--ch-ink);}
.crm-hero .crm-hero-start {color:var(--ch-button-ink);background:var(--ch-button);border-color:var(--ch-button);}
.crm-hero .crm-hero-watch {color:var(--ch-ink);background:var(--ch-panel);border-color:var(--ch-line);}
.crm-hero .crm-preview {background:var(--ch-panel);border-color:var(--ch-line);box-shadow:0 28px 60px -22px var(--ch-shadow);}
.crm-hero .crm-preview-head,.crm-hero .crm-preview-tabs,.crm-hero .crm-preview-foot {border-color:var(--ch-line);}
.crm-hero .crm-preview-brand {color:var(--ch-ink);}
.crm-hero .crm-preview-brand svg,.crm-hero .crm-avatar,.crm-hero .crm-lane:nth-child(n) .crm-avatar {color:var(--ch-accent);background:var(--ch-tint);}
.crm-hero .crm-preview-example {color:var(--ch-muted);border-color:var(--ch-line);}
.crm-hero .crm-preview-tabs button {font-family:inherit;color:var(--ch-muted);}
.crm-hero .crm-preview-tabs button[aria-selected="true"] {color:var(--ch-ink);border-color:var(--ch-accent);}
.crm-hero [role="tabpanel"] {padding:0; max-width:none;}
.crm-hero .crm-panel-heading h2,.crm-hero .crm-action-title {margin:0;color:var(--ch-ink);font-family:var(--font-body,system-ui,sans-serif);}
.crm-hero .crm-panel-heading>span,.crm-hero .crm-lane-title {color:var(--ch-muted);}
.crm-hero .crm-lane:nth-child(n) .crm-lane-title::before {background:var(--ch-accent);}
.crm-hero .crm-lane:nth-child(2) .crm-lane-title::before {opacity:.6;}
.crm-hero .crm-lane:nth-child(3) .crm-lane-title::before {background:var(--ch-muted);}
.crm-hero .crm-lead {background:var(--ch-card);border-color:var(--ch-line);min-height:210px;}
.crm-hero .crm-lead.is-selected {background:var(--ch-selected);border-color:var(--ch-accent);}
.crm-hero .crm-lead>strong,.crm-hero .crm-lead-value b {color:var(--ch-ink);}
.crm-hero .crm-lead-value b {font-size:15px;line-height:1.4;overflow-wrap:anywhere;}
.crm-hero .crm-lead>small,.crm-hero .crm-lead-value small,.crm-hero .crm-lead>span:last-child {color:var(--ch-muted);}
.crm-hero .crm-followup {background:var(--ch-selected);border-color:var(--ch-line);}
.crm-hero .crm-followup>svg,.crm-hero .crm-followup button {color:var(--ch-accent);}
.crm-hero .crm-followup strong,.crm-hero .crm-person strong,.crm-hero .crm-fields dd {color:var(--ch-ink);}
.crm-hero .crm-followup small,.crm-hero .crm-person small,.crm-hero .crm-fields dt {color:var(--ch-muted);}
.crm-hero .crm-customer-note {background:var(--ch-card);border-color:var(--ch-accent);}
.crm-hero .crm-customer-note small {color:var(--ch-muted);}
.crm-hero .crm-customer-note p {color:var(--ch-ink);}
.crm-hero .crm-action-top,.crm-hero .crm-context-link {color:var(--ch-accent);border-color:var(--ch-accent);}
.crm-hero .crm-action-copy {color:var(--ch-muted);}
.crm-hero .crm-action-meta span {background:var(--ch-card);border-color:var(--ch-line);color:var(--ch-muted);}
.crm-hero .crm-preview-foot,.crm-hero .crm-preview-foot span:last-child {color:var(--ch-muted);}
.crm-hero a:focus-visible,.crm-hero button:focus-visible {outline-color:var(--ch-accent);}
@media(max-width:1100px){.crm-hero{padding-top:200px;gap:30px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}.crm-hero h1{font-size:46px;}}
@media(max-width:880px){.crm-hero{width:calc(100% - 48px);grid-template-columns:minmax(0,1fr);padding-top:184px;}.crm-hero h1{max-width:20ch;font-size:clamp(39px,6.7vw,58px);}.crm-hero[data-crm-brand="hospitality"]{padding-top:260px;}}
@media(max-width:520px){.crm-hero{width:calc(100% - 36px);padding-top:176px;}.crm-hero h1{font-size:40px;}.crm-hero .crm-lead-value b{font-size:12px;}.crm-hero .crm-lead{min-height:208px;}.crm-hero .crm-preview-example{max-width:45%;}.crm-hero[data-crm-brand="hospitality"]{padding-top:252px;}}