/* ==========================================================================
   GTM PAGES — content components (site/ only), built from brand tokens.
   Pairs the GTM-aligned copy with the DefrilexCX brand design system.
   Loaded AFTER site.min.css + marketplace.css. Base chrome, hero,
   section-head, editorial, hall/hc, compare, timeline, stat-row,
   final-cta, faq-item and buttons all come from site.min.css.
   ========================================================================== */

/* Inner-page hero */
.page-hero{padding:150px 0 60px;position:relative}
.breadcrumb{font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:rgba(10,14,26,.5);margin-bottom:28px;display:flex;gap:.5em;align-items:center}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{color:var(--navy)}
.breadcrumb .sep{color:var(--orange)}
.page-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.12;letter-spacing:-.03em;font-weight:400;margin:0 0 22px;text-wrap:balance}
.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:end}
@media(max-width:860px){.page-hero{padding:128px 0 44px}.ph-grid{grid-template-columns:1fr;gap:20px}}

/* Lead text */
.g-lead{font-size:clamp(16px,1.3vw,19px);line-height:1.62;color:rgba(10,14,26,.7)}
.measure{max-width:62ch}
.g-emph{color:var(--ink)}

/* Bracket links (secondary hero actions) */
.bracket{display:flex;flex-direction:column;gap:.7rem;font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.bracket a{color:var(--ink);text-decoration:none;display:inline-flex;gap:.6em;align-items:center;width:fit-content;transition:color .3s var(--ease)}
.bracket a .m{color:var(--orange)}
.bracket a:hover{color:var(--navy)}

/* Ledger list — pains, capabilities, talent, proof */
.gledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.gledger-row{display:grid;grid-template-columns:46px 1fr;grid-template-areas:"n title" "n desc";gap:4px 16px;padding:24px 0;border-bottom:1px solid var(--line);transition:background .4s var(--ease)}
.gledger-row:hover{background:rgba(11,43,141,.025)}
.g-n{grid-area:n;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;color:var(--orange);padding-top:5px}
.g-title{grid-area:title;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.02em;color:var(--ink)}
.g-title .badge{font-family:'Geist Mono',ui-monospace,monospace;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);border:1px solid var(--orange);border-radius:var(--radius-pill);padding:.18em .6em;margin-left:.6em;vertical-align:middle}
.g-title .sub{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(10,14,26,.4);margin-left:.6em}
.g-desc{grid-area:desc;color:rgba(10,14,26,.62);max-width:72ch;line-height:1.55;font-size:.96rem}
.g-meta{grid-area:meta;font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);align-self:center;text-align:right}
@media(min-width:920px){.gledger-row{grid-template-columns:46px minmax(260px,1fr) 1.25fr;grid-template-areas:"n title desc"}.g-title{padding-right:1.5rem}.gledger-row.has-meta{grid-template-columns:46px minmax(240px,1fr) 1fr auto;grid-template-areas:"n title desc meta"}}

/* Process steps */
.gsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.gstep{background:var(--white);padding:30px 26px}
.gstep .n{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;color:var(--orange);letter-spacing:.12em}
.gstep h3{font-size:1.12rem;font-weight:500;letter-spacing:-.02em;margin:1.3rem 0 .6rem}
.gstep p{color:rgba(10,14,26,.62);font-size:.93rem;line-height:1.55}
@media(max-width:900px){.gsteps{grid-template-columns:1fr}}

/* Trust band */
.trust-band{padding:clamp(48px,7vw,76px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;background:rgba(11,43,141,.025)}
.trust-band .eye{font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:rgba(10,14,26,.5)}
.trust-band p{font-size:clamp(20px,2.5vw,33px);font-weight:400;letter-spacing:-.02em;margin:.9rem auto 0;max-width:26ch;line-height:1.2}
.trust-band .note{font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:rgba(10,14,26,.4);margin-top:1rem}

/* Two-column category groups + bullet lists */
.wf-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
@media(max-width:860px){.wf-grid{grid-template-columns:1fr}}
.wf-tag{font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--navy);display:inline-block;margin:0 0 1rem}
.wf-tag.mt{margin-top:2.2rem}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);color:rgba(10,14,26,.72);line-height:1.5;font-size:.95rem}
.info-list li .m{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;color:var(--orange);padding-top:3px}

