/* =========================================================================
   FILENAME: kyp-site.css
   ROLE: Marketing-site homepage content only (hero, problem/solution
   sections, comparison block, sector cards). Loaded in addition to
   kyp.css on site pages under kyp/public/pages/ — header, footer, and
   nav stay in kyp.css since that markup is shared infrastructure via
   kyp-layout.php, used by engine pages too.
   All class names below are already unique against kyp.css — no rename
   needed, this file only relocates content that was previously appended
   to the end of kyp.css.
   ========================================================================= */

/* ===== Unified Content Wrapper ===== */

.kyp-site-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

/* ===== Hero Section ===== */

.hero {
  position: relative;
  padding: 4rem 2rem 3.5rem;
  margin-bottom: 3rem;

  /* --- Hero background gradient ---
     Soft plum tint bleeding in from the bottom-right corner.
     This is the ONLY rule controlling the hero background —
     adjust the two colour stops or the 135deg angle here to
     change it, nothing else in this file affects it. */
  background: linear-gradient(135deg, #ffffff 40%, var(--kyp-plum-100) 100%);
}

.hero__container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.hero__left {
  text-align: left;
}

.hero__right svg {
  width: 100%;
  height: auto;
}

.hero__headline {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--kyp-plum-800);
  margin: 0 0 0.75rem 0;
}

.hero__subheadline {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--kyp-plum-600);
  margin: 0 0 1.5rem 0;
}

.hero__subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--kyp-neutral-text-body);
  margin: 0 0 2rem 0;
  max-width: 500px;
}

.hero__ctas {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.hero__ctas .button {
  min-width: 140px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 4px;
}

.hero__ctas .button-primary {
  background: var(--kyp-gold-600);
  color: #ffffff;
  border: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hero__ctas .button-primary:hover {
  background: var(--kyp-gold-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(62, 34, 54, 0.15);
}

.hero__ctas .button-secondary {
  background: transparent;
  color: var(--kyp-plum-800);
  border: 1px solid var(--kyp-plum-200);
}

.hero__ctas .button-secondary:hover {
  border-color: var(--kyp-plum-600);
  background: var(--kyp-plum-50);
}

/* Pairwise Card Visual */

.pairwise-card {
  background: #ffffff;
  border: 1px solid var(--kyp-plum-100);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(62, 34, 54, 0.06);
}

/* Hero-featured version: larger, centred, more shadow depth so it
   reads as the section's visual anchor rather than a side element. */
.pairwise-card--hero {
  max-width: 100%;
  padding: 2.5rem;
  box-shadow: 0 8px 30px rgba(62, 34, 54, 0.12);
}

.pairwise-card__counter {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kyp-gold-600);
  margin: 0 0 1.5rem 0;
}

.pairwise-card__options {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.pairwise-option {
  flex: 1;
  padding: 1rem;
  background: var(--kyp-plum-50);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.2s ease, background 0.2s ease;
  border: 1px solid var(--kyp-plum-100);
}

.pairwise-option:hover {
  border-color: var(--kyp-gold-400);
  background: var(--kyp-plum-100);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(62, 34, 54, 0.1);
}

.pairwise-option__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kyp-neutral-text-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem 0;
}

.pairwise-option__text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--kyp-plum-800);
  margin: 0;
}

.pairwise-divider {
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: var(--kyp-neutral-text-heading);
  font-weight: 500;
  padding: 0 0.5rem;
}

.pairwise-card__prompt {
  font-size: 0.9rem;
  color: var(--kyp-neutral-text-body);
  text-align: center;
  margin: 0;
  font-style: italic;
}

/* ===== Content Sections ===== */

.content-section {
  background: #ffffff;
  padding: 3rem;
  margin-bottom: 3rem;
  border-top: 2px solid var(--kyp-plum-200);
}

.content-section--alt {
  background: var(--kyp-plum-75);
}


.content-section h1 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--kyp-plum-800);
  margin: 0 auto 1.5rem auto;
  line-height: 1.3;
  max-width: 700px;
  text-align: center;
}

