/*
  Orbit Loyalty — shared stylesheet
  Colour values below were sampled directly from the swatches in the
  supplied logo file (Orbit Loyalty - Logo 1-1.pdf), not chosen freehand.
*/

:root {
  /* Brand colours, extracted from the logo file swatches */
  --color-navy: #2a4982;
  --color-navy-dark: #1c3257;
  --color-cyan: #73bdcd;
  --color-cyan-light: #e4f2f5;
  --color-black: #000205;
  --color-charcoal: #323433;
  --color-grey: #5c5f5d;

  /* Supporting neutrals, not from the logo, used only for backgrounds and hairlines */
  --color-bg: #ffffff;
  --color-bg-soft: #f5f7fa;
  --color-border: #e2e6ea;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max-width: 1180px;
  --radius: 10px;
  --shadow-soft: 0 10px 30px rgba(20, 30, 50, 0.08);
  --shadow-lift: 0 18px 40px rgba(20, 30, 50, 0.14);
}

/* Reset */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-charcoal);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

ul {
  margin: 0;
  padding: 0;
}

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

h1, h2, h3, h4 {
  color: var(--color-black);
  line-height: 1.25;
  margin: 0 0 16px;
}

h1 {
  font-size: clamp(2.1rem, 4vw, 3rem);
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 16px;
  color: var(--color-charcoal);
}

.section {
  padding: 88px 0;
}

.section-soft {
  background: var(--color-bg-soft);
}

.section-navy {
  background: var(--color-navy-dark);
  color: #fff;
}

.section-navy h2,
.section-navy h3 {
  color: #fff;
}

.section-navy p {
  color: #d7dfec;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.section-navy .eyebrow {
  color: var(--color-cyan);
}

.section-head {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head.align-left {
  margin: 0 0 48px;
  text-align: left;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--color-navy);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-navy-dark);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.btn-outline:hover {
  background: var(--color-navy);
  color: #fff;
}

.section-navy .btn-outline,
.hero .btn-outline {
  border-color: #fff;
  color: #fff;
}

.section-navy .btn-outline:hover,
.hero .btn-outline:hover {
  background: #fff;
  color: var(--color-navy-dark);
}

.btn-cyan {
  background: var(--color-cyan);
  color: var(--color-black);
}

.btn-cyan:hover {
  background: #5aa9bc;
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.btn-block {
  width: 100%;
}

/* ---------------------------------- */
/* Header / navigation                */
/* ---------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.site-logo img {
  height: 36px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links a {
  display: inline-block;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-charcoal);
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-navy);
  background: var(--color-cyan-light);
}

.nav-login {
  margin-left: 12px;
}

.nav-login .btn {
  padding: 10px 22px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  margin: 0 auto;
  background: var(--color-charcoal);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------- */
/* Hero                                */
/* ---------------------------------- */

.hero {
  position: relative;
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 55%, #2e5390 100%);
  color: #fff;
  overflow: hidden;
}

.hero::after {
  /* Subtle orbit ring motif, purely decorative */
  content: "";
  position: absolute;
  top: 50%;
  right: -180px;
  width: 560px;
  height: 560px;
  border: 2px solid rgba(115, 189, 205, 0.25);
  border-radius: 50%;
  transform: translateY(-50%) rotate(-18deg);
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -260px;
  width: 760px;
  height: 760px;
  border: 1px solid rgba(115, 189, 205, 0.12);
  border-radius: 50%;
  transform: translateY(-50%) rotate(-18deg);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  /* Vertical padding only. A shorthand like "96px 0" would wipe out the
     container's 24px side padding and push hero content to the screen edge. */
  padding-top: 96px;
  padding-bottom: 96px;
}

.hero-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-cyan);
  margin-bottom: 18px;
}

.hero h1 {
  color: #fff;
  margin-bottom: 20px;
}

.hero p {
  color: #d7dfec;
  font-size: 1.1rem;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero-art {
  position: relative;
}

/* ---------------------------------- */
/* Placeholder image blocks            */
/* ---------------------------------- */

/*
  These blocks stand in for real photography. Swap the element for an
  <img> tag once approved stock or brand photography is available.
  Keep the aspect ratio classes so layout does not shift.
*/
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--color-bg-soft) 0%, #e8edf3 100%);
  border: 1px dashed #b9c3cf;
  border-radius: var(--radius);
  color: var(--color-grey);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 24px;
  min-height: 220px;
}

