/* ============================================================
   Verdantly design system
   Plain CSS (no Sass / no Bootstrap). Loaded only on Verdantly-layout
   pages via `stylesheet_link_tag "verdantly"`.
   Source of truth: design/verdantly/ + tasks/VERDANTLY-DESIGN-SYSTEM.md
   ============================================================ */

/* ---------------------------------------------------------------
   Tokens
   --------------------------------------------------------------- */
:root {
  --ink:      #0a0f0a;
  --ink-soft: #131a13;
  --paper:    #f3f0e6;
  --paper-2:  #e8e4d4;
  --paper-3:  #d8d3bf;
  --card:     #fbf9f2;
  --forest:   #1a3a2a;
  --forest-2: #234a36;
  --sage:     #6b8a6b;
  --lime:     #c4f56e;
  --lime-2:   #d6ff8a;
  --warn:     #e2a13a;
  --warn-bg:  rgba(226, 161, 58, 0.12);
  --warn-ink: #8a5e1d;
  --line:     rgba(10, 15, 10, 0.14);
  --line-2:   rgba(10, 15, 10, 0.08);
  /* Dimmed text on opaque surfaces. Element-level `opacity` also fades the
     BACKGROUND — under a sticky column that reads as ghosting (staging catch:
     the scrolled WEBHOOKS header showed through the pinned ACTIONS cell). */
  --ink-dim:  rgba(10, 15, 10, 0.6);

  --sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

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

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

img,
svg {
  max-width: 100%;
  display: block;
}

/* ---------------------------------------------------------------
   Type utilities
   --------------------------------------------------------------- */
.t-display {
  font-size: 96px;
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 600;
}

.t-h1 {
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 600;
}

.t-h2 {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.t-h3 {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.t-body {
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}

.t-caption {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Headline em-highlight: forest, upright, lighter weight — not italic. */
.t-display em,
.t-h1 em,
.t-h2 em,
.t-h3 em {
  font-style: normal;
  font-weight: 500;
  color: var(--forest);
}

/* ---------------------------------------------------------------
   Layout
   --------------------------------------------------------------- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Wider container used by the marketing surfaces (nav, hero, sections). */
.wrap.wide {
  max-width: 1320px;
}

/* Application shell: fixed sidebar + fluid content. */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}

.app-shell .content {
  padding: 32px 40px 64px;
  min-width: 0;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn.primary {
  background: var(--ink);
  color: var(--paper);
}

.btn.primary:hover {
  background: #000;
}

.btn.lime {
  /* Lime stays lime in dark mode, so its text/border must stay ink-black —
     var(--ink) flips to near-white on html.dark and vanishes on lime. */
  background: var(--lime);
  border-color: #0a0f0a;
  color: #0a0f0a;
}

.btn.lime:hover {
  background: var(--lime-2);
}

.btn.sm {
  padding: 8px 13px;
  font-size: 12px;
}

.btn.lg {
  padding: 14px 24px;
  font-size: 15px;
}

.btn.block {
  display: flex;
  width: 100%;
  justify-content: center;
}

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


/* ---------------------------------------------------------------
   Pills & badges
   --------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pill.solid {
  background: var(--ink);
  color: var(--paper);
}

.pill.lime {
  background: var(--lime);
  border-color: #0a0f0a;
  color: #0a0f0a;
}

.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(196, 245, 110, 0.3);
}

.badge {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Status pills
   --------------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status.linked {
  background: rgba(26, 58, 42, 0.1);
  color: var(--forest);
}

.status.linked .d {
  background: var(--forest);
}

.status.pending {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.status.pending .d {
  background: var(--warn);
}

.status.unlinked {
  background: rgba(10, 15, 10, 0.06);
  color: var(--ink);
  opacity: 0.6;
}

.status.unlinked .d {
  background: var(--ink);
}

/* ---------------------------------------------------------------
   Toggle
   --------------------------------------------------------------- */
.toggle {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper-3);
  cursor: pointer;
  transition: background 0.15s ease;
}

.toggle::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s ease;
}

.toggle.on {
  background: var(--forest);
  border-color: var(--forest);
}

.toggle.on::after {
  transform: translateX(14px);
  background: var(--lime);
}

/* ---------------------------------------------------------------
   Cards
   --------------------------------------------------------------- */
.card {
  padding: 24px;
  border: 1px solid var(--ink);
  background: var(--card);
}

.card.dark {
  background: var(--ink);
  color: var(--paper);
}

.card.forest {
  background: var(--forest);
  color: var(--paper);
}

/* ---------------------------------------------------------------
   KPI strip
   --------------------------------------------------------------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
  background: var(--card);
}

.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}

.kpi:last-child {
  border-right: 0;
}

.kpi .l {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

.kpi .l .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.kpi .v {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 36px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.kpi .v .pct {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.55;
}

.kpi .bar {
  position: relative;
  height: 3px;
  margin-top: 14px;
  border-radius: 99px;
  background: var(--paper-2);
  overflow: hidden;
}

.kpi .bar > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: var(--forest);
}

.kpi.warn .bar > span {
  background: var(--warn);
}

.kpi.featured {
  background: var(--ink);
  color: var(--paper);
}

.kpi.featured .l {
  opacity: 0.7;
}

.kpi.featured .bar {
  background: rgba(243, 240, 230, 0.15);
}

.kpi.featured .bar > span {
  background: var(--lime);
}

.kpi .delta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
}

.kpi.featured .delta {
  color: var(--lime);
}

.kpi .delta.warn {
  color: var(--warn);
}

/* ---------------------------------------------------------------
   Notice
   --------------------------------------------------------------- */
.notice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border: 1px solid rgba(226, 161, 58, 0.4);
  background: var(--warn-bg);
}

.notice .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--warn);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

.notice .body {
  font-size: 13px;
}

.notice .body b {
  font-weight: 600;
}

.notice .link {
  color: var(--forest);
  font-weight: 600;
  border-bottom: 1px solid var(--forest);
  padding-bottom: 1px;
}

.notice .close {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--ink);
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* A notice placed above .page-top (the products sync strip). The base
   component carries no outer margin; match the layout flash's 24px gap so
   the page header does not sit flush against it. */
.notice.page-notice {
  margin-bottom: 24px;
}

/* ---------------------------------------------------------------
   Tabs
   --------------------------------------------------------------- */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.55;
  cursor: pointer;
}

.tab .ct {
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.tab:hover {
  opacity: 0.9;
}

.tab.active {
  opacity: 1;
  font-weight: 600;
  border-bottom-color: var(--ink);
}

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

/* ---------------------------------------------------------------
   Toolbar (search + filter chips)
   --------------------------------------------------------------- */
.tbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-bottom: 0;
  background: var(--card);
}

.search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper);
}

.search svg {
  width: 14px;
  height: 14px;
  opacity: 0.55;
}

.search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}

.search input::placeholder {
  color: var(--ink);
  opacity: 0.5;
}

.search kbd {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper);
  font-size: 12px;
  font-weight: 500;
}

.chip svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.chip .x {
  margin-left: 2px;
  opacity: 0.5;
}

.chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------------------------------------------------------------
   Table
   --------------------------------------------------------------- */
.table-wrap {
  border: 1px solid var(--ink);
  background: var(--card);
  /* Wide tables scroll inside the frame instead of crushing cells into
     multi-line wraps. */
  overflow-x: auto;
}

