/* ==========================================================================
   ThePeely — shared design system
   Bright. Clever. Minimal. Confident.
   ========================================================================== */

:root {
  --yellow: #FFCC29;
  --yellow-dark: #F2B705;
  --white: #FFFFFF;
  --off-white: #FAF9F6;
  --charcoal: #1C1C1E;
  --charcoal-soft: #3A3A3C;
  --green: #8FBF6B;
  --green-dark: #3F6829;
  --gray: #6B6B70;
  --border: #EDEBE4;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 8px rgba(28, 28, 30, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 28, 30, 0.10);
  --shadow-lg: 0 20px 50px rgba(28, 28, 30, 0.14);

  --max-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--off-white);
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

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

section { padding: 96px 0; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }

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

.lede {
  font-size: 1.25rem;
  color: var(--charcoal-soft);
  max-width: 640px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: rgba(143, 191, 107, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

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

.btn-primary {
  background: var(--charcoal);
  color: var(--white);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: #000;
}

.btn-yellow {
  background: var(--yellow);
  color: var(--charcoal);
}
.btn-yellow:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 204, 41, 0.45);
  background: var(--yellow-dark);
}

.btn-outline {
  background: transparent;
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.btn-outline:hover {
  background: var(--charcoal);
  color: var(--white);
}

.btn-sm { padding: 10px 20px; font-size: 0.9rem; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--charcoal);
}

.brand img { width: 34px; height: 34px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--charcoal-soft);
  position: relative;
  padding: 4px 0;
}

.nav-links a.active,
.nav-links a:hover {
  color: var(--charcoal);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: var(--yellow);
  border-radius: 3px;
}

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

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  margin: 5px 0;
  border-radius: 2px;
}

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 32px 24px;
    border-bottom: 1px solid var(--border);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 0; width: 100%; }
  .nav-toggle { display: block; }
  .nav-cta .btn { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 60px;
  position: relative;
  overflow: hidden;
}

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

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-taglines {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 32px;
}

.pill {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal-soft);
}

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

.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-art .blob {
  position: absolute;
  width: 420px;
  height: 420px;
  background: var(--yellow);
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
  opacity: 0.35;
  filter: blur(2px);
}

.hero-art img {
  width: 260px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 30px rgba(28,28,30,0.15));
}

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

@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
  /* App icons are stroke-only SVGs that inherit this colour. */
  color: var(--charcoal);
}
.card-icon svg { display: block; }
.card:hover .card-icon { background: var(--yellow-dark); }

.card-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.badge-live { background: rgba(143, 191, 107, 0.18); color: var(--green-dark); }
.badge-soon { background: rgba(28,28,30,0.06); color: var(--charcoal-soft); }

.card-link {
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--charcoal);
}
.card-link svg { transition: transform 0.15s ease; }
.card:hover .card-link svg { transform: translateX(4px); }

/* ---------- Section variants ---------- */
.section-dark {
  background: var(--charcoal);
  color: var(--white);
}
.section-dark h2, .section-dark p { color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.72); }

.section-yellow {
  background: var(--yellow);
}
.section-yellow p { color: rgba(28,28,30,0.75); }

/* ---------- Review / testimonial cards ---------- */
.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.review-stars { color: var(--yellow-dark); font-size: 0.95rem; margin-bottom: 12px; letter-spacing: 2px; }
.review-quote { font-size: 0.98rem; line-height: 1.55; color: var(--charcoal); flex-grow: 1; margin-bottom: 16px; }
.review-attrib { font-size: 0.85rem; color: var(--gray); font-weight: 600; }
.review-attrib span { display: block; font-weight: 400; color: var(--gray); font-size: 0.8rem; margin-top: 2px; }
.review-disclaimer {
  font-size: 0.82rem;
  color: var(--gray);
  font-style: italic;
  text-align: center;
  max-width: 620px;
  margin: -32px auto 40px;
}

.section-header {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-header.left { margin: 0 0 56px; text-align: left; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

.stat-row {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.stat-num { font-size: 2rem; font-weight: 700; }
.stat-label { font-size: 0.85rem; color: var(--gray); }

.swatches { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.swatch {
  width: 84px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--charcoal-soft);
}
.swatch-color {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  border: 1px solid var(--border);
}

.trait-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.trait {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-weight: 600;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  color: var(--white);
}
.cta-banner h2 { color: var(--white); }
.cta-banner p { color: rgba(255,255,255,0.7); max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; gap: 16px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .cta-banner { padding: 40px 24px; }
  section { padding: 64px 0; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 56px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray);
  margin-bottom: 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--charcoal-soft); font-size: 0.95rem; }
.footer a:hover { color: var(--charcoal); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--gray);
}

/* ---------- Contact form ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.98rem;
  background: var(--off-white);
  color: var(--charcoal);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--yellow-dark);
  box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.35);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 120px; }

.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 28px;
}
.contact-info-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 64px 0 48px;
  text-align: center;
}
.page-hero .lede { margin: 0 auto; text-align: center; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* =====================================================================
   MOBILE — marketing pages
   The comparison and store pages carry wide tables and dense card
   grids that were built desktop-first. This makes them behave on a
   phone, which is where a lot of first visits land.
===================================================================== */
@media (max-width: 760px) {
  /* Wide comparison tables get a horizontal scroll rather than
     forcing the whole page sideways. */
  .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: normal;
  }
  .compare-table th, .compare-table td {
    padding: 10px 10px;
    font-size: 0.86rem;
    min-width: 130px;
  }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Hero and headings: clamp() keeps these readable without
     overflowing a narrow screen. */
  .hero { padding: 48px 0 56px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .lede { font-size: 1rem; }
  .page-hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }

  /* Stacked CTAs are easier to hit than two side by side. */
  .hero-actions, .cta-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }

  .card { padding: 22px; }
  .stat-row { gap: 24px; }
  .container { padding-left: 16px; padding-right: 16px; }

  /* Tap targets on nav and pills */
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .pill { min-height: 36px; display: inline-flex; align-items: center; }

  /* Long word-break protection for URLs and emails in the footer */
  .footer a, .footer p { overflow-wrap: anywhere; }
}

