/* VFIntel site, design language 2026-09-13. One hand, one system. */
:root{
  /* VFIntel, one system two surfaces. This is the dark surface: website,
     product, consoles. Monochrome plus one accent. Locked 2026-09-20. */
  --paper:#000000; --paper-2:rgba(255,255,255,.05); --ink:#FFFFFF; --ink-2:#C9C9CD; --line:rgba(255,255,255,.14); --white:rgba(255,255,255,.10);
  --ink-3:#717173; --accent:#6FA0FF; --soft:rgba(255,255,255,.05); --edge:rgba(255,255,255,.34);
  --pay:#FFFFFF; --ins:#FFFFFF; --cred:#FFFFFF; --id:#FFFFFF; --bank:#FFFFFF; --lease:#FFFFFF;
  --pay-t:rgba(255,255,255,.10); --ins-t:rgba(255,255,255,.10); --cred-t:rgba(255,255,255,.10); --id-t:rgba(255,255,255,.10); --bank-t:rgba(255,255,255,.10); --lease-t:rgba(255,255,255,.10);
  --shadow:none; --shadow-lg:none;
  --font:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif;
  --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:19px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
.wrap-wide{max-width:1400px;margin:0 auto;padding-inline:24px}
section{padding-block:120px}
.band{background:var(--paper-2)}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 18px}
h1{font-size:clamp(48px,7vw,96px);line-height:.98;letter-spacing:-.035em;font-weight:700;margin:0;text-wrap:balance}
h2{font-size:clamp(38px,4.6vw,64px);line-height:1.02;letter-spacing:-.03em;font-weight:700;margin:0 0 20px;max-width:18ch;text-wrap:balance}
h3{font-size:30px;letter-spacing:-.01em;font-weight:600;margin:0 0 10px}
.lead{font-size:clamp(20px,1.8vw,28px);line-height:1.38;max-width:62ch;margin:0}
.lead b{font-weight:600}
.muted{color:var(--ink-2)}
p{margin:0 0 14px}
.src{font-size:15px;color:var(--ink-2);margin-top:18px}
.photo{border-radius:var(--radius);object-fit:cover;box-shadow:var(--shadow)}
.frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--paper-2);aspect-ratio:16/9;width:100%}
.frame video,.frame iframe{width:100%;height:100%;object-fit:cover;display:block}
.frame.dark{background:#0B0E12}
.tile{background:var(--white);border-radius:24px;padding:32px 36px;box-shadow:var(--shadow)}
.tile.flat{background:var(--paper-2);box-shadow:none}
.tile h4{margin:0 0 8px;font-size:24px;font-weight:600;letter-spacing:-.01em}
.tile p{margin:0;font-size:18px;line-height:1.45;color:var(--ink-2)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.stat{font-size:clamp(48px,6vw,92px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat-l{font-size:19px;line-height:1.35;margin-top:10px;max-width:38ch}
.chip{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;padding:10px 18px;border-radius:999px;background:var(--white);box-shadow:var(--shadow)}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.c-pay{color:var(--pay)} .c-ins{color:var(--ins)} .c-cred{color:var(--cred)} .c-id{color:var(--id)} .c-bank{color:var(--bank)} .c-lease{color:var(--lease)}
.b-pay{background:var(--pay)} .b-ins{background:var(--ins)} .b-cred{background:var(--cred)} .b-id{background:var(--id)} .b-bank{background:var(--bank)} .b-lease{background:var(--lease)}
.stripe{height:6px;border-radius:3px}
/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(247,245,240,.82);backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid rgba(218,212,196,.6)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-weight:700;font-size:22px;letter-spacing:-.02em;text-decoration:none}
.nav{display:flex;gap:26px;font-size:16px;font-weight:500}
.nav a{text-decoration:none;color:var(--ink-2)} .nav a.on,.nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;padding:14px 22px;border-radius:999px;font-size:17px}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
/* footer */
.ftr{padding-block:64px 48px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);line-height:1.5}
.ftr .wrap{display:grid;gap:24px}
/* reveal */
.rv{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  html.rv-on .rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0s)}
  html.rv-on .rv.in{opacity:1;transform:none}
}
/* phone */
@media (max-width:820px){
  body{font-size:17px}
  section{padding-block:64px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .tile{padding:24px}
}

/* round 3: logo lockup, benefit blocks */
.brand{display:inline-flex;align-items:center;gap:9px}
.brand .mark{height:28px;width:auto;display:block}
.now{background:var(--white);border-radius:24px;padding:26px 30px;box-shadow:var(--shadow)}
.now h4{margin:0 0 12px;font-size:20px;font-weight:600;letter-spacing:.02em}
.now ul{margin:0;padding:0;list-style:none}
.now li{padding:10px 0;border-top:1.5px solid var(--line);font-size:18px;line-height:1.4}
.now li b{font-weight:600}

/* menu on phone and tablet */
.menu-btn{display:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:12px;background:#fff;align-items:center;justify-content:center;cursor:pointer;padding:0;margin-left:auto}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .2s ease,opacity .2s ease;content:""}
.menu-btn span::before{position:absolute;top:-6px} .menu-btn span::after{position:absolute;top:6px}
body.menu-open .menu-btn span{background:transparent}
body.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1023px){
  .hdr .wrap{gap:12px}
  .menu-btn{display:flex}
  .nav{display:none;position:absolute;left:0;right:0;top:72px;height:calc(100vh - 72px);background:var(--paper);flex-direction:column;gap:0;padding:12px 20px 40px;overflow:auto;z-index:30;border-top:1px solid var(--line)}
  body.menu-open .nav{display:flex}
  body.menu-open{overflow:hidden}
  .nav a{font-size:22px;font-weight:600;color:var(--ink);padding:16px 4px;border-bottom:1.5px solid var(--line)}
  .nav a.btn{margin-top:16px;border:0;padding:16px 20px;border-radius:16px;text-align:center;justify-content:center;font-size:18px !important}
  .nav a.btn.ghost{border:1.5px solid var(--line);margin-top:20px}
  .nav a.btn:not(.ghost){color:#fff}
  .nav .who{padding:18px 4px;font-size:18px}
  .nav span{display:block}
}
/* tablet */
@media (min-width:821px) and (max-width:1023px){
  .wrap{padding-inline:32px}
  .g4{grid-template-columns:1fr 1fr}
}

/* ===== 2026-09-14 front door additions ===== */
h2{max-width:26ch;font-size:clamp(34px,4vw,56px)}
.eyebrow.c-lease{color:var(--lease)} .eyebrow.c-id{color:var(--id)} .eyebrow.c-bank{color:var(--bank)} .eyebrow.c-cred{color:var(--cred)} .eyebrow.c-pay{color:var(--pay)} .eyebrow.c-ins{color:var(--ins)}
.hero{position:relative;overflow:hidden;padding-block:72px 0}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding-block:40px 96px}
.hero h1{font-size:clamp(36px,4.2vw,60px)}
.hero .lead{margin:22px 0 0;color:var(--ink-2)}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero .frame{aspect-ratio:16/10}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;display:block}
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.door{display:flex;flex-direction:column;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:inherit;border-top:6px solid var(--line);transition:transform .25s ease,box-shadow .25s ease}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.door.lease{border-top-color:var(--lease)} .door.id{border-top-color:var(--id)} .door.bank{border-top-color:var(--bank)} .door.cred{border-top-color:var(--cred)}
.door img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.door .in{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.door h3{font-size:24px;margin:0;letter-spacing:-.015em}
.door p{margin:0;font-size:17px;color:var(--ink-2);line-height:1.4;flex:1}
.door .go{font-weight:600;font-size:16px;margin-top:6px}
.door.lease .go{color:var(--lease)} .door.id .go{color:var(--id)} .door.bank .go{color:var(--bank)} .door.cred .go{color:#9a7210}
.jobs{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.jobs .chip{font-size:15px;padding:9px 16px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.rev>.frame,.split.rev>.photo{order:-1}
.split .lead{color:var(--ink-2)}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.four .tile{padding:0;overflow:hidden;display:flex;flex-direction:column}
.four .tile img{width:100%;aspect-ratio:16/11;object-fit:cover}
.four .tile .in{padding:22px 24px 26px}
.four .tile h4{font-size:21px;margin:0 0 8px;display:flex;gap:10px;align-items:flex-start;line-height:1.2}
.four .tile h4 .dot{margin-top:6px}
.four .tile p{font-size:16px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.steps3 .tile{position:relative;padding-top:38px}
.steps3 .num{position:absolute;top:-18px;left:28px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:700;font-size:18px}
.steps3 h4{font-size:22px;margin:0 0 8px}
.honest{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.honest .big{font-size:clamp(26px,2.6vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 16px;text-wrap:balance}
.honest p{color:var(--ink-2);font-size:19px;max-width:44ch}
.form{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px 40px;display:grid;gap:16px}
.form h3{margin:0 0 4px;font-size:28px;letter-spacing:-.02em}
.form .hint{margin:0 0 10px;color:var(--ink-2);font-size:17px}
.form label{display:grid;gap:6px;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.form input,.form select{font:inherit;font-size:17px;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);width:100%}
.form input:focus,.form select:focus{outline:2px solid var(--ink);outline-offset:1px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form button{font:inherit;font-weight:600;font-size:17px;padding:16px 24px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);cursor:pointer;justify-self:start}
.form .done{display:none;padding:24px 0 8px;font-size:22px;font-weight:600}
.form.sent .done{display:block} .form.sent .fields{display:none}
.form .fields{display:grid;gap:16px}
.seg{display:inline-flex;background:var(--paper-2);border-radius:999px;padding:4px;gap:4px}
.seg button{font:inherit;font-weight:600;font-size:15px;border:0;background:transparent;padding:10px 18px;border-radius:999px;cursor:pointer;color:var(--ink-2)}
.seg button.on{background:var(--white);color:var(--ink);box-shadow:var(--shadow)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.two .tile h4{display:flex;align-items:center;gap:10px}
.two .tile ul{margin:10px 0 0;padding:0;list-style:none}
.two .tile li{padding:10px 0;border-top:1.5px solid var(--line);font-size:17px;color:var(--ink)}
.partners{display:grid;gap:80px;margin-top:56px}
.partner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;scroll-margin-top:96px}
.partner:nth-child(even) .frame{order:2}
.partner h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.025em;margin:0 0 14px;display:flex;align-items:center;gap:12px}
.partner ul{margin:0;padding:0;list-style:none}
.partner li{padding:12px 0;border-top:1.5px solid var(--line);font-size:18px;line-height:1.4}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tabs a{text-decoration:none}
.beat{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.beat .lead{color:var(--ink-2)}
.stats3{display:grid;gap:14px;margin-top:22px}
.stat3{display:flex;align-items:baseline;gap:14px}
.stat3 .num{font-size:40px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:2.4ch}
.stat3 .lab{font-size:16px;color:var(--ink-2);max-width:36ch}
.towers{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-top:36px}
.towers img{width:100%;display:block}
.tpin{position:absolute;transform:translateX(-50%)}
.amber{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-width:480px;margin-top:22px}
.amber i{aspect-ratio:1;border-radius:8px;background:var(--cred);display:block}
.story6{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.story6 .tile{padding:0;overflow:hidden}
.story6 img{width:100%;aspect-ratio:16/10;object-fit:cover}
.story6 .in{padding:20px 24px 24px}
.story6 .k{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px}
.story6 h4{font-size:21px;margin:0 0 6px}
.story6 p{font-size:16px}
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.who .tile h4{display:flex;gap:10px;align-items:center}
.cross{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.cross a{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--white);border-radius:20px;padding:22px 26px;box-shadow:var(--shadow);text-decoration:none;color:inherit;font-weight:600;font-size:19px}
.cross a span:last-child{color:var(--ink-2);font-weight:500;font-size:16px}
.close{text-align:center}
.close h2{max-width:none;font-size:clamp(44px,6.4vw,84px);margin:0 auto 20px}
.close p{color:var(--ink-2);font-size:20px;max-width:48ch;margin:0 auto}
.ftr .wrap{grid-template-columns:1fr;gap:18px}
.ftr .links{display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:600;color:var(--ink)}
.ftr .links a{text-decoration:none}
.nav a.here{color:var(--ink)}
/* north star strip: the company line, on every page, above everything else on it */
.ns{background:var(--paper-2);border-bottom:1px solid var(--line)}
.ns .wrap{display:flex;gap:4px 24px;align-items:baseline;flex-wrap:wrap;padding-block:22px}
.ns b{color:var(--ink);font-size:clamp(23px,2.3vw,32px);font-weight:700;letter-spacing:-.028em;line-height:1.08}
.ns span{color:var(--ink-2);font-size:17px;line-height:1.35;flex:1 1 320px;min-width:0}
@media (max-width:680px){.ns .wrap{padding-block:18px;gap:6px}.ns span{font-size:16px}}
/* the line that carries a section, when it is not the heading */
.keyline{font-size:clamp(24px,2.4vw,34px);font-weight:600;letter-spacing:-.022em;line-height:1.24;color:var(--ink);margin:26px 0 0;max-width:48ch;text-wrap:balance}
.keyline + .lead{margin-top:14px}
/* the sentence directly under a hero headline, heavier than the body that follows */
.hero .sub{font-size:clamp(21px,1.9vw,30px);line-height:1.3;font-weight:600;letter-spacing:-.018em;color:var(--ink);max-width:54ch;margin:26px 0 0}

@media (max-width:1100px){.doors{grid-template-columns:1fr 1fr}.four{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;gap:28px;padding-block:24px 64px}
  .hero .frame{order:-1}
  .doors,.four,.steps3,.two,.split,.honest,.partner,.story6,.who,.cross,.beat{grid-template-columns:1fr}
  .partner:nth-child(even) .frame{order:0}
  .form{padding:26px 22px} .form .row{grid-template-columns:1fr}
  .split.rev>.frame,.split.rev>.photo{order:0}
}

.plain{margin:22px 0 0;padding:0;list-style:none}
.plain li{padding:11px 0;border-top:1.5px solid var(--line);font-size:18px;line-height:1.4}

.hdr .nav{align-items:center}
.hdr .hdr-btn{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:7px 14px;font-size:16px;font-weight:500;border-radius:999px}
.hdr .hdr-btn:hover{background:var(--ink);color:var(--paper)}

.people{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.person{position:relative;padding-top:30px}
.person .ini{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;margin-bottom:14px}
.person h4{margin:0 0 2px;font-size:22px}
.person .role{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.person p{font-size:16px}
.plain li b{font-weight:600;color:var(--ink)}
@media (max-width:1023px){.people{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.people{grid-template-columns:1fr}}

/* the three panels of the size picture, arriving in the order the argument runs */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;align-items:start}
.panels .pan{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2)}
.panels img{width:100%;display:block}
@media (max-width:860px){.panels{grid-template-columns:1fr;gap:16px}}

/* six domains stacking into one, on the financial partners page */
.cubeframe{width:100%;background:var(--paper-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 8px}
.cubesvg{width:100%;height:auto;display:block;font-family:var(--font)}
.cubesvg .cl{font-size:26px;font-weight:600;letter-spacing:-.01em;fill:var(--ink)}
.cubesvg .ct{font-size:30px;font-weight:700;letter-spacing:-.02em;fill:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  html.rv-on .cubesvg .slab{opacity:0;transform:translate(calc(var(--from) * 190px), -70px);transform-box:view-box;transition:opacity .5s ease,transform .75s cubic-bezier(.2,.9,.3,1.06);transition-delay:var(--d,0s)}
  html.rv-on .rv.in .cubesvg .slab{opacity:1;transform:none}
  html.rv-on .cubesvg .seal,html.rv-on .cubesvg .gnd{opacity:0;transition:opacity .7s ease;transition-delay:1.15s}
  html.rv-on .rv.in .cubesvg .seal{opacity:1}
  html.rv-on .rv.in .cubesvg .gnd{opacity:.07}
}
@media (max-width:860px){.cubesvg .cl{font-size:30px}.cubesvg .ct{font-size:34px}}
.panels video{width:100%;display:block;background:var(--paper-2)}

/* the three panels of the size picture, arriving in the order the argument runs */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;align-items:start}
.panels .pan{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2)}
.panels img{width:100%;display:block}
@media (max-width:860px){.panels{grid-template-columns:1fr;gap:16px}}

/* six domains stacking into one, on the financial partners page */
.cubeframe{width:100%;background:var(--paper-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 8px}
.cubesvg{width:100%;height:auto;display:block;font-family:var(--font)}
.cubesvg .cl{font-size:26px;font-weight:600;letter-spacing:-.01em;fill:var(--ink)}
.cubesvg .ct{font-size:30px;font-weight:700;letter-spacing:-.02em;fill:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  html.rv-on .cubesvg .slab{opacity:0;transform:translate(calc(var(--from) * 190px), -70px);transform-box:view-box;transition:opacity .5s ease,transform .75s cubic-bezier(.2,.9,.3,1.06);transition-delay:var(--d,0s)}
  html.rv-on .rv.in .cubesvg .slab{opacity:1;transform:none}
  html.rv-on .cubesvg .seal,html.rv-on .cubesvg .gnd{opacity:0;transition:opacity .7s ease;transition-delay:1.15s}
  html.rv-on .rv.in .cubesvg .seal{opacity:1}
  html.rv-on .rv.in .cubesvg .gnd{opacity:.07}
}
@media (max-width:860px){.cubesvg .cl{font-size:30px}.cubesvg .ct{font-size:34px}}
.panels video{width:100%;display:block;background:var(--paper-2)}

}
.frame video{width:100%;height:100%;object-fit:cover;display:block}
/* what each trade keeps, under the where we fit picture */
.roles{display:grid;grid-template-columns:repeat(6,1fr);gap:20px 22px;margin-top:26px}
.roles .role{display:flex;flex-direction:column;gap:6px}
.roles .rn{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.roles .rw{font-size:15px;color:var(--ink-2);line-height:1.35}
@media (max-width:1100px){.roles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.roles{grid-template-columns:repeat(2,1fr);gap:18px 16px}}

/* ===== navigation: a menu that looks like a menu ===== */
.hdr .wrap{height:78px}
.nav{gap:24px;font-size:17px;font-weight:600;align-items:center}
.nav a{color:var(--ink);text-decoration:none;position:relative;padding-block:6px;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.nav a:hover::after,.nav a.here::after{transform:scaleX(1)}
.nav a.here{color:var(--ink)}
.nav a.btn::after,.nav a.nav-sign::after{display:none}
.nav-sep{width:1px;height:22px;background:var(--line);flex:none}
.nav a.nav-sign{color:var(--ink-2);font-weight:500}
.nav a.nav-sign:hover{color:var(--ink)}
.hdr .hdr-btn{background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);padding:10px 20px;font-size:16px;font-weight:600}
.hdr .hdr-btn:hover{background:transparent;color:var(--ink)}
@media (max-width:1100px){
  .hdr .wrap{gap:12px}
  .menu-btn{display:flex}
  .nav{display:none;position:absolute;left:0;right:0;top:78px;height:calc(100dvh - 78px);background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:14px 24px 48px;overflow:auto;z-index:30;border-top:1px solid var(--line)}
  body.menu-open .nav{display:flex}
  .nav a{font-size:24px;font-weight:600;padding:18px 2px;border-bottom:1.5px solid var(--line)}
  .nav a::after{display:none}
  .nav a.here{color:var(--lease)}
  .nav-sep{display:none}
  .nav a.nav-sign{font-size:20px;color:var(--ink-2)}
  .nav a.btn.hdr-btn{margin-top:22px;border-radius:999px;padding:16px 22px;text-align:center;justify-content:center;font-size:18px;border-bottom:1.5px solid var(--ink)}
}
@media (min-width:1101px){.menu-btn{display:none}}

/* ===== the proportions of a financial company: big headline, quiet body ===== */
.hero h1{font-size:clamp(40px,4.8vw,72px);line-height:.99;letter-spacing:-.038em}
h2{font-size:clamp(34px,4.1vw,60px);letter-spacing:-.032em;max-width:22ch}
.lead{font-size:clamp(19px,1.35vw,22px);line-height:1.5;max-width:60ch}
.hero .lead{font-size:clamp(18px,1.25vw,20px);line-height:1.55;max-width:56ch}
.hero .sub{font-size:clamp(21px,1.9vw,30px)}
.keyline{font-size:clamp(23px,2.2vw,32px)}
.split .lead,.beat .lead{max-width:56ch}
section{padding-block:132px}
.close h2{max-width:20ch}
.honest .big{font-size:clamp(25px,2.4vw,34px)}
@media (max-width:820px){section{padding-block:84px}h2{max-width:none}}

/* ===== menus that open, so nobody has to scroll to find a section ===== */
.nav-item{position:relative;display:flex;align-items:center}
.nav a.nav-top{color:var(--ink);text-decoration:none;position:relative;padding-block:6px;white-space:nowrap}
.nav a.nav-top::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.nav-item:hover a.nav-top::after,.nav a.nav-top.here::after{transform:scaleX(1)}
.drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:18px;opacity:0;visibility:hidden;transition:opacity .18s ease;z-index:40}
.drop-in{background:var(--white);border-radius:22px;box-shadow:var(--shadow-lg);border:1px solid var(--line);padding:12px;min-width:286px;display:flex;flex-direction:column;transform:translateY(-6px);transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.nav-item:hover .drop,.nav-item:focus-within .drop{opacity:1;visibility:visible}
.nav-item:hover .drop-in,.nav-item:focus-within .drop-in{transform:translateY(0)}
.drop a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;line-height:1.25}
.drop a::after{display:none}
.drop a:hover{background:var(--paper-2)}
@media (max-width:1100px){
  .nav-item{display:block}
  .nav a.nav-top{display:block;font-size:24px;font-weight:600;padding:18px 2px;border-bottom:1.5px solid var(--line)}
  .nav a.nav-top.here{color:var(--lease)}
  .drop{position:static;transform:none;padding:6px 0 14px;opacity:1;visibility:visible}
  .drop-in{background:transparent;border:0;box-shadow:none;padding:0;min-width:0;transform:none}
  .drop a{font-size:17px;font-weight:500;color:var(--ink-2);padding:9px 2px 9px 6px;border:0}
  .drop a:hover{background:transparent;color:var(--ink)}
}

/* ===== headings in Archivo: squarer, narrower, less round ===== */
:root{--font-head:"Archivo","Instrument Sans","Helvetica Neue",Arial,sans-serif}
h1,h2,h3,h4,.keyline,.brand,.hero .sub,.nav a.nav-top,.honest .big,.stat,.wm,
.close h2,.tile h4,.person h4,.logo-tile span b{font-family:var(--font-head)}
h1{letter-spacing:-.026em;font-weight:700}
.hero h1{letter-spacing:-.026em}
h2{letter-spacing:-.022em;font-weight:700}
h3,h4{letter-spacing:-.014em}
.keyline{letter-spacing:-.018em;font-weight:600}
.hero .sub{letter-spacing:-.014em}
.brand{letter-spacing:-.018em}
.nav a.nav-top{letter-spacing:-.006em}
.honest .big{letter-spacing:-.018em}
/* figures line up the way a financial page expects */
.stat,.stat3 .num,.steps3 .num,.roles .rn,.ftr,.chip{font-variant-numeric:tabular-nums}
.stat{letter-spacing:-.03em}

/* Footer, 2026-09-16: the menu at the bottom of every page now reads as a menu.
   Same six destinations as the header, each with the places inside it, at a size
   a person actually notices. The legal note stays small, where it belongs. */
.ftr{padding-block:0;border-top:1px solid var(--line);background:var(--paper-2);font-size:15px;color:var(--ink-2);line-height:1.5}
.ftr .wrap{display:block;padding-block:56px 44px}
.ftr-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.ftr-word{display:inline-flex;align-items:baseline;gap:16px;text-decoration:none;font-family:var(--font-head);font-size:27px;font-weight:700;letter-spacing:-.022em;color:var(--ink)}
.ftr-word span{font-family:var(--font-head);font-size:17px;font-weight:600;letter-spacing:-.012em;color:var(--ink-2)}
.ftr-act{display:flex;align-items:center;gap:12px}
.ftr .btn{font-size:15px;padding:11px 20px}
.ftr-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 28px;padding-block:42px 46px}
.ftr-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-width:0}
.ftr-h{margin:0 0 5px;font-family:var(--font-head);font-size:17px;font-weight:700;letter-spacing:-.014em;line-height:1.25}
.ftr-h a{color:var(--ink);text-decoration:none}
.ftr-col a{color:var(--ink-2);text-decoration:none;font-size:15.5px;line-height:1.35}
.ftr-col a:hover,.ftr-h a:hover,.ftr-word:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ftr-legal{border-top:1px solid var(--line);padding-top:26px;display:grid;gap:11px;font-size:13px;line-height:1.6}
.ftr-legal .id{font-size:14px;color:var(--ink);font-weight:600}
.ftr-legal a{color:inherit}
@media (max-width:1080px){
  .ftr-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px}
}
@media (max-width:640px){
  .ftr .wrap{padding-block:44px 36px}
  .ftr-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;padding-block:34px 36px}
  .ftr-word{font-size:23px;gap:12px}
  .ftr-word span{font-size:15px}
  .ftr-top{gap:16px}
  .ftr-act{width:100%}
  .ftr-act .btn{flex:1;justify-content:center}
}

/* Footer, second pass, 2026-09-16. The first rebuild fixed the size and broke
   something else: 39 of its 41 links were the header's links, so the bottom of
   every page was the menu a second time. The header carries every section and
   every place inside it. This carries the eight destinations, once, big enough
   to read, and then gets out of the way. */
.ftr-nav{display:flex;flex-wrap:wrap;gap:14px 40px;padding-block:38px 42px;grid-template-columns:none}
.ftr-nav a{font-family:var(--font-head);font-size:20px;font-weight:600;letter-spacing:-.014em;color:var(--ink);text-decoration:none;line-height:1.3}
.ftr-nav a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:1080px){.ftr-nav{gap:14px 32px}}
@media (max-width:640px){
  .ftr-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;padding-block:30px 34px}
  .ftr-nav a{font-size:17px}
}


/* ================================================================
   2026-09-20. One system, two surfaces, and a page moves between them.
   Black is the ground. A section that changes the subject can stand on
   white instead, and every token flips with it: ink, hairline, card,
   accent. Plus Jakarta Sans at normal tracking. Pills, 20px cards, 12px
   on the small things. Depth is a change of surface or a hairline,
   never a shadow.
   ================================================================ */
:root{--font-head:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif}
html{color-scheme:dark}
body{background:#000;color:#fff;font-family:var(--font)}

/* the white surface. Put `light` on a section and it lands on white. */
.light{
  --paper:#FFFFFF; --paper-2:#F7F7F7; --soft:#F7F7F7;
  --ink:#1F1F1F; --ink-2:#575757; --ink-3:#8A8A8A;
  --line:#E6E6E6; --white:#FFFFFF; --edge:#C4C4C4;
  --accent:#234FA6;
  --pay:#1F1F1F; --ins:#1F1F1F; --cred:#1F1F1F; --id:#1F1F1F; --bank:#1F1F1F; --lease:#1F1F1F;
  background:var(--paper); color:var(--ink);
}
section.light,.light{background:var(--paper);color:var(--ink)}
.light a{color:inherit}

/* tracking back to normal, weight off 700 */
h1,h2,h3,h4,.keyline,.brand,.hero .sub,.hero h1,.nav a,.nav a.nav-top,.honest .big,
.stat,.stat3 .num,.close h2,.tile h4,.person h4,.ftr-word,.ftr-word span,.ftr-h,
.ftr-nav a,.door h3,.partner h3,.form h3,.cubesvg .cl,.cubesvg .ct,.eyebrow,
.article-copy h2,.article-copy h3,.callout p,.stat-pull .figure,.stat-item .figure{letter-spacing:normal}
h1,.hero h1,h2,.close h2{font-weight:600}
h3,h4,.tile h4,.door h3{font-weight:600}
.stat,.stat3 .num,.stat-pull .figure,.stat-item .figure{font-weight:600}
.eyebrow{letter-spacing:.10em;color:var(--ink-2)}

/* surfaces: a card is a lift in the ground, held by a hairline */
.tile,.now,.form,.cross a,.rn-card,.drop-in,.chip,.door,
.panels .pan,.cubeframe{background:var(--white);border:1px solid var(--line);box-shadow:none}
.tile.flat{background:var(--soft);border:1px solid var(--line)}
.band{background:var(--soft)}
section.light{background:var(--paper)}
.frame{background:var(--paper-2);border:1px solid var(--line);box-shadow:none}
.frame.dark{background:#000}
.photo{box-shadow:0 24px 60px rgba(0,0,0,.30)}
.illus-wide{box-shadow:none;border:1px solid var(--line)}

/* radii */
.tile,.door,.form,.frame,.photo,.now,.cubeframe,.panels .pan,.drop-in,.rn-card,.illus-wide,.band-row img{border-radius:20px}
.cross a,.stat-row,.seg,.menu-btn,.form input,.form select,.callout,.towers{border-radius:12px}

/* the door cards lose the six coloured thresholds. The label carries it now. */
.door{border-top:1px solid var(--line)}
.door.lease,.door.id,.door.bank,.door.cred{border-top-color:var(--line)}
.door .go,.door.lease .go,.door.id .go,.door.bank .go,.door.cred .go{color:var(--ink)}
.door:hover{transform:translateY(-4px);border-color:var(--edge)}

/* header and footer sit outside the rhythm and stay black */
.hdr{background:rgba(0,0,0,.74);border-bottom:1px solid rgba(255,255,255,.14)}
.hdr .wrap{gap:32px}
.brand{flex:none;color:#fff}
.hdr .nav a{color:#fff}
.hdr .nav a.nav-sign{color:#C9C9CD}
.hdr .nav a::after,.hdr .nav a.nav-top::after{background:#fff}
.hdr .nav a.here,.hdr .nav a.nav-top.here{color:#6FA0FF}
.hdr .nav a.here::after,.hdr .nav a.nav-top.here::after{background:#6FA0FF}
.hdr .drop-in{background:#141414;border:1px solid rgba(255,255,255,.14)}
.hdr .drop a{color:#fff}
.hdr .drop a:hover{background:rgba(255,255,255,.08)}
.hdr .nav-sep{background:rgba(255,255,255,.14)}
.menu-btn{background:transparent;border:1px solid rgba(255,255,255,.14)}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{background:#fff}
.ns{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.14)}
.ftr{background:#0A0A0A;border-top:1px solid rgba(255,255,255,.14);color:#C9C9CD}
.ftr-word,.ftr-h a,.ftr-nav a,.ftr-legal .id{color:#fff}
.ftr .btn{background:#fff;color:#000;border:1px solid #fff}
.ftr .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.14)}
.ftr-top,.ftr-legal{border-color:rgba(255,255,255,.14)}

/* buttons: a solid pill in the ink of the surface, a hairline pill beside it */
.btn{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--edge)}
.nav a.btn:not(.ghost),.hdr .hdr-btn{background:#fff;color:#000;border:1px solid #fff}
.hdr .hdr-btn:hover{background:transparent;color:#fff}
.steps3 .num{background:var(--ink);color:var(--paper)}
.form button{background:var(--ink);color:var(--paper)}
.form input,.form select{background:var(--soft);border:1px solid var(--line);color:var(--ink)}
.form input::placeholder{color:var(--ink-3)}
.form input:focus,.form select:focus{outline:2px solid var(--accent);outline-offset:1px}
.seg{background:var(--soft)}
.seg button{color:var(--ink-2)}
.seg button.on{background:var(--ink);color:var(--paper);box-shadow:none}
.person .ini{background:var(--white);color:var(--ink);border:1px solid var(--line)}

/* the one accent, kept for the thing a page is marking */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.amber i{background:var(--accent)}

/* the coloured dot carried the domain. The label carries it now. */
.drop .dot{display:none}
.dot,.b-pay,.b-ins,.b-cred,.b-id,.b-bank,.b-lease{background:var(--ink-2)}
.c-pay,.c-ins,.c-cred,.c-id,.c-bank,.c-lease,
.eyebrow.c-lease,.eyebrow.c-id,.eyebrow.c-bank,.eyebrow.c-cred,.eyebrow.c-pay,.eyebrow.c-ins{color:var(--ink-2)}
.stripe{background:var(--ink-2)}
.drop a{color:var(--ink)}
.drop a:hover{background:var(--soft)}
.nav-sep{background:var(--line)}

/* a chart or an article figure always sits on light, on either surface */
figure.vfi-figure svg,.vfi-figure-svg,.vfi-svg-card svg{background:#FFFFFF;border:1px solid #E6E6E6;border-radius:20px}
.article-copy ul li::before{background:var(--ink-2)}
.callout{background:var(--soft);border:1px solid var(--line)}
.callout .mono{color:var(--accent)}
.stat-pull{border-left:2px solid var(--accent);background:var(--soft);border-radius:0 12px 12px 0}
.stat-row{background:var(--line);border:1px solid var(--line)}
.stat-item{background:var(--white)}
.cubeframe{background:var(--soft)}
.cubesvg .cl{fill:var(--ink)}
.cubesvg .ct{fill:var(--ink-2)}
.panels .pan{background:var(--paper-2)}
.tile p,.door p,.four .tile p,.story6 p,.person p{color:var(--ink-2)}
.sec,.band-row{border-color:var(--line)}

/* A section used to arrive by fading up from the page. On a white section
   that means fading up from black, which flashes. So the white section is
   simply there, and what arrives is the content inside it. */
@media (prefers-reduced-motion:no-preference){
  html.rv-on section.rv.light{opacity:1;transform:none}
  html.rv-on section.rv.light>.wrap,html.rv-on section.rv.light>.wrap-wide{
    opacity:0;transform:translateY(20px);
    transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
  html.rv-on section.rv.light.in>.wrap,html.rv-on section.rv.light.in>.wrap-wide{opacity:1;transform:none}
}

/* the line under an article headline was sitting on its descenders */
.art-head h1{margin-bottom:16px}
.prev-title{margin-top:0}

/* ================================================================
   Two accents, and they mark the two partners who actually sell with
   us. Insurance is blue, credit and lending is amber. Banking, the
   payment networks and the bureaus are integrations, wired once, so
   they stay monochrome, and the page says that without a sentence.
   Colour never carries the meaning on its own: the name is always
   there, so a reader who cannot tell blue from amber loses nothing.
   Blue and amber stay apart under every kind of colour blindness,
   which is the pair the old red and green failed.
   ================================================================ */
:root{--accent-2:#F0A93B}
.light{--accent-2:#B4690E}
.mark-credit{--accent:var(--accent-2)}

/* the mark sits beside the name, and nowhere else */
.mark-ins .dot,.mark-credit .dot{background:var(--accent)}
.mark-ins .eyebrow,.mark-credit .eyebrow{color:var(--ink)}
.mark-ins .eyebrow::before,.mark-credit .eyebrow::before{
  content:"";display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--accent);margin-right:10px}
.mark-ins>div>h3 .dot,.mark-credit>div>h3 .dot{width:14px;height:14px}