.img-placeholder span {
  max-width: 220px;
}

.ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.ratio-1-1 {
  aspect-ratio: 1 / 1;
}

/* Real photography replacing a placeholder block uses the same ratio
   classes, but needs object-fit to crop into the box instead of stretching. */
img.ratio-16-9,
img.ratio-4-3,
img.ratio-1-1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.hero-art .img-placeholder {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(115, 189, 205, 0.15) 100%);
  border-color: rgba(255, 255, 255, 0.35);
  color: #e4f2f5;
  min-height: 340px;
  border-radius: 16px;
}

/* ---------------------------------- */
/* Intro / explainer section           */
/* ---------------------------------- */

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Spacing for an intro-grid used mid-section, between two other blocks
   rather than as a section's only content. */
.intro-grid-spaced {
  margin: 72px 0;
}

/*
  Grid items default to min-width: auto, which lets long unbreakable
  content (like the uppercase, letter-spaced eyebrow labels) force a
  track wider than its container. Resetting min-width to 0 lets these
  items shrink and wrap normally instead of overflowing on narrow screens.
*/
.hero-inner > *,
.intro-grid > *,
.contact-grid > *,
.feature-grid > *,
.pricing-tiers > *,
.pricing-details-grid > *,
.value-grid > *,
.steps > *,
.footer-grid > * {
  min-width: 0;
}

/* ---------------------------------- */
/* Strengths / feature grid            */
/* ---------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.feature-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 24px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.feature-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-3px);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-cyan-light);
  border: 2px solid var(--color-cyan);
  margin-bottom: 20px;
  position: relative;
}

.feature-icon::after {
  /* Small orbiting dot, echoes the logo mark */
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-navy);
  top: -2px;
  right: 2px;
}

.feature-card h3 {
  margin-bottom: 10px;
}

.feature-card p {
  color: var(--color-grey);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ---------------------------------- */
/* How it works / steps                */
/* ---------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 8px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ---------------------------------- */
/* Pricing tiers (home preview + services page) */
/* ---------------------------------- */

/*
  Pricing is now a single plan with the same feature set for every
  retail group. What differs is the monthly price, set by the store's
  average monthly turnover across three tiers. The three tier cards use
  a light-to-dark navy progression so the step up between tiers reads
  visually, without introducing any colour outside the brand palette.
*/
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pricing-tier-card {
  border-radius: var(--radius);
  padding: 32px 28px;
  color: #fff;
}

.pricing-tier-card.tier-small {
  background: linear-gradient(135deg, #4e83a7 0%, #3d6c8c 100%);
}

.pricing-tier-card.tier-medium {
  background: linear-gradient(135deg, var(--color-navy) 0%, #223c6c 100%);
}

.pricing-tier-card.tier-large {
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, #142442 100%);
}

.tier-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.9;
  margin-bottom: 16px;
}

.tier-price {
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.tier-price-period {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.85;
}

.tier-threshold {
  color: #fff;
  font-size: 0.88rem;
  opacity: 0.85;
  margin-bottom: 0;
}

.pricing-details-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}

.details-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  height: 100%;
}

.details-panel h3 {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--color-navy);
}

.check-list {
  list-style: none;
  column-count: 2;
  column-gap: 32px;
}

.check-list li {
  break-inside: avoid;
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  font-size: 0.92rem;
  color: var(--color-charcoal);
}

.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--color-navy);
  font-weight: 700;
}

.addon-list {
  list-style: none;
}

.addon-list li {
  position: relative;
  padding-left: 26px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.addon-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.addon-list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-navy);
  font-weight: 700;
  font-size: 1.1rem;
}

.addon-list strong {
  display: block;
  color: var(--color-black);
  margin-bottom: 4px;
}

.coming-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: var(--color-cyan-light);
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

.addon-list p {
  font-size: 0.9rem;
  color: var(--color-grey);
  margin-bottom: 0;
}

.pricing-footnote {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-grey);
  margin-top: 24px;
}

