/* Restock marketing site — shared across index.html / how-it-works.html /
   pricing.html. Deep indigo palette per design/BRIEF.md's 25 Jul brand
   change (Woolworths' branding is green; Restock's had to move off it) and
   the "Landing, Account & Data Health" design handoff, cards 9a/9b/10a/10b. */

:root {
  --brand: #37368f;
  --brand-mid: #4a49a5;       /* progress-bar stripe */
  --brand-tint: #e9e9f6;
  --brand-tint-border: #c9c9e6;
  --brand-row: #f6f6fb;       /* highlighted row / proposal bg */
  --ink: #1c1c25;
  --muted: #5d5d69;
  --muted-2: #8e8e9b;
  --page: #fafafc;
  --hairline: #eeeef4;
  --separator: #f2f2f6;
  --checkbox-border: #d9d9e2;
  --secondary-border: #e1e1eb;
  --placeholder: #aeadb9;
  --disabled: #c6c6d4;
  --amber: #dcb35c;
  --dark: #1c1c25;
  --dark-line: #2a2a3a;
  --dark-track: #33334a;
  --on-dark-link: #a3a2e0;
  --dark-muted: #9d9dac;
  --dark-body: #b6b6c6;
}

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

body {
  background: var(--page);
  color: var(--ink);
  font-family: "Outfit", Arial, Helvetica, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.display { font-family: "Space Grotesk", "Outfit", sans-serif; letter-spacing: -0.02em; }

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

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 860px) { .wrap { padding: 0 20px; } }

/* ---------- nav ---------- */

.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
}
.wordmark { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.wordmark span { color: var(--brand); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.nav-link.current { font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--brand); padding-bottom: 2px; }
.nav-link:hover { color: var(--ink); }
.nav-login { font-size: 13.5px; font-weight: 600; color: var(--ink); }
@media (max-width: 860px) {
  .nav-links .nav-link:not(.nav-login) { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block; border-radius: 99px; font-size: 13.5px; font-weight: 600;
  padding: 10px 20px; cursor: pointer; border: none;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { opacity: .92; }
.btn-lg { font-size: 15px; padding: 14px 26px; box-shadow: 0 4px 14px rgba(55, 54, 143, .28); }
.btn-outline { background: #fff; color: var(--ink); border: 1.5px solid var(--secondary-border); font-weight: 500; }
.btn-outline:hover { border-color: var(--brand); }
.btn-tint { background: var(--brand-tint); color: var(--brand); border: 1.5px solid var(--brand-tint-border); }
.btn-tint:hover { opacity: .85; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- generic layout helpers ---------- */

.section { padding: 56px 0; }
.section-bordered { border-top: 1px solid var(--hairline); }
.section-alt { background: #fff; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--brand); }
.h2 { font-family: "Space Grotesk", sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-top: 8px; }
.h1 { font-family: "Space Grotesk", sans-serif; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); text-wrap: balance; }
.lede { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-top: 14px; text-wrap: pretty; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.dot-amber { background: var(--amber); }

.card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 18px;
}

/* ---------- app-mock components (the "TrolleyFill" / checklist / master list previews) ---------- */

.mock {
  background: #fff; border: 1px solid var(--hairline); border-radius: 20px;
  box-shadow: 0 12px 34px rgba(28, 28, 37, .08); padding: 18px 20px;
}
.mock-dark {
  background: var(--dark); border-radius: 20px; padding: 18px 20px;
  box-shadow: 0 12px 34px rgba(28, 28, 37, .18);
}
.mock-head { display: flex; align-items: baseline; justify-content: space-between; }
.mock-title { font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 600; color: var(--ink); }
.mock-dark .mock-title { color: #fff; font-size: 20px; }
.mock-count { font-size: 12.5px; font-weight: 600; color: var(--brand); }
.mock-dark .mock-count { color: var(--on-dark-link); }

.progress-track { margin-top: 12px; height: 8px; border-radius: 99px; background: var(--hairline); overflow: hidden; }
.mock-dark .progress-track { background: var(--dark-track); }
.progress-fill {
  height: 100%; border-radius: 99px;
  background: repeating-linear-gradient(-55deg, var(--brand) 0 10px, var(--brand-mid) 10px 20px);
  background-size: 28px 8px;
  animation: barslide 1s linear infinite;
}
@keyframes barslide { from { background-position: 0 0; } to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .progress-fill { animation: none; background: var(--brand); } }

.mock-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-2); margin-top: 6px; }
.mock-dark .mock-meta { color: var(--dark-muted); }

.mock-rows { margin-top: 10px; display: flex; flex-direction: column; }
.mock-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--separator); }
.mock-dark .mock-row { border-bottom-color: var(--dark-line); }
.mock-row:last-child { border-bottom: none; }
.mock-row .name { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.mock-row .sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.mock-dark .mock-row .name { color: #fff; }
.mock-dark .mock-row .sub { color: var(--dark-muted); }
.mock-row .added { font-size: 11.5px; font-weight: 600; color: var(--brand); flex: none; }
.mock-dark .mock-row .added { color: var(--on-dark-link); }
.mock-row.adding { background: var(--brand-row); margin: 0 -12px; padding: 10px 12px; border-radius: 10px; border-bottom: none; }
.mock-dark .mock-row.adding { background: transparent; margin: 0; padding: 8px 0; }
.mock-row .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; animation: pulsedot 1s ease-in-out infinite; }
.mock-dark .mock-row .pulse { background: var(--on-dark-link); }
@keyframes pulsedot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.mock-row.pending .name, .mock-row.pending .sub { color: var(--placeholder); }
.mock-row.pending .dot-outline { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--disabled); background: #fff; box-sizing: border-box; flex: none; }
.mock-foot { text-align: center; font-size: 11.5px; color: var(--muted-2); margin-top: 10px; border-top: 1px solid var(--separator); padding-top: 10px; }

/* ---------- footer ---------- */

.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; background: var(--dark); }
.site-footer .wordmark { color: #fff; font-size: 17px; }
.site-footer .wordmark span { color: var(--on-dark-link); }
.footer-links { display: flex; gap: 22px; font-size: 12.5px; color: var(--dark-muted); }
@media (max-width: 500px) { .footer-links { gap: 14px; } }