/* ==========================================================================
   FEATURE EXPLORER — "One login. Cancel the rest."
   Clickable tabs swap an in-app vignette + copy for each tool.
   Built on the Gearbook tokens (styles.css). Monochrome + emerald accent.
   ========================================================================== */

.explorer { margin-top: 44px; }

/* ---------- tab chips ---------- */
.exp-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-bottom: 30px;
}
.exp-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-full);
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.exp-tab svg { width: 15px; height: 15px; color: var(--muted); stroke-width: 1.7; transition: color .15s ease; }
.exp-tab:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.exp-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.exp-tab.is-active svg { color: #fff; }

/* ---------- stage ---------- */
.exp-stage {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.exp-panel { display: none; }
.exp-panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  align-items: stretch;
}
@media (prefers-reduced-motion: no-preference) {
  .exp-panel.is-active .exp-copy,
  .exp-panel.is-active .exp-viz { animation: expIn .42s cubic-bezier(.2,.7,.2,1) both; }
  .exp-panel.is-active .exp-viz { animation-delay: .05s; }
}
@keyframes expIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- copy column ---------- */
.exp-copy {
  padding: clamp(28px, 3.2vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.exp-bin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--faint);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  margin-bottom: 18px;
}
.exp-bin svg { width: 13px; height: 13px; stroke-width: 2; }
.exp-bin s { text-decoration-color: var(--faint); }
.exp-copy h3 {
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 12px;
}
.exp-copy .exp-lead { font-size: 16.5px; color: var(--muted); line-height: 1.5; max-width: 36ch; }
.exp-pts { list-style: none; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.exp-pts li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--foreground); }
.exp-pts .tick {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent-strong);
  display: grid; place-items: center;
}
.exp-pts .tick svg { width: 13px; height: 13px; stroke-width: 2.6; }
.exp-pts b { color: var(--ink); font-weight: 600; }