/* Table cell facts: one value per line — truncate, never wrap mid-value. */
.table-wrap td .barcode {
  display: block;
  max-width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-wrap td .prod .n {
  white-space: nowrap;
}

.table-wrap td .prod .m {
  max-width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-wrap td .status {
  white-space: nowrap;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table-wrap thead th {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Dim the TEXT, never the element: element opacity made the sticky
     last-child header translucent, and the scrolled-under column ghosted
     through it (staging catch). */
  color: var(--ink-dim);
}

.table-wrap thead th.num {
  text-align: right;
}

.table-wrap tbody tr {
  border-bottom: 1px solid var(--line-2);
  transition: background 0.12s ease;
}

.table-wrap tbody tr:hover {
  background: var(--paper-2);
}

.table-wrap tbody tr:last-child {
  border-bottom: 0;
}

.table-wrap tbody td {
  padding: 16px 12px;
  /* Top-aligned so the first element of every cell (pill, name, number,
     buttons) sits on one shared line, regardless of how many meta lines
     follow beneath. */
  vertical-align: top;
}

/* First-line elements (numbers, ids, names) get a line-height matching the
   status pills' box height so everything sits on the same visual line. */
.table-wrap tbody td.num,
.table-wrap tbody td.mono,
.table-wrap tbody td .prod .n {
  line-height: 26px;
}

/* First/last cells keep the roomier outer gutter. */
.table-wrap thead th:first-child,
.table-wrap tbody td:first-child {
  padding-left: 20px;
}

.table-wrap thead th:last-child,
.table-wrap tbody td:last-child {
  padding-right: 20px;
}

/* Pin the Actions column: buttons stay visible while the middle scrolls.
   z-index keeps the pinned cells above any positioned content scrolling
   beneath them. */
.table-wrap thead th:last-child,
.table-wrap tbody td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--paper);
}

.table-wrap tbody td:last-child {
  background: var(--card);
  box-shadow: -8px 0 12px -10px rgba(10, 15, 10, 0.35);
}

.table-wrap tbody tr:hover td:last-child {
  background: var(--paper-2);
}

/* Opt-out for a table far wider than its frame. Admin Companies needs ~1400px
   of columns in a 1078px frame at a 1400px viewport, so its pinned Actions
   column never sat beside the scrolled content — it sat ON it, hiding LINKED,
   ORDERS and AI USAGE until you scrolled (launch plan F49). Unpinned, Actions
   scrolls into view like any other column and covers nothing. */
.table-wrap.unpinned thead th:last-child,
.table-wrap.unpinned tbody td:last-child {
  position: static;
  box-shadow: none;
}

.table-wrap td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.prod {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.prod .n {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.prod .m {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}

.prod .m em {
  font-style: normal;
  font-weight: 500;
  color: var(--forest);
}

.shop-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--forest);
  font-weight: 500;
  border-bottom: 1px solid rgba(26, 58, 42, 0.25);
}

.shop-link:hover {
  border-bottom-color: var(--forest);
}

.shop-empty {
  color: var(--ink);
  opacity: 0.4;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.qty {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.qty .u {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}

.qty.low {
  color: var(--warn);
}

.qty.zero {
  color: var(--ink);
  opacity: 0.4;
}

.barcode {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.7;
}

.tfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border: 1px solid var(--ink);
  border-top: 0;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.pag {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pag .p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
}

.pag .p.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------------------------------------------------------------
   Forms
   --------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}

.field label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.field label .opt {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.5;
}

.field input,
.field select,
.field textarea {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(26, 58, 42, 0.12);
}

/* Password bullets render tiny in Manrope, making filled password fields
   look smaller than sibling inputs. Space the bullets out — but only once
   typed (:not(:placeholder-shown)), so placeholder text stays normal.
   font-size is untouched so the field height cannot jump. */
.field input[type="password"]:not(:placeholder-shown) {
  letter-spacing: 3px;
}

.field .hint {
  font-size: 12px;
  opacity: 0.55;
}

.field-grid {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare 1fr track never shrinks below its
     content's min-content width, and a text input's is its intrinsic ~200px.
     In a 394px .vd-modal body the two name inputs plus the gap needed 416px,
     so Last name ran out past the Invite dialogs' edge (launch plan F49).
     Wider forms still split evenly, exactly as before. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field-grid .field {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Sidebar / nav
   --------------------------------------------------------------- */
.lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.lockup .wm {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  border-right: 1px solid var(--ink);
  background: var(--paper);
}

.sidebar .lockup {
  padding: 6px 6px 28px;
}

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

.side-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.side-nav a svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.side-nav a:hover {
  background: var(--paper-2);
}

.side-nav a.active {
  background: var(--ink);
  color: var(--paper);
}

.side-nav a.active svg {
  opacity: 1;
  stroke: var(--lime);
}

.side-nav a .count {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 99px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.side-nav a.active .count {
  background: rgba(243, 240, 230, 0.15);
  color: var(--paper);
  opacity: 1;
}

.side-label {
  padding: 24px 12px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}

.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* Help & docs link — styled like a nav row (its icon is otherwise unbounded) */
.side-foot > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.side-foot > a svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.side-foot > a:hover {
  background: var(--paper-2);
}

.org {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
}

.org .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--forest);
  color: var(--lime);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.org .meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.org .meta .n {
  font-size: 13px;
  font-weight: 600;
}

.org .meta .r {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.foot {
  padding: 72px 0 36px;
  background: var(--ink);
  color: var(--paper);
}

.foot .wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.foot .lockup .wm {
  color: var(--paper);
}

.foot .foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid rgba(243, 240, 230, 0.15);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

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

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

@media (max-width: 640px) {
  .wrap {
    padding: 0 24px;
  }

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

  .kpi {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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


/* ===============================================================
   PHASE 2 — page components (marketing / pricing / auth / onboarding)
   Extracted from design/verdantly mocks. Use the core tokens above.
   =============================================================== */


/* ***************************************************************
   MARKETING — homepage sections (nav, hero, connector, features, console, metrics, quote, pricing, CTA, footer)
   *************************************************************** */

/* --- Type helper: serif/brand wordmark weight --- */
.serif {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.01em;
}


/* --- Lockup sub-elements (mark + wordmark) --- */
/* NOTE: base .lockup is in core; these are its children. */
.lockup .mark {
  width: 32px;
  height: 32px;
}

/* Larger wordmark for marketing surfaces only — scoped so it doesn't
   override the core 20px .lockup .wm used by the app sidebar/auth/rail. */
.nav .lockup .wm,
.foot-brand .lockup .wm {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.04em;
}


/* --- Sticky frosted top nav --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 240, 230, .85);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 40px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.nav-links a:hover {
  opacity: .65;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}


/* --- Hero --- */
.hero {
  position: relative;
  padding: 96px 0 80px;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

.hero h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 148px;
  line-height: .92;
  letter-spacing: -0.05em;
  max-width: 1100px;
}

.hero h1 em {
  font-style: normal;
  font-weight: 500;
  color: var(--forest);
}

.hero-sub {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  margin-top: 64px;
  align-items: end;
}

.hero-sub p {
  max-width: 46ch;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hero-sub p .accent {
  display: inline-block;
  padding: 0 6px;
  background: var(--lime);
  border-radius: 4px;
  color: #0a0f0a;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* --- Connector panel (Phorest <-> Shopify) --- */
.connector {
  position: relative;
  margin-top: 96px;
  padding: 48px;
  border: 1px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}

.connector-grid {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  gap: 0;
  align-items: center;
}

.system {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px;
}

.system .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}

.system .name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 48px;
  letter-spacing: -0.035em;
}

.system .stats {
  display: flex;
  gap: 24px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
}

.system.left {
  border-right: 1px dashed var(--line);
}

.system.right {
  border-left: 1px dashed var(--line);
  text-align: right;
  align-items: flex-end;
}

.connector-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.connector-mark svg {
  width: 64px;
  height: 64px;
}

.connector-mark::before,
.connector-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--ink);
}

.connector-mark::before {
  right: calc(50% + 36px);
}

.connector-mark::after {
  left: calc(50% + 36px);
}


/* --- Connector stat strip --- */
.conn-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--ink);
}

.conn-strip > div {
  padding: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-right: 1px dashed var(--line);
}

.conn-strip > div:first-child {
  padding-left: 0;
}

.conn-strip > div:last-child {
  border-right: 0;
  padding-right: 0;
}

.conn-strip .v {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.035em;
}

.conn-strip .l {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.conn-strip .v .lime-bar {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  vertical-align: middle;
  background: var(--lime);
}


/* --- Trust / logo row --- */
.trust {
  padding: 40px 0 80px;
}

.trust-label {
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  opacity: .55;
}

.trust-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.025em;
  opacity: .7;
}


/* --- Section scaffold + head --- */
section.block {
  position: relative;
  padding: 120px 0;
  border-top: 1px solid var(--line);
}

.block-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  margin-bottom: 64px;
  align-items: start;
}

.block-head .num {
  padding-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}

.block-head h2 {
  max-width: 18ch;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 88px;
  line-height: .95;
  letter-spacing: -0.045em;
}

.block-head h2 em {
  font-style: normal;
  font-weight: 500;
  color: var(--forest);
}


/* --- 3-up feature grid --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.feature {
  padding: 48px 32px;
  border-right: 1px solid var(--line);
}

.feature:last-child {
  border-right: 0;
}

.feature .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 32px;
}

.feature h3 {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.feature p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  opacity: .7;
}

.feature .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* --- Showcase section (tinted band) --- */
.showcase {
  padding: 120px 0;
  background: var(--paper-2);
  color: var(--ink);
  border-top: 1px solid var(--ink);
}

.showcase .block-head h2 em {
  color: var(--forest);
}


/* --- Console showcase card (offset hard-shadow) --- */
.console {
  display: grid;
  gap: 32px;
  padding: 40px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  box-shadow:
    0 1px 0 var(--ink),
    12px 12px 0 -1px var(--paper-3),
    12px 12px 0 0 var(--ink);
}

.console-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.console-head .title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}

.console-head .title svg {
  width: 18px;
  height: 18px;
}

.console-head .meta {
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.console-head .meta .live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--forest);
  opacity: 1;
}

