/* ============================================================
   FINGERPRINT (DERMATOGLYPHICS) REPORT
   Prefix: fp-*   Uses the site theme variables.
   ============================================================ */

/* ── Intro ── */
.fp-intro { padding: 6rem 0 2rem; text-align: center; }
.fp-intro > .container > span {
  font-size: 1.7rem; color: var(--text-muted); font-style: italic;
  display: block; margin-bottom: .6rem;
}
.fp-intro h1 {
  font-size: 3.8rem; font-weight: 800; color: var(--dark);
  text-transform: uppercase; line-height: 1.3;
}
.fp-intro h1 span { color: var(--primary); }
.fp-lead {
  font-size: 1.65rem; color: var(--text-muted); line-height: 1.85;
  max-width: 74rem; margin: 1.8rem auto 0;
}

/* ── Shared card ── */
.fp-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 1.4rem; padding: 2.6rem 2.4rem;
  margin-bottom: 2.4rem;
}
/* Plain inline flow (not flex — see git history for why) for the icon +
   heading text. The clipping this was chasing turned out not to be a
   heading-layout bug at all: it was html2canvas capturing from a nonzero
   window.scrollX because the export's windowWidth override didn't also
   pin scrollX/x to 0, shifting the ENTIRE captured page left (every line,
   not just headings — see the html2canvas() call). That's fixed there, so
   headings keep their icon in the exported PDF same as on screen. */
.fp-card h3 {
  font-size: 2rem; font-weight: 700; color: var(--dark);
  margin-bottom: 2rem; line-height: 1.3;
}
.fp-card h3 i { color: var(--primary); font-size: 1.8rem; margin-right: 1rem; }

