/* Shiftclub landing page — "2A · Redline, flashier" concept (Claude Design
   project 9b1cbad3-2540-4d32-8523-ae257b24d888, "Shiftclub Landing
   Concepts.dc.html", turn 2). Supersedes the earlier "1A · Pit Wall" look
   (gradient chrome + glow accents + a dark feature band, vs. 1A's flat
   red/white treatment) — both phone mockups' own content/layout are
   untouched, only the surrounding chrome changed. Reuses styles.css's
   shared header/footer/tokens/logo treatment for cross-page consistency
   with /privacy and /terms; the .top-bar-flashy/.footer-flashy overrides
   below are scoped to this page only (via extra classes on those shared
   elements) so /privacy and /terms keep their original flat-red treatment.
   Light-only by design — this page does not link dark-mode.css, unlike
   those two. */

.landing-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Overrides styles.css's shared .top-bar (flat --red, 6px) for this page
   only — a gradient sweep instead, matching 2A's header accent bar. */
.top-bar-flashy {
  height: 9px;
  background: linear-gradient(90deg, #8f1912, #e4362a 45%, #8f1912);
}

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 72px 56px 64px;
}

/* Three layered background effects behind the hero copy, matching 2A's
   glow treatment — a soft radial glow, a bright gradient diagonal bar with
   its own glow, and a dark stripe running alongside it. Absolute px values
   (820px wide, -160/-200px offsets) are taken directly from 2A's own
   1180px-wide design canvas, same as 1A's single flat-square accent was —
   these are purely decorative shapes bleeding off past the container
   edge, not layout-critical, so exact proportional scaling isn't needed. */
.hero-radial-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 15%, rgba(179, 38, 30, 0.16), transparent 55%);
  pointer-events: none;
}

.hero-accent {
  position: absolute;
  top: -160px;
  right: -200px;
  width: 820px;
  height: 180px;
  background: linear-gradient(90deg, #b3261e, #e4362a);
  transform: rotate(-14deg);
  opacity: 0.9;
  box-shadow: 0 0 60px rgba(179, 38, 30, 0.5);
  pointer-events: none;
}

.hero-accent-stripe {
  position: absolute;
  top: -40px;
  right: -260px;
  width: 820px;
  height: 34px;
  background: #161314;
  transform: rotate(-14deg);
  pointer-events: none;
}

.hero-copy {
  position: relative;
}

.hero-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}

.hero-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 73px;
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
  color: var(--ink);
}

.hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, #e4362a, #b3261e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  max-width: 420px;
  margin: 0 0 32px;
}

.hero-cta {
  display: inline-block;
  text-decoration: none;
  background: linear-gradient(135deg, #e4362a, #8f1912);
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 12px 30px -10px rgba(179, 38, 30, 0.7);
  cursor: pointer;
}

/* Maintenance-mode page (served by functions/index.js, not part of the
   normal index.html flow) — reuses .hero/.hero-copy/.hero-title/.hero-body
   as-is rather than one-off styles, so it inherits whatever visual
   direction the real homepage is on automatically, not a snapshot that
   drifts out of sync on the next redesign. */
.hero-maintenance {
  grid-template-columns: 1fr;
  min-height: 70vh;
  justify-items: center;
  text-align: center;
}

.hero-maintenance .hero-copy {
  max-width: 640px;
}

.hero-maintenance .hero-body {
  max-width: none;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.phone {
  position: relative;
  z-index: 2;
  width: 300px;
  border-radius: 40px;
  background: #0c0b0b;
  padding: 10px;
  /* Glow ring — 2A's own spec applies this to the front (feed) phone only;
     .phone-secondary below still declares its own plain shadow, which
     wins for the second phone since it's the more specific/later rule. */
  box-shadow: 0 40px 70px -30px rgba(22, 19, 20, 0.55), 0 0 0 3px rgba(179, 38, 30, 0.35), 0 0 60px rgba(179, 38, 30, 0.35);
}

.phone-screen {
  border-radius: 30px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.phone-status {
  display: flex;
  justify-content: space-between;
  padding: 12px 18px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #161314;
}

.phone-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 10px;
  border-bottom: 1.5px solid #161314;
}

.phone-appbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-appbar-left svg {
  display: block;
}

.phone-appbar-brand {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #161314;
}

.phone-appbar-icons {
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: #161314;
}

.phone-post {
  border-bottom: 1px solid rgba(22, 19, 20, 0.1);
}

.phone-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
}

.phone-post-user {
  display: flex;
  align-items: center;
  gap: 9px;
}

.phone-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.phone-username {
  font-size: 12.5px;
  font-weight: 600;
  color: #161314;
}

.phone-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(22, 19, 20, 0.45);
}

.phone-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.phone-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px 4px;
  font-size: 16px;
}

.phone-actions-left {
  display: flex;
  gap: 13px;
  color: #161314;
}

.phone-actions-left .liked {
  color: var(--red);
}

.phone-caption {
  padding: 0 14px 12px;
}

.phone-likes {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #161314;
  margin: 2px 0 5px;
}

.phone-caption-text {
  font-size: 12px;
  line-height: 1.45;
  color: #161314;
}

.phone-caption-text strong {
  font-weight: 600;
  color: #161314;
}

.phone-comments {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #161314;
}

.phone-comments strong {
  font-weight: 600;
  color: #161314;
}