.console-head .meta .live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--forest);
  box-shadow: 0 0 0 3px rgba(26, 58, 42, .18);
}


/* --- Forecast figure + scoped pill tabs --- */
.forecast {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.forecast .l {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--forest);
}

.forecast .v {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 96px;
  line-height: .9;
  letter-spacing: -0.045em;
}

.forecast .v .delta {
  margin-left: 14px;
  font-style: normal;
  font-weight: 500;
  font-size: 48px;
  color: var(--lime);
}

.forecast .conf {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.forecast .tabs {
  display: flex;
  gap: 8px;
}

/* Scoped tab variant — distinct from core .tab (see conflicts). */
.forecast .tab {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.forecast .tab.active {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--ink);
}


/* --- Chart area + stat row --- */
.chart {
  position: relative;
  height: 200px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.stat-row .l {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.stat-row .v {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.035em;
}


/* --- How it works — steps + CLI demo --- */
.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.step {
  position: relative;
  padding: 32px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.step .n {
  display: flex;
  justify-content: space-between;
  margin-bottom: 48px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.step h3 {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.step p {
  font-size: 16px;
  line-height: 1.55;
  opacity: .75;
}

.step .demo {
  margin-top: 24px;
  padding: 20px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.7;
  color: var(--ink);
  opacity: .85;
}

.step .demo .ok {
  font-weight: 500;
  color: var(--forest);
}


/* --- Full-bleed lime metrics band --- */
.metrics {
  padding: 96px 0;
  background: var(--lime);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.metrics .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.metrics .stat {
  padding: 0 8px;
}

.metrics .stat .v {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 120px;
  line-height: .9;
  letter-spacing: -0.05em;
}

.metrics .stat .l {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}

.metrics .stat .h {
  max-width: 24ch;
  margin-top: 14px;
  font-family: var(--sans);
  font-weight: 500;
  font-style: normal;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}


/* --- Testimonial / quote --- */
.quote {
  padding: 160px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}

.quote .body {
  max-width: 22ch;
  margin: 0 auto;
  font-family: var(--sans);
  font-weight: 500;
  font-style: normal;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.quote .body::before {
  content: '\201C';
  color: var(--forest);
}

.quote .body::after {
  content: '\201D';
  color: var(--forest);
}

.quote .meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}

.quote .meta::before,
.quote .meta::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--ink);
  opacity: .3;
}


/* --- Pricing grid + tiers --- */
.price-grid {
  display: grid;
  /* Pricing v2: four tiers (Seed / Grove / Canopy / Evergreen). */
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
}

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

  .price-grid .tier:nth-child(2n) {
    border-right: 0;
  }

  .price-grid .tier:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

.price-grid .tier {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 36px;
  border-right: 1px solid var(--line);
}

.price-grid .tier:last-child {
  border-right: 0;
}

.price-grid .tier.featured {
  background: var(--ink);
  color: var(--paper);
}

.price-grid .tier .lab {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}

.price-grid .tier .lab .tag {
  padding: 4px 10px;
  background: var(--lime);
  color: var(--ink);
  border-radius: 999px;
  letter-spacing: .06em;
  opacity: 1;
}

.price-grid .tier h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.price-grid .tier .pr {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 80px;
  line-height: .9;
  letter-spacing: -0.05em;
}

.price-grid .tier .pr .per {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.price-grid .tier ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
}

.price-grid .tier li {
  position: relative;
  padding-left: 22px;
}

.price-grid .tier li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.price-grid .tier .btn {
  align-self: stretch;
  justify-content: center;
  margin-top: auto;
}


/* --- Closing CTA + concentric rings --- */
.cta {
  position: relative;
  padding: 160px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--ink);
  overflow: hidden;
}

.cta-inner {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 64px;
  align-items: end;
}

.cta h2 {
  max-width: 14ch;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 128px;
  line-height: .92;
  letter-spacing: -0.05em;
}

.cta h2 em {
  font-style: normal;
  font-weight: 500;
  color: var(--forest);
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.cta .ring {
  position: absolute;
  right: -220px;
  bottom: -220px;
  width: 680px;
  height: 680px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: .18;
}

.cta .ring2 {
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 480px;
  height: 480px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: .12;
}


/* --- Full dark footer (richer than core .foot) --- */
footer {
  padding: 80px 0 40px;
  background: var(--ink);
  color: var(--paper);
}

.foot-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(243, 240, 230, .15);
}

.foot-col h4 {
  margin-bottom: 18px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}

.foot-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  font-size: 14px;
}

.foot-col a {
  opacity: .85;
}

.foot-col a:hover {
  opacity: 1;
  color: var(--lime);
}

.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 36ch;
}

.foot-brand .lockup .wm {
  color: var(--paper);
}

.foot-brand p {
  font-size: 15px;
  line-height: 1.55;
  opacity: .7;
}

/* NOTE: .foot-bottom exists in core. This page's version lives inside
   the dark footer and reads the same rules — see conflicts if core's
   .foot-bottom differs in color/border context. */


/* --- Responsive (homepage sections) --- */
@media (max-width: 1100px) {
  .hero h1 {
    font-size: 104px;
  }

  .block-head h2 {
    font-size: 64px;
  }

  .cta h2 {
    font-size: 88px;
  }

  .forecast .v {
    font-size: 72px;
  }

  .metrics .stat .v {
    font-size: 88px;
  }
}

@media (max-width: 880px) {
  .nav-row {
    padding: 16px 24px;
  }

  .nav-links {
    display: none;
  }

  .hero {
    padding: 64px 0 56px;
  }

  .hero h1 {
    font-size: 64px;
    letter-spacing: -0.035em;
  }

  .hero-sub {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 48px;
  }

  .hero-sub p {
    font-size: 18px;
  }

  .connector {
    margin-top: 64px;
    padding: 24px;
  }

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

  .system.left,
  .system.right {
    border: 0;
    border-bottom: 1px dashed var(--line);
    text-align: left;
    align-items: flex-start;
    padding: 24px 0;
  }

  .system.right {
    border-bottom: 0;
  }

  .connector-mark {
    padding: 24px 0;
    border-bottom: 1px dashed var(--line);
  }

  .connector-mark::before,
  .connector-mark::after {
    display: none;
  }

  .conn-strip {
    grid-template-columns: 1fr 1fr;
  }

  .conn-strip > div {
    border-right: 1px dashed var(--line) !important;
    border-bottom: 1px dashed var(--line);
    padding: 16px;
  }

  .conn-strip > div:nth-child(2n) {
    border-right: 0 !important;
  }

  .conn-strip > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .trust-row {
    gap: 32px;
    font-size: 18px;
  }

  section.block {
    padding: 72px 0;
  }

  .block-head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }

  .block-head h2 {
    font-size: 44px;
  }

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

  .feature {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .how-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .metrics {
    padding: 64px 0;
  }

  .metrics .row {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .metrics .stat .v {
    font-size: 64px;
  }

  .quote {
    padding: 96px 0;
  }

  .quote .body {
    font-size: 36px;
  }

  .price-grid {
    grid-template-columns: 1fr;
    border-right: 0;
  }

  .price-grid .tier {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .price-grid .tier:last-child {
    border-bottom: 0;
  }

  .cta {
    padding: 96px 0;
  }

  .cta-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cta h2 {
    font-size: 56px;
  }

  .console {
    padding: 24px;
  }

  .forecast {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .forecast .v {
    font-size: 56px;
  }

  .stat-row {
    grid-template-columns: 1fr 1fr;
  }

  .foot-row {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


/* ***************************************************************
   PRICING — tiers, billing controls, comparison table, FAQ, CTA band
   *************************************************************** */

.ph-hero {
  padding: 72px 0 40px;
  text-align: center;
}

.ph-hero .pill {
  margin-bottom: 28px;
}

.ph-hero h1 {
  font-size: 84px;
  line-height: .95;
  letter-spacing: -0.05em;
  font-weight: 600;
  max-width: 16ch;
  margin: 0 auto;
}

.ph-hero h1 em {
  font-style: normal;
  font-weight: 500;
  color: var(--forest);
}

.ph-hero p {
  font-size: 20px;
  line-height: 1.45;
  opacity: .7;
  max-width: 54ch;
  margin: 24px auto 0;
}

/* --- Billing / currency controls row (.controls) --- */
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 40px 0 8px;
}

/* --- Segmented toggle (.seg) --- */
.seg {
  display: inline-flex;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 4px;
  background: var(--card);
}

.seg button {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  transition: color .15s ease;
}

.seg button.on {
  background: var(--ink);
  color: var(--paper);
}

.seg .save {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--forest);
  margin-left: 6px;
}

.seg button.on .save {
  color: var(--lime);
}

/* --- Currency select control (.cur-select) --- */
.cur-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 8px 8px 8px 16px;
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
}

.cur-select label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.cur-select select {
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  border: 0;
  background: var(--paper-2);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink);
}

/* --- Tier grid (.tiers / .tier) --- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--card);
  margin: 36px 0 0;
}

.tiers .tier {
  padding: 40px 32px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
}

.tiers .tier:last-child {
  border-right: 0;
}

.tiers .tier.featured {
  background: var(--ink);
  color: var(--paper);
}

/* --- "Most popular" recommendation badge (.badge-rec) --- */
.tiers .tier .badge-rec {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 12px;
}

/* --- Tier name + icon (.tname) --- */
.tiers .tier .tname {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tiers .tier .tname .ic {
  width: 18px;
  height: 18px;
}

.tiers .tier h2 {
  font-size: 34px;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 14px 0 4px;
}

.tiers .tier .tagline {
  font-size: 14px;
  opacity: .65;
  line-height: 1.4;
  min-height: 40px;
}

/* --- Tier price block (currency + tabular amount) --- */
.tiers .tier .price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 24px 0 2px;
}

.tiers .tier .price .cur {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.tiers .tier .price .amt {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}

.tiers .tier .price .per {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  margin-left: 4px;
}

.tiers .tier .annual-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  min-height: 16px;
}

.tiers .tier.featured .annual-note {
  color: var(--lime);
  opacity: .9;
}

/* --- Tier "AI queries" limit row (.qlimit) --- */
.tiers .tier .qlimit {
  margin: 20px 0;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.tiers .tier.featured .qlimit {
  background: rgba(243, 240, 230, .06);
  border-color: rgba(243, 240, 230, .14);
}

.tiers .tier .qlimit .qv {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tiers .tier .qlimit .qv em {
  font-style: normal;
  color: var(--forest);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tiers .tier.featured .qlimit .qv em {
  color: var(--lime);
}

.tiers .tier .cta {
  margin: 8px 0 24px;
}

/* --- Tier checkmarked feature list --- */
.tiers .tier ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.tiers .tier li {
  padding-left: 26px;
  position: relative;
}

.tiers .tier li svg {
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  color: var(--forest);
}

.tiers .tier.featured li svg {
  color: var(--lime);
}

.tiers .tier li .inc {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  display: block;
  margin-bottom: 8px;
  padding-left: 0;
}

.tiers .tier li.inc-row {
  padding-left: 0;
}

/* --- Reassurance notes strip (.notes / .note) --- */
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  border-top: 0;
  background: var(--paper);
}

.note {
  padding: 24px 28px;
  border-right: 1px solid var(--line);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.note:last-child {
  border-right: 0;
}

.note .ni {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.note .ni svg {
  width: 16px;
  height: 16px;
}

.note h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.note p {
  font-size: 13px;
  opacity: .65;
  line-height: 1.45;
}

/* --- Comparison section header (.compare) --- */
.compare {
  padding: 96px 0;
}

.compare h2 {
  font-size: 48px;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin-bottom: 8px;
}

.compare .sub {
  font-size: 16px;
  opacity: .65;
  margin-bottom: 40px;
}

/* --- Feature-comparison table (.ctable) --- */
.ctable {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ink);
  background: var(--card);
}

.ctable th,
.ctable td {
  padding: 18px 22px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.ctable thead th {
  background: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  vertical-align: bottom;
}

.ctable thead th .pn {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  display: block;
  margin-bottom: 4px;
}

.ctable thead th.feat {
  background: var(--ink);
  color: var(--paper);
}

.ctable thead th.feat .pn {
  color: var(--paper);
}

.ctable td.feat {
  background: rgba(26, 58, 42, .04);
}

.ctable td.label {
  font-weight: 500;
}

.ctable td.label .d {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .5;
  display: block;
  margin-top: 2px;
}

.ctable .ck {
  width: 18px;
  height: 18px;
  color: var(--forest);
}

.ctable .dash {
  opacity: .3;
}

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

.ctable .colnum {
  text-align: center;
  width: 18%;
}

.ctable td.colnum {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ctable .center {
  display: flex;
  justify-content: center;
}

/* --- FAQ 2-col grid (.faq / .faq-grid / .faq-item) --- */
.faq {
  padding: 0 0 96px;
}

.faq h2 {
  font-size: 48px;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin-bottom: 32px;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--ink);
}

.faq-item {
  padding: 28px 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.faq-item:nth-child(2n) {
  border-right: 0;
}

.faq-item:nth-last-child(-n+2) {
  border-bottom: 0;
}

.faq-item h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.faq-item p {
  font-size: 14px;
  opacity: .68;
  line-height: 1.55;
}

/* --- Closing CTA band (.cta-band) --- */
.cta-band {
  background: var(--forest);
  color: var(--paper);
  padding: 96px 0;
  text-align: center;
}

.cta-band h2 {
  font-size: 64px;
  letter-spacing: -0.04em;
  font-weight: 600;
  max-width: 18ch;
  margin: 0 auto 28px;
  line-height: .98;
}

.cta-band h2 em {
  font-style: normal;
  color: var(--lime);
}

.cta-band .row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-band .btn {
  border-color: var(--paper);
}

.cta-band .btn.lime {
  border-color: var(--lime);
}

.cta-band .micro {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  margin-top: 20px;
}

/* --- Responsive (pricing page) --- */
@media (max-width: 980px) {
  .ph-hero h1 {
    font-size: 56px;
  }

  .tiers {
    grid-template-columns: 1fr;
    border-right: 1px solid var(--ink);
  }

  .tiers .tier {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .tiers .tier:last-child {
    border-bottom: 0;
  }

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

  .note {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .ctable {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

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

  .faq-item {
    border-right: 0;
  }

  .faq-item:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }

  .cta-band h2 {
    font-size: 40px;
  }

  .compare h2,
  .faq h2 {
    font-size: 34px;
  }
}


/* ***************************************************************
   AUTH — split-screen signup, plan picker, order summary, card capture, SSO
   *************************************************************** */

/* Fluid form column + fixed 480px dark summary aside. */
.su {
  display: grid;
  grid-template-columns: 1fr 480px;
  min-height: 100vh;
}

/* --- Signup form column (.su-form) --- */
.su-form {
  padding: 40px 56px 64px;
  max-width: 720px;
  margin-left: auto;
  width: 100%;
}

/* --- Signup top bar (.su-top) — back link + step counter --- */
.su-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}

.su-top .back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.su-top .back:hover {
  opacity: 1;
}

.su-top .back svg {
  width: 13px;
  height: 13px;
}

/* --- Signup heading block (.su-head) --- */
.su-head h1 {
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin-bottom: 12px;
}

.su-head p {
  font-size: 16px;
  opacity: .65;
  max-width: 46ch;
}

/* --- Progress dots (.steps-dots) --- */
.steps-dots {
  display: flex;
  gap: 8px;
  margin: 32px 0 8px;
}

.steps-dots .sd {
  flex: 1;
  height: 3px;
  background: var(--paper-3);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}

.steps-dots .sd.done,
.steps-dots .sd.active {
  background: var(--forest);
}

/* --- Numbered form sections (fieldset / legend) --- */
fieldset {
  border: 0;
  margin-top: 36px;
}

fieldset legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

fieldset legend .n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* --- Card-capture field (.card-field) — Stripe-style brand chips --- */
.card-field {
  position: relative;
}

.card-field .brand {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 5px;
}

.card-field .brand i {
  width: 26px;
  height: 17px;
  border-radius: 3px;
  display: block;
  opacity: .4;
}

.card-field .brand .visa {
  background: linear-gradient(135deg, #1a1f71, #2b3a9e);
}

.card-field .brand .mc {
  background: linear-gradient(135deg, #eb001b, #f79e1b);
}

.card-field .brand .amex {
  background: linear-gradient(135deg, #2e77bb, #6cb5e5);
}

/* --- Secure / encrypted note (.secure) --- */
.secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: .6;
  margin-top: 6px;
}

.secure svg {
  width: 13px;
  height: 13px;
  color: var(--forest);
}

/* --- Terms consent row (.terms) --- */
.terms {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 28px;
  font-size: 13px;
  opacity: .75;
  line-height: 1.5;
}

.terms input {
  margin-top: 3px;
  accent-color: var(--forest);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.terms a {
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}

/* --- Submit stack (.submit-row) --- */
.submit-row {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.submit-row .micro {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .5;
  text-align: center;
}

/* --- SSO buttons (.sso) + "or" divider (.or) --- */
.sso {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.sso button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ink);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  transition: background .15s ease;
}

.sso button:hover {
  background: var(--paper-2);
}

.sso button svg {
  width: 16px;
  height: 16px;
}

.or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .4;
}

.or::before,
.or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --- Dark summary aside (.su-aside) --- */
.su-aside {
  background: var(--ink);
  color: var(--paper);
  padding: 40px 44px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.su-aside .lockup .wm {
  color: var(--paper);
}

.su-aside .a-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}

/* --- Trial badge (.a-badge) --- */
.a-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--lime);
  color: #0a0f0a;
  padding: 6px 11px;
  border-radius: 99px;
  font-weight: 600;
}

/* --- Plan picker (.plan-pick / .plan-opt) --- */
/* On the dark aside; .sel is the selected state (lime border + tint + filled radio). */
.plan-pick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.plan-pick .pl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 2px;
}

.plan-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(243, 240, 230, .18);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.plan-opt:hover {
  border-color: rgba(243, 240, 230, .4);
}

.plan-opt.sel {
  border-color: var(--lime);
  background: rgba(196, 245, 110, .06);
}

.plan-opt .radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(243, 240, 230, .4);
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s ease;
}

.plan-opt.sel .radio {
  border-color: var(--lime);
}

.plan-opt.sel .radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--lime);
}

.plan-opt .pinfo {
  flex: 1;
  min-width: 0;
}

.plan-opt .pinfo .nm {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plan-opt .pinfo .ds {
  font-size: 12px;
  opacity: .6;
  line-height: 1.35;
}

.plan-opt .pprice {
  text-align: right;
  flex-shrink: 0;
}

.plan-opt .pprice .pv {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.plan-opt .pprice .pp {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
}

/* --- Order summary (.summary / .sum-row / .sum-total / .renew) --- */
.summary {
  margin-top: auto;
}

.sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(243, 240, 230, .12);
  font-size: 14px;
}

.sum-row .sl {
  opacity: .7;
}

.sum-row .sv {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sum-row.free .sv {
  color: var(--lime);
}

.sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0 4px;
}

.sum-total .sl {
  font-size: 15px;
  font-weight: 600;
}

.sum-total .tv {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.sum-total .tv .due {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  font-weight: 500;
  display: block;
  text-align: right;
}

.renew {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .55;
  margin-top: 14px;
  line-height: 1.6;
}

.renew b {
  color: var(--lime);
  font-weight: 500;
}

/* --- Trust list (.trust-list) — lime check items --- */
.trust-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(243, 240, 230, .12);
}

.trust-list .ti {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  opacity: .85;
}

.trust-list .ti svg {
  width: 15px;
  height: 15px;
  color: var(--lime);
  flex-shrink: 0;
}

/* --- Responsive (signup split-screen) --- */
@media (max-width: 1000px) {
  .su {
    grid-template-columns: 1fr;
  }

  .su-aside {
    position: static;
    height: auto;
    order: -1;
    padding: 32px 28px;
  }

  .su-form {
    padding: 36px 28px 64px;
    max-width: none;
  }

  .summary {
    margin-top: 32px;
  }
}

@media (max-width: 560px) {
  .su-head h1 {
    font-size: 34px;
  }

  .sso {
    flex-direction: column;
  }
}


/* ***************************************************************
   ONBOARDING — stepper rail, connect cards, welcome checklist, reconciliation scan, done panel
   *************************************************************** */

/* --- Onboarding shell (.ob) --- */
.ob {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 100vh;
}

/* --- Rail (.ob-rail): fixed dark left column --- */
.ob-rail {
  background: var(--ink);
  color: var(--paper);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.ob-rail .lockup .wm {
  color: var(--paper);
}

.ob-rail .r-head {
  margin-bottom: 48px;
}

/* Rail header ETA line */
.ob-rail .est {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ob-rail .est svg {
  width: 13px;
  height: 13px;
  color: var(--lime);
}

/* --- Vertical stepper (.rail-steps / .rstep) --- */
.rail-steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.rstep {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  position: relative;
}

/* Step marker circle */
.rstep .marker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(243, 240, 230, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--ink);
  z-index: 1;
  transition: all .2s ease;
}

.rstep .marker svg {
  width: 15px;
  height: 15px;
}

/* Connecting line between markers */
.rstep .line {
  position: absolute;
  left: 14.5px;
  top: 32px;
  bottom: -12px;
  width: 1.5px;
  background: rgba(243, 240, 230, .18);
}

.rstep:last-child .line {
  display: none;
}

/* Step title + description */
.rstep .rs-body .t {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color .2s ease;
}

.rstep .rs-body .d {
  font-size: 12px;
  opacity: .55;
  line-height: 1.35;
  margin-top: 2px;
}

/* Stepper states */
.rstep.done .marker {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--lime);
}

.rstep.active .marker {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.rstep.idle .rs-body .t {
  opacity: .5;
}

/* --- Rail foot (.rail-foot): help link --- */
.rail-foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(243, 240, 230, .12);
  font-size: 13px;
  opacity: .7;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rail-foot svg {
  width: 16px;
  height: 16px;
  opacity: .7;
  flex-shrink: 0;
}

.rail-foot a {
  color: var(--lime);
  font-weight: 500;
}

/* --- Stage (.ob-stage): fluid right column --- */
.ob-stage {
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  max-width: 880px;
}

/* .ob-stage is a flex column, whose default align-items:stretch inflates
   direct-child CTAs to the full 880px column. Buttons hug their label
   (per the Onboarding mock); everything else keeps stretching. */
.ob-stage > .btn {
  align-self: flex-start;
}

/* Stage header: step counter + skip */
.stage-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stage-top .sc {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.stage-top .skip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
}

.stage-top .skip:hover {
  opacity: 1;
}

/* --- Panel (.panel): one wizard step, fade-swapped --- */
.panel {
  display: none;
  animation: fade .3s ease;
}

.panel.on {
  display: flex;
  flex-direction: column;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.panel h1 {
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin-bottom: 16px;
  max-width: 18ch;
}

.panel h1 em {
  font-style: normal;
  font-weight: 500;
  color: var(--forest);
}

.panel .lede {
  font-size: 18px;
  opacity: .7;
  line-height: 1.5;
  max-width: 54ch;
  margin-bottom: 40px;
}

/* --- Panel actions (.panel-actions): button row + note --- */
.panel-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
}

.panel-actions .note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .5;
}

/* --- Connect card (.connect): flat-edged integration card --- */
.connect {
  border: 1px solid var(--ink);
  background: var(--card);
  border-radius: 0;
  overflow: hidden;
}

.connect .c-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 32px;
  border-bottom: 1px solid var(--line);
}

/* Brand logo tile */
.connect .c-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.04em;
}

/* Brand colors have no core token — kept as-is */
.connect .c-logo.phorest {
  background: #6b3fa0;
  color: #fff;
}

.connect .c-logo.shopify {
  background: #5a8a3c;
  color: #fff;
}

.connect .c-logo svg {
  width: 30px;
  height: 30px;
}

.connect .c-title {
  flex: 1;
}

.connect .c-title .nm {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.connect .c-title .sub {
  font-size: 13px;
  opacity: .6;
}

/* Status pill: default "Not connected" */
.connect .c-stat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 99px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  opacity: .7;
}

/* Status pill: flipped to "Connected" */
.connect .c-stat.ok {
  background: rgba(26, 58, 42, .1);
  color: var(--forest);
  border-color: transparent;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.connect .c-stat.ok svg {
  width: 12px;
  height: 12px;
}

.connect .c-body {
  padding: 28px 32px;
}

/* Permission rows */
.connect .perm-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.connect .perm {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
}

.connect .perm svg {
  width: 18px;
  height: 18px;
  color: var(--forest);
  flex-shrink: 0;
  margin-top: 1px;
}

.connect .perm .pd {
  opacity: .6;
  font-size: 13px;
}

/* --- Welcome checklist (.wc-grid / .wc): numbered 3-up cells --- */
.wc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--card);
  margin-bottom: 8px;
}

.wc {
  padding: 24px;
  border-right: 1px solid var(--line);
}

.wc:last-child {
  border-right: 0;
}

.wc .wn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}

.wc h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.wc p {
  font-size: 13px;
  opacity: .65;
  line-height: 1.45;
}

/* --- Reconciliation scan (.scanbox): progress + result rows --- */
.scanbox {
  padding: 28px 32px;
  border-top: 1px solid var(--line);
  display: none;
}

.scanbox.show {
  display: block;
  animation: fade .3s ease;
}

.scan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}

.scan-row:last-child {
  border-bottom: 0;
}

.scan-row .sl {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scan-row .sl .nm {
  font-weight: 500;
}

.scan-row .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--forest);
  display: flex;
  align-items: center;
  gap: 6px;
}

