:root {
  
  --ink:#0A1F44;          
  --body:#2E4060;         
  --muted:#55618C;        
  --quiet:#6B7699;        
  --blue:#1C5FCC;         
  --blue-d:#1550B0;       
  --blue-wash:#EAEEF8;    
  --blue-pale:#C0D8F8;    
  --line:#DCE3F2;         
  --line-hover:#C7D7F2;   
  --line-soft:#EEF2F8;    
  --dot:#D3DCEC;          
  --bg:#FFFFFF;
  --bg-alt:#F5F7FC;       

  
  --on-dark:#FFFFFF;
  --on-dark-soft:#C3D0E8;
  --on-dark-line:#2E4874;
  --on-dark-line-hover:#5B7CB5;

  
  --flag:#8A5A00;
  --flag-line:#E8DCB8;
  --flag-bg:#FFFBF0;
  --flag-rule:#C9A227;

  
  --typed:#12A06A;

  
  --rail:1120px;          
  --rail-prose:720px;     
  --rail-intro:860px;     
  --gutter:24px;
  --gutter-sm:18px;

  
  --h1:clamp(34px,4.4vw,56px);
  --h2:clamp(26px,2.9vw,38px);
  --h3:21px;              
  --h4:17px;
  --lead:clamp(17px,1.6vw,20px);   
  --text:17px;
  --small:14.5px;
  --micro:12px;           

  --lh-tight:1.15;
  --lh-head:1.25;
  --lh-body:1.62;    

  
  --band:72px;
  --band-sm:44px;
  --stack:28px;           
  --stack-sm:18px;

  
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 26px -14px rgba(10,31,68,.22);
  --focus:0 0 0 3px rgba(28,95,204,.18);

  
  --t:.16s;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:var(--text);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
}

.band{padding:var(--band) 0}
.band-alt{padding:var(--band) 0;background:var(--bg-alt)}
.wrap{max-width:var(--rail);margin:0 auto;padding:0 var(--gutter)}
.prose{max-width:var(--rail-prose)}
.intro{max-width:var(--rail-intro)}

h1,h2,h3,h4{color:var(--ink);margin:0 0 var(--stack-sm);letter-spacing:-.02em;font-weight:800}
h1{font-size:var(--h1);line-height:var(--lh-tight);letter-spacing:-.03em}
h2{font-size:var(--h2);line-height:var(--lh-head)}
h3{font-size:var(--h3);line-height:1.3;letter-spacing:-.01em}
h4{font-size:var(--h4);line-height:1.35}
p{margin:0 0 var(--stack-sm)}
.lead{font-size:var(--lead);color:var(--body);line-height:1.65}
.sec-intro{font-size:var(--lead);color:var(--muted);max-width:var(--rail-intro);margin-bottom:var(--stack)}

.eyebrow{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 10px}

.grid{display:grid;gap:16px;grid-auto-rows:1fr}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  display:flex;flex-direction:column;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.card:hover{border-color:var(--line-hover);box-shadow:var(--shadow);transform:translateY(-2px)}
.card:focus-within{border-color:var(--blue);box-shadow:var(--focus)}
.card p{color:var(--muted);font-size:var(--small)}
.card-sm{padding:17px 18px}
.card-sm h3{font-size:var(--h4)}

.chip{
  width:38px;height:38px;border-radius:11px;background:var(--blue-wash);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:13px;flex:0 0 auto;
}
.chip svg{width:19px;height:19px}

.ticks{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
.ticks li{position:relative;padding-left:18px;font-size:var(--small);color:var(--body);line-height:1.45}
.ticks li::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--blue);opacity:.5}

