/* ==========================================================================
   PingSorted marketing site — design tokens & base
   Palette and type are the approved PingSorted brand pack, unchanged
   (mocks/branding/pingsorted-branding.md) -- --ps-primary (navy) /
   --ps-secondary (teal) are the same tokens the product app itself
   uses, so the marketing site and the app a visitor signs into
   actually look like the same product. Not reinterpreted or
   restyled for "marketing site" purposes.
   ========================================================================== */

:root {
  --ps-primary: #183153;
  --ps-primary-2: #102640;
  --ps-secondary: #15b79e;
  --ps-secondary-600: #0e8a76;
  --ps-secondary-100: #e3f9f5;
  --ps-white: #ffffff;
  --ps-canvas: #f5f7fa;
  --ps-surface: #ffffff;
  --ps-text: #183153;
  --ps-text-muted: #627286;
  --ps-border: #dde5ec;
  --ps-info: #2563eb;
  --ps-warning: #d97706;
  --ps-danger: #c73737;

  --wa-green: #25d366;

  /* Aliases used throughout this stylesheet, mapped onto the brand
     tokens above so section-by-section styling stays readable. */
  --ink-950: var(--ps-primary-2);
  --ink-900: var(--ps-primary);
  --ink-800: #23426b;
  --ink-700: #3a5c8a;
  --ink-500: var(--ps-text-muted);
  --ink-300: #9fb0c4;
  --ink-100: var(--ps-canvas);

  --accent-600: var(--ps-secondary-600);
  --accent-500: var(--ps-secondary);
  --accent-400: #4fcab5;
  --accent-100: var(--ps-secondary-100);

  --paper: var(--ps-canvas);
  --paper-raised: var(--ps-surface);
  --paper-line: var(--ps-border);

  --ink: var(--ps-text);
  --ink-muted: var(--ps-text-muted);

  --radius-sm: var(--ps-radius, 10px);
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-card: 0 1px 2px rgba(24, 49, 83, 0.05), 0 12px 32px -12px rgba(24, 49, 83, 0.16);
  --shadow-pop: 0 24px 60px -20px rgba(16, 38, 64, 0.4);

  --font-display: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
}

/* Deliberately single-theme: the approved brand pack defines one
   light palette, used identically here and in the product app itself
   -- no dark variant is part of the approved brand, so none is
   improvised. Every color below is still explicit (not inherited from
   the host), so the page renders correctly regardless of the viewer's
   own theme setting. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

p { margin: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* Inline "PingSorted" mentions in running copy -- same brand colours
   as the hero/logo, at body text size (no size bump; that's reserved
   for the hero's own display treatment). A dark-background variant
   exists for the one card heading that sits on --ink-950 (matches the
   real PingSorted-Logo-OnDark.svg's own white-primary/teal-secondary
   treatment rather than using navy-on-navy). */
.brand-ping { color: var(--ink-900); font-weight: 700; }
.brand-sorted { color: var(--accent-600); font-weight: 700; }
.brand-ping-ondark { color: var(--ps-white); font-weight: 700; }
.brand-sorted-ondark { color: var(--accent-400); font-weight: 700; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-600);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--accent-400); outline-offset: 2px; }

.btn-primary {
  background: var(--ink-900);
  color: var(--paper);
  box-shadow: 0 10px 24px -10px rgba(12, 20, 32, 0.55);
}
.btn-primary:hover { background: var(--ink-800); }

.btn-accent {
  background: var(--accent-500);
  color: var(--ps-white);
  box-shadow: 0 10px 24px -8px rgba(21, 183, 158, 0.4);
}
.btn-accent:hover { background: var(--accent-600); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--paper-line);
}
.btn-ghost:hover { border-color: var(--ink-300); }