.content-section h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--kyp-plum-800);
  margin: 0 auto 0.75rem auto;
  line-height: 1.3;
  max-width: 700px;
  text-align: center;
}

.content-section h2::after,
.comparison-section h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: var(--kyp-gold-600);
  margin: 0.75rem auto 1.25rem;
  border-radius: 2px;
}

.content-section > h3,
.how-it-works-infographic h3 {
  text-align: center;
  font-weight: 400;
  color: var(--kyp-neutral-text-body);
  margin: 0 0 1.5rem 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.how-it-works-infographic h4 {
  text-align: center;
  font-weight: 400;
  color: var(--kyp-neutral-text-body);
  margin: 0 0 1.5rem 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.page-intro {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--kyp-color-text);
  margin: 0 0 2rem 0;
  max-width: 700px;
}

.kyp-page-tagline {
  text-align: center;
  margin: 3rem 0 0.75rem 0;
  font-size: 2rem;
  font-weight: 600;
  color: var(--kyp-gold-600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
}

.kyp-page-tagline::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: var(--kyp-gold-600);
  margin: 0.75rem auto 2rem;
  border-radius: 2px;
}

.content-section p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--kyp-neutral-text-body);
  margin: 0 0 1rem 0;
  max-width: 1100px;
}

.content-section ol,
.content-section ul {
  margin: 0 0 1rem 0;
}

.content-section ol li,
.content-section ul li {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.content-section p:last-child {
  margin-bottom: 0;
}

.section-followup::marker {
  color: transparent;
}

.section-followup a {
  font-weight: var(--kyp-font-weight-bold);
}

.bold-link a {
  font-weight: var(--kyp-font-weight-bold);
}

.content-section b {
  font-weight: var(--kyp-font-weight-bold);
}

.content-section table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  border: 1px solid var(--kyp-plum-100);
  border-radius: 8px;
  overflow: hidden;
}

.content-section table thead {
  background: var(--kyp-plum-75);
}

.content-section table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--kyp-plum-800);
  border-bottom: 1px solid var(--kyp-plum-100);
  vertical-align: top;
}

.content-section table td {
  padding: 1rem;
  border-bottom: 1px solid var(--kyp-plum-100);
  color: var(--kyp-neutral-text-body);
  vertical-align: top;
}

.content-section table tbody tr:last-child td {
  border-bottom: none;
}

/* ===== Comparison Section ===== */

.comparison-section {
  background: #ffffff;
  padding: 3rem 2rem;
  margin-bottom: 3rem;
  border-top: 1px solid var(--kyp-plum-50);
}

.comparison-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.comparison-column {
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--kyp-plum-100);
}

.comparison-column--old {
  background: var(--kyp-plum-50);
}

.comparison-column--kyp {
  background: #ffffff;
  border: 2px solid var(--kyp-plum-800);
}

.comparison-column h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--kyp-plum-800);
  margin: 0 0 1rem 0;
}

.comparison-column p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--kyp-neutral-text-body);
  margin: 0 0 1rem 0;
}

.comparison-column p:last-of-type {
  margin-bottom: 0;
}

.comparison-column__outcome {
  color: var(--kyp-neutral-text-heading);
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 1rem;
}

/* ===== Proposition Section ===== */

.proposition-section {
  background: #ffffff;
  padding: 3rem 2rem;
  margin-bottom: 3rem;
  border-top: 1px solid var(--kyp-plum-50);
}

.proposition-section__inner {
  text-align: center;
}

.proposition-section h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--kyp-plum-800);
  margin: 0 auto 0.75rem auto;
  line-height: 1.3;
  max-width: 700px;
}

.proposition-section h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: var(--kyp-gold-600);
  margin: 0.75rem auto 1.25rem;
  border-radius: 2px;
}

.proposition-section__subtitle {
  font-size: 1rem;
  color: var(--kyp-neutral-text-body);
  margin: 0 auto 2.5rem auto;
  font-weight: 400;
  max-width: 600px;
  line-height: 1.7;
}