/* Credential pills */
.creds{display:flex;flex-wrap:wrap;gap:.6rem}
.creds .item{font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--navy);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.5rem .9rem}

/* Coverage / cost table */
.cov-wrap{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-soft);background:var(--white)}
.cov-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:rgba(10,14,26,.55)}
.cov-head .live{display:inline-flex;align-items:center;gap:.5em;color:var(--navy)}
.cov-head .live .d{width:7px;height:7px;border-radius:50%;background:var(--orange);display:inline-block;animation:covpulse 2s var(--ease) infinite}
@keyframes covpulse{0%,100%{opacity:1}50%{opacity:.35}}
.cov-table{width:100%;border-collapse:collapse;font-size:.92rem}
.cov-table th{text-align:left;font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:rgba(10,14,26,.45);font-weight:500;padding:12px 18px;border-bottom:1px solid var(--line)}
.cov-table td{padding:14px 18px;border-bottom:1px solid var(--line);color:rgba(10,14,26,.75)}
.cov-table tr:last-child td{border-bottom:0}
.cov-table .num{text-align:right;font-variant-numeric:tabular-nums}
.cov-table .lang{color:var(--ink);font-weight:500}
.cov-table .st{display:inline-flex;align-items:center;gap:.5em;font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.cov-table .st .d{width:7px;height:7px;border-radius:50%;display:inline-block}
.cov-table .st--ok{color:#1a7f4b}
.cov-table .st--ok .d{background:#1a7f4b}
.cov-table .st--scaling{color:#c46f00}
.cov-table .st--scaling .d{background:var(--orange)}
.cov-table .fill{color:var(--navy);font-weight:600}
@media(max-width:600px){.hide-sm{display:none}}

/* Forms */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:clamp(24px,3vw,36px)}
.form-card h2,.form-card h3{font-weight:400;letter-spacing:-.02em}
.field{margin-bottom:1.1rem;display:flex;flex-direction:column}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.field-row{grid-template-columns:1fr}}
.field label{font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:rgba(10,14,26,.6);margin-bottom:.5rem}
.field .opt{color:rgba(10,14,26,.35)}
.field input,.field select,.field textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.78rem .85rem;transition:border-color .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy)}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(10,14,26,.4)}
.form-error{color:#c0392b;margin-top:1rem;font-size:.9rem;text-align:center}
.form-success{display:none}
.form-success.is-visible{display:block;animation:gfadeUp .5s var(--ease)}
.form-success__mark{font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--orange)}
@keyframes gfadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Split layout */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.split-2--wide-left{grid-template-columns:1.05fr .95fr}
@media(max-width:880px){.split-2,.split-2--wide-left{grid-template-columns:1fr}}
.sticky{position:sticky;top:100px}
.muted{color:rgba(10,14,26,.55)}

/* ============================================================
   NAV — "Marketplace" is a menu trigger only + Sign In button
   ============================================================ */
