/* =========================================================================
   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);
}

/* Halfkit's green: its --accent-strong on light, its mint on dark. */
.pd--halfkit {
  --accent: #0f7a4f;
  --accent-soft: rgba(15, 122, 79, 0.08);
}

.pd--halfkit .band--dark {
  --accent: #5ee0a8;
  --accent-soft: rgba(94, 224, 168, 0.12);
}

/* Halfkit's mark is a mint letter on an ink tile, not a white one on accent. */
.pd--halfkit .pd-mark {
  background: var(--ink);
  color: #5ee0a8;
}

/* ZivoHR's indigo palette --primary, so the page matches the screens. */
.pd--zivohr {
  --accent: #2f4cdb;
  --accent-soft: rgba(47, 76, 219, 0.08);
}

.pd--zivohr .band--dark {
  --accent: #8197f5;
  --accent-soft: rgba(129, 151, 245, 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);
}

/* Lets a wide table scroll inside its sheet instead of widening the column
   once the responsive rules below switch the tracks to plain 1fr. */
.pd-section > * {
  min-width: 0;
}

.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);
}


/* Two frames side by side, or stacked in one column with --stack. */
.pd-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 64px;
}

.pd-pair--stack {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

/* A product's own panel shown on its own, beside copy. */
.pd-float--solo {
  width: 340px;
}

/* An illustrative sheet — for a product with no demo to screenshot yet. It is
   HTML, not a redrawn screen, and its caption says it is illustrative. It
   stays white on dark bands, like a screenshot would. */
.pd-sheet {
  --sheet-neg: #b45309;
  --sheet-pos: #0f7a4f;
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(17, 17, 17, 0.12);
  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-sheet {
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}

.pd-sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.pd-sheet__title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pd-sheet__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: #666;
}

.pd-sheet__scroll {
  overflow-x: auto;
}

.pd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

.pd-table + .pd-table {
  border-top: 1px solid rgba(17, 17, 17, 0.12);
}

.pd-table th,
.pd-table td {
  padding: 11px 26px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  text-align: right;
  white-space: nowrap;
}

.pd-table th[scope="row"],
.pd-table thead th:first-child,
.pd-table--text td {
  text-align: left;
}

.pd-table th[scope="row"] {
  font-weight: 500;
}

.pd-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666;
  vertical-align: bottom;
}

.pd-table thead small {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: #999;
}

.pd-table .is-elim {
  color: var(--sheet-neg);
}

.pd-table .is-up {
  color: var(--sheet-pos);
}

.pd-table .is-sub th,
.pd-table .is-sub td {
  font-weight: 700;
}

.pd-table .is-total th,
.pd-table .is-total td {
  font-weight: 800;
  border-top: 1px solid rgba(17, 17, 17, 0.4);
  border-bottom: 0;
}

.pd-table .is-note th,
.pd-table .is-note td {
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom: 0;
  font-size: 13px;
  color: #666;
}

.pd-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--sheet-pos, #0f7a4f);
  vertical-align: 1px;
}

/* The hero's figure card, parked over the sheet's corner. */
.pd-stage--sheet {
  margin-top: 9vh;
}

.pd-float--kpi {
  position: absolute;
  right: -28px;
  bottom: -92px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px 24px;
  align-items: baseline;
  width: auto;
  padding: 20px 24px;
  color: var(--ink);
}

.pd-kpi__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #666;
}

.pd-kpi__value {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: right;
}

.pd-caption--sheet {
  margin-top: 120px;
}


/* ------------------------------------------------- 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-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-float--kpi {
    display: none;
  }

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

  .pd-float--solo {
    width: 100%;
    max-width: 340px;
  }

  .pd-sheet__head,
  .pd-table th,
  .pd-table td {
    padding-left: 16px;
    padding-right: 16px;
  }

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