/* ═══════════════════════════════════════════════════════════════
   GulfBot — trust surfaces (proof · book · integrations · trust)
   Built 2026-09-05. Loaded AFTER style.css + legal.css on those 8 pages
   only. Same tokens, same subpage container; only new components live here.
   ═══════════════════════════════════════════════════════════════ */

.tp-kicker{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 22px;font:500 12.5px/1.5 var(--mono);color:var(--faint)}
.tp-kicker b{color:var(--violet);font-weight:500}

/* dated stat cells — light theme twin of the homepage .proof-cell */
.tp-stats{margin:24px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tp-stat{padding:22px 20px;border-radius:20px;background:#fff;border:1px solid rgba(13,11,20,.08);display:flex;flex-direction:column;gap:8px;min-width:0}
.tp-n{font:800 40px/1 var(--font);letter-spacing:-.04em;color:var(--deep);white-space:nowrap}
.tp-l{font:600 14px/1.4 var(--font);color:var(--ink)}
.tp-d{font:500 11.5px/1.5 var(--mono);color:var(--faint)}
.tp-stat.dim .tp-n{color:var(--faint2)}

/* section blocks */
.tp-block{margin-top:40px;padding:28px 30px;border-radius:24px;background:#fff;border:1px solid rgba(13,11,20,.08)}
.tp-block h2{font:800 25px/1.2 var(--font);letter-spacing:-.02em;color:var(--ink);margin:0}
.tp-tag{font:500 11px/1 var(--mono);letter-spacing:.24em;color:var(--violet);text-transform:uppercase;margin-bottom:12px}
.tp-block p{margin:12px 0 0;font:500 15.5px/1.7 var(--font);color:var(--body2)}
.tp-block strong{color:var(--ink)}
.tp-block a{color:var(--violet);text-decoration:underline;text-underline-offset:2px}

.tp-honest{margin-top:22px;padding:18px 22px;border-radius:18px;background:var(--tint);border:1px solid rgba(109,63,242,.18)}
.tp-honest p{margin:0;font:500 15px/1.65 var(--font);color:var(--body3)}
.tp-honest p + p{margin-top:10px}

/* anonymised case study + logo slot */
.tp-case{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:26px;align-items:start}
.tp-logo-slot{padding:28px 18px;border-radius:20px;border:1.5px dashed rgba(109,63,242,.45);background:rgba(109,63,242,.04);text-align:center;min-height:190px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.tp-slot-mark{width:54px;height:54px;border-radius:14px;background:rgba(109,63,242,.12);display:flex;align-items:center;justify-content:center;color:var(--violet)}
.tp-logo-slot b{font:700 14.5px/1.35 var(--font);color:var(--ink)}
.tp-logo-slot span{font:500 12px/1.55 var(--mono);color:var(--faint)}

.tp-timeline{margin:20px 0 0;padding:0;list-style:none}
.tp-timeline li{position:relative;padding:0 0 22px 30px;border-left:2px solid rgba(109,63,242,.18);margin-left:8px}
.tp-timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.tp-timeline li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:99px;background:var(--violet);box-shadow:0 0 0 4px #fff}
.tp-when{display:block;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;color:var(--violet);margin-bottom:6px}
.tp-what{font:700 15.5px/1.5 var(--font);color:var(--ink)}
.tp-more{margin-top:5px;font:500 14.5px/1.65 var(--font);color:var(--body2)}
.tp-timeline li.open::before{background:#fff;border:2px solid #b45309;box-shadow:0 0 0 4px #fff}
.tp-timeline li.open .tp-when{color:#b45309}

/* integration cards */
.tp-group{margin-top:44px}
.tp-group h2{font:800 25px/1.2 var(--font);letter-spacing:-.02em;color:var(--ink);margin:0}
.tp-gsub{margin:8px 0 0;font:500 15px/1.6 var(--font);color:var(--muted);max-width:66ch}
.tp-cards{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tp-card{padding:22px 22px 18px;border-radius:20px;background:#fff;border:1px solid rgba(13,11,20,.08);display:flex;flex-direction:column;gap:10px;min-width:0}
.tp-card h3{margin:0;font:800 18px/1.25 var(--font);letter-spacing:-.02em;color:var(--ink)}
.tp-card p{margin:0;font:500 14.5px/1.6 var(--font);color:var(--body2)}
.tp-card p a{color:var(--violet);text-decoration:underline;text-underline-offset:2px}
.tp-v{font:500 11.5px/1.5 var(--mono);color:var(--faint);margin-top:auto;padding-top:8px;border-top:1px dashed rgba(13,11,20,.08)}
.tp-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;width:max-content;max-width:100%}
.tp-badge::before{content:"";flex:none;width:7px;height:7px;border-radius:99px;background:currentColor}
.tp-badge.live{background:rgba(37,211,102,.14);color:#0f7a3d}
.tp-badge.own{background:rgba(109,63,242,.1);color:var(--deep)}
.tp-badge.no{background:rgba(13,11,20,.06);color:var(--muted)}
.tp-card.no{background:#faf9fd;border-style:dashed}
.tp-card.no h3{color:var(--body3)}

/* book: hours + steps */
.tp-hours{margin-top:18px;width:100%;border-collapse:collapse}
.tp-hours th,.tp-hours td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(13,11,20,.08);font:500 15px/1.55 var(--font);color:var(--body2)}
.tp-hours th{font-weight:700;color:var(--ink);width:34%}
.tp-hours tr:first-child th,.tp-hours tr:first-child td{border-top:1px solid rgba(13,11,20,.08)}
.tp-hours b{font-weight:700;color:var(--ink)}
.tp-local{display:block;margin-top:4px;font:500 12px/1.5 var(--mono);color:var(--violet)}
.tp-local:empty{display:none}
.tp-now{margin:18px 0 0;font:500 13px/1.6 var(--mono);color:var(--faint)}
.tp-fine{margin:12px 0 0;font:500 13.5px/1.6 var(--font);color:var(--faint)}

.tp-steps{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tp-step{padding:20px;border-radius:18px;background:#fff;border:1px solid rgba(13,11,20,.08);min-width:0}
.tp-num{font:700 11.5px/1 var(--mono);letter-spacing:.2em;color:var(--violet)}
.tp-step h3{margin:10px 0 0;font:800 16.5px/1.3 var(--font);letter-spacing:-.015em;color:var(--ink)}
.tp-step p{margin:8px 0 0;font:500 14px/1.6 var(--font);color:var(--body2)}

/* trust: providers table + open items */
.tp-def{margin-top:16px;border-collapse:collapse;width:100%}
.tp-def th,.tp-def td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid rgba(13,11,20,.08);font:500 14.5px/1.6 var(--font);color:var(--body3)}
.tp-def th{width:30%;font-weight:700;color:var(--ink)}
.tp-def tr:first-child th,.tp-def tr:first-child td{border-top:1px solid rgba(13,11,20,.08)}
.tp-def .tp-where{display:block;font:500 11.5px/1.5 var(--mono);color:var(--faint);margin-top:3px}
.tp-open{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.tp-open li{position:relative;padding-left:26px;font:500 15px/1.6 var(--font);color:var(--body2)}
.tp-open li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;border-radius:99px;border:2px solid #b45309;background:#fff}
.tp-open strong{color:var(--ink)}

/* base .btn-primary/.btn-dark carry no padding or font (only .btn-hero does) — give the
   sub-page CTA rows a real pill; without this the buttons collapse to the text height */
.subpage .sp-cta-row .btn-primary,.subpage .sp-cta-row .btn-dark,.tp-block .sp-cta-row .btn-primary,.tp-block .sp-cta-row .btn-dark{display:inline-flex;padding:15px 24px;font:800 15px/1 var(--font);white-space:nowrap;text-decoration:none;color:#fff}
.tp-block .sp-cta-row .btn-primary:hover,.tp-block .sp-cta-row .btn-dark:hover{color:#fff}
.subpage .sp-cta-row .btn-primary{box-shadow:0 18px 36px -18px rgba(75,31,214,.85)}
.subpage .sp-cta-row .btn-primary:hover{transform:translateY(-2px);box-shadow:0 24px 44px -18px rgba(75,31,214,.9)}
.subpage .sp-cta-row .btn-dark:hover{background:#241c3c;transform:translateY(-2px)}
.subpage .sp-cta-row .btn-primary svg,.subpage .sp-cta-row .btn-dark svg{flex:none}
.subpage .sp-list li a,.subpage .sp-callout a,.subpage p.sp-p a,.tp-fine a{color:var(--violet);text-decoration:underline;text-underline-offset:2px}

@media (max-width:1023px){
  .tp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .tp-stats{gap:10px}
  .tp-stat{padding:18px 16px;border-radius:16px}
  .tp-n{font-size:32px}
  .tp-block{margin-top:30px;padding:20px 18px;border-radius:18px}
  .tp-block h2,.tp-group h2{font-size:21px}
  .tp-block p{font-size:14.5px}
  .tp-case{grid-template-columns:1fr;gap:18px}
  .tp-logo-slot{min-height:0;padding:22px 16px}
  .tp-cards{grid-template-columns:1fr}
  .tp-steps{grid-template-columns:1fr}
  .tp-hours th{width:40%}
  .tp-hours th,.tp-hours td{padding:10px 10px;font-size:14px}
  .tp-def th{width:36%}
  .tp-def th,.tp-def td{padding:10px 10px;font-size:13.5px}
  .subpage .sp-cta-row .btn-primary,.subpage .sp-cta-row .btn-dark{white-space:normal}
}