/* Marketplace label opens the dropdown but never navigates */
.nav-parent-toggle{cursor:pointer;-webkit-user-select:none;user-select:none}
/* Sign In + CTA grouped on the right of the bar */
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-signin{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  padding:12px 20px;
  border:1px solid var(--navy);
  color:var(--navy);
  background:transparent;
  white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.nav-signin:hover{background:var(--navy);color:#fff}
/* Keep all nav menu labels (and the CTA) on one line, no wrapping */
.nav-links a,.nav-item,.nav-item>a,.nav-child,.nav-cta,.nav-cta span,.nav-signup,.nav-signin{white-space:nowrap}
/* The brand logo must never shrink — keep its original size */
.nav .brand{flex:0 0 auto}
.nav .brand img{max-width:none}
@media(min-width:861px){
  .nav-inner{gap:20px}
  .nav-links{gap:22px}
  /* smaller menu text so everything fits and the logo keeps its size */
  .nav-item>a{font-size:12px}
  .nav-cta,.nav-signin,.nav-signup,.nav-mainsite{font-size:10px}
}

/* Link back to the main DefrilexCX website (external) */
.nav-mainsite{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(10,14,26,.58);
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav-mainsite:hover{color:var(--navy)}
.nav-mainsite .ext{font-size:13px;line-height:1}
@media(max-width:760px){.nav-mainsite{display:none}}

/* Sign Up — solid navy, orange on hover */
.nav-signup{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  padding:12px 20px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  white-space:nowrap;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.nav-signup:hover{background:var(--orange);border-color:var(--orange);color:#fff}
@media(max-width:640px){.nav-signin,.nav-signup{display:none}}

/* ============================================================
   AUTH PAGES — sign in / sign up (branded, centered)
   ============================================================ */
body.theme-auth{
  min-height:100vh;
  color:#fff;
  background:
    radial-gradient(1000px 520px at 50% -6%,rgba(11,43,141,.60),transparent 62%),
    radial-gradient(820px 520px at 88% 112%,rgba(11,43,141,.42),transparent 60%),
    linear-gradient(180deg,var(--navy-darker) 0%,#020b2e 100%);
}
/* Wordmark is dark by default — flip it white on the navy backdrop */
body.theme-auth .auth-logo img{filter:brightness(0) invert(1);opacity:.96}

/* Processor video background with a blue (navy) wash */
.auth-video{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--navy-darker)}
.auth-video-el{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:.9;
}
.auth-video-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 640px at 50% 32%,rgba(11,43,141,.22),transparent 72%),
    linear-gradient(180deg,rgba(3,16,62,.48) 0%,rgba(2,11,46,.62) 100%);
}
@media(prefers-reduced-motion:reduce){.auth-video-el{display:none}}
/* Lift the auth content above the video */
body.theme-auth .auth-wrap{position:relative;z-index:1}
.auth-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  padding:48px 22px;
}
.auth-logo{display:inline-flex}
.auth-logo img{height:46px;width:auto}
.auth-card{
  position:relative;
  width:100%;
  max-width:430px;
  background:linear-gradient(180deg,#ffffff 0%,#f4f7fc 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:0 50px 120px -45px rgba(0,0,0,.7),0 0 0 1px rgba(3,16,62,.4);
  padding:clamp(28px,4vw,40px);
}
/* slim brand accent across the top of the card */
.auth-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy-light) 48%,var(--orange) 100%);
  z-index:1;
}

/* ---- Auth pages use the normal OS cursor (template hides it with cursor:none) ---- */
body.theme-auth{cursor:default}
body.theme-auth a,
body.theme-auth button,
body.theme-auth [role="button"],
body.theme-auth label,
body.theme-auth .role-card{cursor:pointer}
body.theme-auth input,
body.theme-auth textarea{cursor:text}
body.theme-auth select{cursor:pointer}

/* ---- No-animation mode (sign up): static, no hover motion/transitions ---- */
.no-anim *,
.no-anim *::before,
.no-anim *::after{
  transition:none!important;
  animation:none!important;
}
.no-anim .role-card:hover{transform:none!important}