.scan-row .meta svg {
  width: 13px;
  height: 13px;
}

/* Progress bar */
.progress {
  height: 6px;
  background: var(--paper-2);
  border-radius: 99px;
  overflow: hidden;
  margin: 4px 0 18px;
}

.progress > span {
  display: block;
  height: 100%;
  background: var(--forest);
  width: 0;
  border-radius: 99px;
  transition: width .1s linear;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 8px;
}

/* --- Done panel (.done-hero): success state --- */
.done-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 80px forest circle with lime check */
.done-mark {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  animation: pop .4s cubic-bezier(.2, .8, .3, 1.4);
}

@keyframes pop {
  from {
    transform: scale(.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.done-mark svg {
  width: 40px;
  height: 40px;
  color: var(--lime);
}

/* 4-up stats grid */
.done-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--card);
  margin: 36px 0 0;
  width: 100%;
}

.done-stats .ds {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
}

.done-stats .ds:last-child {
  border-right: 0;
}

.done-stats .ds .v {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.done-stats .ds .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
  margin-top: 8px;
}

/* --- Onboarding responsive --- */
@media (max-width: 1000px) {
  .ob {
    grid-template-columns: 1fr;
  }

  .ob-rail {
    position: static;
    height: auto;
    flex-direction: column;
  }

  .rail-steps {
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    margin-top: 8px;
  }

  .rstep {
    flex-direction: column;
    align-items: flex-start;
    min-width: 150px;
    padding: 8px 16px 8px 0;
  }

  .rstep .line {
    top: 14px;
    bottom: auto;
    width: auto;
    height: 1.5px;
    left: 30px;
    right: 16px;
  }

  .rail-foot {
    display: none;
  }

  .ob-stage {
    padding: 36px 28px;
  }

  .panel h1 {
    font-size: 38px;
  }
}

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

  .wc {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .done-stats {
    grid-template-columns: 1fr 1fr;
  }

  .done-stats .ds:nth-child(2n) {
    border-right: 0;
  }
}


/* ===============================================================
   AUTH — split-screen sign-in / password shell
   =============================================================== */

/* --- Shell: form column + dark brand aside --- */
.auth {
  display: grid;
  grid-template-columns: 1fr 44%;
  min-height: 100vh;
}

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

.auth-form {
  width: 100%;
  max-width: 400px;
}

.auth-form .lockup {
  margin-bottom: 44px;
}

.auth-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  background: var(--ink);
  color: var(--paper);
}