.link{
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--small);font-weight:700;color:var(--blue);text-decoration:none;
  padding:7px 0;min-height:24px;border-radius:5px;transition:color var(--t) var(--ease);
}
.link span{transition:transform var(--t) var(--ease)}
.link:hover{color:var(--blue-d)}
.card:hover .link span{transform:translateX(3px)}
.link:focus-visible,.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:11px;
  font-size:14px;font-weight:700;text-decoration:none;padding:12px 24px;min-height:24px;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.btn-p{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.btn-p:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn-s{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-s:hover{border-color:#C7D7F2}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--stack-sm)}

.note{font-size:var(--small);color:var(--muted);margin-top:var(--stack-sm)}

.faq{display:flex;flex-direction:column;gap:8px;max-width:var(--rail-prose)}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;background:#fff}
.faq summary{
  display:flex;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;
  font-weight:700;color:var(--ink);font-size:14.5px;padding:3px 0;min-height:24px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:800;color:var(--muted)}
.faq details[open] summary::after{content:'\2212'}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.faq details[open]{border-color:#C0D8F8;background:var(--bg-alt)}
.faq p{font-size:var(--small);color:var(--body);margin:10px 0 2px}

@media(max-width:1000px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .band,.band-alt{padding:var(--band-sm) 0}
  .wrap{padding:0 var(--gutter-sm)}
  .grid-3,.grid-2{grid-template-columns:1fr;grid-auto-rows:auto}
  .card{padding:18px 16px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .card:hover{transform:none}
  .card:hover .link span{transform:none}
}

:root{
  --btn-h:46px;
  --btn-h-sm:38px;
  --btn-r:10px;

  
  --client-slot-w:176px;  --client-slot-h:56px;
  --client-max-w:168px;
  --tool-slot-w:136px;    --tool-slot-h:44px;
  --tool-max-w:126px;
  --logo-s:1;             
}

.btn{min-height:var(--btn-h);padding:0 26px;border-radius:var(--btn-r);
  font-size:15px;font-weight:700;letter-spacing:-.005em}
.btn-sm{min-height:var(--btn-h-sm);padding:0 18px;font-size:14px}
.btn-t{background:none;border:0;color:var(--blue);padding:0 2px;min-height:var(--btn-h-sm);
  font-weight:700;font-size:14.5px;text-decoration:none;display:inline-flex;
  align-items:center;gap:6px}
.btn-t:hover{color:var(--blue-d);text-decoration:underline}

.svc5{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.svc5>.card{grid-column:span 2}
.svc5>.card:nth-child(4){grid-column:2/4}
.svc5>.card:nth-child(5){grid-column:4/6}

@supports(grid-template-rows:subgrid){
  
  
  .svc5{grid-template-rows:repeat(5,auto)}
  .svc5>.card{display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:0}
  .svc5>.card:nth-child(4),.svc5>.card:nth-child(5){grid-row:6/span 5}
}
@supports not (grid-template-rows:subgrid){
  .svc5{grid-auto-rows:1fr}
}
.svc5 .card{padding:24px 22px}

.svc-art{display:block;width:96px;height:64px;margin:0 0 12px}
.svc5 h3{margin:0 0 12px}
.svc-trigger{font-size:var(--small);color:var(--muted);margin:0 0 16px;line-height:1.5}
.svc-row{border-top:1px solid var(--line-soft);padding:13px 0 0;margin:0 0 14px}
.svc-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--quiet);margin-bottom:6px}
.svc-out{font-size:var(--text);font-weight:600;color:var(--ink);line-height:1.45;margin:0}
.svc-own{margin:0;padding:0;list-style:none;font-size:var(--small);color:var(--body)}
.svc-own li{position:relative;padding-left:16px;margin-bottom:5px;line-height:1.45}
.svc-own li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--blue-pale)}
.svc-own li:last-child{margin-bottom:0}

.svc5 .link{align-self:end;padding-top:14px}

@media(max-width:1000px){
  
  .svc5{grid-template-columns:repeat(4,1fr)}
  .svc5>.card:nth-child(4){grid-column:auto/span 2;grid-row:auto/span 5}
  .svc5>.card:nth-child(5){grid-column:2/4;grid-row:11/span 5}
}
@media(max-width:720px){
  
  .svc5{grid-template-columns:1fr;grid-auto-rows:auto}
  .svc5>.card,
  .svc5>.card:nth-child(4),
  .svc5>.card:nth-child(5){grid-column:1/-1;grid-row:auto/span 5}
}
.sub-lbl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--quiet);margin:26px 0 12px}

.logorow{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  justify-items:center;gap:10px 18px}
.logoslot{width:100%;min-width:0;max-width:var(--client-slot-w);height:var(--client-slot-h);
  display:flex;align-items:center;justify-content:center}

.logoslot img{height:calc(var(--ch) * var(--logo-s));width:auto;
  
  max-width:min(var(--client-max-w),100%);object-fit:contain;opacity:1}

.logoslot.wide{width:208px}
.logoslot.wide img{max-width:200px}

.toolrow{display:grid;grid-template-columns:repeat(8,1fr);align-items:center;
  justify-items:center;gap:6px 16px}

.toolslot{width:100%;min-width:0;max-width:var(--tool-slot-w);
  height:var(--tool-slot-h);display:flex;align-items:center;justify-content:center;
  
  padding:0 5px}

.toolslot img{height:calc(var(--th) * var(--tool-s));width:auto;
  
  max-width:min(var(--tool-max-w),100%);object-fit:contain;
  
  filter:grayscale(1) contrast(.72) brightness(.82);opacity:.78}
.toolrow{--tool-s:1.45}

.toolrow-8 .toolslot.x8{display:none}

@media(max-width:900px){ .toolrow{grid-template-columns:repeat(4,1fr)} }

@media(max-width:720px){
  :root{
    --client-slot-w:140px; --client-slot-h:46px; --client-max-w:132px;
    --tool-slot-w:104px;   --tool-slot-h:38px;   --tool-max-w:98px;
    --logo-s:.82;
  }
  .toolrow{--tool-s:1.1;gap:4px 10px}
  .logoslot.wide{width:164px}
  .logoslot.wide img{max-width:158px}
  .logorow{grid-template-columns:repeat(2,1fr);gap:6px 14px}
}

/* ----------------------------------------------------------------------------
   LEGACY TOKEN ALIASES, added 2 Nov 2026 to fix a silent, sitewide regression.

   The v2 port moved to new token names, and the pages' own inline CSS kept
   referencing the old --g* grey scale, --accent and --fd. Those were defined
   NOWHERE, so every declaration using one was INVALID and the browser dropped
   it. Not overridden, dropped: the property simply never applied.

   16 such declarations on index.html alone. The one Abu spotted was
   .fq-gcard{border:1px solid var(--g200)} -- the FAQ cards rendered with
   border:0px none, so the "little light framing around the questions" was
   gone. Six more were var(--fd), the display font, so those headings silently
   fell back to the body face.

   Nothing in any checker catches this. The markup is right, the rule is right,
   the diff is clean, and only the computed value shows it. It took looking at
   a rendered page to find.

   Values recovered from the pre-redesign baseline ac1665a, unchanged.
   ---------------------------------------------------------------------------- */
:root{
  --g50:#F5F7FC;  --g55:#F5F7FC;  --g100:#EEF2F8; --g200:#DCE3F2;
  --g300:#C8D3E3; --g400:#6B7699; --g500:#55618C; --g600:#39456E;
  --g700:#2E4060; --g800:#1A2B45; --g900:#0A1F44;
  --accent:#1C5FCC;
  --fd:'Plus Jakarta Sans',system-ui,sans-serif;
}