/* ==========================================================================
   CAPVIUM — product pages (Chronova, Prognode, Atelier).
   Shared masthead, altitude list, watch grid, leakage table and closing CTA.
   ========================================================================== */

/* ── Masthead ── */
.pd-hero { background: var(--surface-dark); color: var(--white); border-bottom: 1px solid var(--rule-on-dark); }
.pd-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(48px, 5.6vw, 104px) 0 clamp(44px, 5vw, 88px);
}
.pd-hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(42px, 5.8vw, 88px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 0; max-width: 13ch;
}
.pd-hero-note { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.68); max-width: 46ch; }
.pd-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.pd-hero-media { border-top: 1px solid var(--rule-on-dark); padding: clamp(20px, 2.4vw, 40px) 0 clamp(28px, 3vw, 56px); }
.pd-hero-media img { display: block; width: 100%; height: auto; }

/* ── Section head: title left, note right ── */
.pd-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
  margin-bottom: clamp(30px, 3.6vw, 56px);
}
.pd-head h2 { max-width: 13ch; }
.pd-head p { max-width: 46em; }

/* ── Altitude list (numbered rows with a rule between) ── */
.pd-altitudes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.pd-altitude { padding: clamp(22px, 2.4vw, 34px) 0; border-top: 1px solid var(--rule); }
.pd-altitude:first-child { border-top: 0; padding-top: 0; }
.pd-altitude h3 { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -0.02em; margin: 0 0 12px; }
.pd-altitude p { margin: 0; font-size: 15.5px; line-height: 1.58; color: var(--muted); }
.cv-dark .pd-altitude { border-top-color: var(--rule-on-dark); }
.cv-dark .pd-altitude p { color: var(--muted-on-dark); }

/* ── Watch grid ── */
.pd-watch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-watch-cell { padding: clamp(24px, 2.6vw, 40px); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.pd-watch-cell:nth-child(3n + 1) { border-left: 0; }
.pd-watch-cell h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 14px; }
.pd-watch-cell p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ── Leakage matrix ── */
.pd-matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pd-matrix th {
  padding: 14px 16px; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted-on-dark); border-bottom: 1px solid var(--rule-on-dark);
}
.pd-matrix td { padding: 16px; border-bottom: 1px solid var(--rule-on-dark); color: var(--white); white-space: nowrap; }
.pd-matrix tr:last-child td { border-bottom: 0; }
.pd-matrix .clear { color: rgba(255, 255, 255, 0.34); }
.pd-flag {
  display: inline-block; padding: 5px 11px;
  background: rgba(245, 170, 70, 0.14); color: #F5AA46;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ── Tool cards (2×2) ── */
.pd-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.pd-tool { background: var(--white); padding: clamp(26px, 2.8vw, 42px); }
.pd-tool h3 { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 14px; }
.pd-tool h3 svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }
.pd-tool p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ── Two-up prose comparison ── */
.pd-twoup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 80px); }
.pd-twoup p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--muted); }

/* ── Flat list vs living graph ── */
.pd-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pd-compare > * { padding: clamp(26px, 3vw, 46px); }
.pd-compare > * + * { border-left: 1px solid var(--rule); }
.pd-compare-label {
  display: flex; align-items: center; gap: 12px; margin: 0 0 26px;
  font-family: var(--body); font-size: 15px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink);
}
.pd-compare-label svg { width: 18px; height: 18px; color: var(--ink); }
.pd-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-list th { padding: 8px 12px; text-align: left; font-size: 13px; font-weight: 400; color: var(--muted); }
.pd-list td { padding: 12px; color: var(--ink); }
.pd-list tr.is-hit td { background: var(--white); box-shadow: inset 0 0 0 1px var(--accent); }
.pd-status { display: inline-block; padding: 6px 12px; border: 1px solid var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.pd-status--hit { background: var(--accent); color: var(--white); }
.pd-manual { display: flex; gap: 14px; align-items: flex-start; margin-top: 30px; }
.pd-manual svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--ink); }
.pd-manual b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.pd-manual span { font-size: 13px; line-height: 1.5; color: var(--muted); }
.pd-verdict {
  display: flex; align-items: center; gap: 22px; margin-top: clamp(24px, 3vw, 44px);
  font-family: var(--body); font-size: clamp(13px, 1.25vw, 17px); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.pd-verdict::before, .pd-verdict::after { content: ""; flex: 1; height: 1px; background: var(--accent); }

/* ── Foresight / memory blocks ── */
.pd-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(32px, 3.6vw, 60px) 0; border-top: 1px solid var(--rule); }
.pd-block-tag { display: inline-block; margin-bottom: 20px; padding: 6px 12px; background: var(--surface-alt); border: 1px solid var(--rule); font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; }
.pd-block h3 { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 18px; max-width: 20ch; }
.pd-block p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ── Capability chips ── */
.pd-caps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pd-cap { padding: 22px 20px; background: var(--surface-dark-2); border: 1px solid var(--rule-on-dark); display: flex; flex-direction: column; justify-content: space-between; gap: 34px; min-height: 140px; }
.pd-cap--on { background: var(--viridian); border-color: var(--viridian); }
.pd-cap svg { width: 30px; height: 30px; color: var(--white); align-self: flex-end; opacity: .92; }
.pd-cap span { font-family: var(--body); font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--white); }

