/* ===================== CARGOER Public Website ==========================
   Styles specific to the platform-marketing pages (pages/platform/*.js,
   components/PlatformHeader.js, components/PlatformFooter.js). Reuses the
   shared design system (tokens.css, base.css, components.css — .container,
   .section, .card, .badge, .btn, .eyebrow, .hero, .capability-grid) for
   everything that already fits; only genuinely new patterns (lifecycle
   flow, before/after comparison, automation flow, AI section, packages
   cards) get new classes here, all "pf-" prefixed to stay clearly scoped
   to this one experience and never collide with client-website classes. */

/* ---- Hero: the guideline's "dark yet bright, smooth gradients" treatment ---- */
.pf-hero { background: var(--gradient-hero); border-bottom: 1px solid var(--border-1); }
.pf-hero .badge-accent { margin-bottom: var(--sp-4); }
.pf-hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-5); }

/* ---- Section eyebrow anchors (scroll targets for header nav) ---- */
.pf-anchor { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---- Logistics operations lifecycle ---- */
.pf-lifecycle-track { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; margin-top: var(--sp-6); }
.pf-lifecycle-step {
  flex: 1 1 120px; min-width: 120px; padding: var(--sp-4) var(--sp-3); text-align: center;
  background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pf-lifecycle-step:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.pf-lifecycle-step .pf-step-num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.pf-lifecycle-step .pf-step-label { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-0); }
.pf-lifecycle-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-3); width: 28px; flex: 0 0 28px; }
@media (max-width: 900px) { .pf-lifecycle-track { flex-direction: column; } .pf-lifecycle-arrow { width: 100%; height: 20px; transform: rotate(90deg); } }

/* ---- One Platform capability groups ---- */
.pf-domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
@media (max-width: 980px) { .pf-domain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pf-domain-grid { grid-template-columns: 1fr; } }
.pf-domain-card { padding: var(--sp-5); }
.pf-domain-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: var(--accent-bg); color: var(--accent-strong); margin-bottom: var(--sp-3);
}
.pf-domain-card ul { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pf-domain-card li { font-size: 13px; color: var(--text-2); display: flex; align-items: baseline; gap: 8px; }
.pf-domain-card li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* ---- Before / After CARGOER comparison ---- */
.pf-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-6); }
@media (max-width: 780px) { .pf-compare-grid { grid-template-columns: 1fr; } }
.pf-compare-col { border-radius: var(--radius-md); padding: var(--sp-5); border: 1px solid var(--border-1); }
.pf-compare-before { background: var(--surface-1); }
.pf-compare-after { background: linear-gradient(160deg, var(--accent-bg), var(--surface-1) 60%); border-color: var(--accent-border); }
.pf-compare-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: var(--sp-4); }
.pf-compare-after h4 { color: var(--accent-strong); }
.pf-compare-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pf-compare-col li { font-size: 13.5px; color: var(--text-1); display: flex; align-items: flex-start; gap: 10px; }
.pf-compare-before li::before { content: "–"; color: var(--text-3); flex: 0 0 auto; }
.pf-compare-after li::before { content: "✓"; color: var(--accent-strong); flex: 0 0 auto; font-weight: 700; }

/* ---- Automation Center: event -> rule -> action ---- */
.pf-automation-flow { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.pf-automation-node {
  flex: 1 1 160px; min-width: 150px; padding: var(--sp-4); text-align: center; border-radius: var(--radius-md);
  background: var(--surface-1); border: 1px solid var(--border-1);
}
.pf-automation-node .pf-node-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 6px; }
.pf-automation-node .pf-node-label { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-0); }
.pf-automation-arrow { color: var(--text-3); flex: 0 0 20px; }
@media (max-width: 860px) { .pf-automation-flow { flex-direction: column; } .pf-automation-arrow { transform: rotate(90deg); } }
.pf-automation-examples { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 780px) { .pf-automation-examples { grid-template-columns: 1fr; } }
.pf-automation-example { padding: var(--sp-4); background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md); font-size: 13px; }
.pf-automation-example .pf-ex-when { color: var(--text-3); }
.pf-automation-example .pf-ex-then { color: var(--text-0); font-weight: 600; margin-top: 4px; }

/* ---- AI for Logistics ---- */
.pf-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; margin-top: var(--sp-6); }
@media (max-width: 900px) { .pf-ai-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }
.pf-ai-points { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.pf-ai-point { display: flex; gap: 12px; align-items: flex-start; }
.pf-ai-point-icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--accent-bg); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; }
.pf-ai-point p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.pf-ai-point strong { color: var(--text-0); }
.pf-ai-mock {
  border-radius: var(--radius-lg); border: 1px solid var(--border-2); background: var(--surface-1);
  box-shadow: var(--shadow-elevated); overflow: hidden;
}
.pf-ai-mock-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-1); background: var(--surface-2); }
.pf-ai-mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.pf-ai-mock-title { font-size: 11px; color: var(--text-3); margin-left: 4px; }
.pf-ai-mock-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.pf-ai-bubble { max-width: 82%; padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; }
.pf-ai-bubble-user { align-self: flex-end; background: var(--accent); color: var(--on-accent); }
.pf-ai-bubble-ai { align-self: flex-start; background: var(--surface-3); color: var(--text-1); border: 1px solid var(--border-1); }