/* Nobody should have to pinch-zoom to read body text. */
@media (max-width: 400px) {
  body { font-size: 0.97rem; }
  .container { padding-left: 14px; padding-right: 14px; }
}

/* =====================================================================
   STORE — product grid
   Retail listing layout rather than marketing cards. Three across on
   desktop. Every tile is one link, and the price block is pinned to the
   bottom so prices align across a row no matter how long the
   description runs — that alignment is what makes a grid scannable.
===================================================================== */
.store-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}

.store-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.store-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--yellow-dark);
}

.sc-thumb {
  width: 100%;
  height: 96px;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--yellow) 0%, #FFE08A 100%);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.sc-thumb svg { width: 40px; height: 40px; }
.store-card:hover .sc-thumb { background: linear-gradient(160deg, var(--yellow-dark) 0%, var(--yellow) 100%); }

/* flex:1 pushes the price block down, keeping footers level. */
.sc-body { flex: 1; }

.sc-title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
}

.sc-desc {
  font-size: 0.86rem;
  color: var(--charcoal-soft);
  line-height: 1.5;
  margin: 0 0 16px;
  /* Clamp to three lines so one wordy description can't make its tile
     taller than its neighbours. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sc-foot { margin-top: auto; }

.sc-price {
  display: flex;
  align-items: baseline;
  gap: 1px;
  color: var(--charcoal);
}
.sc-currency { font-size: 0.9rem; font-weight: 700; align-self: flex-start; margin-top: 4px; }
.sc-amount { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.sc-per { font-size: 0.85rem; font-weight: 500; color: var(--gray); }

.sc-trial {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--green-dark);
  margin-top: 3px;
}

.sc-cta {
  display: block;
  text-align: center;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--charcoal);
  font-weight: 700;
  font-size: 0.88rem;
  transition: background 0.15s ease;
}
.store-card:hover .sc-cta { background: var(--charcoal); color: var(--white); }

/* Two across on tablets, two on phones (a single column makes 35 tiles
   an endless scroll), one on the narrowest screens. */
@media (max-width: 900px) {
  .store-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .store-grid { gap: 12px; }
  .store-card { padding: 16px; }
  .sc-thumb { height: 72px; margin-bottom: 12px; }
  .sc-thumb svg { width: 32px; height: 32px; }
  .sc-title { font-size: 0.94rem; }
  .sc-desc { font-size: 0.8rem; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 12px; }
  .sc-amount { font-size: 1.45rem; }
  .sc-cta { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 400px) {
  .store-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   PRODUCTS — grid widths + mobile cards
   These replace inline grid-template-columns that used to sit on the
   markup. Inline styles beat media queries, so those sections stayed
   multi-column on phones no matter what the breakpoints said.
===================================================================== */
.grid-narrow { max-width: 640px; margin: 0 auto; }
.grid-mid    { max-width: 1080px; margin: 0 auto; }
.grid-wide   { max-width: 1280px; margin: 0 auto; }

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

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* --- Mobile product cards ----------------------------------------- */
@media (max-width: 640px) {
  /* Two across rather than one. Thirty-six apps in a single column is
     a scroll nobody finishes. */
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .grid-narrow, .grid-mid, .grid-wide { max-width: 100%; }

  .card { padding: 16px; border-radius: 12px; }

  .card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
  }
  .card-icon svg { width: 22px; height: 22px; }

  .card-badge {
    font-size: 0.62rem;
    padding: 3px 8px;
    margin-bottom: 8px;
    /* Category badges wrap awkwardly in a narrow tile. */
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card h3 { font-size: 0.92rem; margin-bottom: 6px; line-height: 1.3; }

  .card p {
    font-size: 0.79rem;
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Price is the decision-maker — keep it fully visible and give it
     more weight than the description it sits under. */
  .card .card-price {
    font-size: 0.76rem !important;
    font-weight: 600;
    color: var(--charcoal) !important;
    margin-top: 0 !important;
    margin-bottom: 10px;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
    overflow: visible;
  }

  .card-link {
    font-size: 0.8rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Hover lift is meaningless on touch and makes taps feel laggy. */
  .card:hover { transform: none; }

  /* Section rhythm: 13 sections is a lot of vertical space to burn. */
  section { padding: 44px 0; }
  .section-header { margin-bottom: 20px; }
  .section-header h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .section-header p { font-size: 0.9rem; }

  /* The category jump-links become a horizontal swipe strip instead of
     nine rows of stacked pills pushing content off the screen. */
  .pill-strip {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .pill-strip::-webkit-scrollbar { display: none; }
  .pill-strip .pill { flex: 0 0 auto; font-size: 0.78rem; padding: 8px 14px; }
}

@media (max-width: 380px) {
  .grid { gap: 10px; }
  .card { padding: 13px; }
  .card h3 { font-size: 0.86rem; }
  .card p { font-size: 0.75rem; -webkit-line-clamp: 2; line-clamp: 2; }
}