.proposition-section__actors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

/* Three sector cards on the homepage. Stacks to one column on narrow screens. */
.proposition-section__actors--three {
  grid-template-columns: repeat(3, 1fr);
}

/* Equal-height cards with the button pinned to the bottom, so the three
   buttons line up whatever the copy length. The button rules override the
   shared button styles: its fixed height and tight line-height let wrapped
   labels spill out of the box.
   The 4.5rem minimum fits a two-line label, so single-line and wrapped
   buttons all end up the same height. */
.proposition-section__actors--three .actor-card {
  display: flex;
  flex-direction: column;
}

.proposition-section__actors--three .actor-card p {
  flex-grow: 1;
}

.proposition-section__actors--three .actor-card .button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-sizing: border-box;
  height: auto;
  min-height: 4.5rem;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 900px) {
  .proposition-section__actors--three {
    grid-template-columns: 1fr;
  }
}

.actor-card {
  background: var(--kyp-color-surface);
  border: 1px solid var(--kyp-plum-200);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: all 0.2s ease;
}

.actor-card:hover {
  border-color: var(--kyp-plum-200);
  box-shadow: 0 4px 14px rgba(62, 34, 54, 0.1);
}

.actor-card__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--kyp-plum-800);
  margin: 0 0 0.5rem 0;
}

.actor-card__role {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kyp-neutral-text-heading);
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.actor-card p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--kyp-neutral-text-body);
  margin: 0 0 1.5rem 0;
}

.actor-card .button-primary {
  display: inline-block;
  background: var(--kyp-gold-600);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  border: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.actor-card .button-primary:hover {
  background: var(--kyp-gold-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(62, 34, 54, 0.15);
}

.content-section .button-primary {
  display: inline-block;
  background: var(--kyp-gold-600);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  border: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.content-section .button-primary:hover {
  background: var(--kyp-gold-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(62, 34, 54, 0.15);
}

.kyp-pricing .button-primary {
  display: inline-block;
  background: var(--kyp-gold-600);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  border: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 1em;
}

.kyp-pricing .button-primary:hover {
  background: var(--kyp-gold-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(62, 34, 54, 0.15);
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
  .hero__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

. hero__container {
    grid-template-columns: 1fr;
}

  .hero__headline {
    font-size: 1.8rem;
  }

  .hero__subheadline {
    font-size: 1.2rem;
  }

  .comparison-section__inner {
    grid-template-columns: 1fr;
  }

  .sectors-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 2rem 1rem;
  }

  .sectors-section {
    padding: 2.5rem 1rem;
  }

  .pairwise-card__options {
    flex-direction: column;
  }

  .pairwise-divider {
    transform: rotate(90deg);
    margin: 0.5rem 0;
  }
}
/* =========================================================================
   Additions to kyp-site.css — cost calculator and homepage signup form.
   Follows the same token usage as the rest of the file: --kyp-plum-*,
   --kyp-gold-*, --kyp-neutral-*, --kyp-color-* only, no new hex values.
   ========================================================================= */

/* ===== Pairwise Demo — selected state ===== */

.pairwise-option--selected {
  border-color: var(--kyp-plum-800);
  background: var(--kyp-plum-100);
  transform: scale(1.02);
}

/* ===== Cost Calculator ===== */

.cost-calculator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2rem;
}

.cost-calculator__controls {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cost-calculator__field label {
  display: block;
  font-size: 0.9rem;
  color: var(--kyp-neutral-text-body);
  margin-bottom: 0.5rem;
}

.cost-calculator__field input[type="range"] {
  width: 100%;
  accent-color: var(--kyp-plum-800);
}

.cost-calculator__result {
  background: var(--kyp-color-surface);
  border: 1px solid var(--kyp-plum-200);
  border-radius: 8px;
  padding: 2rem;
  text-align: left;
}

.cost-calculator__result-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kyp-neutral-text-heading);
  margin-bottom: 0.5rem;
}

.cost-calculator__result-value {
  display: block;
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--kyp-plum-800);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.cost-calculator__result-note {
  font-size: 0.95rem;
  color: var(--kyp-neutral-text-body);
  margin: 0;
}

/* ===== Breakeven Readout ===== */

.breakeven-readout {
  margin-top: 3rem;
  padding: 2rem;
  background: #ffffff;
  border-top: 2px solid var(--kyp-plum-200);
}

.breakeven-anchor {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--kyp-neutral-text-body);
  margin: 0 0 1.5rem 0;
}

.breakeven-sliders {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.breakeven-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
}

.breakeven-field label {
  display: block;
  font-size: 0.85rem;
  color: var(--kyp-neutral-text-body);
  margin-bottom: 0.5rem;
}

.breakeven-field .slider-value {
  font-weight: 600;
  color: var(--kyp-plum-800);
}

.breakeven-field .tooltip {
  display: block;
  font-size: 0.75rem;
  color: var(--kyp-neutral-text-secondary);
  font-weight: 400;
  margin-top: 0.25rem;
}

.breakeven-field input[type="range"] {
  width: 100%;
  accent-color: var(--kyp-plum-800);
}

.breakeven-calculation {
  background: var(--kyp-color-surface);
  border: 1px solid var(--kyp-plum-200);
  border-radius: 8px;
  padding: 1.5rem;
  margin-left: 2rem;
  flex: 1;
  min-width: 300px;
}

.breakeven-result {
  font-size: 0.95rem;
  color: var(--kyp-plum-900);
  margin: 0;
}

.breakeven-footnote {
  font-size: 0.8rem;
  color: var(--kyp-neutral-text-secondary);
  margin: 0;
  width: 100%;
}

/* ===== Homepage Signup ===== */

.homepage-signup {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
  margin-top: 1rem;
}

.homepage-signup__input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--kyp-color-border);
  border-radius: 4px;
  background: var(--kyp-color-surface);
  color: var(--kyp-color-text);
}

