/* =========================================================================
   Product pages — /products/<slug>/

   Loaded only by product templates, on top of site.css. Everything here
   reads the site's tokens; the one thing a product adds is its own accent,
   set on the page wrapper so the nav and the footer keep the studio's red
   and only the product's own pages turn its colour.

   The screenshots are real screens of the product. These rules only put a
   frame around them — a browser bar, a phone — and never redraw the UI in
   CSS, so what a visitor sees is what the product renders.

   Contents
     1. Page wrapper & product accent
     2. Hero, CTAs
     3. Device frames — browser, phone, floating card, caption
     4. Stages — how frames are composed per section
     5. Feature points, proof strip, module grid
     6. Closing CTA
     7. Responsive
   ========================================================================= */


/* ------------------------------------------------ 1. wrapper & accent */

.pd--arcfreight {
  /* ArcFreight's own interface blue (its tokens.css --accent), so the page
     and the screens in it agree. */
  --accent: #1f4fd8;
  --accent-soft: rgba(31, 79, 216, 0.08);
}

.pd .band--dark {
  --accent: #7090fa;
  --accent-soft: rgba(112, 144, 250, 0.14);
}


/* ----------------------------------------------------------- 2. hero */

.pd-hero {
  position: relative;
  z-index: 1;
  padding: 110px var(--gutter) 0;
}

.pd-hero__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: end;
  margin-top: 7vh;
}

.pd-hero__name {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
}

/* The product's own mark: the "F" tile from its sidebar, drawn in CSS. */
.pd-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
}

.pd-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 8px;
}

.pd-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pd-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 18px 26px;
  background: var(--accent);
  color: var(--white);
  border: 1px solid var(--accent);
  transition: background 0.25s, color 0.25s, padding 0.25s;
}

.pd-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  padding-right: 34px;
}

.pd-btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--outline);
}

.pd-btn--ghost:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.band--dark .pd-btn:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.band--dark .pd-btn--ghost:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.pd-hero__note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  color: var(--text-muted);
}


/* -------------------------------------------------- 3. device frames */

.pd-browser {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.06),
    0 40px 80px -40px rgba(17, 17, 17, 0.45);
}

.band--dark .pd-browser {
  border-color: rgba(242, 241, 237, 0.14);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}

.pd-browser__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 38px;
  padding: 0 14px;
  background: #f4f4f5;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.pd-browser__dots {
  display: flex;
  gap: 6px;
}

.pd-browser__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.14);
}

.pd-browser__url {
  flex: 1;
  max-width: 420px;
  margin-inline: auto;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid rgba(17, 17, 17, 0.08);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #666;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-browser img,
.pd-phone img,
.pd-float img {
  width: 100%;
  height: auto;
}

.pd-phone {
  position: relative;
  width: 280px;
  padding: 10px;
  background: #0d0d0f;
  border-radius: 44px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 50px 90px -30px rgba(17, 17, 17, 0.6);
}

.pd-phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 2;
  width: 78px;
  height: 22px;
  border-radius: 12px;
  background: #0d0d0f;
  transform: translateX(-50%);
}

.pd-phone__screen {
  border-radius: 34px;
  overflow: hidden;
  background: var(--white);
}

/* A single widget lifted out of a screen, floating over a composition. */
.pd-float {
  position: relative;
  width: 260px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: var(--white);
  box-shadow: 0 30px 60px -24px rgba(17, 17, 17, 0.45);
}

/* A long screen shown as a window onto its top: the frame keeps a browser's
   proportions and the screenshot runs on below the fold of it. */
.pd-browser--window img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}

.pd-caption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}

/* Clears the phone and the floating card, which hang below the hero frame. */
.pd-caption--hero {
  margin-top: 110px;
}


/* ------------------------------------------------------- 4. stages */

/* A stage is one composition: a main frame with others parked over its
   edges. Below 768px the floats drop out and the phone tucks under the frame. */
.pd-stage {
  position: relative;
}

.pd-stage--hero {
  margin-top: 9vh;
  padding-right: 120px;
  padding-bottom: 40px;
}

.pd-stage--hero .pd-phone {
  position: absolute;
  right: 0;
  bottom: -40px;
  width: 250px;
}

.pd-stage--hero .pd-float {
  position: absolute;
  left: -28px;
  bottom: -60px;
  width: 230px;
}

.pd-stage--split {
  padding-right: 110px;
}

.pd-stage--split .pd-phone {
  position: absolute;
  right: 0;
  top: 18%;
  width: 240px;
}