.auth-aside .lockup .wm {
  color: var(--paper);
}

.auth-aside .pitch {
  max-width: 16ch;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.auth-aside .pitch em {
  font-style: normal;
  color: var(--lime);
}

.auth-aside .credit {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* --- Form-level alert (flash) --- */
.form-alert {
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
}

.form-alert.error {
  background: rgba(179, 38, 30, 0.07);
  border-color: rgba(179, 38, 30, 0.28);
  color: #b3261e;
}

.form-alert.notice {
  background: rgba(26, 58, 42, 0.08);
  border-color: rgba(26, 58, 42, 0.28);
  color: var(--forest);
}

/* Validation errors (Devise shared partial) rendered inside a .form-alert */
.form-alert .fa-heading {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.form-alert ul {
  margin: 0;
  padding-left: 18px;
}

.form-alert li {
  margin: 2px 0;
}

/* Rails wraps invalid fields in a .field_with_errors div; make the wrapper
   transparent to layout and tint the field itself instead. */
.field_with_errors {
  display: contents;
}

.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea {
  border-color: rgba(179, 38, 30, 0.55);
}

/* --- Remember-me row --- */
.remember {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  font-size: 13px;
  cursor: pointer;
}

.remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--forest);
  cursor: pointer;
}

/* --- Secondary links under the form --- */
.auth-links {
  margin-top: 24px;
  font-size: 13px;
}

.auth-links a {
  color: var(--forest);
  font-weight: 500;
  border-bottom: 1px solid rgba(26, 58, 42, 0.25);
}

.auth-links a:hover {
  border-bottom-color: var(--forest);
}

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

  .auth-aside {
    display: none;
  }
}