.homepage-signup__input:focus {
  outline: none;
  border-color: var(--kyp-plum-800);
  box-shadow: 0 0 0 2px var(--kyp-plum-100);
}

.homepage-signup .button {
  white-space: nowrap;
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
  .cost-calculator {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .homepage-signup {
    flex-direction: column;
  }

  .breakeven-sliders {
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
  }

  .breakeven-calculation {
    margin-left: 0;
    min-width: auto;
  }

  .breakeven-readout {
    padding: 1.5rem;
  }
}

/* ===== Item Picker (lead-gen demo) ===== */

.item-picker__count {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kyp-gold-600);
  margin: 0 0 1.5rem 0;
}

.item-picker__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.item-picker__pill {
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--kyp-plum-200);
  background: #ffffff;
  color: var(--kyp-neutral-text-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.item-picker__pill:hover {
  border-color: var(--kyp-plum-600);
}

.item-picker__pill--selected {
  background: var(--kyp-plum-800);
  border-color: var(--kyp-plum-800);
  color: #ffffff;
}

.item-picker__pill--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.item-picker__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.item-picker__back {
  padding: 0.75rem 1.5rem;
}

.item-picker__continue {
  padding: 0.75rem 2rem;
  background: var(--kyp-gold-600);
  color: #ffffff;
  border: none;
}

.item-picker__continue:hover:not(:disabled) {
  filter: brightness(0.92);
}

.item-picker__continue:disabled {
  background: var(--kyp-plum-100);
  color: var(--kyp-plum-800);
  cursor: not-allowed;
}

/* ===== How It Works Infographic ===== */

.how-it-works-infographic {
  /* Override this one line to change the font for this section only,
     without touching the site-wide --kyp-font-family token. */
  --infographic-font-family: var(--kyp-font-family);
  font-family: var(--infographic-font-family);
}

.how-it-works-infographic h2 {
  margin-bottom: 0.25rem;
}

.how-it-works-infographic > p {
  color: var(--kyp-neutral-text-body);
  margin-bottom: 2rem;
}

.infographic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.infographic-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--kyp-color-border);
  border-radius: 4px;
  padding: 1.25rem 1.25rem 2.75rem;
  /* Subtle right-edge shading gives a soft radiused illusion without
     an actual large border-radius — a light grey gradient bleeding
     in from the right edge only. */
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0.12) 100%
  );
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.infographic-card:hover {
  border-color: var(--kyp-plum-200);
  box-shadow: 0 4px 14px rgba(62, 34, 54, 0.12);
  transform: translateY(-2px);
}

