/* ======================================================================
   INSIGHT 360X — PRODUCT LANDING PAGE
   Page-specific components only. Shared tokens, header, footer, buttons
   and cross-site primitives (.marquee, .hero-cta) live in index.css and
   are reused as-is. How-it-works / final-CTA here use page-scoped
   .p360-how-*/.p360-cta-* classes rather than the shared .hiw-*/.fcta-*
   ones so this page can look different without touching other pages
   that still rely on those shared classes.
   ====================================================================== */

.p360-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.p360-eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--accent-1);
}

.p360-eyebrow--pill {
  display: inline-flex;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(204, 191, 147, 0.4);
  background: rgba(204, 191, 147, 0.08);
}

.p360-section-head {
  max-width: 62ch;
}

.p360-section-title {
  max-width: 20ch;
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--accent-2);
}

.p360-section-lede {
  max-width: 56ch;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(15, 45, 73, 0.68);
}

/* ============================ HERO ================================= */

.p360-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 132px 0 96px;
  background: var(--accent-2);
}

@media (min-width: 1024px) {
  .p360-hero {
    padding: 176px 0 108px;
  }
}

.p360-hero-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(204, 191, 147, 0.16) 1.4px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 90% at 75% 30%, #000 0%, rgba(0, 0, 0, 0.3) 55%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 75% 30%, #000 0%, rgba(0, 0, 0, 0.3) 55%, transparent 100%);
}

.p360-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: 56px;
}

@media (min-width: 1024px) {
  .p360-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: 64px;
  }
}

.p360-hero-title {
  margin: 20px 0 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
}

.p360-hero-lede {
  margin: 24px 0 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}

.p360-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.p360-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.p360-hero-stat__value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.p360-hero-stat__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.p360-hero-media {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-left: auto;
}

/* Real screenshot, shown as itself — no glass-card wrapper, no padding
   gap for the backdrop grid to show through. Cover-fit on its native
   16:9 ratio means it always fills the frame edge to edge. */
.p360-hero-shot-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.p360-hero-badge {
  position: absolute;
  z-index: 2;
  left: 5%;
  bottom: -18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 45, 73, 0.08);
  font-size: 12px;
  color: rgba(15, 45, 73, 0.72);
  white-space: nowrap;
}

.p360-hero-badge strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-2);
}

.p360-hero-badge__dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #23985b;
}

@media (prefers-reduced-motion: no-preference) {
  .p360-hero-badge__dot {
    animation: p360-badge-pulse 2.4s ease-in-out infinite;
  }
}

@keyframes p360-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(35, 152, 91, 0.4); }
  50% { box-shadow: 0 0 0 5px rgba(35, 152, 91, 0); }
}

@media (max-width: 1023px) {
  .p360-hero-media {
    max-width: min(100%, 540px);
    margin-right: auto;
  }
}

@media (max-width: 639px) {
  .p360-hero-badge {
    left: 16px;
    right: 16px;
    justify-content: center;
  }
}

/* --- Trust strip --- */
.p360-trust {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 56px 0 140px;
  background: var(--accent-2);
}

/* Rounded arch closing out the navy hero/trust block before the cream
   Problems section starts — same technique as About's team-arc. */
.p360-trust-arc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 100px;
  pointer-events: none;
}

.p360-trust-arc svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .p360-trust-arc {
    height: 56px;
  }
}

.p360-trust-label {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.p360-trust .marquee {
  position: relative;
  z-index: 1;
  margin-top: 24px;
}

/* ============================ PROBLEMS ==============================
   Same "bento" grammar as the homepage's problem/solution section:
   asymmetric grid, hairline borders (no shadows), thin oversized
   numeral figures, tag pills. Adapted to a light background since this
   section already sits on --page-bg between two navy bands. */

.p360-problems {
  padding: 100px 0 108px;
  background: var(--page-bg);
}

@media (max-width: 767px) {
  .p360-problems {
    padding: 76px 0 84px;
  }
}

/* Centered head, set apart from every other section on this page (all
   of which use a left-aligned or two-column head) with a small rule +
   diamond flourish — restrained, no bounce, no orbiting chips. */
.p360-problems-head {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.p360-problems-head .p360-eyebrow {
  justify-content: center;
  margin: 0 auto;
}

.p360-problems-head .p360-section-title {
  max-width: 42ch;
  margin: 20px auto 0;
}

.p360-problems-head .p360-section-lede {
  margin: 16px auto 0;
}

.p360-problems-rule {
  position: relative;
  width: 88px;
  height: 1px;
  margin: 24px auto 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(15, 45, 73, 0.2) 24%,
    rgba(15, 45, 73, 0.2) 76%,
    transparent
  );
}

.p360-problems-rule::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--accent-1);
}

