/* Generated by tools/build-sites.mjs from the Talpro site's talpro.css: do not edit here. */
/* ═══════════════════════════════════════════════════════════
   Talpro Software: additions on top of styles.css.
   styles.css is the Xceed365HR design system, copied unchanged from
   xceed365hr-website so both sites share one look. Put anything
   Talpro-specific here, never in styles.css.
   ═══════════════════════════════════════════════════════════ */

.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{left:16px}
.brand img{height:38px}
.footer .brand img{height:28px}
[id]{scroll-margin-top:90px}

/* Hero: the tagline carries the weight */
.tp-hero h1 .l2{font-size:clamp(44px,6.4vw,80px);font-weight:800;letter-spacing:-.04em;line-height:1.04;white-space:normal;padding-bottom:.08em}
.tp-hero h1 .grad{padding-bottom:.08em}
.tp-hero .sub{font-size:clamp(17px,1.6vw,19.5px);color:#D9D3E2;max-width:620px}
.tp-hero .sub b{color:#fff}
.tp-hero .sub .hl{color:var(--amber)}
.fc-b{font-size:14px}
.float-card.a .avatar{font-size:18px}
/* chart heights (no inline styles: the CSP blocks them) */
.dash-chart i.h38{--h:38%}.dash-chart i.h44{--h:44%}.dash-chart i.h52{--h:52%}.dash-chart i.h58{--h:58%}
.dash-chart i.h66{--h:66%}.dash-chart i.h70{--h:70%}.dash-chart i.h74{--h:74%}.dash-chart i.h92{--h:92%}
.dsn svg,.hc-ic svg{stroke-width:2}

/* Product families: tabs and panel in one container; the selected tab and its panel are one
   orange shape (CEO, 27 Oct 2026). Without script.js every panel shows, one under another. */
.family-tabs{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:10px;box-shadow:var(--sh)}
.ftabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ftab{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border:0;border-radius:20px 20px 0 0;
  padding:16px 18px 18px;cursor:pointer;font:inherit;color:var(--text);transition:background .25s var(--ease)}
.ftab:hover{background:var(--bg-peachtint)}
.ftab:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.ftab .fic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--orange-dark);background:var(--bg-peachtint)}
.ftab .fic svg{width:20px;height:20px}
.ftab b{display:block;font-size:15px;line-height:1.25}
.ftab small{display:block;color:var(--muted);font-size:12.5px;font-weight:600}
.ftab[aria-selected="true"]{background:var(--orange);color:#fff}
.ftab[aria-selected="true"] .fic{background:#fff;color:var(--orange-dark)}
.ftab[aria-selected="true"] small{color:rgba(255,255,255,.9)}
.fpanel{background:linear-gradient(180deg,var(--orange),#10AEDE 70%,#17BBF0);border-radius:26px;padding:28px;
  display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:stretch}
.fpanel+.fpanel{margin-top:10px}
.tabs-on .fpanel+.fpanel{margin-top:0}
.tabs-on.first .fpanel{border-top-left-radius:0}
.tabs-on.last .fpanel{border-top-right-radius:0}
.fpanel[hidden]{display:none}
.fp-intro{color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:4px}
.fp-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:#fff;color:var(--orange-dark);box-shadow:var(--sh-sm)}
.fp-ic svg{width:27px;height:27px}
.fp-intro h3{font-size:25px;line-height:1.15;letter-spacing:-.03em;color:#fff;margin-top:6px}
.fp-intro p{color:rgba(255,255,255,.92);font-size:15.5px;line-height:1.55}
.fp-cnt{margin-top:auto;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.fp-cards{gap:16px}
.fp-cards .card{border:0;box-shadow:0 18px 34px -16px rgba(9,76,93,.45);padding:22px}
.fp-cards .card::before{transform:scaleX(1);height:4px}
.fp-cards .card .icon{width:46px;height:46px;margin-bottom:14px;background:var(--bg-peachtint)}
.fp-cards .card .icon svg{width:24px;height:24px;color:var(--orange-dark)}
.fp-cards .card .tag{color:var(--orange-deep)}
.fp-cards .card h3{display:flex;align-items:center;gap:8px}
.fp-cards .card h3::after{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:var(--c)}
.fp-cards.fp-one{grid-template-columns:minmax(0,1fr)}
.fp-one .card{display:grid;grid-template-columns:auto 1fr auto;column-gap:22px;align-items:center}
.fp-one .card .icon{grid-row:1/4;margin:0}
.fp-one .card .arrow{grid-column:3;grid-row:1/4;margin:0}
/* Product colours: each standalone product site uses its colour as its theme */
.pc-x365,.pc-pulse{--c:#10A2C9}
.pc-culture{--c:#7C3AED}
.pc-skill{--c:#0891B2}
.pc-earlybird{--c:#0B689A}
.pc-well{--c:#2563EB}
.pc-verify{--c:#059669}
.pc-procure{--c:#DB2777}
.card .icon svg{width:26px;height:26px;color:var(--orange-dark)}
@media(max-width:980px){
  .fpanel{grid-template-columns:1fr;padding:22px}
  .fp-cards,.fpanel .cards{grid-template-columns:1fr}
}
@media(max-width:860px){
  .family-tabs{padding:8px;border-radius:26px}
  .ftabs{display:flex;overflow-x:auto;gap:6px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .ftabs::-webkit-scrollbar{display:none}
  .ftab{flex:0 0 74%;scroll-snap-align:start;padding:14px 14px 16px}
  .tabs-on .fpanel{border-radius:22px}
  .tabs-on.first .fpanel{border-top-left-radius:0}
  .tabs-on.last .fpanel{border-top-right-radius:0}
  .fpanel{padding:18px}
  .fp-one .card{display:block}
  .fp-one .card .icon{margin-bottom:14px}
  .fp-one .card .arrow{margin-top:18px}
}

/* Agentic: the dark band */
.tp-agentic{background:
    radial-gradient(900px 420px at 85% 0%,rgba(16,162,201,.22),transparent 60%),
    linear-gradient(180deg,var(--ink-2),var(--ink));color:#fff}
.tp-agentic .kicker{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.16)}
.tp-agentic .sec-head h2{color:#fff}
.tp-agentic .sec-head p{color:#C9C3D2}
.steps{list-style:none;padding:0;margin:0 0 44px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:26px 24px}
.step-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--grad-warm);color:#fff;font-weight:800;margin-bottom:16px}
.step h3{font-size:18px;margin-bottom:8px;color:#fff}
.step p{color:#C9C3D2;font-size:14.5px;line-height:1.6}
.why-item .ic svg{width:26px;height:26px;color:var(--orange-dark)}

/* Proof */
.proof{margin-top:56px}
.proof-head{text-align:center;font-weight:800;font-size:18px;margin-bottom:22px}
.proof-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.proof-list li{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;box-shadow:var(--sh-xs)}
.proof-list strong{display:block;font-size:16px;margin-bottom:6px}
.proof-list span{color:var(--muted);font-size:14px;line-height:1.5}

/* Footprint */
.markets{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:860px}
.markets li{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 18px;font-weight:700;box-shadow:var(--sh-xs)}
.markets img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.mk-globe svg{width:22px;height:22px;color:var(--orange-dark);display:block}

/* Contact */
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.contact{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:28px;box-shadow:var(--sh-sm)}
.contact-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--peach),#fff);margin-bottom:16px}
.contact-ic svg{width:22px;height:22px;color:var(--orange-dark)}
.contact h3{font-size:19px;margin-bottom:10px}
.contact p{font-size:15px;margin-bottom:4px}
.contact a{color:var(--text);font-weight:600}
.contact a:hover{color:var(--orange-dark)}
.contact .addr{color:var(--muted);margin-top:8px;line-height:1.55}
.tp-cta{padding-top:0}
.footer .fp{color:#B8B1C4}

@media(max-width:1140px){
  .proof-list{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
  .contacts{grid-template-columns:1fr}
}
@media(max-width:680px){
  .steps,.proof-list{grid-template-columns:1fr}
  .nav-cta .btn{padding:10px 16px}
}

/* Legal pages (privacy.html) */
.legal .container{max-width:820px}
.legal h1{font-size:clamp(32px,4.4vw,44px);margin:6px 0 8px}
.legal h2{font-size:21px;margin:44px 0 12px}
.legal p,.legal li{color:var(--text-2);line-height:1.7}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px;margin:10px 0}
.legal li+li{margin-top:6px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal-meta{font-size:14px;margin-bottom:28px;color:var(--muted)}
.legal-table{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:15px}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid var(--line)}
.legal-draft,.legal-pending{border:1px dashed var(--amber);border-radius:12px;padding:14px 18px;margin-bottom:28px;background:var(--bg-peachtint)}
.legal-pending{margin-top:20px}
.legal mark{background:var(--peach-soft);padding:0 4px;border-radius:4px}
@media(max-width:680px){
  .legal-table thead{display:none}
  .legal-table tr{display:block;border-bottom:1px solid var(--line);padding:10px 0}
  .legal-table td{display:block;border:0;padding:4px 0}
  .legal-table td::before{content:attr(data-label);display:block;font-weight:700;color:var(--ink);font-size:13px}
}

/* 404 */
.hero-404 .container{text-align:center;max-width:760px}
.hero-404 h1 .l2{white-space:normal}
.hero-404 .hero-actions{justify-content:center}
@media(max-width:440px){
  .hero-actions .btn{flex:1 1 100%}
}

/* First screen: the hero and the client logos fit in one screen on laptops (CEO, 27 Oct 2026).
   Applies to talprosoftware.com and every product site (they get this file in their own colour). */
@media (min-width:981px){
  .tp-hero{padding:clamp(24px,4.5vh,64px) 0 clamp(28px,5vh,72px)}
  .tp-hero h1{margin:0 0 clamp(12px,2vh,20px)}
  .tp-hero h1 .l2{font-size:clamp(40px,min(5.2vw,7.4vh),76px)}
  .tp-hero .sub{font-size:clamp(15.5px,2.2vh,19px);line-height:1.55}
  .tp-hero .hero-actions{margin-top:clamp(16px,3vh,28px)}
  .tp-hero .trustline{margin-top:clamp(12px,2vh,20px)}
}
@media (min-width:981px) and (max-height:900px){.tp-hero .hero-visual{zoom:.86}}
@media (min-width:981px) and (max-height:780px){.tp-hero .hero-visual{zoom:.76}}
@media (min-width:981px) and (max-height:700px){.tp-hero .hero-visual{zoom:.68}}
/* A slimmer logo strip, so it sits inside the first screen */
.trust-strip{padding:18px 0 16px}
.trust-strip p{margin-bottom:10px}
.logo-badge:has(img){min-height:58px;padding:8px 22px}
.logo-badge img{height:38px}
.logo-badge img[src*="firstbank"],.logo-badge img[src*="fidelity"]{height:48px}
.logo-badge img[src*="unionbank"]{height:42px}
.logo-badge img[src*="zenith"]{height:44px}

/* Titles: never more than two lines (CEO, 27 Oct 2026). Wider hero text column on desktop, headline
   sized to fit on phones, balanced line breaks everywhere. Keep new titles short enough for this. */
.tp-hero h1 .l2,.sec-head h2,.cta-band h2{text-wrap:balance}
@media (min-width:981px){.tp-hero .hero-grid{grid-template-columns:1.3fr .7fr;gap:40px}}
@media (max-width:980px){.tp-hero h1 .l2{font-size:clamp(28px,7.6vw,44px)}}
@media (max-width:600px){.sec-head h2,.cta-band h2{font-size:26px}}