/* ── Process steps (Atelier) ── */
.pd-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.pd-process > * { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: clamp(22px, 2.4vw, 34px); }
/* DOM is reading order: title, steps 1-4, then the four arrows. Place each cell;
   the third column (children 3, 4, 7) drops its right rule. */
.pd-process > :nth-child(1) { grid-area: 2 / 2; }
.pd-process > :nth-child(2) { grid-area: 1 / 1; }
.pd-process > :nth-child(3) { grid-area: 1 / 3; }
.pd-process > :nth-child(4) { grid-area: 3 / 3; }
.pd-process > :nth-child(5) { grid-area: 3 / 1; }
.pd-process > :nth-child(6) { grid-area: 1 / 2; }
.pd-process > :nth-child(7) { grid-area: 2 / 3; }
.pd-process > :nth-child(8) { grid-area: 3 / 2; }
.pd-process > :nth-child(9) { grid-area: 2 / 1; }
.pd-process > :nth-child(3), .pd-process > :nth-child(4), .pd-process > :nth-child(7) { border-right: 0; }
.pd-step { background: var(--surface-alt); position: relative; }
.pd-step-n { position: absolute; top: 18px; right: 22px; font-family: var(--display); font-size: 34px; font-weight: 500; color: rgba(13, 137, 135, .3); line-height: 1; }
.pd-step h3 { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; margin: 0 0 14px; }
.pd-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.pd-process-title { background: var(--viridian); display: flex; align-items: center; justify-content: center; text-align: center; }
.pd-process-title h2 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: var(--white); margin: 0; max-width: 12ch; }
.pd-process-arrow { display: flex; align-items: center; justify-content: center; }
.pd-process-arrow svg { width: 100%; max-width: 200px; height: auto; color: var(--muted); }

/* ── Fit cells (Atelier) ── */
.pd-fits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.pd-fits > * { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: clamp(22px, 2.4vw, 36px); }
.pd-fits > *:nth-child(3n) { border-right: 0; }
.pd-fit { background: var(--surface-alt); }
.pd-fit svg { width: 30px; height: 30px; color: var(--accent); display: block; margin-left: auto; margin-bottom: 40px; }
.pd-fit h3 { font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.7vw, 22px); letter-spacing: -0.02em; margin: 0 0 12px; }
.pd-fit p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.pd-fits-title { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.pd-fits-title h2 { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin: 0; max-width: 8ch; }

/* ── Closing CTA ── */
.pd-cta { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); background: var(--viridian); }
.pd-cta-photo { min-height: 320px; background: center / cover no-repeat; }
.pd-cta-copy { padding: clamp(40px, 5vw, 84px) clamp(24px, 3.4vw, 60px); border-left: 1px solid rgba(255, 255, 255, .28); display: flex; flex-direction: column; justify-content: center; }
.pd-cta-copy h2 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.01em; color: var(--white); margin: 0 0 24px; max-width: 15ch; }
.pd-cta-copy p { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .92); margin: 0 0 34px; max-width: 40ch; }

@media (max-width: 1080px) {
  .pd-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-watch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-watch-cell:nth-child(3n + 1) { border-left: 1px solid var(--rule); }
  .pd-watch-cell:nth-child(2n + 1) { border-left: 0; }
}
@media (max-width: 860px) {
  .pd-hero-grid, .pd-head, .pd-altitudes, .pd-twoup, .pd-block,
  .pd-compare, .pd-tools, .pd-cta { grid-template-columns: minmax(0, 1fr); }
  .pd-compare > * + * { border-left: 0; border-top: 1px solid var(--rule); }
  .pd-watch { grid-template-columns: minmax(0, 1fr); }
  .pd-watch-cell { border-left: 0 !important; }
  .pd-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-process, .pd-fits { grid-template-columns: minmax(0, 1fr); }
  .pd-process > *, .pd-fits > * { border-right: 0; }
  .pd-process-arrow { display: none; }
  .pd-process > :nth-child(n) { grid-area: auto; }   /* stack in reading order: title, 1, 2, 3, 4 */
  .pd-fits-title, .pd-fit { grid-column: auto !important; grid-row: auto; }
  .pd-cta-copy { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); }
  .pd-matrix { display: block; overflow-x: auto; }
}

/* Landscape phones: see the note in capvium.css. */
@media (max-width: 1024px) and (max-height: 620px) {
  .pd-hero-grid { padding: 24px 0 20px !important; gap: 16px; }
  .pd-hero h1 { font-size: clamp(24px, 3.4vw, 32px); max-width: none; }
  .pd-hero-note { font-size: 14px; line-height: 1.4; }
  .pd-hero-actions { margin-top: 16px; gap: 10px; }
  .pd-hero-media { padding: 12px 0 18px; }
  /* The hero image is the tall part on atelier: full-width art on a 390px-tall
     screen leaves no room for the headline above it. */
  .pd-hero-media img { max-height: 42vh; width: auto; margin: 0 auto; }
}
/* A landscape phone is wide but short: the hero can keep its two columns there,
   which halves its height (atelier's headline and note stack to 292px on one
   column, 142px on two). Portrait phones stay stacked. */
@media (min-width: 700px) and (max-height: 620px) {
  .pd-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .pd-cta-photo { min-height: 180px; }
}