.p360-bento-grid {
  display: grid;
  gap: 16px;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .p360-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .p360-bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "a b d"
      "a c d"
      "e e f";
  }

  .p360-bento-card--a { grid-area: a; }
  .p360-bento-card--b { grid-area: b; }
  .p360-bento-card--c { grid-area: c; }
  .p360-bento-card--d { grid-area: d; }
  .p360-bento-card--e { grid-area: e; }
  .p360-bento-card--f { grid-area: f; }
}

.p360-bento-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid #e5ebf1;
  border-radius: 20px;
  background: #fff;
}

@media (min-width: 1024px) {
  .p360-bento-card {
    padding: 30px 32px;
  }

  .p360-bento-card--a .p360-bento-figure {
    margin-top: auto;
    padding-top: 32px;
  }

  .p360-bento-card--d .p360-bento-card__foot {
    margin-top: auto;
    padding-top: 32px;
  }
}

/* The two "figure" cards break from plain white — one carries a solid
   navy fill, the other a real photo with a scrim — a deliberate mixed
   grid so it doesn't read as a straight reskin of the homepage's
   all-dark bento. */
.p360-bento-card--d {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.p360-bento-card--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
  background-color: var(--accent-2);
  background-image: var(--card-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.p360-bento-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 19, 31, 0.72) 0%,
    rgba(6, 19, 31, 0.6) 30%,
    rgba(6, 19, 31, 0.86) 75%,
    rgba(6, 19, 31, 0.95) 100%
  );
}

.p360-bento-card--photo > *:not(.p360-bento-card__scrim) {
  position: relative;
  z-index: 1;
}

.p360-bento-card--a .p360-bento-card__title,
.p360-bento-card--d .p360-bento-card__title {
  color: #fff;
}

.p360-bento-card--a .p360-bento-card__body,
.p360-bento-card--d .p360-bento-card__body {
  color: rgba(255, 255, 255, 0.64);
}

.p360-bento-card--a .p360-bento-card__body strong,
.p360-bento-card--d .p360-bento-card__body strong {
  color: var(--accent-1);
}

.p360-bento-card--a .p360-bento-tag,
.p360-bento-card--d .p360-bento-tag {
  background: rgba(204, 191, 147, 0.16);
  color: var(--accent-1);
}

.p360-bento-card--a .p360-bento-figure__label,
.p360-bento-card--d .p360-bento-figure__label {
  color: rgba(255, 255, 255, 0.5);
}

.p360-bento-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.p360-bento-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--accent-2);
}

.p360-bento-tag {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--page-bg);
  color: rgba(15, 45, 73, 0.6);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.p360-bento-card__body {
  margin-top: 14px;
  max-width: 42ch;
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(15, 45, 73, 0.6);
}

.p360-bento-card__body strong {
  font-weight: 600;
  color: var(--accent-2);
}

.p360-bento-figure {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 20px;
}

.p360-bento-figure__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.3rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent-1);
}

.p360-bento-figure__label {
  max-width: 22ch;
  padding-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(15, 45, 73, 0.55);
}

.p360-features {
  padding: 100px 0 108px;
  background: #ffffff;
}

@media (max-width: 767px) {
  .p360-features {
    padding: 76px 0 84px;
  }
}

/* Two-column head — eyebrow/title on the left, a supporting line
   anchored to the baseline on the right — instead of the single
   stacked block every other section on this page uses. */
.p360-features-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5ebf1;
}

.p360-features-head__main {
  max-width: 620px;
}

.p360-features-title {
  margin: 16px 0 0;
  max-width: 40ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--accent-2);
}

.p360-features-head__lede {
  max-width: 30ch;
  padding-bottom: 4px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(15, 45, 73, 0.55);
}

@media (min-width: 1024px) {
  .p360-features-head__lede {
    text-align: right;
  }
}

/* --- Features & Who it's for: photo + scrim + Lottie icon, same
   grammar as About's focus-grid --- */
.p360-focus-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .p360-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .p360-focus-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p360-focus-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p360-focus-card--wide {
    grid-column: span 2;
  }
}

.p360-focus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  padding: 26px;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--accent-2);
  background-image: var(--card-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.p360-focus-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 19, 31, 0.1) 0%,
    rgba(6, 19, 31, 0.1) 30%,
    rgba(6, 19, 31, 0.72) 62%,
    rgba(6, 19, 31, 0.96) 100%
  );
}