.phone-view-comments {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(22, 19, 20, 0.42);
  margin-top: 7px;
}

.phone-tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 11px 0 16px;
  border-top: 1.5px solid #161314;
  font-size: 18px;
  color: rgba(22, 19, 20, 0.4);
}

.phone-tabbar .active {
  color: var(--red);
}

/* Second (profile) phone — staggered/overlapping next to the first, same
   ratio as the source design (296/322 of the first phone's width, offset
   -22px/+56px at that scale), scaled down to this page's 300px first-phone
   width: 276px, -20px, +52px. Reuses .phone/.phone-screen for the frame;
   everything below is this screen's own content, distinct from the feed
   phone's post-card classes since the layout is genuinely different
   (profile header/stats/garage/grid, not a scrolling post feed). */
.phone-secondary {
  z-index: 1;
  width: 276px;
  margin-left: -20px;
  margin-top: 52px;
  box-shadow: 0 34px 60px -30px rgba(22, 19, 20, 0.5);
}

.phone-profile-header {
  padding: 12px 14px 0;
  display: flex;
  gap: 12px;
  align-items: center;
}

.phone-profile-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--red);
  padding: 2px;
  box-sizing: border-box;
  display: block;
}

.phone-profile-name {
  font-size: 15px;
  font-weight: 700;
  color: #161314;
}

.phone-badges {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.phone-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 12px 14px 10px;
}

.phone-stat {
  padding-left: 9px;
}

.phone-stat:first-child {
  padding-left: 0;
}

.phone-stat:not(:first-child) {
  border-left: 1px solid rgba(22, 19, 20, 0.12);
}

.phone-stat-num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #161314;
  line-height: 1;
}

.phone-stat-num.accent {
  color: var(--red);
}

.phone-stat-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(22, 19, 20, 0.45);
}

.phone-bio {
  padding: 0 14px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  color: #161314;
}

.phone-garage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 14px 7px;
}

.phone-garage-title-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.phone-garage-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #161314;
}

.phone-garage-sub {
  font-size: 9px;
  color: rgba(22, 19, 20, 0.45);
}

.phone-garage-manage {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.phone-cars {
  display: flex;
  gap: 7px;
  padding: 0 14px 11px;
  overflow: hidden;
}

.phone-car-card {
  flex: 0 0 90px;
  background: #f4f2f0;
  border-radius: 7px;
  overflow: hidden;
}

.phone-car-photo {
  width: 100%;
  height: 66px;
  object-fit: cover;
  display: block;
}

.phone-car-info {
  padding: 6px 8px 8px;
}

.phone-car-name {
  font-size: 11px;
  font-weight: 700;
  color: #161314;
}

.phone-car-model {
  font-size: 8.5px;
  color: rgba(22, 19, 20, 0.45);
  margin-top: 2px;
}

.phone-car-followers {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 4px;
}

.phone-grid-tabs {
  display: flex;
  border-top: 1.5px solid #161314;
}

.phone-grid-tab {
  flex: 1;
  text-align: center;
  padding: 7px 0 5px;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  color: rgba(22, 19, 20, 0.4);
}

.phone-grid-tab.active {
  border-bottom-color: var(--red);
  color: #161314;
}

.phone-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px 0;
  overflow: hidden;
}

.phone-grid img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  display: block;
}

/* Dark feature band — 2A's defining departure from 1A's light "What's
   Inside" section. Hardcoded near-black/white values (not the shared
   --paper/--ink/--sub tokens) since this section deliberately inverts
   away from the rest of the page's light surface, same reasoning the
   footer already used for its own always-dark treatment. */
.highlights {
  background: #161314;
  padding: 60px 56px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.highlights-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 36px;
}

.highlights-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 34px;
  letter-spacing: 0.01em;
  color: #ffffff;
  margin: 0;
}

.highlights-tag {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.highlight-card {
  background: #1d1918;
  padding: 28px 26px 30px;
}

.highlight-num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #e4362a;
  text-shadow: 0 0 16px rgba(228, 54, 42, 0.7);
  margin-bottom: 14px;
}

.highlight-card h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 22px;
  margin: 0 0 10px;
  color: #ffffff;
}

.highlight-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

/* Overrides styles.css's shared footer (var(--footer-bg), no top border)
   for this page only — near-black + a solid red top border, matching 2A's
   footer. /privacy and /terms keep the original plain-dark footer. */
.footer-flashy {
  background: #0c0b0b;
  border-top: 2px solid #e4362a;
}

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

  .hero-title {
    font-size: 47px;
  }

  .hero-visual {
    order: -1;
  }

  /* Two overlapping 300px/276px phones don't fit a narrow viewport without
     either shrinking both illegibly or forcing horizontal scroll — same
     "show the primary phone only on small screens" tradeoff most real
     two-phone marketing heroes make. */
  .phone-secondary {
    display: none;
  }

  .highlights {
    padding: 48px 24px;
  }

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

/* Phones: the homepage nav has six items (Discover, Marketplace, Meets, Privacy, Terms, Login), about 409px wide, which is wider than a
   360 or 390px screen once the header wraps it onto its own row, so the page scrolled sideways and the Login button was cut off. Let the
   nav wrap inside that row (Login drops to a second line) instead. Applies on every phone width (up to 640px, where the shared header rules
   switch to their phone layout) so Login sits in the same place on all of them. */
@media (max-width: 640px) {
  .header-nav {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}