/* ==========================================================================
   GROWFLO — Elevation layer (Unitas-grade pass)
   Display-font pairing, larger type scale, brand shape language, duotone
   illustration tiles. Linked on the homepage first; propagate site-wide once
   approved.
   ========================================================================== */

/* ---- Type scale bump (overrides tokens for elevated pages) ------------- */
:root {
  --text-display: clamp(3rem, 4.6vw, 4.5rem);   /* up to 72px */
  --text-h1:      clamp(2.6rem, 3.6vw, 3.5rem); /* up to 56px */
  --text-h2:      clamp(2.1rem, 2.9vw, 2.75rem);/* up to 44px */
  --text-h3:      1.6rem;                        /* 26px */
  --text-lg:      1.2rem;                        /* 19px lead */
}

/* ---- Display-font pairing ---------------------------------------------- */
.display, h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
}
.display { font-weight: var(--fw-black); }
h1, .h1, h2, .h2 { font-weight: var(--fw-bold); }
h3, .h3, h4, .h4 { font-weight: var(--fw-semi); }
.display, h1, .h1 { letter-spacing: 0; line-height: 1.08; }
h2, .h2 { letter-spacing: 0; line-height: 1.12; }
h3, .h3, h4, .h4 { letter-spacing: 0; }
.lead { font-weight: 400; }
.eyebrow { font-family: var(--font-sans); letter-spacing: .12em; }
.section-head { max-width: 760px; }
.section-head h2 { margin-bottom: var(--sp-5); }

/* ---- Soft section blending -------------------------------------------- */
/* Broad ambient washes replace object-level glow blobs. */
.section--cream, .section--sand { background: transparent; position: relative; isolation: isolate; }
.section--cream::after, .section--sand::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.section--cream::after {
  background:
    linear-gradient(180deg, rgba(244,244,236,0) 0%, rgba(244,244,236,.46) 24%, rgba(244,244,236,.38) 76%, rgba(244,244,236,0) 100%),
    linear-gradient(115deg, rgba(169,211,110,0) 12%, rgba(169,211,110,.025) 48%, rgba(169,211,110,0) 78%);
}
.section--sand::after {
  background:
    linear-gradient(180deg, rgba(250,250,244,0) 0%, rgba(250,250,244,.54) 24%, rgba(250,250,244,.42) 76%, rgba(250,250,244,0) 100%),
    linear-gradient(115deg, rgba(169,211,110,0) 12%, rgba(169,211,110,.018) 48%, rgba(169,211,110,0) 78%);
}
.ill img { width: 46px; height: 46px; display: block; }

/* ---- Airier rhythm (Unitas-grade whitespace) -------------------------- */
.section { padding-block: clamp(4.5rem, 7vw, 7.5rem); }
.section.tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section-head, .section-head.center { margin-bottom: var(--sp-8); }
.grid { gap: var(--sp-6); }
.showcase, .why-grid, .intro { gap: clamp(var(--sp-7), 6vw, var(--sp-10)); }

/* ---- Numbered stepper (onboarding) — bold circles + dotted arrows ------ */
.stepper { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
.stepper::before { content: ""; position: absolute; top: 38px; left: 13%; right: 13%; height: 2px; z-index: 0;
  background-image: radial-gradient(circle, var(--border-strong) 1.5px, transparent 1.7px);
  background-size: 12px 12px; background-position: 0 center; background-repeat: repeat-x; }
.stepper-item { position: relative; text-align: center; padding: 0 var(--sp-4); }
.step-circle { position: relative; z-index: 1; width: 76px; height: 76px; margin: 0 auto var(--sp-5);
  border-radius: 50%; background: var(--green-50); color: var(--green-600);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 2rem;
  box-shadow: inset 0 0 0 1.5px rgba(100,165,43,.22); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.stepper-item:hover .step-circle { transform: translateY(-3px); background: var(--green-100); }
.stepper-item:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: 32px; right: -20px;
  border: 6px solid transparent; border-left-color: var(--green-500); }
.stepper-item h4 { margin-bottom: var(--sp-3); }
.stepper-item p { color: var(--text-muted); font-size: var(--text-sm); max-width: 230px; margin-inline: auto; }
.stepper-cta { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-8); flex-wrap: wrap; }
.stepper-cta p { font-weight: var(--fw-semi); color: var(--text-strong); }
@media (max-width: 900px){
  .stepper { grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-5); }
  .stepper::before, .stepper-item:not(:last-child)::after { display: none; }
}