.p360-focus-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 19, 31, 0);
  transition: background-color 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.p360-focus-card:hover::after {
  background: rgba(6, 19, 31, 0.16);
}

.p360-focus-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.p360-focus-card__tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.p360-focus-card__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 13px;
  background: rgba(204, 191, 147, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.p360-focus-card__icon-anim {
  display: block;
  width: 24px;
  height: 24px;
}

.p360-focus-card:hover .p360-focus-card__icon {
  transform: translateY(-3px) scale(1.05);
}

.p360-focus-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
}

.p360-focus-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color 300ms ease;
}

.p360-focus-card:hover .p360-focus-card__title {
  color: var(--accent-1);
}

.p360-focus-card__arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 260ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.p360-focus-card:hover .p360-focus-card__arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.p360-focus-card__text {
  max-width: 36ch;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.p360-focus-card--wide .p360-focus-card__text {
  max-width: 58ch;
}

.p360-who {
  padding: 100px 0 108px;
  background: var(--page-bg);
}

@media (max-width: 767px) {
  .p360-who {
    padding: 76px 0 84px;
  }
}

/* ========================= HOW IT WORKS =============================
   Sticky intro column + a connected vertical step list — same grammar
   as the homepage's How It Works section. */

.p360-how {
  padding: 100px 0 108px;
  background: #ffffff;
}

@media (max-width: 767px) {
  .p360-how {
    padding: 76px 0 84px;
  }
}

.p360-how-layout {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .p360-how-layout {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
  }

  .p360-how-intro {
    position: sticky;
    top: 120px;
  }
}

.p360-how-intro .p360-section-title {
  max-width: 22ch;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

.p360-how-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-2);
}

.p360-how-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms ease;
}

.p360-how-cta:hover svg {
  transform: translateX(3px);
}

.p360-how-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1023px) {
  .p360-how-steps {
    margin-top: 40px;
  }
}

.p360-how-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 40px;
}

.p360-how-step:last-child {
  padding-bottom: 0;
}

.p360-how-marker {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.p360-how-marker::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: -40px;
  width: 1px;
  background: rgba(15, 45, 73, 0.16);
}

.p360-how-step:last-child .p360-how-marker::after {
  display: none;
}

.p360-how-dot {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--accent-1);
  border-radius: 999px;
  background: var(--page-bg);
  box-shadow: inset 0 0 0 3px var(--accent-1);
}

.p360-how-body {
  padding: 24px 26px 26px;
  border: 1px solid rgba(15, 45, 73, 0.1);
  border-radius: 18px;
  background: #fff;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease;
}

.p360-how-step:hover .p360-how-body {
  transform: translateY(-3px);
  border-color: rgba(204, 191, 147, 0.7);
}

.p360-how-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.p360-how-icon-art {
  display: block;
  width: 44px;
  height: 44px;
}

.p360-how-name {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-2);
}

.p360-how-text {
  max-width: 52ch;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(15, 45, 73, 0.6);
}

.p360-how-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.p360-how-tags li {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--page-bg);
  color: var(--accent-2);
  font-size: 11.5px;
  font-weight: 500;
}

/* --- Use case spotlight: a navy "proof" band between two light
   sections, so the single case study reads as a spotlight moment
   rather than another white card in the same rhythm as everything
   around it. --- */
.p360-usecase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 108px 0 116px;
  background: var(--accent-2);
}

@media (max-width: 767px) {
  .p360-usecase {
    padding: 80px 0 88px;
  }
}

.p360-usecase-arc {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  height: 70px;
  pointer-events: none;
}

.p360-usecase-arc--top {
  top: -1px;
}

.p360-usecase-arc--bottom {
  bottom: -1px;
  height: 100px;
}

.p360-usecase-arc svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .p360-usecase-arc--top {
    height: 40px;
  }

  .p360-usecase-arc--bottom {
    height: 56px;
  }
}

.p360-usecase .site_shell {
  position: relative;
  z-index: 1;
}

.p360-usecase .p360-section-head {
  max-width: 52ch;
  margin: 0 auto;
  text-align: center;
}

.p360-usecase .p360-eyebrow {
  justify-content: center;
  color: var(--accent-1);
}

.p360-usecase .p360-section-title {
  margin: 18px auto 0;
  color: #fff;
}

.p360-usecase .p360-section-lede {
  margin: 16px auto 0;
  color: rgba(255, 255, 255, 0.62);
}

.p360-uc-wrap {
  margin: 48px 0 0;
}