.infographic-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--kyp-neutral-text-heading);
  margin: 0 0 0.4rem 0;
}

.infographic-card p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--kyp-neutral-text-body);
  margin: 0;
}

.infographic-card__badge {
  position: absolute;
  bottom: -16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* Warm-to-cool colour walk, one per step */
.infographic-card--step1 .infographic-card__badge { background: #C0392B; } /* terracotta */
.infographic-card--step2 .infographic-card__badge { background: #D68910; } /* amber */
.infographic-card--step3 .infographic-card__badge { background: #B7950B; } /* gold */
.infographic-card--shared .infographic-card__half:nth-child(1) .infographic-card__badge { background: #8E7CC3; } /* lilac */
.infographic-card--shared .infographic-card__half:nth-child(3) .infographic-card__badge { background: #5B4B8A; } /* violet */

/* ===== Shared card for steps 4 & 5 (parallel step) =====
   Compressed to fit the SAME total height as one individual card —
   the point of sharing space, rather than doubling the card height. */

.infographic-card--shared {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.infographic-card__half {
  position: relative;
  padding: 0.75rem 1.25rem 1.25rem;
}

.infographic-card__half h4 {
  font-size: 0.78rem;
  margin-bottom: 0.15rem;
}

.infographic-card__half p {
  font-size: 0.68rem;
  line-height: 1.35;
}

.infographic-card__badge--half {
  bottom: -12px;
  right: 12px;
  width: 26px;
  height: 26px;
  font-size: 0.75rem;
}

.infographic-card__divider {
  text-align: center;
  padding: 0.15rem 0;
  background: var(--kyp-neutral-surface-light);
  border-top: 1px dashed var(--kyp-color-border);
  border-bottom: 1px dashed var(--kyp-color-border);
}

.infographic-card__divider span {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kyp-neutral-text-heading);
}

/* ===== Responsive ===== */

@media (max-width: 1024px) {
  .infographic-grid {
    grid-template-columns: 1fr;
  }

  .infographic-card--shared {
    grid-column: span 1;
    flex-direction: column;
  }

  .infographic-card__divider {
    writing-mode: horizontal-tb;
    border-top: 1px dashed var(--kyp-color-border);
    border-bottom: 1px dashed var(--kyp-color-border);
    border-left: none;
    border-right: none;
    padding: 0.3rem 0;
  }
}

/* ===== Estate Agents page ===== */

.kyp-estate-agents-hero {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 2.5rem;
  align-items: center;
  padding-top: 2rem;
}

.kyp-estate-agents-hero__image svg {
  width: 100%;
  height: auto;
}

.kyp-estate-agents-hero__text .button-primary {
  display: inline-block;
  background: var(--kyp-gold-600);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  border: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.kyp-estate-agents-hero__text .button-primary:hover {
  background: var(--kyp-gold-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(62, 34, 54, 0.15);
}

/* ===== Mortgage Advisors page ===== */

.kyp-mortgage-advisors-hero {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 2.5rem;
  align-items: center;
  padding-top: 2rem;
}

.kyp-mortgage-advisors-hero__image svg {
  width: 100%;
  height: auto;
}

.kyp-mortgage-advisors-hero__text .button-primary {
  display: inline-block;
  background: var(--kyp-gold-600);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  border: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.kyp-mortgage-advisors-hero__text .button-primary:hover {
  background: var(--kyp-gold-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(62, 34, 54, 0.15);
}

@media (max-width: 700px) {
  .kyp-estate-agents-hero {
    grid-template-columns: 1fr;
  }

  .kyp-estate-agents-hero__image {
    max-width: 200px;
    margin: 0 auto;
  }

  .kyp-mortgage-advisors-hero {
    grid-template-columns: 1fr;
  }

  .kyp-mortgage-advisors-hero__image {
    max-width: 200px;
    margin: 0 auto;
  }
}

/* -------------------------------------------------------------------------
   CONNECT PAGE — QR code / business card landing page
   ------------------------------------------------------------------------- */

.kyp-connect {
  padding: 3rem 2rem;
  text-align: center;
}

.kyp-connect__intro h1 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--kyp-plum-800);
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}

.kyp-connect__subtitle {
  font-size: 1.1rem;
  color: var(--kyp-neutral-text-body);
  max-width: 500px;
  margin: 0 auto 2.5rem auto;
  line-height: 1.6;
}

.kyp-connect__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 360px;
  margin: 0 auto;
}

.kyp-connect__demo-picker {
  margin-bottom: 0.5rem;
}

.kyp-connect__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kyp-neutral-text-body);
  margin: 0 0 0.75rem 0;
}

.kyp-connect__demo-links {
  display: flex;
  gap: 0.75rem;
}

.kyp-connect__demo-links .button {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  border-radius: 4px;
  background: var(--kyp-gold-600);
  color: #ffffff;
  border: none;
  text-decoration: none;
  text-align: center;
}

.kyp-connect__demo-links .button:hover {
  background: var(--kyp-gold-800);
}

.kyp-connect__link {
  display: block;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--kyp-plum-200);
  border-radius: 8px;
  color: var(--kyp-plum-800);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.kyp-connect__link:hover {
  border-color: var(--kyp-plum-600);
  background: var(--kyp-plum-50);
}

.kyp-connect__direct {
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

.kyp-connect__direct a {
  color: var(--kyp-neutral-text-body);
  text-decoration: underline;
}

.kyp-connect__divider {
  margin: 0 0.5rem;
  color: var(--kyp-neutral-text-body);
}

@media (max-width: 480px) {
  .kyp-connect__demo-links {
    flex-direction: column;
  }
}

/* -------------------------------------------------------------------------
   FAQ BLOCK — question/answer list used on the "How the comparisons work"
   page. Sits inside a .content-section, so it deliberately does NOT rely
   on the generic ".content-section > h3" rule (that one is a direct-child
   selector styled as a centred page subtitle) — these are left-aligned
   question headings, one per FAQ entry, each with its own divider.
   ------------------------------------------------------------------------- */

.faq-block {
  margin-top: 1rem;
}

.faq-block h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--kyp-plum-800);
  text-align: left;
  margin: 0 0 0.5rem 0;
}

.faq-block p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--kyp-neutral-text-body);
  margin: 0 0 1.5rem 0;
}

.faq-block h3:not(:first-child) {
  padding-top: 1.5rem;
  border-top: 1px solid var(--kyp-plum-100);
}
 
.faq-block figure {
  margin: 0 0 1.5rem 0;
  max-width: 460px;
}
 
.faq-block figure img {
  display: block;
  width: 100%;
  height: auto;
}
 
.faq-block figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--kyp-neutral-text-secondary);
}
 
