/* ==========================================================================
   Homepage: the few rules the Tailwind sections don't cover (home-film.js).
   Cost, Two kinds of protection, About, Learning hub, FAQ and the hero layout are
   Tailwind utilities (assets/css/tw.css, built from tailwind.config.js).
     pf-say case-study testimonial under the slider (proof.js)
     hk     Cost & ROI calculator on yellow (Homepage 1's mini calculator classes)
   ========================================================================== */

/* --- Case study: Homepage 1's testimonial under the slider (6 Nov; replaced the Trial scope row) ---
   The quote on a 3 px yellow rule (Homepage 1's blockquote), the attribution under it, the
   case-study button at the right on the same baseline. */
.pf-say { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-8); margin-top: var(--s-8); }
.pf-say__quote { margin: 0; max-width: 62ch; padding-left: var(--s-6); border-left: 3px solid var(--cg-yellow); }
.pf-say__quote blockquote { margin: 0; }
.pf-say__quote p { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); font-weight: 500; line-height: 1.4; color: var(--cg-white); text-wrap: pretty; }
.pf-say__quote figcaption { margin-top: var(--s-4); font-size: 0.875rem; color: var(--n-400); }
.pf-say__link { flex: none; }

/* --- Cost & ROI calculator: on brand yellow (5 Nov); the panel is a white card ------- */
.hk { padding-block: var(--section-y); }
.hk h2 { margin-top: var(--s-4); }
.hk-lead { margin-top: var(--s-5); max-width: 46ch; font-size: var(--t-lead); line-height: 1.5; color: var(--muted); }
.hk .chapter-label { color: var(--muted); }
.hk .calc-panel { --card: var(--cg-white); --rule: rgba(23, 22, 19, 0.14); border-color: var(--cg-black); box-shadow: 0 24px 60px rgba(23, 22, 19, 0.18); }
.hk .range { --track: var(--n-200); }
/* The three points (6 Nov): one clean list that fills the column down to the panel's foot */
.hk .calc-teaser { align-items: stretch; }
.hk .calc-teaser > div:first-child { display: flex; flex-direction: column; }
.hk .calc-points { flex: 1; display: grid; grid-auto-rows: 1fr; margin-top: var(--s-8); border-top: 2px solid var(--cg-black); }
.hk .calc-points li { grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.hk .calc-points li:last-child { border-bottom: 0; }
.hk .calc-points .t-data { font-size: calc(3rem * var(--data-scale)); line-height: 0.9; color: var(--cg-black); }
.hk .calc-points strong { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.hk .calc-points p { margin-top: 6px; max-width: 46ch; font-size: 0.9375rem; line-height: 1.5; color: rgba(0, 0, 0, 0.72); }

/* --- Eyebrows on white sections (film.css only darkens them on light and paper) --------- */
.surface-white .chapter-label { color: var(--n-600); }


@media (max-width: 767px) {
  .pf-say { flex-direction: column; align-items: stretch; gap: var(--s-6); margin-top: var(--s-7); }
  .pf-say__quote { padding-left: var(--s-5); }
  .pf-say__link { justify-content: center; }
}
@media (max-width: 1023px) {
  .hk .calc-points { grid-auto-rows: auto; margin-top: var(--s-6); }
  .hk .calc-points li { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .hk .calc-points .t-data { font-size: calc(2.25rem * var(--data-scale)); }
}

/* --- Impact test after the case study (6 Nov; impactProof): white, no video ----------------------
   Heading at the section size (.t-h2) with the lead beside it, then the head-to-head table:
   polymer in black with yellow ticks, steel set back in grey with crosses. */
.ip { padding-block: var(--section-y); }
.ip__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; }
.ip__title { margin-top: var(--s-4); max-width: 20ch; }
.ip__lead { max-width: 46ch; font-size: var(--t-lead); line-height: 1.5; color: var(--n-600); }
.ip__duel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-9); margin-top: var(--s-9); align-items: start; }
.ip__q { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--display-tracking); font-size: calc(clamp(1.5rem, 1.15rem + 0.9vw, 2.125rem) * var(--display-scale)); line-height: 0.98; }
.ip__intro p { margin-top: var(--s-4); max-width: 40ch; line-height: 1.55; color: var(--n-600); }
.ip__intro .btn { margin-top: var(--s-6); }
.ip__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ip__table thead td { width: 18%; }
.ip__table thead td, .ip__table thead th { padding: 0 var(--s-5) var(--s-4) 0; border-bottom: 2px solid var(--cg-black); text-align: left; vertical-align: bottom; }
.ip__tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-3); border: 1px solid rgba(0,0,0,0.3); font-family: var(--font-label); font-stretch: var(--label-stretch); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n-600); }
.ip__tag--us { border-color: var(--cg-yellow); background: var(--cg-yellow); color: var(--cg-black); }
.ip__table tbody th, .ip__table tbody td { padding: var(--s-6) var(--s-5) var(--s-6) 0; border-bottom: 1px solid var(--rule-light); text-align: left; vertical-align: top; }
.ip__table tbody th { width: 18%; padding-top: calc(var(--s-6) + 6px); font-family: var(--font-label); font-stretch: var(--label-stretch); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n-600); }
.ip__table td { width: 41%; }
.ip__table td b { display: block; margin-top: var(--s-3); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--display-tracking); font-size: calc(clamp(1.375rem, 1.05rem + 0.8vw, 2rem) * var(--display-scale)); line-height: 1; }
.ip__sub { display: block; margin-top: var(--s-2); max-width: 34ch; font-size: 0.9375rem; line-height: 1.5; color: var(--n-600); }
.ip__mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.ip__mark .icon { width: 16px; height: 16px; }
.ip__us .ip__mark { background: var(--cg-yellow); color: var(--cg-black); }
.ip__us b { color: var(--cg-black); }
.ip__them .ip__mark { border: 1px solid rgba(0,0,0,0.3); color: var(--n-600); }
.ip__them b { color: var(--n-500); }
@media (max-width: 1023px) {
  .ip__head, .ip__duel { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}
@media (max-width: 639px) {
  .ip__table thead { display: none; }
  .ip__table, .ip__table tbody, .ip__table tr { display: block; }
  .ip__table { table-layout: auto; }
  .ip__table tbody tr { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule-light); }
  .ip__table tbody th, .ip__table tbody td { display: block; width: auto; padding: 0; border: 0; }
  .ip__table tbody td { margin-top: var(--s-4); }
  .ip__table tbody td::before { content: attr(data-col); display: block; margin-bottom: var(--s-2); font-family: var(--font-label); font-stretch: var(--label-stretch); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n-600); }
  .ip__us::before { color: var(--cg-black) !important; }
  .ip__table td b { display: inline; margin: 0 0 0 var(--s-2); vertical-align: middle; }
}