.p360-uc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
}

@media (min-width: 1024px) {
  .p360-uc-card {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: stretch;
  }
}

.p360-uc-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .p360-uc-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 460px;
  }
}

.p360-uc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p360-uc-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(9, 28, 46, 0.78), rgba(9, 28, 46, 0));
  pointer-events: none;
}

@media (min-width: 1024px) {
  .p360-uc-media::after {
    inset: 0;
    height: auto;
    background: linear-gradient(to right, rgba(9, 28, 46, 0.55), rgba(9, 28, 46, 0) 45%),
      linear-gradient(to top, rgba(9, 28, 46, 0.65), rgba(9, 28, 46, 0) 40%);
  }
}

.p360-uc-body {
  padding: 28px 26px 30px;
}

@media (min-width: 1024px) {
  .p360-uc-body {
    padding: 44px 0 44px 44px;
  }

  .p360-uc-body--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
    align-items: stretch;
    height: 100%;
  }

  .p360-uc-col:first-child {
    padding: 0 40px 0 0;
    align-self: center;
  }

  /* A distinct stat panel, not just a second text column — bleeds to
     the card's own edges so it reads as an embedded callout. */
  .p360-uc-col--outcome {
    display: flex;
    align-items: center;
    padding: 40px 36px;
    background: var(--page-bg);
    border-left: 1px solid #e5ebf1;
  }
}

.p360-uc-index {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 45, 73, 0.4);
}

.p360-uc-index span {
  color: #8f7434;
}

.p360-uc-name {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--accent-2);
}

.p360-uc-quote {
  margin: 18px 0 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--accent-1);
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--accent-2);
}

.p360-uc-quote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 500;
  color: rgba(15, 45, 73, 0.5);
}

.p360-uc-facts {
  margin: 22px 0 0;
}

.p360-uc-facts dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 45, 73, 0.4);
}

.p360-uc-facts dd {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(15, 45, 73, 0.68);
}

.p360-uc-facts dd + dt {
  margin-top: 16px;
}

.p360-uc-outcome {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px solid var(--accent-1);
}

@media (min-width: 1024px) {
  .p360-uc-outcome {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

.p360-uc-outcome-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f7434;
}

.p360-uc-outcome-figure {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent-2);
}

.p360-uc-outcome-figure span {
  font-size: 0.5em;
  font-weight: 600;
  color: #8f7434;
}

.p360-uc-outcome-text {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(15, 45, 73, 0.6);
}

/* --- FAQ: white bg, faint center glow, hairline-bordered accordion --- */
.p360-faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px 0 108px;
  background: #ffffff;
}

@media (max-width: 767px) {
  .p360-faq {
    padding: 76px 0 84px;
  }
}

.p360-faq-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(46% 50% at 50% 28%, rgba(204, 191, 147, 0.12), transparent 70%);
}

.p360-faq .site_shell {
  position: relative;
}

/* Left sticky intro + right accordion — same split-column grammar as
   How It Works above, so the FAQ head no longer repeats the centered
   treatment every other section head on this page uses, and the wide
   shell is filled with real content instead of empty side gutters. */
.p360-faq-layout {
  display: grid;
  gap: 32px;
}

@media (min-width: 1024px) {
  .p360-faq-layout {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
  }

  .p360-faq-intro {
    position: sticky;
    top: 120px;
  }
}

.p360-faq-intro {
  position: relative;
  z-index: 1;
}

.p360-faq-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8f7434;
}

.p360-faq-title {
  margin: 16px 0 0;
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--accent-2);
}

.p360-faq-lede {
  max-width: 34ch;
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(15, 45, 73, 0.58);
}

.p360-faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-2);
}

.p360-faq-cta svg {
  width: 15px;
  height: 15px;
  transition: transform 300ms ease;
}

.p360-faq-cta:hover svg {
  transform: translateX(3px);
}

.p360-faq-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p360-faq-item {
  border: 1px solid #e5ebf1;
  border-radius: 18px;
  background: var(--page-bg);
  overflow: hidden;
  transition: background-color 250ms ease, border-color 250ms ease;
}

.p360-faq-item[open] {
  background: #fff;
  border-color: rgba(204, 191, 147, 0.5);
}

.p360-faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}

@media (min-width: 640px) {
  .p360-faq-item summary {
    padding: 24px 28px;
  }
}

.p360-faq-item summary::-webkit-details-marker {
  display: none;
}

.p360-faq-item__figure {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--accent-1);
}

.p360-faq-item__question {
  flex: 1;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-2);
}