/* -------------------------------------------------------------------------
   PAIRWISE FRUIT DEMO — illustrative animation showing pairwise comparison
   mechanics (pairwise-fruit-demo.php + kyp-pairwise-demo.js). Markup and
   animation live in those two files; this is the only place governing
   colour, so it stays correct automatically if dark mode is ever added
   to this page.
   ------------------------------------------------------------------------- */

.pairwise-demo {
  max-width: 680px;
  margin: 2rem auto 0 auto;
}

.pairwise-demo__stage {
  display: block;
}

.pairwise-demo__title {
  font-size: 1rem;
  font-weight: 600;
  fill: var(--kyp-plum-800);
}

.pairwise-demo__counter {
  font-size: 1rem;
  font-weight: 600;
  fill: var(--kyp-color-text-muted);
}

.pairwise-demo__vs {
  font-size: 1.1rem;
  font-weight: 500;
  fill: var(--kyp-color-text-muted);
}

.pairwise-demo__fruit {
  font-size: 56px;
}

.pairwise-demo__halo {
  stroke: var(--kyp-gold-600);
  stroke-width: 5;
}

.pairwise-demo__scoreboard-fruit {
  font-size: 32px;
}

.pairwise-demo__scoreboard-count {
  font-size: 1rem;
  font-weight: 600;
  fill: var(--kyp-plum-800);
}