/* ---- Glassmorphism: translucent card over the processor video ---- */
body.theme-auth .auth-card{
  background:rgba(9,18,46,.62);
  -webkit-backdrop-filter:blur(40px) saturate(140%);
  backdrop-filter:blur(40px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.10);
}
body.theme-auth .auth-title{color:#fff}
body.theme-auth .auth-sub{color:rgba(255,255,255,.7)}
body.theme-auth .auth-foot{color:rgba(255,255,255,.68);border-top-color:rgba(255,255,255,.14)}
body.theme-auth .auth-foot a{color:#fff}
body.theme-auth .auth-foot a:hover{color:var(--orange)}

/* Google button */
body.theme-auth .auth-google{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
body.theme-auth .auth-google:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.4);
  box-shadow:none;
}

/* "Or" divider */
body.theme-auth .auth-divider{color:rgba(255,255,255,.45)}
body.theme-auth .auth-divider::before,
body.theme-auth .auth-divider::after{background:rgba(255,255,255,.16)}

/* Form fields */
body.theme-auth .auth-card .field label{color:rgba(255,255,255,.62)}
body.theme-auth .auth-card .field .opt{color:rgba(255,255,255,.4)}
body.theme-auth .auth-card .field input,
body.theme-auth .auth-card .field select,
body.theme-auth .auth-card .field textarea{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
body.theme-auth .auth-card .field input::placeholder,
body.theme-auth .auth-card .field textarea::placeholder{color:rgba(255,255,255,.42)}
body.theme-auth .auth-card .field input:focus,
body.theme-auth .auth-card .field select:focus,
body.theme-auth .auth-card .field textarea:focus{
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
body.theme-auth .auth-link{color:rgba(255,255,255,.72)}
body.theme-auth .auth-link:hover{color:var(--orange)}
body.theme-auth .auth-back{color:rgba(255,255,255,.6)}
body.theme-auth .auth-back:hover{color:#fff}

/* Role selection tiles — glass */
body.theme-auth .role-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
}
body.theme-auth .role-card:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(248,145,0,.6);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.55);
}
body.theme-auth .role-card h3{color:#fff}
body.theme-auth .role-card p{color:rgba(255,255,255,.66)}
body.theme-auth .role-icon{background:rgba(255,255,255,.12);color:#fff}
body.theme-auth .role-card:hover .role-icon{background:var(--orange);color:#fff}
body.theme-auth .role-pill{color:#fff;background:rgba(255,255,255,.14)}

/* ---- Auth refinements: more polished spacing, type, and fields ---- */
.auth-eyebrow{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--orange);
  text-align:center;
  margin:0 0 14px;
}
body.theme-auth .auth-card{padding:clamp(34px,4.5vw,48px)}
.auth-card::before{height:3px}
body.theme-auth .auth-title{
  font-weight:500;
  letter-spacing:-.025em;
  font-size:clamp(27px,3.4vw,34px);
  margin:0 0 10px;
}
body.theme-auth .auth-sub{font-size:.92rem;line-height:1.55;margin:0 0 30px;color:rgba(255,255,255,.62)}
/* refined fields */
body.theme-auth .auth-card .field{margin-bottom:1.05rem}
body.theme-auth .auth-card .field label{
  font-size:9.5px;
  letter-spacing:.14em;
  margin-bottom:.55rem;
  color:rgba(255,255,255,.55);
}
body.theme-auth .auth-card .field input,
body.theme-auth .auth-card .field textarea{
  padding:.92rem 1rem;
  border-radius:11px;
  font-size:.95rem;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
body.theme-auth .auth-card .field input:focus,
body.theme-auth .auth-card .field textarea:focus{
  border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}
/* refined Google button + divider */
body.theme-auth .auth-google{
  padding:.92rem 1rem;
  border-radius:11px;
  font-size:11px;
  letter-spacing:.06em;
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.15);
}
body.theme-auth .auth-divider{margin:24px 0;font-size:10px;letter-spacing:.22em}
/* refined primary button */
body.theme-auth .auth-card .btn-primary{border-radius:11px;letter-spacing:.04em}
/* refined footer + role tiles */
body.theme-auth .auth-foot{margin-top:26px;padding-top:22px}
body.theme-auth .role-card{border-radius:15px;padding:26px 22px}
body.theme-auth .role-card h3{font-size:1.02rem}
.auth-card--wide{max-width:740px}
.auth-title{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:clamp(26px,3.4vw,34px);
  letter-spacing:-.02em;
  color:var(--ink);
  text-align:center;
  margin:0 0 8px;
}
.auth-sub{
  text-align:center;
  color:rgba(10,14,26,.6);
  font-size:.95rem;
  margin:0 0 26px;
}
.auth-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:13px 18px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  color:var(--ink);
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.auth-google:hover{border-color:var(--navy);box-shadow:0 4px 14px rgba(3,16,62,.08)}
.auth-google svg{width:18px;height:18px;flex:0 0 18px}
.auth-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:22px 0;
  color:rgba(10,14,26,.4);
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-form .field{margin-bottom:1rem}
.auth-row{display:flex;justify-content:flex-end;margin:-2px 0 18px}
.auth-link{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy);
  opacity:.8;
  transition:color .3s var(--ease),opacity .3s var(--ease);
}
.auth-link:hover{opacity:1;color:var(--orange)}
.auth-foot{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:.9rem;color:rgba(10,14,26,.6)}
.auth-foot a{color:var(--navy);font-weight:500}
.auth-foot a:hover{color:var(--orange)}
.auth-legal{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.auth-legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.auth-legal a:hover{color:#fff}

/* Role selection cards (sign up) */
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 4px}
@media(max-width:620px){.role-grid{grid-template-columns:1fr}}
.role-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  text-align:left;
  cursor:pointer;
  font:inherit;
  padding:26px 22px;
  border:1px solid #e6e9f2;
  border-radius:14px;
  background:linear-gradient(180deg,#f7f9fd 0%,#eef2f9 100%);
  -webkit-appearance:none;
  appearance:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.role-card:hover{
  transform:translateY(-5px);
  background:var(--white);
  box-shadow:0 22px 44px -22px rgba(3,16,62,.4);
  border-color:rgba(248,145,0,.6);
}
.role-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(11,43,141,.07);
  color:var(--navy);
  margin-bottom:6px;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.role-card:hover .role-icon{background:var(--navy);color:#fff}
.role-card h3{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
}
.role-card p{font-size:.86rem;line-height:1.5;color:rgba(10,14,26,.62);margin:0}

/* ============================================================
   FOR TALENT — job board / available openings
   ============================================================ */
.job-search{position:relative;max-width:540px;margin-bottom:14px}
.job-search svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:rgba(10,14,26,.4);pointer-events:none;
}
.job-search input{
  width:100%;
  font:inherit;
  font-size:.95rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px 14px 46px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.job-search input::placeholder{color:rgba(10,14,26,.42)}
.job-search input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(11,43,141,.08)}
.job-count{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(10,14,26,.5);margin:0 0 22px;
}
.job-noresults{
  padding:30px;border:1px dashed var(--line);border-radius:14px;
  text-align:center;color:rgba(10,14,26,.6);font-size:.95rem;
}
.job-noresults a{color:var(--navy);font-weight:500}
.job-more-wrap{display:flex;justify-content:center;margin-top:24px}
.job-more{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;background:transparent;border:1px solid var(--navy);color:var(--navy);
  padding:13px 26px;border-radius:0;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.job-more:hover{background:var(--navy);color:#fff}
.job-board{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* the JS sets [hidden] to limit/filter — must beat .job-card's display:flex */
.job-card[hidden]{display:none!important}

/* For Talent "how to join" — center the short timeline against the tall form
   so the column doesn't leave a big white gap underneath */
body.theme-home #apply .split-2{align-items:center}

/* Timeline steps: CSS-only reveal so they animate in but can never get stuck
   blank if the JS scroll-reveal (.fade-in / .in-view) fails to fire. */
@keyframes tlReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tl-step{animation:tlReveal .6s var(--ease) both!important}
.tl-step:nth-child(1){animation-delay:.05s}
.tl-step:nth-child(2){animation-delay:.15s}
.tl-step:nth-child(3){animation-delay:.25s}
.tl-step:nth-child(4){animation-delay:.35s}
.tl-step:nth-child(5){animation-delay:.45s}
@media(prefers-reduced-motion:reduce){
  .tl-step{animation:none!important;opacity:1!important;transform:none!important}
}
@media(max-width:820px){.job-board{grid-template-columns:1fr}}
.job-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 26px 20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--white);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.job-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px -22px rgba(3,16,62,.3);
  border-color:rgba(11,43,141,.25);
}
.job-cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.job-status{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#1a7f4b;
}
.job-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#23a85f;box-shadow:0 0 0 3px rgba(35,168,95,.16)}
.job-id{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;color:rgba(10,14,26,.38)}
.job-title{
  font-family:'Inter',sans-serif;font-weight:500;font-size:1.16rem;letter-spacing:-.015em;line-height:1.26;color:var(--ink);margin:0;
}
.job-meta{display:flex;flex-wrap:wrap;gap:8px}
.job-tag{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(10,14,26,.7);background:rgba(10,14,26,.05);border-radius:6px;padding:5px 9px;
}
.job-tag.pay{color:var(--navy);background:rgba(11,43,141,.08)}
.job-tag.lang{color:#a85f12;background:rgba(248,145,0,.13)}
.job-desc{font-size:.92rem;line-height:1.6;color:rgba(10,14,26,.7);margin:0}
.job-reqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.job-reqs li{position:relative;padding-left:18px;font-size:.85rem;line-height:1.5;color:rgba(10,14,26,.6)}
.job-reqs li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.job-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
}
.job-posted{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(10,14,26,.4)}
.job-apply{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);font-weight:500;transition:color .3s var(--ease);
}
.job-apply .arr{transition:transform .3s var(--ease)}
.job-apply:hover{color:var(--orange)}
.job-apply:hover .arr{transform:translateX(4px)}

/* Step 2 — registration form bits */
.auth-back{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(10,14,26,.55);
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
  margin-bottom:18px;
  transition:color .3s var(--ease);
}
.auth-back:hover{color:var(--navy)}
.role-pill{
  display:inline-block;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy);
  background:rgba(11,43,141,.08);
  border-radius:999px;
  padding:3px 10px;
  margin-right:2px;
  vertical-align:middle;
}

/* ============================================================
   HOME PAGE — hero background video
   Sits behind the grid/aurora/text; navy scrim keeps copy legible.
   ============================================================ */
body.theme-home .hero-video{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--navy-darker);   /* video blends into navy so it stays subtle */
}
body.theme-home .hero-video-el{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.85;                     /* video visibility — tweak this value to taste */
  transition:opacity .8s ease;
}
/* Navy wash on top — heavier on the left where the headline sits */
body.theme-home .hero-video-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,16,62,.45) 0%,rgba(3,16,62,.22) 50%,rgba(3,16,62,.45) 100%),
    linear-gradient(0deg,rgba(3,16,62,.50),rgba(3,16,62,0) 45%);
}
/* Respect users who prefer no motion — show the still poster instead */
@media(prefers-reduced-motion:reduce){
  body.theme-home .hero-video-el{display:none}
}