/* ---- Brand shape language: blob + concentric rings -------------------- */
.blob { position: absolute; z-index: 0; pointer-events: none; filter: blur(.5px); }
.rings { position: absolute; z-index: 0; pointer-events: none; }
.rings span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 1.5px solid rgba(100,165,43,.20); border-radius: 50%;
}

/* faint dotted field used behind elevated sections */
.dotfield { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(21,57,43,.05) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); }

/* ---- Duotone illustration tile (replaces flat icon boxes) ------------- */
.ill {
  display: grid; place-items: center; width: 76px; height: 76px;
  border-radius: var(--r-lg); background: var(--green-50);
  box-shadow: inset 0 0 0 1px rgba(100,165,43,.14);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ill svg { width: 46px; height: 46px; display: block; }
.feature:hover .ill, .module:hover .ill { transform: translateY(-3px) rotate(-3deg); background: var(--green-100); }
/* neutralise the old icon-box auto-tint-on-hover for elevated cards */
.feature:hover .ill, .module:hover .ill { color: inherit; }

/* elevated cards: a touch more padding + softer */
.feature, .module { padding: var(--sp-6) var(--sp-6) calc(var(--sp-6) + 4px); border-radius: var(--r-xl); }
.feature h4, .module h4 { font-size: var(--text-h4); margin-top: var(--sp-5); }

/* inner-page dark "why it matters" tiles — translucent tile + light icon */
.matter .ill { margin-bottom: var(--sp-5); width: 60px; height: 60px;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.matter .ill img { width: 34px; height: 34px; }
.matter:hover .ill { background: rgba(255,255,255,.14); transform: none; }

/* ---- Floating chip (hero) — refined --------------------------------- */
.chip-float {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-xl); padding: 13px 17px;
}
.chip-float .cf-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex: none; }
.chip-float .cf-ic svg { width: 24px; height: 24px; }
.chip-float .cf-num { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text-strong); line-height: 1; letter-spacing: 0; }
.chip-float .cf-lbl { font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }

/* ---- Custom-coded Growflo dashboard (replaces product screenshots) ---- */
.dash { display: flex; height: 320px; background: #fff; text-align: left; }
.dash * { box-sizing: border-box; }
.dash-side { width: 60px; flex: none; background: linear-gradient(180deg, var(--forest-700), var(--forest-900)); display: flex; flex-direction: column; align-items: center; padding: 13px 0; gap: 5px; }
.dash-side .ds-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--green-500); display: grid; place-items: center; color: #fff; margin-bottom: 8px; }
.dash-side .ds-logo img { width: 21px; height: 21px; display: block; }
.dash-side .ds-i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #aecb9b; }
.dash-side .ds-i svg { width: 17px; height: 17px; }
.dash-side .ds-i.on { background: rgba(255,255,255,.14); color: #fff; }
.dash-main { flex: 1; min-width: 0; background: var(--sand); padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; flex: none; }
.dash-head .dh-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-strong); }
.dash-head .dh-r { display: flex; align-items: center; gap: 8px; }
.dash-head .dh-pill { height: 22px; width: 92px; background: #fff; border: 1px solid var(--border); border-radius: 999px; }
.dash-head .dh-av { width: 26px; height: 26px; border-radius: 50%; background: var(--green-400); }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; flex: none; }
.dash-kpi { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 9px 11px; }
.dash-kpi .kl { font-size: 8px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.dash-kpi .kv { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text-strong); margin-top: 4px; line-height: 1; }
.dash-kpi .kt { font-size: 8px; font-weight: 700; color: var(--green-600); margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr; gap: 9px; flex: 1 1 auto; min-height: 0; }
.dash-card { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 11px 12px; display: flex; flex-direction: column; min-height: 0; }
.dash-card .ct { font-size: 9.5px; font-weight: 700; color: var(--text-strong); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; flex: none; }
.dash-card .ct em { color: var(--green-600); font-style: normal; font-weight: 700; }
.dbars { display: flex; align-items: stretch; gap: 7px; flex: 1 1 auto; min-height: 80px; }
.dbars i { flex: 1; background: var(--green-100); border-radius: 5px; position: relative; }
.dbars i b { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--green-400), var(--green-600)); border-radius: 5px; }
.dbars i.hi b { background: linear-gradient(180deg, var(--forest-500), var(--forest-700)); }
.dlist { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.drow { display: flex; align-items: center; gap: 9px; flex: 1 1 0; min-height: 0; border-top: 1px solid var(--gray-100); }
.dlist .drow:first-child { border-top: none; }
.drow .di { width: 27px; height: 27px; border-radius: 8px; background: var(--green-50); display: grid; place-items: center; color: var(--green-600); flex: none; }
.drow .di svg { width: 15px; height: 15px; }
.drow .dn { font-size: 10px; font-weight: 700; color: var(--text-strong); line-height: 1.15; }
.drow .dsub { font-size: 8px; color: var(--text-muted); margin-top: 1px; }
.drow .db { margin-left: auto; font-size: 8.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.drow .db.ok { background: var(--green-50); color: var(--green-700); }
.drow .db.low { background: #FBEBCF; color: #9A6B00; }

/* ---- Module-specific hero screens (same app shell, different screen) --- */
/* Orders — kanban pipeline */
.kanban { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.kcol { background: var(--sand); border: 1px solid var(--border); border-radius: 9px; padding: 7px 6px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.kcol-h { display: flex; align-items: center; justify-content: space-between; padding: 1px 3px 3px; font-size: 8px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.kcol-h b { background: var(--green-50); color: var(--green-700); border-radius: 999px; padding: 1px 6px; font-size: 7.5px; }
.kcol--done .kcol-h b { background: var(--green-500); color: #fff; }
.kcard { background: #fff; border: 1px solid var(--border); border-radius: 7px; padding: 6px 7px; box-shadow: var(--sh-sm); }
.kcard .kn { font-size: 9px; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.kcard .km { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 5px; }
.kcard .kid { font-size: 7px; color: var(--text-muted); font-weight: 600; }
.kcard .kav { width: 15px; height: 15px; border-radius: 50%; background: var(--green-500); color: #fff; font-size: 7px; font-weight: 700; display: grid; place-items: center; flex: none; }

/* Space Management — bay/bench utilisation heatmap */
.baywrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.baygrid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 5px; }
.bay { border-radius: 6px; padding: 5px 6px; display: flex; flex-direction: column; justify-content: space-between; font-size: 7px; font-weight: 700; line-height: 1.05; }
.bay .bp { font-size: 9px; font-weight: 800; }
.bay.f1 { background: var(--green-50); color: var(--green-700); }
.bay.f2 { background: var(--green-200); color: var(--green-800); }
.bay.f3 { background: var(--green-400); color: #fff; }
.bay.f4 { background: var(--green-600); color: #fff; }
.bay.f5 { background: var(--forest-700); color: #fff; }
.baylegend { flex: none; display: flex; align-items: center; gap: 12px; font-size: 7.5px; color: var(--text-muted); font-weight: 700; }
.baylegend span { display: inline-flex; align-items: center; gap: 5px; }
.baylegend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* shared small bits */
.ttag { font-size: 7.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; display: inline-block; white-space: nowrap; }
.ttag.ok { background: var(--green-50); color: var(--green-700); }
.ttag.low { background: #FBEBCF; color: #9A6B00; }
.ttag.mut { background: var(--gray-100); color: var(--gray-500); }
.tav { width: 18px; height: 18px; border-radius: 50%; background: var(--green-500); color: #fff; font-size: 7.5px; font-weight: 700; display: grid; place-items: center; flex: none; }

/* data table (Products, Purchasing, Seed) */
.dtable { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dtable .dtr { display: grid; align-items: center; gap: 8px; padding: 0 11px; border-bottom: 1px solid var(--gray-100); flex: 1 1 0; min-height: 0; }
.dtable .dtr:last-child { border-bottom: none; }
.dtable .dthead { flex: none; height: 24px; background: var(--sand); }
.dtable .dthead .dc { font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.dtable .dc { font-size: 9px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.dtable .dc.dn { font-weight: 700; color: var(--text-strong); }
.dtable .dc.r { justify-content: flex-end; }
.lvl { width: 100%; height: 5px; border-radius: 999px; background: var(--green-100); position: relative; overflow: hidden; }
.lvl b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--green-400), var(--green-600)); }
.lvl.warn b { background: linear-gradient(90deg, #E8B45C, #D98A1F); }

/* CRM list + detail (Customers) */
.crm { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; }
.crm-list { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.crm-row { display: flex; align-items: center; gap: 7px; padding: 0 9px; flex: 1 1 0; min-height: 0; border-bottom: 1px solid var(--gray-100); }
.crm-row:last-child { border-bottom: none; }
.crm-row.sel { background: var(--green-50); box-shadow: inset 2px 0 0 var(--green-500); }
.crm-row .cn { font-size: 9px; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.crm-row .cs { font-size: 7.5px; color: var(--text-muted); }
.crm-detail { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 9px; }
.crm-dh { display: flex; align-items: center; gap: 8px; }
.crm-dh .tav { width: 28px; height: 28px; font-size: 11px; }
.crm-dh .cn { font-size: 11px; font-weight: 700; color: var(--text-strong); }
.crm-dh .cs { font-size: 8px; color: var(--text-muted); }
.crm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.crm-stats > div { background: var(--sand); border-radius: 8px; padding: 6px 4px; text-align: center; }
.crm-stats .csv { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-strong); line-height: 1; }
.crm-stats .csl { font-size: 6.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; margin-top: 3px; }
.crm-orders { display: flex; flex-direction: column; gap: 0; margin-top: auto; }
.crm-or { display: flex; align-items: center; justify-content: space-between; font-size: 8px; color: var(--text); padding: 5px 0; border-top: 1px solid var(--gray-100); }

/* route map + stops (Dispatch, Delivery Driver) */
.routemap { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; }
.rmap { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(135deg, #EDF3E3, #DDEAC8); }
.rmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rstops { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.rstop { flex: 1 1 0; min-height: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0 9px; display: flex; align-items: center; gap: 8px; }
.rstop.now { border-color: rgba(100,165,43,.4); box-shadow: 0 0 0 2px var(--green-50); }
.rpin { width: 19px; height: 19px; border-radius: 50%; background: var(--green-500); color: #fff; font-size: 8.5px; font-weight: 800; display: grid; place-items: center; flex: none; }
.rstop.done .rpin { background: var(--green-200); color: var(--green-800); }
.rstop .rn { font-size: 9px; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.rstop .rs { font-size: 7.5px; color: var(--text-muted); }

/* charts board (Reporting) */
.charts { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.chart-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; min-height: 0; }
.chart-card.span2 { grid-row: 1 / span 2; }
.chart-card .cct { font-size: 8.5px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px; flex: none; }
.linechart { flex: 1; min-height: 0; position: relative; }
.linechart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.donut-wrap { flex: 1; display: flex; align-items: center; gap: 9px; }
.donut { width: 52px; height: 52px; border-radius: 50%; flex: none; position: relative; }
.donut::after { content: ""; position: absolute; inset: 12px; background: #fff; border-radius: 50%; }
.donut-legend { display: flex; flex-direction: column; gap: 4px; font-size: 7px; color: var(--text-muted); font-weight: 700; }
.donut-legend i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; margin-right: 4px; }
.minibars { flex: 1; display: flex; align-items: flex-end; gap: 5px; }
.minibars i { flex: 1; align-self: stretch; background: var(--green-100); border-radius: 3px; position: relative; }
.minibars i b { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px; background: linear-gradient(180deg, var(--green-400), var(--green-600)); }

/* gantt timeline (Production Planning) */
.gantt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.gantt-head { display: grid; grid-template-columns: 78px 1fr; align-items: center; flex: none; }
.gantt-weeks { display: flex; justify-content: space-between; font-size: 7px; font-weight: 700; color: var(--text-muted); }
.gantt-row { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 8px; flex: 1 1 0; min-height: 0; }
.gantt-label { font-size: 8px; font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-track { position: relative; height: 13px; background: var(--sand); border-radius: 999px; }
.gantt-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--green-400), var(--green-600)); }
.gantt-bar.alt { background: linear-gradient(90deg, var(--forest-500), var(--forest-700)); }

/* stage tracker (Growing Plans) */
.stages { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.stage-row { flex: 1 1 0; min-height: 0; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.sr-top { display: flex; align-items: center; justify-content: space-between; }
.sr-top .srn { font-size: 9px; font-weight: 700; color: var(--text-strong); }
.stage-dots { display: flex; align-items: center; }
.stage-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--green-100); flex: none; }
.stage-dots i.done { background: var(--green-500); }
.stage-dots i.now { background: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }
.stage-dots .line { flex: 1; height: 2px; background: var(--green-100); }
.stage-dots .line.done { background: var(--green-500); }
.sr-stage { font-size: 7.5px; color: var(--text-muted); font-weight: 600; }

/* gauges (Propagation) */
.gauges { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gauge-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.gauge { width: 52px; height: 52px; border-radius: 50%; position: relative; flex: none; }
.gauge::after { content: ""; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.gauge span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 11px; color: var(--text-strong); z-index: 1; }
.gauge-card .gn { font-size: 8.5px; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.gauge-card .gs { font-size: 7px; color: var(--text-muted); }

/* schedule = kanban with 5 day columns (Transplanting) */
.kanban--days { grid-template-columns: repeat(5, 1fr); }
.kanban--days .kcol { padding: 6px 5px; }
.kanban--days .kcol-h { font-size: 7.5px; }

/* web shop (Online Ordering) */
.shop { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 7px; min-height: 0; }
.prod { background: #fff; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; }
.prod-img { flex: 1; min-height: 0; background: linear-gradient(135deg, var(--green-100), var(--green-300)); position: relative; }
.prod-b { flex: none; padding: 5px 7px 6px; }
.prod .pn { font-size: 8px; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.prod .pp { font-size: 8.5px; color: var(--green-700); font-weight: 800; margin-top: 2px; }
.cart { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; }
.cart .cart-h { font-size: 8.5px; font-weight: 800; color: var(--text-strong); text-transform: uppercase; letter-spacing: .04em; }
.cart-row { display: flex; justify-content: space-between; font-size: 8px; color: var(--text); gap: 6px; }
.cart-row span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-total { margin-top: auto; display: flex; justify-content: space-between; font-weight: 800; font-size: 11px; color: var(--text-strong); border-top: 1px solid var(--border); padding-top: 7px; }
.cart-btn { background: var(--green-500); color: #fff; text-align: center; font-size: 8.5px; font-weight: 700; padding: 7px; border-radius: 8px; }

/* POS terminal (Grower POS) */
.pos { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.pos-cart { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; }
.pos-line { display: flex; justify-content: space-between; gap: 6px; font-size: 9px; color: var(--text); padding: 5px 0; border-bottom: 1px solid var(--gray-100); }
.pos-line span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-total { margin-top: auto; display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-strong); padding-top: 8px; }
.pos-pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 5px; }
.pos-key { background: #fff; border: 1px solid var(--border); border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--text-strong); }
.pos-pay { grid-column: 1 / -1; background: var(--green-500); color: #fff; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 9.5px; padding: 8px; }

/* integration nodes (eCommerce Integrations) */
.nodes { flex: 1 1 auto; min-height: 0; position: relative; }
.nodes svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.node-hub { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--green-500), var(--green-700)); color: #fff; display: grid; place-items: center; box-shadow: var(--sh-md); }
.node-hub img { width: 34px; height: 34px; display: block; }
.node { position: absolute; z-index: 1; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; box-shadow: var(--sh-sm); transform: translate(-50%, -50%); }
.node .nsync { position: absolute; right: -3px; top: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--green-500); border: 2px solid #fff; }

/* mobile scan view (Mobile Inventory) */
.scanview { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; }
.scanbox { border-radius: 10px; background: linear-gradient(160deg, var(--forest-700), var(--forest-900)); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; }
.scanbox .scanframe { width: 78%; height: 54%; border-radius: 10px; position: relative; }
.scanbox .scanframe::before, .scanbox .scanframe::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2.5px solid var(--green-300); }
.scanbox .scanframe::before { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.scanbox .scanframe::after { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 6px 0; }
.scanbox .barcode { display: flex; align-items: stretch; gap: 2px; height: 34px; width: 70%; }
.scanbox .barcode i { flex: 1; background: rgba(255,255,255,.9); }
.scanbox .barcode i:nth-child(2n) { flex: .5; }
.scanbox .barcode i:nth-child(3n) { flex: 1.6; }
.scanbox .scanline { position: absolute; left: 14%; right: 14%; height: 2px; background: var(--green-300); box-shadow: 0 0 8px var(--green-400); top: 50%; }
.scanbox .scancap { font-size: 8px; font-weight: 700; color: #cfe6b3; letter-spacing: .02em; }

@media (max-width: 980px) {
  :root {
    --text-display: clamp(2.7rem, 7vw, 3.4rem);
    --text-h1: clamp(2.2rem, 6vw, 2.85rem);
    --text-h2: clamp(1.85rem, 5vw, 2.3rem);
    --text-h3: 1.45rem;
    --text-lg: 1.1rem;
  }
}

@media (max-width: 600px) {
  :root {
    --text-display: clamp(2.25rem, 9.4vw, 2.75rem);
    --text-h1: clamp(1.95rem, 8vw, 2.25rem);
    --text-h2: clamp(1.65rem, 7vw, 2rem);
    --text-h3: 1.32rem;
    --text-h4: 1.12rem;
    --text-lg: 1.04rem;
  }
}