/* VIRO growth surfaces: warm paper, ink teal and a saffron signal. */
:root {
  --growth-ink: #183c3a;
  --growth-teal: #286b60;
  --growth-teal-deep: #1d514b;
  --growth-paper: #f3f2e9;
  --growth-surface: #fffdf6;
  --growth-line: #d9dfd3;
  --growth-muted: #64716a;
  --growth-saffron: #e6ad56;
  --growth-alert: #9a4d27;
}
.growth-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 0 56px;
  color: var(--growth-ink);
}
.growth-page-head, .section-heading, .approval-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.growth-page-head { margin: 10px 0 26px; }
.growth-page-head h1, .growth-hero h1 {
  margin: 2px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.03;
  letter-spacing: -.055em;
}
.growth-page-head p:not(.growth-kicker), .growth-hero > p:last-child {
  max-width: 640px;
  color: var(--growth-muted);
}
.growth-kicker {
  color: var(--growth-teal);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.growth-plan-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 13px;
  background: #e7ebdf;
  color: var(--growth-ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
}
.growth-plan-tag.is-pro { color: #523615; background: #f7e4bc; }
.growth-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}
.growth-metrics > div {
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--growth-line);
  border-radius: 12px;
  background: var(--growth-surface);
}
.growth-metrics .metric-feature {
  background: var(--growth-teal);
  color: #f8f5e9;
  border-color: var(--growth-teal);
}
.growth-metrics span, .growth-metrics small { display: block; font-size: .76rem; color: var(--growth-muted); }
.growth-metrics .metric-feature span, .growth-metrics .metric-feature small { color: #d2e6d8; }
.growth-metrics strong { display: block; margin: 8px 0 4px; font: 800 1.7rem/1 var(--font-display); letter-spacing: -.04em; }
.growth-panel {
  margin: 16px 0;
  padding: clamp(18px, 3vw, 28px);
  background: var(--growth-surface);
  border: 1px solid var(--growth-line);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(28, 55, 44, .045);
}
.growth-panel h2, .growth-panel h3, .growth-empty h2 {
  color: var(--growth-ink);
  font-family: var(--font-display);
  letter-spacing: -.035em;
}
.growth-panel h2 { margin: 0 0 5px; font-size: 1.4rem; }
.growth-panel h3 { margin-bottom: 12px; }
.section-heading { margin-bottom: 20px; }
.section-heading p:not(.growth-kicker) { color: var(--growth-muted); font-size: .9rem; }
.growth-small, .growth-muted { color: var(--growth-muted); font-size: .83rem; }
.growth-callout {
  border: 1px solid #edcf98;
  border-left: 4px solid var(--growth-saffron);
  border-radius: 10px;
  background: #fff6e4;
  color: #59472c;
  padding: 14px 17px;
  margin: 14px 0;
}
.growth-callout strong { display: block; color: #503e22; }
.growth-callout p { margin-top: 4px; font-size: .88rem; }
.growth-callout.compact { padding: 9px 11px; margin: 8px 0; font-size: .8rem; }
.growth-callout.compact span { display:block; }
.growth-callout.large { padding: 20px; margin: 0 0 18px; }
.growth-form { display: grid; gap: 12px; }
.growth-form label:not(.growth-check) { display: grid; gap: 6px; color: var(--growth-ink); font-size: .83rem; font-weight: 700; }
.growth-form input:not([type="checkbox"]), .growth-form select, .growth-form textarea,
.referral-url {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #cbd5c9;
  border-radius: 8px;
  background: #fffefa;
  color: var(--growth-ink);
  font: 500 .9rem var(--font-body);
}
.growth-form textarea { resize: vertical; }
.growth-form input:focus, .growth-form select:focus, .growth-form textarea:focus, .referral-url:focus {
  outline: 3px solid rgba(40, 107, 96, .18);
  border-color: var(--growth-teal);
}
.growth-check { display:flex !important; align-items:flex-start; gap:10px; margin: 4px 0; color: var(--growth-ink); font-size:.86rem; font-weight:600; }
.growth-check input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--growth-teal); flex:0 0 auto; }
.growth-warning { color:var(--growth-alert); }
.growth-fields, .filter-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.filter-fields { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; }
.filter-fields .btn { min-height:42px; }
.growth-audience-summary { display:flex; justify-content:space-between; gap:10px; padding:14px 0 10px; color:var(--growth-teal); }
.growth-audience-summary span { color:var(--growth-muted); font-size:.82rem; }
.growth-action-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:14px; margin-top:20px; }
.mini-form { align-content:start; padding:17px; border:1px solid var(--growth-line); border-radius:12px; background:#f8f8f0; }
.mini-form small { color:var(--growth-muted); }
.segment-saved { margin-top:22px; }
.segment-saved ul, .delivery-list { list-style:none; }
.segment-saved li, .delivery-list li {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--growth-line);
}
.text-action { border:0; background:none; color:#985038; cursor:pointer; font:700 .83rem var(--font-body); text-decoration:underline; }
.table-scroll { overflow-x:auto; }
.growth-table { min-width:680px; }
.growth-table th { color:var(--growth-muted); }
.growth-table td small { color:var(--growth-muted); }
.trend-bars { display:flex; align-items:stretch; gap:10px; min-height:180px; overflow-x:auto; padding:10px 0 0; }
.trend-week { min-width:58px; flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:7px; text-align:center; }
.trend-week small, .trend-week > span { color:var(--growth-muted); font-size:.68rem; }
.trend-week > span { color:var(--growth-ink); }
.trend-bar-stack { display:flex; align-items:flex-end; justify-content:center; gap:4px; height:130px; border-bottom:1px solid var(--growth-line); }
.trend-bar { width:13px; height:max(5px,var(--bar)); display:block; border-radius:5px 5px 0 0; background:var(--growth-teal); transform-origin:bottom; }
.trend-bar.returning { background:var(--growth-saffron); }
.growth-legend { color:var(--growth-muted); font-size:.78rem; margin-top:14px; }
.growth-legend i { display:inline-block; width:9px;height:9px;border-radius:50%;background:var(--growth-teal);margin:0 5px 0 10px; }
.growth-legend .legend-return { background:var(--growth-saffron); }
.delivery-list li > span:first-child { display:grid; gap:4px; }
.delivery-list small { color:var(--growth-muted); }
.growth-empty { padding:55px 20px; text-align:center; border:1px dashed #b8c9bd; border-radius:16px; background:#f9faf2; }
.growth-empty > span { display:grid; place-items:center; width:44px; height:44px; margin:0 auto 14px; border-radius:50%; background:#dcebe0; color:var(--growth-teal); font-size:1.4rem; font-weight:800; }
.growth-empty p { color:var(--growth-muted); }
.growth-inline-action { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; padding-top:16px; border-top:1px solid var(--growth-line); }
.growth-inline-action p { color:var(--growth-muted); font-size:.83rem; }
.expiry-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--growth-line); }
.expiry-row label { display:grid; gap:3px; }
.expiry-row label span, .expiry-row > div > span { color:var(--growth-muted); font-size:.78rem; }
.expiry-row > div { display:flex; align-items:center; gap:8px; }
.expiry-row input { width:86px; min-height:38px; border:1px solid var(--growth-line); border-radius:7px; padding:6px; }
.referral-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.referral-stats { display:flex; gap:22px; color:var(--growth-muted); font-size:.84rem; }
.referral-stats strong { display:block; color:var(--growth-ink); font-size:1.4rem; }
.starter-features { background:#eaf0e4; }
.starter-list { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.starter-list span { padding:9px 12px; border-radius:7px; background:#fffdf6; color:var(--growth-teal-deep); font-size:.83rem; font-weight:700; }
.growth-upgrade { display:flex; justify-content:space-between; align-items:center; gap:28px; padding:clamp(22px,4vw,38px); border-radius:18px; background:var(--growth-ink); color:#f9f4e7; }
.growth-upgrade h2 { font:700 clamp(1.5rem,3vw,2.3rem)/1.1 var(--font-display); letter-spacing:-.04em; margin:5px 0 8px; }
.growth-upgrade p { max-width:660px; color:#d3e1d7; }
.growth-upgrade .growth-kicker { color:#efc27b; }
.growth-upgrade form { display:grid; gap:10px; min-width:225px; }
.growth-upgrade small { color:#d3e1d7; font-size:.75rem; }
.plans-page { max-width:920px; }
.growth-hero { text-align:center; padding:25px 18px 35px; }
.growth-hero .viro-brand-logo-form { margin-bottom:20px; }
.growth-hero > p:last-child { margin:8px auto 0; }
.growth-hero h1 em { color:var(--growth-teal); font-style:normal; }
.plan-matrix { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:10px 0 18px; }
.plan-column { padding:26px; border:1px solid var(--growth-line); border-radius:16px; background:var(--growth-surface); }
.plan-column h2 { margin:15px 0 7px; font:700 1.6rem var(--font-display); }
.plan-column p { color:var(--growth-muted); }
.plan-column ul { padding:0; margin:22px 0 0; list-style:none; }
.plan-column li { position:relative; padding:10px 0 10px 25px; border-top:1px solid var(--growth-line); font-size:.9rem; }
.plan-column li:before { content:"+"; position:absolute; left:2px; color:var(--growth-teal); font-weight:900; }
.plan-pro { background:#f4ead5; border-color:#e6c987; }
.approval-list { display:grid; gap:14px; margin-top:18px; }
.approval-item h2 { margin:7px 0 2px; font-size:1.25rem; }
.approval-head p, .approval-head time { color:var(--growth-muted); font-size:.82rem; }
.approval-count { margin:16px 0; padding:11px 13px; background:#f1f3e9; border-radius:8px; font-size:.84rem; }
.growth-warning-text { display:block; margin-top:5px; color:var(--growth-alert); font-weight:700; }
.approval-actions { display:flex; align-items:flex-start; gap:14px; }
.approval-actions > form:first-child { flex:1; }
.approval-actions > form:last-child { padding-top:6px; }
.approval-actions .growth-fields { margin:3px 0 5px; }
.request-page { max-width:650px; padding-top:30px; }
.request-page .growth-panel { margin:18px 0; }
.request-page .btn { margin:6px 8px 0 0; }
.growth-status { display:grid; gap:4px; padding:15px; margin:12px 0; border-radius:10px; background:#e7f1e7; color:var(--growth-teal-deep); }
.growth-status span { font-size:.84rem; }
.status-rejected { background:#f8e9e1; color:#8b452d; }
.status-pending { background:#fbf0d9; color:#72551f; }
.growth-brand-logo { width:30px; height:30px; object-fit:contain; border-radius:50%; vertical-align:middle; }
.customer-welcome { display:flex; align-items:center; gap:12px; }
.reward-expiry ul { margin:8px 0 0 18px; font-size:.83rem; }
.reward-expiry li { padding:3px 0; }
.approval-item .growth-check { margin:8px 0; }
.referral-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.referral-cards .growth-panel { margin:0; }
.referral-url { margin-top:6px; cursor:text; }
.growth-small a { text-decoration:underline; }
@media (max-width:900px) {
  .growth-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .filter-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  .growth-wrap { padding:5px 0 35px; }
  .growth-page-head, .growth-inline-action, .growth-upgrade, .referral-panel, .approval-head { flex-direction:column; }
  .growth-page-head { gap:12px; }
  .growth-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .growth-metrics > div { min-height:104px; padding:12px; }
  .growth-metrics strong { font-size:1.4rem; }
  .growth-fields, .filter-fields, .growth-action-grid, .plan-matrix { grid-template-columns:1fr; }
  .growth-audience-summary { align-items:flex-start; flex-direction:column; }
  .approval-actions { flex-direction:column; }
  .approval-actions > form { width:100%; }
  .expiry-row { align-items:flex-start; flex-direction:column; }
  .growth-upgrade form { width:100%; }
  .growth-upgrade .btn { width:100%; }
  .referral-stats { justify-content:flex-start; }
}