.pairwise-demo__rank-number {
  font-size: 1.2rem;
  font-weight: 600;
  fill: var(--kyp-plum-800);
}

.pairwise-demo__rank-fruit {
  font-size: 28px;
}

.pairwise-demo__rank-label {
  font-size: 1rem;
  fill: var(--kyp-neutral-text-body);
}

/* -------------------------------------------------------------------------
   ABOUT PAGE MARKS GRAPHIC — three exclamation marks reframed as three
   question marks (about-marks-graphic.php). Static illustration, no JS.
   ------------------------------------------------------------------------- */

.about-marks-graphic {
  max-width: 680px;
  margin: 1.5rem auto;
}

.about-marks-graphic__stage {
  display: block;
}

.about-marks-graphic__exclamations {
  fill: var(--kyp-plum-600);
}

.about-marks-graphic__arrow {
  stroke: var(--kyp-color-text-muted);
  stroke-width: 3;
}

.about-marks-graphic__questions {
  fill: var(--kyp-gold-600);
  stroke: var(--kyp-gold-600);
}

.about-marks-graphic__label {
  font-size: 0.95rem;
}

.about-marks-graphic__label--exclamations {
  fill: var(--kyp-plum-600);
}

.about-marks-graphic__label--questions {
  fill: var(--kyp-gold-800);
}

/* -------------------------------------------------------------------------
   ABOUT PAGE — uses standard .content-section styling throughout for
   consistency with every other page. Only the closing Carnegie quote
   needs its own treatment, since no blockquote pattern exists site-wide.
   ------------------------------------------------------------------------- */

.kyp-about cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: var(--kyp-plum-600);
  margin: 1.5rem 0;
}

.kyp-about__quote {
  text-align: center;
  max-width: 700px;
  margin: 2rem auto;
}

.kyp-about__quote p {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--kyp-plum-800);
  margin: 0 0 0.5rem 0;
}

.kyp-about__quote cite {
  margin: 0;
}

/* =========================================================================
   DARK MODE ACCESSIBILITY FIXES
   Light brand-scale backgrounds (plum-50, plum-75, white, etc.) remain
   unchanged in dark mode, but --kyp-color-text becomes #EDE6E3 (light),
   creating invisible 1:1 contrast. These rules override text color to
   --kyp-plum-800 (dark brown, #3E2236) for readable 8-11:1 contrast.
   ========================================================================= */

[data-theme="dark"] {
  .content-section--alt,
  .content-section table thead,
  .pairwise-option,
  .hero__ctas .button-secondary:hover,
  .comparison-column--old,
  .actor-card,
  .cost-calculator__result,
  .kyp-connect__link:hover,
  .pairwise-option:hover,
  .comparison-column--kyp,
  .item-picker__back  {
    color: var(--kyp-plum-800);
  }

}

/* =========================================================================
   LIGHT MODE ACCESSIBILITY FIXES
   Gold backgrounds (gold-600 for dividers, gold-800 for hover states)
   have insufficient contrast with dark inherited text in light mode.
   Override to white text for 5–12:1 contrast in both modes.
   ========================================================================= */