/* ---- Customer experience flow ---- */
.pf-cx-flow { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-6); max-width: 560px; }
.pf-cx-step { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; }
.pf-cx-step-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: var(--accent-bg); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; }
.pf-cx-step-label { font-size: 14.5px; color: var(--text-0); font-weight: 500; }
.pf-cx-connector { width: 1px; height: 20px; background: var(--border-2); margin-left: 19px; }

/* ---- Industries ---- */
.pf-industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
@media (max-width: 980px) { .pf-industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pf-industries-grid { grid-template-columns: 1fr; } }
.pf-industry-card { text-align: center; padding: var(--sp-5) var(--sp-4); }
.pf-industry-card .pf-domain-icon { margin: 0 auto var(--sp-3); }

/* ---- Product Packages ---- */
.pf-packages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); align-items: stretch; }
@media (max-width: 1100px) { .pf-packages-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pf-packages-grid { grid-template-columns: 1fr; } }
.pf-package-card { display: flex; flex-direction: column; padding: var(--sp-5); position: relative; }
.pf-package-card.pf-package-featured { border-color: var(--accent-border); background: linear-gradient(165deg, var(--accent-bg), var(--surface-1) 55%); }
.pf-package-featured-tag { position: absolute; top: -11px; left: var(--sp-5); background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 3px; }
.pf-package-card h3 { font-size: 19px; margin-bottom: 4px; }
.pf-package-card .pf-package-desc { font-size: 12.5px; color: var(--text-2); min-height: 78px; }
.pf-package-card ul { list-style: none; margin: var(--sp-4) 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pf-package-card li { font-size: 12.5px; color: var(--text-1); display: flex; align-items: baseline; gap: 8px; }
.pf-package-card li::before { content: "✓"; color: var(--accent-strong); font-weight: 700; flex: 0 0 auto; }
.pf-package-card .btn { margin-top: auto; }

/* ---- Generic CTA band (also used on Packages page) ---- */
.pf-cta-band { background: var(--gradient-hero); border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); padding: var(--sp-8) 0; text-align: center; }
.pf-cta-band h2 { margin-bottom: var(--sp-3); }
.pf-cta-band p { max-width: 560px; margin: 0 auto var(--sp-5); }
.pf-cta-band .pf-hero-actions { justify-content: center; }

/* ===================== Demo Access Gate (Phase 8) =====================
   Visual/UX pass only, on top of components/DemoAccessGate.js's existing
   request -> code -> personas flow — no change to that flow's logic, API
   calls, or session handling. */
.demo-gate-intro { padding: 28px; text-align: center; max-width: 520px; margin: 0 auto; }
.demo-gate-intro-icon {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  margin: 0 auto; border-radius: 50%; background: var(--accent-bg); color: var(--accent-strong);
  border: 1px solid var(--accent-border);
}
/* Once a code has been verified, swap the badge to the same "success"
   language used by .confirmation-icon (Ok/Success color, not accent) —
   a small but real signal that this state is a completed step, not just
   another prompt. */
.demo-gate-intro-icon.is-ready { background: var(--success-bg); color: var(--status-available); border-color: var(--success-border); }

/* Inline alert row — request/verify/session errors (bad code, expired
   session, network failure). Same danger tokens as .badge-danger/
   .toast.error, just sized for a modal body rather than a corner toast. */
.demo-gate-alert {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 10px 12px;
  background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-sm);
  color: var(--danger); font-size: 13px; line-height: 1.4;
}
.demo-gate-alert svg { flex-shrink: 0; margin-top: 1px; }

/* 5-digit access-code field — large, evenly spaced, monospaced digits
   with a soft accent glow on focus, so it reads as a distinct "enter a
   code" moment rather than a generic text input. */
.demo-gate-code-input {
  font-family: var(--font-mono); font-size: 26px; font-weight: 500; letter-spacing: 10px;
  text-align: center; padding-left: 10px; /* optically re-centers the trailing letter-spacing gap */
}

/* Persona picker rows — .card.card-hover already supplies the hover
   lift/shadow (components.css); this just adds the icon rail + disabled
   state for "another persona is currently entering". */
.demo-gate-persona {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
}
.demo-gate-persona:disabled { opacity: 0.55; cursor: default; transform: none !important; }
.demo-gate-persona-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 50%; background: var(--accent-bg); color: var(--accent-strong);
}
.demo-gate-persona-body { min-width: 0; }