/* ---------- viz tray ---------- */
.exp-viz {
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-left: 1px solid var(--border);
  padding: clamp(26px, 3vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.exp-viz .viz { width: 100%; max-width: 420px; }

/* shared vignette card shell */
.vz-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.vz-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.vz-bar svg { width: 16px; height: 16px; color: var(--muted); stroke-width: 1.8; }
.vz-bar .vz-meta { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--faint); }
.vz-body { padding: 16px; }

/* tiny status pill */
.vz-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border-radius: var(--radius-full); padding: 3px 9px;
}
.vz-pill.ok  { background: var(--accent-soft); color: var(--accent-strong); }
.vz-pill.amb { background: #fef3e2; color: #b45309; }
.vz-pill.red { background: #fde9e9; color: #c0392b; }
.vz-pill.neu { background: var(--surface); color: var(--muted); }

/* ================= 1 · BOOKING / CALENDAR ================= */
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cal-col { display: flex; flex-direction: column; gap: 6px; }
.cal-dh { text-align: center; font-size: 11px; font-weight: 600; color: var(--faint); padding-bottom: 4px; }
.cal-dh b { display: block; color: var(--ink); font-size: 14px; font-weight: 700; }
.cal-job {
  border-radius: 8px; padding: 7px 8px; font-size: 10.5px; line-height: 1.25;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.cal-job b { display: block; font-size: 11px; color: var(--ink); font-weight: 600; }
.cal-job.g { background: var(--accent-soft); border-color: var(--accent-border); }
.cal-job.g b { color: var(--accent-strong); }
.cal-job.tall { padding-bottom: 22px; }
.cal-now { height: 2px; background: var(--accent); border-radius: 2px; position: relative; margin: 2px 0; }
.cal-now::before { content:""; position:absolute; left:0; top:50%; transform:translate(-2px,-50%); width:6px; height:6px; border-radius:50%; background: var(--accent); }
/* per-day capacity / fill in hours */
.cal-cap { margin-bottom: 8px; }
.cal-cap .cap-h { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--muted); display: block; text-align: center; margin-bottom: 3px; }
.cal-cap .cap-track { height: 5px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.cal-cap .cap-fill { height: 100%; border-radius: 5px; background: var(--accent); }
.cal-cap.full .cap-h { color: var(--dot-amber); }
.cal-cap.full .cap-fill { background: var(--dot-amber); }

/* ================= 2 · CUSTOMER & CAR ================= */
.cust-top { display: flex; align-items: center; gap: 13px; }
.cust-av { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.cust-top .nm b { display: block; font-size: 16px; color: var(--ink); font-weight: 700; }
.cust-top .nm span { font-size: 13px; color: var(--muted); }
.cust-cars { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.cust-car { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.cust-car .cn { font-size: 13px; color: var(--ink); font-weight: 600; }
.cust-car .cs { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.cust-foot { display: flex; gap: 8px; border-top: 1px solid var(--border); padding-top: 14px; }
.cust-stat { flex: 1; text-align: center; }
.cust-stat b { display: block; font-size: 18px; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.cust-stat span { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }

/* ================= 3 · JOB CARD ================= */
.job-task { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--foreground); }
.job-task:first-child { border-top: 0; }
.job-box { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; border: 1.5px solid var(--border-strong); }
.job-box svg { width: 12px; height: 12px; stroke-width: 3; color: #fff; }
.job-task.done .job-box { background: var(--accent); border-color: var(--accent); }
.job-task.done { color: var(--muted); }
.job-task.now .job-box { border-color: var(--accent); border-style: dashed; }
.job-task .jt-time { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.job-shots { display: flex; gap: 7px; margin-top: 14px; }
.job-shot { width: 52px; height: 52px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--faint); }
.job-shot svg { width: 18px; height: 18px; stroke-width: 1.6; }
.job-shot.add { border-style: dashed; }

/* ================= 4 · INSPECTION (DVI) ================= */
.dvi-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border); }
.dvi-row:first-child { border-top: 0; }
.dvi-led { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dvi-led.g { background: var(--accent); }
.dvi-led.a { background: var(--dot-amber); }
.dvi-led.r { background: var(--dot-red); }
.dvi-row .dn { font-size: 14px; color: var(--ink); font-weight: 600; }
.dvi-row .vz-pill { margin-left: auto; }
.dvi-sent { display: flex; align-items: center; gap: 9px; margin-top: 6px; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: var(--accent-strong); font-weight: 600; }
.dvi-sent svg { width: 16px; height: 16px; stroke-width: 2.2; }

/* ================= 5 · QUOTE / INVOICE ================= */
.inv-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.inv-line:first-child { border-top: 0; }
.inv-line .il { color: var(--foreground); }
.inv-line .ir { font-family: var(--mono); color: var(--ink); font-weight: 600; }
.inv-sum { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.inv-sum .row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.inv-sum .row.tot { font-size: 17px; color: var(--ink); font-weight: 800; }
.inv-sum .row.tot .ir { font-family: var(--mono); }
.inv-stamp { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; background: var(--accent); color: #fff; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; justify-content: center; width: 100%; }
.inv-stamp svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* ================= 6 · PARTS / STOCK ================= */
.prt-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--border); }
.prt-row:first-child { border-top: 0; }
.prt-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--surface); display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.prt-ic svg { width: 17px; height: 17px; stroke-width: 1.7; }
.prt-nm { font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.2; }
.prt-nm span { display: block; font-size: 11.5px; color: var(--faint); font-weight: 400; }
.prt-qty { margin-left: auto; text-align: right; flex-shrink: 0; }
.prt-qty b { font-family: var(--mono); font-size: 15px; color: var(--ink); }
.prt-qty .q-lab { display: block; font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }

/* ================= 7 · TIME CLOCK ================= */
.clk-now { text-align: center; padding: 6px 0 16px; }
.clk-now .t { font-family: var(--mono); font-size: 34px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.clk-now .d { font-size: 12px; color: var(--faint); }
.clk-mem { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--border); }
.clk-mem .av { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.clk-mem .nm { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.clk-mem .st { margin-left: auto; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.clk-mem .hrs { font-family: var(--mono); font-size: 12.5px; color: var(--muted); width: 56px; text-align: right; flex-shrink: 0; }

/* ================= 8 · SHOP-FLOOR BOARD ================= */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.bcol-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.bcol-h .ct { background: var(--surface); border-radius: var(--radius-full); padding: 0 6px; color: var(--muted); }
.bcard { border: 1px solid var(--border); border-radius: 9px; background: #fff; padding: 8px; margin-bottom: 7px; box-shadow: var(--shadow-sm); }
.bcard .bp { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); }
.bcard .bn { font-size: 10.5px; color: var(--muted); margin: 3px 0 6px; }
.bcard .bt { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.bcol.doing .bcard { border-color: var(--accent-border); }
.bcol.done .bcard { opacity: .62; }

/* ================= 9 · REMINDERS (SMS) ================= */
.sms { background: var(--surface); border-radius: var(--radius-card); padding: 16px; }
.sms-day { text-align: center; font-size: 10.5px; color: var(--faint); margin-bottom: 12px; }
.sms-b { max-width: 82%; font-size: 13px; line-height: 1.4; padding: 9px 12px; border-radius: 14px; margin-bottom: 9px; }
.sms-b.out { margin-left: auto; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.sms-b.in { background: #fff; border: 1px solid var(--border); color: var(--foreground); border-bottom-left-radius: 5px; }
.sms-tag { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin-bottom: 3px; }
.sms-meta { text-align: center; font-size: 11px; color: var(--accent-strong); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; justify-content: center; width: 100%; margin-top: 4px; }
.sms-meta svg { width: 13px; height: 13px; stroke-width: 2.2; }

/* ================= 10 · ONLINE BOOKING PAGE ================= */
.obk-h { text-align: center; padding: 4px 0 14px; }
.obk-h b { display: block; font-size: 15px; color: var(--ink); font-weight: 700; }
.obk-h span { font-size: 12px; color: var(--muted); }
.obk-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 14px; }
.obk-opt { border: 1px solid var(--border); border-radius: 9px; padding: 9px; font-size: 12px; font-weight: 600; color: var(--foreground); text-align: center; }
.obk-opt.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.obk-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.obk-slot { border: 1px solid var(--border); border-radius: 8px; padding: 8px 0; text-align: center; font-size: 11.5px; font-family: var(--mono); color: var(--muted); }
.obk-slot.sel { background: var(--ink); border-color: var(--ink); color: #fff; }
.obk-slot.off { opacity: .35; text-decoration: line-through; }
.obk-go { background: var(--accent); color: #fff; border-radius: 10px; text-align: center; padding: 12px; font-size: 13.5px; font-weight: 600; }

/* ================= 11 · REPORTS ================= */
.rep-stats { display: flex; gap: 10px; margin-bottom: 18px; }
.rep-stat { flex: 1; }
.rep-stat b { display: block; font-size: 22px; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.rep-stat .lab { font-size: 11px; color: var(--faint); }
.rep-stat .up { font-size: 11px; color: var(--accent-strong); font-weight: 600; }
.rep-chart { display: flex; align-items: flex-end; gap: 9px; height: 120px; padding-top: 8px; border-top: 1px solid var(--border); }
.rep-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.rep-bar .bar { width: 100%; border-radius: 5px 5px 0 0; background: var(--surface-2); }
.rep-bar.hi .bar { background: var(--accent); }
.rep-bar .bl { font-size: 10px; color: var(--faint); }

/* ================= 12 · FRONT DESK AI ================= */
.ai-mini { background: #1c1c1b; border-radius: var(--radius-card); padding: 16px; box-shadow: var(--shadow-lg); }
.ai-mini-h { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.1); }
.ai-mini-h .ic { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--accent-bright) 16%, transparent); color: var(--accent-bright); display: grid; place-items: center; flex-shrink: 0; }
.ai-mini-h .ic svg { width: 18px; height: 18px; }
.ai-mini-h b { color: #fff; font-size: 13.5px; display: block; }
.ai-mini-h .lv { font-size: 11px; color: var(--accent-bright); display: inline-flex; align-items: center; gap: 5px; }
.ai-mini-h .lv::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); animation: pulse 1.6s ease-in-out infinite; }
.ai-mini-b { padding: 14px 0 0; display: flex; flex-direction: column; gap: 9px; }
.ai-b { max-width: 84%; font-size: 12.5px; line-height: 1.4; padding: 9px 12px; border-radius: 13px; }
.ai-b.them { align-self: flex-start; background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); border-bottom-left-radius: 4px; }
.ai-b.bot { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ai-booked { display: flex; align-items: center; gap: 9px; margin-top: 6px; background: color-mix(in srgb, var(--accent-bright) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-bright) 25%, transparent); border-radius: 10px; padding: 10px 12px; }
.ai-booked svg { width: 16px; height: 16px; color: var(--accent-bright); flex-shrink: 0; }
.ai-booked b { color: #fff; font-size: 12.5px; }
.ai-booked .sub { color: rgba(255,255,255,.6); font-size: 11px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .exp-panel.is-active { grid-template-columns: 1fr; }
  .exp-viz { order: -1; border-left: 0; border-bottom: 1px solid var(--border); min-height: 0; }
  .exp-viz .viz { max-width: 380px; }
}
@media (max-width: 520px) {
  .exp-tab { font-size: 13px; padding: 8px 12px; }
  .cal { font-size: 9px; }
  .board { font-size: 9px; }
}

/* ==========================================================================
   BEFORE / AFTER LEDGER — "Same shop. Way less stress."
   A normal day in the shop, paired old-way → Gearbook-way across a spine.
   ========================================================================== */
.vs {
  margin-top: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-lg);
}

/* column headers */
.vs-head { display: grid; grid-template-columns: 1fr 58px 1fr; }
.vs-head .vh { padding: 22px clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 4px; }
.vs-head .vh.old { background: var(--surface); }
.vs-head .vh.new { background: var(--accent-soft); }
.vs-head .vh.spine { background: var(--surface); }
.vs-head .vh b { font-size: 16px; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.vs-head .vh.new b { color: var(--accent-strong); }
.vs-head .vh span { font-size: 13px; color: var(--muted); }
.vs-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-full); margin-bottom: 6px;
}
.vs-chip.old { background: #e6e6e6; color: var(--muted); }
.vs-chip.new { background: var(--accent); color: #fff; }

/* rows */
.vs-row { display: grid; grid-template-columns: 1fr 58px 1fr; border-top: 1px solid var(--border); }
.vs-cell { padding: 20px clamp(20px, 2.4vw, 32px); display: flex; gap: 13px; align-items: flex-start; }
.vs-cell.old { background: var(--surface); }
.vs-cell.new { background: #fff; }
.vs-ic { width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px; border-radius: var(--radius-full); display: grid; place-items: center; }
.vs-ic svg { width: 14px; height: 14px; stroke-width: 2.6; }
.vs-cell.old .vs-ic { background: #e4e4e4; color: var(--faint); }
.vs-cell.new .vs-ic { background: var(--accent-soft); color: var(--accent-strong); }
.vs-cell b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; line-height: 1.2; }
.vs-cell.old b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.22); }
.vs-cell.new b { color: var(--ink); }
.vs-cell .sub { font-size: 13.5px; line-height: 1.45; }
.vs-cell.old .sub { color: var(--faint); }
.vs-cell.new .sub { color: var(--muted); }

/* center spine — vertical divider + connector arrows */
.vs-spine { position: relative; display: grid; place-items: center; background: linear-gradient(90deg, var(--surface) 0 50%, #fff 50% 100%); }
.vs-spine::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border); }
.vs-arrow {
  position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: var(--radius-full);
  background: #fff; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}
.vs-arrow svg { width: 15px; height: 15px; stroke-width: 2.2; }
.vs-head .vh.spine { background: linear-gradient(90deg, var(--surface) 0 50%, var(--accent-soft) 50% 100%); }

/* outcome strip */
.vs-out {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 22px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: #fff; overflow: hidden;
}
.vs-stat { padding: 24px 20px; text-align: center; border-left: 1px solid var(--border); }
.vs-stat:first-child { border-left: 0; }
.vs-stat b { display: block; font-size: clamp(1.8rem, 2.2vw + 1rem, 2.6rem); font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.vs-stat b .em { color: var(--accent-strong); }
.vs-stat span { display: block; margin-top: 9px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 900px) {
  .vs-head { display: none; }
  .vs-row { grid-template-columns: 1fr; }
  .vs-spine { display: none; }
  .vs-cell.old { border-bottom: 1px dashed var(--border-strong); }
  .vs-cell.old::before, .vs-cell.new::before {
    content: "Before"; position: absolute; margin-top: -2px;
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  }
  .vs-cell { position: relative; padding-top: 30px; }
  .vs-cell.old::before { color: var(--faint); }
  .vs-cell.new::before { content: "With Gearbook"; color: var(--accent-strong); }
}
@media (max-width: 560px) {
  .vs-out { grid-template-columns: 1fr; }
  .vs-stat { border-left: 0; border-top: 1px solid var(--border); }
  .vs-stat:first-child { border-top: 0; }
}

/* ==========================================================================
   TEAM — social trust + Made in New Zealand
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 720px;
  margin: 50px auto 0;
}
.member {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 28px 24px 26px;
  text-align: center;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.member:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); transform: translateY(-3px); }
.member-photo { width: 88px; height: 88px; border-radius: var(--radius-full); overflow: hidden; background: var(--surface); margin: 0 auto 16px; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: filter .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.member:hover .member-photo img { filter: grayscale(0); transform: scale(1.04); }
img.ryan-crop { object-position: center 18%; transform: scale(1.25); transform-origin: center 20%; }
.member:hover .member-photo img.ryan-crop { transform: scale(1.3); }
.member-info { padding: 0; }
.member-info b { font-size: 19px; color: var(--ink); font-weight: 700; letter-spacing: -.02em; display: block; }
.member-role {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: var(--radius-full); padding: 4px 11px;
  white-space: nowrap;
}
.member-info p { font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 14px; }
.member-quote { font-size: 15.5px; color: var(--foreground); font-weight: 500; line-height: 1.5; margin-top: 16px; text-wrap: pretty; }
.member-quote::before { content: "\201C"; }
.member-quote::after { content: "\201D"; }

.nz-made {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 40px auto 0;
  padding: 14px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.nz-made .nz-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--ink); color: #fff; display: grid; place-items: center; }
.nz-made .nz-ic svg { width: 17px; height: 17px; stroke-width: 1.8; }
.nz-made .nz-txt { text-align: left; line-height: 1.25; }
.nz-made .nz-txt b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 700; }
.nz-made .nz-txt span { font-size: 12.5px; color: var(--muted); }
.team-wrap { text-align: center; }

@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; max-width: 380px; gap: 18px; }
}

/* ==========================================================================
   ONBOARDING / "Switching is sorted"
   ========================================================================== */
.setup-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 50px; counter-reset: step;
}
.setup-step {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: #fff; padding: 30px 26px 26px;
  box-shadow: var(--shadow-sm);
}
.setup-num {
  position: absolute; top: 22px; right: 24px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--faint);
}
.setup-ic {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-strong);
  display: grid; place-items: center; margin-bottom: 20px;
}
.setup-ic svg { width: 23px; height: 23px; }
.setup-step h3 { font-size: 18.5px; color: var(--ink); letter-spacing: -.02em; margin-bottom: 8px; }
.setup-step p { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.setup-foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px;
  margin-top: 30px;
}
.setup-foot span { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--ink); }
.setup-foot svg { width: 16px; height: 16px; color: var(--accent); }

/* onboarding motif: checklist ticking in sequence */
.anim-setup .su-box { stroke: var(--border-strong); fill: #fff; stroke-width: 2; }
.anim-setup .su-bar { stroke: var(--border-strong); stroke-width: 2.4; stroke-linecap: round; }
.anim-setup .su-bar.s { stroke: var(--faint); opacity: .6; }
.anim-setup .su-check { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; opacity: 0; }
.anim-setup .c1 { animation: suPop 3s ease-in-out infinite; }
.anim-setup .c2 { animation: suPop 3s ease-in-out infinite .4s; }
.anim-setup .c3 { animation: suPop 3s ease-in-out infinite .8s; }
@keyframes suPop { 0%, 4% { opacity: 0; transform: scale(.4); } 16%, 84% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.4); } }

@media (max-width: 860px) {
  .setup-steps { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-setup .su-check { animation: none; opacity: 1; }
}

/* ==========================================================================
   FOUNDER NOTE (dark)
   ========================================================================== */
.founder { background: var(--bg-ink); color: #fff; overflow: hidden; }
.founder .eyebrow { color: var(--accent-bright); }
.founder .eyebrow::before { background: var(--accent-bright); }
.founder .sec-head { margin-bottom: clamp(44px, 5vw, 68px); }
.founder .sec-head h2 { color: #fff; }
.founder-wrap {
  display: grid; grid-template-columns: 248px 1fr; gap: 44px; align-items: stretch;
  max-width: 860px; margin: 0 auto;
}
.founder-media { position: relative; display: flex; }
.founder-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 44% center;
  border-radius: var(--radius-2xl, 16px);
  filter: grayscale(1) contrast(1.03); transition: filter .5s ease;
  border: 1px solid rgba(255,255,255,.1);
}
.founder-media:hover img { filter: grayscale(0); }
.founder-badge {
  position: absolute; left: 16px; bottom: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-full);
  padding: 6px 13px;
}
.founder-body {
  position: relative; padding-left: 6px; padding-right: 2px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(24px, 3.5vw, 44px);
}
.founder-quotemark {
  color: var(--accent-bright); opacity: .8;
  font-family: Georgia, serif; font-weight: 700;
  font-size: 1.35em; line-height: 1;
  pointer-events: none; user-select: none;
}
.founder-quotemark.open  { margin-right: .04em; }
.founder-quotemark.close { margin-left: .05em; }
.founder-quote {
  font-size: clamp(1.15rem, 0.85vw + 0.82rem, 1.5rem); line-height: 1.45;
  font-weight: 600; letter-spacing: -.01em; color: #fff; text-wrap: pretty;
}
.founder-quote .hl { color: var(--accent-bright); }
.founder-sub { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.6); max-width: 54ch; }
.founder-sign { display: flex; flex-direction: column; gap: 2px; }
.founder-sign b { font-size: 17px; font-weight: 700; color: #fff; }
.founder-sign span { font-size: 13.5px; color: rgba(255,255,255,.55); }

@media (max-width: 760px) {
  .founder-wrap { grid-template-columns: 1fr; gap: 30px; }
  .founder-media { max-width: 240px; aspect-ratio: auto; }
  .founder-body { padding-left: 0; padding-right: 0; justify-content: flex-start; }
}

/* ===========================================================================
   MOBILE OPTIMIZATION PASS — overrides for ≤760px only.
   ========================================================================== */
@media (max-width: 760px) {
  /* Founder photo — centre under the heading. Body text stays left-aligned. */
  .founder-media { margin: 0 auto; justify-self: center; }

  /* Before/After ledger — the existing @media (max-width: 900px) rule positions
     the "Before" / "With Gearbook" ::before label at `top: 30px; left: 20px`
     (its static position inside the flex cell), which lands on top of the icon
     and the title. Pin the label to the top-left of the padding area instead
     and give the content more clearance below. */
  .vs-cell { padding-top: 36px; }
  .vs-cell.old::before,
  .vs-cell.new::before {
    top: 12px;
    left: clamp(20px, 2.4vw, 32px);
    margin-top: 0;
  }

  /* Ryan + Nico photos — full colour on mobile (there is no hover on touch
     devices, so the desktop grayscale-on-rest / colour-on-hover effect just
     leaves them perpetually black-and-white). Desktop behaviour unchanged. */
  .member-photo img,
  .founder-media img { filter: none; }
}