.btn-lg { padding: 16px 32px; font-size: 16px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* The official PingSorted lockup (icon + wordmark) as a single asset --
   per the approved brand pack, this is never redrawn, recoloured or
   reassembled from parts; only sized. */
.brand-wordmark { display: block; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 14.5px;
  font-weight: 600;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-muted);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); }

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

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 60px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 640px;
  background:
    radial-gradient(560px 360px at 18% 20%, color-mix(in srgb, var(--accent-100) 70%, transparent), transparent 70%),
    radial-gradient(480px 320px at 82% 0%, color-mix(in srgb, var(--ink-100) 65%, transparent), transparent 70%);
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
/* Two-line headline, PING/SORTED highlighted in the brand colours the
   printed table QR card uses -- moderately larger and bolder than the
   surrounding words, not a standalone giant word: on a wide screen
   with nothing filling the gap between them (unlike the card's own
   QR/conversation demo doing that job), keeping them in the same
   sentence at a restrained size difference reads as one connected
   idea instead of two disconnected ones. */
.tagline {
  margin: 22px 0 0;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.word-ping, .word-sorted {
  font-size: 1.2em;
  font-weight: 800;
}
.word-ping { color: var(--ink-900); }
.word-sorted { color: var(--accent-600); }
.whatsapp-icon-inline {
  width: 0.62em;
  height: 0.62em;
  vertical-align: -0.08em;
  margin-left: 2px;
}

.hero-sub {
  margin-top: 22px;
  font-size: 18.5px;
  color: var(--ink-muted);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-note svg { width: 15px; height: 15px; color: var(--accent-500); flex: none; }

.trust-strip {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--paper-line);
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 600;
}
.trust-strip span { display: inline-flex; align-items: center; gap: 7px; }
.trust-strip svg { width: 14px; height: 14px; color: var(--accent-500); }

/* ---------- Phone mockup ---------- */
.phone {
  position: relative;
  width: 320px;
  margin: 0 auto;
  border-radius: 42px;
  background: var(--ink-950);
  padding: 14px;
  box-shadow: var(--shadow-pop);
}
.phone-screen {
  background: #eef1e8;
  border-radius: 30px;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  flex-direction: column;
}
.phone-bar {
  background: var(--wa-green);
  color: #fff;
  padding: 16px 18px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
}
.phone-bar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
}
.phone-bar small { display: block; font-weight: 500; font-size: 11.5px; opacity: 0.85; }
.phone-body {
  flex: 1;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: 14px 14px;
}
.bubble {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.bubble-in {
  background: #fff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.bubble-out {
  background: #d9fdd3;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.bubble-time {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: #7c8a76;
  text-align: right;
}
.phone-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 10px 13px;
  background: #fff;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.phone-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
  animation: bounce 1.2s infinite ease-in-out;
}
.phone-typing i:nth-child(2) { animation-delay: 0.15s; }
.phone-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .phone-typing i { animation: none; }
}