/* ===============================================================
   DARK THEME
   Every component is authored against tokens, so overriding the
   token values on html.dark re-skins the whole app.
   =============================================================== */
html.dark {
  color-scheme: dark;
  --ink: #eef0e6;
  --paper: #0f130d;
  --paper-2: #181d14;
  --paper-3: #232a1e;
  --card: #151b12;
  --line: rgba(238, 240, 230, 0.16);
  --line-2: rgba(238, 240, 230, 0.09);
  --ink-dim: rgba(238, 240, 230, 0.6);
  --forest: #7fcf9c;
  --sage: #9fb98f;
  /* --lime and --warn stay the same in dark mode */
}


/* ===============================================================
   APP CHROME — additions for the authenticated app shell
   =============================================================== */

/* --- Real-checkbox toggle (posts its state; used for sync switches) --- */
.vd-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper-3);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease;
}

.vd-switch::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s ease;
}

.vd-switch:checked {
  background: var(--forest);
  border-color: var(--forest);
}

.vd-switch:checked::after {
  transform: translateX(14px);
  background: var(--lime);
}

.vd-switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Larger variant for settings rows */
.vd-switch.lg {
  width: 44px;
  height: 26px;
}

.vd-switch.lg::after {
  width: 20px;
  height: 20px;
}