.pd-stage--cards {
  padding-bottom: 90px;
}

.pd-stage--cards .pd-float--a {
  position: absolute;
  right: -28px;
  bottom: 10px;
  width: 210px;
}

.pd-stage--cards .pd-float--b {
  position: absolute;
  right: 200px;
  bottom: -20px;
  width: 200px;
}

/* Phone on its own, beside copy. */
.pd-solo {
  display: flex;
  justify-content: center;
}

.pd-solo .pd-phone {
  width: 300px;
}

/* The phone shows the top of a long page; clip it to a phone's proportions
   so it reads as a screen and not a strip. */
.pd-phone__screen--clip {
  aspect-ratio: 390 / 780;
}

.pd-phone__screen--clip img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}


/* ------------------------------------ 5. points, proof strip, modules */

.pd-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 72px;
  align-items: start;
  margin-top: 80px;
}

.pd-section--flip {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

.pd-section--even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.pd-points {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.pd-point {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 12px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.pd-point__index {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 4px;
}

.pd-point__title {
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.pd-point__body {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-soft);
}

.pd-lede {
  font-size: var(--fs-prose);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 560px;
  margin: 28px 0 40px;
}

.pd-sticky {
  position: sticky;
  top: 96px;
}

.pd-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pd-proof__item {
  background: var(--surface);
  padding: 34px 28px 30px;
}

.pd-proof__value {
  font-size: var(--fs-stat-sm);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.pd-proof__label {
  margin-top: 14px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-soft);
}

/* The before/after of a desk's day, as two ruled columns. */
.pd-versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 64px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pd-versus__col {
  background: var(--surface);
  padding: 34px 32px;
}

.pd-versus__col--after {
  background: var(--accent);
  color: var(--white);
  --rule-soft: rgba(255, 255, 255, 0.25);
}

.pd-versus__head {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.24em;
  opacity: 0.7;
  margin-bottom: 18px;
}

.pd-versus__row {
  padding: 14px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.4;
}

.pd-versus__col--before .pd-versus__row {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(17, 17, 17, 0.25);
}

.pd-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 64px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pd-module {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  padding: 30px 26px 32px;
  transition: background 0.3s;
}

.pd-module:hover {
  background: var(--raise);
}

.band--dark .pd-module:hover {
  background: #1b1b1b;
}

.pd-module__index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.pd-module__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.pd-module__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* The AI features, set apart: they are optional, and the page says so. */
.pd-ai {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 72px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pd-ai__item {
  background: var(--surface);
  padding: 32px 28px;
}

.pd-ai__item--switch {
  background: var(--accent-soft);
}

.pd-ai__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 14px;
}

.pd-ai__title {
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.pd-ai__body {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-soft);
}


/* ------------------------------------------------- 6. closing CTA */

.pd-close {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: end;
}

.pd-close__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.pd-close__case {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-top: 72px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: padding-left 0.25s, color 0.25s;
}

.pd-close__case:hover {
  padding-left: 10px;
  color: var(--accent);
}

.pd-close__case-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.22em;
  color: var(--text-muted);
  white-space: nowrap;
}

.pd-close__case-title {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
}


/* ---------------------------------------------------- 7. responsive */

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

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

  .pd-section,
  .pd-section--flip,
  .pd-section--even {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .pd-section--flip > :first-child {
    order: 2;
  }

  .pd-sticky {
    position: static;
  }

  .pd-ai {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pd-hero__grid,
  .pd-close {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pd-stage--hero,
  .pd-stage--split {
    padding-right: 0;
    padding-bottom: 0;
  }

  .pd-stage--hero .pd-float,
  .pd-stage--cards .pd-float {
    display: none;
  }

  .pd-stage--cards {
    padding-bottom: 0;
  }

  .pd-caption--hero {
    margin-top: 22px;
  }

  .pd-stage--hero .pd-phone,
  .pd-stage--split .pd-phone {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: 220px;
    margin: -60px 16px 0 auto;
  }

  .pd-browser__bar {
    height: 28px;
  }

  .pd-browser__dots span {
    width: 7px;
    height: 7px;
  }

  .pd-browser__url {
    font-size: 9.5px;
    padding: 3px 8px;
  }

  .pd-versus {
    grid-template-columns: 1fr;
  }

  .pd-modules,
  .pd-proof {
    grid-template-columns: 1fr;
  }

  .pd-close__case {
    flex-direction: column;
    gap: 8px;
  }
}