/* ------------------------------------------------------------
   HERO — center the copy as one full-width block over the video
   ------------------------------------------------------------ */
body.theme-home .hero-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:680px;
}
body.theme-home .hero-body{
  grid-template-columns:1fr!important;
  justify-items:center;
}
body.theme-home .hero-text{
  align-items:center!important;
  text-align:center;
  max-width:940px;
  margin:0 auto;
}
body.theme-home .hero-h1{margin-left:auto;margin-right:auto}
body.theme-home .hero-sub{
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:720px;
}
body.theme-home .hero-actions{justify-content:center}
@media(max-width:760px){
  body.theme-home .hero-inner{min-height:560px}
}

/* ------------------------------------------------------------
   Final-CTA background video (bottom of pages) — navy wash
   ------------------------------------------------------------ */
.final-cta.has-cta-video{position:relative;overflow:hidden}
.final-cta .cta-video{position:absolute;inset:0;z-index:0;overflow:hidden}
.final-cta .cta-video-el{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;opacity:.5;
}
.final-cta .cta-video-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,16,62,.74) 0%,rgba(3,16,62,.86) 100%);
}
@media(prefers-reduced-motion:reduce){.final-cta .cta-video-el{display:none}}

/* ------------------------------------------------------------
   LSP / BPO page-hero — background video + image, light text
   Reuses the .hero-video / .hero-video-el / scrim styles above.
   ------------------------------------------------------------ */