.vd-switch.lg:checked::after {
  transform: translateX(18px);
}

/* --- Danger button variant (Disconnect) --- */
.btn.danger {
  border-color: #b04a3f;
  color: #b04a3f;
}

.btn.danger:hover {
  background: rgba(176, 74, 63, 0.08);
}

/* Disabled link-button (e.g. the Shopify install button before a valid domain) */
.btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* --- Sidebar Light/Dark segmented switch --- */
.theme-switch {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
}

.theme-switch button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.6;
}

.theme-switch button svg {
  width: 13px;
  height: 13px;
}

.theme-switch button.active {
  background: var(--ink);
  color: var(--paper);
  opacity: 1;
}

/* --- Top bar (page title + actions) inside the app content --- */
.page-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.page-top h1 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 40px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.page-top .crumb {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

.page-top .sub {
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.65;
}

/* --- Section card (settings-style bordered section).
   Named .section-card to avoid clashing with the onboarding .panel
   (which is display:none until .panel.on). --- */
.section-card {
  margin-bottom: 24px;
  border: 1px solid var(--ink);
  background: var(--card);
}

.section-card-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.section-card-body {
  padding: 24px;
}

/* Forest-tinted info callout */
.callout {
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid rgba(26, 58, 42, 0.18);
  border-radius: 10px;
  background: rgba(26, 58, 42, 0.06);
  font-size: 13px;
  line-height: 1.5;
}

/* Branch -> location linker */
.link-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: end;
}

.link-row .link-ic {
  padding-bottom: 14px;
  opacity: 0.5;
}

/* Toggle + label/description row */
.setting-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.setting-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.setting-row.disabled {
  opacity: 0.5;
}

.setting-row .sr-body {
  flex: 1;
  min-width: 0;
}

.setting-row .sr-body .st {
  font-size: 14px;
  font-weight: 600;
}

.setting-row .sr-body .sd {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.65;
}

.setting-row .sr-body .sd ul {
  margin: 6px 0 0 18px;
}

/* Simple flash banner for the app shell */
.flash {
  padding: 12px 16px;
  margin-bottom: 24px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 13px;
}

.flash.notice {
  border-color: rgba(26, 58, 42, 0.28);
  background: rgba(26, 58, 42, 0.08);
  color: var(--forest);
}

.flash.alert {
  border-color: rgba(179, 38, 30, 0.28);
  background: rgba(179, 38, 30, 0.07);
  color: #b3261e;
}

/* Danger status pill (not connected / inactive / failed) */
.status.danger {
  background: rgba(179, 38, 30, 0.09);
  color: #b3261e;
}

.status.danger .d {
  background: #b3261e;
}

/* Compact labelled filter select (admin toolbar) */
.filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.filter > .mono {
  opacity: 0.55;
}

.filter select {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  outline: 0;
}

/* Sortable table header link */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
}

.th-sort .ind {
  opacity: 0.5;
}

.th-sort.on .ind {
  opacity: 1;
  color: var(--forest);
}

