/*
 * Phonlelo human-first visual system
 * A practical, consistent retail UI without template-like decorative effects.
 */
:root {
  --human-red: #cf1721;
  --human-red-dark: #a50f18;
  --human-ink: #1f2328;
  --human-muted: #626a73;
  --human-line: #e2e5e9;
  --human-soft: #f6f7f8;
  --human-white: #fff;
  --human-shadow: 0 8px 28px rgba(31, 35, 40, .08);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  color: var(--human-ink);
  background: var(--human-white);
}

h1,
h2,
h3,
h4,
.hero h1,
.hero-copy h1,
.catalog-hero h1,
.services-hero h1,
.directory-heading h2,
.simple-journey h2,
.service-contact h2,
.owner-story h2,
.home-offer-copy h2,
.social-heading h2,
.service-directory-intro h2,
.section-heading h2,
.why-title h2,
.trade-copy h2,
.flow-content h2 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.hero h1,
.hero-copy h1,
.catalog-hero h1,
.services-hero h1 {
  font-size: clamp(46px, 5.5vw, 78px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.section-heading h2,
.why-title h2,
.trade-copy h2,
.directory-heading h2,
.simple-journey h2,
.service-contact h2,
.owner-story h2,
.home-offer-copy h2,
.social-heading h2,
.service-directory-intro h2 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.eyebrow,
.topline,
.topbar,
.announcement,
.catalog-copy .brand,
.catalog-toolbar label,
.service-topline,
.service-brand small,
.service-help small,
.owner-stamp small,
.promo-poster > div > span,
.promo-poster b,
.home-shop-photo figcaption,
.admin-brand small,
th,
.stat-card span {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 600;
}

.eyebrow {
  font-size: 12px;
  line-height: 1.4;
}

.eyebrow::before,
.scribble,
.orbit,
.floating-tag,
.service-number,
.step-grid article > span,
.wholesale-points b,
.simple-journey li > span,
.editor-card-head > span {
  display: none !important;
}

.hero-art::after,
.services-hero-art::before,
.trade-art::before,
.search-overlay > div::before {
  content: none !important;
  display: none !important;
}

.button,
.primary-cta,
.store-link,
.quote-button,
.quick-add,
.flow-submit,
.primary,
.login-form button,
.contact-actions a,
.secondary,
.admin-preview-link {
  border-radius: 8px;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.button:hover,
.primary-cta:hover,
.service-card:hover,
.catalog-card:hover,
.market-benefits > a:hover,
.market-benefits > button:hover,
.social-channel-row > a:hover,
.promo-poster:hover img,
.product-card:hover .real-phone-photo,
.home-offer-poster-wrap:hover .home-offer-poster {
  transform: none;
}

.button-dark,
.primary-cta,
.store-link,
.quote-button,
.flow-submit,
.primary,
.login-form button {
  background: var(--human-red);
  color: #fff;
}

.button-dark:hover,
.primary-cta:hover,
.store-link:hover,
.quote-button:hover,
.flow-submit:hover,
.primary:hover,
.login-form button:hover {
  background: var(--human-red-dark);
}

.hero {
  min-height: 620px;
  background: #fff;
  border-bottom: 1px solid var(--human-line);
}

.hero-copy {
  padding-top: 80px;
  padding-bottom: 80px;
}

.hero-art {
  min-height: 620px;
  background: var(--human-soft);
}

.hero-phone-photo,
.real-phone-cover,
.owner-banner > img,
.home-shop-photo img,
.trade-photo,
.services-hero-art > img,
.promo-poster {
  border-radius: 12px;
}

.hero-phone-photo {
  transform: none;
  border: 0;
  box-shadow: var(--human-shadow);
}

.brand-strip {
  border-bottom: 1px solid var(--human-line);
}

.market-benefits {
  background: var(--human-soft);
  gap: 14px;
}

.market-benefits > a,
.market-benefits > button,
.product-card,
.why-card,
.catalog-card,
.catalog-loading,
.catalog-empty,
.service-card,
.social-channel-row > a,
.request-card,
.stat-card,
.panel,
.table-wrap,
.homepage-editor-card {
  border: 1px solid var(--human-line);
  border-radius: 12px;
  box-shadow: none;
}

.market-benefits > a,
.market-benefits > button {
  min-height: 116px;
}

.benefit-icon,
.service-icon,
.why-grid b,
.step-icon {
  border-radius: 10px;
}

.shop-section,
.journal,
.social-showcase,
.owner-showcase,
.service-directory,
.brand-section,
.steps,
.popular,
.why,
.stories,
.faq {
  padding-top: 80px;
  padding-bottom: 80px;
}

.product-visual,
.catalog-image {
  background: #f3f4f5;
}

.why-section,
.simple-journey {
  background: #252a30;
}

.why-card {
  background: transparent;
}

.trade-section,
.home-offer-section,
.services-hero {
  min-height: 560px;
}

.trade-art,
.home-offer-poster-wrap,
.services-hero-art {
  background: #f3f4f5;
}

.home-offer-poster-wrap {
  background: #f0f1f2;
}

.home-offer-poster {
  filter: none;
}

.owner-banner > img {
  background: #f3f4f5;
  box-shadow: var(--human-shadow);
}

.owner-stamp {
  border-left: 4px solid var(--human-red);
  box-shadow: var(--human-shadow);
}

.social-showcase,
.service-directory,
.service-directory-intro,
.steps,
.why {
  background: var(--human-soft);
}

.promo-poster::after {
  background: linear-gradient(180deg, transparent 38%, rgba(16, 18, 20, .78) 100%);
}

.promo-poster h3 {
  font-size: 30px;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.poster-sell::after {
  background: linear-gradient(180deg, rgba(207, 23, 33, .1), rgba(128, 10, 18, .9));
}

.services-hero {
  background: #fff;
}

.services-hero-copy {
  padding-top: 90px;
  padding-bottom: 90px;
}

.services-hero-art {
  padding: 50px;
}

.services-hero-art > img {
  background: transparent;
  box-shadow: var(--human-shadow);
}

.services-hero-art > div {
  left: 44px;
  bottom: 44px;
  border-left: 4px solid var(--human-red);
  box-shadow: var(--human-shadow);
}

.services-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-buy,
.service-wholesale,
.service-sell,
.service-repair,
.service-accessories,
.service-track {
  grid-column: auto;
}

.service-card {
  min-height: 390px;
  padding: 28px;
  background: #fff;
  color: var(--human-ink);
}

.service-card h3,
.service-buy h3,
.service-wholesale h3 {
  max-width: 100%;
  font-size: clamp(27px, 2.5vw, 38px);
  letter-spacing: -.03em;
  line-height: 1.08;
}

.service-card > p:not(.eyebrow),
.service-buy > p,
.service-wholesale > p,
.service-card > strong,
.service-buy > strong,
.service-wholesale > strong {
  max-width: 100%;
}

.service-card > img {
  right: 8px;
  bottom: 5px;
  width: 42%;
  height: 48%;
  opacity: .16;
}

.service-sell {
  background: #fff5f5;
}

.service-sell .eyebrow,
.service-sell > p:not(.eyebrow) {
  color: var(--human-muted);
}

.service-repair {
  background: #252a30;
  color: #fff;
}

.service-wholesale {
  background: #fffaf3;
}

.service-track {
  background: #f3f7fb;
}

.simple-journey li {
  grid-template-columns: 1fr;
  gap: 6px;
}

.catalog-hero {
  background: #fff;
  border-bottom: 1px solid var(--human-line);
}

.catalog-toolbar {
  background: #252a30;
  border-radius: 12px;
}

.catalog-toolbar input,
.catalog-toolbar select {
  background: #333a43;
}

.catalog-card:hover {
  box-shadow: var(--human-shadow);
}

.catalog-assurance {
  background: #252a30;
  border-radius: 12px;
  overflow: hidden;
}

.sell-hero {
  background: #fff;
  min-height: 620px;
}

.quote-card {
  border: 1px solid var(--human-line);
  box-shadow: var(--human-shadow);
}

.story-grid blockquote {
  border-radius: 10px;
}

.search-overlay {
  background: rgba(245, 246, 247, .98);
}

.search-overlay > div {
  border-radius: 14px;
  border: 1px solid var(--human-line);
  box-shadow: var(--human-shadow);
}

.flow-content,
.modal-card,
.login-card {
  border-radius: 14px;
  box-shadow: var(--human-shadow);
}

.login-screen {
  background: #252a30;
}

.sidebar {
  background: #252a30;
  box-shadow: none;
}

.nav-item.active {
  background: #343b44;
  box-shadow: inset 3px 0 var(--human-red);
}

.admin-main {
  background: var(--human-soft);
}

.admin-main header h1,
.login-card h1,
.stat-card strong {
  letter-spacing: -.025em;
}

.homepage-save-bar {
  border-radius: 10px;
  box-shadow: var(--human-shadow);
}

@media (max-width: 1050px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hero h1,
  .hero-copy h1,
  .catalog-hero h1,
  .services-hero h1 {
    font-size: clamp(38px, 12vw, 54px);
    line-height: 1.04;
  }

  .section-heading h2,
  .why-title h2,
  .trade-copy h2,
  .directory-heading h2,
  .simple-journey h2,
  .service-contact h2,
  .owner-story h2,
  .home-offer-copy h2,
  .social-heading h2,
  .service-directory-intro h2 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .hero,
  .hero-art,
  .sell-hero,
  .services-hero {
    min-height: auto;
  }

  .hero-copy,
  .services-hero-copy {
    padding-top: 54px;
    padding-bottom: 54px;
  }

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

  .service-card {
    min-height: 330px;
  }

  .market-benefits {
    grid-template-columns: 1fr 1fr;
  }

  .shop-section,
  .journal,
  .social-showcase,
  .owner-showcase,
  .service-directory,
  .brand-section,
  .steps,
  .popular,
  .why,
  .stories,
  .faq {
    padding-top: 58px;
    padding-bottom: 58px;
  }
}

@media (max-width: 480px) {
  .market-benefits {
    grid-template-columns: 1fr;
  }

  .market-benefits > a,
  .market-benefits > button {
    min-height: 96px;
  }

  .service-card {
    min-height: 300px;
  }
}