body.theme-home .page-hero.has-hero-video{
  overflow:hidden;
  background:var(--navy-darker);
  min-height:500px;
  display:flex;
  align-items:center;
}
body.theme-home .page-hero.has-hero-video > .wrap{position:relative;z-index:2;width:100%}
/* Bottom-weighted wash so the left/bottom copy stays readable */
body.theme-home .page-hero.has-hero-video .hero-video-scrim{
  background:linear-gradient(180deg,rgba(3,16,62,.58) 0%,rgba(3,16,62,.34) 42%,rgba(3,16,62,.74) 100%);
}
/* Invert the hero text to read over the footage */
body.theme-home .page-hero.has-hero-video .breadcrumb,
body.theme-home .page-hero.has-hero-video .breadcrumb a{color:rgba(255,255,255,.72)}
body.theme-home .page-hero.has-hero-video .breadcrumb a:hover{color:#fff}
body.theme-home .page-hero.has-hero-video .breadcrumb .sep{color:var(--orange)}
body.theme-home .page-hero.has-hero-video h1{
  color:#fff;
  text-shadow:0 2px 18px rgba(3,16,62,.55),0 1px 2px rgba(0,0,0,.35);
}
body.theme-home .page-hero.has-hero-video .g-lead{color:rgba(255,255,255,.92)}
body.theme-home .page-hero.has-hero-video .bracket a{color:#fff}
/* ghost button stays legible over the video */
body.theme-home .page-hero.has-hero-video .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
body.theme-home .page-hero.has-hero-video .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ============================================================
   HOME PAGE — section text refinements (weight/style + spacing)
   Loaded last so it wins the cascade. Safe to tweak or remove.
   ============================================================ */
/* Hero — give the headline + sub more air, softer leading */
body.theme-home .hero-h1{line-height:1.08!important;letter-spacing:-.04em}
body.theme-home .hero-sub{
  line-height:1.72!important;
  margin-bottom:30px!important;
  letter-spacing:-.003em;
}

/* Section headings (.editorial) — looser leading, more space below */
body.theme-home .editorial{
  line-height:1.12!important;
  letter-spacing:-.022em!important;
  margin-bottom:52px!important;
}

/* Body / lead copy — more comfortable reading rhythm */
body.theme-home .g-lead{
  line-height:1.74;
  letter-spacing:-.003em;
}
body.theme-home .g-emph{font-weight:500}

/* Final CTA — wider eyebrow tracking, softer headline leading, more air */
body.theme-home .final-eye{letter-spacing:.22em;margin-bottom:28px}
body.theme-home .final-h2{
  line-height:1.14!important;
  letter-spacing:-.038em!important;
  margin-bottom:36px!important;
}
body.theme-home .final-cta .hero-sub{
  line-height:1.7!important;
  max-width:660px;
  margin-left:auto;
  margin-right:auto;
}

/* ============================================================
   HOME PAGE — Section 03 "marketplace positioning"
   Two-column editorial: heading left, body right; thesis accented.
   ============================================================ */
body.theme-home .pos-grid{
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(32px,6vw,84px);
  align-items:start;
}
/* Heading column — left-aligned, sized for its column (overrides centered editorial) */
body.theme-home .pos-h2{
  margin:0!important;
  padding:0!important;
  max-width:none!important;
  text-align:left!important;
  font-size:clamp(30px,3.3vw,48px)!important;
  line-height:1.08!important;
}
/* Body column */
body.theme-home .pos-body .g-lead{max-width:none}
body.theme-home .pos-body p:first-child{
  font-size:clamp(18px,1.5vw,21px);
  color:rgba(10,14,26,.82);
}
/* Closing statement — thesis with a left accent bar */
body.theme-home .pos-thesis{
  margin-top:2rem!important;
  padding-left:22px;
  border-left:3px solid var(--orange);
  font-size:clamp(20px,2vw,26px)!important;
  line-height:1.32;
  letter-spacing:-.018em;
  color:var(--navy);
}
body.theme-home .pos-thesis strong{font-weight:500}

@media(max-width:860px){
  body.theme-home .pos-grid{grid-template-columns:1fr;gap:24px}
}

/* ============================================================
   HOME PAGE — section text polish (hierarchy + readability)
   Applies across every section's body copy on the homepage.
   ============================================================ */
/* Section 02 — trust band statement */
body.theme-home .trust-band p{
  font-size:clamp(18px,1.7vw,23px);
  line-height:1.5;
  letter-spacing:-.012em;
}

/* Sections 05 & 07 — ledger lists: crisper titles, easier descriptions */
body.theme-home .gledger-row{padding:26px 0}
body.theme-home .g-title{
  font-weight:500;
  font-size:clamp(17px,1.5vw,21px);
  letter-spacing:-.018em;
}
body.theme-home .g-desc{
  color:rgba(10,14,26,.66);
  line-height:1.62;
  font-size:.97rem;
}

/* Section 04 — who-we-serve cards */
body.theme-home .hc-h3{line-height:1.2;letter-spacing:-.02em}
body.theme-home .hc-body{
  font-size:15.5px;
  line-height:1.62;
  color:rgba(10,14,26,.7);
  max-width:440px;
}
body.theme-home .hc-tag{opacity:.8;letter-spacing:.08em}

/* Section 08 — credential chips */
body.theme-home .creds .item{letter-spacing:.01em}

/* Section 09 — FAQ: clearer questions, more readable answers */
body.theme-home .faq-q{font-size:clamp(17px,1.5vw,20px);letter-spacing:-.015em}
body.theme-home .faq-a-inner{
  font-weight:400;
  font-size:15.5px;
  line-height:1.7;
  color:rgba(10,14,26,.72);
}


/* Width wrapper to match the brand 1440 / 0 36px grid (section-pad adds no padding) */
.wrap{max-width:1440px;margin:0 auto;padding:0 36px}
@media(max-width:700px){.wrap{padding:0 22px}}
.section-pad.section-tight{padding:84px 0}