.phone-badge {
  position: absolute;
  right: -22px;
  bottom: -16px;
  background: var(--paper-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}
.phone-badge svg { width: 22px; height: 22px; color: var(--accent-500); flex: none; }

/* ---------- Section shells ---------- */
section { padding: 96px 0; }
.section-head {
  max-width: 640px;
  margin: 0 0 52px;
}
.section-head h2 {
  margin-top: 14px;
  font-size: clamp(28px, 3.2vw, 40px);
}
.section-head p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--ink-muted);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.band { background: var(--paper-raised); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.band-ink { background: var(--ink-950); color: var(--paper); }
.band-ink .eyebrow { color: var(--accent-400); }
.band-ink h2, .band-ink h3 { color: var(--paper); }
.band-ink p { color: color-mix(in srgb, var(--paper) 68%, transparent); }

/* ---------- Problem/solution ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.compare-card {
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--paper-line);
}
.compare-card.bad { background: var(--paper-raised); }
.compare-card.good {
  background: var(--ink-950);
  color: var(--paper);
  border-color: transparent;
  box-shadow: var(--shadow-pop);
}
.compare-card h3 { font-size: 21px; margin-bottom: 4px; }
.compare-card.good h3 { color: var(--paper); }
.compare-figure {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.3;
  margin: 18px 0 6px;
}
.compare-card.bad .compare-figure { color: var(--accent-600); }
.compare-card.good .compare-figure { color: var(--accent-400); }
.compare-figure small { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.compare-card.good .compare-figure small { color: color-mix(in srgb, var(--paper) 65%, transparent); }
.compare-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; font-size: 14.5px; }
.compare-list li { display: flex; gap: 10px; align-items: flex-start; }
.compare-list svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.compare-card.bad .compare-list svg { color: var(--accent-500); }
.compare-card.good .compare-list svg { color: var(--wa-green); }
.compare-card.bad .compare-list span { color: var(--ink-muted); }
.compare-card.good .compare-list span { color: color-mix(in srgb, var(--paper) 88%, transparent); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step-num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-600);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.step-num::before {
  content: counter(step, decimal-leading-zero);
  counter-increment: step;
  font-size: 13px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-600);
  display: grid;
  place-items: center;
}
.step h3 { font-size: 19px; margin-bottom: 10px; }
.step p { color: var(--ink-muted); font-size: 15px; }

/* ---------- Feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.feature-card:hover { transform: translateY(-3px); }
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: var(--ink-950);
  color: var(--accent-400);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 18px; margin-bottom: 9px; }
.feature-card p { font-size: 14.5px; color: var(--ink-muted); }
.feature-card .soon {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--ink-100);
  padding: 4px 9px;
  border-radius: 999px;
}

/* ---------- Who it's for (verticals) ---------- */
.vertical-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.vertical-card {
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
}
.vertical-card.vertical-live {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 1px var(--accent-500), var(--shadow-card);
}
.vertical-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  background: var(--ink-100);
  color: var(--ink-900);
}
.vertical-live .vertical-icon { background: var(--accent-100); color: var(--accent-600); }
.vertical-icon svg { width: 22px; height: 22px; }
.vertical-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.vertical-card p { font-size: 13.5px; color: var(--ink-muted); }
.vertical-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-500);
  color: var(--ps-white);
}
.vertical-tag.soon { background: var(--ink-100); color: var(--ink-500); }

/* ---------- Pilot / honesty section ---------- */
.pilot-card {
  border-radius: var(--radius-lg);
  border: 1px dashed var(--ink-300);
  padding: 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: center;
}
.pilot-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-100);
  color: var(--accent-600);
  display: grid;
  place-items: center;
  flex: none;
}
.pilot-mark svg { width: 26px; height: 26px; }
.pilot-card h3 { font-size: 20px; margin-bottom: 8px; }
.pilot-card p { color: var(--ink-muted); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 4px; }
.faq-item { border-bottom: 1px solid var(--paper-line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-weight: 700;
  font-size: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform 0.2s ease; flex: none; width: 18px; height: 18px; color: var(--accent-500); }
.faq-item[open] summary .chev { transform: rotate(45deg); }
.faq-item p { padding: 0 4px 22px; color: var(--ink-muted); font-size: 15px; max-width: 62ch; }

/* ---------- Final CTA ---------- */
.cta-band {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--ink-950), var(--ink-800));
  color: var(--paper);
  padding: 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 260px at 85% 0%, rgba(255, 107, 61, 0.35), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--paper); font-size: clamp(26px, 3.4vw, 38px); }
.cta-band p { color: color-mix(in srgb, var(--paper) 70%, transparent); margin-top: 14px; font-size: 16.5px; }
.cta-actions { margin-top: 30px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
footer { padding: 64px 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--paper-line);
}
.footer-brand p { margin-top: 14px; color: var(--ink-muted); font-size: 14px; max-width: 32ch; }
.footer-col h4 { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { text-decoration: none; color: var(--ink-muted); font-size: 14.5px; }
.footer-col a:hover { color: var(--ink); }
.footer-legal {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-500);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .phone { margin-top: 40px; }
  .compare, .steps, .feature-grid { grid-template-columns: 1fr; }
  .vertical-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  section { padding: 64px 0; }
  .pilot-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .vertical-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 44px 26px; }

  /* Mobile nav: the toggle button reveals the same nav-links list as a
     full-width dropdown rather than needing a separate markup block. */
  body.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--paper-line);
    padding: 12px 28px 20px;
    box-shadow: var(--shadow-card);
  }
  body.nav-open .nav-links a { padding: 10px 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}