/* ---------------------------------------------------------------
   User avatar (round tile, forest bg + lime initials)
   --------------------------------------------------------------- */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-cell .un {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------
   Modal — native <dialog> (see dialog_controller.js)
   --------------------------------------------------------------- */
dialog.vd-modal {
  /* Center in the viewport. The global `* { margin: 0 }` reset kills the
     UA `dialog:modal { margin: auto }` centering, so position explicitly. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.45);
}

dialog.vd-modal::backdrop {
  background: rgba(10, 15, 10, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

dialog.vd-modal .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

dialog.vd-modal .modal-head h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

dialog.vd-modal .modal-head .x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--ink);
  opacity: 0.6;
}

dialog.vd-modal .modal-head .x:hover {
  background: var(--paper-2);
  opacity: 1;
}

dialog.vd-modal .modal-head .x svg {
  width: 15px;
  height: 15px;
}

dialog.vd-modal .modal-body {
  padding: 22px;
}

dialog.vd-modal .modal-body .field:last-child {
  margin-bottom: 0;
}

dialog.vd-modal .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 0 0 16px 16px;
}

/* ---------------------------------------------------------------
   Sync-history run cards
   --------------------------------------------------------------- */
.run-card {
  margin-bottom: 12px;
  border: 1px solid var(--ink);
  background: var(--card);
}

.run-details > summary {
  list-style: none;
  cursor: pointer;
}

.run-details > summary::-webkit-details-marker {
  display: none;
}

.run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.run-row .when {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.run-row .counts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.run-row .counts .c {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.run-row .counts .c svg {
  width: 12px;
  height: 12px;
}

.run-row .counts .c b {
  color: var(--ink);
  font-weight: 600;
}

.run-row .counts .c.linked {
  color: var(--forest);
  opacity: 1;
}

.run-row .counts .c.linked b {
  color: var(--forest);
}

.run-row .counts .c.warn {
  color: var(--warn);
  opacity: 1;
}

.run-row .counts .c.warn b {
  color: var(--warn);
}

.run-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.run-toggle .chev {
  width: 11px;
  height: 11px;
  transition: transform 0.2s ease;
}

.run-details[open] .run-toggle .chev {
  transform: rotate(180deg);
}

.run-body {
  border-top: 1px solid var(--line);
}

.run-body .run-error {
  margin: 14px 18px;
  padding: 12px 14px;
  border: 1px solid rgba(179, 38, 30, 0.28);
  border-radius: 10px;
  background: rgba(179, 38, 30, 0.07);
  color: #b3261e;
  font-size: 13px;
}

.run-body .run-note {
  padding: 14px 18px;
  font-size: 13px;
  opacity: 0.7;
}

.run-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.run-body th {
  padding: 10px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

.run-body td {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}

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

.run-body .chg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.run-body .chg svg {
  width: 12px;
  height: 12px;
}

.run-body .chg.up {
  color: var(--forest);
}

.run-body .chg.down {
  color: var(--warn);
}

.run-body .chg.muted {
  opacity: 0.55;
}

/* ---------------------------------------------------------------
   Integration cards (Integrations screen)
   --------------------------------------------------------------- */
.integration-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid var(--ink);
  background: var(--card);
}

.integration-card .tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

.integration-card .body {
  flex: 1;
  min-width: 0;
}

.integration-card .name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.integration-card .name-row h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.integration-card .desc {
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0.75;
}

.integration-card .meta {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  opacity: 0.6;
}

.integration-card .actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .integration-card {
    flex-wrap: wrap;
  }

  .integration-card .actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------
   Selects — replace the native control chrome with a Verdantly
   chevron. Applies everywhere the design system renders a select
   (.field forms, .filter toolbars). Kept last so the padding-right
   wins over each component's own padding shorthand.
   --------------------------------------------------------------- */
.field select,
.filter select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a0f0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.25 8 9.75 11.5 6.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px;
  cursor: pointer;
}

html.dark .field select,
html.dark .filter select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23eef0e6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.25 8 9.75 11.5 6.25'/%3E%3C/svg%3E");
}

/* ── Ask Verdantly chat (Intelligence C3) ──────────────────────────────
   Translated once from design/verdantly-v3/Dashboard.dc.html (light/page
   variant). Tokens only — the dark theme's token overrides invert these
   for free; never hardcode the mockup's dark-panel colors. */

.chat-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  /* Counteract .app-shell .content padding for a full-height chat. */
  margin: -32px -40px -64px;
  padding: 20px;
  height: 100vh;
  height: 100dvh; /* mobile chrome/keyboard-safe where supported */
  box-sizing: border-box;
  background: var(--paper-2);
}

/* A flash above the chat would be overlapped by the negative top margin and
   push the 100dvh page into a second scrollbar — when one is present, the
   chat sizes to the remaining space instead (review catch). */
.content:has(> .flash) .chat-page {
  margin-top: 0;
  height: auto;
  min-height: 60vh;
}

.chat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.chat-head .chat-avatar { width: 30px; height: 30px; }
.chat-head .chat-avatar svg { width: 17px; height: 17px; }

.chat-head-titles { display: flex; flex-direction: column; line-height: 1.2; }
.chat-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.chat-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 2px;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 26px 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  font-size: 17px;
  opacity: 0.45;
}

.chat-msg { display: flex; gap: 12px; max-width: 78%; }
.chat-msg.user { max-width: 70%; align-self: flex-end; }

.chat-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lime);
  /* Fixed dark ink, NOT var(--ink): lime stays lime in dark mode while --ink
     flips light, which would make the leaf invisible (review catch). */
  color: #0a0f0a;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.chat-avatar svg { width: 14px; height: 14px; }

.chat-msg .chat-bubble {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px 14px 14px 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  min-width: 0;
}
.chat-msg .chat-bubble p { margin: 0 0 8px; }
.chat-msg .chat-bubble p:last-child { margin-bottom: 0; }

.chat-msg.user .chat-bubble {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 14px 4px 14px 14px;
}

.chat-msg.failed .chat-bubble { border-color: var(--warn); }
.chat-msg.refused .chat-bubble { opacity: 0.8; }

.chat-typing { display: flex; gap: 4px; padding: 2px 0; }
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--forest);
  animation: v-typing 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes v-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chat-meta {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.55;
  margin-top: 10px;
}
.chat-meta a { color: inherit; }

.chat-chips {
  flex-shrink: 0;
  padding: 0 20px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-chip {
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.chat-chip:hover { border-color: var(--ink); }
.chat-chip.soon { opacity: 0.45; cursor: default; }
.chat-chip.soon:hover { border-color: var(--line); }

.chat-composer-wrap { flex-shrink: 0; padding: 0 20px 20px; }

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 14px 20px;
}

.chat-composer textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  max-height: 120px;
  padding: 6px 0;
}

.chat-send {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.chat-send.ready { opacity: 1; }
.chat-send svg { width: 18px; height: 18px; }

.chat-rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 16px;
  overflow-y: auto;
}

.chat-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.chat-new:hover { border-color: var(--ink); }

.chat-rail-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
  padding: 0 8px 10px;
}

.chat-rail-list { display: flex; flex-direction: column; gap: 2px; }

.chat-rail-item {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.chat-rail-item:hover { background: var(--paper-2); }
.chat-rail-item.active { background: var(--paper-2); }
.chat-rail-item .t {
  display: block;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-rail-item .m { display: block; font-size: 12px; opacity: 0.5; margin-top: 3px; }

/* Sidebar entry accent (the lime circle leaf from the mockup nav). */
.side-ai-dot {
  width: 20px;
  height: 20px;
  margin: -2px 0 -2px -2px;
  border-radius: 50%;
  background: var(--lime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0a0f0a; /* see .chat-avatar — lime is theme-fixed */
  flex-shrink: 0;
}
/* Specificity must beat .side-nav a svg (16px, opacity .7) — and the dot must
   stay lime on the ink-backgrounded active item (review catch). */
.side-nav a .side-ai-dot svg { width: 12px; height: 12px; opacity: 1; }
.side-nav a.active .side-ai-dot { background: var(--lime); color: #0a0f0a; }
.side-nav a.active .side-ai-dot svg { opacity: 1; }

/* Mobile: the sidebar is display:none under 1100px (no app-wide mobile nav
   yet — see REBRAND-INFRA-AUDIT); this floating link keeps the chat
   reachable on phones. The dark slide-over panel is v1.1. */
.chat-fab {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lime);
  color: #0a0f0a; /* see .chat-avatar */
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px -8px rgba(10, 15, 10, 0.4);
  z-index: 50;
}
.chat-fab svg { width: 24px; height: 24px; }

@media (max-width: 1100px) {
  .chat-fab { display: flex; }

  .chat-page {
    grid-template-columns: 1fr;
    margin: -32px -40px -64px;
    height: 100vh;
  }

  .chat-page { height: 100dvh; }
  .chat-rail { display: none; }
  .chat-msg { max-width: 92%; }
  .chat-msg.user { max-width: 86%; }
}

@media (max-width: 640px) {
  .chat-page { margin: -32px -40px -64px; padding: 12px; }
  .chat-body { padding: 18px 16px 12px; }
}

/* Pending bubble: dots + rotating word on ONE compact line. */
.chat-typing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}

.chat-thinking-label {
  font-family: var(--mono);
  font-size: 11.5px;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

.chat-thinking-label.switching { opacity: 0; }

/* Mobile drawers for the chat: header toggles slide the app sidebar (nav)
   and the recent-chats rail over the conversation under 1100px. */
.chat-head-btn {
  display: none;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-head-btn svg { width: 16px; height: 16px; }

.chat-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 10, 0.45);
  z-index: 65;
}
.chat-drawer-backdrop.visible { display: block; }

@media (max-width: 1100px) {
  .chat-head-btn { display: inline-flex; }

  .sidebar.mobile-open {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 264px;
    z-index: 70;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
  }

  .chat-rail.mobile-open {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 300px;
    z-index: 70;
    border-radius: 0;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.45);
  }
}