.p360-faq-item__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-2);
  color: var(--accent-1);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.p360-faq-item__icon svg {
  width: 17px;
  height: 17px;
}

.p360-faq-item[open] .p360-faq-item__icon {
  transform: rotate(225deg);
}

.p360-faq-item summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}

.p360-faq-answer {
  margin: 0;
  padding: 0 24px 24px 62px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(15, 45, 73, 0.65);
}

@media (min-width: 640px) {
  .p360-faq-answer {
    padding: 0 28px 26px 68px;
  }
}

/* ============================ FINAL CTA =============================
   Same "point of the company" pattern as the About page: navy gradient,
   four floating corner photos, centered content — with a minimal
   transparent-underline form embedded in place of plain CTA buttons. */

.p360-point {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0;
  text-align: center;
  background: linear-gradient(160deg, var(--accent-3) 0%, var(--accent-2) 55%, #0a1e33 100%);
}

/* Rounded arch at the top edge, echoing the white FAQ section above so
   the transition into this dark CTA isn't a hard flat line. */
.p360-point-arc {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  z-index: 1;
  height: 70px;
  pointer-events: none;
}

.p360-point-arc svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .p360-point-arc {
    height: 40px;
  }
}

.p360-point__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.p360-point__photo {
  position: absolute;
  overflow: hidden;
  border-radius: 18px;
  background-color: #0f2d49;
  background-image: var(--img);
  background-position: center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.p360-point__photo-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 42, 78, 0.5) 0%, rgba(0, 20, 38, 0.25) 100%);
  mix-blend-mode: multiply;
}

.p360-point__photo--tl {
  top: 14%;
  left: 6%;
  width: 210px;
  height: 270px;
}

.p360-point__photo--tr {
  top: 10%;
  right: 7%;
  width: 190px;
  height: 150px;
}

.p360-point__photo--bl {
  bottom: 12%;
  left: 8%;
  width: 220px;
  height: 140px;
}

.p360-point__photo--br {
  bottom: 16%;
  right: 5%;
  width: 200px;
  height: 250px;
}

@media (max-width: 1279px) {
  .p360-point__photo--tl { width: 170px; height: 220px; left: 20px; }
  .p360-point__photo--tr { width: 150px; height: 120px; right: 24px; }
  .p360-point__photo--bl { width: 170px; height: 110px; left: 24px; }
  .p360-point__photo--br { width: 160px; height: 200px; right: 20px; }
}

@media (max-width: 1023px) {
  .p360-point {
    padding: 96px 0;
  }

  .p360-point__media {
    display: none;
  }
}

.p360-point__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.p360-point__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.p360-point__eyebrow-icon {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--accent-1);
}

.p360-point__title {
  margin: 22px auto 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.p360-point__lede {
  margin: 18px auto 0;
  max-width: 50ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
}

.p360-point__proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 34px;
}

.p360-point__proof strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-1);
}

.p360-point__proof span {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Minimal transparent form --- */
.p360-point__card {
  max-width: 560px;
  margin: 34px auto 0;
  text-align: left;
}

.p360-point__form-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 22px;
}

@media (min-width: 480px) {
  .p360-point__form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.p360-point__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p360-point__field span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.p360-point__field input,
.p360-point__field select {
  min-height: 34px;
  padding: 0 0 6px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  transition: border-color 220ms ease;
}

.p360-point__field select option {
  color: var(--accent-2);
}

.p360-point__field input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.p360-point__field input:focus,
.p360-point__field select:focus {
  outline: none;
  border-color: var(--accent-1);
}

.p360-point__submit {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin-top: 6px;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #d9cfae 0%, var(--accent-1) 100%);
  color: var(--accent-2);
  font-size: 15px;
  font-weight: 600;
  transition: transform 300ms ease;
}

.p360-point__submit svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms ease;
}

.p360-point__submit:hover {
  transform: translateY(-2px);
}

.p360-point__submit:hover svg {
  transform: translateX(3px);
}

.p360-point__assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.p360-point__assurances li {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.p360-point__alt {
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.p360-point__alt a {
  color: var(--accent-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================ RESPONSIVE ============================
   Section-level padding is already handled per-section above; this
   block only covers layout tweaks that don't fit neatly next to their
   base rules. */

@media (max-width: 1023px) {
  .p360-features-head {
    align-items: flex-start;
  }

  .p360-features-head__lede {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .p360-uc-body--split {
    display: block;
  }

  .p360-uc-col:not(:first-child) {
    margin-top: 22px;
  }
}