/* PCKR marketing site: the "Built for growing operations" sign-up panel and the logo footer row.
   Used at the bottom of the home, features, for fashion brands and about pages.
   Needs the page's usual colour variables and waitlist.css (the form styles). */

.gf {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 24px 0;
}
.gf-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.8fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 0;
  padding: 40px 36px;
  background: linear-gradient(180deg, rgba(23, 27, 33, 0.72), rgba(13, 16, 21, 0.72));
  border: 1px solid var(--outline);
  border-radius: 22px;
}
.gf-copy { padding-right: 32px; }
/* .gf-copy p would otherwise win over the eyebrow's colour */
.gf-copy .gf-eyebrow { margin-top: 0; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--neon); margin-bottom: 14px; }
.gf-copy h2 { font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; line-height: 1.12; letter-spacing: -0.4px; color: #fff; }
.gf-copy p { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 420px; }

.gf-points { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; padding: 0 28px; border-left: 1px solid var(--outline); border-right: 1px solid var(--outline); }
.gf-points-title { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 14px; }
.gf-points ul { list-style: none; display: grid; gap: 12px; }
.gf-points li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.45; color: var(--text-primary); }
.gf-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 3px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--neon);
  border-bottom: 2px solid var(--neon);
  transform: rotate(40deg);
}

.gf-form { padding-left: 28px; }
.gf-form .wl-form { padding: 18px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--outline); border-radius: 16px; }
.gf-form .wl-fields { grid-template-columns: 1fr; }
.gf-form .wl-btn { width: 100%; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; font-size: 13px; }
/* Capture box: every label in caps, and the drop-downs sit in the same plain outline as the other fields (no neon highlight). */
.gf-form .wl-input::placeholder { text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; font-size: 13px; }
.gf-form .pckr-dd-btn { border: 1px solid var(--outline); background: var(--bg); color: var(--text-primary); box-shadow: none; }
.gf-form .pckr-dd-btn.placeholder { color: var(--muted); }
.gf-form .pckr-dd-btn:hover, .gf-form .pckr-dd-btn.open, .gf-form .pckr-dd-btn:focus-visible { border-color: var(--outline); box-shadow: none; }
.gf-form .wl-done { padding: 10px 4px; }

/* Logo row under the panel */
.gf-foot {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gf-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.gf-brand svg { width: 34px; height: 34px; display: block; }
.gf-brand span { font-size: 22px; font-weight: 800; letter-spacing: 3px; color: var(--neon); text-transform: uppercase; }
.gf-tag { font-size: 13px; letter-spacing: 0.5px; color: var(--text-primary); }

@media (max-width: 960px) {
  .gf-panel { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
  .gf-copy { padding-right: 0; }
  .gf-points { padding: 24px 0; border-left: 0; border-right: 0; border-top: 1px solid var(--outline); border-bottom: 1px solid var(--outline); }
  .gf-form { padding-left: 0; }
}
@media (max-width: 560px) {
  .gf { padding: 8px 20px 0; }
  .gf-foot { padding: 28px 20px 40px; flex-direction: column; align-items: flex-start; }
}