.pricing-cta-note {
  text-align: center;
  margin-top: 32px;
}

/* ---------------------------------- */
/* About page specifics                */
/* ---------------------------------- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value-card {
  padding: 28px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-border);
}

/* ---------------------------------- */
/* Contact page                        */
/* ---------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}

.contact-form {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 36px;
}

.form-row {
  margin-bottom: 20px;
}

.form-row label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--color-black);
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-charcoal);
  background: var(--color-bg-soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(42, 73, 130, 0.14);
  background: #fff;
}

.form-row textarea {
  resize: vertical;
  min-height: 140px;
}

.form-status {
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-navy);
  display: none;
}

.form-status.is-visible {
  display: block;
}

.contact-details {
  background: var(--color-navy-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 36px;
}

.contact-details h3 {
  color: #fff;
}

.contact-detail-row {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
  align-items: flex-start;
}

.contact-detail-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-cyan);
  flex-shrink: 0;
}

.contact-detail-row div p {
  color: #d7dfec;
  margin-bottom: 2px;
}

/* ---------------------------------- */
/* Login page                          */
/* ---------------------------------- */

.login-wrap {
  min-height: calc(100vh - 76px - 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  background: var(--color-bg-soft);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.login-card .site-logo {
  justify-content: center;
  display: flex;
  margin-bottom: 8px;
}

.login-card .site-logo img {
  height: 34px;
}

.login-card h1 {
  font-size: 1.5rem;
  margin-top: 20px;
}

.login-card p.lede {
  color: var(--color-grey);
  font-size: 0.92rem;
  margin-bottom: 28px;
}

.login-form .form-row {
  text-align: left;
}

.login-footnote {
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--color-grey);
}

.login-footnote a {
  color: var(--color-navy);
  font-weight: 600;
}

/* ---------------------------------- */
/* CTA band                            */
/* ---------------------------------- */

.cta-band {
  text-align: center;
}

.cta-band h2 {
  margin-bottom: 16px;
}

.cta-band p {
  max-width: 560px;
  margin: 0 auto 32px;
}

.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------- */
/* Footer                              */
/* ---------------------------------- */

.site-footer {
  background: var(--color-black);
  color: #cfd4d8;
  padding: 64px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand img {
  height: 32px;
  margin-bottom: 16px;
}

.footer-brand p {
  color: #9aa1a7;
  font-size: 0.92rem;
  max-width: 320px;
}

.footer-col h4 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: #b7bcc0;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--color-cyan);
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #3a3d3f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #cfd4d8;
}

.footer-social a:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

.footer-bottom {
  border-top: 1px solid #26292b;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: #7d8388;
}

/* ---------------------------------- */
/* Responsive                          */
/* ---------------------------------- */

@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .intro-grid,
  .contact-grid,
  .pricing-details-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid,
  .pricing-tiers {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps,
  .value-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 24px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav-links a {
    display: block;
    padding: 14px 12px;
  }

  .nav-login {
    margin-left: 0;
    margin-top: 12px;
  }

  .nav-login .btn {
    width: 100%;
  }

  .nav-toggle {
    display: flex;
  }

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

  .check-list {
    column-count: 1;
  }

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

  .section {
    padding: 64px 0;
  }

  /* Hero */
  .hero-inner {
    padding-top: 40px;
    padding-bottom: 48px;
  }

  .hero-eyebrow {
    letter-spacing: 0.1em;
    line-height: 1.5;
  }

  .hero p {
    font-size: 1.02rem;
  }

  .hero-actions {
    gap: 12px;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
    white-space: nowrap;
    padding-left: 18px;
    padding-right: 18px;
  }

  /* 44px is the smallest comfortable thumb target */
  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  /* iPhones zoom the whole page in when a field under 16px is tapped */
  .form-row input,
  .form-row textarea {
    font-size: 16px;
  }

  /* Give forms and cards more usable width on a narrow screen */
  .contact-form,
  .contact-details {
    padding: 24px;
  }

  .login-card {
    padding: 28px 24px;
  }

  .contact-detail-row div p {
    overflow-wrap: anywhere;
  }

  .value-card,
  .details-panel {
    padding: 24px;
  }
}