/* ── Form ── */
.fp-form-wrap { padding: 2rem 0 7rem; }
.fp-label {
  display: block; font-size: 1.35rem; font-weight: 600;
  color: var(--text); margin-bottom: .6rem;
}
.fp-label .req { color: #b71c1c; }
.fp-input {
  width: 100%; padding: 1.15rem 1.4rem;
  border: 1.5px solid var(--border); border-radius: .8rem;
  font-size: 1.45rem; background: #fff; color: var(--text);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.fp-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
/* Number spinners add clutter on a 10-field grid */
.fp-count { -moz-appearance: textfield; }
.fp-count::-webkit-outer-spin-button,
.fp-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.fp-radios { display: flex; gap: 2rem; padding-top: .9rem; }
.fp-radios label {
  font-size: 1.45rem; color: var(--text);
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
}
.fp-radios input { width: 1.7rem; height: 1.7rem; accent-color: var(--primary); }

/* Ten-finger rows */
.fp-hand { height: 100%; }
.fp-finger {
  display: grid;
  grid-template-columns: 8.5rem 1fr 1.3fr;
  gap: 1rem; align-items: center;
  padding: .7rem 0;
}
.fp-finger + .fp-finger { border-top: 1px dashed var(--border); }
.fp-finger-name {
  font-size: 1.4rem; font-weight: 600; color: var(--text);
}

.fp-terms {
  text-align: center; font-size: 1.35rem;
  color: var(--text-muted); margin: 2.4rem 0 1.6rem;
}
.fp-terms a { color: var(--primary); font-weight: 600; }

.fp-submit-row {
  display: flex; gap: 1.4rem; justify-content: center;
  flex-wrap: wrap; margin-top: 1rem;
}
.fp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  padding: 1.3rem 3rem;
  background: var(--primary); color: #fff;
  border: 2px solid var(--primary); border-radius: 5rem;
  font-size: 1.55rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: all .3s;
}
.fp-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.fp-btn-outline { background: transparent; color: var(--primary); }
.fp-btn-outline:hover { background: var(--primary); color: #fff; }

/* ── Alerts ── */
.fp-alert {
  padding: 1.6rem 2rem; border-radius: 1rem;
  font-size: 1.45rem; line-height: 1.7; margin-bottom: 2.4rem;
  display: flex; gap: 1.2rem; align-items: flex-start;
}
.fp-alert ul { margin: 0; padding-left: 1.8rem; }
.fp-alert-error { background: #fdf0f0; border: 1px solid #f5c6cb; color: #721c24; }

/* ── Testing helper (Fill Sample Data) ──
   Deliberately styled like a dev tool, not a real call-to-action, so it
   never gets mistaken for part of the actual form. */
.fp-testfill {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  background: #fffbe6; border: 1px dashed #e0c14a;
  border-radius: .9rem; padding: 1.2rem 1.6rem;
  margin-bottom: 2.4rem;
}
.fp-testfill-btn {
  display: inline-flex; align-items: center; gap: .7rem;
  background: #fff; border: 1.5px dashed #b08d00;
  color: #7a6100; font-size: 1.35rem; font-weight: 700;
  padding: .8rem 1.6rem; border-radius: .7rem;
  cursor: pointer; white-space: nowrap; transition: background .2s;
}
.fp-testfill-btn:hover { background: #fff4cc; }
.fp-testfill > span { font-size: 1.25rem; color: #8a7420; }
@media (max-width: 575px) {
  .fp-testfill { flex-direction: column; align-items: flex-start; }
}

/* ── Report ── */
.fp-report { padding: 4rem 0 7rem; }
.fp-report-head { text-align: center; margin-bottom: 3.4rem; }
.fp-report-head > span {
  font-size: 1.6rem; color: var(--text-muted); font-style: italic;
  display: block; margin-bottom: .6rem;
}
.fp-report-head h1 {
  font-size: 3.4rem; font-weight: 800; color: var(--dark); line-height: 1.3;
}
.fp-report-head h1 span { color: var(--primary); }
.fp-meta { font-size: 1.45rem; color: var(--text-muted); margin-top: 1rem; }

/* ════════════════════════════════════════════════════════════
   REPORT FIGURES
   Every figure is drawn in HTML/CSS rather than a chart library:
   the report is read by a parent, so a number is always shown with
   its own colour and a line explaining it. Each block takes its hue
   from a --c custom property set inline from the PHP palette
   (fp_palette() in includes/fingerprint.php), sampled from the cover
   artwork so the whole document reads as one set.

   Text colour note: body copy is deliberately near-black, not grey.
   Grey reads fine on a backlit screen but washes out badly once the
   page has been rasterised into a PDF and viewed on a phone.
   ════════════════════════════════════════════════════════════ */

/* Each section carries its own accent (--c) and a pale tint of it (--bg),
   set inline from fp_sec_style() in PHP. The tint is what stops fifteen
   pages of white cards blurring into one another. */
.fp-sec {
  background: var(--bg, #fff);
  border-color: var(--c, var(--border));
}

/* Heading reads as a filled band rather than a line of text — the strongest
   single cue that a new section has started. */
.fp-sec h3 {
  background: var(--c, var(--primary));
  color: #fff;
  border-radius: .9rem;
  padding: 1.1rem 1.6rem;
  margin: -.6rem -.6rem 1.8rem;
  display: block;
}
.fp-sec h3 i {
  color: #fff;
  background: rgba(255, 255, 255, .22);
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-right: 1rem; vertical-align: middle;
}

/* Cards sitting inside a tinted section need to be white to stay legible */
.fp-sec .fp-lobe,
.fp-sec .fp-qcard,
.fp-sec .fp-lcard,
.fp-sec .fp-drive-col,
.fp-sec .fp-band { background: #fff; }

/* Brain artwork above the left/right figures */
.fp-brain-art {
  display: block; width: 100%; max-width: 46rem;
  height: auto; margin: 0 auto 1.6rem;
}

/* ── Coloured meter row (intelligences, subjects) ── */
.fp-meters { display: flex; flex-direction: column; gap: 1.5rem; }
.fp-meters-tight { gap: 1.1rem; }
.fp-meter-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .5rem;
}
.fp-meter-name { font-size: 1.55rem; font-weight: 700; color: var(--dark); }
.fp-meter-head b {
  font-size: 1.7rem; font-weight: 800; color: var(--c, var(--primary));
}
.fp-meter-track {
  height: 1.1rem; border-radius: 1rem;
  background: #ececec; overflow: hidden;
}
.fp-meter-track > i { display: block; height: 100%; background: var(--c, var(--primary)); }
.fp-meter-desc {
  font-size: 1.4rem; color: var(--text); margin: .5rem 0 0; line-height: 1.6;
}

/* ── Top-three highlight strip ── */
.fp-top3 { display: flex; gap: 1rem; margin-bottom: 2.2rem; flex-wrap: wrap; }
.fp-top3-item {
  flex: 1 1 14rem; display: flex; align-items: center; gap: 1rem;
  background: var(--c); border-radius: 1rem; padding: 1.1rem 1.4rem;
}
.fp-top3-rank {
  width: 2.8rem; height: 2.8rem; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--dark);
  font-size: 1.5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.fp-top3-item strong { color: #fff; font-size: 1.55rem; font-weight: 700; }

/* ── Brain bias ── */
.fp-bias { display: flex; gap: 1.6rem; margin-bottom: 1.4rem; }
.fp-bias-side {
  flex: 1; text-align: center; border-radius: 1.2rem;
  padding: 1.6rem 1rem; background: var(--c);
}
.fp-bias-side span {
  display: block; font-size: 3.2rem; font-weight: 800; color: #fff; line-height: 1.05;
}
.fp-bias-side small { font-size: 1.4rem; color: #fff; font-weight: 600; }
.fp-bias-bar {
  display: flex; height: 1.4rem; border-radius: 1rem;
  overflow: hidden; margin-bottom: 2.2rem; background: #ececec;
}
.fp-bias-bar > i { display: block; height: 100%; }

/* ── Tables ── */
.fp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fp-table { width: 100%; border-collapse: collapse; min-width: 40rem; }
.fp-table th {
  background: var(--light-bg); padding: 1.2rem 1.4rem;
  font-size: 1.3rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dark); font-weight: 700; text-align: left;
  white-space: nowrap;
}
.fp-table td {
  padding: 1.2rem 1.4rem; border-top: 1px solid var(--border);
  font-size: 1.5rem; color: var(--text); vertical-align: middle;
}
.fp-table td small {
  display: block; font-size: 1.25rem; color: var(--text); margin-top: .2rem;
}
.fp-table .fp-th { font-weight: 700; color: var(--dark); }
.fp-table .fp-total { font-weight: 800; color: var(--primary); }

/* Traits table — each column headed in the colour of its brain half */
.fp-traits { width: 100%; border-collapse: collapse; }
.fp-traits th {
  background: var(--c); color: #fff; font-weight: 700;
  font-size: 1.35rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 1rem 1.4rem; text-align: left; width: 50%;
}
.fp-traits td {
  width: 50%; padding: 1rem 1.4rem; font-size: 1.45rem;
  color: var(--text); border-top: 1px solid var(--border);
}

.fp-note { font-size: 1.5rem; color: var(--text); margin-bottom: 1.8rem; line-height: 1.6; }
.fp-note-warn { color: #b71c1c; font-weight: 600; margin-top: 1.4rem; margin-bottom: 0; }

/* ── Psychological drive ── */
.fp-drive { display: flex; gap: 1.6rem; }
.fp-drive-col {
  flex: 1; border: 2px solid var(--c); border-radius: 1.2rem;
  padding: 1.6rem 1.6rem 1.8rem; min-width: 0;
}
.fp-drive-pct {
  font-size: 3.2rem; font-weight: 800; color: var(--c); line-height: 1.05;
}
.fp-drive-name {
  display: block; font-size: 1.75rem; font-weight: 800;
  color: var(--dark); margin-bottom: .8rem;
}
.fp-drive-kw {
  font-size: 1.35rem; font-weight: 700; color: var(--c);
  margin: 0 0 .9rem; line-height: 1.5;
}
.fp-drive-ch { font-size: 1.4rem; color: var(--text); margin: 0 0 1rem; line-height: 1.6; }

.fp-tips { margin: 0; padding-left: 1.8rem; }
.fp-tips li { font-size: 1.4rem; color: var(--text); line-height: 1.6; margin-bottom: .5rem; }
.fp-tips li::marker { color: var(--c, var(--primary)); }

/* ── Brain lobes ── */
.fp-lobes { display: flex; flex-direction: column; gap: 1.4rem; }
.fp-lobe {
  display: flex; gap: 1.4rem; align-items: flex-start;
  border-left: 5px solid var(--c); background: var(--light-bg);
  border-radius: 0 1rem 1rem 0; padding: 1.4rem 1.6rem;
}
.fp-lobe-val {
  flex: none; width: 6rem; height: 6rem; border-radius: 50%;
  background: var(--c); color: #fff;
  font-size: 2.1rem; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.fp-lobe-val small { font-size: 1.1rem; font-weight: 700; margin-left: .1rem; }
.fp-lobe-txt { flex: 1; min-width: 0; }
.fp-lobe-txt strong {
  display: block; font-size: 1.55rem; font-weight: 700;
  color: var(--dark); margin-bottom: .7rem;
}
.fp-lobe-txt .fp-meter-track { margin-bottom: .7rem; }
.fp-lobe-txt p { font-size: 1.38rem; color: var(--text); margin: 0; line-height: 1.6; }

/* ── Quotient cards ── */
.fp-qcards { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.fp-qcard {
  flex: 1 1 20rem; border: 2px solid var(--c); border-radius: 1.2rem;
  padding: 1.4rem 1.6rem 1.6rem; min-width: 0;
}
.fp-qcard-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .6rem;
}
.fp-qcard-code {
  background: var(--c); color: #fff; font-weight: 800; font-size: 1.5rem;
  padding: .35rem 1.1rem; border-radius: 2rem; letter-spacing: .04em;
}
.fp-qcard-top b { font-size: 2.2rem; font-weight: 800; color: var(--c); }
.fp-qcard > strong {
  display: block; font-size: 1.5rem; font-weight: 700;
  color: var(--dark); margin-bottom: .8rem;
}
.fp-qcard .fp-meter-track { margin-bottom: .8rem; }
.fp-qcard p { font-size: 1.35rem; color: var(--text); margin: 0; line-height: 1.6; }

/* ── Learning style cards ── */
.fp-lcards { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.fp-lcard {
  flex: 1 1 22rem; border: 2px solid var(--border); border-radius: 1.2rem;
  padding: 1.5rem 1.6rem 1.7rem; min-width: 0;
}
.fp-lcard.is-top { border-color: var(--c); background: var(--light-bg); }
.fp-lcard-head {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;
}
.fp-lcard-head i {
  width: 3.6rem; height: 3.6rem; flex: none; border-radius: 50%;
  background: var(--c); color: #fff; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
}
.fp-lcard-head span {
  flex: 1; font-size: 1.65rem; font-weight: 700; color: var(--dark);
}
.fp-lcard-head b { font-size: 2rem; font-weight: 800; color: var(--c); }
.fp-lcard .fp-meter-track { margin-bottom: .9rem; }
.fp-lcard > p { font-size: 1.38rem; color: var(--text); margin: 0 0 1rem; line-height: 1.6; }

/* ── TFRC bands ── */
.fp-bands { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.fp-band {
  flex: 1 1 20rem;
  border: 2px solid var(--border); border-radius: 1rem;
  padding: 1.6rem 1.8rem; position: relative;
  background: #fff;
}
.fp-band strong { display: block; font-size: 1.6rem; color: var(--dark); }
.fp-band span { font-size: 1.4rem; color: var(--text); font-weight: 600; }
.fp-band.is-hit {
  border-color: var(--c, var(--primary));
  background: var(--c, var(--primary));
}
.fp-band.is-hit strong,
.fp-band.is-hit span { color: #fff; }
.fp-band.is-hit i {
  position: absolute; top: 1.4rem; right: 1.4rem;
  color: #fff; font-size: 1.8rem;
}

.fp-disclaimer {
  font-size: 1.35rem; color: var(--text); line-height: 1.75;
  background: var(--light-bg); border-radius: 1rem;
  padding: 1.8rem 2rem; margin: 1rem 0 2.6rem;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .fp-intro h1 { font-size: 2.9rem; }
  .fp-report-head h1 { font-size: 2.6rem; }
}
@media (max-width: 767px) {
  .fp-intro { padding: 4rem 0 1rem; }
  .fp-card { padding: 2rem 1.6rem; border-radius: 1.2rem; }
  .fp-card h3 { font-size: 1.8rem; }
  /* Stack each finger so the inputs stay comfortably tappable */
  .fp-finger {
    grid-template-columns: 1fr;
    gap: .7rem; padding: 1.1rem 0;
  }
  .fp-finger-name {
    font-size: 1.35rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--primary);
  }
  .fp-btn { width: 100%; }
  .fp-band { flex: 1 1 100%; }
  .fp-bias, .fp-drive { flex-direction: column; }
  .fp-top3 { flex-direction: column; }
}

/* ── Print (Save as PDF) ── */
@media print {
  .topbar, #site-header, footer, .fp-submit-row { display: none !important; }
  .fp-card { break-inside: avoid; border-color: #ccc; }
  .fp-report { padding: 0; }
  body { background: #fff; }
}

.fp-btn-wa { background: #25d366; border-color: #25d366; }
.fp-btn-wa:hover { background: #1da851; border-color: #1da851; color: #fff; }
.fp-btn:disabled { opacity: .65; cursor: not-allowed; }

/* ============================================================
   CONSULTATION PROMPT (between report sections)
   ============================================================ */
.fp-consult {
  display: flex; align-items: center; gap: 2rem;
  background: linear-gradient(100deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 1.4rem; padding: 2.4rem 2.6rem;
  margin-bottom: 2.4rem; color: #fff;
}
.fp-consult-ico {
  width: 5.4rem; height: 5.4rem; flex-shrink: 0;
  border-radius: 50%; background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; color: #fff;
}
.fp-consult-txt { flex: 1; }
.fp-consult-txt strong {
  display: block; font-size: 1.9rem; font-weight: 700;
  color: #fff; margin-bottom: .4rem;
}
.fp-consult-txt p {
  font-size: 1.45rem; color: rgba(255,255,255,.85);
  line-height: 1.7; margin: 0;
}
.fp-consult-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .7rem;
  background: #25d366; color: #fff;
  padding: 1.2rem 2.4rem; border-radius: 5rem;
  font-size: 1.5rem; font-weight: 700; text-decoration: none;
  transition: background .25s, transform .2s;
}
.fp-consult-btn:hover { background: #1da851; color: #fff; transform: translateY(-2px); }

/* ============================================================
   PDF-ONLY PIECES
   Hidden while browsing; switched on for the html2pdf capture.
   ============================================================ */
.fp-pdf-only { display: none !important; }
body.fp-exporting .fp-pdf-only { display: flex !important; }
body.fp-exporting span.fp-pdf-only { display: block !important; }

.fp-pdf-head {
  align-items: center; gap: 1.6rem;
  border-bottom: 3px solid var(--primary);
  padding-bottom: 1.4rem; margin-bottom: 2.4rem;
}
.fp-pdf-head img { height: 5.4rem; width: auto; }
.fp-pdf-head > div { flex: 1; }
.fp-pdf-head strong {
  display: block; font-size: 1.9rem; font-weight: 800; color: var(--primary);
}
.fp-pdf-head span { font-size: 1.3rem; color: var(--text-muted); }
.fp-pdf-tfrc {
  text-align: center; font-size: 1.15rem; color: var(--text-muted);
  border: 2px solid var(--primary); border-radius: .8rem;
  padding: .6rem 1.2rem; line-height: 1.2;
}
.fp-pdf-tfrc b { display: block; font-size: 2rem; color: var(--primary); }

.fp-pdf-foot {
  justify-content: center;
  font-size: 1.25rem; color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 1.2rem; margin-top: 1rem;
}
.fp-consult-num {
  font-size: 1.3rem; font-weight: 700; color: #fff;
  margin-left: 1.4rem; white-space: nowrap;
}

/* During export: drop the on-screen chrome and keep blocks whole */
body.fp-exporting .fp-consult-btn { display: none; }
body.fp-exporting .fp-card,
body.fp-exporting .fp-consult { break-inside: avoid; page-break-inside: avoid; }
body.fp-exporting .fp-report-head { display: none; }   /* letterhead replaces it */

/* ==============================================================
   MOBILE-FIRST PDF EXPORT
   ==============================================================
   This report is read on a phone far more often than it is printed, and a
   phone's PDF viewer always fits the PAGE WIDTH to the screen. So whatever
   width the content is composed at gets mapped onto the phone's ~390px of
   screen - a desktop-width capture arrives shrunk to roughly a third size
   and has to be pinch-zoomed and panned to read at all.

   So the export is composed at phone width instead: #fpDoc is pinned to
   440px and everything stacks into one column. Rendered at 440px and
   displayed across a phone's ~390px, text lands very close to 1:1 - the
   size it is when reading the report on the site. The PDF runs to more
   pages this way, which is the intended trade: length is free, legibility
   is not. Page size (A4, set in fingerprint-report.php) is independent of
   this and only decides how large the same composition prints on paper.

   Note the mobile media queries can't do this job on their own. They key
   off VIEWPORT width, so they don't fire at all when the export is composed
   on a desktop - the stacking has to be asserted explicitly here. Every
   selector leads with body.fp-exporting, which outranks the plain
   single-class rules in those media queries on specificity. */

/* Root size is pinned back to the site's normal 1rem = 10px: new-style.css
   drops it to 50% below 575px, which made a phone-generated PDF come out
   measurably shorter than a desktop-generated one from the same report. */
html.fp-exporting { font-size: 62.5% !important; }
body.fp-exporting #fpDoc { width: 440px !important; max-width: none !important; }

/* Everything side-by-side stacks at this width — except the two Brain Bias
   figures, which are short enough to sit as a pair and keep that section
   inside one page (a section that overflows gets scaled down to fit, which
   is what made Brain Lobes render visibly narrower than its neighbours). */
body.fp-exporting .fp-bands,
body.fp-exporting .fp-drive,
body.fp-exporting .fp-qcards,
body.fp-exporting .fp-lcards,
body.fp-exporting .fp-top3 { flex-direction: column; }
body.fp-exporting .fp-band,
body.fp-exporting .fp-qcard,
body.fp-exporting .fp-lcard,
body.fp-exporting .fp-top3-item { flex: 1 1 auto; }

/* Goal Driven vs Process Driven is a comparison — it reads badly with one
   half on each page. Tightening the spacing (not the type) brings both
   columns inside a single page. */
body.fp-exporting .fp-drive { gap: 1rem; }
body.fp-exporting .fp-drive-col { padding: 1.1rem 1.2rem 1.2rem; }
body.fp-exporting .fp-drive-pct { font-size: 2.8rem; }
body.fp-exporting .fp-drive-name { margin-bottom: .4rem; }
body.fp-exporting .fp-drive-kw { margin-bottom: .6rem; line-height: 1.45; }
body.fp-exporting .fp-drive-ch { margin-bottom: .7rem; line-height: 1.5; }
body.fp-exporting .fp-tips li { margin-bottom: .3rem; line-height: 1.5; }

body.fp-exporting .fp-bias { flex-direction: row; gap: 1.2rem; }
body.fp-exporting .fp-bias-side { padding: 1.2rem .8rem; }
body.fp-exporting .fp-bias-side span { font-size: 2.8rem; }
body.fp-exporting .fp-brain-art { max-width: 30rem; margin-bottom: 1.2rem; }

body.fp-exporting .fp-card { padding: 1.8rem 1.6rem; margin-bottom: 1.6rem; border-radius: 1.2rem; }
body.fp-exporting .fp-card h3 { font-size: 2rem; margin-bottom: 1.4rem; }
body.fp-exporting .fp-card h3 i { font-size: 1.8rem; margin-right: .8rem; }

/* Type in the PDF runs LARGER than on screen, not smaller, and body copy is
   near-black rather than grey. The page is rasterised and then usually read
   on a phone, where thin grey small text turns to mush. Nothing here drops
   below ~1.3rem. */
/* Scoped to .fp-card, NOT to #fpDoc: an id in this selector outranks every
   class rule below it, which turned the white copy inside the maroon
   WhatsApp strip black-on-maroon and made it unreadable. */
body.fp-exporting .fp-card,
body.fp-exporting .fp-card p,
body.fp-exporting .fp-card td,
body.fp-exporting .fp-card li { color: #1a1a1a; }
body.fp-exporting .fp-note { font-size: 1.5rem; color: #1a1a1a; }
body.fp-exporting .fp-meter-name { font-size: 1.5rem; }
body.fp-exporting .fp-meter-desc { font-size: 1.35rem; color: #1a1a1a; }
body.fp-exporting .fp-lobe-txt p,
body.fp-exporting .fp-qcard p,
body.fp-exporting .fp-lcard > p,
body.fp-exporting .fp-drive-ch { font-size: 1.35rem; color: #1a1a1a; }
body.fp-exporting .fp-tips li { font-size: 1.32rem; color: #1a1a1a; }
body.fp-exporting .fp-disclaimer { font-size: 1.3rem; color: #1a1a1a; padding: 1.6rem; }

/* Tables: .fp-table's 40rem min-width exists to keep the wide desktop table
   from collapsing, but at this width it would overflow the card and
   html2canvas only ever paints an element's visible box - that overflow is
   what cut the TOTAL column off the ridge table. Nothing here is wider than
   three columns now, so the min-width just gets dropped. */
body.fp-exporting .fp-table-scroll { overflow: visible !important; }
body.fp-exporting .fp-table { min-width: 0 !important; }
body.fp-exporting .fp-table th { padding: 1rem; font-size: 1.25rem; }
body.fp-exporting .fp-table td { padding: 1rem; font-size: 1.45rem; }
body.fp-exporting .fp-table td small { font-size: 1.2rem; color: #333; }
body.fp-exporting .fp-traits th { padding: .9rem 1.2rem; font-size: 1.3rem; }
body.fp-exporting .fp-traits td { padding: .85rem 1.2rem; font-size: 1.38rem; }

/* The screen keeps the wide seven-column ridge table; the PDF gets the
   transposed three-column one (see fingerprint-report.php). */
body.fp-exporting .fp-screen-only { display: none !important; }
body.fp-exporting .fp-pdf-block { display: block !important; }
body.fp-exporting .fp-table-narrow td:not(.fp-th) { text-align: center; }

/* Letterhead / consult strips stack too - at this width a row of logo +
   title + badge (or icon + copy + phone number) crowds every part of itself. */
/* Kept compact so the first content section can share its page instead of
   the letterhead stranding one on its own. */
body.fp-exporting .fp-pdf-head {
  flex-direction: column; align-items: flex-start; gap: .5rem;
  padding-bottom: 1rem; margin-bottom: 1.4rem;
}
body.fp-exporting .fp-pdf-head img { height: 3.6rem; }
body.fp-exporting .fp-pdf-head strong { font-size: 1.7rem; }
body.fp-exporting .fp-pdf-head span { font-size: 1.35rem; color: #1a1a1a; }
body.fp-exporting .fp-pdf-tfrc { padding: .3rem .9rem; font-size: 1.2rem; color: #1a1a1a; }
body.fp-exporting .fp-pdf-tfrc b { display: inline; margin-left: .6rem; }
/* The consult strip is kept deliberately short. At full size it measured
   ~28% of a page, which is just enough to tip over the edge of whatever
   space was left and strand itself alone on a fresh page; trimmed to ~20%
   it drops into the gap under the section it follows. It keeps the icon
   inline with the heading rather than stacked above it for the same reason. */
body.fp-exporting .fp-consult {
  flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 1rem; padding: 1.3rem 1.4rem;
}
body.fp-exporting .fp-consult-ico { width: 3.4rem; height: 3.4rem; font-size: 1.7rem; }
body.fp-exporting .fp-consult-txt { flex: 1 1 20rem; }
body.fp-exporting .fp-consult-txt strong { font-size: 1.6rem; margin-bottom: .2rem; }
body.fp-exporting .fp-consult-txt p { font-size: 1.3rem; line-height: 1.5; }
body.fp-exporting .fp-consult-num { flex: 1 1 100%; font-size: 1.4rem; }
body.fp-exporting .fp-consult-txt p { font-size: 1.4rem; color: #fff; }
body.fp-exporting .fp-consult-num { margin-left: 0; font-size: 1.45rem; }

/* -- Cover / back cover (export only) -- */
.fp-cover, .fp-backcover { display: none; }
body.fp-exporting .fp-cover,
body.fp-exporting .fp-backcover {
  display: flex !important;
  flex-direction: column; align-items: center; text-align: center;
  background: #fff;
}
body.fp-exporting .fp-cover { padding: 2rem 1.5rem 0; }
.fp-cover-logo { width: 20rem; height: auto; margin-bottom: 1.5rem; }
.fp-cover-art  { width: 100%; height: auto; }
.fp-cover-band {
  width: 100%; margin-top: 1.5rem;
  background: linear-gradient(100deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; font-size: 2.2rem; font-weight: 800; letter-spacing: .02em;
  padding: 1.4rem 1rem; border-radius: .8rem;
}
.fp-cover-who { margin-top: 1.8rem; }
.fp-cover-who strong {
  display: block; font-size: 2.4rem; font-weight: 800; color: #1a1a1a;
}
.fp-cover-who span { font-size: 1.5rem; color: #1a1a1a; }

body.fp-exporting .fp-backcover { padding: 4rem 1.5rem 0; }
.fp-backcover img { width: 22rem; height: auto; margin-bottom: 2.5rem; }
.fp-backcover-line {
  font-size: 1.7rem; color: #1a1a1a; line-height: 1.7; margin: 0 0 2rem;
}
.fp-backcover-wa {
  font-size: 1.7rem; font-weight: 700; color: #1a1a1a; margin: 0 0 2.5rem;
}
.fp-backcover-wa i { color: #25d366; margin-right: .6rem; }
.fp-backcover-band {
  width: 100%;
  background: linear-gradient(100deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; font-size: 1.8rem; font-weight: 700;
  padding: 1.3rem 1rem; border-radius: .8rem;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  /* Stack the consultation prompt so the button stays full width */
  .fp-consult {
    flex-direction: column; align-items: flex-start;
    text-align: left; padding: 2rem 1.8rem; gap: 1.4rem;
  }
  .fp-consult-btn { width: 100%; justify-content: center; }
}