.content-section h2::after,
.content-section h3::after,
.comparison-section h2::after,
.kyp-page-tagline::after,
.proposition-section h2::after,
.hero__ctas .button-primary:hover,
.actor-card .button-primary:hover,
.content-section .button-primary:hover,
.kyp-estate-agents-hero__text .button-primary:hover,
.kyp-mortgage-advisors-hero__text .button-primary:hover,
.kyp-connect__demo-links .button:hover {
  color: #ffffff;
}

/* =========================================================================
   REDUCED MOTION ACCESSIBILITY
   Disable transforms and shorten transitions for users with
   prefers-reduced-motion enabled.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero__ctas .button-primary,
  .actor-card .button-primary,
  .content-section .button-primary,
  .kyp-estate-agents-hero__text .button-primary,
  .kyp-mortgage-advisors-hero__text .button-primary,
  .pairwise-option {
    transition-duration: 0.01ms !important;
  }

  .hero__ctas .button-primary:hover,
  .actor-card .button-primary:hover,
  .content-section .button-primary:hover,
  .kyp-estate-agents-hero__text .button-primary:hover,
  .kyp-mortgage-advisors-hero__text .button-primary:hover,
  .pairwise-option:hover {
    transform: none;
  }

  .pairwise-option--selected {
    transform: none;
  }
}

.kyp-footer__disclaimer {
  font-size: 0.8rem;
  color: var(--kyp-neutral-600);
  max-width: 42em;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   CHOICE GRAPHIC — hero illustration on the "How the comparisons work"
   page (choice-graphic.svg). The illustration itself (nine assorted
   chairs, both stick figures) is real vector artwork converted straight
   from the supplied source file — its fills are inline in the SVG and
   NOT themed here, so it's left untouched below. Only the header pills,
   subheads, divider and callout boxes wrapped around that artwork are
   styled here, using red/green colours sampled directly from the
   artwork itself (#CC443A / #4E8153) rather than the KYP brand tokens —
   this is a standalone explainer graphic, not brand-chrome, and the
   colour-by-status meaning (red = problem, green = resolved) doesn't map
   onto plum/gold. All text in the graphic is native SVG <text> — never
   baked into an image — so it stays selectable and accessible.
   ------------------------------------------------------------------------- */
 
/* No max-width cap here deliberately: it's vector art, so filling the full
   hero image column at any desktop width costs nothing in quality, and a
   fixed cap just leaves dead space either side once the column (0.9fr)
   grows past it on wider screens. */
   
.kyp-choice-graphic {
  width: 100%;
  margin: 0 auto;
}
 
.kyp-choice-graphic__headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
 
.kyp-choice-graphic__header {
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 0.5rem 0.4rem;
  border-radius: 999px;
}
 
.kyp-choice-graphic__header--left {
  background: #FCE9E7;
  color: #CC443A;
}
 
.kyp-choice-graphic__header--right {
  background: #E9F1EA;
  color: #4E8153;
}
 
.kyp-choice-graphic__stage-wrap {
  display: block;
  width: 100%;
}
 
.kyp-choice-graphic__stage {
  display: block;
  width: 100%;
  height: auto;
}
 
.kyp-choice-graphic__callouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.6rem;
}
 
.kyp-choice-graphic__callout {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #2b2b2b;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
}
 
.kyp-choice-graphic__callout--left {
  background: #FCE9E7;
}
 
.kyp-choice-graphic__callout--right {
  background: #E9F1EA;
}
 
.kyp-choice-graphic__callout-icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffffff;
}
 
.kyp-choice-graphic__callout--left .kyp-choice-graphic__callout-icon {
  background: #CC443A;
}
 
.kyp-choice-graphic__callout--right .kyp-choice-graphic__callout-icon {
  background: #4E8153;
}
 
@media (max-width: 700px) {
  /* Below 700px the hero grid stacks to a single column, so the image div's
     track becomes the full content width. Unlike the desktop rule above,
     a cap here is deliberate — full-bleed would make the graphic far
     larger than a hero illustration should read on a phone. */
  .kyp-choice-graphic {
    max-width: 560px;
    margin: 0 auto;
  }
}