/* site-travel-link.css — "Live platform · Travel Management" link block.
   Sits in the PULSE arc; teal accent. Browser-window preview mirrors the
   real Enterprise Travel console. Scoped under .tpl- / .tpl-bw / .tpl-app. */

.tpl{ padding:40px 0 8px; }
.tpl__card{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:56px;
  align-items:center;
}
@media (max-width:900px){
  .tpl__card{ grid-template-columns:1fr; gap:32px; }
}

/* ── Copy column ───────────────────────────────────────────── */
.tpl__copy .section-h2{ margin:0 0 14px; }
.tpl__copy .section-sub{ margin:0 0 22px; max-width:46ch; }

.tpl__caps{ list-style:none; margin:0 0 26px; padding:0; display:flex;
  flex-direction:column; gap:11px; }
.tpl__caps li{ display:flex; align-items:flex-start; gap:11px;
  font-size:15px; line-height:1.5; color:var(--gray-600,#475569);
  text-wrap:pretty; }
.tpl__dot{ width:8px; height:8px; border-radius:50%; margin-top:7px;
  background:var(--teal-400,#27AABB); flex-shrink:0; }

.tpl__actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.tpl__note{ font-size:12.5px; color:var(--gray-500,#64748B); }

/* ── Browser window ────────────────────────────────────────── */
.tpl-bw{
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--gray-200,#E2E8F0);
  box-shadow:0 30px 70px rgba(17,24,39,.18);
}
.tpl-bw__bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 16px;
  background:#E6E8EB;
  border-bottom:1px solid rgba(17,24,39,.08);
}
.tpl-bw__dot{ width:11px; height:11px; border-radius:50%; background:#CBD2DA; }
.tpl-bw__dot:nth-child(1){ background:#F0A8A0; }
.tpl-bw__dot:nth-child(2){ background:#F3D08A; }
.tpl-bw__dot:nth-child(3){ background:#9FD8A6; }
.tpl-bw__url{
  margin-left:12px; flex:1;
  background:#fff; border-radius:6px;
  font-family:var(--mono,monospace);
  font-size:11px; color:var(--gray-500,#64748B);
  padding:5px 12px; letter-spacing:.01em;
}

/* ── Mini Enterprise Travel app ────────────────────────────── */
.tpl-app{ display:flex; height:330px; background:#F4F5F7; }

.tpl-app__rail{
  width:46px; flex-shrink:0; background:#3A3A3C;
  display:flex; flex-direction:column; align-items:center;
  padding:12px 0; gap:9px;
}
.tpl-app__logo{
  width:28px; height:28px; border-radius:7px; background:#D0302B;
  color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px; letter-spacing:.3px;
}
.tpl-app__nav{ width:24px; height:24px; border-radius:6px;
  background:rgba(255,255,255,.16); position:relative; }
.tpl-app__nav--on{ background:rgba(255,255,255,.28); }
.tpl-app__nav--on::before{
  content:""; position:absolute; left:-11px; top:25%; bottom:25%;
  width:3px; border-radius:0 2px 2px 0; background:#D0302B;
}

.tpl-app__main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.tpl-app__top{
  height:38px; flex-shrink:0; background:#E6E8EB;
  border-bottom:1px solid rgba(17,24,39,.08);
  display:flex; align-items:center; gap:8px; padding:0 14px;
}
.tpl-app__mark{
  width:20px; height:20px; border-radius:5px; background:#D0302B;
  color:#fff; font-size:8px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.tpl-app__brand{ font-size:11px; font-weight:700; color:#1E293B; letter-spacing:.2px; }
.tpl-app__pill{
  margin-left:auto; font-size:9px; font-weight:600; color:#fff;
  background:#2E2F33; border-radius:5px; padding:4px 9px;
}

.tpl-app__content{ flex:1; padding:14px 16px; min-width:0; }
.tpl-app__h1{ font-size:15px; font-weight:800; color:#1C1C1E;
  letter-spacing:-.02em; margin-bottom:11px; }

.tpl-app__stats{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:7px; margin-bottom:12px; }
.tpl-stat{
  background:#fff; border:1px solid #E5E7EB;
  border-left:3px solid #1C1C1E; border-radius:4px;
  padding:8px 10px; display:flex; flex-direction:column; gap:2px;
}
.tpl-stat--b{ border-left-color:#2563EB; }
.tpl-stat--r{ border-left-color:#DC2626; }
.tpl-stat__v{ font-size:15px; font-weight:800; color:#1C1C1E; line-height:1; letter-spacing:-.02em; }
.tpl-stat--b .tpl-stat__v{ color:#2563EB; }
.tpl-stat--r .tpl-stat__v{ color:#DC2626; }
.tpl-stat__l{ font-size:8px; font-weight:600; color:#9CA3AF;
  text-transform:uppercase; letter-spacing:.04em; }

.tpl-app__rows{ background:#fff; border:1px solid #E5E7EB; border-radius:4px; overflow:hidden; }
.tpl-row{ display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-bottom:1px solid #EEF0F2; }
.tpl-row:last-child{ border-bottom:none; }
.tpl-row__av{ width:24px; height:24px; border-radius:50%; flex-shrink:0;
  color:#fff; font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.tpl-row__nm{ width:74px; height:7px; border-radius:3px; background:#E5E7EB; }
.tpl-row__rt{ font-family:var(--mono,monospace); font-size:11px;
  font-weight:600; color:#1C1C1E; margin-left:6px; }
.tpl-row__b{ width:42px; height:14px; border-radius:3px; margin-left:auto; }
.tpl-row__b--r{ background:#FEE2E2; }
.tpl-row__b--a{ background:#FEF9C3; }
.tpl-row__b--g{ background:#DCFCE7; }